:root{
  --ht-bg:#09090d;
  --ht-surface:rgba(255,255,255,.06);
  --ht-surface-2:rgba(255,255,255,.09);
  --ht-border:rgba(255,255,255,.12);
  --ht-text:#fff7fb;
  --ht-muted:rgba(255,247,251,.66);
  --ht-soft:rgba(255,247,251,.42);
  --ht-accent:#ff4fa3;
  --ht-accent-2:#9d6cff;
  --ht-success:#62e6a6;
  --ht-warning:#ffd166;
  --ht-danger:#ff6b7a;
  --ht-radius-sm:14px;
  --ht-radius-md:20px;
  --ht-radius-lg:28px;
  --ht-radius-xl:36px;
  --ht-shadow:0 24px 80px rgba(0,0,0,.42);
  --ht-space-xs:6px;
  --ht-space-sm:10px;
  --ht-space-md:16px;
  --ht-space-lg:24px;
  --ht-space-xl:36px;
}

.ht-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;border:0;border-radius:999px;text-decoration:none;font-weight:850;line-height:1;cursor:pointer;transition:transform .18s ease,background .18s ease,border-color .18s ease,opacity .18s ease;color:var(--ht-text);white-space:nowrap}
.ht-btn:hover{transform:translateY(-1px)}
.ht-btn--sm{padding:.62rem .9rem;font-size:.82rem}.ht-btn--md{padding:.86rem 1.16rem;font-size:.94rem}.ht-btn--lg{padding:1rem 1.35rem;font-size:1rem}
.ht-btn--primary{background:linear-gradient(135deg,var(--ht-accent),var(--ht-accent-2));box-shadow:0 18px 50px rgba(255,79,163,.22)}
.ht-btn--secondary{background:var(--ht-surface-2);border:1px solid var(--ht-border)}
.ht-btn--ghost{background:transparent;border:1px solid var(--ht-border);color:var(--ht-muted)}
.ht-btn--danger{background:rgba(255,107,122,.16);border:1px solid rgba(255,107,122,.28);color:#ffd9df}
.ht-btn__icon{font-size:1.05em;line-height:1}

.ht-form{display:grid;gap:var(--ht-space-md)}
.ht-field{display:grid;gap:.5rem;min-width:0}.ht-field__label{font-size:.86rem;font-weight:800;color:rgba(255,247,251,.82)}.ht-field__label em{font-style:normal;color:var(--ht-accent)}
.ht-input,.ht-textarea,.ht-select{width:100%;box-sizing:border-box;border:1px solid var(--ht-border);background:rgba(255,255,255,.07);color:var(--ht-text);border-radius:18px;padding:.95rem 1rem;font:inherit;outline:none;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;min-width:0}
.ht-textarea{resize:vertical;min-height:118px}.ht-input:focus,.ht-textarea:focus,.ht-select:focus{border-color:rgba(255,79,163,.58);box-shadow:0 0 0 4px rgba(255,79,163,.12);background:rgba(255,255,255,.095)}
.ht-field__hint{font-size:.78rem;color:var(--ht-soft)}.ht-field__error{font-size:.78rem;color:#ffb3bf}.ht-field--error .ht-input{border-color:rgba(255,107,122,.65)}
.ht-check{display:flex;align-items:flex-start;gap:.75rem;color:var(--ht-muted);font-size:.92rem;line-height:1.45}.ht-check input{margin-top:.18rem;accent-color:var(--ht-accent);inline-size:1.05rem;block-size:1.05rem}

.ht-card{background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.045));border:1px solid var(--ht-border);border-radius:var(--ht-radius-lg);box-shadow:var(--ht-shadow);padding:var(--ht-space-lg);min-width:0;overflow:hidden;position:relative}.ht-card--soft{box-shadow:none;background:rgba(255,255,255,.045)}
.ht-badge{display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;border:1px solid var(--ht-border);background:rgba(255,255,255,.07);color:var(--ht-muted);font-size:.76rem;font-weight:850;padding:.44rem .66rem;white-space:nowrap}.ht-badge--hot{background:rgba(255,79,163,.15);border-color:rgba(255,79,163,.32);color:#ffd6e9}.ht-badge--verified{background:rgba(98,230,166,.13);border-color:rgba(98,230,166,.28);color:#c6ffe1}.ht-badge--paid{background:rgba(255,209,102,.13);border-color:rgba(255,209,102,.28);color:#ffe4a3}.ht-badge--adult{background:rgba(255,107,122,.13);border-color:rgba(255,107,122,.28);color:#ffd3d9}
.ht-avatar{display:inline-grid;place-items:center;flex:0 0 auto;border-radius:999px;background:linear-gradient(135deg,rgba(255,79,163,.95),rgba(157,108,255,.95));box-shadow:0 12px 34px rgba(0,0,0,.32);overflow:hidden;color:#fff;font-weight:900}.ht-avatar img{width:100%;height:100%;object-fit:cover}.ht-avatar--xs{width:28px;height:28px;font-size:.75rem}.ht-avatar--sm{width:38px;height:38px;font-size:.9rem}.ht-avatar--md{width:52px;height:52px;font-size:1.1rem}.ht-avatar--lg{width:76px;height:76px;font-size:1.55rem}.ht-avatar--xl{width:112px;height:112px;font-size:2.2rem}
.ht-tabs{display:flex;gap:.55rem;overflow:auto;padding:.25rem;border-radius:999px;scrollbar-width:none}.ht-tabs::-webkit-scrollbar{display:none}.ht-tab{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:.72rem .95rem;color:var(--ht-muted);text-decoration:none;font-size:.88rem;font-weight:850;border:1px solid transparent;white-space:nowrap}.ht-tab.is-active{color:var(--ht-text);background:rgba(255,255,255,.1);border-color:var(--ht-border)}

.ht-demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ht-space-lg)}
.ht-demo-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ht-space-sm)}
@media(max-width:720px){.ht-demo-grid{grid-template-columns:1fr}.ht-card{padding:18px;border-radius:24px}.ht-btn{width:auto}.ht-btn--mobile-full{width:100%}}

/* 0.3.1 — dark select fix */
.ht-select{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  cursor:pointer;
  padding-right:3rem;
  background-color:rgba(255,255,255,.07);
  background-image:
    linear-gradient(135deg, transparent 50%, rgba(255,247,251,.86) 50%),
    linear-gradient(45deg, rgba(255,247,251,.86) 50%, transparent 50%),
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.045));
  background-position:
    calc(100% - 20px) 50%,
    calc(100% - 14px) 50%,
    0 0;
  background-size:6px 6px,6px 6px,100% 100%;
  background-repeat:no-repeat;
}
.ht-select:hover{background-color:rgba(255,255,255,.09)}
.ht-select option,
.ht-select optgroup{
  background:#12131a;
  color:#fff7fb;
}
.ht-select option:checked{background:#251629;color:#fff7fb}
.ht-select::-ms-expand{display:none}
@media (prefers-color-scheme: light){
  .ht-select option,
  .ht-select optgroup{background:#12131a;color:#fff7fb}
}


/* ======================================================================
   HerTime Design System Sprint #1 — shared UI primitives
   ----------------------------------------------------------------------
   This layer intentionally lives after v3.css. It normalizes old classes
   (pink-btn / ghost-btn / icon-btn) and new components (ht-btn / ht-card)
   without forcing templates to be rewritten all at once.
   ====================================================================== */
:root{
  /* canonical palette */
  --ht-color-bg:#07070a;
  --ht-color-surface:rgba(255,255,255,.055);
  --ht-color-surface-2:rgba(255,255,255,.085);
  --ht-color-surface-3:rgba(255,255,255,.115);
  --ht-color-line:rgba(255,255,255,.10);
  --ht-color-line-strong:rgba(255,255,255,.16);
  --ht-color-text:#fff7fb;
  --ht-color-muted:rgba(255,247,251,.66);
  --ht-color-soft:rgba(255,247,251,.44);
  --ht-color-primary:#ff3d8b;
  --ht-color-primary-2:#8b5cf6;
  --ht-color-success:#55f0a6;
  --ht-color-warning:#ffd166;
  --ht-color-danger:#ff6b7a;

  /* canonical radii */
  --ht-r-xs:10px;
  --ht-r-sm:14px;
  --ht-r-md:18px;
  --ht-r-lg:24px;
  --ht-r-xl:30px;
  --ht-r-2xl:36px;
  --ht-r-pill:999px;

  /* canonical spacing */
  --ht-s-1:4px;
  --ht-s-2:8px;
  --ht-s-3:12px;
  --ht-s-4:16px;
  --ht-s-5:24px;
  --ht-s-6:32px;
  --ht-s-7:48px;

  /* motion + shadows */
  --ht-ease:cubic-bezier(.2,.75,.25,1);
  --ht-d-fast:150ms;
  --ht-d-med:220ms;
  --ht-shadow-sm:0 12px 34px rgba(0,0,0,.22);
  --ht-shadow-md:0 22px 72px rgba(0,0,0,.34);
  --ht-shadow-lg:0 30px 100px rgba(0,0,0,.46);
  --ht-glow-primary:0 18px 52px rgba(255,61,139,.24);

  /* backwards compatible aliases used by older CSS */
  --bg:var(--ht-color-bg);
  --panel:var(--ht-color-surface);
  --panel2:var(--ht-color-surface-2);
  --line:var(--ht-color-line);
  --text:var(--ht-color-text);
  --muted:var(--ht-color-muted);
  --pink:var(--ht-color-primary);
  --pink2:#ff77ba;
  --violet:var(--ht-color-primary-2);
  --green:var(--ht-color-success);
  --radius:var(--ht-r-xl);
  --shadow:var(--ht-shadow-lg);
}

/* Buttons — one visual language for new + legacy CTAs */
.ht-btn,
.pink-btn,
.ghost-btn,
.icon-btn,
.mobile-chip-btn,
.account-save-btn,
.account-create-btn,
button.ht-btn,
a.ht-btn{
  -webkit-tap-highlight-color:transparent;
  transition:transform var(--ht-d-fast) var(--ht-ease), box-shadow var(--ht-d-fast) var(--ht-ease), border-color var(--ht-d-fast) var(--ht-ease), background var(--ht-d-fast) var(--ht-ease), opacity var(--ht-d-fast) var(--ht-ease);
}
.ht-btn:hover,
.pink-btn:hover,
.ghost-btn:hover,
.icon-btn:hover,
.mobile-chip-btn:hover,
.account-save-btn:hover,
.account-create-btn:hover{transform:translateY(-1px)}
.ht-btn:active,
.pink-btn:active,
.ghost-btn:active,
.icon-btn:active,
.mobile-chip-btn:active,
.account-save-btn:active,
.account-create-btn:active{transform:translateY(0) scale(.985)}
.ht-btn:focus-visible,
.pink-btn:focus-visible,
.ghost-btn:focus-visible,
.icon-btn:focus-visible,
.mobile-chip-btn:focus-visible,
.account-save-btn:focus-visible,
.account-create-btn:focus-visible,
.ht-input:focus-visible,
.ht-textarea:focus-visible,
.ht-select:focus-visible{outline:0;box-shadow:0 0 0 4px rgba(255,61,139,.16), var(--ht-glow-primary)}

.ht-btn{min-height:44px;border-radius:var(--ht-r-pill);font-weight:900;letter-spacing:-.01em}
.ht-btn--sm{min-height:38px;padding:.62rem .92rem;font-size:.84rem}
.ht-btn--md{min-height:44px;padding:.78rem 1.14rem;font-size:.94rem}
.ht-btn--lg{min-height:50px;padding:.95rem 1.35rem;font-size:1rem}
.ht-btn--primary,
.pink-btn,
.account-save-btn,
.account-create-btn{background:linear-gradient(135deg,var(--ht-color-primary),var(--ht-color-primary-2));color:#fff!important;border:0;box-shadow:var(--ht-glow-primary);font-weight:950;text-decoration:none}
.ht-btn--secondary,
.ghost-btn,
.mobile-chip-btn{background:var(--ht-color-surface-2);border:1px solid var(--ht-color-line);color:var(--ht-color-text)!important;box-shadow:none;text-decoration:none}
.ht-btn--ghost{background:transparent;border:1px solid var(--ht-color-line);color:var(--ht-color-muted)!important;box-shadow:none}
.ht-btn--danger{background:rgba(255,107,122,.14);border:1px solid rgba(255,107,122,.30);color:#ffd8df!important;box-shadow:none}
.ht-btn--success{background:rgba(85,240,166,.14);border:1px solid rgba(85,240,166,.28);color:#caffdf!important;box-shadow:none}
.ht-btn--wide,.pink-btn.wide{width:100%}
.ht-btn.is-disabled,
.pink-btn.is-disabled,
.ghost-btn.is-disabled{opacity:.52;pointer-events:none;filter:saturate(.75)}
.pink-btn.small{min-height:38px;padding:.62rem .92rem;font-size:.84rem}
.ghost-btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:44px;padding:.78rem 1.1rem;border-radius:var(--ht-r-pill);font-weight:900;white-space:nowrap}
.icon-btn,.mobile-chip-btn{display:inline-grid;place-items:center;width:44px;height:44px;min-width:44px;border-radius:var(--ht-r-md);padding:0}

/* Cards / surfaces */
.ht-card,
.ht-surface,
.account-panel,
.profile-card,
.community-card,
.market-card,
.premium-card,
.profile-side-card,
.profile-widget,
.notification-card{
  border-color:var(--ht-color-line)!important;
  box-shadow:var(--ht-shadow-md);
}
.ht-card{border-radius:var(--ht-r-xl);background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.04));}
.ht-card--flat{box-shadow:none;background:rgba(255,255,255,.045)}
.ht-surface{background:var(--ht-color-surface);border:1px solid var(--ht-color-line);border-radius:var(--ht-r-lg)}

/* Badges / chips */
.ht-badge,
.ht-chip,
.account-pill,
.tag,
.profile-chip,
.chat-mode-chip{
  display:inline-flex;align-items:center;justify-content:center;gap:.38rem;border-radius:var(--ht-r-pill);border:1px solid var(--ht-color-line);background:rgba(255,255,255,.075);color:var(--ht-color-muted);font-size:.78rem;font-weight:900;line-height:1;padding:.48rem .72rem;white-space:nowrap;text-decoration:none;
}
.ht-badge--primary,.ht-chip--primary{background:rgba(255,61,139,.15);border-color:rgba(255,61,139,.28);color:#ffd6ea}
.ht-badge--success,.ht-chip--success{background:rgba(85,240,166,.12);border-color:rgba(85,240,166,.26);color:#cbffe3}
.ht-badge--warning,.ht-chip--warning{background:rgba(255,209,102,.12);border-color:rgba(255,209,102,.26);color:#ffe5a6}
.ht-badge--danger,.ht-chip--danger{background:rgba(255,107,122,.13);border-color:rgba(255,107,122,.28);color:#ffd5dc}

/* Forms */
.ht-input,.ht-textarea,.ht-select,
input.ht-input,textarea.ht-textarea,select.ht-select{
  border-radius:var(--ht-r-md);
  border-color:var(--ht-color-line);
  background:rgba(255,255,255,.065);
  min-height:44px;
}
.ht-input::placeholder,.ht-textarea::placeholder{color:rgba(255,247,251,.42)}
.ht-field__label{font-weight:900;color:rgba(255,247,251,.82)}
.ht-field__hint{color:var(--ht-color-soft)}

/* Empty states */
.ht-empty{display:grid;place-items:center;text-align:center;gap:var(--ht-s-3);padding:var(--ht-s-6);border:1px solid var(--ht-color-line);border-radius:var(--ht-r-xl);background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));min-height:220px;color:var(--ht-color-muted)}
.ht-empty__icon{width:58px;height:58px;border-radius:22px;display:grid;place-items:center;background:rgba(255,61,139,.12);box-shadow:inset 0 0 0 1px rgba(255,61,139,.18);font-size:26px;color:#fff}
.ht-empty strong{display:block;color:var(--ht-color-text);font-size:1.25rem;letter-spacing:-.03em}.ht-empty p{margin:0;max-width:360px;line-height:1.55;color:var(--ht-color-muted)}

/* Drawers / modals shared contract */
.ht-drawer,.ht-modal{background:linear-gradient(180deg,rgba(17,17,23,.96),rgba(9,9,13,.96));border:1px solid var(--ht-color-line);box-shadow:var(--ht-shadow-lg);backdrop-filter:blur(24px)}
.ht-drawer{border-radius:var(--ht-r-xl)}.ht-modal{border-radius:var(--ht-r-2xl)}
.ht-backdrop{background:rgba(0,0,0,.56);backdrop-filter:blur(8px)}

/* Skeletons */
.ht-skeleton{position:relative;overflow:hidden;border-radius:var(--ht-r-md);background:rgba(255,255,255,.07)}
.ht-skeleton::after{content:'';position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);animation:htSkeleton 1.25s infinite}
@keyframes htSkeleton{to{transform:translateX(100%)}}

/* Avatar consistency */
.ht-avatar{box-shadow:var(--ht-shadow-sm)}
.ht-avatar.is-online{position:relative}.ht-avatar.is-online::after{content:'';position:absolute;right:2px;bottom:2px;width:11px;height:11px;border-radius:50%;background:var(--ht-color-success);border:2px solid #111118;box-shadow:0 0 0 4px rgba(85,240,166,.12),0 0 16px rgba(85,240,166,.55)}

/* Mobile rules for global CTAs */
@media(max-width:900px){
  .top-actions .ht-btn{display:none!important}
  .ht-btn--mobile-full{width:100%}
  .ht-empty{padding:var(--ht-s-5);border-radius:var(--ht-r-lg);min-height:190px}
  .icon-btn,.mobile-chip-btn{width:42px;height:42px;min-width:42px;border-radius:16px}
}
@media(max-width:640px){
  :root{--ht-r-xl:26px;--ht-r-2xl:30px}
  .ht-btn--lg{min-height:48px}
  .ht-card{border-radius:var(--ht-r-lg);padding:18px}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
}


/* HerTime verified identity mark */
.ht-verified-mark{display:inline-grid;place-items:center;vertical-align:middle;margin-left:.26em;width:1.18em;height:1.18em;border-radius:999px;font-style:normal;font-weight:950;line-height:1;color:#ff77ba;background:radial-gradient(circle at 50% 35%,rgba(255,119,186,.24),rgba(255,47,125,.10) 52%,rgba(255,255,255,.06));border:1px solid rgba(255,119,186,.36);box-shadow:0 0 0 3px rgba(255,47,125,.08),0 8px 22px rgba(255,47,125,.22);cursor:help;position:relative;isolation:isolate}.ht-verified-mark:hover,.ht-verified-mark:focus{outline:none;transform:translateY(-1px);box-shadow:0 0 0 4px rgba(255,47,125,.13),0 12px 30px rgba(255,47,125,.32)}.ht-verified-mark:after{content:attr(title);position:absolute;left:50%;bottom:calc(100% + 9px);transform:translateX(-50%) translateY(4px);z-index:20;white-space:nowrap;pointer-events:none;opacity:0;border:1px solid rgba(255,255,255,.12);background:rgba(10,10,14,.96);color:#fff;border-radius:999px;padding:8px 10px;font-size:12px;font-weight:850;letter-spacing:-.01em;box-shadow:0 18px 44px rgba(0,0,0,.45);backdrop-filter:blur(18px);transition:.14s ease}.ht-verified-mark:hover:after,.ht-verified-mark:focus:after{opacity:1;transform:translateX(-50%) translateY(0)}.ht-verified-mark--avatar{position:absolute;right:-5px;top:-5px;margin:0;width:30px;height:30px;font-size:16px;z-index:4}.ht-verified-mark--name{font-size:.43em;margin-left:.18em;transform:translateY(-.06em)}.ht-verified-mark--small{font-size:12px;width:20px;height:20px;margin-left:5px}.ht-verified-mark--chat{font-size:12px;width:19px;height:19px;margin-left:5px}@media(max-width:640px){.ht-verified-mark:after{display:none}.ht-verified-mark--avatar{width:26px;height:26px;font-size:14px;right:-3px;top:-3px}}