:root{
  /* ---------- HopeQure brand theme ------------------------------------------------
     Teal for structure, warm cream for ground, orange for action. The brand values are
     used exactly as specified; where a pairing failed WCAG AA the FOREGROUND was moved
     rather than the brand colour, so the palette a person recognises is unchanged.

     Two of those decisions are worth knowing about, because they look like mistakes
     until the numbers are in front of you:

       * Button labels are near-black, not white. White on #E8673A is 3.26:1 — below the
         4.5 needed for text — while near-black on the same orange is 5.33. Darkening the
         orange enough for white would have taken it to a brown nobody chose. The brand
         colour stays; the label moves.

       * Hover BRIGHTENS instead of darkening. With a dark label, a darker hover reduces
         contrast; the specified #D9573D lands at 4.46, just under. Lightening lifts it to
         6.58 and reads as the button responding, which is what a hover is for.

     Everything here was measured, not eyeballed — see tools/ui-migration/contrast.py. */

  --page:#FAF6EE;          /* main background — warm cream */
  --cream:#FAF6EE;
  --card:#F0FCF9;          /* cards, alternate sections, CTA blocks */
  --navy:#006D68;          /* headings; legacy name, teal value */
  --navy-2:#587572;        /* secondary text */

  /* #5A7875 as supplied is 4.45:1 on the cream — 0.05 short. Two shades darker and it
     clears on both surfaces; the difference is not perceptible side by side. */
  --ink:#006D68;           /* headings */
  --muted:#587572;         /* body, labels, inputs */

  --line:#DCE8E4;--line-2:#EAF3F0;
  --field-line:#8D8D8D;    /* solved for 3:1 against both backgrounds — this is what makes
                              an input identifiable as a control (WCAG 1.4.11) */
  --field:#F5F1E7;

  /* Action. Orange throughout, with a near-black label. */
  --accent:#E8673A;--accent-soft:#FDEDE6;
  --rose:#E8673A;--rose-deep:#F0805A;--rose-soft:#FDEDE6;--rose-track:#F8DCD1;
  --gold:#E8673A;--gold-soft:#FDEDE6;--gold-text:#B7512D;
  --on-accent:#1A1A1A;

  /* Links: the darkened orange. #E8673A on cream is 3.03:1 — orange link text on a light
     background is one of the most common contrast failures there is. #B7512D is the same
     hue at 4.61 and stays unmistakably the brand orange next to a button. */
  --link:#B7512D;--link-hover:#93401F;

  --ok:#0D724F;--ok-soft:#E2F4EC;
  --whatsapp:#25D366;      /* their brand green; label is near-black, since white on it is 1.98 */
  --amber:#9A5B12;--amber-soft:#FBF0DF;
  --err:#B3261E;--maroon:#B3261E;--maroon-soft:#FBE9E7;

  /* ---------- Type ----------------------------------------------------------------
     Marcellus for headings, Montserrat for everything else. Both self-hosted; see
     hq-fonts.css for why that matters more than it looks.

     One display face and one UI face, not three. Merriweather was also suggested — it is
     a fine reading serif, but a second serif next to Marcellus does the same job twice,
     and a third family is a third set of files to download before the page settles. */
  --sans:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Marcellus","Georgia",serif;
  /* --serif is referenced by ~40 existing rules, all of them headings. It now points at
     the display face, which is what those rules always meant. */
  --serif:var(--display);
  --glass-border:var(--line);

  /* ---------- Aliases for names the markup already uses -----------------------------
     Six variables were referenced across admin pages and defined nowhere. Four of them had
     no fallback, which means those declarations were simply invalid and never applied —
     a background that never painted, a colour that never took. Nothing errored, so nothing
     surfaced them. (--surface was a fifth, in the privacy page; that one DID have a #fff
     fallback, which is why it kept white cards on every dark theme instead of failing
     visibly.)
     Defined here as aliases rather than hunted down in six files, so they follow the theme
     like everything else. */
  --surface:var(--card);
  --card-alt:var(--field);
  --navy-1:var(--ink);
  --rule:var(--line);
  --text:var(--muted);
  --warn:var(--amber);

  /* ---------- Spacing: 4pt grid ----------------------------------------------
     The stylesheet had no scale — 14px, 5px, 12px, 10px, 16px, 8px, 6px, 13px and
     18px were all in heavy use, which is a mix of 4pt, 5pt and improvisation. That
     is why things read as "slightly off" without anyone being able to say why.
     New rules use these; existing ones are left alone rather than churned. */
  --s-1:4px;  --s-2:8px;   --s-3:12px;  --s-4:16px;  --s-5:20px;
  --s-6:24px; --s-8:32px;  --s-10:40px; --s-12:48px; --s-16:64px;

  /* ---------- Radius ---------- */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px; --r-pill:999px;

  /* ---------- Elevation -------------------------------------------------------
     Every shadow in the file was hardcoded rgba(20,18,68,…) — the OLD navy brand
     colour, from before the palette changed. They stayed navy-tinted through all
     four themes, which is why cards looked subtly wrong in Midnight and Eye
     Comfort. These derive from the theme's own ink colour instead.
     Two layers each: a tight contact shadow plus a wide ambient one, which is
     what separates a surface that looks placed from one that looks pasted. */
  --shadow-ink:17,24,39;
  --e-1:0 1px 2px rgba(var(--shadow-ink),.05);
  --e-2:0 1px 2px rgba(var(--shadow-ink),.05), 0 4px 12px -4px rgba(var(--shadow-ink),.08);
  --e-3:0 2px 4px rgba(var(--shadow-ink),.05), 0 12px 28px -12px rgba(var(--shadow-ink),.14);
  --e-4:0 4px 8px rgba(var(--shadow-ink),.06), 0 24px 48px -20px rgba(var(--shadow-ink),.20);

  /* ---------- Motion ----------------------------------------------------------
     Hand-written cubic-beziers were scattered through the file, all slightly
     different. Named curves keep motion feeling like one product.
     --ease-out for things entering, --ease-spring for anything the user
     directly caused (it overshoots very slightly, which reads as responsive). */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.4,.55,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --t-fast:.12s; --t-base:.2s; --t-slow:.32s;

  /* ---------- Layering ----------------------------------------------------- */
  --z-sticky:20; --z-nav:71; --z-backdrop:70; --z-modal:100; --z-toast:120;

  /* ---------- Focus ring ---------------------------------------------------- */
  --focus-ring:0 0 0 2px var(--card), 0 0 0 4px var(--accent);
}

/* ---------- Dark mode without anyone choosing it --------------------------------
   Four themes existed but all four required a manual switch: someone whose phone is
   in dark mode still got a full-brightness white screen. This applies the Midnight
   values automatically — but ONLY when no theme has been chosen on this device, so
   a deliberate choice is never overridden by the OS. */
@media (prefers-color-scheme: dark){
  html:not([data-theme]):not([style*="--page"]){
    --page:#0C0C0F;--cream:#0C0C0F;--card:#18181D;--navy:#F1EFE9;--navy-2:#C7C4BA;
    --rose:#DDAB53;--rose-deep:#DDAB53;--rose-soft:#2C2413;--rose-track:#362C16;
    --ink:#EDEBE3;--muted:#9A968B;--line:#2B2B31;--line-2:#242429;--field-line:#6B6B6B;
    --ok:#6FBF73;--ok-soft:#152318;--accent:#DDAB53;--accent-soft:#2C2413;
    --amber:#DDAB53;--amber-soft:#2C2413;--field:#1F1F24;--err:#E2675C;
    --gold:#DDAB53;--gold-soft:#2C2413;--gold-text:#DDAB53;--on-accent:#101216;
    --maroon:#E2675C;--maroon-soft:#2B1917;
    --shadow-ink:0,0,0;
  }
  /* Surfaces no longer need listing here — every background:#fff in this file was
     converted to var(--card), so they follow the theme on their own. */
  html:not([data-theme]):not([style*="--page"]) img:not([src*=".svg"]){filter:brightness(.92)}
}

/* ---------- Midnight (dark) ---------- */
html[data-theme="midnight"]{
  --page:#0C0C0F;--cream:#0C0C0F;--card:#18181D;--navy:#F1EFE9;--navy-2:#C7C4BA;
  --rose:#DDAB53;--rose-deep:#DDAB53;--rose-soft:#2C2413;--rose-track:#362C16;
  --ink:#EDEBE3;--muted:#9A968B;--line:#2B2B31;--line-2:#242429;--field-line:#6B6B6B;
  --ok:#6FBF73;--ok-soft:#152318;--accent:#DDAB53;--accent-soft:#2C2413;
  --amber:#DDAB53;--amber-soft:#2C2413;--field:#1F1F24;--err:#E2675C;
  --gold:#DDAB53;--gold-soft:#2C2413;--gold-text:#DDAB53;--on-accent:#101216;
  --maroon:#E2675C;--maroon-soft:#2B1917;
}

/* ---------- Eye Comfort (warm sepia, reduced blue light) ---------- */
html[data-theme="eye-comfort"]{
  --page:#F1E7D0;--cream:#F1E7D0;--card:#F8F0DE;--navy:#3A2E1F;--navy-2:#5C4E3A;
  --rose:#775320;--rose-deep:#775320;--rose-soft:#EAD9AE;--rose-track:#E3CE9E;
  --ink:#3A2E1F;--muted:#6B5C44;--line:#DDCBA3;--line-2:#E6D8B4;--field-line:#808080;
  --ok:#3F6634;--ok-soft:#E4EDD8;--accent:#775320;--accent-soft:#EAD9AE;
  --amber:#775320;--amber-soft:#EAD9AE;--field:#EDE2C4;--err:#8A3A2A;
  --gold:#775320;--gold-soft:#EAD9AE;--gold-text:#775320;--on-accent:#FFFFFF;
  --maroon:#8A3A2A;--maroon-soft:#EAD5C8;
}

/* ---------- Slate Pro (modern cool SaaS look) ---------- */
html[data-theme="slate"]{
  --page:#F4F5F7;--cream:#F4F5F7;--card:#FFFFFF;--navy:#16181D;--navy-2:#4B5160;
  --rose:#4348D8;--rose-deep:#3A3FC4;--rose-soft:#E7E8FD;--rose-track:#DCDEFC;
  --ink:#16181D;--muted:#5C6472;--line:#E4E6EB;--line-2:#EDEEF2;--field-line:#8A8A8A;
  --ok:#15803D;--ok-soft:#E7F7ED;--accent:#4348D8;--accent-soft:#E7E8FD;
  --amber:#B45309;--amber-soft:#FEF3E2;--field:#F0F1F4;--err:#DC2626;
  --gold:#4348D8;--gold-soft:#E7E8FD;--gold-text:#3A3FC4;--on-accent:#FFFFFF;
  --maroon:#B91C1C;--maroon-soft:#FDECEC;
}

html,body{transition:background-color .25s ease,color .25s ease}
.card,.doc,.hq-side,.topbar{transition:background-color .25s ease,border-color .25s ease,color .25s ease}

*{box-sizing:border-box}html,body{margin:0}
body{font-family:var(--sans),"Segoe UI",system-ui,-apple-system,sans-serif;background:var(--page);color:var(--ink);-webkit-font-smoothing:antialiased;position:relative}
a{color:inherit;text-decoration:none}
h1{margin:0}
/* Headings get focus programmatically after navigation (so screen readers announce the new
   page), and that focus should be silent — but ONLY for that case. `outline:none` on
   h1,h2,h3 used to apply to keyboard focus too. The real focus system is in hq-ui.css. */
h1[tabindex="-1"]:focus,h2[tabindex="-1"]:focus,h3[tabindex="-1"]:focus{outline:none}
h1,h2,h3,.hello,.card h3,.pmeta h2,.eyebrow+h1{font-family:var(--serif);letter-spacing:-.01em;font-weight:600}

/* A plain, quiet backdrop — a corporate admin tool should stay out of its own way.
   (Element kept in the DOM for compatibility; it now renders nothing decorative.) */
.hq-aurora-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--page)}
.hq-aurora-bg::before,.hq-aurora-bg::after,.hq-aurora-bg i{display:none}

/* ---------- login ---------- */
.login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px;position:relative;overflow:hidden;
  background:radial-gradient(1200px 500px at 90% -10%,var(--rose-soft),transparent 60%),radial-gradient(900px 500px at -10% 110%,var(--cream),transparent 55%),var(--cream)}
.login-page::before,.login-page::after{content:"";position:absolute;border-radius:50%;filter:blur(60px);opacity:.35;pointer-events:none;z-index:0}
.login-page::before{width:420px;height:420px;background:var(--rose);top:-140px;right:-100px;animation:lp-float-a 14s ease-in-out infinite}
.login-page::after{width:360px;height:360px;background:var(--gold);bottom:-120px;left:-90px;animation:lp-float-b 16s ease-in-out infinite}
@keyframes lp-float-a{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,40px) scale(1.1)}}
@keyframes lp-float-b{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-30px) scale(1.08)}}
.shell{width:min(1120px,100%);background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:0 20px 50px -24px rgba(17,24,39,.18);padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:34px;position:relative;z-index:1;animation:lp-rise .5s cubic-bezier(.22,1,.36,1)}
@keyframes lp-rise{from{opacity:0;transform:translateY(18px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.visual{border-radius:16px;background:var(--accent-soft);padding:34px 30px;display:flex;flex-direction:column;justify-content:space-between;min-height:520px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--navy)}
.brand .dot{width:26px;height:26px;border-radius:50%;background:conic-gradient(from 200deg,var(--rose),var(--navy));animation:lp-spin 5s linear infinite}
@keyframes lp-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.visual h2{font-size:30px;line-height:1.2;margin:0;max-width:15ch;font-weight:800;color:var(--navy)}
.visual p{color:var(--navy-2);opacity:.8;max-width:32ch;line-height:1.6;margin:14px 0 0}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
/* Was rgba(255,255,255,.6) — a white pill on a dark surface. */
.chip{background:var(--card);background:color-mix(in srgb,var(--card) 70%,transparent);border:1px solid rgba(var(--shadow-ink),.08);padding:8px 14px;border-radius:999px;font-size:13px;color:var(--navy-2);transition:transform .15s ease,background .15s ease}
@media (hover:hover){.chip:hover{background:var(--card);transform:translateY(-1px)}}
.form{padding:16px 26px;display:flex;flex-direction:column;justify-content:center}
.eyebrow{color:var(--rose-deep);font-weight:700;letter-spacing:.5px;font-size:14px}
.form h1{font-size:28px;margin:6px 0 20px;font-weight:800;color:var(--navy)}
.toggle{background:var(--rose-track);border-radius:999px;padding:6px;display:grid;grid-template-columns:1fr 1fr;position:relative;margin-bottom:20px}
.toggle button{border:0;background:transparent;padding:12px 0;border-radius:999px;font-weight:700;color:var(--navy);cursor:pointer;font-size:15px;z-index:1;transition:color .15s ease}
.toggle .thumb{position:absolute;top:6px;bottom:6px;left:6px;width:calc(50% - 6px);background:var(--card);border-radius:999px;box-shadow:0 6px 16px -8px rgba(var(--shadow-ink),.4);transition:transform .25s cubic-bezier(.4,0,.2,1)}
.toggle.hr .thumb{transform:translateX(100%)}
.field-label{font-size:13px;font-weight:600;color:var(--muted);margin:0 0 7px 2px;display:block}
/* The border was transparent, so a text input was identified only by its fill — 1.10:1
   against a white card, which is essentially invisible. On a form, a field looked like a
   gap until you clicked it. WCAG 1.4.11 wants 3:1 for anything required to identify a
   control, and --field-line is set per theme to exactly that. 1px rather than the old
   1.5px so the weight stays quiet now that it is actually visible. */
.field{width:100%;background:var(--field);border:1px solid var(--field-line);border-radius:14px;padding:15px 16px;font-size:15px;color:var(--navy);outline:none;transition:border-color .15s ease,background .15s ease,box-shadow .15s ease}
.field:focus{border-color:var(--rose-deep);background:var(--card);box-shadow:0 0 0 4px var(--rose-soft)}
.field.otp{letter-spacing:8px;font-size:20px;font-weight:700;text-align:center}
.row{margin-bottom:14px}
.captcha{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.captcha .sum{font-size:22px;font-weight:800;white-space:nowrap;color:var(--navy)}
.captcha .field{flex:1}
.cta{width:100%;border:0;border-radius:12px;padding:16px;font-size:16px;font-weight:700;color:var(--on-accent);background:var(--accent);cursor:pointer;box-shadow:0 8px 20px -10px rgba(79,70,229,.45);transition:transform .15s ease,box-shadow .15s ease}
@media (hover:hover){.cta:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 18px 36px -12px rgba(var(--shadow-ink),.7)}}
.cta:active:not(:disabled){transform:translateY(0)}
.cta:disabled{opacity:.5;cursor:not-allowed}
.divider{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--muted);font-size:12px}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line)}
.sso{display:flex;flex-direction:column;gap:10px}
.sso button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:13px;font-size:14.5px;font-weight:600;color:var(--navy);cursor:pointer;transition:border-color .15s ease,transform .1s ease}
@media (hover:hover){.sso button:hover{border-color:var(--rose-deep);transform:translateY(-1px)}}
.sso .company{background:var(--navy);color:#fff;border-color:var(--navy)}
.otp-meta{display:flex;justify-content:space-between;align-items:center;margin:12px 2px 16px;font-size:13px;color:var(--muted)}
.otp-meta button{border:0;background:none;color:var(--rose-deep);font-weight:700;cursor:pointer;font-size:13px}
.otp-meta button:disabled{color:#c9bdb8}
.banner-ok{background:var(--ok-soft);border:1px solid var(--line);color:var(--ok);padding:12px 14px;border-radius:12px;font-size:13.5px;margin-bottom:14px}
.back{display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--muted);font-size:13px;cursor:pointer;margin-bottom:10px;font-weight:600}
.err{color:var(--err);font-size:13.5px;margin-top:14px;font-weight:600}
.hint{font-size:13px;color:var(--muted);margin-top:16px;text-align:center}
.hint a{color:var(--rose-deep);font-weight:600;position:relative}
.hint a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--rose-deep);transform:scaleX(0);transform-origin:right;transition:transform .2s ease}
@media (hover:hover){.hint a:hover::after{transform:scaleX(1);transform-origin:left}}

@media(max-width:480px){
  .login-page{padding:14px}
  .shell{padding:16px;border-radius:20px}
  .form{padding:10px 6px}
  .form h1{font-size:23px}
  .field{padding:13px 14px;font-size:14.5px}
  .cta{padding:14px;font-size:15px}
  .captcha{flex-wrap:wrap}
  .captcha .sum{font-size:18px}
}

/* ---------- app shell + nav ---------- */
.hq-app{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
/* The scroll container carries the surface colour and the divider, not the .nav inside it.
   Previously .hq-side was transparent and .nav painted the white — but .nav was height:100%,
   i.e. 100% of a 100vh container, while its own content (around forty menu items) is taller
   than that. Everything past the first viewport scrolled into an area the white never
   reached, so the lower half of the menu showed the page grey instead, and the right-hand
   divider stopped with it. A scroll container's own background is painted against its
   padding box and does not scroll away, which is exactly the behaviour wanted here. */
.hq-side{position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;
         background:var(--card);border-right:1px solid var(--line)}
/* min-height, not height: the nav must still fill a short viewport (so .grow can push the
   footer down) while being free to grow past it when the menu is long. */
.nav{background:var(--card);color:var(--ink);padding:22px 16px;display:flex;flex-direction:column;min-height:100%}
.nav .logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;margin:2px 6px 20px;color:var(--ink)}
.nav .logo .dot{width:28px;height:28px;border-radius:8px;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px}
.nav .sect{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:16px 12px 6px;padding-top:14px;border-top:1px solid var(--line-2)}
.nav .sect:first-of-type{border-top:none;padding-top:0;margin-top:4px}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:9px;color:var(--navy-2);font-size:13.5px;font-weight:500;transition:.15s}
@media (hover:hover){.nav a:hover{background:var(--line-2);color:var(--ink)}}
.nav a.active{background:var(--accent);color:var(--on-accent);font-weight:600}
.nav a svg{width:17px;height:17px;flex:0 0 auto}
.nav .grow{flex:1}
.nav .foot{border-top:1px solid var(--line);padding-top:14px;margin-top:12px;display:flex;align-items:center;gap:10px}
.nav .foot .av{width:34px;height:34px;border-radius:50%;background:var(--maroon);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px}
.nav .foot .who{font-size:13px;line-height:1.3;color:var(--ink)}.nav .foot .who small{color:var(--muted);display:block}
.crisis-link{color:var(--maroon)!important;font-weight:600!important;margin-top:10px}
@media (hover:hover){.crisis-link:hover{background:var(--maroon-soft)!important}}
.crisis-link.active{background:var(--maroon-soft)!important;color:var(--maroon)!important}
.hq-main{min-width:0}
/* The background was a hardcoded rgba(255,255,255,.92), so the header stayed white on
   every dark theme — the page went dark and a white band sat across the top of it. It
   was never an AI Studio problem specifically; Midnight had it too, and any dark theme a
   SuperAdmin creates would have inherited it.
   Solid --card first so an older browser gets a correct opaque header, then the
   translucent version where color-mix is understood — the blur needs something to see
   through. */
.topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 34px;border-bottom:1px solid var(--line);background:var(--card);background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:saturate(150%) blur(8px);-webkit-backdrop-filter:saturate(150%) blur(8px);position:sticky;top:0;z-index:20;flex-wrap:wrap;gap:10px}
.topbar .crumb{font-size:12.5px;color:var(--muted)}
.topbar h1{font-size:20px;font-weight:700;color:var(--navy)}
.wrap{padding:26px 34px 48px;max-width:1080px;margin:0 auto}

/* ---------- cards / profile / dashboard ---------- */
.phead{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px;display:flex;gap:20px;align-items:flex-start;position:relative;overflow:hidden}
.phead::before{content:"";position:absolute;inset:0 0 auto 0;height:70px;background:var(--accent-soft)}
.photo{width:96px;height:96px;border-radius:20px;background:var(--rose-soft);position:relative;z-index:1;margin-top:16px;display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;color:var(--navy);border:4px solid #fff;box-shadow:0 8px 24px -12px rgba(var(--shadow-ink),.4)}
.pmeta{flex:1;z-index:1;padding-top:40px}
.pmeta .nm{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pmeta h2{font-size:23px;margin:0;font-weight:800;color:var(--navy)}
.verified{display:inline-flex;align-items:center;gap:5px;background:var(--ok-soft);color:var(--ok);font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px}
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px}
.badge.emp{background:var(--accent-soft);color:var(--gold-text)}
.role-line{color:var(--navy-2);font-weight:600;margin:6px 0 2px}
.sub-line{color:var(--muted);font-size:13.5px;display:flex;gap:16px;flex-wrap:wrap;margin-top:6px}
.pactions{z-index:1;display:flex;flex-direction:column;gap:10px;align-items:flex-end;padding-top:40px}
.btn{border:0;border-radius:10px;padding:11px 18px;font-size:14px;font-weight:600;cursor:pointer}
.btn.primary{background:var(--accent);color:var(--on-accent)}.btn.rose{background:var(--accent);color:var(--on-accent)}.btn.ghost{background:var(--card);border:1px solid var(--line);color:var(--navy)}
@media (hover:hover){.btn.primary:hover:not(:disabled){background:var(--rose-deep)}}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:0 1px 2px rgba(17,24,39,.04)}
.card.full{grid-column:1/-1}
.card h3{font-size:14px;margin:0 0 16px;color:var(--navy);font-weight:700;display:flex;align-items:center;justify-content:space-between}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:16px 24px}
.kv .lbl{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:3px}
.kv .val{font-size:14.5px;color:var(--navy);font-weight:600}
.kv .full{grid-column:1/-1}
.tags{display:flex;flex-wrap:wrap;gap:9px}
.tag{background:var(--rose-soft);color:var(--gold-text);font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px}
.doc{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line-2)}
.doc:last-child{border-bottom:0}.doc .dinfo{flex:1;min-width:0}.doc .dinfo b{font-size:14px;color:var(--navy);display:block}.doc .dinfo small{color:var(--muted);font-size:12.5px;word-break:break-word;overflow-wrap:anywhere}

/* ---------- expert admin card (pro-level, no overlap/wrap issues) ---------- */
.exp-card{border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin-bottom:14px;background:var(--card);transition:box-shadow .15s,border-color .15s}
@media (hover:hover){.exp-card:hover{box-shadow:0 14px 30px -18px rgba(var(--shadow-ink),.22);border-color:var(--gold-soft)}}
.exp-card:last-child{margin-bottom:0}
.exp-top{display:flex;gap:14px;align-items:flex-start}
.exp-avatar{width:44px;height:44px;border-radius:12px;background:var(--rose-soft);color:var(--navy);font-weight:800;font-size:16px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.exp-identity{flex:1;min-width:0}
.exp-name-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:15px}
.exp-name-row b{color:var(--navy)}
.exp-badge-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:7px}
.exp-meta-line{display:block;color:var(--muted);font-size:12.5px;margin-top:7px;line-height:1.5}
.exp-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2)}
.exp-actions .btn{font-size:12.5px;padding:8px 14px}

.pill{font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px}
.pill.ok{background:var(--ok-soft);color:var(--ok)}.pill.pending{background:var(--amber-soft);color:var(--amber)}
.hello{font-size:24px;font-weight:800;color:var(--navy);margin:0 0 4px}
.hello-sub{color:var(--muted);margin:0 0 22px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.stat .n{font-size:26px;font-weight:800;color:var(--navy);line-height:1}
.stat .l{font-size:13px;color:var(--muted);margin-top:5px}
.cols{display:grid;grid-template-columns:1.6fr 1fr;gap:20px}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.srow{display:flex;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--line-2)}
.srow:last-child{border-bottom:0}.srow .time{width:60px;font-weight:700;color:var(--navy);font-size:13.5px}
.srow .who{flex:1}.srow .who b{display:block;font-size:14px;color:var(--navy)}.srow .who small{color:var(--muted);font-size:12.5px}
.srow .stag{font-size:11.5px;font-weight:700;padding:5px 10px;border-radius:999px;background:var(--gold-soft);color:var(--gold-text)}
.srow .join{background:var(--ok-soft);color:var(--ok);font-weight:700;border:0;border-radius:10px;padding:8px 14px;font-size:12.5px;cursor:pointer}
.banner{border-radius:16px;padding:20px 22px;color:#fff;background:linear-gradient(120deg,#201d5c,#3a3486);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.banner .h{font-size:16px;font-weight:700}.banner .t{font-size:13px;opacity:.85;margin-top:3px}.banner .btn{background:#fff;color:#111827}
.bars{display:flex;align-items:flex-end;gap:10px;height:130px;margin-top:6px}
.bars .b{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;justify-content:flex-end;height:100%}
.bars .b i{width:100%;max-width:26px;background:linear-gradient(180deg,var(--rose),#C88A8E);border-radius:7px 7px 0 0}
.bars .b span{font-size:11px;color:var(--muted)}
.prog .top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:7px}.prog .top b{color:var(--navy)}.prog .top span{color:var(--muted)}
.prog .bar{height:9px;background:var(--line);border-radius:99px;overflow:hidden}.prog .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#9b8ff0)}
@media(max-width:1000px){.stats{grid-template-columns:repeat(2,1fr)}.cols{grid-template-columns:1fr}.grid{grid-template-columns:1fr}}
@media(max-width:480px){
    .stats{grid-template-columns:1fr}
    .admin-stat-grid{grid-template-columns:repeat(2,1fr)}
    .admin-quicklinks{flex-direction:column}
    .admin-quicklinks .btn{width:100%}
    .srow{flex-wrap:wrap;row-gap:8px}
    .srow .who{flex:1 1 100%;order:1}
    .srow .time{order:0}
    .srow .stag{order:2}
    .srow .join{order:3;margin-left:auto}
}
@media(max-width:900px){.hq-app{grid-template-columns:1fr}.shell{grid-template-columns:1fr}.visual{display:none}}
@media(max-width:640px){
  .kv{grid-template-columns:1fr}
  .modal-card{width:94%;padding:20px;max-height:90vh}
  .doc{flex-wrap:wrap}
  .ic-tabbar{overflow-x:auto;flex-wrap:nowrap}
}
@media(max-width:600px){.topbar{padding:14px 16px}.hq-back-bar{padding:10px 16px 0}.wrap{padding:16px 16px 40px}.wrap-wide{padding:16px 16px 40px}.wiz-steps{top:58px}.phead{flex-direction:column}.pactions{align-items:flex-start!important;padding-top:0!important}.settings-row{flex-wrap:wrap;gap:8px}}

/* ---------- real-time toasts ---------- */
.live-toasts{position:fixed;top:18px;right:18px;display:flex;flex-direction:column;gap:10px;z-index:50;max-width:320px}
.toast{background:var(--navy);color:#fff;padding:13px 16px;border-radius:12px;font-size:13.5px;font-weight:500;box-shadow:0 12px 30px -10px rgba(var(--shadow-ink),.5);display:flex;align-items:center;gap:10px;animation:slidein .25s ease}
.toast .dotlive{width:8px;height:8px;border-radius:50%;background:var(--rose);flex:0 0 auto}
@keyframes slidein{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
.live-test{position:fixed;bottom:18px;right:18px;z-index:50;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:11px 16px;font-size:13px;font-weight:600;color:var(--navy);cursor:pointer;box-shadow:0 10px 26px -12px rgba(var(--shadow-ink),.35);display:flex;align-items:center;gap:10px}
.live-test .conn{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;background:var(--amber-soft);color:var(--amber)}
.live-test .conn.on{background:var(--ok-soft);color:var(--ok)}

/* ---------- AI check-in ---------- */
.ai-card{background:linear-gradient(180deg,var(--card),var(--accent-soft));border-color:var(--line)}
.ai-spark{color:var(--accent)}
.ai-tag{font-size:11px;font-weight:800;letter-spacing:.5px;background:var(--accent-soft);color:var(--gold-text);padding:4px 10px;border-radius:999px}
.ai-card textarea.field{resize:vertical;font-family:inherit}
.ai-result{margin-top:16px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:12px;padding:16px}
.ai-result.urgent{border-left-color:var(--err);background:var(--maroon-soft)}
.ai-crisis{margin-top:12px;background:var(--maroon-soft);color:var(--maroon);border-radius:10px;padding:11px 14px;font-size:13px;font-weight:600}
.ai-disc{font-size:11.5px;color:var(--muted);margin:10px 2px 0}

/* ---------- reviews ---------- */
.rev-summary{display:flex;gap:32px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line-2);margin-bottom:16px;flex-wrap:wrap}
.rev-big{text-align:center}
.rev-num{font-size:40px;font-weight:800;color:var(--navy);line-height:1}
.rev-stars{color:#E8A93C;font-size:16px;letter-spacing:2px;margin-top:4px}
.rev-stars.small{font-size:13px}
.rev-count{font-size:12.5px;color:var(--muted);margin-top:4px}
.rev-dist{flex:1;min-width:220px;display:flex;flex-direction:column;gap:6px}
.rev-row{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.rev-row span:first-child{width:26px}
.rev-bar{flex:1;height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.rev-bar i{display:block;height:100%;background:#E8A93C;border-radius:99px}
.rev-card{padding:14px 0;border-bottom:1px solid var(--line-2)}
.rev-card:last-child{border-bottom:0}
.rev-head{display:flex;align-items:center;gap:4px;font-size:14px;color:var(--navy)}
.rev-date{margin-left:auto;font-size:12px;color:var(--muted);font-weight:400}
.rev-comment{margin:8px 0;color:var(--navy-2);line-height:1.6;font-size:14px}
.rev-subs{display:flex;gap:14px;font-size:12px;color:var(--muted)}
.rev-reply{margin-top:10px;background:var(--field);border-radius:10px;padding:11px 13px;font-size:13px;color:var(--navy-2)}
.rev-reply b{color:var(--navy)}

/* ---------- expert wizard ---------- */
.wiz-steps{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;position:sticky;top:66px;background:var(--page);padding:10px 0;z-index:10}
.chk-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));gap:10px}
.wiz-step{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted);padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);cursor:pointer;white-space:nowrap}
.wiz-step .num{width:20px;height:20px;border-radius:50%;background:var(--field);color:var(--muted);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:0 0 auto}
.wiz-step.on{border-color:var(--navy);color:var(--navy)}
.wiz-step.on .num{background:var(--navy);color:#fff}
.wiz-step.done .num{background:var(--ok);color:#fff}
.chk{display:flex;align-items:flex-start;gap:10px;border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;background:var(--card)}
.chk.sel{border-color:var(--rose);background:var(--rose-soft)}
.chk input{margin-top:3px}
.chk b{font-size:14px;color:var(--navy);display:block}
.chk small{color:var(--muted);font-size:12px}
.qual-row{display:flex;gap:8px;margin-bottom:8px}
.qual-row .field{flex:1}
.qual-row .btn{padding:11px 14px}
@media(max-width:700px){.chk-grid{grid-template-columns:1fr}}

/* ---------- chip select (consultation modes) ---------- */
.chip-select{display:flex;gap:10px;flex-wrap:wrap}
.chip-opt{padding:9px 16px;border-radius:999px;border:1.5px solid var(--line);font-size:13.5px;font-weight:600;color:var(--navy);cursor:pointer;background:var(--card)}
.chip-opt.sel{background:var(--rose-soft);border-color:var(--rose);color:var(--gold-text)}

/* ---------- availability calendar ---------- */
.avail-day-card{padding:16px 0;border-bottom:1px solid var(--line-2);transition:background .15s}
.avail-day-card:last-child{border-bottom:0}
@media (hover:hover){.avail-day-card:hover{background:rgba(198,146,46,.03)}}
.avail-day-name{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--navy);font-size:14px;margin-bottom:10px}
.avail-day-off{font-size:10.5px;font-weight:600;color:var(--muted);background:var(--field);padding:3px 9px;border-radius:999px}
.avail-day-slots{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.avail-add{padding:8px 14px;font-size:12.5px;border-radius:10px}
.copy-btn{border:0;background:none;color:var(--gold-text);font-size:11px;font-weight:600;cursor:pointer;margin-left:auto;padding:4px 8px;border-radius:8px;transition:background .15s}
@media (hover:hover){.copy-btn:hover{background:var(--gold-soft)}}
.avail-chip{display:flex;align-items:center;gap:6px;background:var(--field);border-radius:10px;padding:6px 10px}
.avail-chip input[type="time"]{border:0;background:transparent;font-size:13px;color:var(--navy);font-weight:600}
.avail-chip button{border:0;background:none;color:var(--muted);cursor:pointer;font-size:12px}
.slot-preview{display:flex;flex-wrap:wrap;gap:8px}
.slot-chip{background:var(--ok-soft);color:var(--ok);font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:999px}

/* ---------- location colors ---------- */
.avail-chip.loc-Online{background:var(--ok-soft)}
.avail-chip.loc-Clinic{background:var(--accent-soft)}
.avail-chip.loc-Hospital{background:var(--maroon-soft)}
.avail-chip.loc-HomeVisit{background:var(--amber-soft)}
.avail-chip select{border:0;background:transparent;font-size:11.5px;color:var(--navy);font-weight:600}
.loc-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:3px}
.loc-dot.loc-Online{background:#2f8f6b}
.loc-dot.loc-Clinic{background:#7A6CE0}
.loc-dot.loc-Hospital{background:#c0473f}
.loc-dot.loc-HomeVisit{background:#B5791A}

/* ---------- public directory & doctor profile ---------- */
.pub-page{min-height:100vh;background:var(--page)}
.pub-topbar{display:flex;align-items:center;justify-content:space-between;padding:18px 34px;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.pub-topbar .brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--navy)}
.pub-topbar .brand .dot{width:24px;height:24px;border-radius:50%;background:conic-gradient(from 200deg,var(--rose),var(--navy))}
.pub-wrap{max-width:1180px;margin:auto;padding:32px 34px 60px}
.pub-h1{font-size:32px;font-weight:800;color:var(--navy);margin:0 0 8px}
.pub-sub{color:var(--muted);margin:0 0 22px;font-size:15px}
.pub-search{display:flex;gap:12px;margin-bottom:26px;flex-wrap:wrap}
.pub-search .field{flex:1;min-width:220px}

.doc-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));gap:18px}
.doc-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;cursor:pointer;transition:box-shadow .15s,border-color .15s}
@media (hover:hover){.doc-card:hover{box-shadow:0 14px 30px -14px rgba(var(--shadow-ink),.25);border-color:var(--rose)}}
.doc-card-top{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.doc-avatar{width:52px;height:52px;border-radius:14px;background:var(--rose-soft);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--navy);flex:0 0 auto}
.doc-name{font-size:15.5px;font-weight:700;color:var(--navy)}
.v-badge{color:var(--ok);margin-left:4px}
.doc-cat{font-size:12.5px;color:var(--muted)}
.doc-meta{display:flex;gap:12px;flex-wrap:wrap;font-size:12.5px;color:var(--navy-2);margin-bottom:8px}
.doc-meta .muted{color:var(--muted)}
.doc-langs{font-size:12px;color:var(--muted);margin-bottom:12px}
.doc-bottom{display:flex;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--line-2)}
.doc-bottom .muted{color:var(--muted);font-size:12px}
.next-slot{margin-top:10px;font-size:11.5px;color:var(--ok);font-weight:600;background:var(--ok-soft);padding:6px 10px;border-radius:8px;display:inline-block}

/* ---------- AI chat ---------- */
.chat-card{display:flex;flex-direction:column;height:520px}
.chat-log{flex:1;overflow-y:auto;padding:8px 4px;display:flex;flex-direction:column;gap:12px}
.chat-row{display:flex;flex-direction:column;max-width:75%}
.chat-row.me{align-self:flex-end;align-items:flex-end}
.chat-row.ai{align-self:flex-start;align-items:flex-start}
.chat-bubble{padding:12px 16px;border-radius:16px;font-size:14px;line-height:1.5}
.chat-row.me .chat-bubble{background:var(--navy);color:#fff;border-bottom-right-radius:4px}
.chat-row.ai .chat-bubble{background:var(--field);color:var(--navy);border-bottom-left-radius:4px}
.chat-bubble.crisis{background:var(--maroon-soft);color:var(--maroon);font-weight:600}
.chat-bubble.typing{color:var(--muted)}
.chat-time{font-size:10.5px;color:var(--muted);margin-top:4px}
.chat-input-row{display:flex;gap:10px;margin-top:12px}
.chat-input-row .field{flex:1}

/* ---------- wellness widget ---------- */
.wellness-stats{display:flex;gap:20px;margin-bottom:16px}
.w-stat{flex:1;background:var(--field);border-radius:12px;padding:14px;text-align:center}
.w-num{font-size:22px;font-weight:800;color:var(--navy)}
.w-lbl{font-size:12px;color:var(--muted);margin-top:2px}
.badge-row{display:flex;flex-wrap:wrap;gap:8px}
.badge-chip{display:flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--field);color:var(--muted);font-size:12.5px;font-weight:600}
.badge-chip.earned{background:var(--rose-soft);color:var(--gold-text)}
.badge-ico{font-size:14px}
.me-row{color:var(--rose-deep)}

/* ---------- booking action panel ---------- */
.action-panel{width:100%;background:var(--field);border-radius:12px;padding:16px;margin-top:8px}

/* ---------- document upload ---------- */
input[type="file"].field{display:flex;align-items:center;background:var(--field);border-radius:12px;padding:9px 12px;font-size:13px;cursor:pointer}

/* ---------- date of birth picker ---------- */
.dob-row{display:flex;gap:10px}
.dob-row select{flex:1;min-width:0}
.msg-layout{display:flex;gap:20px;align-items:flex-start}
.msg-contacts{width:260px;flex:0 0 auto}
.msg-contact{display:flex;align-items:center;gap:10px;padding:10px;border-radius:12px;cursor:pointer;margin-bottom:6px}
@media (hover:hover){.msg-contact:hover{background:var(--field)}}
.msg-contact.active{background:var(--rose-soft)}
.msg-contact b{font-size:13.5px;color:var(--navy);display:block}
.msg-contact small{font-size:11.5px;color:var(--muted)}
@media(max-width:900px){.msg-layout{flex-direction:column}.msg-contacts{width:100%}}

/* ---------- dashboard header + quick actions ---------- */
.dash-header{margin-bottom:18px;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.quick-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.qa{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 16px;font-size:13.5px;font-weight:600;color:var(--navy);cursor:pointer;transition:box-shadow .15s}
@media (hover:hover){.qa:hover{box-shadow:0 10px 22px -12px rgba(var(--shadow-ink),.25)}}
.qa-ico{font-size:16px}
.qa-emergency{background:var(--maroon-soft);color:var(--maroon);border-color:#f3c9c5}

/* ---------- mood tracker ---------- */
.mood-row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.mood-label{width:140px;font-size:13.5px;color:var(--navy);flex:0 0 auto}
.mood-row input[type="range"]{flex:1;accent-color:var(--rose-deep)}
.mood-val{width:20px;text-align:center;font-weight:700;color:var(--navy);font-size:13px}

/* ---------- emergency modal ---------- */
.modal-overlay{position:fixed;inset:0;background:rgba(17,24,39,.5);display:flex;align-items:center;justify-content:center;z-index:100}
.modal-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px;max-width:420px;width:90%;max-height:85vh;overflow-y:auto;box-shadow:0 20px 44px -18px rgba(17,24,39,.28)}

/* ---------- floating AI assistant ---------- */
.fab-wrap{position:fixed;left:270px;bottom:22px;z-index:60}
@media(max-width:900px){.fab-wrap{left:16px}}
.fab-btn{width:56px;height:56px;border-radius:50%;background:var(--navy);color:#fff;font-size:22px;border:0;cursor:pointer;box-shadow:0 14px 30px -10px rgba(var(--shadow-ink),.5)}
.fab-panel{position:absolute;bottom:70px;left:0;width:320px;background:var(--card);border-radius:16px;box-shadow:0 20px 50px -15px rgba(var(--shadow-ink),.4);display:flex;flex-direction:column;overflow:hidden;border:1px solid var(--line)}
.fab-head{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;font-weight:700;color:var(--navy);border-bottom:1px solid var(--line-2);font-size:14px}
.fab-close{border:0;background:none;cursor:pointer;color:var(--muted);font-size:14px}
.fab-log{height:260px;overflow-y:auto;padding:12px;display:flex;flex-direction:column;gap:8px}
.fab-input{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line-2)}
.fab-input .field{flex:1;padding:9px 12px;font-size:13px}
.fab-full{display:block;text-align:center;font-size:12px;color:var(--rose-deep);padding:8px;font-weight:600;border-top:1px solid var(--line-2)}

/* ---------- logout ---------- */
.nav .foot{position:relative}
.logout-btn{position:absolute;right:0;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--muted);font-size:16px;cursor:pointer;padding:6px}
@media (hover:hover){.logout-btn:hover{color:var(--ink)}}

/* ---------- video call ---------- */
.call-layout{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
.call-video-wrap{background:#12102b;border-radius:16px;padding:16px}
.call-stage{min-height:420px;background:#0a0920;border-radius:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;overflow:hidden}
.call-stage video{border-radius:10px;max-width:100%}
.call-controls{display:flex;gap:10px;margin-top:14px;justify-content:center}
.call-transcript{max-height:520px;display:flex;flex-direction:column}
.transcript-log{flex:1;overflow-y:auto}
.t-line{padding:10px 0;border-bottom:1px solid var(--line-2)}
.t-line b{color:var(--navy);font-size:13px}
.t-time{color:var(--muted);font-size:11px;margin-left:6px}
.t-line p{margin:4px 0 0;color:var(--navy-2);font-size:13.5px;line-height:1.5}
@media(max-width:900px){.call-layout{grid-template-columns:1fr}}

/* ---------- selected reschedule slot ---------- */
.slot-chip.slot-sel{background:var(--navy);color:#fff}

/* ---------- doctor card conversion elements ---------- */
.doc-card-top{position:relative}
.today-badge{position:absolute;top:0;right:0;background:var(--ok-soft);color:var(--ok);font-size:10.5px;font-weight:700;padding:4px 9px;border-radius:999px}
.rec-chip{color:var(--ok);font-weight:600}
.doc-edu{font-size:12px;color:var(--navy-2);margin-bottom:6px}
.doc-modes{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.mode-chip{font-size:10.5px;font-weight:700;background:var(--accent-soft);color:var(--gold-text);padding:4px 9px;border-radius:999px}

/* ---------- crisis fab ---------- */
.crisis-fab{position:fixed;right:22px;bottom:22px;z-index:55;background:var(--maroon);color:#fff;border:0;border-radius:999px;padding:13px 20px;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:8px;box-shadow:0 14px 30px -12px rgba(122,42,36,.5)}
.crisis-dot{width:7px;height:7px;border-radius:50%;background:var(--err)}

/* ---------- doctor card v2 (specialty tags, chips, availability) ---------- */
.doc-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));gap:18px}
.doc-card2{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;position:relative;transition:box-shadow .15s,border-color .15s}
@media (hover:hover){.doc-card2:hover{box-shadow:0 14px 30px -14px rgba(var(--shadow-ink),.25);border-color:var(--gold)}}
.doc-card2-badge{position:absolute;top:14px;right:14px}
.avail-badge{font-size:11px;font-weight:700;padding:5px 10px;border-radius:999px}
.avail-badge.now{background:var(--ok-soft);color:var(--ok)}
.avail-badge.soon{background:var(--gold-soft);color:var(--gold-text)}
.doc-card2-top{display:flex;gap:12px;margin-bottom:12px;padding-right:80px}
.doc-avatar2{width:56px;height:56px;border-radius:50%;background:var(--rose-soft);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--navy);flex:0 0 auto;border:2px solid var(--gold-soft)}
.doc-name2{font-size:15px;font-weight:700;color:var(--navy)}
.doc-cat2{font-size:12.5px;color:var(--navy-2);margin-top:2px}
.doc-sub2{font-size:11.5px;color:var(--muted);margin-top:2px}
.doc-specialty{background:var(--field);border-radius:10px;padding:10px 12px;font-size:12.5px;color:var(--navy-2);margin-bottom:10px;line-height:1.5}
.doc-specialty b{color:var(--navy)}
.doc-more{color:var(--gold-text);font-weight:600}
.doc-row-line{font-size:12.5px;color:var(--navy-2);margin-bottom:8px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.doc-row-line b{color:var(--navy);white-space:nowrap}
.doc-muted{color:var(--muted)}
.mode-chip2{font-size:11px;font-weight:600;background:var(--field);color:var(--navy-2);padding:3px 9px;border-radius:999px}
.doc-card2-bottom{display:flex;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-2)}
.doc-card2-bottom .btn{flex:1;padding:10px;font-size:13px;text-align:center}
.doc-book-btn{background:linear-gradient(135deg,#E27A3F,#D4622A)!important}

/* wider container for card-grid pages so wide monitors don't leave a big empty gap */
.wrap-wide{padding:26px 34px 48px;max-width:1500px;margin:0 auto}

/* ---------- pending doctors ---------- */
.pill.pending{background:var(--gold-soft);color:var(--gold-text);font-size:13px;font-weight:700;padding:8px 14px;border-radius:999px}

/* ---------- payment / thank you ---------- */
.thank-you{text-align:center}
.ty-icon{width:60px;height:60px;border-radius:50%;background:var(--ok-soft);color:var(--ok);font-size:28px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 14px}
.pay-badge{font-size:11.5px;color:var(--muted);margin-top:10px;display:flex;align-items:center;gap:6px}
.pay-btn{background:linear-gradient(135deg,#171512,#3a352c)!important}

/* ---------- checkout layout ---------- */
.checkout-layout{display:grid;grid-template-columns:340px 1fr;gap:22px;align-items:start;max-width:1000px;margin:0 auto}
.checkout-summary{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;position:sticky;top:90px}
.cs-doctor{display:flex;align-items:center;gap:12px}
.cs-photo{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.cs-photo-fallback{background:var(--rose-soft);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--navy)}
.cs-name{font-size:15px;font-weight:700;color:var(--navy)}
.cs-cat{font-size:12px;color:var(--muted);margin-top:2px}
.cs-divider{height:1px;background:var(--line-2);margin:16px 0}
.cs-row{display:flex;justify-content:space-between;font-size:13px;color:var(--navy-2);margin-bottom:10px}
.cs-row b{color:var(--navy)}
.cs-total-row{display:flex;justify-content:space-between;font-size:16px;font-weight:800;color:var(--navy)}
.cs-covered{color:var(--ok)}
.checkout-form h3{margin-top:0}
@media(max-width:800px){.checkout-layout{grid-template-columns:1fr}.checkout-summary{position:static}}

/* ---------- quick mood bar ---------- */
.qmb-card{background:linear-gradient(120deg,var(--accent-soft),var(--card));border:1px solid var(--line);border-radius:16px;padding:22px;margin-bottom:20px}
.qmb-streak{display:inline-block;background:var(--card);border-radius:999px;padding:6px 14px;font-size:12px;font-weight:700;color:var(--maroon);margin-bottom:10px}
.qmb-title{font-family:var(--serif);font-size:20px;font-weight:700;color:var(--ink);margin:0 0 16px}
.qmb-row{display:flex;gap:12px;flex-wrap:wrap}
.qmb-opt{flex:1;min-width:100px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 10px;text-align:center;font-size:13px;font-weight:600;color:var(--navy);cursor:pointer;transition:transform .1s,box-shadow .15s}
@media (hover:hover){.qmb-opt:hover{box-shadow:0 10px 22px -12px rgba(var(--shadow-ink),.3);transform:translateY(-2px)}}
.qmb-ico{display:block;font-size:22px;margin-bottom:8px}
.qmb-done{color:var(--ok);font-weight:700;font-size:14px}

/* ---------- ai nudge card ---------- */
.nudge-card{display:flex;gap:14px;background:var(--card);border-left:4px solid var(--gold);border-radius:12px;padding:16px 18px;margin-bottom:16px}
.nudge-ico{width:36px;height:36px;border-radius:50%;background:var(--maroon);color:#fff;display:flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:15px}
.nudge-body b{color:var(--navy);font-size:14.5px}
.nudge-body p{color:var(--navy-2);font-size:13px;margin:6px 0 12px;line-height:1.5}

/* ==================== 2026-style micro-interactions ==================== */
@keyframes reveal-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
.reveal{opacity:0;animation:reveal-up .5s cubic-bezier(.16,1,.3,1) forwards}
@media(prefers-reduced-motion:reduce){.reveal{animation:none;opacity:1}}

.section-h{font-family:var(--serif);font-size:20px;font-weight:700;color:var(--ink);margin:0}
.cat-explorer-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.section-meta{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-text)}
.section-link{font-size:12.5px;font-weight:600;color:var(--navy);border:1px solid var(--line);border-radius:8px;padding:7px 12px}
@media (hover:hover){.section-link:hover{background:var(--field)}}

/* ---------- category explorer ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
.cat-tile{border-radius:14px;padding:22px 16px;cursor:pointer;transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .22s ease;position:relative;overflow:hidden}
@media (hover:hover){.cat-tile:hover{transform:translateY(-5px) scale(1.03);box-shadow:0 18px 34px -12px rgba(var(--shadow-ink),.4),0 0 0 2px rgba(var(--shadow-ink),.06) inset}}
.cat-tile-icon{font-size:26px;display:block;margin-bottom:10px;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
@media (hover:hover){.cat-tile:hover .cat-tile-icon{animation:cat-icon-wiggle .5s ease}}
@keyframes cat-icon-wiggle{0%{transform:scale(1) rotate(0)}30%{transform:scale(1.25) rotate(-10deg)}60%{transform:scale(1.15) rotate(8deg)}100%{transform:scale(1.15) rotate(-4deg)}}
.cat-tile-name{font-weight:700;font-size:14px}

/* ---------- self-assessments ---------- */
.assess-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.assess-card{background:var(--card);border:1px solid var(--line);border-top:4px solid;border-radius:12px;padding:18px;cursor:pointer;transition:transform .18s,box-shadow .18s}
.assess-desc{color:var(--muted);font-size:12.5px;line-height:1.5;margin:4px 0 10px}
@media (hover:hover){.assess-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px -16px rgba(var(--shadow-ink),.3)}}
.assess-card h3{margin:0 0 6px;font-size:15px}
.assess-card p{margin:0 0 10px;font-size:12.5px;color:var(--muted)}
.validated{font-size:11px;font-weight:700;color:var(--ok)}

/* ---------- recommended doctors ---------- */
.rec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.rec-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;transition:transform .18s,box-shadow .18s}
@media (hover:hover){.rec-card:hover{transform:translateY(-3px);box-shadow:0 14px 28px -16px rgba(var(--shadow-ink),.28)}}
.rec-top{display:flex;gap:10px;margin-bottom:10px}
.rec-av{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.rec-av-fallback{background:var(--rose-soft);display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--navy);font-size:14px}
.rec-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.rec-price{font-size:11.5px;color:var(--navy-2);margin-top:2px}
.rec-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.rec-tag{font-size:10.5px;font-weight:600;background:var(--field);color:var(--navy-2);padding:3px 8px;border-radius:999px}
.rec-actions{display:flex;gap:8px}
.rec-actions .btn{padding:8px;font-size:12px}

/* ---------- activity tiles ---------- */
.activity-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.activity-tile{background:var(--field);border-radius:12px;padding:16px;cursor:pointer;transition:transform .18s,box-shadow .18s;display:flex;flex-direction:column;gap:4px}
@media (hover:hover){.activity-tile:hover{transform:translateY(-3px);box-shadow:0 12px 24px -14px rgba(var(--shadow-ink),.25)}}
.activity-dot{width:28px;height:28px;border-radius:50%;background:var(--dot,var(--gold));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;margin-bottom:6px}
.activity-tile small{color:var(--muted);font-size:11.5px}

/* ---------- teaser / coming soon ---------- */
.teaser-card{opacity:.85}
.soon-badge{font-size:9.5px;font-weight:700;letter-spacing:.05em;background:var(--gold-soft);color:var(--gold-text);padding:3px 8px;border-radius:999px;margin-left:8px;vertical-align:middle}

/* ---------- buttons: subtle press feedback ---------- */
.btn{transition:transform .1s ease, box-shadow .15s ease}
.btn:active{transform:scale(.97)}
.card,.doc-card,.doc-card2{transition:box-shadow .2s ease}

/* ---------- streak heatmap ---------- */
.heatmap-card{background:var(--card)}
.heatmap-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;margin-bottom:12px}
.heat-cell{aspect-ratio:1;border-radius:4px;transition:transform .12s}
@media (hover:hover){.heat-cell:hover{transform:scale(1.25)}}
.shade-0{background:var(--line-2)}
.shade-1{background:var(--amber-soft)}
.shade-2{background:#D4A73D}
.shade-3{background:var(--maroon)}
.heat-legend{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted)}
.heat-legend .heat-cell{width:12px;height:12px}

/* ---------- company engagement bar chart ---------- */
.eng-chart{display:flex;align-items:flex-end;gap:3px;height:120px;margin-bottom:14px}
.eng-bar-wrap{flex:1;height:100%;display:flex;align-items:flex-end}
.eng-bar{width:100%;background:linear-gradient(180deg,var(--gold),var(--maroon));border-radius:3px 3px 0 0;min-height:3px;transition:opacity .15s}
@media (hover:hover){.eng-bar-wrap:hover .eng-bar{opacity:.75}}
.eng-summary{display:flex;gap:28px}
.eng-summary b{display:block;font-size:20px;color:var(--navy);font-weight:800}
.eng-summary span{font-size:11.5px;color:var(--muted)}

/* ==================== weather widget ==================== */
.weather-pill{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 16px}
.weather-icon{font-size:26px}
.weather-pill b{font-size:16px;color:var(--navy);display:block}
.weather-pill small{font-size:11px;color:var(--muted)}
.weather-loading{color:var(--muted);font-size:12.5px}

/* ==================== AI-forward visual language ==================== */
@keyframes ai-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.15)}}
@keyframes ai-glow{0%,100%{box-shadow:0 0 0 0 rgba(198,146,46,.35)}50%{box-shadow:0 0 0 6px rgba(198,146,46,0)}}
@keyframes shimmer-sweep{0%{background-position:-200% 0}100%{background-position:200% 0}}

.ai-card{position:relative;background:linear-gradient(155deg,var(--card) 0%,var(--gold-soft) 100%);border:1px solid var(--gold-soft);overflow:hidden}
.ai-card::before{content:'';position:absolute;top:-40%;right:-15%;width:60%;height:180%;
  background:radial-gradient(circle,rgba(198,146,46,.10),transparent 70%);pointer-events:none}
.ai-tag{position:relative;animation:ai-pulse 2.4s ease-in-out infinite}

.shimmer{background:linear-gradient(90deg,var(--muted) 25%,#fff 50%,var(--muted) 75%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer-sweep 1.6s linear infinite}

.nudge-card{position:relative}
.nudge-ico{animation:ai-glow 2.4s ease-in-out infinite}

.fab-btn{animation:ai-glow 3s ease-in-out infinite}

/* ---------- settings page ---------- */
.settings-row{display:flex;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line-2)}
.settings-row:last-child{border-bottom:0}
.settings-row b{display:block;font-size:14px;color:var(--navy)}
.settings-row small{color:var(--muted);font-size:12px}
.switch{position:relative;display:inline-block;width:42px;height:24px;flex:0 0 auto}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:var(--line);border-radius:999px;cursor:pointer;transition:.2s}
.slider::before{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:var(--card);border-radius:50%;transition:.2s}
.switch input:checked + .slider{background:var(--gold)}
.switch input:checked + .slider::before{transform:translateX(18px)}
.switch input:disabled + .slider{opacity:.6;cursor:not-allowed}

/* ---------- conversational assessment flow ---------- */
.assess-cat-heading{font-family:var(--serif);font-size:16px;color:var(--gold-text);margin:0 0 12px}
.chat-progress{height:6px;background:var(--line-2);border-radius:999px;overflow:hidden;margin-bottom:8px}
.chat-progress-bar{height:100%;background:linear-gradient(90deg,var(--gold),var(--maroon));border-radius:999px;transition:width .35s cubic-bezier(.16,1,.3,1)}
.chat-step-label{font-size:11.5px;color:var(--muted);margin:0 0 20px;text-align:center}

@keyframes chat-in{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
.chat-question-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:28px 24px;animation:chat-in .32s cubic-bezier(.16,1,.3,1)}
.chat-question-text{font-family:var(--serif);font-size:19px;color:var(--navy);text-align:center;margin:0 0 26px;line-height:1.5}
.chat-options{display:flex;flex-direction:column;gap:10px}
.chat-opt{background:var(--field);border:1.5px solid transparent;border-radius:12px;padding:14px 18px;font-size:14px;font-weight:600;color:var(--navy);text-align:left;cursor:pointer;transition:all .15s}
@media (hover:hover){.chat-opt:hover{border-color:var(--gold);transform:translateX(3px)}}
.chat-opt.picked{background:var(--navy);color:#fff;border-color:var(--navy)}
.chat-back{display:block;margin:16px auto 0;background:none;border:0;color:var(--muted);font-size:12.5px;cursor:pointer}
@media (hover:hover){.chat-back:hover{color:var(--navy)}}

@keyframes result-pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
.result-reveal{animation:result-pop .3s cubic-bezier(.16,1,.3,1)}

/* ---------- modern file upload dropzone ---------- */
.upload-row{display:flex;gap:10px;margin-top:12px;margin-bottom:10px;flex-wrap:wrap}
.dropzone{position:relative;display:flex;align-items:center;gap:14px;background:var(--field);border:2px dashed var(--line);border-radius:14px;padding:20px;cursor:pointer;transition:border-color .15s,background .15s}
@media (hover:hover){.dropzone:hover{border-color:var(--gold);background:var(--gold-soft)}}
.dropzone-busy{border-color:var(--gold);background:var(--gold-soft);cursor:wait}
.dropzone-input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.dropzone-icon{font-size:26px;flex:0 0 auto}
.dropzone-text b{display:block;font-size:14px;color:var(--navy)}
.dropzone-text small{font-size:12px;color:var(--muted)}
.upload-mini{position:relative;display:inline-flex;align-items:center;gap:6px;background:var(--field);border:1px solid var(--line);border-radius:10px;padding:8px 14px;cursor:pointer;font-size:12.5px;font-weight:600;color:var(--navy-2);white-space:nowrap}
@media (hover:hover){.upload-mini:hover{border-color:var(--gold);background:var(--gold-soft)}}
.upload-mini.busy{cursor:wait;opacity:.7}
.report-table{width:100%;border-collapse:collapse;margin-top:14px;font-size:12.5px}
.report-table th{text-align:left;padding:9px 10px;background:var(--field);border-bottom:1px solid var(--line);color:var(--navy);font-weight:700;white-space:nowrap}
.report-table td{padding:9px 10px;border-bottom:1px solid var(--line-2);color:var(--navy-2)}
@media (hover:hover){.report-table tr:hover td{background:var(--field)}}

/* ---------- streak hero + today highlight ---------- */
@keyframes flame-flicker{0%,100%{transform:scale(1) rotate(-2deg)}50%{transform:scale(1.1) rotate(2deg)}}
.streak-hero{display:flex;align-items:center;gap:18px;margin-bottom:20px;padding-bottom:18px;border-bottom:1px solid var(--line-2)}
.streak-flame{font-size:38px;animation:flame-flicker 1.8s ease-in-out infinite}
.streak-number{font-family:var(--serif);font-size:32px;font-weight:800;color:var(--navy);line-height:1}
.streak-number span{font-size:15px;font-weight:600;color:var(--muted);margin-left:4px}
.streak-caption{font-size:12.5px;color:var(--navy-2);margin-top:4px}
.streak-stat{margin-left:auto;text-align:right}
.streak-stat b{display:block;font-size:20px;color:var(--gold-text);font-weight:800}
.streak-stat span{font-size:11px;color:var(--muted)}

@keyframes today-glow{0%,100%{box-shadow:0 0 0 0 rgba(198,146,46,.5)}50%{box-shadow:0 0 0 5px rgba(198,146,46,0)}}
.heat-today{outline:2px dashed var(--gold);outline-offset:1px;animation:today-glow 2s ease-in-out infinite}

.selftest-tag{font-size:11px;font-weight:700;color:var(--muted)}

.cat-tile-sub{font-size:10.5px;opacity:.75;margin-top:2px}

/* ---------- admin dashboard ---------- */
.admin-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
.admin-stat-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.admin-stat-card .n{font-family:var(--serif);font-size:26px;font-weight:800;color:var(--navy)}
.admin-stat-card .l{font-size:12px;color:var(--muted);margin-top:4px}
.admin-stat-highlight{background:linear-gradient(135deg,#171512,#3a352c);border-color:transparent}
.admin-stat-highlight .n,.admin-stat-highlight .l{color:#fff}
.admin-quicklinks{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}

/* ---------- HR enrollment code ---------- */
.enroll-code-box{font-family:var(--serif);font-size:30px;font-weight:800;letter-spacing:.12em;color:var(--navy);background:var(--gold-soft);border-radius:12px;padding:18px;text-align:center}

/* ---------- Company checkbox list (expert visibility) ---------- */
.checkbox-list{max-height:220px;overflow-y:auto;border:1px solid var(--line);border-radius:12px;padding:6px}
.checkbox-row{display:flex;align-items:center;gap:10px;padding:8px 10px;font-size:13.5px;color:var(--navy);cursor:pointer;border-radius:8px}
@media (hover:hover){.checkbox-row:hover{background:var(--field)}}
.checkbox-row input{width:16px;height:16px;accent-color:var(--rose);cursor:pointer}

/* ---------- Terms & Conditions acceptance ---------- */
.terms-scroll{max-height:360px;overflow-y:auto;border:1px solid var(--line);border-radius:14px;padding:20px 22px;background:var(--card);font-size:13.5px;line-height:1.7;color:var(--navy-2)}
.terms-scroll h1,.terms-scroll h2,.terms-scroll h3{color:var(--navy);margin:16px 0 8px}
.terms-scroll h1:first-child,.terms-scroll h2:first-child,.terms-scroll h3:first-child{margin-top:0}
.terms-scroll p{margin:0 0 12px}
.terms-scroll ul,.terms-scroll ol{margin:0 0 12px;padding-left:22px}

/* ---------- Theme picker ---------- */
.theme-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.theme-swatch{border:2px solid var(--line);border-radius:16px;padding:14px;cursor:pointer;text-align:left;background:var(--field);transition:border-color .15s ease,transform .1s ease}
@media (hover:hover){.theme-swatch:hover{transform:translateY(-2px)}}
.theme-swatch.active{border-color:var(--rose)}
.theme-preview{height:52px;border-radius:10px;margin-bottom:10px;display:flex;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.theme-preview i{flex:1;display:block}
.theme-swatch b{display:block;font-size:13.5px;color:var(--navy)}
.theme-swatch small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px}

/* ---------- Chip editor (org structure lists) ---------- */
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;min-height:28px}
.chip-empty{color:var(--muted);font-size:12.5px}
.chip-x{background:none;border:none;cursor:pointer;color:var(--muted);margin-left:4px;font-size:11px;padding:0}
@media (hover:hover){.chip-x:hover{color:var(--err)}}
.chip-input-row{display:flex;gap:8px}
.chip-input-row .field{flex:1}

/* ---------- Wellness Tools ---------- */
.wt-saved-chip{display:inline-block;margin-left:12px;font-size:12.5px;color:var(--ok);background:var(--ok-soft);padding:6px 12px;border-radius:999px;animation:wt-pop .3s ease}
.wt-reveal{animation:wt-fade-up .45s ease}
@keyframes wt-fade-up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes wt-pop{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}}

/* ---------- Face Scan (animated) ---------- */
.fs-card{background:var(--card);border:1px solid var(--line);border-radius:22px;padding:32px 28px;text-align:center}
.fs-fade-in{animation:fs-fade-up .4s ease}
.fs-hero-icon{font-size:44px;width:88px;height:88px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;background:conic-gradient(from 0deg,var(--rose),var(--gold),var(--rose));animation:fs-spin-slow 6s linear infinite;position:relative}
.fs-hero-icon::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--card);display:flex}
.fs-hero-icon{display:flex}
.fs-title{font-family:var(--serif);font-size:23px;color:var(--navy);margin:0 0 6px}
.fs-subtitle{color:var(--muted);font-size:13.5px;margin:0 0 22px}
.fs-checklist{text-align:left;display:flex;flex-direction:column;gap:14px;margin-bottom:24px}
.fs-check-item{display:flex;gap:12px;align-items:flex-start;background:var(--field);border-radius:14px;padding:14px 16px}
.fs-check-emoji{font-size:20px;flex:0 0 auto}
.fs-check-item b{display:block;font-size:13.5px;color:var(--navy)}
.fs-check-item small{display:block;font-size:12px;color:var(--muted);margin-top:2px;line-height:1.5}
.fs-cta{width:100%;border:none;border-radius:14px;padding:15px;font-size:14.5px;font-weight:700;color:#fff;background:linear-gradient(120deg,var(--rose),var(--rose-deep));cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;box-shadow:0 8px 20px -8px var(--rose);position:relative;overflow:hidden}
.fs-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.35) 40%,transparent 60%);background-size:250% 100%;background-position:150% 0;transition:background-position .6s ease}
@media (hover:hover){.fs-cta:hover::after{background-position:-50% 0}}
@media (hover:hover){.fs-cta:hover{transform:translateY(-2px) scale(1.01);box-shadow:0 14px 30px -8px var(--rose)}}
.fs-cta:active{transform:translateY(0) scale(.98)}
.fs-cta:disabled{opacity:.6;cursor:default;transform:none}
.fs-cta-ghost{width:100%;border:1px solid var(--line);border-radius:14px;padding:13px;font-size:13.5px;font-weight:600;color:var(--navy-2);background:transparent;cursor:pointer;margin-top:10px;transition:transform .15s ease,background .15s ease}
@media (hover:hover){.fs-cta-ghost:hover{background:var(--field);transform:translateY(-1px)}}

.fs-video-wrap{position:relative;width:280px;height:280px;margin:0 auto 20px;border-radius:50%;overflow:hidden;background:#111}
.fs-video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);border-radius:50%}
.fs-mesh-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transform:scaleX(-1)}
.fs-ring{position:absolute;inset:-6px;border-radius:50%;padding:6px;background:conic-gradient(from 0deg,var(--rose),var(--gold),var(--ok),var(--rose));animation:fs-spin-slow 4s linear infinite;-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 6px));mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 6px))}
.fs-scanning .fs-ring{animation-duration:1.4s}
.fs-scanline{position:absolute;left:8%;right:8%;height:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);box-shadow:0 0 12px 2px var(--gold);animation:fs-scan-sweep 2s ease-in-out infinite;border-radius:2px}
.fs-corner{position:absolute;width:22px;height:22px;border:3px solid var(--gold);opacity:.85}
.fs-corner-tl{top:14px;left:14px;border-right:none;border-bottom:none;border-radius:6px 0 0 0}
.fs-corner-tr{top:14px;right:14px;border-left:none;border-bottom:none;border-radius:0 6px 0 0}
.fs-corner-bl{bottom:14px;left:14px;border-right:none;border-top:none;border-radius:0 0 0 6px}
.fs-corner-br{bottom:14px;right:14px;border-left:none;border-top:none;border-radius:0 0 6px 0}
.fs-countdown{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);background:rgba(0,0,0,.55);color:#fff;font-weight:800;font-size:20px;padding:4px 14px;border-radius:999px;backdrop-filter:blur(4px)}
.fs-countdown span{font-size:11px;font-weight:600;margin-left:2px;opacity:.8}
.fs-progress-track{width:100%;height:8px;background:var(--field);border-radius:999px;overflow:hidden;margin-top:6px}
.fs-progress-fill{height:100%;background:linear-gradient(90deg,var(--rose),var(--gold));border-radius:999px;transition:width 1s linear}
.fs-notice{display:flex;gap:12px;align-items:flex-start;background:var(--gold-soft);border-radius:14px;padding:14px 16px;margin-top:16px;text-align:left}
.fs-notice b{display:block;font-size:13px;color:var(--gold-text)}
.fs-notice small{display:block;font-size:11.5px;color:var(--navy-2);margin-top:3px;line-height:1.5}

/* ---------- Free / Premium scan tier picker ---------- */
.fs-tier-picker{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:14px}
.fs-tier-option{border:2px solid var(--line);border-radius:14px;padding:12px;background:var(--field);cursor:pointer;text-align:left;transition:border-color .15s ease}
.fs-tier-option b{display:block;font-size:13.5px;color:var(--navy)}
.fs-tier-option small{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.fs-tier-active{border-color:var(--rose);background:var(--rose-soft)}

/* ---------- Empty state ---------- */
.empty-state{text-align:center;padding:56px 24px}
.empty-state-icon{font-size:42px;margin-bottom:16px;opacity:.85}
.empty-state h3{font-size:16px;color:var(--navy);margin:0 0 8px;font-family:var(--serif)}
.empty-state p{color:var(--muted);font-size:13.5px;max-width:400px;margin:0 auto;line-height:1.6}
.empty-state-actions{margin-top:18px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* ---------- Universal tooltip — add class="hq-tip" data-tip="..." to any element ---------- */
.hq-tip{position:relative;cursor:help}
/* The element has to be reachable for :focus to ever fire — tabindex is added in
   the markup; this keeps the focus ring from doubling up with the tooltip. */
.hq-tip:focus{outline:none}
.hq-tip::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 9px);left:50%;transform:translateX(-50%) translateY(2px);background:var(--navy);color:#fff;font-size:11.5px;font-weight:500;line-height:1.45;padding:7px 11px;border-radius:8px;white-space:normal;width:max-content;max-width:230px;text-align:center;opacity:0;pointer-events:none;transition:opacity .15s ease,transform .15s ease;z-index:200;box-shadow:0 8px 20px -6px rgba(0,0,0,.35)}
.hq-tip::before{content:"";position:absolute;bottom:calc(100% + 4px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--navy);opacity:0;pointer-events:none;transition:opacity .15s ease;z-index:200}
/* Hover shows it on a mouse; focus shows it everywhere else.
   Focus is deliberately OUTSIDE the hover query. These tooltips carry the explanations of
   TDS, GST, commission and utilisation — content an admin actually needs — and gating the
   whole rule on hover meant a phone user could never see any of it. Tapping a focusable
   element focuses it, so :focus makes tap-to-show work with no JavaScript, and keyboard
   users get it for the same reason. */
@media (hover:hover){.hq-tip:hover::after,.hq-tip:hover::before{opacity:1;transform:translateX(-50%) translateY(0)}}
.hq-tip:focus::after,.hq-tip:focus::before,
.hq-tip:focus-visible::after,.hq-tip:focus-visible::before{opacity:1;transform:translateX(-50%) translateY(0)}
.hq-tip-icon{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:var(--field);color:var(--muted);font-size:10px;font-weight:700;font-style:normal;margin-left:5px;vertical-align:middle}

@keyframes confetti-burst{0%{opacity:0;transform:scale(.3)}40%{opacity:1}100%{opacity:0;transform:scale(2.6)}}
.fs-result-card{background:var(--field);border-radius:16px;padding:20px 12px;opacity:0;animation:fs-pop-in .5s cubic-bezier(.34,1.56,.64,1) forwards;transition:transform .2s ease,box-shadow .2s ease;border:1px solid transparent}
@media (hover:hover){.fs-result-card:hover{transform:translateY(-3px);box-shadow:0 14px 26px -14px rgba(var(--shadow-ink),.35);border-color:var(--line)}}
.fs-result-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:14px;margin-top:8px}
@media (hover:hover){.fs-result-card:hover .fs-result-num{color:var(--rose-deep)}}
.fs-result-emoji{font-size:24px}
.fs-result-num{font-family:var(--serif);font-size:28px;font-weight:800;color:var(--navy);margin-top:6px}
.fs-result-label{font-size:11.5px;color:var(--muted);margin-top:2px}

@keyframes fs-fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes fs-spin-slow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes fs-scan-sweep{0%,100%{top:12%}50%{top:82%}}
@keyframes fs-pop-in{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}

/* ---------- Certifications ---------- */
.cert-progress-track{width:100%;height:8px;background:var(--field);border-radius:999px;overflow:hidden}
.cert-locked-card{position:relative;background:var(--field);border:1.5px dashed var(--line-2);padding-right:52px}
.cert-locked-card h3,.cert-locked-card p{opacity:.75}
.cert-locked-card::before{content:"🔒";position:absolute;top:18px;right:16px;font-size:14px;background:var(--card);border:1px solid var(--line);width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px -2px rgba(var(--shadow-ink),.2)}
.cert-progress-fill{height:100%;background:linear-gradient(90deg,var(--rose),var(--gold));border-radius:999px;transition:width .4s ease}
.cert-quiz-card{background:var(--field);border-radius:14px;padding:16px 18px;margin-bottom:14px}
.cert-quiz-card b{display:block;font-size:13.5px;color:var(--navy);margin-bottom:10px}
.cert-option-row{display:flex;align-items:center;gap:10px;padding:8px 4px;font-size:13px;color:var(--navy-2);cursor:pointer}
.cert-option-row input{width:16px;height:16px;accent-color:var(--rose);cursor:pointer}

/* ---------- Import Center tab bar ---------- */
.ic-tabbar{display:flex;gap:6px;flex-wrap:wrap;background:var(--field);border-radius:16px;padding:6px;margin-bottom:20px}
.ic-tab{display:flex;align-items:center;gap:7px;border:none;background:transparent;color:var(--muted);font-size:13.5px;font-weight:600;padding:10px 16px;border-radius:12px;cursor:pointer;transition:background .15s ease,color .15s ease,transform .1s ease}
@media (hover:hover){.ic-tab:hover{background:var(--line-2);color:var(--navy)}}
.ic-tab-active{background:var(--card);color:var(--navy);box-shadow:0 2px 8px -2px rgba(0,0,0,.12)}
.ic-tab-icon{font-size:15px}
.ic-panel{animation:wt-fade-up .3s ease}

/* ---------- Simple data table (bulk upload preview) ---------- */
.simple-table{width:100%;border-collapse:collapse;font-size:12.5px}
.simple-table th{text-align:left;padding:8px 10px;background:var(--field);color:var(--navy);font-weight:700;border-bottom:1px solid var(--line);white-space:nowrap}
.simple-table td{padding:8px 10px;border-bottom:1px solid var(--line-2);color:var(--navy-2);white-space:nowrap}

/* ---------- mini bar chart ---------- */
.mini-chart{display:flex;align-items:flex-end;gap:2px;height:100px;margin-bottom:6px}
.mini-bar-wrap{flex:1;height:100%;display:flex;align-items:flex-end}
.mini-bar{width:100%;border-radius:2px 2px 0 0;min-height:2px;transition:opacity .15s}
@media (hover:hover){.mini-bar-wrap:hover .mini-bar{opacity:.7}}
.mini-chart-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}

/* ---------- tabs ---------- */
.tab-row{display:flex;gap:8px;border-bottom:1px solid var(--line-2)}
.tab{background:none;border:0;padding:10px 16px;font-size:13.5px;font-weight:600;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent}
.tab.active{color:var(--navy);border-bottom-color:var(--gold)}

.coupon-row{display:flex;gap:8px;margin-top:12px}
.coupon-row input{flex:1}

.page-row{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:16px;font-size:13px;color:var(--muted)}

/* ---------- compact admin filter bar ---------- */
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:16px}
.filter-bar .field{width:auto;flex:1 1 170px;padding:9px 12px;font-size:13.5px}
.filter-bar input.field{flex:2 1 220px}
.filter-bar .btn{padding:9px 16px;font-size:13px;white-space:nowrap;flex:0 0 auto}
.filter-more-btn{margin-left:auto}
.filter-date-group{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.filter-date-group .field{padding:9px 10px;width:150px}

/* ---------- medicine autocomplete ---------- */
.med-autocomplete{position:relative}
.med-results{position:absolute;top:100%;left:0;right:0;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 30px -12px rgba(var(--shadow-ink),.3);z-index:20;max-height:240px;overflow-y:auto;margin-top:4px}
.med-result-item{padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--line-2)}
.med-result-item:last-child{border-bottom:0}
@media (hover:hover){.med-result-item:hover{background:var(--field)}}
.med-result-item b{display:block;font-size:13.5px;color:var(--navy)}
.med-result-item small{color:var(--muted);font-size:11.5px}

/* ---------- prescription writer ---------- */
.rx-item-row{display:grid;grid-template-columns:2fr 1fr 1.2fr 1fr 1.5fr auto;gap:8px;align-items:start;margin-bottom:10px}
.rx-symbol{font-size:28px;font-weight:800;color:var(--maroon)}

/* ---------- prescription writer: history + AI suggest ---------- */
.rx-layout{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
.rx-history{max-height:640px;overflow-y:auto}
.rx-history-item{padding:10px 0;border-bottom:1px solid var(--line-2)}
.rx-history-item:last-child{border-bottom:0}
.rx-history-item b{font-size:12.5px;color:var(--navy)}
.rx-history-item small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.rx-history-item ul{margin:6px 0 0;padding-left:16px;font-size:12px;color:var(--navy-2)}
.ai-suggest-box{background:var(--gold-soft);border-radius:10px;padding:12px 14px;margin-top:10px}
.ai-suggest-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:12.5px;color:var(--navy)}
@media(max-width:900px){.rx-layout{grid-template-columns:1fr}}

/* ---------- professional session list (expert appointments) ---------- */
.sess-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.sess-stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;text-align:center}
.sess-stat .n{font-family:var(--serif);font-size:24px;font-weight:800;color:var(--navy)}
.sess-stat .l{font-size:11px;color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:.04em}

.sess-list{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.sess-card{display:flex;align-items:center;gap:16px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 18px;transition:box-shadow .15s}
@media (hover:hover){.sess-card:hover{box-shadow:0 12px 26px -16px rgba(var(--shadow-ink),.25)}}
.sess-date{flex:0 0 auto;text-align:center;width:52px;border-right:1px solid var(--line-2);padding-right:14px}
.sess-date .d{font-family:var(--serif);font-size:22px;font-weight:800;color:var(--navy)}
.sess-date .m{font-size:10.5px;color:var(--muted);letter-spacing:.05em}
.sess-body{flex:1;min-width:0}
.sess-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sess-top b{font-size:14.5px;color:var(--navy)}
.sess-resched{font-size:11px;color:var(--gold-text);font-weight:600}
.sess-meta{font-size:12.5px;color:var(--muted);margin-top:3px}
.sess-actions{display:flex;gap:8px;flex:0 0 auto}
.sess-actions .btn{white-space:nowrap;font-size:12.5px;padding:8px 14px}

/* ---------- mobile navigation (hamburger + slide-in sidebar) ---------- */
.mobile-nav-toggle{display:none;position:fixed;top:14px;left:14px;z-index:72;width:40px;height:40px;border-radius:10px;border:1px solid var(--line);background:var(--card);font-size:18px;box-shadow:0 8px 20px -10px rgba(var(--shadow-ink),.3)}
.nav-backdrop{display:none;position:fixed;inset:0;background:rgba(var(--shadow-ink),.4);z-index:70}

@media(max-width:900px){
    .mobile-nav-toggle{display:block}
    .hq-app{grid-template-columns:1fr}
    .hq-side{display:block!important;position:fixed;top:0;left:0;bottom:0;height:auto;width:270px;z-index:71;transform:translateX(-100%);transition:transform .25s ease;overflow-y:auto}
    .hq-side.nav-open{transform:translateX(0)}
    .nav-backdrop{display:block}
    .hq-main{padding-top:56px}
}

/* ---------- responsive session cards ---------- */
@media(max-width:700px){
    .sess-card{flex-wrap:wrap}
    .sess-date{border-right:0;padding-right:0;width:auto;display:flex;align-items:baseline;gap:6px}
    .sess-actions{width:100%;flex-wrap:wrap}
    .sess-actions .btn{flex:1;min-width:100px}
    .sess-stat-grid{grid-template-columns:repeat(2,1fr)}
    .filter-bar{flex-direction:column;align-items:stretch}
    .filter-more-btn{margin-left:0}
}

/* ---------- multi-role login picker ---------- */
.role-choice-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.role-choice-btn{display:flex;align-items:center;gap:14px;background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:14px 16px;cursor:pointer;text-align:left;transition:border-color .15s,transform .1s}
@media (hover:hover){.role-choice-btn:hover{border-color:var(--gold);transform:translateY(-1px)}}
.role-choice-icon{font-size:22px}
.role-choice-btn b{display:block;font-size:14px;color:var(--navy)}
.role-choice-btn small{color:var(--muted);font-size:12px}

/* ---------- packages ---------- */
.pkg-price-rows{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.pkg-price-row{display:flex;gap:8px}
.pkg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.pkg-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:20px;transition:box-shadow .15s}
@media (hover:hover){.pkg-card:hover{box-shadow:0 14px 30px -16px rgba(var(--shadow-ink),.3)}}
.pkg-bundle-tag{position:absolute;top:14px;right:14px;font-size:10.5px;font-weight:700;background:var(--gold-soft);color:var(--gold-text);padding:4px 10px;border-radius:999px}
.pkg-sessions{font-size:12.5px;color:var(--muted);margin:2px 0 10px}
.pkg-desc{font-size:12.5px;color:var(--navy-2);line-height:1.5;margin-bottom:12px}
.pkg-doctors{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.pkg-price-display{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--line-2)}
.pkg-price-display b{font-size:18px;color:var(--navy)}

.pkg-discount-tag{position:absolute;top:14px;left:14px;font-size:10.5px;font-weight:800;background:var(--maroon);color:#fff;padding:4px 10px;border-radius:999px}
.pkg-mrp{font-size:12px;color:var(--muted);text-decoration:line-through}

/* ---------- modern availability calendar (doctor profile) ---------- */
.avail-card{background:linear-gradient(155deg,var(--card),var(--gold-soft));border:1px solid var(--line)}
.slotchip-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.slotchip{background:var(--card);border:1.5px solid var(--line);border-radius:12px;padding:10px 16px;font-size:13px;font-weight:600;color:var(--navy);cursor:pointer;transition:all .18s cubic-bezier(.16,1,.3,1)}
@media (hover:hover){.slotchip:hover{background:var(--navy);color:#fff;border-color:var(--navy);transform:translateY(-3px) scale(1.03);box-shadow:0 12px 24px -12px rgba(var(--shadow-ink),.4)}}
.slotchip:active{transform:translateY(-1px) scale(.98)}

/* ---------- star picker + rate session ---------- */
.star-picker{display:flex;gap:4px}
.star{font-size:24px;color:var(--line);cursor:pointer;transition:transform .1s,color .1s}
.star.filled{color:var(--gold)}
@media (hover:hover){.star:hover{transform:scale(1.2)}}
.rate-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--line-2)}
.rate-row:last-child{border-bottom:0}
.rate-row span{font-size:13.5px;color:var(--navy)}

/* ---------- pre-booking review reminder ---------- */
.review-reminder{background:var(--gold-soft);border-radius:12px;padding:16px 18px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.review-reminder b{color:var(--navy);font-size:13.5px}
.review-reminder small{display:block;color:var(--navy-2);font-size:12px;margin-top:2px}

/* ---------- department wellbeing bars ---------- */
.dept-row{display:flex;align-items:center;gap:14px;padding:9px 0}
.dept-name{width:140px;flex:0 0 auto;font-size:13px;font-weight:600;color:var(--navy)}
.dept-bar{flex:1;height:10px;background:var(--field);border-radius:999px;overflow:hidden}
.dept-bar i{display:block;height:100%;border-radius:999px;transition:width .4s ease}
.dept-score{width:32px;flex:0 0 auto;text-align:right;font-size:13px;font-weight:700;color:var(--navy)}

/* ---------- documentation preview ---------- */
.doc-preview{font-size:14px;line-height:1.7;color:var(--navy)}
.doc-preview h2{font-size:18px;margin:20px 0 8px;color:var(--navy)}
.doc-preview h2:first-child{margin-top:0}
.doc-preview p{margin:0 0 12px}
.doc-preview ul,.doc-preview ol{margin:0 0 14px;padding-left:22px}
.doc-preview li{margin-bottom:6px}
.doc-preview code{background:var(--field);padding:2px 6px;border-radius:4px;font-size:12.5px}

/* ---------- notification bell ---------- */
.notif-bell-wrap{position:fixed;top:16px;right:24px;z-index:900}
.notif-bell-btn{background:var(--card);border:1px solid var(--line);border-radius:999px;width:42px;height:42px;font-size:18px;cursor:pointer;position:relative;box-shadow:0 4px 14px -6px rgba(var(--shadow-ink),.18)}
.notif-badge{position:absolute;top:-4px;right:-4px;background:var(--maroon);color:#fff;font-size:10.5px;font-weight:700;border-radius:999px;min-width:17px;height:17px;display:flex;align-items:center;justify-content:center;padding:0 3px}
.notif-dropdown{position:absolute;top:50px;right:0;width:320px;max-height:420px;overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:0 20px 44px -18px rgba(var(--shadow-ink),.28);padding:14px}
.notif-item{border-bottom:1px solid var(--line-2);padding:10px 0}
.notif-item:last-child{border-bottom:0}
.notif-item p{font-size:12.5px;color:var(--navy-2);margin:4px 0}
.notif-item small{color:var(--muted);font-size:11px}

/* ---------- premium polish: hover, transitions, subtle motion ---------- */
.card{transition:box-shadow .2s ease, transform .2s ease}
@media (hover:hover){.card:hover{box-shadow:0 16px 34px -20px rgba(var(--shadow-ink),.22)}}
.btn{transition:transform .12s ease, box-shadow .12s ease}
.btn:active{transform:scale(0.97)}
.doc{transition:background-color .15s ease}
@media (hover:hover){.doc:hover{background-color:var(--field)}}

@keyframes hq-pop-in{from{opacity:0;transform:translateY(6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.stat,.admin-stat-card{animation:hq-pop-in .35s ease both}
.stat:nth-child(2),.admin-stat-card:nth-child(2){animation-delay:.04s}
.stat:nth-child(3),.admin-stat-card:nth-child(3){animation-delay:.08s}
.stat:nth-child(4),.admin-stat-card:nth-child(4){animation-delay:.12s}
.stat:nth-child(5),.admin-stat-card:nth-child(5){animation-delay:.16s}

@keyframes hq-bell-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
.notif-bell-btn:has(.notif-badge){animation:hq-bell-pulse 1.8s ease-in-out infinite}

.modal-card{animation:hq-pop-in .2s ease both}

.wellness-empty{text-align:center;padding:22px 10px;background:var(--field);border-radius:12px;margin-top:8px}

.wellness-pick{cursor:pointer;text-align:center;padding:28px 20px}
@media (hover:hover){.wellness-pick:hover{border-color:var(--gold-soft)}}

.crumb a{color:inherit;text-decoration:none}
@media (hover:hover){.crumb a:hover{text-decoration:underline}}

.hr-check{display:flex;align-items:center;gap:8px;font-size:13.5px;padding:6px 0}

/* ---------- category accordions (expert profile — conditions per category) ---------- */
.cat-accordion summary::-webkit-details-marker{display:none}
.cat-accordion summary::marker{content:""}
.cat-accordion[open]{border-color:var(--accent)!important}
.cat-accordion[open]>summary{border-bottom:1px solid var(--line)}

/* ---------- toggle switch ---------- */
.toggle-switch{display:flex;align-items:center;gap:10px;cursor:pointer;white-space:nowrap;flex-shrink:0}
.toggle-switch input{position:absolute;opacity:0;width:0;height:0}
.toggle-track{position:relative;width:40px;height:22px;background:var(--line);border-radius:999px;transition:background .2s ease;flex-shrink:0}
.toggle-thumb{position:absolute;top:2px;left:2px;width:18px;height:18px;background:var(--card);border-radius:50%;transition:transform .2s ease;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.toggle-switch input:checked + .toggle-track{background:var(--gold-text,#c99a3d)}
.toggle-switch input:checked + .toggle-track .toggle-thumb{transform:translateX(18px)}

/* ---------- inline button spinner ---------- */
/* currentColor, not white: the button label is --on-accent now, which is near-black
   on the brand orange. A white spinner beside dark text read as a rendering fault. */
.btn-spinner{display:inline-block;width:13px;height:13px;border:2px solid currentColor;border-top-color:transparent;opacity:.6;border-radius:50%;animation:hq-spin .7s linear infinite;margin-right:7px;vertical-align:-2px}
.btn-spinner-dark{border:2px solid rgba(var(--shadow-ink),.25);border-top-color:var(--navy)}
@keyframes hq-spin{to{transform:rotate(360deg)}}

/* ---------- fixed save-feedback toast ---------- */
.save-toast{position:fixed;top:20px;right:20px;z-index:9999;padding:14px 20px;border-radius:12px;font-size:13.5px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.18);max-width:360px;animation:hq-toast-in .2s ease}
.save-toast-ok{background:#1f7a4d;color:#fff}
.save-toast-err{background:var(--maroon);color:#fff}
@keyframes hq-toast-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* ---------- global back button ---------- */
.hq-back-bar{background:var(--card);padding:10px 34px 0}
.hq-back-btn{display:inline-flex;align-items:center;gap:6px;background:var(--field);border:1px solid var(--line);color:var(--muted);font-size:13px;font-weight:600;cursor:pointer;padding:7px 14px;margin:0 0 10px;border-radius:999px}
@media (hover:hover){.hq-back-btn:hover{color:var(--navy);border-color:var(--navy)}}