/* VIXIT clinic shell styles — extracted from the 9 inline <style> blocks of
   clinic.html (document order preserved = identical cascade). Served from
   /clinic.css with 1y immutable cache; bump the ?v= in clinic.html on change. */


:root{
  --bg:#05070f;--bg2:#0a0e1a;--bg3:#0f1629;
  --surface:#111827;--surface2:#1a2236;
  --border:rgba(255,255,255,0.07);--border2:rgba(255,255,255,0.12);
  --neon:#00d4ff;--neon-glow:rgba(0,212,255,0.25);
  --acid:#39ff14;--violet:#8b5cf6;--violet-glow:rgba(139,92,246,0.2);
  --amber:#f59e0b;--rose:#f43f5e;--emerald:#10b981;--emerald-glow:rgba(16,185,129,0.2);
  /* keep legacy names for existing JS-generated HTML */
  --primary:#00d4ff;--primary2:#0099cc;--green:#10b981;--red:#f43f5e;--purple:#8b5cf6;
  --white:#ffffff;
  --text:#f0f4ff;--text2:#8899bb;--text3:#7488ad;--text-muted:#334466;
  --font-display:"Bricolage Grotesque",sans-serif;
  --font-body:"Space Grotesk",sans-serif;
  --font-mono:"JetBrains Mono",monospace;
  --radius:16px;--radius2:10px;--radius-pill:100px;
  --shadow-neon:0 0 30px rgba(0,212,255,0.15),0 4px 20px rgba(0,0,0,0.4);
  --shadow-card:0 8px 40px rgba(0,0,0,0.4),0 1px 0 rgba(255,255,255,0.05) inset;
  --shadow2:0 8px 40px rgba(0,0,0,0.4);
  --transition:background-color 0.15s ease,color 0.15s ease,border-color 0.15s ease,opacity 0.15s ease,transform 0.15s ease;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}button,a,[onclick]{touch-action:manipulation;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body),-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeSpeed;}
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.015;will-change:transform;}

/* TOAST */
#toast{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none;}
.toast-item{padding:13px 18px;border-radius:10px;font-size:13px;font-weight:600;color:#fff;animation:toastIn .35s cubic-bezier(.34,1.56,.64,1);border:1px solid rgba(255,255,255,0.1);font-family:var(--font-body);pointer-events:all;display:flex;align-items:center;gap:8px;}
.toast-success{background:rgba(16,185,129,.9);border-color:rgba(16,185,129,.4);box-shadow:0 4px 20px rgba(16,185,129,.3);}
.toast-error{background:rgba(244,63,94,.9);border-color:rgba(244,63,94,.4);box-shadow:0 4px 20px rgba(244,63,94,.3);}
@keyframes toastIn{from{opacity:0;transform:translateX(30px) scale(.9)}to{opacity:1;transform:none}}
@keyframes glowP{0%,100%{opacity:1;}50%{opacity:.5;}}
@keyframes mFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes orbF1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-30px,20px) scale(1.05)}}
@keyframes spin{to{transform:rotate(360deg)}}.spinner{will-change:transform;transform:translateZ(0);}
/* ── SCROLL PERFORMANCE ── */
html{-webkit-overflow-scrolling:touch;}
*{-webkit-tap-highlight-color:transparent;}
.hero,.security-section,.features,.pricing,.addons,.cta-section{contain:layout style;}
@media(max-width:768px){
  .hero-orb{display:none;}
  body::before{display:none;}
  .hvs-card-glow{display:none;}
  @keyframes orbF1{0%,100%{transform:none}}
  @keyframes mFloat{0%,100%{transform:none}}
}


/* ── LANDING NAV ── */
.nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:0 5%;height:72px;display:flex;align-items:center;justify-content:space-between;background:rgba(5,7,15,.95);border-bottom:1px solid var(--border);transition:var(--transition);will-change:transform;}
.nav.scrolled{background:rgba(5,7,15,.95);border-bottom-color:var(--border2);}
.nav-brand{display:flex;align-items:center;gap:12px;cursor:pointer;}
.nav-icon{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--neon),#0066ff);display:flex;align-items:center;justify-content:center;font-size:18px;box-shadow:0 0 20px var(--neon-glow),0 4px 12px rgba(0,0,0,.3);position:relative;}
.nav-icon::after{content:"";position:absolute;inset:-2px;border-radius:13px;border:1px solid rgba(0,212,255,.3);}
.nav-name{font-family:var(--font-display);font-size:20px;font-weight:800;letter-spacing:-.5px;background:linear-gradient(135deg,#fff 40%,var(--neon));-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
.nav-name span{-webkit-text-fill-color:var(--neon);}
.nav-links{display:flex;align-items:center;gap:4px;}
.nav-link{padding:8px 16px;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;border-radius:var(--radius-pill);border:1px solid transparent;background:none;font-family:var(--font-body);transition:var(--transition);}
.nav-link:hover{color:var(--neon);background:rgba(0,212,255,.10);border-color:rgba(0,212,255,.28);}
.nav-cta{padding:9px 22px;font-size:13px;font-weight:700;color:var(--bg);cursor:pointer;border-radius:var(--radius-pill);border:none;background:var(--neon);box-shadow:0 0 20px var(--neon-glow);font-family:var(--font-body);transition:var(--transition);}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 0 30px var(--neon-glow);}
@media(max-width:640px){.nav-links .nav-link{display:none;}.nav-links .nav-link.nav-mobile{display:inline-block;}.nav-cta{display:none;}}

/* ── HERO ── */
.hero{min-height:100vh;display:flex;align-items:center;padding:120px 5% 80px;position:relative;overflow:hidden;}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(0,212,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,.03) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 40%,transparent 100%);}
.hero-orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.5;pointer-events:none;will-change:transform;transform:translateZ(0);}
.hero-orb-1{width:600px;height:600px;background:radial-gradient(circle,rgba(0,212,255,.12) 0%,transparent 70%);top:-100px;right:-100px;animation:orbF1 8s ease-in-out infinite;contain:strict;}
.hero-orb-2{width:400px;height:400px;background:radial-gradient(circle,rgba(139,92,246,.1) 0%,transparent 70%);bottom:-50px;left:10%;}
.hero-content{max-width:580px;position:relative;z-index:1;}
.hero-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(0,212,255,.08);border:1px solid rgba(0,212,255,.2);border-radius:var(--radius-pill);padding:7px 16px;font-size:12px;font-weight:600;color:var(--neon);font-family:var(--font-mono);letter-spacing:.5px;margin-bottom:28px;}
.hero-badge-dot{width:7px;height:7px;border-radius:50%;background:var(--acid);box-shadow:0 0 8px var(--acid);animation:glowP 2s ease-in-out infinite;}
.hero-title{font-family:var(--font-display);font-size:62px;font-weight:800;line-height:1.05;letter-spacing:-2px;color:#fff;margin-bottom:22px;}
/* :not(.line):not(.word) — this rule must ONLY style the STATIC hero span (no-JS /
   reduced-motion). When the reveal script rebuilds the title into .line/.word spans,
   letting it match the .line wrappers makes each line paint a background-clip:text
   gradient whose glyph geometry ignores the children's in-flight 3D flip — Chrome
   renders that as an opaque cyan "ghost copy" of the line during the entrance
   animation (the jul04 "Smart" ghost bug). Gradient words get their gradient from
   the dedicated .word.grad rule instead. */
.hero-title span:not(.line):not(.word){background:linear-gradient(135deg,var(--neon),#0066ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;}
@media(max-width:768px){.hero-title{font-size:40px;letter-spacing:-1px;}}
.hero-sub{font-size:17px;color:var(--text2);line-height:1.75;margin-bottom:40px;max-width:500px;}
.hero-btns{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:52px;}
.btn-hero-primary{padding:15px 30px;font-size:15px;font-weight:700;color:var(--bg);cursor:pointer;border-radius:var(--radius-pill);border:none;background:var(--neon);box-shadow:0 0 30px var(--neon-glow);font-family:var(--font-body);transition:var(--transition);}
.btn-hero-primary:hover{transform:translateY(-2px);box-shadow:0 0 50px var(--neon-glow);}
.btn-hero-secondary{padding:14px 28px;font-size:15px;font-weight:600;color:var(--text2);cursor:pointer;border-radius:var(--radius-pill);border:1px solid var(--border2);background:rgba(255,255,255,.03);font-family:var(--font-body);transition:var(--transition);}
.btn-hero-secondary:hover{color:var(--text);border-color:rgba(0,212,255,.3);background:rgba(0,212,255,.05);}
.hero-stats{display:flex;gap:40px;flex-wrap:wrap;}
.hero-stat-num{font-family:var(--font-display);font-size:30px;font-weight:800;color:#fff;letter-spacing:-1px;}
.hero-stat-lbl{font-size:12px;color:var(--text3);margin-top:3px;}
.hero-visual{flex:1;display:flex;align-items:center;justify-content:flex-end;position:relative;z-index:1;}
@media(max-width:960px){.hero-visual{display:none;}}
.hero-card-float{width:360px;background:var(--surface);border-radius:20px;border:1px solid var(--border2);box-shadow:var(--shadow-card);overflow:hidden;animation:mFloat 5s ease-in-out infinite;}
.hcf-header{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;background:var(--bg2);border-bottom:1px solid var(--border);}
.hcf-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px;padding-bottom:0;}
.hcf-stat{background:var(--bg3);border:1px solid var(--border);border-radius:10px;padding:12px;}
.hcf-stat-n{font-family:var(--font-display);font-size:22px;font-weight:800;letter-spacing:-1px;}
.hcf-stat-l{font-size:10px;color:var(--text3);margin-top:2px;}
.hcf-queue{display:flex;flex-direction:column;gap:7px;padding:14px;}
.hcf-token{display:flex;align-items:center;gap:10px;background:var(--bg3);border:1px solid var(--border);border-radius:8px;padding:9px 12px;}
.hcf-tok-num{width:30px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;font-weight:700;flex-shrink:0;}
.hcf-tok-name{font-size:12px;font-weight:600;color:var(--text);}
.hcf-tok-time{font-size:10px;color:var(--text3);margin-top:1px;}
.float-sec-card{position:absolute;bottom:-20px;left:-80px;background:var(--surface);border:1px solid var(--border2);border-radius:10px;padding:12px 15px;box-shadow:var(--shadow-card);}

/* ── SECURITY SECTION ── */
.security-section{padding:100px 5%;background:linear-gradient(180deg,var(--bg) 0%,var(--bg2) 100%);position:relative;overflow:hidden;}
.security-section::before{content:"";position:absolute;left:50%;top:0;width:600px;height:1px;background:linear-gradient(90deg,transparent,var(--neon),transparent);transform:translateX(-50%);}
.security-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:60px;}
@media(max-width:768px){.security-grid{grid-template-columns:1fr;}}
.sec-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:28px;position:relative;overflow:hidden;transition:var(--transition);}
.sec-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--neon),transparent);opacity:0;transition:var(--transition);}
.sec-card:hover{border-color:var(--border2);transform:translateY(-3px);box-shadow:var(--shadow-neon);}
.sec-card:hover::before{opacity:1;}
.sec-icon{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px;border:1px solid var(--border2);}
.sci-neon{background:rgba(0,212,255,.1);} .sci-violet{background:rgba(139,92,246,.1);} .sci-emerald{background:rgba(16,185,129,.1);} .sci-amber{background:rgba(245,158,11,.1);} .sci-rose{background:rgba(244,63,94,.1);}
.sec-title{font-family:var(--font-display);font-size:17px;font-weight:700;color:var(--text);margin-bottom:8px;}
.sec-desc{font-size:13px;color:var(--text2);line-height:1.65;}
.sec-tag{display:inline-block;margin-top:14px;padding:4px 10px;border-radius:var(--radius-pill);font-family:var(--font-mono);font-size:10px;font-weight:600;border:1px solid;}
.tag-neon{color:var(--neon);border-color:rgba(0,212,255,.3);background:rgba(0,212,255,.05);}
.tag-violet{color:var(--violet);border-color:rgba(139,92,246,.3);background:rgba(139,92,246,.05);}
.tag-emerald{color:var(--emerald);border-color:rgba(16,185,129,.3);background:rgba(16,185,129,.05);}
.tag-amber{color:var(--amber);border-color:rgba(245,158,11,.3);background:rgba(245,158,11,.05);}
.tag-rose{color:var(--rose);border-color:rgba(244,63,94,.3);background:rgba(244,63,94,.05);}

/* ── SHARED SECTION LABELS ── */
.section-label{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--neon);text-transform:uppercase;letter-spacing:2px;margin-bottom:16px;}
.section-label::before{content:"";width:20px;height:1px;background:var(--neon);}
.section-title{font-family:var(--font-display);font-size:44px;font-weight:800;color:#fff;line-height:1.15;letter-spacing:-1.5px;margin-bottom:14px;}
.section-sub{font-size:16px;color:var(--text2);line-height:1.7;max-width:500px;margin-bottom:56px;}
@media(max-width:640px){.section-title{font-size:30px;}}

/* ── FEATURES ── */
.features{padding:100px 5%;background:var(--bg2);position:relative;}
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:960px){.features-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.features-grid{grid-template-columns:1fr;}}
.feat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px;transition:var(--transition);cursor:default;}
.feat-card:hover{border-color:rgba(0,212,255,.2);transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,.3);}
.feat-ico{width:48px;height:48px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:22px;margin-bottom:16px;border:1px solid var(--border2);}
.feat-ico.blue{background:rgba(0,212,255,.08);} .feat-ico.green{background:rgba(16,185,129,.08);} .feat-ico.amber{background:rgba(245,158,11,.08);} .feat-ico.purple{background:rgba(139,92,246,.08);} .feat-ico.red{background:rgba(244,63,94,.08);} .feat-ico.cyan{background:rgba(57,255,20,.06);}
.feat-title{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--text);margin-bottom:9px;}
.feat-desc{font-size:13px;color:var(--text2);line-height:1.65;}

/* ── PRICING ── */
.pricing{padding:100px 5%;background:var(--bg);position:relative;}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px;margin-top:56px;}
@media(max-width:1100px){.pricing-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:600px){.pricing-grid{grid-template-columns:1fr;}}
.price-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:30px 24px;position:relative;overflow:hidden;transition:var(--transition);display:flex;flex-direction:column;}
.price-card:hover{transform:translateY(-4px);}
.price-card.popular{border-color:rgba(0,212,255,.3);background:linear-gradient(160deg,var(--surface2),var(--surface));box-shadow:0 0 40px rgba(0,212,255,.08),var(--shadow-card);}
.price-card.popular::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--neon),transparent);}
.popular-badge{position:absolute;top:16px;right:16px;background:var(--neon);color:var(--bg);font-size:10px;font-weight:800;padding:4px 12px;border-radius:var(--radius-pill);letter-spacing:.5px;text-transform:uppercase;}
.price-plan{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:2px;margin-bottom:10px;}
.price-amount{font-family:var(--font-display);font-size:38px;font-weight:800;color:#fff;letter-spacing:-1.5px;line-height:1;}
.price-amount span{font-size:16px;font-weight:600;color:var(--text3);}
.price-period{font-size:12px;color:var(--text3);margin-top:6px;margin-bottom:24px;}
.price-features{display:flex;flex-direction:column;gap:10px;margin-bottom:26px;}
.price-feat{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--text2);}
.price-feat::before{content:"✓";color:var(--neon);font-weight:800;font-size:12px;margin-top:1px;flex-shrink:0;}
.price-feat.extra::before{content:"⭐";color:var(--violet);}
.btn-price{width:100%;padding:13px;border-radius:var(--radius-pill);font-size:14px;font-weight:700;cursor:pointer;font-family:var(--font-body);transition:var(--transition);border:none;margin-top:auto;}
.btn-price.primary{background:var(--neon);color:var(--bg);box-shadow:0 0 20px var(--neon-glow);}
.btn-price.primary:hover{transform:translateY(-1px);box-shadow:0 0 30px var(--neon-glow);}
.btn-price.outline{background:transparent;color:var(--text2);border:1px solid var(--border2);}
.btn-price.outline:hover{border-color:rgba(0,212,255,.4);color:var(--neon);background:rgba(0,212,255,.05);}

/* ── ADDONS ── */
.addons{padding:60px 5%;background:var(--bg2);}
.addons-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:40px;}
@media(max-width:600px){.addons-grid{grid-template-columns:1fr;}}
.addon-card{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px 22px;display:flex;align-items:center;gap:16px;overflow:hidden;transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .25s ease,box-shadow .25s ease;}
.addon-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--neon),#0066ff);opacity:0;transition:opacity .25s ease;}
.addon-card:hover{border-color:var(--border2);transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.28);}
.addon-card:hover::before{opacity:1;}
.addon-card:hover .addon-ico{transform:scale(1.06);}
.addon-ico{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .25s cubic-bezier(.16,1,.3,1);}
.addon-ico svg{display:block;}
.addon-info{flex:1;min-width:0;}
.addon-name{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--text);letter-spacing:-.2px;}
.addon-desc{font-size:12px;color:var(--text3);margin-top:3px;line-height:1.45;}
.addon-tag{flex-shrink:0;align-self:flex-start;font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text3);background:rgba(127,145,180,.12);border:1px solid var(--border);border-radius:20px;padding:3px 9px;}
.addon-price{display:none;}

/* ── CTA ── */
.cta-section{padding:100px 5%;background:linear-gradient(160deg,var(--bg3),var(--bg));text-align:center;position:relative;overflow:hidden;}
.cta-section::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 50% 50%,rgba(0,212,255,.05) 0%,transparent 70%);pointer-events:none;}
.cta-section::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,212,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,.04) 1px,transparent 1px);background-size:50px 50px;pointer-events:none;}
.cta-title{font-family:var(--font-display);font-size:52px;font-weight:800;color:#fff;letter-spacing:-2px;margin-bottom:16px;position:relative;z-index:1;}
@media(max-width:640px){.cta-title{font-size:34px;}}
.cta-sub{font-size:17px;color:var(--text2);margin-bottom:40px;position:relative;z-index:1;}
.cta-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative;z-index:1;}

/* ── FOOTER ── */
.footer{padding:30px 5%;background:var(--bg2);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;border-top:1px solid var(--border);}
.footer-brand{font-family:var(--font-display);font-size:16px;font-weight:800;color:var(--text);}
.footer-brand span{color:var(--neon);}
.footer-text{font-size:12px;color:var(--text3);font-family:var(--font-mono);}
.footer-sec{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;color:var(--text3);}
/* a11y target-size: give the footer nav links a ≥24px tap height without changing layout */
.footer-links a{display:inline-block;padding:6px 4px;line-height:1.4;}
.footer-sec-dot{width:6px;height:6px;border-radius:50%;background:var(--acid);box-shadow:0 0 6px var(--acid);animation:glowP 2s infinite;}

/* ── AUTH PAGES ── */
#registerPage,#loginPage{display:none;min-height:100vh;background:var(--bg);align-items:center;justify-content:center;padding:80px 20px 40px;position:relative;}
#registerPage::before,#loginPage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,212,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,.03) 1px,transparent 1px);background-size:50px 50px;pointer-events:none;}
.auth-card{background:var(--surface);border:1px solid var(--border2);border-radius:20px;width:100%;max-width:520px;overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.5);position:relative;z-index:1;}
.auth-card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--accent-strong),transparent);}
.auth-header{padding:28px 32px 24px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,var(--surface2),var(--surface));}
.auth-back{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--accent-strong);cursor:pointer;margin-bottom:18px;padding:5px 10px;border-radius:8px;transition:var(--transition);font-family:var(--font-mono);}
.auth-back:hover{background:var(--accent-soft);}
.auth-brand{display:flex;align-items:center;gap:10px;margin-bottom:5px;}
.auth-title{font-family:var(--font-display);font-size:22px;font-weight:800;color:var(--text);}
.auth-sub{font-size:13px;color:var(--text2);margin-top:5px;}
.auth-body{padding:28px 32px;}
.plan-selected{background:rgba(0,212,255,.05);border:1px solid rgba(0,212,255,.2);border-radius:10px;padding:12px 16px;margin-bottom:22px;display:flex;align-items:center;justify-content:space-between;}
.plan-sel-name{font-size:13px;font-weight:600;color:var(--neon);}
.plan-sel-price{font-family:var(--font-display);font-size:16px;font-weight:800;color:#fff;}
.form-group{margin-bottom:16px;}
.form-label{display:block;font-size:11px;font-weight:800;color:var(--text2);margin-bottom:6px;text-transform:uppercase;letter-spacing:.8px;font-family:var(--font-mono);}
.form-input{width:100%;padding:12px 14px;border:1px solid var(--border2);border-radius:8px;font-size:14px;font-weight:500;font-family:var(--font-body);color:var(--text);background:var(--bg2);outline:none;transition:var(--transition);}
.form-input:focus{border-color:rgba(0,212,255,.5);box-shadow:0 0 0 3px rgba(0,212,255,.08);}
.form-input::placeholder{color:var(--text2);font-weight:400;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:600px){.form-row{grid-template-columns:1fr;}}
.auth-footer{padding:20px 32px;border-top:1px solid var(--border);text-align:center;font-size:13px;color:var(--text2);}
.auth-footer a{color:var(--accent-strong);font-weight:600;cursor:pointer;text-decoration:none;}
.btn-full{width:100%;padding:14px;border:none;border-radius:var(--radius-pill);background:var(--accent-strong);color:#fff;font-size:15px;font-weight:700;cursor:pointer;font-family:var(--font-body);box-shadow:var(--shadow-pro);transition:var(--transition);display:flex;align-items:center;justify-content:center;gap:8px;}
.btn-full:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.18);}
[data-theme="pink"] .btn-full{background:linear-gradient(135deg,#ec4899,#f472b6);box-shadow:0 4px 14px rgba(236,72,153,0.3);}
.btn-full:disabled{opacity:.6;cursor:not-allowed;transform:none;}

/* ── MAIN APP ── */
#mainApp{display:none;min-height:100vh;background:var(--bg);}
.sidebar{position:fixed;top:0;left:0;bottom:0;width:240px;background:var(--bg2);border-right:1px solid var(--border);z-index:100;display:flex;flex-direction:column;transition:transform .25s cubic-bezier(.4,0,.2,1);}
@media(max-width:900px){
  .sidebar{transform:translateX(-100%);box-shadow:4px 0 24px rgba(0,0,0,.4);}
  .sidebar.open{transform:translateX(0);}
  .sidebar-nav{overflow-y:auto !important;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .sidebar-nav::-webkit-scrollbar{display:none;}
}
.sidebar-header{padding:20px 16px 18px;border-bottom:1px solid var(--border);}
.sb-brand{display:flex;align-items:center;gap:10px;}
.sb-brand-icon{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--neon),#0066ff);display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 0 15px var(--neon-glow);}
.sb-brand-name{font-family:var(--font-display);font-size:17px;font-weight:800;color:#fff;}
.sb-brand-name span{color:var(--neon);}
.sb-clinic{font-family:var(--font-mono);font-size:10px;color:var(--text3);margin-top:5px;}
.sidebar-nav{flex:1;padding:10px 8px;overflow-y:auto;scrollbar-width:none;}
.sidebar-nav::-webkit-scrollbar{display:none;}
.nav-section-label{font-family:var(--font-mono);font-size:9px;font-weight:800;color:var(--text-muted);text-transform:uppercase;letter-spacing:1.5px;padding:8px 12px 5px;}
.nav-sec{font-family:var(--font-mono);font-size:9px;font-weight:800;color:var(--text3);text-transform:uppercase;letter-spacing:2px;padding:10px 12px 4px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;font-size:13px;font-weight:700;color:var(--text2);cursor:pointer;transition:background-color 0.1s ease,color 0.1s ease;margin-bottom:2px;position:relative;}
.nav-item:hover{background:rgba(255,255,255,.04);color:var(--text);}
.nav-item.active{background:rgba(0,212,255,.08);color:var(--neon);border:1px solid rgba(0,212,255,.15);}
.nav-item.active::before{content:"";position:absolute;left:0;top:25%;bottom:25%;width:3px;border-radius:0 3px 3px 0;background:var(--neon);box-shadow:0 0 8px var(--neon);}
.nav-badge{margin-left:auto;background:var(--neon);color:var(--bg);border-radius:var(--radius-pill);padding:2px 7px;font-size:10px;font-weight:800;font-family:var(--font-mono);box-shadow:0 0 10px var(--neon-glow);}
.sidebar-footer-wrap{padding:14px 8px;border-top:1px solid var(--border);}
.sb-user-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;}
.sb-avatar-el{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--neon),#0066ff);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:13px;font-weight:800;color:var(--bg);flex-shrink:0;box-shadow:0 0 10px var(--neon-glow);}
.sb-uname{font-size:13px;font-weight:800;color:var(--text);}
.sb-urole{font-family:var(--font-mono);font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-top:1px;}
.sb-logout-btn{margin-left:auto;background:none;border:none;color:var(--text3);cursor:pointer;font-size:16px;padding:4px;border-radius:6px;transition:var(--transition);}
.sb-logout-btn:hover{color:var(--rose);background:rgba(244,63,94,.1);}
.main-content{margin-left:240px;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;}
@media(max-width:900px){.main-content{margin-left:0;}}
.top-bar{position:sticky;top:0;z-index:50;padding:0 16px 0 24px;height:64px;display:flex;align-items:center;justify-content:space-between;background:rgba(5,7,15,.97);backdrop-filter:none;border-bottom:1px solid var(--border);margin-left:240px;will-change:transform;}
@media(max-width:900px){.top-bar{margin-left:0;padding:0 12px;height:56px;}}
@media(max-width:480px){.top-bar{height:52px;padding:0 10px;}}
.topbar-left{display:flex;align-items:center;gap:14px;}
.menu-btn{display:none;background:none;border:none;color:var(--text2);cursor:pointer;font-size:20px;padding:6px;border-radius:8px;align-items:center;justify-content:center;width:36px;height:36px;}
.menu-btn:active{background:rgba(255,255,255,.08);}
@media(max-width:900px){.menu-btn{display:flex;}}
.page-title-el{font-family:var(--font-display);font-size:22px;font-weight:800;color:#fff;letter-spacing:-.5px;line-height:1.2;}
.topbar-right{display:flex;align-items:center;gap:10px;}
.date-chip{font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text3);padding:5px 12px;border-radius:var(--radius-pill);background:rgba(255,255,255,.04);border:1px solid var(--border);}
.sec-chip{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;color:var(--acid);padding:5px 12px;border-radius:var(--radius-pill);background:rgba(57,255,20,.05);border:1px solid rgba(57,255,20,.15);}
.sec-chip-dot{width:5px;height:5px;border-radius:50%;background:var(--acid);box-shadow:0 0 5px var(--acid);animation:glowP 2s infinite;}
@media(max-width:640px){.sec-chip{display:none;}}
.content-area{flex:1;padding:24px;margin-left:240px;min-height:calc(100vh - 64px);-webkit-overflow-scrolling:touch;overflow-x:hidden;}
@media(max-width:900px){.content-area{margin-left:0;padding:16px;}}
@media(max-width:480px){.content-area{padding:12px;}}

/* ── MISSING CLASSES ── */
.topbar-btn{position:relative;width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;cursor:pointer;background:rgba(255,255,255,.04);border:1px solid var(--border);transition:var(--transition);}
.topbar-btn:hover{background:rgba(255,255,255,.08);}
.topbar-badge{position:absolute;top:-4px;right:-4px;background:var(--neon);color:var(--bg);border-radius:var(--radius-pill);padding:1px 5px;font-size:9px;font-weight:800;font-family:var(--font-mono);}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px;}
@media(max-width:900px){.stats-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){.stats-grid{grid-template-columns:1fr 1fr;}}
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
@media(max-width:900px){.dash-grid{grid-template-columns:1fr;}}
.nav-icon-box{width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;}
.nav-label{flex:1;font-weight:700;}
.stat-icon{font-size:20px;margin-bottom:10px;}
.stat-value{font-family:var(--font-display);font-size:28px;font-weight:800;color:var(--text);letter-spacing:-1px;}
/* sidebar-overlay handled below */
.page{display:none;}
.page.active{display:block;}

/* ── STAT CARDS ── */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px;}
@media(max-width:900px){.stats-row{grid-template-columns:repeat(2,1fr);}}
.stat-card-el{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;position:relative;overflow:hidden;transition:var(--transition);}
.stat-card-el:hover{border-color:var(--border2);}
.stat-card-el::after{content:"";position:absolute;top:0;right:0;width:80px;height:80px;border-radius:50%;filter:blur(25px);opacity:.5;}
.sc-neon::after{background:var(--neon);} .sc-green::after,.sc-emerald::after{background:var(--emerald);} .sc-purple::after,.sc-violet::after{background:var(--violet);} .sc-amber::after{background:var(--amber);}
.stat-emoji{font-size:18px;margin-bottom:12px;}
.stat-num-el{font-family:var(--font-display);font-size:28px;font-weight:800;color:var(--text);letter-spacing:-1px;}
.stat-label-el{font-size:12px;color:var(--text3);margin-top:4px;}

/* ── GENERIC CARD ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:16px;}
.card-header{padding:16px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.card-title{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--text);}
.card-body{padding:20px;}
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px;gap:12px;flex-wrap:wrap;}
.search-bar{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-pill);padding:9px 16px;flex:1;max-width:320px;min-width:180px;transition:var(--transition);}
.search-bar:focus-within{border-color:rgba(0,212,255,.4);box-shadow:0 0 0 3px rgba(0,212,255,.06);}
.search-bar input{flex:1;background:none;border:none;outline:none;font-size:13px;color:var(--text);font-family:var(--font-body);}
.search-bar input::placeholder{color:var(--text3);}
.search-bar span{color:var(--text3);font-size:14px;}
.btn-add{display:flex;align-items:center;gap:6px;padding:10px 20px;border:none;border-radius:var(--radius-pill);background:var(--accent-strong);color:#fff;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font-body);box-shadow:var(--shadow-pro);transition:var(--transition);white-space:nowrap;}
.btn-add:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.14);}

/* ── TABLE ── */
.table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;}
.table-scroll{overflow-x:auto;}
table{width:100%;border-collapse:collapse;}
thead{background:var(--bg2);}
th{padding:11px 16px;text-align:left;font-family:var(--font-mono);font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:1px;white-space:nowrap;}
td{padding:13px 16px;font-size:13px;color:var(--text2);border-top:1px solid var(--border);}
tr:hover td{background:rgba(255,255,255,.02);}
.td-code{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--neon);background:rgba(0,212,255,.08);padding:3px 8px;border-radius:6px;}
.td-name{font-weight:700;color:var(--text);font-size:13px;}
.td-badge{display:inline-block;padding:3px 10px;border-radius:var(--radius-pill);font-size:11px;font-weight:700;font-family:var(--font-mono);}
/* PRO TOKENS v1 (jul03) — legacy fixed-alpha hexes repointed to theme tokens */
.td-badge.male{background:var(--accent-soft);color:var(--accent-strong);}
.td-badge.female{background:var(--danger-soft);color:var(--danger);}
.td-badge.other{background:var(--surface2);color:var(--text2);}
.badge-green{background:var(--ok-soft);color:var(--ok);}
.badge-amber{background:var(--warn-soft);color:var(--warn-strong);}
.badge-red{background:var(--danger-soft);color:var(--danger);}
.td-btn{padding:5px 12px;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;border:none;font-family:var(--font-body);transition:var(--transition);}
.td-btn.view{background:var(--accent-soft);color:var(--accent-strong);}
.td-btn.view:hover{background:var(--accent-soft);filter:brightness(.96);}
.td-btn.add-queue{background:var(--ok-soft);color:var(--ok);}
.td-btn.add-queue:hover{background:var(--ok-soft);filter:brightness(.96);}

/* ── PATIENT ROWS ── */
.patient-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border);}
.patient-row:last-child{border-bottom:none;}
.pat-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--neon),#0066ff);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:14px;font-weight:800;color:var(--bg);flex-shrink:0;}
.pat-info{flex:1;}
.pat-name{font-size:13px;font-weight:600;color:var(--text);}
.pat-meta{font-size:11px;color:var(--text3);font-family:var(--font-mono);margin-top:2px;}
.pat-action{color:var(--neon);cursor:pointer;font-size:16px;opacity:.6;}

/* ── QUEUE — PRO TOKENS v1, jul03 (de-neon; shell + PRO tokens only) ── */
.queue-board{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:18px;}
@media(max-width:800px){.queue-board{grid-template-columns:1fr;}}
.qb-col{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-pro);}
.qb-header{padding:10px 14px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.5px;}
.qb-header.waiting{color:var(--accent-strong);background:var(--accent-soft);}
.qb-header.consulting{color:var(--ok);background:var(--ok-soft);}
.qb-header.done{color:var(--text3);background:var(--surface2);}
.qb-count{min-width:22px;height:22px;padding:0 6px;border-radius:11px;font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-variant-numeric:tabular-nums;}
.qb-header.waiting .qb-count{background:var(--accent-soft);color:var(--accent-strong);}
.qb-header.consulting .qb-count{background:var(--ok-soft);color:var(--ok);}
.qb-header.done .qb-count{background:var(--surface2);color:var(--text3);}
.qb-body{padding:10px;display:flex;flex-direction:column;gap:7px;min-height:160px;}
.qb-card{background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--border2);border-radius:8px;padding:10px 12px;cursor:pointer;transition:border-color .15s,box-shadow .15s;}
.qb-card:hover{border-color:var(--accent);box-shadow:var(--shadow-pro);}
.qb-card.waiting{border-left-color:var(--accent);}
.qb-card.consulting{border-left-color:var(--ok);}
.qb-card.done{opacity:.72;}
.qb-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.qb-card-token{font-family:var(--font-mono);font-size:13px;font-weight:700;color:var(--accent-strong);font-variant-numeric:tabular-nums;}
.qb-card-name{font-size:12.5px;font-weight:600;color:var(--text);margin-top:2px;}
.qb-card-time{font-size:10.5px;color:var(--text3);margin-top:3px;font-variant-numeric:tabular-nums;}
.qb-wait{font-family:var(--font-mono);font-size:10px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text3);border-radius:5px;padding:1px 6px;white-space:nowrap;}
.qb-wait.warn{background:var(--warn-soft);color:var(--warn-strong);}
.qb-wait.hot{background:var(--danger-soft);color:var(--danger);}
.qb-empty{text-align:center;padding:20px 12px;font-size:12px;color:var(--text3);}
.qb-skel{height:56px;border-radius:8px;background:var(--surface2);}
@media(prefers-reduced-motion:no-preference){
  .qb-skel{animation:qbShimmer 1.4s ease-in-out infinite;}
  @keyframes qbShimmer{0%,100%{opacity:1;}50%{opacity:.45;}}
}
.btn-call-next{width:100%;padding:10px;border:1px solid var(--ok);border-radius:8px;background:var(--ok);color:#fff;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font-body);box-shadow:var(--shadow-pro);transition:filter .15s;margin-top:10px;display:flex;align-items:center;justify-content:center;gap:6px;}
.btn-call-next:hover{filter:brightness(1.08);}

/* ── MODALS ── */
.modal-overlay{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.82);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;pointer-events:none;transition:opacity .2s ease;}
.modal-overlay.open{opacity:1;pointer-events:all;}
.modal{background:var(--surface);border:1px solid var(--border2);border-radius:20px;width:100%;max-width:500px;max-height:90vh;overflow:visible;scrollbar-width:thin;box-shadow:0 30px 80px rgba(0,0,0,.5);transform:scale(.95) translateY(10px);transition:transform .25s cubic-bezier(.34,1.56,.64,1);position:relative;}
.modal::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--neon),transparent);}
.modal-overlay.open .modal{transform:scale(1) translateY(0);}
.modal-header{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--surface);z-index:1;}
.modal-title{font-family:var(--font-display);font-size:17px;font-weight:800;color:#fff;}
.modal-close{background:rgba(255,255,255,.05);border:none;font-size:16px;cursor:pointer;color:var(--text2);padding:6px;border-radius:8px;transition:var(--transition);width:30px;height:30px;display:flex;align-items:center;justify-content:center;}
.modal-close:hover{background:rgba(244,63,94,.15);color:var(--rose);}
.modal-body{padding:22px;overflow-y:auto;max-height:calc(85vh - 130px);}
.modal-footer{padding:16px 22px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end;background:var(--bg2);}
@media(max-width:768px){
  /* OVERLAY: fullscreen, scrollable top-to-bottom so footer is always reachable */
  .modal-overlay{
    position:fixed !important;
    inset:0 !important;
    display:none !important;
    padding:0 !important;
    z-index:9999 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    overscroll-behavior-y:contain !important;
  }
  .modal-overlay.open{
    display:flex !important;
    opacity:1 !important;
    pointer-events:auto !important;
    align-items:flex-start !important;
  }
  /* MODAL: full width, auto height (grows with content, footer always at bottom) */
  .modal{
    width:100% !important;
    max-width:100% !important;
    min-height:100vh !important;
    min-height:100dvh !important; /* iOS: fit the visible viewport, not the tall one */
    height:auto !important;
    max-height:none !important;
    border-radius:0 !important;
    overflow:visible !important;
    display:flex !important;
    flex-direction:column !important;
    margin:0 !important;
    transform:none !important;
    box-shadow:none !important;
    position:relative !important;
  }
  /* HEADER: sticky at top within the scrolling overlay */
  .modal-header{
    position:sticky !important;
    top:0 !important;
    z-index:10 !important;
    height:54px !important;
    min-height:54px !important;
    padding:0 16px !important;
    flex-shrink:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    background:var(--surface) !important;
    border-bottom:1px solid var(--border) !important;
  }
  .modal-title{font-size:15px !important;}
  /* BODY: natural height, no scroll trap — the overlay scrolls */
  .modal-body{
    flex:1 !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    padding:16px !important;
  }
  /* FOOTER: sticks to bottom of modal content, always visible after scroll */
  .modal-footer{
    position:sticky !important;
    bottom:0 !important;
    z-index:10 !important;
    padding:12px 16px !important;
    /* Keep action buttons above the iPhone home-indicator bar (viewport-fit=cover). */
    padding-bottom:max(12px, env(safe-area-inset-bottom)) !important;
    flex-shrink:0 !important;
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    border-top:1px solid var(--border) !important;
    background:var(--bg2) !important;
  }
  .modal-footer button{
    flex:1 !important;
    height:44px !important;
    min-width:0 !important;
    padding:0 8px !important;
    font-size:14px !important;
    border-radius:10px !important;
  }
  /* FORM ELEMENTS — single column, no field stretching */
  .modal .form-row{
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
  }
  .modal .form-group{ margin-bottom:12px !important; width:100% !important; min-width:0 !important; }
  .modal .form-input,
  .modal .form-select,
  .modal textarea{
    font-size:16px !important;
    padding:12px !important;
    width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
  }
  .modal .form-label{ font-size:12px !important; margin-bottom:5px !important; }
  /* Medicine rows */
  #medRows > div{ grid-template-columns:1fr 1fr !important; gap:6px !important; }
  #medRows > div > .ac-wrap{ grid-column:1/-1 !important; }
  /* Inline max-width overrides on modal element */
  .modal-overlay .modal[style]{
    width:100% !important; max-width:100% !important;
    min-height:100vh !important; min-height:100dvh !important; height:auto !important;
    max-height:none !important; border-radius:0 !important;
  }
  /* Grids inside modal body */
  .modal-body [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important;}
  .modal-body [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr !important;}
  .modal-body [style*="display:grid"]{grid-template-columns:1fr !important;}
  /* Invoice line-item grid — keep compact */
  .modal-body [style*="grid-template-columns:3fr"]{grid-template-columns:2fr 1fr 1fr auto !important;}
}
.btn-secondary{padding:9px 18px;border:1px solid var(--border2);border-radius:var(--radius-pill);background:transparent;color:var(--text2);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font-body);transition:var(--transition);}
.btn-secondary:hover{color:var(--text);background:rgba(255,255,255,.04);}
.btn-save{padding:9px 18px;border:none;border-radius:var(--radius-pill);background:var(--accent-strong);color:#fff;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font-body);box-shadow:var(--shadow-pro);transition:var(--transition);}
.btn-save:hover{box-shadow:0 3px 10px rgba(0,0,0,.14);}
.form-select{width:100%;padding:11px 14px;border:1px solid var(--border2);border-radius:8px;font-size:14px;font-weight:500;font-family:var(--font-body);color:var(--text);background:var(--bg2);outline:none;transition:var(--transition);-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23445577' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;}
.form-select:focus{border-color:rgba(0,212,255,.4);}
.form-select option{background:var(--bg2);color:var(--text);}

/* ── SUBSCRIPTION ── */
.sub-expired-overlay{position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;padding:20px;}
.sub-expired-card{background:var(--surface);border:1px solid rgba(244,63,94,.3);border-radius:20px;max-width:420px;width:100%;padding:40px;text-align:center;box-shadow:0 0 60px rgba(244,63,94,.1);}
.expiry-warning{display:none;background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.25);border-radius:10px;padding:12px 18px;margin:0 24px 16px;font-size:13px;font-weight:600;color:var(--amber);align-items:center;gap:10px;}
.primary-light{background:rgba(0,212,255,.1);}
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:99;backdrop-filter:none;}
@media(max-width:900px){.sidebar-overlay.show{display:block;}.sidebar-overlay.open{display:block;}}
@media(max-width:600px){.hide-mobile{display:none!important;}}

/* ── MISC STATES ── */
.empty-state{padding:48px 20px;text-align:center;color:var(--text3);}
.empty-icon{font-size:36px;margin-bottom:12px;opacity:.5;}
.empty-state p{font-size:14px;}
.loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:36px;color:var(--text3);font-size:13px;}
.spinner{width:18px;height:18px;border:2px solid var(--border2);border-top-color:var(--neon);border-radius:50%;animation:spin .7s linear infinite;box-shadow:0 0 10px var(--neon-glow);}
.queue-item{display:flex;align-items:center;gap:10px;background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:9px 12px;margin-bottom:6px;}
.q-token{font-family:var(--font-mono);font-size:12px;font-weight:700;padding:4px 8px;border-radius:6px;}
.q-token.active{background:rgba(16,185,129,.2);color:var(--emerald);}
.q-token.waiting{background:rgba(0,212,255,.15);color:var(--neon);}
.q-token.done{background:rgba(255,255,255,.05);color:var(--text3);}
.q-name{font-size:12px;font-weight:600;color:var(--text);}
.q-meta{font-size:10px;color:var(--text3);font-family:var(--font-mono);}
.q-status{font-family:var(--font-mono);font-size:10px;font-weight:700;padding:2px 8px;border-radius:20px;margin-left:auto;}
.q-status.active{background:rgba(16,185,129,.2);color:var(--emerald);}
.q-status.waiting{background:rgba(0,212,255,.15);color:var(--neon);}
.q-status.done{background:rgba(255,255,255,.05);color:var(--text3);}
.invoice-table .badge-green,.td-badge.badge-green{background:var(--ok-soft)!important;color:var(--ok)!important;}
.invoice-table .badge-amber,.td-badge.badge-amber{background:var(--warn-soft)!important;color:var(--warn-strong)!important;}
.invoice-table .badge-red,.td-badge.badge-red{background:var(--danger-soft)!important;color:var(--danger)!important;}

/* ══════════════════════════════════════════
   THEME SYSTEM — dark (default) | light | pink
══════════════════════════════════════════ */

/* ── LIGHT THEME ── */
[data-theme="light"] {
  --bg: #f5f7ff;
  --bg2: #eef1fb;
  --bg3: #e6eaf7;
  --surface: #ffffff;
  --surface2: #f0f3ff;
  --border: rgba(0,0,0,0.08);
  --border2: rgba(0,0,0,0.14);
  --neon: #0066cc;
  --neon-glow: rgba(0,102,204,0.2);
  --acid: #00aa00;
  --emerald: #059669;
  --emerald-glow: rgba(5,150,105,0.2);
  --amber: #d97706;
  --rose: #e11d48;
  --violet: #7c3aed;
  --violet-glow: rgba(124,58,237,0.15);
  --text: #0f172a;
  --text2: #334155;
  --text3: #64748b;
  --text-muted: #94a3b8;
  --green: #059669;
  --red: #e11d48;
  --purple: #7c3aed;
}

[data-theme="light"] body::before { opacity: 0; }

[data-theme="light"] .nav {
  background: rgba(245,247,255,0.9);
  border-bottom-color: rgba(0,0,0,0.1);
}
[data-theme="light"] .nav.scrolled {
  background: rgba(245,247,255,0.98);
}
[data-theme="light"] .nav-name {
  background: linear-gradient(135deg,#0f172a 40%,#0066cc);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
[data-theme="light"] .nav-link { color: #1e293b; }
[data-theme="light"] .nav-link:hover { background: rgba(0,102,204,0.08); color: #0066cc; border-color: rgba(0,102,204,0.28); }
[data-theme="light"] .nav-cta { background: #0066cc; box-shadow: 0 0 20px rgba(0,102,204,0.25); color: #fff; }

[data-theme="light"] .hero { background: linear-gradient(160deg,#eef1ff 0%,#f5f7ff 60%,#f0f3ff 100%); }
[data-theme="light"] .hero::before { background-image: linear-gradient(rgba(0,102,204,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,102,204,0.04) 1px,transparent 1px); }
[data-theme="light"] .hero-title { color: #0f172a; }
[data-theme="light"] .hero-orb-1 { background: radial-gradient(circle,rgba(0,102,204,0.1) 0%,transparent 70%); }
[data-theme="light"] .hero-badge { background: rgba(0,102,204,0.08); border-color: rgba(0,102,204,0.2); }
[data-theme="light"] .hero-stat-num { color: #0f172a; }
[data-theme="light"] .btn-hero-primary { background: #0066cc; box-shadow: 0 0 20px rgba(0,102,204,0.3); }
[data-theme="light"] .btn-hero-secondary { border-color: rgba(0,0,0,0.15); color: #334155; background: rgba(0,0,0,0.03); }
[data-theme="light"] .btn-hero-secondary:hover { background: rgba(0,102,204,0.06); border-color: rgba(0,102,204,0.3); color: #0066cc; }

[data-theme="light"] .hvs-card { background: #fff; border-color: rgba(0,0,0,0.1); box-shadow: 0 12px 40px rgba(0,0,0,0.1); }
[data-theme="light"] .hvs-msg-row, [data-theme="light"] .hvs-wa-item { background: #f0f3ff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .hvs-ai-row { border-color: rgba(0,0,0,0.1); }

[data-theme="light"] .sidebar { background: #fff; border-right-color: rgba(0,0,0,0.08); }
[data-theme="light"] .sidebar-header { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .sidebar .sidebar-header > div > div > div:first-child { color: #0f172a !important; }
[data-theme="light"] .sidebar-header div[style*="color:#fff"] { color: #0f172a !important; }
[data-theme="light"] .nav-item { color: #334155; }
[data-theme="light"] .nav-item:hover { background: rgba(0,0,0,0.04); color: #0f172a; }
[data-theme="light"] .nav-item.active { background: rgba(0,102,204,0.08); color: #0066cc; border-color: rgba(0,102,204,0.15); }
[data-theme="light"] .nav-item.active::before { background: #0066cc; box-shadow: none; }
[data-theme="light"] .sb-brand-name, [data-theme="light"] .sb-uname { color: #0f172a; }
[data-theme="light"] .sb-clinic, [data-theme="light"] .sb-urole { color: #64748b; }
[data-theme="light"] .sb-avatar-el { background: linear-gradient(135deg,#0066cc,#0044aa); }
[data-theme="light"] .sb-logo { background: linear-gradient(135deg,#0066cc,#0044aa); }
[data-theme="light"] .nav-badge { background: #0066cc; }

[data-theme="light"] .top-bar { background: rgba(245,247,255,0.92); border-bottom-color: rgba(0,0,0,0.08); }
[data-theme="light"] .page-title-el { color: #0f172a; }
[data-theme="light"] .date-chip { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.1); color: #64748b; }
[data-theme="light"] .sec-chip { background: rgba(0,150,0,0.06); border-color: rgba(0,150,0,0.2); color: #00aa00; }

[data-theme="light"] .stat-card-el { background: #fff; border-color: rgba(0,0,0,0.08); box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
[data-theme="light"] .stat-num-el { color: #0f172a; }
[data-theme="light"] .stat-value { color: #0f172a; }
[data-theme="light"] .stat-label-el { color: #64748b; }
[data-theme="light"] .stat-icon { filter: none; }
[data-theme="light"] .card { background: #fff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .content-area { background: #f0f3ff; }
[data-theme="light"] #mainApp { background: #f0f3ff; }
[data-theme="light"] .sidebar-header { border-bottom-color: rgba(0,0,0,0.06); background: #fff; }
[data-theme="light"] .card-header { border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .card-title { color: #0f172a; }
[data-theme="light"] .table-wrap { background: #fff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] thead { background: #f0f3ff; }
[data-theme="light"] th { color: #64748b; }
[data-theme="light"] td { color: #334155; border-top-color: rgba(0,0,0,0.05); }
[data-theme="light"] tr:hover td { background: rgba(0,102,204,0.02); }
[data-theme="light"] .td-name { color: #0f172a; }
[data-theme="light"] .td-code { background: rgba(0,102,204,0.08); color: #0066cc; }
[data-theme="light"] .search-bar { background: #fff; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .search-bar input { color: #0f172a; }
[data-theme="light"] .btn-add { background: #0066cc; box-shadow: 0 0 12px rgba(0,102,204,0.2); }
[data-theme="light"] .form-input { background: #fff; border-color: rgba(0,0,0,0.15); color: #0f172a; font-weight:500; }
[data-theme="light"] .form-input:focus { border-color: #0066cc; box-shadow: 0 0 0 3px rgba(0,102,204,0.1); }
[data-theme="light"] .form-select { background: #fff; border-color: rgba(0,0,0,0.15); color: #0f172a; font-weight:500; }
[data-theme="light"] .modal { background: #fff; border-color: rgba(0,0,0,0.1); }
[data-theme="light"] .modal-header { background: #fff; border-bottom-color: rgba(0,0,0,0.06); }
[data-theme="light"] .modal-title { color: #0f172a; }
[data-theme="light"] .modal-footer { background: #f5f7ff; border-top-color: rgba(0,0,0,0.06); }
[data-theme="light"] .btn-secondary { border-color: rgba(0,0,0,0.12); color: #334155; }
[data-theme="light"] .btn-save { background: #0066cc; box-shadow: 0 0 12px rgba(0,102,204,0.2); }
[data-theme="light"] .qb-col { background: #fff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .qb-card { background: #f0f3ff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .spinner { border-color: rgba(0,0,0,0.1); border-top-color: #0066cc; }
[data-theme="light"] .pat-avatar { background: linear-gradient(135deg,#0066cc,#0044aa); }

/* light theme — section/page title hardcoded #fff fixes */
[data-theme="light"] .section-title { color: #0f172a; }
[data-theme="light"] .cta-title { color: #0f172a; }
[data-theme="light"] .cta-sub { color: #334155; }
[data-theme="light"] .price-amount { color: #0f172a; }
[data-theme="light"] .price-amount span { color: #64748b; }
[data-theme="light"] .popular-badge { color: #fff; }
[data-theme="light"] .hero-stat-num { color: #0f172a; }
[data-theme="light"] .footer-brand { color: #0f172a; }
[data-theme="light"] .footer-text { color: #64748b; }
[data-theme="light"] .footer-sec { color: #64748b; }
[data-theme="light"] .cta-section { background: linear-gradient(160deg,#e8edff 0%,#f0f4ff 100%); }
[data-theme="light"] .cta-section::after { background-image: linear-gradient(rgba(0,102,204,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(0,102,204,0.04) 1px,transparent 1px); }
[data-theme="light"] .addons { background: #eef1fb; }
[data-theme="light"] .addon-card { background: #fff; border-color: rgba(15,23,42,0.08); box-shadow: 0 2px 14px rgba(15,23,42,0.05); }
[data-theme="light"] .addon-card:hover { border-color: rgba(0,102,204,0.30); box-shadow: 0 18px 40px rgba(15,23,42,0.12); }
[data-theme="light"] .addon-name { color: #0f172a; }
[data-theme="light"] .addon-desc { color: #64748b; }
[data-theme="light"] .addon-tag { color: #64748b; background: rgba(15,23,42,0.04); border-color: rgba(15,23,42,0.08); }
[data-theme="light"] .pricing { background: #f5f7ff; }
[data-theme="light"] .price-card { background: #fff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .price-card.popular { border-color: #0066cc; background: linear-gradient(160deg,#eef4ff,#fff); }
[data-theme="light"] .price-plan { color: #64748b; }
[data-theme="light"] .price-period { color: #64748b; }
[data-theme="light"] .price-feat { color: #334155; }
[data-theme="light"] .features { background: #eef1fb; }
[data-theme="light"] .feat-card { background: #fff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .feat-title { color: #0f172a; }
[data-theme="light"] .feat-desc { color: #334155; }
[data-theme="light"] .security-section { background: linear-gradient(180deg,#f5f7ff 0%,#eef1fb 100%); }
[data-theme="light"] .sec-card { background: #fff; border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .sec-title { color: #0f172a; }
[data-theme="light"] .sec-desc { color: #334155; }
[data-theme="light"] .section-sub { color: #334155; }
[data-theme="light"] .section-badge { background: #e8f0ff; border-color: #bfdbfe; color: #0066cc; }

/* ── PINK THEME ── */
/* ═══════════════════════════════════════════
   PINK THEME — modern light rose with soft gradients
   (a true light theme, not a tinted black one)
═══════════════════════════════════════════ */
[data-theme="pink"] {
  --bg: #fff0f7;
  --bg2: #ffe4ef;
  --bg3: #ffd6e8;
  --surface: #fff7fb;
  --surface2: #ffeef6;
  --border: rgba(236,72,153,0.16);
  --border2: rgba(236,72,153,0.30);
  --neon: #ec4899;
  --neon-glow: rgba(236,72,153,0.30);
  --acid: #db2777;
  --emerald: #059669;
  --emerald-glow: rgba(5,150,105,0.2);
  --amber: #d97706;
  --rose: #e11d48;
  --violet: #a21caf;
  --violet-glow: rgba(162,28,175,0.2);
  --text: #3d0a26;
  --text2: #8a3d63;
  --text3: #b06a8e;
  --text-muted: #caa0b8;
  --green: #059669;
  --red: #e11d48;
  --purple: #a21caf;
  --primary: #ec4899; --primary2: #db2777; --white: #ffffff;
}

/* App background — soft pink gradient */
[data-theme="pink"] body::before { display: none; }
[data-theme="pink"] body,
[data-theme="pink"] #mainApp { background: linear-gradient(160deg,#fff5fa 0%,#ffe9f3 55%,#ffeef6 100%); }
[data-theme="pink"] .content-area,
[data-theme="pink"] .main-content { background: transparent; }

/* Sidebar — gentle pink gradient with dark plum text */
[data-theme="pink"] .sidebar { background: linear-gradient(180deg,#fff5fa,#ffe6f1) !important; border-right: 1px solid rgba(236,72,153,0.14) !important; box-shadow: none !important; }
[data-theme="pink"] .sidebar-header, [data-theme="pink"] .sidebar-footer { border-color: rgba(236,72,153,0.12) !important; }
[data-theme="pink"] .sb-brand-name, [data-theme="pink"] .sb-brand-name span, [data-theme="pink"] .sb-uname { color: #3d0a26 !important; }
[data-theme="pink"] .sb-brand-sub, [data-theme="pink"] .sb-clinic, [data-theme="pink"] .sb-urole, [data-theme="pink"] .sb-user-role { color: #a85585 !important; }
[data-theme="pink"] .nav-item { color: #7a3258 !important; }
[data-theme="pink"] .nav-item:hover { background: rgba(236,72,153,0.08) !important; color: #3d0a26 !important; }
[data-theme="pink"] .nav-item.active { background: rgba(236,72,153,0.12) !important; color: #db2777 !important; border-color: rgba(236,72,153,0.25) !important; }
[data-theme="pink"] .nav-item.active::before { background: #ec4899 !important; box-shadow: none !important; }
[data-theme="pink"] .nav-section-label, [data-theme="pink"] .nav-sec { color: #c07a9e !important; }

/* Top bar */
[data-theme="pink"] .top-bar { background: rgba(255,245,250,0.92) !important; border-bottom-color: rgba(236,72,153,0.14) !important; box-shadow: none !important; }
[data-theme="pink"] .page-title-el, [data-theme="pink"] .page-title { color: #3d0a26 !important; }

/* Cards / stat cards / tables */
[data-theme="pink"] .card,
[data-theme="pink"] .stat-card-el,
[data-theme="pink"] .table-wrap,
[data-theme="pink"] .qb-col,
[data-theme="pink"] .qb-card { background: var(--surface) !important; border-color: rgba(236,72,153,0.14) !important; }
[data-theme="pink"] .card-header, [data-theme="pink"] .sidebar-header { border-bottom-color: rgba(236,72,153,0.10) !important; }
[data-theme="pink"] .card-title, [data-theme="pink"] .stat-num-el, [data-theme="pink"] .stat-value, [data-theme="pink"] .td-name { color: #3d0a26 !important; }
[data-theme="pink"] .stat-label-el { color: #a85585 !important; }
[data-theme="pink"] thead { background: #fff0f6 !important; }
[data-theme="pink"] th { color: #a85585 !important; }
[data-theme="pink"] td { color: #5c2742 !important; border-top-color: rgba(236,72,153,0.10) !important; }
[data-theme="pink"] tr:hover td { background: rgba(236,72,153,0.04) !important; }
[data-theme="pink"] .td-code { background: rgba(236,72,153,0.12) !important; color: #db2777 !important; }

/* Forms / search / buttons */
[data-theme="pink"] .search-bar { background: #ffffff !important; border-color: rgba(236,72,153,0.18) !important; }
[data-theme="pink"] .search-bar input { color: #3d0a26 !important; }
[data-theme="pink"] .search-bar:focus-within { border-color: rgba(236,72,153,0.4); box-shadow: 0 0 0 3px rgba(236,72,153,0.08); }
[data-theme="pink"] .form-input, [data-theme="pink"] .form-select { background: #ffffff !important; border-color: rgba(236,72,153,0.20) !important; color: #3d0a26 !important; font-weight: 500; }
[data-theme="pink"] .form-input:focus, [data-theme="pink"] .form-select:focus { border-color: #ec4899 !important; box-shadow: 0 0 0 3px rgba(236,72,153,0.12) !important; }
[data-theme="pink"] .btn-add, [data-theme="pink"] .btn-save { background: linear-gradient(135deg,#ec4899,#f472b6) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(236,72,153,0.3) !important; }
[data-theme="pink"] .btn-secondary { border-color: rgba(236,72,153,0.25) !important; color: #8a3d63 !important; }

/* Modals */
[data-theme="pink"] .modal { background: #ffffff !important; border-color: rgba(236,72,153,0.18) !important; }
[data-theme="pink"] .modal-header { background: #fff5fa !important; border-bottom-color: rgba(236,72,153,0.10) !important; }
[data-theme="pink"] .modal-footer { background: #fff5fa !important; border-top-color: rgba(236,72,153,0.10) !important; }
[data-theme="pink"] .modal-title { color: #3d0a26 !important; }
[data-theme="pink"] .modal::before { background: linear-gradient(90deg,transparent,#ec4899,transparent); }

/* Avatars / badges / accents */
[data-theme="pink"] .pat-avatar,
[data-theme="pink"] .sb-avatar-el,
[data-theme="pink"] .sb-logo,
[data-theme="pink"] .sb-brand-icon,
[data-theme="pink"] .nav-badge { background: linear-gradient(135deg,#ec4899,#db2777) !important; color: #fff !important; }
[data-theme="pink"] .spinner { border-color: rgba(236,72,153,0.15) !important; border-top-color: #ec4899 !important; }
[data-theme="pink"] .section-title, [data-theme="pink"] .cta-title { color: #3d0a26 !important; }
[data-theme="pink"] .sec-chip { background: rgba(236,72,153,0.08); border-color: rgba(236,72,153,0.25); color: #db2777; }
[data-theme="pink"] .sec-chip-dot { background: #ec4899; box-shadow: 0 0 5px rgba(236,72,153,0.6); }
[data-theme="pink"] .td-code { background: rgba(236,72,153,0.12); color: #db2777; }

/* Landing page — light rose */
[data-theme="pink"] .nav { background: rgba(255,245,250,0.9); border-bottom-color: rgba(236,72,153,0.12); }
[data-theme="pink"] .nav.scrolled { background: rgba(255,245,250,0.98); }
[data-theme="pink"] .nav-name { color: #3d0a26; }
[data-theme="pink"] .nav-link { color: #8a3d63; }
[data-theme="pink"] .nav-link:hover { background: rgba(236,72,153,0.06); color: #3d0a26; }
[data-theme="pink"] .nav-cta,
[data-theme="pink"] .btn-hero-primary { background: linear-gradient(135deg,#ec4899,#f472b6); color: #fff; box-shadow: 0 4px 18px rgba(236,72,153,0.35); }
[data-theme="pink"] .hero { background: linear-gradient(160deg,#fff0f7 0%,#ffe4f0 60%,#ffeef6 100%); }
[data-theme="pink"] .hero::before { background-image: linear-gradient(rgba(236,72,153,0.04) 1px,transparent 1px),linear-gradient(90deg,rgba(236,72,153,0.04) 1px,transparent 1px); }
[data-theme="pink"] .hero-title { color: #3d0a26; }
[data-theme="pink"] .hero-orb-1 { background: radial-gradient(circle,rgba(236,72,153,0.12) 0%,transparent 70%); }
[data-theme="pink"] .hero-orb-2 { background: radial-gradient(circle,rgba(244,114,182,0.12) 0%,transparent 70%); }
[data-theme="pink"] .hero-badge { background: rgba(236,72,153,0.1); border-color: rgba(236,72,153,0.25); }
[data-theme="pink"] .nav-logo { background: linear-gradient(135deg,#ec4899,#db2777); box-shadow: 0 0 20px rgba(236,72,153,0.3); }
[data-theme="pink"] .hvs-dot-on { background: #ec4899; box-shadow: 0 0 10px rgba(236,72,153,0.4); }

/* ── THEME SWITCHER WIDGET ── */
.theme-switcher {
  display: flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: var(--radius-pill);
  padding: 3px;
  gap: 2px;
  position: relative;
}
.theme-btn {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  transition: all 0.25s cubic-bezier(0.34,1.56,0.64,1);
  position: relative;
  flex-shrink: 0;
}
.theme-btn:hover { transform: scale(1.15); }
.theme-btn.active { border-color: var(--neon); box-shadow: 0 0 8px var(--neon-glow); transform: scale(1.1); }
.theme-btn-dark { background: #1a2236; }
.theme-btn-light { background: #e8f0ff; }
.theme-btn-pink { background: linear-gradient(135deg,#ec4899,#f472b6); }
.theme-btn[title]::after {
  content: attr(title);
  position: absolute;
  bottom: -26px; left: 50%; transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: 9px; color: var(--text2);
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s;
  z-index: 100;
}
.theme-btn:hover::after { opacity: 1; }


/* ═══════════════════════════════════════════
   PERFORMANCE OPTIMISATIONS
═══════════════════════════════════════════ */

/* GPU-accelerate the things that actually move */
.modal,.modal-overlay,.toast-item{will-change:transform,opacity;}

/* Remove expensive effects on low-end / mobile */
@media (max-width:768px),(hover:none){
  /* Kill backdrop-filter everywhere on touch devices */
  .nav,.top-bar,.modal-overlay,.sidebar-overlay{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
  /* Simpler shadows on mobile */
  .modal{box-shadow:0 8px 32px rgba(0,0,0,.5)!important;}
  .stat-card-el{box-shadow:none!important;}
  /* Pause hero animations when not visible — they're hidden in app anyway */
  .hero-orb-1,.hero-orb-2,.hero-card-float{animation-play-state:paused;}
  /* Kill filter:blur on hero (expensive) */
  .hero-orb,.hero-orb-1,.hero-orb-2{filter:none!important;}
  /* Faster transitions on mobile */
  :root{--transition:background-color 0.1s ease,color 0.1s ease,opacity 0.1s ease,transform 0.1s ease;}
  .sidebar{transition:transform .2s ease!important;}
  /* Scrollable areas - allow vertical page scrolling through tables */
  .content-area{-webkit-overflow-scrolling:touch;}
  .modal-body{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
  .sidebar-nav{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
  .table-wrap{-webkit-overflow-scrolling:touch;touch-action:pan-y;overscroll-behavior:auto;}
  /* Reduce paint area for fixed elements */
  .top-bar{position:sticky;background:var(--bg)!important;}
  /* Optimize rendering on mobile - reduce composite layers */
  .modal,.modal-overlay{transform:translateZ(0);}/* sidebar excluded—conflicts with translateX on Android */
  /* Freeze non-visible content - use display:none for faster switching */
  .page{display:none;}
  .page.active{display:block;}
  /* Aggressive image lazy loading */
  img{content-visibility:auto;}
  /* Optimize module container */
  #moduleContainer{contain:layout style;}
}

/* Sidebar GPU layer - only on desktop */
@media(min-width:901px){.sidebar{transform:translateZ(0);}}

/* Table scroll on mobile */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;contain:layout;}

/* Reduce animation motion for users who prefer it */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}

/* Prevent 300ms tap delay everywhere */
html{touch-action:manipulation;}
/* ── Pause ALL landing animations when app is active (saves battery + GPU) ── */
body.app-mode .hero-orb-1,
body.app-mode .hero-orb-2,
body.app-mode .hero-card-float,
body.app-mode .hero-badge-dot,
body.app-mode .hvs-dot-on,
body.app-mode [class*="hvs-"],
body.app-mode .sec-chip-dot,
body.app-mode .stat-card-el::after {
  animation-play-state: paused !important;
  animation: none !important;
}
body.app-mode .landingPage,
body.app-mode #landingPage { display: none !important; }

/* ═══════════════════════════════════════════════════
   TOP-NOTCH CLIENT-SIDE RENDERING OPTIMIZATIONS
══════════════════════════════════════════════════ */

/* ── Containment for paint optimization ── */
.dash-grid,.stats-grid,.queue-board,.features-grid,.security-grid,.pricing-grid{contain:layout style;}

/* ── Fragmented updates - batch DOM changes ── */
.batch-update{will-change:transform;}

/* ── Lazy images with blur-up effect ── */
img.lazy{opacity:0;transition:opacity 0.3s ease;}
img.lazy-loaded{opacity:1;}
img.lazy[src]{background:linear-gradient(90deg,var(--bg2) 25%,var(--bg3) 50%,var(--bg2) 75%);background-size:200% 100%;animation:lazyShimmer 1.5s ease-in-out infinite;}
@keyframes lazyShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Optimize table rendering ── */
.table-wrap tbody{contain:strict;}

/* ── Prevent layout thrashing - read/write batching ── */
.no-flash{contain:layout style paint;}

/* ── Smooth scrolling with fallbacks ── */
.smooth-scroll{-webkit-overflow-scrolling:touch;scroll-behavior:smooth;}
@supports (scroll-behavior:smooth){}
/* ── GPU compositing for transforms ── */
.gpu-accelerated{transform:translateZ(0);backface-visibility:hidden;perspective:1000px;}


/* ── ULTRA-STRONG MOBILE SCROLL ── */
@media(max-width:900px){
  html{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    height:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  body{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    height:auto !important;
    min-height:100vh !important;
    -webkit-overflow-scrolling:touch !important;
    position:relative !important;
  }
  body.app-mode{
    overflow-y:auto !important;
    height:auto !important;
  }
  #mainApp{
    overflow:visible !important;
    height:auto !important;
    min-height:100vh !important;
  }
  .main-content{
    overflow:visible !important;
    height:auto !important;
    min-height:100vh !important;
    margin-left:0 !important;
    display:flex !important;
  }
  .content-area{
    overflow:visible !important;
    height:auto !important;
    min-height:auto !important;
    max-height:none !important;
    margin-left:0 !important;
    padding:16px 16px 120px 16px !important;
  }
  .page{
    overflow:visible !important;
    height:auto !important;
    max-height:none !important;
  }
  .page.active{
    overflow:visible !important;
    height:auto !important;
    display:block !important;
  }
}


/* ───────────────────────── next block ───────────────────────── */


/* ── AUTOCOMPLETE DROPDOWN ── */
.ac-wrap{position:relative;flex:1;}
.ac-dropdown{display:none;}
/* Portal dropdown - fixed position, rendered outside modal */
#acPortal{
  position:fixed;
  background:var(--surface,#1e293b);
  border:1px solid var(--border2,#334155);
  border-radius:10px;
  box-shadow:0 8px 30px rgba(0,0,0,.4);
  z-index:99999;
  max-height:220px;overflow-y:auto;
  scrollbar-width:thin;
  display:none;
  min-width:200px;
}
#acPortal.open{display:block;}
.ac-item{
  padding:9px 13px;cursor:pointer;
  font-size:13px;color:var(--text,#0f172a);
  border-bottom:1px solid var(--border,rgba(0,0,0,0.06));
  display:flex;flex-direction:column;gap:1px;
  transition:background .12s;
}
.ac-item:last-child{border-bottom:none;}
.ac-item:hover,.ac-item.ac-active{background:rgba(14,165,233,.08);color:var(--neon,#0ea5e9);}
.ac-item-name{font-weight:700;font-size:12px;}
.ac-item-sub{font-size:10px;color:var(--text3,#94a3b8);}
.ac-highlight{color:var(--neon,#0ea5e9);font-weight:800;}

/* Specialty switcher */
.rx-specialty-bar{
  display:flex;align-items:center;gap:8px;
  background:var(--bg2,#f8fafc);
  border:1px solid var(--border,#e2e8f0);
  border-radius:10px;padding:8px 12px;
  margin-bottom:14px;flex-wrap:wrap;
}
.rx-spec-label{font-size:11px;font-weight:700;color:var(--text3,#64748b);text-transform:uppercase;letter-spacing:.5px;margin-right:4px;}
.rx-spec-btn{
  padding:4px 12px;border-radius:20px;border:1.5px solid var(--border2,#cbd5e1);
  background:transparent;font-size:11px;font-weight:700;cursor:pointer;
  color:var(--text2,#475569);transition:all .15s;font-family:inherit;
}
.rx-spec-btn.active{background:var(--neon,#0ea5e9);border-color:var(--neon,#0ea5e9);color:#fff;}
.rx-spec-btn:hover:not(.active){border-color:var(--neon,#0ea5e9);color:var(--neon,#0ea5e9);}
/* Mobile: 16 specialty buttons would wrap into a tall wall — make it a single
   horizontally-scrollable swipe row instead so it stays compact. */
@media(max-width:768px){
  .rx-specialty-bar{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
  .rx-specialty-bar .rx-spec-label{flex:0 0 auto;}
  .rx-spec-btn{flex:0 0 auto;white-space:nowrap;}
  /* Bigger tap targets on touch screens (≥38px tall) for the Rx chips/toggles */
  .rx-chip,.rx-spec-btn{min-height:38px;display:inline-flex;align-items:center;justify-content:center;}
}

/* ── SHARE BUTTON ── */
.td-btn.share{background:var(--accent-soft);color:var(--accent-strong);}
.td-btn.share:hover{background:var(--accent-soft);filter:brightness(.96);}

/* ── SHARE MODAL ── */
#shareModal .modal{max-width:420px;}
.share-header-block{text-align:center;padding:6px 0 16px;}
.share-patient-name{font-family:var(--font-display);font-size:18px;font-weight:800;color:var(--text);margin-bottom:4px;}
.share-record-type{font-family:var(--font-mono);font-size:11px;color:var(--text3);text-transform:uppercase;letter-spacing:1.5px;}
.share-contact-row{display:flex;align-items:center;gap:10px;background:var(--bg2);border:1px solid var(--border2);border-radius:10px;padding:10px 14px;margin-bottom:10px;}
.share-contact-icon{font-size:18px;flex-shrink:0;}
.share-contact-val{font-size:13px;font-weight:600;color:var(--text);flex:1;}
.share-contact-sub{font-size:10px;color:var(--text3);font-family:var(--font-mono);}
.share-email-input{flex:1;background:transparent;border:none;outline:none;font-size:13px;color:var(--text);font-family:var(--font-body);}
.share-email-input::placeholder{color:var(--text3);}
.share-divider{font-family:var(--font-mono);font-size:10px;color:var(--text3);text-align:center;text-transform:uppercase;letter-spacing:1.5px;margin:14px 0 12px;position:relative;}
.share-divider::before,.share-divider::after{content:'';position:absolute;top:50%;width:40%;height:1px;background:var(--border);}
.share-divider::before{left:0;} .share-divider::after{right:0;}
.share-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
.share-btn{display:flex;align-items:center;gap:10px;padding:13px 14px;border-radius:12px;border:1px solid var(--border2);background:var(--surface2);cursor:pointer;transition:all .2s cubic-bezier(.34,1.56,.64,1);text-decoration:none;color:var(--text);}
.share-btn:hover{transform:translateY(-2px);border-color:var(--border2);box-shadow:0 6px 20px rgba(0,0,0,.3);}
.share-btn-icon{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.share-btn-label{font-size:13px;font-weight:700;color:var(--text);}
.share-btn-sub{font-size:10px;color:var(--text3);margin-top:1px;}
.share-copy-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;border-radius:10px;border:1px dashed rgba(0,212,255,.3);background:rgba(0,212,255,.04);cursor:pointer;font-size:13px;font-weight:600;color:var(--neon);transition:all .2s;font-family:var(--font-body);}
.share-copy-btn:hover{background:rgba(0,212,255,.1);}


/* ── IPD Mobile Optimizations ── */
.ipd-dash-grid { grid-template-columns: 1fr 1fr; }
@media(max-width:600px){
  .ipd-dash-grid { grid-template-columns: 1fr !important; }
  .ipd-tab { font-size:12px !important; padding:7px 12px !important; }
  .ipd-ward-block { margin-bottom:14px; }
  #ipdPanel-admissions .table-wrap { overflow-x:auto; }
  #ipdPanel-bedgrid .ipd-bed-cell { min-width:70px; }
}
/* hide scrollbar on tab strip */
.ipd-tab-strip::-webkit-scrollbar { display:none; }

/* ── Bolder text across all modals & tables ── */
.form-input,.form-select,.form-textarea{font-weight:500 !important;color:var(--text) !important;}
.form-input::placeholder,.form-select::placeholder{font-weight:400 !important;color:var(--text2) !important;opacity:0.8;}
.form-label{font-weight:700 !important;color:var(--text2) !important;font-size:11px;letter-spacing:.8px;}
table td{font-size:13px;font-weight:500;color:var(--text);}
table th{font-size:11px;font-weight:700;color:var(--text2);}
.modal-title{font-weight:800 !important;font-size:17px !important;}
.stat-value,.stat-val{font-weight:800 !important;}
.page-title{font-weight:800 !important;}
[data-theme="light"] .form-input,[data-theme="light"] .form-select{color:#0f172a !important;font-weight:600 !important;}
[data-theme="light"] .form-input::placeholder{color:#64748b !important;font-weight:400 !important;}
[data-theme="light"] .form-label{color:#334155 !important;font-weight:700 !important;}
[data-theme="light"] table td{color:#0f172a !important;font-weight:500 !important;}
[data-theme="light"] table th{color:#334155 !important;font-weight:700 !important;}

/* ══════════════════════════════════════════════════
   COMPREHENSIVE MOBILE & RESPONSIVE OPTIMIZATIONS
   Covers: Dashboard, Patients, Queue, Appointments,
   Consultations, Prescriptions, Lab, Billing,
   IPD, Staff, Settings, Topbar, Tables, Page headers
══════════════════════════════════════════════════ */

/* ── Body & root layout ── */
html, body { overflow-x: hidden; }
body { min-height: 100vh; }

/* ── Topbar elements (base styles) ── */
.tb-search {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-pill); padding: 7px 14px;
  cursor: text; min-width: 160px; max-width: 260px; flex: 1;
  transition: var(--transition);
}
.tb-search:focus-within { border-color: rgba(0,212,255,.4); }
.tb-search-input {
  background: none; border: none; outline: none;
  font-size: 13px; color: var(--text); font-family: var(--font-body);
  width: 100%; min-width: 0;
}
.tb-search-input::placeholder { color: var(--text3); }
.tb-secured {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--font-mono); font-size: 10px; color: var(--acid);
  padding: 5px 12px; border-radius: var(--radius-pill);
  background: rgba(57,255,20,.05); border: 1px solid rgba(57,255,20,.15);
  white-space: nowrap;
}
.tb-secured-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--acid); box-shadow: 0 0 5px var(--acid);
  animation: glowP 2s infinite;
}
.tb-user-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--neon), #0066ff);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 13px; font-weight: 800;
  color: var(--bg); cursor: pointer; flex-shrink: 0;
  box-shadow: 0 0 10px var(--neon-glow);
}

/* ── Page header (title + button row) ── */
.page-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 18px; gap: 10px; flex-wrap: wrap;
}
@media(max-width:600px){
  .page-header { flex-direction: column; align-items: stretch; gap: 8px; }
  .page-header .search-bar { max-width: 100%; }
  .page-header .btn-add { width: 100%; justify-content: center; }
}

/* ── Stats grids (Dashboard, Lab, Queue) ── */
.stats-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 20px; }
@media(max-width:900px){ .stats-grid { grid-template-columns: repeat(2,1fr); gap: 12px; } }
@media(max-width:480px){ .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; } }

.stats-row { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-bottom: 20px; }
@media(max-width:900px){ .stats-row { grid-template-columns: repeat(2,1fr); gap: 12px; } }
@media(max-width:480px){ .stats-row { grid-template-columns: 1fr 1fr; gap: 10px; } }

.stat-card-el { padding: 16px; }
@media(max-width:480px){
  .stat-card-el { padding: 12px; }
  .stat-num-el, .stat-value { font-size: 22px !important; }
  .stat-label-el { font-size: 11px; }
}

/* ── Dash grid (2-col → 1-col) ── */
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media(max-width:900px){ .dash-grid { grid-template-columns: 1fr; } }

/* ── Tables: horizontal scroll on mobile ── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; width: 100%; }
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media(max-width:768px){
  table { min-width: 500px; }
  th, td { padding: 10px 12px; font-size: 12px; white-space: nowrap; }
  /* Allow wrapping on key name columns */
  td.td-name { white-space: normal; min-width: 100px; }
}
@media(max-width:480px){
  th, td { padding: 8px 10px; font-size: 11px; }
}

/* ── Queue board (3-col → 1-col) ── */
.queue-board { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; margin-bottom: 18px; }
@media(max-width:900px){ .queue-board { grid-template-columns: 1fr 1fr; } }
@media(max-width:600px){ .queue-board { grid-template-columns: 1fr; gap: 10px; } }

/* ── Topbar responsiveness ── */
.topbar-right { display: flex; align-items: center; gap: 8px; }
@media(max-width:640px){
  .tb-search { display: none; }
  .tb-secured { display: none; }
  .theme-switcher#appThemeSwitcher { display: none; }
}
@media(max-width:400px){
  .topbar-btn { width: 30px; height: 30px; font-size: 14px; }
  .tb-user-avatar { width: 28px; height: 28px; font-size: 11px; }
}
.tb-page-info { display: flex; flex-direction: column; justify-content: center; }
.tb-page-sub { font-size: 12px; color: var(--text3); font-family: var(--font-mono); margin-top: 2px; }
@media(max-width:480px){
  .page-title-el { font-size: 15px !important; }
  .tb-page-sub { display: none; }
}

/* ── Search bar ── */
.search-bar { flex: 1; max-width: 320px; min-width: 0; }
@media(max-width:600px){ .search-bar { max-width: 100%; } }

/* ── Cards ── */
.card-header { flex-wrap: wrap; gap: 8px; }
@media(max-width:480px){
  .card-body { padding: 14px; }
  .card-header { padding: 12px 14px; }
}

/* ── Appointments module ── */
@media(max-width:768px){
  /* Appointment calendar / list views */
  [id*="appt"] .form-row,
  [id*="appointment"] .form-row { flex-direction: column; }
}

/* ── Lab module ── */
@media(max-width:768px){
  /* Lab catalogue 2-col → 1-col inside modal */
  #newLabModal .modal-body [style*="grid-template-columns:1fr 1fr"],
  #newLabModal .modal-body [style*="grid-template-columns: 1fr 1fr"] {
    display: flex !important; flex-direction: column !important; gap: 14px !important;
  }
  #labCatalogueList { max-height: 180px !important; }
  #selectedTestsList { max-height: 150px !important; }
}

/* ── Billing: invoice line-item grid ── */
@media(max-width:600px){
  #invItemRows [style*="grid-template-columns"] {
    grid-template-columns: 2fr 1fr auto !important;
  }
}

/* ── IPD module ── */
.ipd-dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media(max-width:900px){ .ipd-dash-grid { grid-template-columns: 1fr 1fr; gap: 10px; } }
@media(max-width:600px){ .ipd-dash-grid { grid-template-columns: 1fr !important; gap: 10px; } }

.ipd-tab-strip { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ipd-tab-strip::-webkit-scrollbar { display: none; }
@media(max-width:600px){
  .ipd-tab { font-size: 11px !important; padding: 6px 10px !important; white-space: nowrap; }
  .ipd-ward-block { padding: 14px; }
  .ipd-beds-grid { grid-template-columns: repeat(auto-fill,minmax(72px,1fr)) !important; gap: 6px; }
  .ipd-adm-tabs { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .ipd-adm-tab { white-space: nowrap; }
}

/* ── Staff module ── */
@media(max-width:600px){
  #doctorFields .form-row { flex-direction: column; }
}

/* ── Settings module ── */
@media(max-width:600px){
  /* Settings sections stack */
  [id*="settings"] .form-row { flex-direction: column; }
}

/* ── Prescriptions / Consultations ── */
@media(max-width:768px){
  /* Medicine row grid inside Rx modal */
  #medRows > div {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }
  #medRows > div > .ac-wrap { grid-column: 1 / -1 !important; }
}

/* ── Button groups: stack on very small screens ── */
@media(max-width:400px){
  .btn-add { font-size: 12px; padding: 9px 14px; }
  .btn-save, .btn-secondary { font-size: 13px; padding: 8px 14px; }
  .td-btn { font-size: 10px; padding: 4px 9px; }
}

/* ── Patient rows ── */
@media(max-width:480px){
  .patient-row { padding: 10px 0; gap: 10px; }
  .pat-name { font-size: 13px; }
  .pat-meta { font-size: 10px; }
}

/* ── Queue items ── */
@media(max-width:480px){
  .qb-card { padding: 9px 10px; }
  .qb-card-token { font-size: 12px; }
  .qb-card-name { font-size: 11px; }
  .btn-call-next { font-size: 12px; padding: 9px; }
}

/* ── Share modal grid ── */
@media(max-width:400px){
  .share-grid { grid-template-columns: 1fr !important; }
}

/* ── Sidebar: collapse toggle on desktop ── */
@media(min-width:901px){
  .sidebar { transition: width .25s cubic-bezier(.4,0,.2,1); overflow: hidden; }
}

/* ── Module container fills remaining space ── */
#moduleContainer { width: 100%; min-height: 0; }

/* ── Prevent content getting clipped under sticky topbar ── */
.page { padding-bottom: 24px; }
@media(max-width:480px){ .page { padding-bottom: 80px; } }

/* ── Scrollbar thin on webkit ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); }

/* ── Safe area insets for notch phones ── */
@supports (padding: max(0px)){
  .content-area { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .modal-footer { padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .sidebar-footer { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
}

/* ── NEW SIDEBAR CSS (Qwen redesign) ── */

/* ── BASE ── */
:root {
    --sb-bg: #ffffff;
    --sb-border: #f1f3f5;
    --sb-text: #1a1d29;
    --sb-text-muted: #8a8f9e;
    --sb-text-sub: #6b7280;
    --sb-active-bg: #f0f5ff;
    --sb-active-text: #3366ff;
    --sb-active-border: #3366ff;
    --sb-hover-bg: #f8f9fb;
    --sb-badge-bg: #3366ff;
    --sb-badge-text: #ffffff;
    --sb-accent: #3366ff;
}

[data-theme="dark"] {
    --sb-bg: #0a0e1a;
    --sb-border: rgba(255,255,255,0.07);
    --sb-text: #f0f4ff;
    --sb-text-muted: #8899bb;
    --sb-text-sub: #445577;
    --sb-active-bg: rgba(0,212,255,0.08);
    --sb-active-text: #00d4ff;
    --sb-active-border: rgba(0,212,255,0.15);
    --sb-hover-bg: rgba(255,255,255,0.04);
    --sb-badge-bg: #00d4ff;
    --sb-badge-text: #05070f;
    --sb-accent: #00d4ff;
}

[data-theme="pink"] {
    --sb-bg: #fff5fa;
    --sb-border: rgba(236,72,153,0.14);
    --sb-text: #3d0a26;
    --sb-text-muted: #a85585;
    --sb-text-sub: #b06a8e;
    --sb-active-bg: rgba(236,72,153,0.12);
    --sb-active-text: #db2777;
    --sb-active-border: rgba(236,72,153,0.25);
    --sb-hover-bg: rgba(236,72,153,0.08);
    --sb-badge-bg: #ec4899;
    --sb-badge-text: #ffffff;
    --sb-accent: #ec4899;
}

/* ── SIDEBAR ── */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 230px;
    background: var(--sb-bg);
    border-right: 1px solid var(--sb-border);
    z-index: 100;
    display: flex;
    flex-direction: column;
    transition: width 0.22s cubic-bezier(.4,0,.2,1), transform 0.25s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
    will-change: transform;
    animation: sbFadeIn 0.25s ease-out;
}

@keyframes sbFadeIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}

@media (max-width: 900px) {
    .sidebar { transform: translateX(-100%); box-shadow: 4px 0 30px rgba(0,0,0,.12); }
    .sidebar.open { transform: translateX(0); }
}

@media (min-width: 901px) {
    .sidebar { transform: translateX(0); }
}

/* Collapsed */
.sidebar.collapsed { width: 64px; }

/* ── HEADER ── */
.sidebar-header {
    padding: 16px 14px 14px;
    border-bottom: 1px solid var(--sb-border);
    position: relative;
    background: var(--sb-bg);
}

.sb-brand-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.sb-brand-icon {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: linear-gradient(135deg, #3366ff 0%, #5b8cf7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(51, 102, 255, 0.25);
}

.sb-brand-icon svg {
    width: 18px;
    height: 18px;
    color: #fff;
}

.sb-brand-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.sb-brand-name {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: var(--sb-text);
    letter-spacing: -0.3px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-brand-name span {
    color: var(--sb-accent);
}

.sb-brand-sub {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--sb-text-sub);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

/* Clinic Pill */
.sb-clinic-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    background: var(--sb-active-bg);
    border: 1px solid rgba(51, 102, 255, 0.08);
    border-radius: 7px;
}

.sb-clinic-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    flex-shrink: 0;
    animation: pulseDot 2s ease-in-out infinite;
}

@keyframes pulseDot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.sb-clinic-name {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--sb-text);
    letter-spacing: 0.2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Toggle */
.sb-toggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--sb-hover-bg);
    border: 1px solid var(--sb-border);
    color: var(--sb-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.sb-toggle:hover {
    background: var(--sb-active-bg);
    color: var(--sb-accent);
    border-color: rgba(51, 102, 255, 0.15);
}

.sb-toggle-icon {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    transition: transform 0.2s ease;
}

.sidebar.collapsed .sb-toggle-icon {
    transform: rotate(180deg);
}

/* ── NAV ── */
.sidebar-nav {
    flex: 1;
    padding: 6px 8px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.sidebar-nav::-webkit-scrollbar { display: none; }

/* Section Headers */
.nav-sec {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--sb-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    padding: 12px 10px 4px;
    white-space: nowrap;
}

/* Divider */
.nav-divider {
    height: 1px;
    background: var(--sb-border);
    margin: 6px 10px;
}

/* Nav Items */
.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: var(--sb-text-sub);
    cursor: pointer;
    transition: all 0.12s ease;
    position: relative;
    margin-bottom: 2px;
    white-space: nowrap;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    min-height: 36px;
}

/* Dark theme: module-name labels were too dim (--sb-text-sub #445577 on near-black bg).
   Brighten only the resting color; :hover and .active rules below still win on their states. */
[data-theme="dark"] .nav-item { color: #b4c0d8; }

.nav-item:hover {
    background: var(--sb-hover-bg);
    color: var(--sb-text);
}

.nav-item:active {
    background: var(--sb-active-bg);
}

.nav-item.active {
    background: var(--sb-active-bg);
    color: var(--sb-active-text);
    font-weight: 700;
}

.nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    border-radius: 0 3px 3px 0;
    background: var(--sb-active-border);
}

/* Icon Box */
.nav-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.12s ease;
}

.nav-icon-box svg {
    width: 17px;
    height: 17px;
    stroke-width: 2;
}

.nav-item .nav-icon-box svg {
    color: var(--sb-text-muted);
}

.nav-item:hover .nav-icon-box svg {
    color: var(--sb-text);
}

.nav-item.active .nav-icon-box svg {
    color: var(--sb-active-text);
}

/* Label */
.nav-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.nav-item.active .nav-label {
    font-weight: 700;
}

/* Badge */
.nav-badge {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 99px;
    background: var(--sb-badge-bg);
    color: var(--sb-badge-text);
    min-width: 18px;
    text-align: center;
    line-height: 1.3;
    flex-shrink: 0;
}

/* ── FOOTER ── */
.sidebar-footer {
    padding: 10px 8px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    border-top: 1px solid var(--sb-border);
    background: var(--sb-bg);
}

.sb-theme-row {
    padding: 4px 8px 6px;
}

.sb-user {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: 8px;
    transition: background 0.12s ease;
}

.sb-user:hover {
    background: var(--sb-hover-bg);
}

.sb-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 7px;
    background: linear-gradient(135deg, #3366ff 0%, #5b8cf7 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    flex-shrink: 0;
}

.sb-user-info {
    flex: 1;
    min-width: 0;
}

.sb-user-name {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--sb-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.sb-user-role {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--sb-text-sub);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 1px;
}

.sb-logout-btn {
    width: 30px;
    height: 30px;
    border-radius: 7px;
    background: transparent;
    border: 1px solid var(--sb-border);
    color: var(--sb-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all 0.12s ease;
    flex-shrink: 0;
}

.sb-logout-btn:hover {
    background: rgba(239, 68, 68, 0.06);
    border-color: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

/* ── COLLAPSED ── */
.sidebar.collapsed .sb-collapsible { display: none !important; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 8px; margin-bottom: 3px; }
.sidebar.collapsed .nav-icon-box { width: 36px; height: 36px; }
.sidebar.collapsed .nav-icon-box svg { width: 19px; height: 19px; }

.sidebar.collapsed .sidebar-header {
    padding: 14px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.sidebar.collapsed .sb-brand-row { justify-content: center; margin-bottom: 0; }
.sidebar.collapsed .sb-toggle { position: static; transform: none; margin-top: 6px; }
.sidebar.collapsed .sidebar-footer { padding: 8px; }
.sidebar.collapsed .sb-user { justify-content: center; padding: 8px; }
.sidebar.collapsed .nav-divider { display: block; height: 1px; background: var(--sb-border); margin: 4px 12px; }

/* Collapsed Tooltips */
.sidebar.collapsed .nav-item { position: relative; }
.sidebar.collapsed .nav-item:hover::after {
    content: attr(title);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: #1a1d29;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 6px;
    white-space: nowrap;
    z-index: 300;
    box-shadow: 0 4px 16px rgba(0,0,0,.2);
    pointer-events: none;
}

/* ── OVERLAY ── */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.4);
    z-index: 99;
}

@media (max-width: 900px) {
    .sidebar-overlay.show,
    .sidebar-overlay.open { display: block; }
}

/* ── RBAC ── */
.rbac-not-receptionist.hidden { display: none !important; }

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
    .sidebar, .nav-item, .sb-toggle, .sb-logout-btn { transition: none !important; }
    .sb-clinic-dot { animation: none !important; }
}

/* ── TOUCH ─ */
@media (hover: none) {
    .nav-item:active { background: var(--sb-active-bg) !important; }
}


/* ── MOBILE SIDEBAR FIX: ignore collapsed state, always full-width ── */
@media(max-width:900px){
  .sidebar.collapsed{ width:280px !important; }
  .sidebar{ width:280px !important; }
  .sidebar.open{
    width:280px !important;
    transform:translateX(0) !important;
  }
  /* Force-show all collapsible content on mobile when sidebar is open */
  .sidebar.collapsed .sb-collapsible,
  .sidebar.collapsed .sb-expanded-hide,
  .sidebar .sb-collapsible,
  .sidebar .sb-expanded-hide{
    display:block !important;
  }
  .sidebar.collapsed .nav-item,
  .sidebar .nav-item{
    justify-content:flex-start !important;
    padding:10px 14px !important;
  }
  .sidebar.collapsed .sidebar-header,
  .sidebar .sidebar-header{
    padding:20px 16px 18px !important;
  }
  .sidebar.collapsed .sb-brand-row,
  .sidebar .sb-brand-row{
    justify-content:flex-start !important;
  }
  .sidebar.collapsed .sb-toggle,
  .sidebar .sb-toggle{
    display:none !important;
  }
  .sidebar.collapsed .nav-label,
  .sidebar .nav-label{
    display:inline-block !important;
  }
  .sidebar.collapsed .sb-user,
  .sidebar .sb-user{
    justify-content:flex-start !important;
    padding:10px 14px !important;
  }
}


/* ── PROFESSIONAL POLISH v2 (match HMS reference design) ── */
/* Content area: light blue-grey background like reference */
[data-theme="light"] body,
[data-theme="light"] #mainApp{
  background: #f8fafc !important;
}
[data-theme="light"] .main-content,
[data-theme="light"] .content-area{
  background: #f8fafc !important;
}

/* Sidebar: clean white on light theme (matches reference) */
[data-theme="light"] .sidebar{
  background: #ffffff !important;
  border-right: 1px solid #e5e7eb !important;
  box-shadow: none !important;
}
[data-theme="light"] .sidebar-header{
  border-bottom: 1px solid #f1f5f9 !important;
}
[data-theme="light"] .sidebar-footer{
  border-top: 1px solid #f1f5f9 !important;
}

/* Brand text colors — match reference */
[data-theme="light"] .sb-brand-name{
  color: #0f172a !important;
  font-size: 16px !important;
}
[data-theme="light"] .sb-brand-name span{
  color: #0f172a !important;
}
[data-theme="light"] .sb-brand-sub{
  font-size: 11px !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px;
  margin-top: 2px;
}

/* Top bar: clean white with subtle border */
[data-theme="light"] .top-bar{
  background: #ffffff !important;
  border-bottom: 1px solid #e5e7eb !important;
  box-shadow: none !important;
  padding: 0 24px !important;
}

/* Page header: tight spacing — reduce gap to content */
[data-theme="light"] .page-header,
.page-header{
  margin-top: 0 !important;
  margin-bottom: 12px !important;
  padding-top: 0 !important;
}
[data-theme="light"] .page-title,
[data-theme="light"] .page-title-el{
  margin-bottom: 4px !important;
}
[data-theme="light"] .content-area{
  padding-top: 16px !important;
}

/* Cards: white with subtle border (NOT shadow-heavy like before) */
[data-theme="light"] .card,
[data-theme="light"] .ds,
[data-theme="light"] .dc,
[data-theme="light"] .stat-card,
[data-theme="light"] .table-wrap{
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: none !important;
  border-radius: 12px !important;
}
[data-theme="light"] .card:hover,
[data-theme="light"] .ds:hover,
[data-theme="light"] .dc:hover{
  border-color: #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(15,23,42,0.04) !important;
}

/* Sidebar nav items: matching reference */
[data-theme="light"] .sidebar .nav-item{
  color: #475569 !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  margin: 2px 8px !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}
[data-theme="light"] .sidebar .nav-item:hover{
  background: #f8fafc !important;
  color: #0f172a !important;
}
[data-theme="light"] .sidebar .nav-item.active{
  background: #eff6ff !important;
  color: #2563eb !important;
  font-weight: 600 !important;
}
[data-theme="light"] .sidebar .nav-item.active .nav-icon-box,
[data-theme="light"] .sidebar .nav-item.active svg{
  color: #2563eb !important;
}

/* Section labels in sidebar */
[data-theme="light"] .nav-section-label,
[data-theme="light"] .nav-sec{
  color: #94a3b8 !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  padding: 12px 16px 6px !important;
}


/* ── PRO TOKENS v1 (jul02) — semantic accents for modernized modules ──
   Convention: modernized module CSS references ONLY shell tokens
   (--surface*, --border*, --text*, fonts, radii) + these. No new hardcoded
   hexes, no --neon. Theme-aware here so every module re-themes for free. */
:root{
  --accent:#3b82f6; --accent-strong:#2563eb; --accent-soft:rgba(59,130,246,0.12);
  --ok:#10b981;  --ok-soft:rgba(16,185,129,0.12);
  --warn:#f59e0b; --warn-strong:#d97706; --warn-soft:rgba(245,158,11,0.14);
  --danger:#ef4444; --danger-soft:rgba(239,68,68,0.12);
  --shadow-pro:0 1px 3px rgba(15,23,42,0.08);
}
[data-theme="light"]{ --accent-strong:#1d4ed8; --ok:#059669; --warn-strong:#b45309; --danger:#dc2626; }


/* ───────────────────────── next block ───────────────────────── */


/* ═══════ HERO VISUAL SLIDER ═══════ */
@keyframes hvsBlobPulse{0%,100%{opacity:0.7;transform:translate(-50%,-50%) scale(1)}50%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}}
@keyframes hvsCardIn{from{opacity:0;transform:translateY(18px) scale(0.96) rotateX(6deg)}to{opacity:1;transform:translateY(0) scale(1) rotateX(0deg)}}
@keyframes hvsLivePulse{0%,100%{opacity:1;}50%{opacity:0.6;}}
@keyframes hvsWaLive{0%,100%{opacity:1;}50%{opacity:0.6;}}

.hvs-card{
  position:absolute;inset:0;
  background:var(--surface);
  border:1px solid var(--border2);
  border-radius:22px;
  padding:20px;
  display:flex;flex-direction:column;gap:12px;
  opacity:0;pointer-events:none;
  transform:translateY(24px) scale(0.95) rotateX(8deg);
  transition:opacity 0.5s cubic-bezier(0.4,0,0.2,1),transform 0.55s cubic-bezier(0.34,1.2,0.64,1);
  box-shadow:0 24px 64px rgba(0,0,0,0.5),0 0 0 1px rgba(255,255,255,0.04) inset;
  transform-style:preserve-3d;
  overflow:hidden;
}
.hvs-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--hc,#00d4ff),transparent);
}
.hvs-card-active{
  opacity:1;pointer-events:all;
  transform:translateY(0) scale(1) rotateX(0deg);
  animation:hvsCardIn 0.55s cubic-bezier(0.34,1.2,0.64,1);
}
.hvs-card-glow{
  position:absolute;top:-40px;right:-40px;
  width:200px;height:200px;border-radius:50%;
  filter:blur(50px);opacity:0.6;pointer-events:none;
}
.hvs-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 12px;border-radius:100px;border:1px solid;
  font-family:var(--font-mono);font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:1.5px;
  width:fit-content;
}
.hvs-card-title{
  font-family:var(--font-display);font-size:26px;font-weight:800;
  line-height:1.15;letter-spacing:-1px;color:var(--text);
}
.hvs-card-body{flex:1;display:flex;flex-direction:column;gap:8px;}
.hvs-card-footer{display:flex;gap:6px;flex-wrap:wrap;}
.hvs-tag{
  padding:3px 10px;border-radius:100px;border:1px solid;
  font-family:var(--font-mono);font-size:9px;font-weight:700;
  background:rgba(255,255,255,0.02);letter-spacing:0.5px;
}

/* Message rows (slide 0) */
.hvs-msg-row{
  display:flex;align-items:flex-start;gap:9px;
  background:var(--bg2);border:1px solid var(--border);
  border-left:2.5px solid var(--mc,var(--neon));
  border-radius:8px;padding:9px 10px;
}
.hvs-msg-live{animation:hvsLivePulse 1.8s ease-in-out infinite;}
.hvs-msg-icon{
  width:26px;height:26px;border-radius:7px;
  background:rgba(0,212,255,0.12);color:var(--neon);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;flex-shrink:0;
}
.hvs-msg-lbl{font-family:var(--font-mono);font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:1px;margin-bottom:3px;}
.hvs-msg-text{font-size:10px;color:var(--text2);line-height:1.5;}

/* AI rows (slide 2) */
.hvs-ai-row{
  border:1px solid;border-radius:8px;padding:9px 10px;
}

/* WA items (slide 3) */
.hvs-wa-item{
  display:flex;align-items:center;gap:9px;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:8px;padding:8px 10px;
}
.hvs-wa-live{animation:hvsWaLive 2s ease-in-out infinite;}
.hvs-wa-ico{
  width:28px;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;
}
.hvs-wa-badge{
  margin-left:auto;font-family:var(--font-mono);
  font-size:9px;font-weight:800;letter-spacing:1px;
}

/* Dots */
.hvs-dot{
  width:7px;height:7px;border-radius:50%;
  background:rgba(255,255,255,0.15);cursor:pointer;
  transition:all 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.hvs-dot-on{
  width:26px;border-radius:4px;
  background:var(--neon);box-shadow:0 0 10px var(--neon-glow);
}


/* ───────────────────────── next block ───────────────────────── */


/* Slider scan animation */
@keyframes sliderScan{0%{background-position:0% 0%}50%{background-position:100% 0%}100%{background-position:0% 0%}}
@keyframes fsPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.75;transform:scale(0.99)}}

/* Slide base */
.fs-slide{
  min-width:100%;
  max-width:100vw;
  width:100vw;
  padding:60px 5%;
  flex-shrink:0;
  position:relative;
  box-sizing:border-box;
  overflow:hidden;
}
.fs-inner{
  display:flex;
  align-items:center;
  gap:60px;
  max-width:1200px;
  margin:0 auto;
}
@media(max-width:960px){
  .fs-inner{flex-direction:column;gap:24px;}
  .fs-right{width:100%;max-width:100%;}
  .fs-slide{padding:40px 5%;}
}

/* Left content */
.fs-left{flex:1;max-width:520px;}
.fs-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  color:var(--text3);text-transform:uppercase;letter-spacing:2px;
  margin-bottom:18px;
}
.fs-eyebrow-dot{width:7px;height:7px;border-radius:50%;animation:glowP 2s infinite;}
.fs-title{
  font-family:var(--font-display);
  font-size:48px;font-weight:800;
  line-height:1.1;letter-spacing:-2px;
  color:var(--text);margin-bottom:18px;
}
.fs-title-accent{display:block;}
@media(max-width:768px){.fs-title{font-size:32px;letter-spacing:-1px;}}
.fs-desc{
  font-size:15px;color:var(--text2);
  line-height:1.75;margin-bottom:24px;
}
.fs-tags{display:flex;flex-wrap:wrap;gap:8px;}
.fs-tag{
  padding:5px 12px;border-radius:var(--radius-pill);
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  border:1px solid;background:rgba(255,255,255,0.03);
  white-space:nowrap;
}

/* Right mockup */
.fs-right{flex:1;display:flex;align-items:center;justify-content:flex-end;min-width:0;overflow:hidden;}
@media(max-width:960px){.fs-right{justify-content:center;width:100%;}}
.fs-mockup{
  width:100%;max-width:380px;
  background:var(--surface);
  border:1px solid;
  border-radius:20px;
  overflow:hidden;
  box-sizing:border-box;
  box-shadow:0 20px 60px rgba(0,0,0,0.4),0 0 0 1px rgba(255,255,255,0.04) inset;
}
@media(max-width:480px){
  .fs-mockup{max-width:100%;border-radius:14px;}
  .fs-left{width:100%;}
  .fs-desc{font-size:13px;}
}
.fs-mock-header{
  padding:14px 16px;
  border-bottom:1px solid var(--border);
}
/* Notification cards */
.fs-notif{
  background:var(--bg2);border:1px solid var(--border);
  border-left:3px solid;border-radius:8px;
  padding:10px 12px;
}
/* WhatsApp notifications */
.fs-wa-notif{
  display:flex;align-items:center;gap:10px;
  background:var(--bg2);border:1px solid var(--border);
  border-radius:8px;padding:9px 11px;
}
.fs-wa-icon{
  width:30px;height:30px;border-radius:8px;
  background:rgba(37,211,102,0.15);color:#25D366;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;
}
.fs-wa-time{
  margin-left:auto;font-family:var(--font-mono);
  font-size:9px;color:var(--text3);white-space:nowrap;
}

/* Slider dots */
.fs-dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,0.15);cursor:pointer;
  transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
.fs-dot-active{
  width:28px;border-radius:4px;
  background:var(--neon);
  box-shadow:0 0 12px var(--neon-glow);
}
.fs-nav-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--border2);background:rgba(255,255,255,0.04);color:var(--text2);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all 0.2s;}
.fs-nav-btn:hover{border-color:var(--neon);color:var(--neon);}


/* ───────────────────────── next block ───────────────────────── */


      .bill-toggle{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--border);background:var(--bg2);border-radius:999px;}
      .bill-opt{display:inline-flex;align-items:center;gap:8px;padding:9px 20px;border:none;background:transparent;color:var(--text2);font-family:var(--font-body);font-size:13px;font-weight:700;border-radius:999px;cursor:pointer;transition:background .2s,color .2s;}
      .bill-opt.active{background:var(--neon);color:var(--bg);box-shadow:0 0 18px var(--neon-glow);}
      .bill-save{font-size:10px;font-weight:800;padding:2px 7px;border-radius:999px;background:rgba(16,185,129,.15);color:#10b981;letter-spacing:.3px;}
      .bill-opt.active .bill-save{background:rgba(255,255,255,.22);color:#fff;}
    

/* ───────────────────────── next block ───────────────────────── */

@keyframes spin{to{transform:rotate(360deg)}}

/* ───────────────────────── next block ───────────────────────── */


/* ── IPD Tabs ── */
.ipd-tab{padding:8px 18px;border:1px solid var(--border2);border-radius:var(--radius-pill);background:transparent;color:var(--text2);font-size:13px;font-weight:600;cursor:pointer;font-family:var(--font-body);transition:var(--transition);}
.ipd-tab:hover{background:var(--surface2);color:var(--text);}
.ipd-tab.active{background:var(--violet);border-color:var(--violet);color:#fff;box-shadow:0 0 16px var(--violet-glow);}
.ipd-tab-panel{display:none;}
.ipd-tab-panel.active{display:block;}

/* ── Bed Grid ── */
.ipd-ward-block{background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius);padding:18px;margin-bottom:16px;}
.ipd-ward-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:8px;}
.ipd-ward-name{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--text);}
.ipd-ward-meta{display:flex;gap:8px;flex-wrap:wrap;}
.ipd-ward-stat{padding:3px 10px;border-radius:var(--radius-pill);font-size:11px;font-weight:700;font-family:var(--font-mono);}
.ipd-beds-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:8px;}
.ipd-bed-card{border-radius:10px;padding:10px 8px;text-align:center;cursor:pointer;border:1.5px solid transparent;transition:var(--transition);position:relative;}
.ipd-bed-card:hover{transform:translateY(-2px);box-shadow:var(--shadow2);}
.ipd-bed-available{background:rgba(16,185,129,0.1);border-color:rgba(16,185,129,0.25);}
.ipd-bed-occupied{background:rgba(244,63,94,0.1);border-color:rgba(244,63,94,0.3);cursor:pointer;}
.ipd-bed-reserved{background:rgba(245,158,11,0.1);border-color:rgba(245,158,11,0.3);}
.ipd-bed-maintenance{background:rgba(68,85,119,0.2);border-color:rgba(68,85,119,0.3);cursor:default;}
.ipd-bed-num{font-family:var(--font-mono);font-size:12px;font-weight:800;margin-bottom:3px;}
.ipd-bed-patient{font-size:9px;color:var(--text2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px;margin:0 auto;}
.ipd-bed-status-dot{width:7px;height:7px;border-radius:50%;margin:4px auto 0;}

/* ── Admission detail panel ── */
.ipd-adm-tabs{display:flex;gap:4px;border-bottom:1px solid var(--border);margin-bottom:16px;flex-wrap:wrap;}
.ipd-adm-tab{padding:7px 14px;font-size:12px;font-weight:600;color:var(--text2);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;font-family:var(--font-body);background:none;border-top:none;border-left:none;border-right:none;transition:var(--transition);}
.ipd-adm-tab.active{color:var(--accent-strong);border-bottom-color:var(--accent);}
.ipd-adm-panel{display:none;}
.ipd-adm-panel.active{display:block;}

/* ── Vitals badge ── */
.vitals-flagged{background:rgba(244,63,94,0.12);border:1px solid rgba(244,63,94,0.3);border-radius:8px;padding:6px 10px;font-size:11px;color:var(--rose);font-weight:700;}


/* ───────────────────────── next block ───────────────────────── */


/* ═══ NEW APPOINTMENT MODAL ═══ */
#newApptModal .modal-overlay {
  background: rgba(0,20,40,0.6) !important;
  backdrop-filter: blur(8px) !important;
}

/* Force dark text on white cards */
#newApptModal label,
#newApptModal div[style*="background:#fff"],
#newApptModal div[style*="font-weight:700"],
#newApptModal div[style*="font-weight:800"] {
  color: #0f172a !important;
}
#newApptModal select,
#newApptModal input,
#newApptModal textarea {
  color: #0f172a !important;
  background: #fff !important;
  border-color: #d1d5db !important;
}
#newApptModal select:focus,
#newApptModal input:focus,
#newApptModal textarea:focus {
  border-color: #00d4ff !important;
  box-shadow: 0 0 0 3px rgba(0,212,255,0.15) !important;
}
#newApptModal select option {
  color: #0f172a !important;
  background: #fff !important;
}
#newApptModal div[style*="font-size:10px"][style*="color:#64748b"] {
  color: #374151 !important;
}
#newApptModal div[style*="font-size:12px"][style*="color:#64748b"] {
  color: #1f2937 !important;
}
#newApptModal div[style*="font-size:11px"][style*="color:#94a3b8"] {
  color: #6b7280 !important;
}

/* Mobile: stack grids vertically */
@media (max-width: 700px) {
  #newApptModal [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  #newApptModal .modal {
    max-width: 100vw !important;
    /* Was a rigid height:100vh — on iOS Safari 100vh is the toolbar-HIDDEN height,
       so the modal ran taller than the visible screen and its footer (Save) was
       cut off. Use the same auto-height + overlay-scroll pattern as every other
       modal so the sticky footer stays reachable. */
    max-height: none !important;
    height: auto !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  
  /* Header compact */
  #newApptModal .modal > div:first-child {
    padding: 14px 16px !important;
  }
  #newApptModal .modal > div:first-child div[style*="font-size:22px"] {
    font-size: 18px !important;
  }
  #newApptModal .modal > div:first-child div[style*="width:48px"] {
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
  }
  
  /* Body compact */
  #newApptModal .modal > div:nth-child(2) {
    padding: 12px 14px !important;
  }
  
  /* Cards compact */
  #newApptModal .modal > div:nth-child(2) > div {
    padding: 12px 14px !important;
    margin-bottom: 10px !important;
  }
  
  /* Footer always visible at bottom */
  #newApptModal .modal > div:last-child {
    padding: 10px 14px !important;
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
  }
  #newApptModal .modal > div:last-child button {
    padding: 12px 16px !important;
    font-size: 13px !important;
    flex: 1 !important;
  }
  
  /* Inputs compact */
  #newApptModal select,
  #newApptModal input,
  #newApptModal textarea {
    padding: 10px 12px !important;
    font-size: 13px !important;
  }
}

/* ═══ SPECIALTY TEMPLATE STYLES (GPU-optimized) ═══ */
:root {
  --sec-blue: #3b82f6; --sec-blue-bg: rgba(59,130,246,0.06); --sec-blue-border: rgba(59,130,246,0.2);
  --sec-purple: #8b5cf6; --sec-purple-bg: rgba(139,92,246,0.06); --sec-purple-border: rgba(139,92,246,0.2);
  --sec-green: #10b981; --sec-green-bg: rgba(16,185,129,0.06); --sec-green-border: rgba(16,185,129,0.2);
  --sec-amber: #f59e0b; --sec-amber-bg: rgba(245,158,11,0.06); --sec-amber-border: rgba(245,158,11,0.2);
  --sec-pink: #ec4899; --sec-pink-bg: rgba(236,72,153,0.06); --sec-pink-border: rgba(236,72,153,0.2);
  --sec-cyan: #06b6d4; --sec-cyan-bg: rgba(6,182,212,0.06); --sec-cyan-border: rgba(6,182,212,0.2);
  --sec-violet: #a855f7; --sec-violet-bg: rgba(168,85,247,0.06); --sec-violet-border: rgba(168,85,247,0.2);
  --sec-red: #ef4444; --sec-red-bg: rgba(239,68,68,0.06); --sec-red-border: rgba(239,68,68,0.2);
  --sec-emerald: #22c55e; --sec-emerald-bg: rgba(34,197,94,0.06); --sec-emerald-border: rgba(34,197,94,0.2);
  --sec-orange: #f97316; --sec-orange-bg: rgba(249,115,22,0.06); --sec-orange-border: rgba(249,115,22,0.2);
}

.rx-tpl-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
  padding-bottom: 16px; border-bottom: 2px solid var(--border);
}
.rx-tpl-icon {
  width: 44px; height: 44px; border-radius: 14px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; box-shadow: 0 4px 12px rgba(59,130,246,0.3);
}
.rx-tpl-title {
  font-size: 18px; font-weight: 900; color: var(--text); letter-spacing: -0.5px;
}
.rx-tpl-sub {
  font-size: 12px; color: var(--text3); margin-top: 2px;
}

.rx-section {
  margin-bottom: 16px; background: var(--sec-bg); border: 1px solid var(--sec-border);
  border-radius: 16px; padding: 16px; contain: layout style;
}
.rx-section-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 12px;
}
.rx-section-icon {
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--sec-accent); display: flex; align-items: center;
  justify-content: center; font-size: 13px; color: #fff;
}
.rx-section-title {
  font-size: 12px; font-weight: 900; color: var(--sec-accent);
  text-transform: uppercase; letter-spacing: 0.8px;
}
.rx-section-line {
  flex: 1; height: 1px; background: var(--sec-border); margin-left: 8px;
}
.rx-section-count {
  font-size: 10px; font-weight: 600; color: var(--text3);
  background: var(--surface); padding: 2px 8px; border-radius: 99px;
}

.rx-fields {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px;
}
.rx-field { margin-bottom: 0; }
.rx-label {
  display: block; font-size: 11px; font-weight: 800; color: var(--text2);
  margin-bottom: 5px; letter-spacing: 0.3px;
}
.rx-input {
  font-size: 13px; font-weight: 600; padding: 9px 12px; border-radius: 10px;
  border: 1.5px solid var(--border); background: var(--surface);
  transition: border-color 0.15s; width: 100%; box-sizing: border-box;
  font-family: inherit; color: var(--text);
}
.rx-input:focus {
  border-color: var(--sec-accent); outline: none;
  box-shadow: 0 0 0 3px var(--sec-bg);
}
.rx-select { cursor: pointer; -webkit-appearance: none; }
.rx-textarea { resize: vertical; min-height: 60px; }

@media (max-width: 640px) {
  .rx-fields { grid-template-columns: 1fr !important; }
  .rx-section { padding: 12px !important; }
}


/* ───────────────────────── next block ───────────────────────── */


/* Sidebar collapse — desktop only */
.sidebar-header { position: relative; }

/* Toggle button — inside header, desktop only */
.sb-toggle {
  position: absolute; top: 50%; right: 10px;
  transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 7px;
  background: rgba(0,212,255,.1); border: 1px solid rgba(0,212,255,.28);
  color: var(--neon); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; line-height: 1;
  transition: background .15s, box-shadow .15s;
  box-shadow: 0 0 8px rgba(0,212,255,.12);
}
.sb-toggle:hover { background: var(--neon); color: var(--bg); box-shadow: 0 0 14px rgba(0,212,255,.4); }
@media(max-width:900px) { .sb-toggle { display: none !important; } }
.sb-toggle-icon { display: inline-block; line-height: 1; }

/* Desktop collapsed state */
@media(min-width:901px) {
  .sidebar { transition: width .22s cubic-bezier(.4,0,.2,1), transform .25s cubic-bezier(.4,0,.2,1) !important; overflow: hidden; will-change:transform; }
  .sidebar.collapsed { width: 64px; }
  .sidebar.collapsed .sb-collapsible { display: none !important; }
  .sidebar.collapsed .nav-item { justify-content: center; padding: 10px; }
  .sidebar.collapsed .nav-icon-box { font-size: 18px; }
  .sidebar.collapsed .sidebar-header { padding: 14px 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
  .sidebar.collapsed .sb-brand-row { justify-content: center; }
  .sidebar.collapsed .sidebar-footer { padding: 10px 8px; }
  .sidebar.collapsed .sb-user { justify-content: center; padding: 8px; }
  .sidebar.collapsed .sb-user-info { display: none; }
  .sidebar.collapsed .sb-logout-btn { margin-left: 0; }
  .nav-divider { display: none; }
  .sidebar.collapsed .nav-divider { display: block; height: 1px; background: var(--border); margin: 4px 10px; }
  .sb-expanded-hide { display: none; }
  .sidebar.collapsed .sb-expanded-hide { display: block; }
  .sidebar.collapsed .nav-item { position: relative; }
  .sidebar.collapsed .nav-item:hover::after {
    content: attr(title); position: absolute; left: 70px; top: 50%; transform: translateY(-50%);
    background: var(--surface2); border: 1px solid var(--border2); color: var(--text);
    font-size: 12px; font-weight: 600; padding: 5px 12px; border-radius: 8px;
    white-space: nowrap; z-index: 300; box-shadow: 0 4px 16px rgba(0,0,0,.35); pointer-events: none;
  }
  .sidebar.collapsed ~ .top-bar { margin-left: 64px !important; }
  .sidebar.collapsed ~ .content-area { margin-left: 64px !important; }
}

/* Mobile: fix top-bar/content-area margin, bigger tap targets */
@media(max-width:900px) {
  .top-bar { margin-left: 0 !important; width: 100% !important; box-sizing: border-box; }
  .content-area { margin-left: 0 !important; width: 100% !important; box-sizing: border-box; }
  .menu-btn {
    width: 44px !important; height: 44px !important; min-width: 44px !important;
    font-size: 22px !important; border-radius: 10px;
    color: var(--text) !important; display: flex !important;
    align-items: center; justify-content: center;
    background: rgba(255,255,255,.06); border: 1px solid var(--border); flex-shrink: 0;
  }
  .menu-btn:active { background: rgba(0,212,255,.15) !important; border-color: rgba(0,212,255,.35) !important; }
  .nav-item { touch-action: manipulation; -webkit-tap-highlight-color: transparent; min-height: 44px; padding: 10px 14px; }
  .nav-item:active { background: rgba(0,212,255,.12) !important; }
  .sb-logout-btn { min-width: 44px !important; min-height: 44px !important; display: flex; align-items: center; justify-content: center; }
}
@media(max-width:400px) {
  .menu-btn { width: 40px !important; height: 40px !important; font-size: 20px !important; }
  .top-bar { padding: 0 8px !important; }
}

/* ── MOBILE SCROLL PRIORITY OVERRIDE ── */
@media(max-width:900px){
  html,body{overflow-y:auto !important;height:auto !important;}
  body.app-mode{overflow-y:auto !important;}
  #mainApp{
    overflow:visible !important;
    height:auto !important;
    min-height:100vh !important;
  }
  .main-content{
    overflow:visible !important;
    height:auto !important;
    min-height:100vh !important;
    display:block !important;
  }
  .content-area{
    overflow:visible !important;
    height:auto !important;
    margin-left:0 !important;
    padding-bottom:120px !important;
  }
  .page.active{
    overflow:visible !important;
    height:auto !important;
  }
}

/* ════════════════════════════════════════════════════════════
   LANDING PAGE STYLES — extracted from clinic.html (jun16) to slim the
   HTML. Kept render-blocking (this file loads in <head>) so no FOUC.
   Cascade order preserved: these come after all rules above, exactly as
   the inline <style> blocks did (they sat after the clinic.css <link>).
   ════════════════════════════════════════════════════════════ */

/* ---- was: <style id="hero-fx"> ---- */
  /* The hero backdrop is the shared full-page WebGL canvas (#landingWebgl) for
     every theme — the old #heroBg mesh + its Three.js CDN were removed. */
  /* Keep hero content/visual above the backdrop in every layout state. */
  #clinicHero .hero-content, #clinicHero .hero-visual{ position:relative; z-index:1; }

  /* ════════════════════════════════════════════════════════════════════
     ELECTRIC LIVE BACKGROUND — "Kinetic Energy Waves" WebGL shader (from
     stitch.txt). Deep-navy base + pulsing cyan↔violet energy waves +
     scanlines + vignette, animated on a fixed full-page <canvas>. Shown in
     the dark theme only; light/pink keep their own clean look.
     Driven by js/landing-fx.js. CSS bg = fallback when WebGL is absent. ── */
  /* One fixed full-page canvas drives the live background for ALL themes — the
     shader (landing-fx.js) swaps palette per theme via u_theme. background-color
     is the per-theme no-WebGL fallback. */
  #landingWebgl{
    display:block; position:fixed; top:0; left:0; width:100vw; height:100vh;
    z-index:-1; pointer-events:none; background-color:#040B18;
  }
  [data-theme="light"] #landingWebgl{ background-color:#f4f7ff; }
  [data-theme="pink"]  #landingWebgl{ background-color:#0d0008; }

  /* Let the electric backdrop show through the landing in dark theme. */
  #landingPage{ position:relative; z-index:1; }
  [data-theme="dark"] #landingPage,
  [data-theme="dark"] #landingPage .features,
  [data-theme="dark"] #landingPage .pricing,
  [data-theme="dark"] #landingPage .addons,
  [data-theme="dark"] #landingPage .footer,
  [data-theme="dark"] #landingPage .security-section,
  [data-theme="dark"] #landingPage .cta-section,
  [data-theme="dark"] #landingPage #featureSlider,
  [data-theme="dark"] #landingPage section[data-fx-clear]{ background:transparent !important; }

  /* Same for the LIGHT theme — let the soft WebGL mesh show through the whole
     page (cards keep their own white surface, so they read as elevated). */
  [data-theme="light"] #landingPage,
  [data-theme="light"] #landingPage .hero,
  [data-theme="light"] #landingPage .features,
  [data-theme="light"] #landingPage .pricing,
  [data-theme="light"] #landingPage .addons,
  [data-theme="light"] #landingPage .footer,
  [data-theme="light"] #landingPage .security-section,
  [data-theme="light"] #landingPage .cta-section,
  [data-theme="light"] #landingPage #featureSlider,
  [data-theme="light"] #landingPage section[data-fx-clear]{ background:transparent !important; }

  /* NO-FOUC: hide the hero until the flip is wired (.anim-ready), so the static
     hero never paints-then-re-animates on a slow/hard refresh (the "loads twice"
     flash). Gated by html.hero-anim — set in <head> only when JS is on AND motion
     is allowed; no-JS / reduced-motion skip it and see the static hero instantly.
     visibility (not display) keeps layout so nothing reflows when it reveals. */
  html.hero-anim #clinicHero .hero-content,
  html.hero-anim #clinicHero .hero-visual{ visibility:hidden; }
  html.hero-anim #clinicHero.anim-ready .hero-content,
  html.hero-anim #clinicHero.anim-ready .hero-visual{ visibility:visible; }

  /* ENTRANCE LAYOUT — only when JS has set up the animation. */
  #clinicHero.anim-ready{
    display:grid !important;
    grid-template-columns:1fr;
    justify-items:center; align-items:center;
    gap:32px;
    transition:grid-template-columns 1.1s cubic-bezier(.16,1,.3,1), gap .8s ease;
  }
  #clinicHero.anim-ready.split{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); justify-items:stretch; }

  /* Text block: centered first, slides to the left half on split. */
  #clinicHero.anim-ready .hero-content{ max-width:840px; text-align:center; transition:max-width .9s cubic-bezier(.16,1,.3,1); }
  #clinicHero.anim-ready.split .hero-content{ max-width:580px; text-align:left; }
  #clinicHero.anim-ready:not(.split) .hero-btns,
  #clinicHero.anim-ready:not(.split) .hero-stats{ justify-content:center; }

  /* Product visual: collapsed + hidden while centered, fades/scales in on split. */
  #clinicHero.anim-ready .hero-visual{ transform:scale(.9) translateX(28px); }
  #clinicHero.anim-ready:not(.split) .hero-visual{ height:0; min-height:0; opacity:0; overflow:hidden; }
  #clinicHero.anim-ready.split .hero-visual{ opacity:1; transform:none;
    transition:opacity .9s ease .25s, transform 1s cubic-bezier(.16,1,.3,1) .25s; }

  /* TITLE — 3D word flip (cortex-style). JS wraps each word in .line/.word. */
  #clinicHero.anim-ready .hero-title{ perspective:1000px; }
  #clinicHero.anim-ready .hero-title .line{ display:block; overflow:hidden; padding-bottom:.1em; }
  #clinicHero.anim-ready .hero-title .word{
    display:inline-block; transform-origin:center bottom;
    transform:rotateX(-90deg) translateY(18px); opacity:0;
    animation:wordFlip .9s cubic-bezier(.23,1,.32,1) forwards;
    will-change:transform, opacity;
  }
  @keyframes wordFlip{
    0%  { transform:rotateX(-90deg) translateY(18px) scale(.92); opacity:0; filter:blur(8px); }
    60% { filter:blur(0); }
    100%{ transform:none; opacity:1; filter:blur(0); }
  }
  /* Gradient words reuse the existing .hero-title span gradient. */
  #clinicHero .hero-title .word.grad{
    background:linear-gradient(135deg,var(--neon),#0066ff);
    -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  }

  /* Badge appears immediately; sub/buttons/stats reveal on split (staggered). */
  #clinicHero.anim-ready .hero-badge{ opacity:0; transform:translateY(-16px); animation:heroFadeDown .7s ease .1s forwards; }
  @keyframes heroFadeDown{ to{ opacity:1; transform:none; } }
  #clinicHero.anim-ready .hero-sub,
  #clinicHero.anim-ready .hero-btns,
  #clinicHero.anim-ready .hero-stats{ opacity:0; transform:translateY(16px); transition:opacity .8s ease, transform .8s cubic-bezier(.16,1,.3,1); }
  /* These reveal only AFTER the title has slid to the left (the grid split takes
     ~1.1s), so the paragraph never appears while the title is still centered. */
  #clinicHero.anim-ready.split .hero-sub  { opacity:1; transform:none; transition-delay:.95s; }
  #clinicHero.anim-ready.split .hero-btns { opacity:1; transform:none; transition-delay:1.1s; }
  #clinicHero.anim-ready.split .hero-stats{ opacity:1; transform:none; transition-delay:1.25s; }

  /* Mobile: single column, centered, visual stacks below (no 2-col split). */
  @media (max-width:900px){
    #clinicHero.anim-ready.split{ grid-template-columns:1fr; }
    #clinicHero.anim-ready.split .hero-content{ max-width:100%; text-align:center; }
    #clinicHero.anim-ready.split .hero-btns,
    #clinicHero.anim-ready.split .hero-stats{ justify-content:center; }
  }

  /* Scroll reveal — landing cards fade + slide up one-by-one as they enter view
     (wired by js/reveal.js, scoped to #landingPage). The .reveal class is only
     ever added by JS, so no-JS users see everything normally. transition-delay
     (--d) is set per-card by the script to stagger siblings. */
  #landingPage .reveal{
    opacity:0; transform:translateY(34px);
    transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);
    transition-delay:var(--d,0s); will-change:opacity,transform;
  }
  #landingPage .reveal.in{ opacity:1; transform:none; }
  @media (prefers-reduced-motion:reduce){
    #landingPage .reveal{ opacity:1 !important; transform:none !important; }
  }

/* ---- was: <style id="landing-type"> ---- */
  #landingPage{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; }
  #landingPage h1, #landingPage h2, #landingPage h3,
  #landingPage .hero-title, #landingPage .section-title, #landingPage .cta-title,
  #landingPage .price-amount{ text-wrap:balance; font-feature-settings:"ss01","cv01","cv03"; }
  #landingPage p, #landingPage .hero-sub, #landingPage .feat-desc{ text-wrap:pretty; }

  /* Hero — bigger, tighter, with a soft luminous lift on the dark backdrop */
  #landingPage .hero-title{
    font-size:clamp(38px,6.2vw,68px); line-height:1.04; letter-spacing:-2.4px; margin-bottom:24px;
  }
  [data-theme="dark"] #landingPage .hero-title{ text-shadow:0 0 42px rgba(0,212,255,.18); }
  #landingPage .hero-sub{
    font-size:clamp(15px,1.4vw,18px); line-height:1.75; max-width:560px; color:var(--text2);
    margin-bottom:38px; font-weight:400; letter-spacing:.1px;
    font-feature-settings:"ss01","cv01"; -webkit-font-smoothing:antialiased;
  }
  /* Highlight the module keywords — subtle, professional accent per theme. */
  #landingPage .hero-sub .hl{ font-weight:600; color:var(--text); }
  [data-theme="dark"]  #landingPage .hero-sub .hl{ color:#7fe7ff; }
  [data-theme="light"] #landingPage .hero-sub .hl{ color:#0066cc; }
  [data-theme="pink"]  #landingPage .hero-sub .hl{ color:#ff7ab8; }
  #landingPage .hero-badge{ letter-spacing:.6px; }

  /* Section headers — fluid, balanced, consistent rhythm top to bottom */
  #landingPage .section-label{ letter-spacing:2.4px; margin-bottom:18px; }
  #landingPage .section-title{
    font-size:clamp(28px,4vw,46px); line-height:1.12; letter-spacing:-1.6px; margin-bottom:16px;
  }
  #landingPage .sec-title{ font-size:18px; letter-spacing:-.3px; }

  /* Pricing & CTA */
  #landingPage .price-amount{ font-size:clamp(32px,3vw,40px); letter-spacing:-1.6px; }
  #landingPage .price-plan{ letter-spacing:2.2px; }
  #landingPage .cta-title{ font-size:clamp(30px,4.6vw,54px); line-height:1.05; letter-spacing:-2px; }

  /* Body copy & feature text — calmer measure, softer leading */
  #landingPage .feat-title{ font-size:16px; letter-spacing:-.2px; }
  #landingPage .feat-desc{ line-height:1.65; }
  #landingPage .nav-name{ letter-spacing:-.6px; }
  /* Match the SEO-page header wordmark: "VixitAi" solid white, "HMS" cyan gradient. */
  [data-theme="dark"] #landingPage .nav-name{
    background:none; -webkit-text-fill-color:#e8eefc; color:#e8eefc;
  }
  [data-theme="dark"] #landingPage .nav-name span{
    background:linear-gradient(135deg,#7fe7ff,#00c9e4); -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
  /* Theme dropdown — replaces the 3 inline theme buttons in the header (cleaner, less crowding) */
  .theme-dd{position:relative;}
  .theme-dd-btn{display:flex;align-items:center;gap:5px;background:var(--surface);border:1px solid var(--border2);border-radius:var(--radius-pill);padding:6px 10px;cursor:pointer;color:var(--text2);font-size:14px;line-height:1;transition:var(--transition);}
  .theme-dd-btn:hover{border-color:rgba(0,212,255,.4);color:var(--neon);}
  .theme-dd-chev{transition:transform .2s ease;opacity:.7;}
  .theme-dd-btn[aria-expanded="true"] .theme-dd-chev{transform:rotate(180deg);}
  .theme-dd-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:148px;background:var(--surface);border:1px solid var(--border2);border-radius:12px;padding:6px;display:none;flex-direction:column;gap:2px;box-shadow:0 14px 34px rgba(0,0,0,.45);z-index:300;}
  .theme-dd-menu.open{display:flex;}
  .theme-dd-item{display:flex;align-items:center;gap:9px;padding:9px 12px;border:none;background:none;border-radius:8px;cursor:pointer;color:var(--text);font-size:13px;font-weight:600;font-family:var(--font-body);text-align:left;width:100%;transition:.15s;}
  .theme-dd-item:hover{background:rgba(0,212,255,.08);}
  .theme-dd-item.active{background:rgba(0,212,255,.12);color:var(--neon);}
  /* Mobile: tighten the header so Features · Pricing · Details sit close together */
  @media(max-width:640px){
    #landingPage .nav{padding:0 4%;}
    #landingPage .nav-links{gap:2px;}
    #landingPage .nav-links .nav-link.nav-mobile{padding:8px 9px;font-size:12px;}
    #landingPage .theme-dd-btn{padding:6px 8px;}
  }

  /* ── Dark-mode color/readability pass ──────────────────────────────────
     Hero: "Smart ERP for" stays pure white; the gradient line uses the
     stitch.txt "Ecosystem" cyan (#54e5ff → #00c9e4 = primary → primary-
     container). Card feature bullets go white; dim grey sub-texts on the
     pricing & comparison cards are lifted so they're actually legible. ── */
  [data-theme="dark"] #landingPage .hero-title{ color:#ffffff; }
  /* Gradient is for the gradient WORDS only (and the static fallback <span>).
     hero-reveal.js rebuilds every word into a <span>, so a bare `span` selector
     would wrongly paint "Smart ERP for" cyan — :not(.line):not(.word) excludes
     the rebuilt spans, leaving only the static gradient span. */
  [data-theme="dark"] #landingPage .hero-title span:not(.line):not(.word),
  [data-theme="dark"] #landingPage #clinicHero .hero-title .word.grad{
    background-image:linear-gradient(135deg,#54e5ff,#00c9e4) !important;
    -webkit-background-clip:text !important; background-clip:text !important;
    -webkit-text-fill-color:transparent !important; color:transparent !important;
  }
  /* Plain (non-gradient) title words — "Smart ERP for" — stay pure white. */
  [data-theme="dark"] #landingPage #clinicHero .hero-title .word:not(.grad){
    background:none !important; -webkit-text-fill-color:#ffffff !important; color:#ffffff !important;
  }
  /* Highlight the PRICE so it leads the card — cyan gradient instead of plain
     white (which blended with the feature list and read flat/unprofessional). */
  [data-theme="dark"] #landingPage .price-amount{
    background-image:linear-gradient(135deg,#7fe7ff,#00c9e4);
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
  }
  [data-theme="dark"] #landingPage .price-amount span{   /* /mo · /yr suffix stays muted */
    -webkit-text-fill-color:#9fb2d6; color:#9fb2d6;
  }
  /* Feature bullets → soft light slate (clearly secondary to the price, not stark
     white) so the card has real hierarchy; the ✓ marks keep the cyan accent. */
  [data-theme="dark"] #landingPage .price-feat{ color:#cdd8ee; }
  /* Small sub-texts (plan label, "or ₹.../yr · …") → legible light-grey */
  [data-theme="dark"] #landingPage .price-plan,
  [data-theme="dark"] #landingPage .price-period{ color:#9fb2d6; }
  /* Comparison table competitor columns + headers (inline var(--text3)) → visible */
  [data-theme="dark"] #landingPage td[style*="--text3"],
  [data-theme="dark"] #landingPage th[style*="--text3"]{ color:#b4c2df !important; }

/* ══════ QUICK LIVE DEMO — hero button + cinematic loading overlay (jul01) ══════ */
.btn-hero-demo{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  padding:14px 26px;font-family:var(--font-display);font-size:15px;font-weight:800;
  letter-spacing:.2px;color:#05070f;cursor:pointer;border:none;border-radius:var(--radius-pill,999px);
  background:linear-gradient(120deg,#00d4ff 0%,#39ff14 100%);
  box-shadow:0 0 24px rgba(0,212,255,.45),0 0 40px rgba(57,255,20,.18);
  transition:transform .18s ease,box-shadow .25s ease;overflow:hidden;
}
.btn-hero-demo::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);animation:bhdSheen 3.4s ease-in-out infinite;}
.btn-hero-demo:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 0 34px rgba(0,212,255,.6),0 0 60px rgba(57,255,20,.28);}
.btn-hero-demo .bhd-bolt{font-size:16px;filter:drop-shadow(0 0 4px rgba(255,255,255,.6));}
.btn-hero-demo .bhd-live{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:1px;
  padding:2px 7px;border-radius:999px;background:rgba(5,7,15,.82);color:#39ff14;
  box-shadow:0 0 8px rgba(57,255,20,.5);}
.btn-hero-demo .bhd-live::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:#39ff14;margin-right:5px;vertical-align:middle;box-shadow:0 0 6px #39ff14;animation:bhdBlink 1.2s infinite;}
@keyframes bhdSheen{0%,100%{left:-60%;}55%,100%{left:130%;}}
@keyframes bhdBlink{0%,100%{opacity:1;}50%{opacity:.25;}}

#quickDemoOverlay{
  position:fixed;inset:0;z-index:100001;display:none;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 50% 40%,#0a1024 0%,#05070f 70%);
  opacity:0;transition:opacity .5s ease;overflow:hidden;
}
#quickDemoOverlay.qd-show{opacity:1;}
#quickDemoOverlay .qd-bg-glow{position:absolute;top:38%;left:50%;width:620px;height:620px;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(0,212,255,.16) 0%,rgba(57,255,20,.05) 40%,transparent 70%);
  filter:blur(18px);pointer-events:none;animation:qdGlowPulse 3.4s ease-in-out infinite;}
@keyframes qdGlowPulse{0%,100%{opacity:.6;transform:translate(-50%,-50%) scale(1);}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08);}}
#quickDemoOverlay .qd-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px;max-width:560px;width:92%;}

.qd-doc{position:relative;margin-bottom:6px;animation:qdBob 2.6s ease-in-out infinite;}
.qd-doc svg{filter:drop-shadow(0 8px 22px rgba(0,212,255,.25));}
.qd-doc-shadow{fill:rgba(0,212,255,.18);animation:qdShadow 2.6s ease-in-out infinite;}
.qd-eye{animation:qdBlink 3.2s infinite;transform-origin:center;transform-box:fill-box;}
@keyframes qdBob{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
@keyframes qdShadow{0%,100%{transform:scaleX(1);opacity:.6;}50%{transform:scaleX(.82);opacity:.35;}}
@keyframes qdBlink{0%,92%,100%{transform:scaleY(1);}96%{transform:scaleY(.1);}}

.qd-brand{font-family:var(--font-display);font-size:26px;font-weight:800;letter-spacing:-.5px;color:#fff;margin-bottom:22px;}
.qd-brand span:first-child{color:#00d4ff;text-shadow:0 0 16px rgba(0,212,255,.6);}
.qd-brand .qd-brand-sub{display:block;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:4px;
  text-transform:uppercase;color:var(--text3,#7488ad);margin-top:4px;text-shadow:none;}

.qd-kw{min-height:96px;display:flex;flex-direction:column;justify-content:center;gap:8px;margin-bottom:26px;}
.qd-kw-big{font-family:var(--font-display);font-size:clamp(30px,7vw,46px);font-weight:800;line-height:1.05;
  color:#eafaff;text-shadow:0 0 14px rgba(0,212,255,.55),0 0 30px rgba(0,212,255,.3);
  transition:opacity .35s ease,transform .35s ease;}
.qd-kw-small{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-size:clamp(15px,3.4vw,20px);
  font-weight:500;color:#9fb4d6;letter-spacing:.2px;transition:opacity .35s ease,transform .35s ease;}

.qd-barwrap{width:min(340px,80vw);height:7px;border-radius:999px;background:rgba(255,255,255,.08);
  overflow:hidden;box-shadow:inset 0 0 0 1px rgba(0,212,255,.15);}
.qd-bar{width:0%;height:100%;border-radius:999px;
  background:linear-gradient(90deg,#00d4ff,#39ff14);box-shadow:0 0 14px rgba(0,212,255,.7);transition:width .12s linear;}
.qd-meta{display:flex;justify-content:space-between;align-items:center;width:min(340px,80vw);margin-top:12px;}
.qd-mono{font-family:var(--font-mono);font-size:11px;color:var(--text3,#7488ad);letter-spacing:.3px;}
.qd-pct{font-family:var(--font-mono);font-size:12px;font-weight:700;color:#00d4ff;text-shadow:0 0 8px rgba(0,212,255,.5);}

@media (prefers-reduced-motion:reduce){
  .qd-doc,.qd-doc-shadow,.qd-eye,#quickDemoOverlay .qd-bg-glow,.btn-hero-demo::after,.btn-hero-demo .bhd-live::before{animation:none;}
}

/* ═══════════════════════════════════════════════════════════════════════
   VIXIT UI-KIT v1 — shared tokenized primitives (jul05)
   Data-table (sortable / filterable / paginated), filter-chips, pager,
   skeleton rows, empty-state action. 100% design-token based → theme-aware
   in dark / light / pink with no per-module overrides. Paired with js/ui-kit.js.
   ═══════════════════════════════════════════════════════════════════════ */
.uik-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:14px;}
.uik-search{display:flex;align-items:center;gap:8px;background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:8px 12px;min-width:200px;flex:1 1 220px;max-width:380px;}
.uik-search input{background:transparent;border:none;outline:none;color:var(--text);font-family:var(--font-body);font-size:13px;width:100%;}
.uik-search svg{color:var(--text3);flex-shrink:0;width:15px;height:15px;}
.uik-chips{display:flex;flex-wrap:wrap;gap:8px;}
.uik-chip{padding:6px 14px;border-radius:999px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);font-size:12px;font-weight:700;cursor:pointer;transition:var(--transition,all .15s ease);font-family:var(--font-body);white-space:nowrap;}
.uik-chip:hover{border-color:var(--accent);color:var(--text);}
.uik-chip.active{background:var(--accent);border-color:var(--accent);color:#fff;}
.uik-chip .uik-chip-count{opacity:.7;margin-left:5px;font-variant-numeric:tabular-nums;}
.uik-table{width:100%;border-collapse:collapse;font-family:var(--font-body);}
.uik-table thead th{position:sticky;top:0;background:var(--bg2);color:var(--text3);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;text-align:left;padding:11px 14px;border-bottom:1px solid var(--border);white-space:nowrap;z-index:1;}
.uik-table th.sortable{cursor:pointer;user-select:none;}
.uik-table th.sortable:hover{color:var(--text);}
.uik-table th .uik-sort{display:inline-block;margin-left:5px;opacity:.35;font-size:9px;}
.uik-table th.sorted-asc .uik-sort,.uik-table th.sorted-desc .uik-sort{opacity:1;color:var(--accent);}
.uik-table tbody td{padding:12px 14px;font-size:13px;color:var(--text);border-bottom:1px solid var(--border);vertical-align:middle;}
.uik-table tbody tr{transition:background .12s ease;}
.uik-table tbody tr.uik-clickable{cursor:pointer;}
.uik-table tbody tr:hover{background:var(--bg2);}
.uik-table tbody tr:last-child td{border-bottom:none;}
.uik-num{font-family:var(--font-mono);text-align:right;font-variant-numeric:tabular-nums;}
.uik-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 4px 2px;flex-wrap:wrap;}
.uik-pager-info{font-size:12px;color:var(--text3);font-weight:600;}
.uik-pager-btns{display:flex;gap:6px;align-items:center;}
.uik-pg-btn{min-width:32px;height:32px;padding:0 9px;border-radius:8px;border:1px solid var(--border);background:var(--bg2);color:var(--text2);font-size:12px;font-weight:700;cursor:pointer;transition:var(--transition,all .15s ease);font-family:var(--font-body);}
.uik-pg-btn:hover:not(:disabled){border-color:var(--accent);color:var(--text);}
.uik-pg-btn.active{background:var(--accent);border-color:var(--accent);color:#fff;}
.uik-pg-btn:disabled{opacity:.4;cursor:not-allowed;}
.uik-sk{background:linear-gradient(90deg,var(--bg2) 25%,var(--bg3,var(--surface)) 37%,var(--bg2) 63%);background-size:400% 100%;animation:lazyShimmer 1.4s ease infinite;border-radius:6px;height:12px;display:block;width:100%;}
.empty-state .uik-empty-action{margin-top:16px;display:inline-flex;}
@media (max-width:768px){.uik-table .hide-mobile{display:none;}}
/* ── UIK modal-form primitives (jul05, Add Patient first adopter) ──
   Shared section headers, field labels, and grids for in-shell modals, plus
   token button overrides that beat the legacy neon .btn-save base. */
.uik-form .form-input,.uik-form .form-select{font-size:14px;padding:12px;border-radius:10px;font-weight:600;}
.uik-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;}
@media (max-width:600px){.uik-form-grid{grid-template-columns:1fr;}}
.uik-msec{display:flex;align-items:center;gap:8px;margin:2px 0 14px;}
.uik-msec-icon{width:28px;height:28px;border-radius:8px;background:var(--accent-soft);display:flex;align-items:center;justify-content:center;font-size:13px;}
.uik-msec-label{font-size:12px;font-weight:800;color:var(--accent-strong);text-transform:uppercase;letter-spacing:.5px;}
.uik-msec.danger .uik-msec-icon{background:var(--danger-soft);}
.uik-msec.danger .uik-msec-label{color:var(--danger);}
.uik-msec.warn .uik-msec-icon{background:var(--warn-soft);}
.uik-msec.warn .uik-msec-label{color:var(--warn-strong);}
.uik-flabel{font-size:10px;font-weight:800;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;}
.uik-flabel.req::after{content:" *";color:var(--danger);}
.uik-btn-accent.uik-btn-accent{background:var(--accent-strong) !important;background-image:none !important;color:#fff !important;box-shadow:var(--shadow-pro) !important;text-shadow:none !important;}
.uik-btn-accent:hover{filter:brightness(1.08);}
.uik-btn-ok.uik-btn-ok{background:var(--ok) !important;background-image:none !important;color:#fff !important;box-shadow:var(--shadow-pro) !important;text-shadow:none !important;}
.uik-btn-ok:hover{filter:brightness(1.08);}
/* ── Sidebar nav filter (Phase 2 IA) ── */
.sb-filter{padding:4px 14px 10px;}
.sb-filter input{width:100%;padding:8px 12px;border-radius:9px;border:1px solid var(--border);background:var(--bg2);color:var(--text);font-size:12.5px;font-family:var(--font-body);outline:none;}
.sb-filter input:focus{border-color:var(--accent);}
.sb-filter input::placeholder{color:var(--text3);}
.nav-item.sb-filter-hide,.nav-sec.sb-filter-hide,.nav-divider.sb-filter-hide{display:none !important;}

/* ── Topbar global-search dropdown (UX overhaul Phase 2) ── */
.tb-search{position:relative;}
.tb-search-dd{display:none;position:absolute;top:calc(100% + 8px);right:0;width:400px;max-width:min(400px,92vw);max-height:440px;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-pro);z-index:1200;padding:6px;cursor:default;}
.tb-search-dd.open{display:block;}
.tb-dd-sec{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.6px;color:var(--text3);padding:8px 10px 4px;}
.tb-dd-row{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--text);}
.tb-dd-row:hover{background:var(--surface2);}
.tb-dd-ico{flex-shrink:0;font-size:14px;}
.tb-dd-main{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tb-dd-sub{margin-left:auto;font-size:11px;color:var(--text2);white-space:nowrap;flex-shrink:0;padding-left:10px;}
.tb-dd-all{border-top:1px solid var(--border);margin-top:6px;border-radius:0 0 8px 8px;color:var(--text2);font-weight:600;}
.tb-dd-empty{padding:14px;font-size:12px;color:var(--text2);text-align:center;}

/* ── Topbar back button (UX overhaul Phase 2, pairs with the breadcrumb subtitle) ── */
.tb-back{width:32px;height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text2);font-size:15px;cursor:pointer;transition:var(--transition);}
.tb-back:hover{background:var(--surface2);color:var(--text);}

/* ═══ Consult structured vitals (UX overhaul Phase 4d) ═══ */
.cvital.abn{border-color:var(--danger) !important;background:var(--danger-soft) !important;}
.cvital.abn .cvital-lbl{color:var(--danger) !important;}
.cvital.abn .form-input{color:var(--danger) !important;}

/* ═══ Lab report preview — mobile optimization (jul18) ═══
   The report markup (buildLabReportHtml in lab.js) is inline-styled for
   print/PDF fidelity; these overrides only reshape the ON-SCREEN preview on
   phones. Print opens a bare window (no clinic.css) and PDFs render from a
   fixed-width offscreen host with windowWidth:1200, so neither is affected. */
@media(max-width:768px){
  /* Modal action rows: 4+ buttons (Lab Order modal has 6) must wrap into
     rows, not overlap in one squeezed line. */
  .modal-footer{flex-wrap:wrap !important;}
  .modal-footer button{flex:1 1 auto !important;white-space:nowrap;}
  /* Everything below is scoped to #viewLabBody (the on-screen preview): PDF
     generation captures the same markup OUTSIDE this scope (string source in
     lab.js), so PDFs keep the untouched desktop/A4 inline styles. */
  /* Patient / sample demographics: single column instead of two cramped ones */
  #viewLabBody .lab-demo-grid{grid-template-columns:1fr !important;}
  #viewLabBody .lab-demo-grid>div{border-right:none !important;padding:8px 14px !important;}
  #viewLabBody .lab-demo-grid>div+div{border-top:1px solid #e2e8f0;}
  /* Results table: tighten cells so 4 columns fit a phone; if a long
     reference interval still doesn't fit, scroll the table, never clip it.
     (The generic mobile data-table rule forces table{min-width:500px} +
     nowrap cells — the report is a document, not a data grid: let it fit.) */
  #viewLabBody .lab-tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  #viewLabBody .lab-report table{min-width:0 !important;}
  #viewLabBody .lab-report th,#viewLabBody .lab-report td{white-space:normal !important;padding:4px 5px !important;}
  #viewLabBody .lab-report th{font-size:8.5px !important;letter-spacing:.2px !important;}
  #viewLabBody .lab-report td{font-size:11px !important;}
  #viewLabBody .lab-wm{font-size:26px !important;letter-spacing:3px !important;}
}