/* OrthoCollab — UI layer v3.4 (Calibrated Clinical Porcelain & PACS Radiology Obsidian Color Palette, Interactive Odontogram & Micro-Interactions). */
:root{
  --bg:#eef4fb; --bg2:#ffffff; --bg3:#e6eef8;
  --fill:#dbe7f4; --fill2:#c3d4e8;
  --label:#0b1528; --label2:#3b4d68; --label3:#647894;
  --sep:#d2dfef;
  --blue:#0284c7; --blue-dark:#0369a1; --blue-light:#e0f2fe;
  --indigo:#4f46e5; --teal:#0d9488;
  --green:#059669; --orange:#d97706; --red:#e11d48;
  --r-sm:10px; --r-md:13px; --r-lg:16px;
  --ring:0 0 0 3px rgba(14,165,233,.28);
  --shadow-1:0 3px 10px rgba(11,21,40,.05),0 1px 3px rgba(11,21,40,.04);
  --shadow-2:0 14px 32px -6px rgba(11,21,40,.13),0 5px 12px -3px rgba(11,21,40,.06);
  --card-sheen:inset 0 1px 0 rgba(255,255,255,.85);
  --night-active-bg:linear-gradient(135deg,#082042,#0e366c);
  --night-active-border:rgba(56,189,248,.58);
  --night-active-text:#e0f2fe;
}

body{
  background-color:var(--bg);
  background-image:
    radial-gradient(1100px 480px at 8% -4%,rgba(14,165,233,.08),transparent 62%),
    radial-gradient(900px 460px at 94% 104%,rgba(16,185,129,.06),transparent 62%);
  background-attachment:fixed;
}

/* ==================== DARK MODE: CALIBRATED PACS RADIOLOGY OBSIDIAN THEME ==================== */
html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#030914;
  --bg2:#071327;
  --bg3:#0c1e3b;
  --fill:#132b52;
  --fill2:#1c3c70;
  --label:#f1f5f9;
  --label2:#9fb2cc;
  --label3:#6980a0;
  --sep:rgba(56,189,248,.19);
  --blue:#38bdf8;
  --blue-dark:#0284c7;
  --blue-light:rgba(14,165,233,.18);
  --indigo:#818cf8;
  --teal:#2dd4bf;
  --green:#34d399;
  --orange:#fbbf24;
  --red:#fb7185;
  --glass:rgba(7,19,39,.92);
  --topbar-bg:rgba(3,9,20,.94);
  --shadow:0 14px 32px -6px rgba(2,6,23,.68);
  --shadow-1:0 5px 16px rgba(2,6,23,.52);
  --shadow-2:0 18px 42px -6px rgba(2,6,23,.8);
  --card-sheen:inset 0 1px 0 rgba(255,255,255,.06);
}
html[data-theme="dark"] body{
  background-image:
    radial-gradient(1100px 520px at 12% 0%,rgba(14,165,233,.12),transparent 62%),
    radial-gradient(950px 500px at 90% 100%,rgba(16,185,129,.08),transparent 62%);
}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---- Full-Width Cockpit Layout (Eliminates 210px Left Sidebar Dead Space) ---- */
body.layout-fullwidth{--sidebar-w:0px}
body.layout-fullwidth .dp-sidebar{display:none!important}
body.layout-fullwidth .page{margin-left:0!important;padding:8px 12px 14px;max-width:100vw}

/* ---- Integrated Top Navigation Dock ---- */
.top-nav-dock{display:flex;align-items:center;gap:4px;margin-left:8px;overflow-x:auto;scrollbar-width:none}
.top-nav-dock::-webkit-scrollbar{display:none}
.tnav-link{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:10px;color:rgba(255,255,255,.78)!important;font:600 12.5px var(--font);white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s,transform .1s}
.tnav-link i{font-size:13.5px;opacity:.92}
.tnav-link:hover{background:rgba(255,255,255,.1);color:#fff!important}
.tnav-link.on{background:var(--night-active-bg);color:#38bdf8!important;box-shadow:inset 0 0 0 1px var(--night-active-border),0 2px 10px rgba(2,8,23,.4)}
.tnav-link.cta{background:linear-gradient(135deg,#0d9488,#0284c7);color:#fff!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 3px 10px rgba(14,165,233,.32)}
.tnav-link.cta:hover{filter:brightness(1.08);transform:translateY(-1px)}
.tnav-badge{background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;border-radius:99px;padding:0 6px;font-size:10.5px;font-weight:800;line-height:17px;box-shadow:0 2px 6px rgba(239,68,68,.4)}
.theme-toggle-btn{border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.07);cursor:pointer}
.theme-toggle-btn.is-active{background:var(--night-active-bg)!important;color:#38bdf8!important;border-color:var(--night-active-border)!important;box-shadow:0 0 14px rgba(56,189,248,.26)}
@media (max-width:1180px){.tnav-link span{font-size:11.5px}.tnav-link{padding:5px 8px}}
@media (max-width:960px){.top-nav-dock{display:none!important}}

/* ---- Non-Intrusive Floating Flash Toast ---- */
.flash-toast{position:fixed;top:calc(var(--topbar-h) + 10px);left:50%;transform:translateX(-50%);z-index:1090;display:inline-flex;align-items:center;gap:10px;padding:9px 18px;border-radius:999px;font:600 13px var(--font);box-shadow:0 12px 32px rgba(15,23,42,.28);backdrop-filter:blur(16px);animation:up .22s}
.flash-toast.ok{background:linear-gradient(135deg,rgba(5,150,105,.96),rgba(16,185,129,.96));color:#fff;border:1px solid rgba(255,255,255,.22)}
.flash-toast.err{background:linear-gradient(135deg,rgba(220,38,38,.96),rgba(239,68,68,.96));color:#fff;border:1px solid rgba(255,255,255,.22)}
.flash-toast button{border:0;background:rgba(255,255,255,.22);color:#fff;width:20px;height:20px;border-radius:50%;cursor:pointer;font-size:11px;display:grid;place-items:center}

/* ---- Reusable Semantic Badges, Chips & Soft Buttons ---- */
.chip{border:1px solid transparent;letter-spacing:.01em}
.chip.blue{background:rgba(14,165,233,.13);color:var(--blue);border-color:rgba(14,165,233,.26)}
.chip.green{background:rgba(16,185,129,.13);color:var(--green);border-color:rgba(16,185,129,.26)}
.chip.orange{background:rgba(245,158,11,.14);color:var(--orange);border-color:rgba(245,158,11,.28)}
.chip.red{background:rgba(239,68,68,.13);color:var(--red);border-color:rgba(239,68,68,.28)}
.chip.indigo{background:rgba(99,102,241,.13);color:var(--indigo);border-color:rgba(99,102,241,.26)}

.btn-soft-primary{background:var(--blue-light)!important;border:1px solid rgba(56,189,248,.38)!important;color:var(--blue)!important;font-weight:700!important;padding:4px 10px}
html:not([data-theme="dark"]) .btn-soft-primary{color:var(--blue-dark)!important;border-color:rgba(2,132,199,.25)!important}
.btn-soft-primary:hover{background:var(--night-active-bg)!important;color:#38bdf8!important;border-color:var(--night-active-border)!important}
.ref-badge{background:linear-gradient(135deg,#081936,#0f2952)!important;color:#38bdf8!important;border:1px solid rgba(56,189,248,.36);font-weight:700;padding:2px 9px;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.expiring-strip{margin-top:6px;padding:6px 11px;border-radius:9px;background:rgba(245,158,11,.13);border:1px solid rgba(245,158,11,.28);color:#b45309;font-size:12px}
html[data-theme="dark"] .expiring-strip{background:rgba(251,191,36,.12);border-color:rgba(251,191,36,.25);color:#fbbf24}

/* ---- Activated States & Elevated Buttons Across Both Themes ---- */
.chip-btn{border:1px solid var(--sep);background:var(--bg2);color:var(--label2);border-radius:999px;padding:3px 10px;font:600 11px var(--font);cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all .15s}
.chip-btn:hover{background:var(--bg3);color:var(--label);border-color:rgba(56,189,248,.38)}
.chip-btn.on,.tl-chip.on,.seg .on,.seg input:checked+span,.tool.on{
  background:var(--night-active-bg)!important;
  border-color:var(--night-active-border)!important;
  color:#38bdf8!important;
  box-shadow:inset 0 0 0 1px var(--night-active-border),0 2px 8px rgba(2,8,23,.24)!important;
}
.btn.primary{
  background:linear-gradient(135deg,#0284c7,#0ea5e9)!important;
  color:#fff!important;
  border:1px solid rgba(56,189,248,.42);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 3px 10px rgba(2,132,199,.24);
}
html[data-theme="dark"] .btn.primary{
  background:linear-gradient(135deg,#0c2854,#0284c7)!important;
}
.btn.accent{
  background:linear-gradient(135deg,#0d9488,#0284c7 55%,#0ea5e9)!important;
  color:#fff!important;
  border:1px solid rgba(56,189,248,.45);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 5px 16px rgba(14,165,233,.28);
}
html[data-theme="dark"] .btn.accent{
  background:linear-gradient(135deg,#0b2349,#0284c7 60%,#0ea5e9)!important;
}
.btn.green{
  background:linear-gradient(135deg,#059669,#10b981)!important;
  color:#fff!important;
  border:1px solid rgba(52,211,153,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 3px 10px rgba(16,185,129,.22);
}
.btn.danger{
  border:1px solid rgba(239,68,68,.26);
}
.btn.primary:hover,.btn.accent:hover,.btn.green:hover{
  filter:brightness(1.06);
  transform:translateY(-1px);
}

/* ---- Input Icon Wrappers & Password Reveal Toggle ---- */
.input-icon-wrap{position:relative;display:flex;align-items:center}
.input-lead-icon{position:absolute;left:13px;color:var(--blue);font-size:15px;pointer-events:none;z-index:2;opacity:.88}
.input.has-lead-icon{padding-left:38px!important}
.input.has-trail-btn{padding-right:42px!important}
.pw-toggle-btn{
  position:absolute;right:8px;width:30px;height:30px;border-radius:8px;
  border:0;background:transparent;color:var(--label2);cursor:pointer;
  display:grid;place-items:center;font-size:15px;transition:background .15s,color .15s;
}
.pw-toggle-btn:hover{background:var(--fill);color:var(--blue)}

/* ---- Auth Portal (Login & Register Glassmorphic Cockpit) ---- */
.auth-wrap{
  background:
    radial-gradient(900px 540px at 8% 10%,rgba(14,165,233,.32),transparent 62%),
    radial-gradient(850px 520px at 92% 90%,rgba(16,185,129,.24),transparent 62%),
    radial-gradient(600px 400px at 50% 0%,rgba(99,102,241,.16),transparent 65%),
    #040a16!important;
}
.logo.logo-img{
  width:36px;height:36px;border-radius:9px;background:transparent!important;
  box-shadow:0 4px 12px rgba(2,132,199,.32);padding:0;object-fit:contain;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),filter .18s;
}
.brand:hover .logo.logo-img{transform:scale(1.06) rotate(-2deg);filter:drop-shadow(0 0 8px rgba(56,189,248,.45))}
.auth-logo{
  width:68px!important;height:68px!important;border-radius:18px!important;font-size:22px!important;
  background:transparent!important;padding:0!important;overflow:hidden;
  box-shadow:0 12px 32px rgba(14,165,233,.42)!important;
}
.auth-logo img{width:100%;height:100%;display:block;object-fit:contain}
.auth-pill{
  display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:999px;
  background:rgba(56,189,248,.14);border:1px solid rgba(56,189,248,.32);
  color:#7dd3fc;font-size:11px;font-weight:700;letter-spacing:.02em;
}
.auth-card{
  padding:20px 22px!important;border-radius:20px!important;
  box-shadow:var(--card-sheen),0 20px 45px rgba(2,6,23,.48)!important;
}
.auth-card-sub{padding:12px 16px!important;border-radius:16px!important}
.auth-submit-btn{padding:12px 16px!important;font-size:14.5px!important;border-radius:12px!important;font-weight:700!important}
.auth-bio-btn{padding:11px 16px!important;font-size:13.5px!important;border-radius:12px!important;font-weight:700!important}
.auth-apk-banner{border:1px solid var(--sep);border-radius:16px!important;transition:transform .15s,border-color .15s}
.auth-apk-banner:hover{transform:translateY(-1px);border-color:var(--blue)}
.auth-trust-strip{
  display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  margin-top:16px;font-size:11px;color:rgba(226,232,240,.72);font-weight:500;
}
.auth-trust-strip span{display:inline-flex;align-items:center;gap:5px}
.auth-trust-strip i{color:#38bdf8}

/* ---- 2-Column Split Cockpit: Left Workspace + Sticky Always-Visible Right Conversation Dock ---- */
.cockpit-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:10px;align-items:start}
#caseLayout.cockpit-layout{height:calc(100vh - var(--topbar-h) - 16px);align-items:stretch}
.cockpit-main{min-width:0;display:flex;flex-direction:column;gap:8px}
#caseLayout .cockpit-main{height:100%;min-height:0;overflow:hidden}
.cockpit-header{padding:8px 12px!important;border-radius:12px!important;flex:0 0 auto}
.cockpit-chat{position:sticky;top:calc(var(--topbar-h) + 8px);height:calc(100vh - var(--topbar-h) - 16px);min-height:460px;display:flex;flex-direction:column}
.chat-dock-card{height:100%;display:flex;flex-direction:column;padding:0!important;overflow:hidden;border:1px solid var(--sep);background:var(--bg2);border-radius:16px!important;box-shadow:var(--shadow-1)}
.chat-dock-header{padding:9px 12px;background:var(--bg3);border-bottom:1px solid var(--sep);flex:0 0 auto}
.chat-header-avatar{width:30px;height:30px;font-size:13px;background:linear-gradient(135deg,#0b254d,#0284c7);color:#38bdf8;border:1px solid rgba(56,189,248,.35)}
.chat-dock-card>.chat-thread{flex:1 1 0%;min-height:0;overflow-y:auto;padding:10px 12px;background:var(--bg);display:flex;flex-direction:column;gap:9px}
.chat-dock-footer{padding:8px 12px;background:var(--bg3);border-top:1px solid var(--sep);flex:0 0 auto}

/* ---- Chat Bubbles & Composer (Seamless Light & Darker Night Blue Support) ---- */
.chat-bubble.initial-brief{
  max-width:90%;padding:9px 12px;border-radius:13px 13px 13px 3px;
  background:rgba(14,165,233,.1);border:1px solid rgba(14,165,233,.28);color:var(--label);
}
.initial-brief-title{font-size:11px;font-weight:700;color:var(--blue)}
.initial-brief-q{font-size:12.5px;font-weight:600;line-height:1.38;white-space:pre-wrap;color:var(--label)}
.initial-brief-sub{font-size:10px;font-weight:700;color:var(--blue);margin-top:5px;letter-spacing:.04em}
.initial-brief-body{font-size:12px;line-height:1.35;white-space:pre-wrap;color:var(--label2)}
.chat-bubble.bubble-mine{
  max-width:84%;padding:8px 12px;border-radius:14px 14px 3px 14px;
  background:linear-gradient(135deg,#0c2854,#0284c7);color:#fff;
  border:1px solid rgba(56,189,248,.32);box-shadow:0 2px 6px rgba(2,8,23,.15);
}
.chat-bubble.bubble-theirs{
  max-width:84%;padding:8px 12px;border-radius:14px 14px 14px 3px;
  background:var(--bg2);color:var(--label);
  border:1px solid var(--sep);box-shadow:var(--shadow-1);
}
.quick-chip{
  border:1px solid var(--sep)!important;cursor:pointer;
  background:var(--bg2)!important;color:var(--label2)!important;
  padding:2px 8px!important;font-size:10.5px!important;transition:all .15s;
}
.quick-chip:hover{background:var(--night-active-bg)!important;color:#38bdf8!important;border-color:var(--night-active-border)!important}
.composer-input{
  flex:1;min-height:38px!important;height:38px;border-radius:19px!important;
  padding:8px 14px!important;background:var(--bg2)!important;color:var(--label)!important;
  font-size:13px!important;border:1px solid var(--sep)!important;box-shadow:none!important;
}
.composer-input:focus{border-color:var(--blue)!important;box-shadow:0 0 0 2px rgba(56,189,248,.22)!important}

/* ---- Master-Detail Clinical Workspace: Scrollable Left Gallery + Static Central Inspector ---- */
.clinical-workspace{
  flex:1 1 0%;min-height:360px;height:100%;overflow:hidden;
  display:grid;grid-template-columns:minmax(255px,.95fr) minmax(360px,1.45fr);gap:10px;align-items:stretch;
}
.clinical-workspace:not(:has(.inspector-pane)){grid-template-columns:1fr}
.gallery-pane{
  padding:10px 12px!important;display:flex;flex-direction:column;
  height:100%;max-height:100%;min-height:0;overflow:hidden;
}
.gallery-pane-header{flex:0 0 auto;padding-bottom:8px;border-bottom:1px solid var(--sep);margin-bottom:8px;gap:6px}
.gallery-scroll-body{
  flex:1 1 0%;min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:4px;
  scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--blue) var(--bg3);
}
.gallery-scroll-body::-webkit-scrollbar{width:6px}
.gallery-scroll-body::-webkit-scrollbar-thumb{background:var(--fill2);border-radius:6px}
.gallery-scroll-body::-webkit-scrollbar-thumb:hover{background:var(--blue)}
.gallery-scroll-body::-webkit-scrollbar-track{background:var(--bg3);border-radius:6px}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(134px,1fr));gap:8px;padding-bottom:4px}
.thumb.is-selected{box-shadow:0 0 0 2.5px #38bdf8,0 8px 20px rgba(2,132,199,.28)!important;border-color:#38bdf8!important}
.thumb-add-card{border:1.5px dashed var(--fill2);border-radius:14px;background:var(--bg3);aspect-ratio:4/3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;cursor:pointer;color:var(--label2);font:600 12px var(--font);transition:border-color .15s,background .15s}
.thumb-add-card:hover{border-color:var(--blue);background:var(--blue-light);color:var(--blue)}

/* Static Central Inspector Pane (Stays fixed in center while scrolling the gallery) */
.inspector-pane{
  padding:10px 12px!important;display:flex;flex-direction:column;
  position:sticky;top:calc(var(--topbar-h) + 8px);
  height:100%;max-height:100%;min-height:0;overflow:hidden;
}
.inspector-split{
  flex:1 1 0%;min-height:0;
  display:grid;grid-template-columns:minmax(230px,1.35fr) minmax(195px,.95fr);gap:12px;align-items:stretch;
}
.inspector-preview-col{display:flex;flex-direction:column;height:100%;min-height:0}
.inspector-stage{
  flex:1 1 0%;min-height:220px;height:100%;
  background:#040812;border-radius:12px;display:flex;align-items:center;justify-content:center;
  overflow:hidden;border:1px solid var(--sep);position:relative;
}
.inspector-stage a{display:flex;align-items:center;justify-content:center;width:100%;height:100%}
.inspector-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block}
.inspector-data-col{display:flex;flex-direction:column;min-height:0;overflow-y:auto}
.insp-synthesis-box{padding:14px;border-radius:12px;background:var(--bg3);border:1px solid var(--sep)}

@media (max-width:1180px){
  .inspector-split{grid-template-columns:1fr;overflow-y:auto}
  .inspector-stage{min-height:240px;max-height:300px}
}
@media (max-width:960px){
  #caseLayout.cockpit-layout,.cockpit-layout{grid-template-columns:1fr!important;height:auto!important}
  #caseLayout .cockpit-main{height:auto;overflow:visible}
  .clinical-workspace{grid-template-columns:1fr;height:auto;overflow:visible}
  .gallery-pane{max-height:420px}
  .inspector-pane{position:static;height:auto}
  .cockpit-chat{position:static;height:520px}
}

/* ---- Fine, Sleek, Non-Crowded Horizontal Case Timeline ---- */
.tl-h{padding:6px 10px!important;margin:0!important;overflow:hidden;background:var(--bg2);border:1px solid var(--sep)}
.tl-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:0 2px 5px;border-bottom:1px solid var(--sep)}
.tl-title{font-weight:700;font-size:12px;color:var(--label2);display:inline-flex;align-items:center;gap:5px;letter-spacing:.01em}
.tl-title i{color:var(--blue);font-size:13px}
.tl-count-badge{background:var(--bg3);color:var(--label2);border:1px solid var(--sep);border-radius:99px;padding:0 6px;font-size:10px;font-weight:700}
.tl-filters{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.tl-chip{border:1px solid transparent;background:transparent;border-radius:999px;padding:2px 8px;font:600 10.5px var(--font);color:var(--label2);cursor:pointer;display:inline-flex;gap:4px;align-items:center;transition:all .15s}
.tl-chip b{background:var(--bg3);border-radius:99px;padding:0 5px;font-size:9.5px;color:var(--label2)}
.tl-chip:hover{background:var(--bg3);color:var(--label)}
.tl-chip.on b{background:rgba(56,189,248,.2);color:#38bdf8}
.tl-nav{display:flex;gap:3px}
.tl-nav .icon-btn{width:24px;height:24px;font-size:11px;border-radius:7px}
.tl-scroller{overflow-x:auto;overflow-y:hidden;padding:6px 2px 2px;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--fill2) transparent;cursor:grab;outline:none}
.tl-scroller.drag{cursor:grabbing;scroll-behavior:auto;user-select:none}
.tl-scroller::-webkit-scrollbar{height:4px}
.tl-scroller::-webkit-scrollbar-thumb{background:var(--fill2);border-radius:4px}
.tl-scroller::-webkit-scrollbar-track{background:transparent}
.tl-track{position:relative;display:inline-flex;align-items:center;gap:6px;min-width:100%}
.tl-spine{position:absolute;left:0;right:0;top:50%;height:1px;background:var(--sep);z-index:1;pointer-events:none}
.tl-month{position:relative;z-index:2;flex:none}
.tl-month span{display:inline-block;background:var(--bg3);color:var(--label3);border:1px solid var(--sep);border-radius:99px;padding:2px 7px;font:700 9px var(--font);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.tl-node{--tone:var(--blue);position:relative;z-index:2;flex:none}
.tl-node.tone-green{--tone:var(--green)} .tl-node.tone-orange{--tone:var(--orange)} .tl-node.tone-indigo{--tone:var(--indigo)} .tl-node.tone-red{--tone:var(--red)}
.tl-pill{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--bg2);border:1px solid var(--sep);border-radius:10px;
  padding:4px 9px 4px 5px;color:var(--label);
  transition:border-color .15s,background .15s,transform .12s;
  max-width:205px;text-decoration:none;
}
a.tl-pill:hover,button.tl-pill:hover{
  background:var(--night-active-bg);border-color:var(--night-active-border);
  color:#e0f2fe;transform:translateY(-1px);
}
a.tl-pill:hover .tl-pill-meta{color:#93c5fd}
.tl-dot{
  width:24px;height:24px;border-radius:7px;
  background:color-mix(in srgb,var(--tone) 14%,var(--bg3));
  color:var(--tone);display:grid;place-items:center;font-size:11.5px;flex:none;
  border:1px solid color-mix(in srgb,var(--tone) 28%,transparent);
}
.tl-dot.add{background:var(--bg3);color:var(--blue);border:1px dashed var(--blue)}
.tl-pill-add{cursor:pointer;background:var(--bg3)}
.tl-pill-body{display:flex;flex-direction:column;min-width:0;line-height:1.18}
.tl-pill-title{font-weight:600;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px}
.tl-pill-meta{font-size:9.5px;color:var(--label3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-new-dot{width:6px;height:6px;border-radius:50%;background:var(--red);display:inline-block;flex:none}
.tl-node.is-new .tl-pill{border-color:rgba(239,68,68,.55)}
.tl-node.is-hidden,.tl-month.is-hidden{display:none}
@media (max-width:640px){.tl-nav{display:none}}

/* ---- Global Polish ---- */
.row.wrap>.grow,.row.between.wrap>.grow{flex:1 1 240px}
.row.wrap>.row{flex-wrap:wrap}
@media (max-width:640px){
  .large-title{word-break:break-word}
  .page-head{align-items:flex-start}
  .row.between.wrap>.row.wrap{width:100%}
  .row.between.wrap>.row.wrap>.btn{flex:1 1 auto}
}
:focus-visible{outline:none;box-shadow:var(--ring);border-radius:var(--r-sm)}
.input:focus,select.input:focus,textarea.input:focus{outline:none;box-shadow:var(--ring);border-color:var(--blue)}
.card{border-radius:var(--r-lg);box-shadow:var(--card-sheen),var(--shadow-1)}
.btn{transition:transform .1s,box-shadow .15s,background .15s,opacity .2s}
.btn:not(.primary):not(.accent):not(.danger):not(.green):not(.ghost):hover{background:var(--fill2)}
.btn.primary:hover,.btn.green:hover{filter:brightness(1.08)}
.icon-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--sep);background:var(--bg2);color:var(--label);display:inline-grid;place-items:center;cursor:pointer;transition:background .15s,transform .08s}
.icon-btn:hover{background:var(--bg3)} .icon-btn:active{transform:scale(.94)}
.page{background:var(--bg)}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.card-h{font-size:13px;font-weight:700;margin:0 0 10px;display:flex;align-items:center;gap:6px;color:var(--label)}
.card-h i{color:var(--blue)}
.idcard{
  background:linear-gradient(135deg,#07162e 0%,#0b2854 48%,#0284c7 82%,#0d9488 100%)!important;
  border:1px solid rgba(56,189,248,.38);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 18px 38px -8px rgba(2,132,199,.38)!important;
}
.toolbar-lite{display:flex;gap:8px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.toolbar-lite .input{flex:1;min-width:200px}
.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:14px}
@media (max-width:860px){.split{grid-template-columns:1fr}}

/* ---- Tabs (Admin / Sections) ---- */
.tabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--sep);margin:0 0 14px;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs a{display:inline-flex;align-items:center;gap:8px;padding:10px 15px;font:600 13.5px var(--font);color:var(--label2);border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.tabs a:hover{color:var(--label)}
.tabs a.on{color:var(--blue);border-bottom-color:var(--blue);background:rgba(14,165,233,.06)}
@media (max-width:560px){.tabs a span{display:none}.tabs a{padding:12px 18px;font-size:18px}.tabs a.on span{display:inline;font-size:13px}}

/* ---- KPI Cards ---- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin-bottom:12px}
.kpi{display:flex;align-items:center;gap:12px;background:var(--bg2);border:1px solid var(--sep);border-radius:var(--r-lg);padding:14px;box-shadow:var(--shadow-1)}
.kpi-i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:19px;flex:none}
.kpi-i.blue{background:rgba(14,165,233,.12);color:var(--blue)} .kpi-i.green{background:rgba(16,185,129,.13);color:var(--green)}
.kpi-i.indigo{background:rgba(99,102,241,.13);color:var(--indigo)} .kpi-i.orange{background:rgba(245,158,11,.15);color:var(--orange)}
.kpi-v{font-size:23px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.kpi-l{font-size:12px;color:var(--label2);margin-top:2px} .kpi-l small{color:var(--label3)}

/* ---- Charts & Lists ---- */
.chart{width:100%;height:auto;max-height:220px;display:block}
.chart-v{font:700 10px var(--font);fill:var(--label2)} .chart-l{font:500 8.5px var(--font);fill:var(--label3)}
.share{display:flex;flex-direction:column;gap:9px}
.share-row{display:grid;grid-template-columns:minmax(90px,1.1fr) 2fr auto;gap:10px;align-items:center;font-size:13px}
.share-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.share-b{display:block;height:9px;background:var(--fill);border-radius:99px;overflow:hidden}
.share-b i{display:block;height:100%;border-radius:99px;background:var(--blue)}
.share-n{font-weight:700;min-width:72px;text-align:right} .share-n small{color:var(--label3);font-weight:500}
.metric{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--sep);font-size:14px}
.metric:last-child{border:0} .metric span{color:var(--label2)}
.rank{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;counter-reset:r}
.rank li{display:grid;grid-template-columns:minmax(120px,1fr) 2fr 40px;gap:12px;align-items:center;font-size:13px;counter-increment:r}
.rank li>span:first-child:before{content:counter(r);display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--fill);font-size:11px;font-weight:700;margin-right:8px}
.rank li>b:last-child{text-align:right}
.alert-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.alert-list a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-sm);font-size:13px;font-weight:600;background:var(--bg3);color:var(--label)}
.alert-list a>span{flex:1}
.alert-list a:hover{background:var(--fill)}
.alert-list .tone-red i:first-child{color:var(--red)} .alert-list .tone-orange i:first-child{color:var(--orange)} .alert-list .tone-muted i:first-child{color:var(--label3)}
.feed{list-style:none;margin:0;padding:0}
.feed li a{display:block;padding:9px 4px;border-bottom:1px solid var(--sep);color:var(--label);font-size:13px}
.feed li:last-child a{border:0} .feed li a:hover{background:var(--bg3)}
table.meas{width:100%;border-collapse:collapse;font-size:12.5px}
table.meas th{background:var(--bg3);text-align:left;padding:6px 8px;font-size:11.5px;color:var(--label2)}
table.meas td{padding:6px 8px;border-bottom:1px solid var(--sep)}
table.meas td:last-child{text-align:right;font-weight:600}
#adminAudit table.meas td:last-child,.card table.meas.left td:last-child{text-align:left}
tr.row-warn td{background:rgba(239,68,68,.06)}

/* ---- Admin Users ---- */
.userrow{gap:12px;flex-wrap:wrap}
.userrow.is-off{opacity:.62}
.reveal{border:2px solid var(--green);background:linear-gradient(180deg,rgba(16,185,129,.07),transparent);margin-bottom:14px}
.reveal-h{font-weight:700;margin-bottom:8px}
.reveal-pw{font-size:26px;font-weight:800;letter-spacing:.06em;background:var(--bg3);border-radius:var(--r-sm);padding:12px 14px;margin:8px 0;word-break:break-all;user-select:all}
.report-fields{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px}
@media (max-width:640px){.report-fields{grid-template-columns:1fr}}

/* ---- Landing Page Cockpit (Edge-to-Edge Full-Width Case Banner Cards with Brief Summary & Miniature Gallery) ---- */
.dash-command-bar{padding:8px 12px!important;margin-bottom:10px;border-radius:13px!important}
.dash-kpi-pill{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;
  background:var(--bg3);border:1px solid var(--sep);color:var(--label2);
  font:600 11px var(--font);transition:all .15s;text-decoration:none;
}
.dash-kpi-pill b{font-weight:800;font-size:12px;color:var(--label)}
.dash-kpi-pill:hover{border-color:rgba(56,189,248,.45);color:var(--label)}
.dash-kpi-pill.hot-indigo{border-color:rgba(99,102,241,.45);background:rgba(99,102,241,.1);color:var(--indigo)}
.dash-kpi-pill.hot-red{border-color:rgba(239,68,68,.45);background:rgba(239,68,68,.1);color:var(--red)}
.dash-kpi-pill.hot-orange{border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.1);color:var(--orange)}
.dash-kpi-pill.on{background:var(--night-active-bg)!important;border-color:var(--night-active-border)!important;color:#38bdf8!important}
.dash-kpi-pill.on b{color:#fff!important}

.dash-fullwidth-list{display:flex;flex-direction:column;gap:10px;width:100%}
.dash-case-fullwidth{
  width:100%;padding:0!important;overflow:hidden;border-radius:15px!important;
  background:var(--bg2);border:1px solid var(--sep);box-shadow:var(--shadow-1);
  transition:box-shadow .15s,border-color .15s,transform .12s;
}
.dash-case-fullwidth:hover{border-color:rgba(56,189,248,.45);box-shadow:var(--shadow-2);transform:translateY(-1px)}
.dash-fw-grid{display:grid;grid-template-columns:190px minmax(0,1fr);gap:14px;padding:12px 14px;align-items:stretch}
.dash-fw-cover{
  position:relative;border-radius:11px;overflow:hidden;background:#050811;
  border:1px solid var(--sep);display:grid;place-items:center;min-height:145px;
}
.dash-fw-cover img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .25s ease}
.dash-fw-cover:hover img{transform:scale(1.04)}
.dash-thumb-count{
  position:absolute;bottom:7px;right:7px;background:rgba(5,12,26,.86);
  backdrop-filter:blur(6px);color:#fff;border-radius:7px;padding:2px 8px;font-size:11px;font-weight:700;
}
.dash-fw-body{min-width:0;display:flex;flex-direction:column;justify-content:space-between;gap:9px}
.dash-case-title{font-weight:800;font-size:15.5px;color:var(--label);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-case-title:hover{color:var(--blue)}

/* Brief Summary Description 2-Column Grid inside the Full-Width Card */
.dash-brief-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.dash-brief-box{
  padding:8px 11px;border-radius:10px;background:var(--bg3);border:1px solid var(--sep);
  display:flex;flex-direction:column;gap:3px;min-width:0;
}
.dash-brief-label{font-size:11px;font-weight:700;color:var(--label2);display:inline-flex;align-items:center;gap:5px}
.dash-brief-text{
  font-size:12.5px;line-height:1.38;color:var(--label);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.dash-brief-subtext{
  font-size:11.5px;line-height:1.32;color:var(--label2);
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
}

/* Miniature Gallery Strip & Actions inside the Full-Width Card */
.dash-gallery-bar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding-top:8px;border-top:1px solid var(--sep);
}
.dash-mini-gallery{display:flex;align-items:center;gap:7px;overflow-x:auto;max-width:100%;padding-bottom:2px}
.dash-gal-item{
  position:relative;width:86px;height:62px;border-radius:8px;overflow:hidden;
  border:1px solid var(--sep);background:#050811;flex:none;display:block;
  transition:transform .14s,border-color .14s,box-shadow .14s;
}
.dash-gal-item:hover{transform:translateY(-2px);border-color:#38bdf8;box-shadow:0 4px 12px rgba(2,132,199,.25)}
.dash-gal-item img{width:100%;height:100%;object-fit:cover;display:block}
.dash-gal-stage{
  position:absolute;top:3px;left:3px;background:rgba(5,12,26,.82);color:#38bdf8;
  font-size:8.5px;font-weight:800;padding:1px 4px;border-radius:4px;line-height:1.1;
}
.dash-gal-badge{
  position:absolute;top:3px;right:3px;width:16px;height:16px;border-radius:4px;
  display:grid;place-items:center;font-size:9px;color:#fff;
}
.dash-gal-badge.ceph{background:rgba(16,185,129,.9)}
.dash-gal-badge.dicom{background:rgba(2,132,199,.9)}
.dash-gal-cap{
  position:absolute;inset:auto 0 0 0;background:linear-gradient(transparent,rgba(2,6,23,.92));
  color:#f8fafc;font-size:8.5px;font-weight:600;padding:8px 4px 2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;
}
.dash-gal-add{
  width:68px;height:62px;border-radius:8px;border:1.5px dashed var(--blue);
  background:var(--bg3);color:var(--blue);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;font-size:10px;font-weight:700;flex:none;
  transition:all .15s;
}
.dash-gal-add i{font-size:14px}
.dash-gal-add:hover{background:var(--night-active-bg);color:#38bdf8;border-color:#38bdf8}

/* ---- Administrator Cockpit (Full-Viewport High-Density Multi-Column Grid) ---- */
.admin-command-bar{padding:8px 12px!important;margin-bottom:10px;border-radius:13px!important}
.admin-kpi-strip{
  display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;
  margin-top:8px;padding-top:8px;border-top:1px solid var(--sep);
}
.akpi{
  display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:10px;
  background:var(--bg3);border:1px solid var(--sep);min-width:0;
}
.akpi-ic{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-size:14px;flex:none}
.akpi-ic.blue{background:rgba(14,165,233,.14);color:var(--blue)}
.akpi-ic.green{background:rgba(16,185,129,.14);color:var(--green)}
.akpi-ic.indigo{background:rgba(99,102,241,.14);color:var(--indigo)}
.akpi-ic.orange{background:rgba(245,158,11,.15);color:var(--orange)}
.akpi div{min-width:0}
.akpi b{display:block;font-size:14px;font-weight:800;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.akpi b small{font-size:10.5px;font-weight:600;color:var(--label2)}
.akpi span{display:block;font-size:10px;color:var(--label3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.admin-3col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start}
.admin-2col-dock{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:10px;align-items:start}
.admin-2col-equal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:start}
.admin-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.admin-col>.card{padding:11px 13px}
.admin-user-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:8px}
.admin-user-card{
  padding:10px 12px;border-radius:12px;background:var(--bg3);border:1px solid var(--sep);
  transition:border-color .15s,box-shadow .15s;
}
.admin-user-card:hover{border-color:rgba(56,189,248,.4);box-shadow:var(--shadow-1)}
.admin-user-card.is-off{opacity:.62}

@media (max-width:1280px){
  .admin-kpi-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .admin-3col{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .dash-brief-grid,.admin-2col-dock,.admin-2col-equal,.admin-3col{grid-template-columns:1fr!important}
  .admin-kpi-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:680px){
  .dash-fw-grid{grid-template-columns:1fr}
  .dash-fw-cover{height:150px}
  .admin-kpi-strip{grid-template-columns:1fr}
}

/* ---- Triage Strip & Case Cards (Dashboard) ---- */
.triage{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:10px}
.triage-i{display:flex;align-items:center;gap:10px;background:var(--bg2);border:1px solid var(--sep);border-radius:var(--r-md);padding:9px 13px;color:var(--label);box-shadow:var(--shadow-1);transition:transform .12s,box-shadow .15s,border-color .15s,background .15s}
.triage-i:hover{transform:translateY(-1px);box-shadow:var(--shadow-2);border-color:rgba(56,189,248,.45)}
.triage-ic{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:15px;flex:none}
.triage-ic.blue{background:rgba(14,165,233,.14);color:var(--blue)}
.triage-ic.red{background:rgba(239,68,68,.14);color:var(--red)}
.triage-ic.orange{background:rgba(245,158,11,.15);color:var(--orange)}
.triage-ic.green{background:rgba(16,185,129,.14);color:var(--green)}
.triage-ic.indigo{background:rgba(99,102,241,.14);color:var(--indigo)}
.triage-i b{font-size:19px;font-weight:800;line-height:1.05;display:block}
.triage-i span{font-size:11.5px;color:var(--label2);font-weight:600;line-height:1.15}
.triage-i.on{background:var(--night-active-bg)!important;border-color:var(--night-active-border)!important;color:#fff!important;box-shadow:0 4px 14px rgba(2,8,23,.25)}
.triage-i.on span{color:#bae6fd!important}
.case-card{border-radius:var(--r-lg)}
.case-card.stripe-red{border-top:3px solid var(--red);box-shadow:inset 3px 0 0 var(--red),var(--card-sheen),var(--shadow-1)}
.case-card.stripe-orange{border-top:3px solid var(--orange);box-shadow:inset 3px 0 0 var(--orange),var(--card-sheen),var(--shadow-1)}
.case-card.stripe-green{border-top:3px solid var(--green);box-shadow:inset 3px 0 0 var(--green),var(--card-sheen),var(--shadow-1)}
.case-card.stripe-blue{border-top:3px solid var(--blue);box-shadow:inset 3px 0 0 var(--blue),var(--card-sheen),var(--shadow-1)}
html[data-theme="dark"] .case-cover{background:linear-gradient(135deg,#091933,#0f294d)}
.thumb{border-radius:var(--r-md)}

/* ---- Dashboard Live Search Box, Upload Dropzone & Evolution Comparator Studio ---- */
.dash-search-form{display:flex;align-items:center;position:relative}
.dash-search-icon{position:absolute;left:10px;color:var(--blue);font-size:12.5px;pointer-events:none;z-index:2;opacity:.85}
.dash-search-input{box-shadow:inset 0 0 0 1px var(--sep)!important;transition:box-shadow .15s,background .15s}
.dash-search-input:focus{box-shadow:inset 0 0 0 1.8px var(--blue),0 0 0 3px rgba(14,165,233,.16)!important;background:var(--bg2)!important}
.dash-search-clear{
  position:absolute;right:7px;width:20px;height:20px;border-radius:50%;
  border:0;background:var(--fill);color:var(--label2);font-size:10px;font-weight:700;
  cursor:pointer;display:grid;place-items:center;transition:all .15s;
}
.dash-search-clear:hover{background:var(--red);color:#fff}
.dash-search-kbd{
  position:absolute;right:8px;padding:1px 6px;border-radius:5px;
  background:var(--bg2);border:1px solid var(--sep);color:var(--label3);
  font:700 10px var(--mono);pointer-events:none;line-height:1.3;
}

.upload-dropzone{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border:2px dashed rgba(56,189,248,.45);border-radius:14px;background:var(--bg3);
  padding:22px 16px;text-align:center;cursor:pointer;transition:all .18s;
}
.upload-dropzone:hover,.upload-dropzone.is-dragover{
  border-color:var(--blue);background:var(--blue-light);
  transform:translateY(-1px);box-shadow:0 8px 24px rgba(14,165,233,.14);
}
.upload-dropzone-icon{font-size:28px;color:var(--blue);line-height:1}
.upload-dropzone-title{font-weight:700;font-size:13px;color:var(--label)}

.cmp-studio{
  max-height:calc(100vh - 220px);min-height:420px;border-radius:16px!important;
  border:1px solid var(--sep);box-shadow:var(--shadow-2);background:#040812!important;
}
.cmp-corner-tag{
  position:absolute;top:12px;z-index:10;padding:4px 10px;border-radius:8px;
  font:700 11.5px var(--font);color:#fff;backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.18);pointer-events:none;
}
.cmp-corner-tag.left{left:12px;background:rgba(2,132,199,.82)}
.cmp-corner-tag.right{right:12px;background:rgba(5,150,105,.82)}
.cmp-side-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cmp-side-card{
  position:relative;border-radius:16px;overflow:hidden;background:#040812;
  border:1px solid var(--sep);box-shadow:var(--shadow-1);display:grid;place-items:center;
  min-height:380px;max-height:calc(100vh - 190px);
}
.cmp-side-card img{width:100%;height:100%;max-height:calc(100vh - 190px);object-fit:contain;display:block}
@media (max-width:760px){.cmp-side-grid{grid-template-columns:1fr}}

/* ---- Clinical Reference Grid Overlay on Comparator ---- */
.cmp-ref-grid{
  position:absolute;inset:0;z-index:8;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(56,189,248,.16) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(56,189,248,.16) 1px,transparent 1px),
    linear-gradient(to right,transparent calc(50% - 1px),rgba(251,191,36,.75) 50%,transparent calc(50% + 1px)),
    linear-gradient(to bottom,transparent calc(50% - 1px),rgba(52,211,153,.75) 50%,transparent calc(50% + 1px));
  background-size:10% 10%,10% 10%,100% 100%,100% 100%;
}

/* ---- Interactive FDI Dental Arch Odontogram (case_new.php) ---- */
.fdi-arch-panel{
  background:var(--bg3);border:1px solid var(--sep);border-radius:12px;
  padding:10px 12px;margin-top:8px;
}
.fdi-arch-row{display:flex;align-items:center;gap:6px}
.fdi-arch-lbl{font:800 9.5px var(--mono);color:var(--label3);width:34px;flex:none;letter-spacing:.04em}
.fdi-teeth-strip{display:flex;align-items:center;gap:3px;flex:1;overflow-x:auto;padding-bottom:2px}
.fdi-midline{width:2px;height:22px;background:var(--blue);opacity:.55;margin:0 3px;flex:none;border-radius:2px}
.fdi-tooth{
  flex:1;min-width:24px;height:26px;border-radius:6px;border:1px solid var(--sep);
  background:var(--bg2);color:var(--label2);font:700 10.5px var(--mono);
  cursor:pointer;padding:0;display:grid;place-items:center;transition:all .14s;
}
.fdi-tooth:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-1px)}
.fdi-tooth.is-selected{
  background:var(--night-active-bg)!important;color:#38bdf8!important;
  border-color:var(--night-active-border)!important;
  box-shadow:0 2px 8px rgba(14,165,233,.28);transform:translateY(-1px);
}

/* ---- Cephalometric Norm-Deviation Visual Gauges & Chat Attachment Chip ---- */
.ceph-norm-cell{display:flex;flex-direction:column;gap:3px;min-width:92px}
.ceph-gauge{
  position:relative;height:6px;border-radius:99px;background:var(--bg3);
  border:1px solid var(--sep);overflow:hidden;
}
.ceph-gauge-zone{
  position:absolute;top:0;bottom:0;left:32%;width:36%;
  background:rgba(16,185,129,.22);border-left:1px dashed rgba(16,185,129,.5);border-right:1px dashed rgba(16,185,129,.5);
}
.ceph-gauge-dot{
  position:absolute;top:50%;width:7px;height:7px;border-radius:50%;
  transform:translate(-50%,-50%);box-shadow:0 0 4px rgba(0,0,0,.4);
}
.ceph-gauge-dot.green{background:#10b981}
.ceph-gauge-dot.orange{background:#f59e0b}
.ceph-gauge-dot.red{background:#ef4444}
.ceph-gauge-dot.blue{background:#0ea5e9}

.chat-attached-chip{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:5px 10px;margin-bottom:6px;border-radius:9px;
  background:var(--blue-light);border:1px solid rgba(56,189,248,.38);
  font-size:11.5px;color:var(--label);animation:up .15s;
}
.chat-attached-chip button{
  border:0;background:transparent;color:var(--label2);cursor:pointer;
  font-size:11px;padding:0 3px;line-height:1;
}
.chat-attached-chip button:hover{color:var(--red)}

/* ---- Dashboard Cover Time-Lapse Stage Badge & Inline Quick-Reply Drawer ---- */
.dash-cover-stage-tag{
  position:absolute;top:8px;right:8px;z-index:3;
  background:rgba(4,15,36,.88);color:#38bdf8;border:1px solid rgba(56,189,248,.42);
  padding:2px 8px;border-radius:6px;font:700 10.5px var(--font);
  backdrop-filter:blur(6px);pointer-events:none;
}
.dash-inline-reply{
  margin-top:8px;padding:10px 12px;border-radius:11px;
  background:var(--bg3);border:1px solid rgba(56,189,248,.32);
  animation:up .16s;
}

/* ---- Global Clinical Command Palette (Ctrl+K / ⌘K) ---- */
.cmd-trigger-btn{
  display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;
  border-radius:9px;border:1px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.07);color:rgba(255,255,255,.88);
  font:600 12px var(--font);cursor:pointer;transition:all .15s;
}
.cmd-trigger-btn:hover{background:rgba(255,255,255,.14);border-color:rgba(56,189,248,.5);color:#fff}
.cmd-trigger-btn kbd{
  padding:1px 5px;border-radius:4px;background:rgba(4,10,22,.55);
  border:1px solid rgba(255,255,255,.16);color:#7dd3fc;font:700 10px var(--mono);
}
.cmd-backdrop{
  position:fixed;inset:0;z-index:1300;background:rgba(2,8,23,.68);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:flex-start;justify-content:center;padding:9vh 16px 20px;
}
.cmd-modal{
  width:100%;max-width:580px;background:var(--bg2);color:var(--label);
  border-radius:18px;border:1px solid var(--sep);
  box-shadow:0 24px 60px rgba(2,6,23,.55),inset 0 1px 0 rgba(255,255,255,.12);
  overflow:hidden;animation:up .16s;
}
.cmd-search-bar{
  display:flex;align-items:center;gap:10px;padding:13px 16px;
  border-bottom:1px solid var(--sep);background:var(--bg3);
}
.cmd-search-bar i{font-size:16px}
.cmd-search-input{
  flex:1;border:0;background:transparent;color:var(--label);
  font:600 14.5px var(--font);outline:none;
}
.cmd-esc-badge{
  padding:3px 7px;border-radius:6px;background:var(--bg2);
  border:1px solid var(--sep);color:var(--label2);font:700 10.5px var(--mono);cursor:pointer;
}
.cmd-results{max-height:360px;overflow-y:auto;padding:8px}
.cmd-group-label{
  font:800 10px var(--font);text-transform:uppercase;letter-spacing:.06em;
  color:var(--label3);padding:6px 10px 4px;
}
.cmd-item{
  width:100%;border:0;background:transparent;text-align:left;
  display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:11px;
  color:var(--label)!important;cursor:pointer;transition:background .12s,color .12s;
}
.cmd-item:hover,.cmd-item.is-active{
  background:var(--night-active-bg)!important;color:#fff!important;
  box-shadow:inset 0 0 0 1px var(--night-active-border);
}
.cmd-item-ic{
  width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  font-size:14px;flex:none;
}
.cmd-item-ic.blue{background:rgba(14,165,233,.15);color:var(--blue)}
.cmd-item-ic.green{background:rgba(16,185,129,.15);color:var(--green)}
.cmd-item-ic.indigo{background:rgba(99,102,241,.15);color:var(--indigo)}
.cmd-item-ic.orange{background:rgba(245,158,11,.15);color:var(--orange)}
.cmd-item-ic.red{background:rgba(239,68,68,.15);color:var(--red)}
.cmd-item-body{flex:1;min-width:0}
.cmd-item-body b{display:block;font-size:13px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmd-item-body small{display:block;font-size:11px;color:var(--label2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmd-item:hover .cmd-item-body small,.cmd-item.is-active .cmd-item-body small{color:#bae6fd}
.cmd-item kbd{
  padding:2px 6px;border-radius:5px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);font:700 10px var(--mono);color:var(--label2);
}
.cmd-item.is-active kbd{color:#38bdf8;border-color:rgba(56,189,248,.4)}
.cmd-footer{
  display:flex;align-items:center;justify-content:flex-end;gap:14px;
  padding:8px 14px;background:var(--bg3);border-top:1px solid var(--sep);
  font-size:11px;color:var(--label2);
}
.cmd-footer kbd{
  padding:1px 5px;border-radius:4px;background:var(--bg2);
  border:1px solid var(--sep);font:700 10px var(--mono);
}

/* ---- Studio Case Filmstrip Switcher & 2.5x Diagnostic Loupe (image.php) ---- */
.studio-filmstrip{
  display:flex;align-items:center;gap:5px;overflow-x:auto;
  padding:4px 8px;margin-bottom:6px;border-radius:10px;
  background:var(--bg2);border:1px solid var(--sep);
  scrollbar-width:thin;
}
.studio-film-pill{
  display:inline-flex;align-items:center;gap:5px;padding:3px 9px;
  border-radius:8px;border:1px solid var(--sep);background:var(--bg3);
  color:var(--label2)!important;font:600 11.5px var(--font);
  white-space:nowrap;text-decoration:none;transition:all .14s;
}
.studio-film-pill:hover{border-color:var(--blue);color:var(--blue)!important}
.studio-film-pill.on{
  background:var(--night-active-bg)!important;color:#fff!important;
  border-color:var(--night-active-border)!important;
  box-shadow:0 2px 8px rgba(14,165,233,.25);
}
.viewer-loupe{
  position:absolute;width:170px;height:170px;border-radius:50%;
  overflow:hidden;pointer-events:none;z-index:12;
  transform:translate(-50%,-50%);
  border:2px solid #38bdf8;
  box-shadow:0 12px 32px rgba(0,0,0,.65),inset 0 0 14px rgba(56,189,248,.35);
  background:#020610;
}
.viewer-loupe img{
  position:absolute;max-width:none;max-height:none;pointer-events:none;user-select:none;
}

/* ---- 6-Axis SVG Cephalometric Harmony Radar (case.php) ---- */
.ceph-radar-box{
  background:var(--bg3);border:1px solid var(--sep);border-radius:10px;
  padding:6px 8px 5px;margin-bottom:6px;text-align:center;color:var(--label2);
}
.ceph-radar-svg{width:100%;max-height:142px;display:block;margin:0 auto}
.ceph-radar-legend{
  display:flex;justify-content:center;gap:14px;font-size:10px;color:var(--label2);
  margin-top:2px;
}
.ceph-radar-legend span{display:inline-flex;align-items:center;gap:4px}
.ceph-radar-legend i{width:8px;height:8px;border-radius:50%;display:inline-block}

/* ==================== WAVE 4: GLOBAL LUXURY MEDICAL PRECISION & SPATIAL GLASS ==================== */
/* 1. Ambient Bioluminescent Mesh Backdrop */
body{
  background-image:
    radial-gradient(900px 420px at 8% -5%,rgba(14,165,233,.07),transparent 65%),
    radial-gradient(800px 380px at 94% 4%,rgba(16,185,129,.06),transparent 65%);
  background-attachment:fixed;
}
html[data-theme="dark"] body{
  background-image:
    radial-gradient(1000px 480px at 10% -6%,rgba(14,165,233,.14),transparent 65%),
    radial-gradient(850px 440px at 92% 6%,rgba(16,185,129,.10),transparent 65%),
    radial-gradient(700px 420px at 50% 100%,rgba(99,102,241,.08),transparent 70%);
}
.page{background:transparent!important}

/* 2. Top Navigation Bar Luminous Hairline & Command Bar Top Accent */
nav.nav{
  border-bottom:1px solid rgba(56,189,248,.22)!important;
  box-shadow:0 8px 32px rgba(2,6,23,.28),inset 0 -1px 0 rgba(56,189,248,.16)!important;
}
.dash-command-bar,.admin-command-bar,.cockpit-header{
  position:relative;
  overflow:hidden;
  border-top:2px solid rgba(14,165,233,.45)!important;
}
html[data-theme="dark"] .dash-command-bar,
html[data-theme="dark"] .admin-command-bar,
html[data-theme="dark"] .cockpit-header{
  background:linear-gradient(180deg,rgba(12,26,52,.95),rgba(8,20,40,.95))!important;
  border-top-color:rgba(56,189,248,.62)!important;
}

/* 3. Dashboard Case Brief Boxes with Semantic Left Accent Bars */
.dash-brief-box:first-child{
  border-left:3px solid var(--blue);
}
.dash-brief-box:last-child{
  border-left:3px solid var(--indigo);
}
html[data-theme="dark"] .dash-case-fullwidth{
  background:linear-gradient(165deg,#09172e 0%,#071224 100%);
}

/* 4. Treatment Stage Milestone Stepper (T0 -> T1 -> T2 -> T3 -> RET) */
.stage-stepper{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(102px,1fr));gap:6px;
  margin-bottom:8px;flex:0 0 auto;
}
.stage-step{
  display:flex;align-items:center;justify-content:space-between;gap:5px;
  padding:5px 9px;border-radius:9px;background:var(--bg3);
  border:1px solid var(--sep);opacity:.68;transition:all .16s cubic-bezier(.4,0,.2,1);
  cursor:pointer;text-align:left;font-family:inherit;position:relative;overflow:hidden;
}
.stage-step:hover{opacity:1;border-color:var(--blue);transform:translateY(-1px);box-shadow:0 4px 12px rgba(2,132,199,.14)}
.stage-step.has-items{
  opacity:1;border-color:rgba(56,189,248,.42);
  background:linear-gradient(135deg,rgba(14,165,233,.13),var(--bg3));
}
.stage-step.is-active{
  opacity:1;border-color:#38bdf8;
  background:linear-gradient(135deg,rgba(2,132,199,.32),rgba(14,165,233,.16));
  box-shadow:0 0 0 2px rgba(56,189,248,.32),0 6px 16px rgba(2,132,199,.22);
}
.stage-code{font-size:10px;font-weight:800;color:var(--blue)}
.stage-name{font-size:10px;font-weight:600;color:var(--label2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stage-cnt{
  min-width:17px;height:17px;border-radius:99px;background:var(--bg2);
  border:1px solid var(--sep);font:700 9.5px var(--mono);color:var(--label);
  display:grid;place-items:center;padding:0 4px;
}
.stage-step.has-items .stage-cnt{
  background:rgba(14,165,233,.2);border-color:rgba(56,189,248,.45);color:var(--blue);
}
@media (max-width:560px){.stage-name{display:none}}

/* 5. Auth Portal Feature Showcase Chips */
.auth-feature-grid{
  display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-top:12px;
}
.auth-feat-chip{
  display:inline-flex;align-items:center;gap:5px;padding:4px 10px;
  border-radius:999px;background:rgba(15,23,42,.72);
  border:1px solid rgba(148,163,184,.22);color:#e2e8f0;
  font-size:11px;font-weight:600;backdrop-filter:blur(8px);
}

/* 6. Refined Custom Scrollbars Globally */
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--fill2);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--blue)}

/* 7. Wave 5 Inspector Quick Optics, FDI Inline Tooth Badges & Compact Dashboard Mode */
.inspector-stage{position:relative}
.insp-quick-optics{
  position:absolute;left:8px;bottom:8px;display:flex;gap:4px;z-index:10;
  background:rgba(4,10,20,0.75);backdrop-filter:blur(8px);
  border:1px solid rgba(56,189,248,0.28);border-radius:999px;padding:3px 5px;
}
.insp-optic-btn{
  border:0;background:transparent;color:#cbd5e1;font-size:10.5px;font-weight:700;
  padding:3px 8px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;
  transition:all .15s;
}
.insp-optic-btn:hover{color:#fff;background:rgba(255,255,255,0.1)}
.insp-optic-btn.on{background:#0284c7;color:#fff;box-shadow:0 0 10px rgba(14,165,233,0.45)}
@media (max-width:560px){.insp-optic-btn span{display:none}}

.fdi-inline-pill{
  display:inline-flex;align-items:center;gap:2px;padding:1px 6px;border-radius:6px;
  font:800 11px var(--mono);background:rgba(14,165,233,0.16);color:#38bdf8;
  border:1px solid rgba(56,189,248,0.38);margin:0 1px;
}
.bubble-mine .fdi-inline-pill{
  background:rgba(255,255,255,0.22);color:#fff;border-color:rgba(255,255,255,0.45);
}

#caseGrid.is-compact .dash-brief-grid{display:none}
#caseGrid.is-compact .dash-fw-cover{width:110px;min-height:86px;max-height:96px}
#caseGrid.is-compact .dash-case-fullwidth{padding:8px 12px}

/* 8. Interactive Clinical Onboarding & Workflow Assistant Modal */
.onboard-backdrop{
  position:fixed;inset:0;z-index:2200;
  background:rgba(4,10,22,0.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.onboard-backdrop.hidden{display:none!important}
.onboard-modal{
  width:100%;max-width:780px;max-height:90vh;
  background:var(--bg2);color:var(--label);
  border:1px solid rgba(56,189,248,0.32);border-radius:18px;
  box-shadow:0 24px 70px rgba(0,0,0,0.45),0 0 0 1px rgba(255,255,255,0.06) inset;
  display:flex;flex-direction:column;overflow:hidden;animation:up .22s ease-out;
}
.onboard-head{
  padding:16px 20px;background:linear-gradient(135deg,rgba(14,165,233,0.14),rgba(99,102,241,0.1));
  border-bottom:1px solid var(--sep);display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.onboard-ai-avatar{
  width:44px;height:44px;border-radius:13px;flex-shrink:0;
  background:linear-gradient(135deg,#0ea5e9,#6366f1);color:#fff;
  display:grid;place-items:center;font-size:21px;
  box-shadow:0 8px 20px rgba(14,165,233,0.35);
}
.onboard-badge{
  display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;
  font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  background:rgba(16,185,129,0.16);color:#34d399;border:1px solid rgba(52,211,153,0.35);
}
.onboard-title{margin:3px 0 0;font-size:17px;font-weight:800;letter-spacing:-.01em}
.onboard-close-btn{
  width:32px;height:32px;border-radius:9px;border:1px solid var(--sep);
  background:var(--bg3);color:var(--label2);cursor:pointer;font-size:14px;font-weight:700;
  display:grid;place-items:center;transition:all .15s;
}
.onboard-close-btn:hover{background:var(--red);color:#fff;border-color:var(--red)}

.onboard-stepper{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
  padding:10px 18px;background:var(--bg3);border-bottom:1px solid var(--sep);
}
.onboard-tab{
  border:1px solid var(--sep);background:var(--bg2);color:var(--label2);
  border-radius:10px;padding:7px 10px;font-size:12px;font-weight:700;
  display:flex;align-items:center;gap:7px;cursor:pointer;transition:all .15s;text-align:left;
}
.onboard-tab:hover{border-color:var(--blue);color:var(--label)}
.onboard-tab.is-active{
  background:linear-gradient(135deg,rgba(14,165,233,0.18),rgba(99,102,241,0.16));
  border-color:var(--blue);color:var(--label);box-shadow:0 3px 10px rgba(14,165,233,0.15);
}
.onboard-step-num{
  width:21px;height:21px;border-radius:99px;background:var(--fill2);color:var(--label2);
  display:grid;place-items:center;font:800 11px var(--mono);flex-shrink:0;
}
.onboard-tab.is-active .onboard-step-num{background:var(--blue);color:#fff}

.onboard-body{padding:18px 20px;overflow-y:auto;flex:1}
.onboard-pane{display:none;animation:up .18s ease-out}
.onboard-pane.is-active{display:block}

.onboard-assistant-msg{
  display:flex;gap:12px;align-items:flex-start;
  padding:12px 14px;border-radius:13px;
  background:linear-gradient(135deg,rgba(14,165,233,0.1),rgba(56,189,248,0.04));
  border:1px solid rgba(56,189,248,0.28);margin-bottom:14px;
}
.onboard-bot-ic{
  width:34px;height:34px;border-radius:10px;background:rgba(14,165,233,0.2);color:#38bdf8;
  display:grid;place-items:center;font-size:17px;flex-shrink:0;
}
.onboard-assistant-msg b{font-size:13.5px;display:block;margin-bottom:3px;color:var(--label)}
.onboard-assistant-msg p{margin:0;font-size:12.5px;color:var(--label2);line-height:1.45}

.onboard-cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.onboard-cards-grid.three{grid-template-columns:repeat(3,1fr)}
.onboard-feature-card{
  background:var(--bg3);border:1px solid var(--sep);border-radius:13px;padding:12px 14px;
}
.onboard-fc-head{display:flex;align-items:center;gap:10px}
.onboard-fc-head b{display:block;font-size:13px;color:var(--label)}
.onboard-fc-head small{display:block;font-size:11px;color:var(--label2)}
.onboard-fc-icon{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:16px;flex-shrink:0;
}
.onboard-fc-icon.blue{background:rgba(14,165,233,0.18);color:#38bdf8}
.onboard-fc-icon.indigo{background:rgba(99,102,241,0.18);color:#818cf8}
.onboard-fc-icon.green{background:rgba(16,185,129,0.18);color:#34d399}
.onboard-fc-icon.orange{background:rgba(245,158,11,0.18);color:#fbbf24}

.onboard-stage-strip{
  display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap;
  background:var(--bg3);border:1px solid var(--sep);border-radius:11px;padding:8px 12px;margin-bottom:12px;
}
.onboard-stage-pill{
  font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:8px;
  background:var(--bg2);border:1px solid var(--sep);color:var(--label2);
}
.onboard-stage-pill.active{
  background:rgba(14,165,233,0.16);border-color:rgba(56,189,248,0.4);color:#38bdf8;
}
.onboard-demo-code{
  display:flex;align-items:center;justify-content:space-between;gap:6px;
  background:var(--bg2);border:1px dashed var(--sep);border-radius:8px;padding:6px 10px;
}

/* Simulated Clinical Chat Exchange inside Onboarding Step 4 */
.onboard-chat-demo{
  background:var(--bg3);border:1px solid var(--sep);border-radius:14px;padding:12px 14px;
  display:flex;flex-direction:column;gap:10px;
}
.onboard-chat-header{
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;
  padding-bottom:8px;border-bottom:1px solid var(--sep);
}
.onboard-msg{display:flex;flex-direction:column;gap:4px;max-width:92%}
.onboard-msg-left{align-self:flex-start}
.onboard-msg-right{align-self:flex-end}
.onboard-msg-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11.5px}
.onboard-avatar-sm{
  width:22px;height:22px;border-radius:99px;font-size:10px;font-weight:800;color:#fff;
  display:inline-grid;place-items:center;
}
.onboard-avatar-sm.blue{background:#0284c7}
.onboard-avatar-sm.green{background:#059669}
.onboard-linked-img{
  display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:99px;
  background:rgba(14,165,233,0.14);color:#38bdf8;font-size:10.5px;font-weight:700;
}
.onboard-msg-bubble{
  background:var(--bg2);border:1px solid var(--sep);border-radius:12px;padding:10px 12px;
  font-size:12.5px;line-height:1.48;color:var(--label);
}
.onboard-msg-bubble.consultant{
  background:linear-gradient(135deg,rgba(16,185,129,0.12),rgba(14,165,233,0.08));
  border-color:rgba(52,211,153,0.35);
}
.onboard-ceph-embed{
  margin:6px 0;padding:6px 10px;border-radius:8px;
  background:rgba(14,165,233,0.12);border-left:3px solid #38bdf8;
  font:600 11.5px var(--mono);color:var(--label);
}

.onboard-foot{
  padding:12px 20px;background:var(--bg3);border-top:1px solid var(--sep);
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;
}
.onboard-dontshow{
  display: inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;
  color:var(--label2);cursor:pointer;user-select:none;
}
.onboard-dontshow input{width:16px;height:16px;accent-color:var(--blue);cursor:pointer}

@media (max-width:680px){
  .onboard-stepper{grid-template-columns:repeat(2,1fr)}
  .onboard-cards-grid,.onboard-cards-grid.three{grid-template-columns:1fr}
  .onboard-foot{flex-direction:column;align-items:stretch}
}

.onboard-svg-banner{
  margin-bottom:12px;border-radius:13px;overflow:hidden;
  border:1px solid rgba(56,189,248,0.28);
  box-shadow:0 10px 26px rgba(2,8,23,0.32),0 0 0 1px rgba(255,255,255,0.04) inset;
}

/* 9. Split Medical Workstation Graphic Showcase (Login Portal & Clinical Graphics) */
.auth-shell{
  width:100%;max-width:1040px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
}
.auth-brand-hero{
  width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;gap:8px;padding:2px 12px;
}
.auth-brand-hero .auth-logo{margin:0 auto 2px!important}
.auth-brand-pills{
  display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
}
.auth-brand-title{
  margin:0;font-size:17px;font-weight:800;letter-spacing:-.015em;
  color:#e2e8f0;text-align:center;
}
.auth-split-showcase{
  width:100%;max-width:1040px;margin:0 auto;
  display:grid;grid-template-columns:1.12fr 0.94fr;gap:22px;
  align-items:stretch;justify-content:center;
}
.auth-graphic-panel{
  background:linear-gradient(145deg,rgba(6,17,36,0.94),rgba(10,28,58,0.9));
  border:1px solid rgba(56,189,248,0.28);border-radius:22px;padding:20px;
  box-shadow:0 28px 65px rgba(2,6,23,0.55),inset 0 1px 0 rgba(255,255,255,0.08);
  display:flex;flex-direction:column;justify-content:space-between;gap:14px;
  backdrop-filter:blur(16px);height:100%;
}
.auth-gp-top{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.auth-svg-stage{
  flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  border-radius:16px;overflow:hidden;border:1px solid rgba(56,189,248,0.22);
  background:#040b18;box-shadow:inset 0 0 30px rgba(14,165,233,0.08);
}
.auth-ceph-svg{width:100%;height:auto;max-height:310px;display:block}
.auth-gp-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.auth-gp-card{
  display:flex;align-items:center;gap:10px;padding:11px 13px;
  border-radius:13px;background:rgba(15,32,64,0.68);border:1px solid rgba(148,163,184,0.2);
}
.auth-gp-card b{display:block;font-size:12px;color:#f8fafc}
.auth-gp-card small{display:block;font-size:10.5px;color:#94a3b8;line-height:1.28}
.auth-gp-ic{
  width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:16px;flex-shrink:0;
}
.auth-gp-ic.cyan{background:rgba(14,165,233,0.2);color:#38bdf8}
.auth-gp-ic.emerald{background:rgba(16,185,129,0.2);color:#34d399}

.auth-login-panel{
  background:linear-gradient(145deg,rgba(6,17,36,0.94),rgba(10,28,58,0.9));
  border:1px solid rgba(56,189,248,0.28);border-radius:22px;padding:22px;
  box-shadow:0 28px 65px rgba(2,6,23,0.55),inset 0 1px 0 rgba(255,255,255,0.08);
  display:flex;flex-direction:column;justify-content:space-between;gap:14px;
  backdrop-filter:blur(16px);height:100%;width:100%;
}
.auth-login-head{
  text-align:center;padding:2px 6px;
}
.auth-login-title{
  margin:0;font-size:24px;font-weight:800;letter-spacing:-.02em;color:#ffffff;
}
.auth-login-sub{
  margin:5px 0 0;font-size:13px;color:#94a3b8;line-height:1.4;
}
.auth-login-panel .auth-card{
  flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;
  margin:0!important;padding:22px 24px!important;border-radius:18px!important;
}
.auth-login-panel .auth-card-sub{
  margin:0!important;padding:13px 18px!important;border-radius:15px!important;
}
.auth-login-panel .auth-trust-strip{
  margin-top:2px!important;padding-top:2px;justify-content:space-evenly;
}

@media (max-width:920px){
  .auth-split-showcase{grid-template-columns:1fr;max-width:460px}
  .auth-graphic-panel{display:none}
  .auth-brand-title{font-size:15px}
}

/* Stage Color-Coding on Gallery Thumbnails & PACS Viewport Accents */
.dash-gal-stage.stage-T0{background:rgba(2,132,199,0.92);color:#fff}
.dash-gal-stage.stage-T1{background:rgba(79,70,229,0.92);color:#fff}
.dash-gal-stage.stage-T2{background:rgba(5,150,105,0.92);color:#fff}
.dash-gal-stage.stage-T3{background:rgba(13,148,136,0.92);color:#fff}
.dash-gal-stage.stage-RET{background:rgba(217,119,6,0.92);color:#fff}

.dash-command-bar,.cockpit-header{
  background-image:
    radial-gradient(circle at 96% 12%,rgba(14,165,233,0.09),transparent 28%),
    radial-gradient(circle at 4% 88%,rgba(16,185,129,0.06),transparent 24%);
}

/* 10. Floating Side Odontogram Trigger & Interactive Case Odontogram Modal */
.case-odonto-side-btn{
  position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:1045;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:11px 7px;border-radius:0 14px 14px 0;
  border:1px solid rgba(56,189,248,0.45);border-left:0;
  background:linear-gradient(180deg,#082042,#0c2d5e);color:#fff;
  box-shadow:4px 8px 24px rgba(2,8,23,0.42),inset 0 1px 0 rgba(255,255,255,0.16);
  cursor:pointer;transition:all .18s cubic-bezier(.4,0,.2,1);
}
.case-odonto-side-btn:hover{
  padding-left:11px;background:linear-gradient(180deg,#0284c7,#0ea5e9);
  box-shadow:6px 10px 28px rgba(14,165,233,0.45);
}
.cosb-icon{
  width:28px;height:28px;border-radius:8px;background:rgba(56,189,248,0.2);
  color:#38bdf8;display:grid;place-items:center;font-size:15px;
}
.case-odonto-side-btn:hover .cosb-icon{background:rgba(255,255,255,0.22);color:#fff}
.cosb-label{
  writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);
  font:800 10.5px var(--font);letter-spacing:.08em;text-transform:uppercase;color:#e0f2fe;
}
.cosb-badge{
  min-width:19px;height:19px;border-radius:99px;padding:0 5px;
  background:#10b981;color:#fff;font:800 10px var(--mono);
  display:grid;place-items:center;box-shadow:0 2px 6px rgba(16,185,129,0.5);
}

.odonto-modal-sheet{
  max-width:960px!important;width:96vw;max-height:92vh;overflow-y:auto;
  border:1px solid rgba(56,189,248,0.38)!important;
}
.odonto-modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:10px;border-bottom:1px solid var(--sep);flex-wrap:nowrap;
}
.odonto-head-actions{
  display:flex;align-items:center;gap:6px;flex-shrink:0;margin-left:auto;
}
.insp-version-strip{
  display:flex;align-items:center;gap:5px;margin-top:8px;overflow-x:auto;
  padding-bottom:3px;flex-wrap:nowrap;scrollbar-width:thin;
}
.insp-version-strip .chip-btn{
  flex-shrink:0;white-space:nowrap;
}
.odonto-title-ic{
  width:40px;height:40px;border-radius:12px;
  background:linear-gradient(135deg,#0284c7,#6366f1);color:#fff;
  display:grid;place-items:center;font-size:19px;flex-shrink:0;
  box-shadow:0 6px 16px rgba(14,165,233,0.3);
}

.odonto-brush-bar{
  display:grid;grid-template-columns:repeat(5,1fr);gap:6px;
  margin:12px 0;padding:8px;border-radius:12px;background:var(--bg3);border:1px solid var(--sep);
}
.odonto-brush{
  border:1px solid var(--sep);background:var(--bg2);color:var(--label);
  border-radius:9px;padding:6px 9px;cursor:pointer;display:flex;align-items:center;gap:8px;
  text-align:left;transition:all .15s;
}
.odonto-brush b{display:block;font-size:11.5px;line-height:1.15}
.odonto-brush small{display:block;font-size:9.5px;color:var(--label2)}
.odonto-brush.is-active{
  border-color:var(--blue);background:var(--blue-light);
  box-shadow:0 0 0 2px rgba(14,165,233,0.22);
}
.ob-dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}
.ob-dot.target{background:#0ea5e9;box-shadow:0 0 8px rgba(14,165,233,0.6)}
.ob-dot.extract{background:#f43f5e;box-shadow:0 0 8px rgba(244,63,94,0.6)}
.ob-dot.impacted{background:#f59e0b;box-shadow:0 0 8px rgba(245,158,11,0.6)}
.ob-dot.tad{background:#8b5cf6;box-shadow:0 0 8px rgba(139,92,246,0.6)}
.ob-dot.resolved{background:#10b981;box-shadow:0 0 8px rgba(16,185,129,0.6)}

.odonto-workspace-grid{
  display:grid;grid-template-columns:330px minmax(0,1fr);gap:14px;align-items:stretch;
}
.odonto-svg-card{
  background:#050e1f;border:1px solid rgba(56,189,248,0.28);
  border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;
}
.odonto-arch-svg{width:100%;height:auto;display:block;margin:auto}
.odonto-svg-crown{
  fill:#0d2142;stroke:#294a80;stroke-width:1.6;transition:all .15s;
}
.odonto-svg-node:hover .odonto-svg-crown{stroke:#38bdf8;stroke-width:2.2}
.odonto-svg-lbl{
  fill:#94a3b8;font:800 8.5px var(--mono);pointer-events:none;user-select:none;
}

/* Status color states for both SVG arch nodes & Linear FDI cells */
.odonto-svg-node[data-status="target"] .odonto-svg-crown{fill:#0284c7;stroke:#7dd3fc;stroke-width:2.2}
.odonto-svg-node[data-status="extract"] .odonto-svg-crown{fill:#e11d48;stroke:#fda4af;stroke-width:2.2}
.odonto-svg-node[data-status="impacted"] .odonto-svg-crown{fill:#d97706;stroke:#fde68a;stroke-width:2.2}
.odonto-svg-node[data-status="tad"] .odonto-svg-crown{fill:#7c3aed;stroke:#ddd6fe;stroke-width:2.2}
.odonto-svg-node[data-status="resolved"] .odonto-svg-crown{fill:#059669;stroke:#6ee7b7;stroke-width:2.2}
.odonto-svg-node[data-status] .odonto-svg-lbl{fill:#ffffff}

.odonto-cell[data-status="target"],.fdi-tooth[data-status="target"]{background:linear-gradient(135deg,#0284c7,#0ea5e9)!important;color:#fff!important;border-color:#7dd3fc!important;box-shadow:0 2px 8px rgba(14,165,233,.35)!important}
.odonto-cell[data-status="extract"],.fdi-tooth[data-status="extract"]{background:linear-gradient(135deg,#be123c,#e11d48)!important;color:#fff!important;border-color:#fda4af!important;text-decoration:line-through;box-shadow:0 2px 8px rgba(225,29,72,.35)!important}
.odonto-cell[data-status="impacted"],.fdi-tooth[data-status="impacted"]{background:linear-gradient(135deg,#b45309,#d97706)!important;color:#fff!important;border-color:#fde68a!important;box-shadow:0 2px 8px rgba(217,119,6,.35)!important}
.odonto-cell[data-status="tad"],.fdi-tooth[data-status="tad"]{background:linear-gradient(135deg,#6d28d9,#7c3aed)!important;color:#fff!important;border-color:#ddd6fe!important;box-shadow:0 2px 8px rgba(124,58,237,.35)!important}
.odonto-cell[data-status="resolved"],.fdi-tooth[data-status="resolved"]{background:linear-gradient(135deg,#047857,#059669)!important;color:#fff!important;border-color:#6ee7b7!important;box-shadow:0 2px 8px rgba(5,150,105,.35)!important}
[data-fdi-brush].on{
  background:var(--night-active-bg)!important;
  color:#38bdf8!important;
  border-color:var(--night-active-border)!important;
  box-shadow:0 0 0 1.5px rgba(56,189,248,.38),0 3px 10px rgba(2,8,23,.25)!important;
}

/* 11. PACS Calibrated Viewport Canvas & ABO 8-View Composite Montage Polish */
.inspector-stage,.cmp-studio,.cmp-side-card{
  background-color:#030711!important;
  background-image:
    radial-gradient(circle at 50% 50%,rgba(14,165,233,0.07),transparent 72%),
    radial-gradient(rgba(56,189,248,0.13) 1px,transparent 1px)!important;
  background-size:100% 100%,18px 18px!important;
  box-shadow:inset 0 0 28px rgba(0,0,0,0.65)!important;
}
#aboCompositeBoard{
  background:linear-gradient(160deg,var(--bg3),var(--bg2))!important;
  border:1px solid rgba(56,189,248,0.32)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.06),0 10px 26px rgba(2,8,23,0.16)!important;
}
.abo-slot{
  transition:transform .16s cubic-bezier(.34,1.56,.64,1),border-color .16s,box-shadow .16s,background .16s!important;
}
.abo-slot.is-filled:hover{
  transform:translateY(-2px) scale(1.015);
  border-color:#38bdf8!important;
  box-shadow:0 8px 20px rgba(2,132,199,0.32)!important;
  z-index:2;
}
.abo-slot.is-empty:hover{
  transform:translateY(-2px);
  border-color:#38bdf8!important;
  background:rgba(14,165,233,0.1)!important;
  color:#38bdf8!important;
  box-shadow:0 6px 16px rgba(14,165,233,0.18)!important;
}
[data-abo-stage-btn].on,[data-cmp-pair-a].on,[data-diag-chip].on{
  background:var(--night-active-bg)!important;
  color:#38bdf8!important;
  border-color:var(--night-active-border)!important;
  box-shadow:0 0 0 1px rgba(56,189,248,.35),0 2px 8px rgba(2,8,23,.25)!important;
}

.odonto-matrix-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.odonto-presets-box{
  display:flex;align-items:center;gap:5px;flex-wrap:wrap;
  padding:8px 10px;border-radius:10px;background:var(--bg3);border:1px solid var(--sep);
}
.odonto-summary-card{
  padding:10px 12px;border-radius:11px;
  background:linear-gradient(135deg,rgba(14,165,233,0.1),rgba(99,102,241,0.06));
  border:1px solid rgba(56,189,248,0.32);
}
.odonto-live-summary{
  font-size:12.5px;line-height:1.45;color:var(--label);font-weight:600;
}
.fdi-inline-pill{cursor:pointer;transition:transform .12s,box-shadow .12s}
.fdi-inline-pill:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(14,165,233,0.35)}

@media (max-width:820px){
  .odonto-modal-head{flex-wrap:wrap}
  .odonto-brush-bar{grid-template-columns:repeat(2,1fr)}
  .odonto-workspace-grid{grid-template-columns:1fr}
}

/* ---- Print ---- */
@media print{
  .no-print,.nav,.dp-sidebar,.tabbar,.tabs,.toolbar-lite,.cockpit-chat{display:none!important}
  .page{margin:0!important;padding:0!important;max-width:none!important}
  .cockpit-layout{display:block!important}
  .card{box-shadow:none;border:1px solid #ddd;break-inside:avoid}
  .tl-scroller{overflow:visible}.tl-track{flex-wrap:wrap}
}

/* ---------- Cephalometric evolution (S-N superimposition) ---------- */
.evo-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:10px}
@media (max-width:900px){.evo-grid{grid-template-columns:1fr}}
.evo-svg-wrap{background:var(--bg3);border-radius:10px;padding:6px}
.evo-svg{width:100%;height:auto;max-height:68vh;display:block}
.evo-svg .evo-grid{stroke:var(--sep);stroke-width:.15}
.evo-svg line{stroke-width:.55;stroke-linecap:round}
.evo-svg .evo-a line,.evo-svg .evo-a circle{stroke:#0ea5e9;fill:#0ea5e9}
.evo-svg .evo-b line,.evo-svg .evo-b circle{stroke:#f97316;fill:#f97316}
.evo-svg .evo-a line{stroke-dasharray:1.6 1}
.evo-svg .evo-move{stroke:#e11d48;stroke-width:.45}
.evo-svg .evo-arrowhead{fill:#e11d48}
.evo-svg .evo-label{font-size:2.6px;fill:var(--muted,#64748b);font-family:ui-monospace,monospace}
.evo-swatch{display:inline-block;width:18px;height:3px;border-radius:2px;vertical-align:middle}
.evo-sw-a{background:repeating-linear-gradient(90deg,#0ea5e9 0 5px,transparent 5px 8px)}
.evo-sw-b{background:#f97316}
.evo-headline{margin:6px 0 0;padding-left:18px;font-size:13px;line-height:1.5}
.evo-table{width:100%;border-collapse:collapse;margin-top:6px;font-size:12.5px}
.evo-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted,#64748b);padding:5px 6px;border-bottom:1px solid var(--sep)}
.evo-table td{padding:5px 6px;border-bottom:1px solid var(--sep);vertical-align:top}
.evo-metrics tr.evo-up td:nth-child(5){color:var(--orange)}
.evo-metrics tr.evo-down td:nth-child(5){color:var(--blue)}
.evo-metrics tr.evo-stable td:nth-child(5),.evo-metrics tr.evo-na td{color:var(--muted,#64748b)}

/* ---------- Structured opinions & consensus ---------- */
.cons-meter{height:8px;border-radius:6px;background:var(--bg3);overflow:hidden}
.cons-meter > span{display:block;height:100%;border-radius:6px}
.cons-strong{background:var(--green)}.cons-partial{background:var(--orange)}.cons-divergent{background:var(--red)}.cons-none{background:var(--sep)}
.cons-field{padding:8px 0;border-bottom:1px solid var(--sep)}
.cons-field:last-child{border-bottom:0}
.cons-bar{display:grid;grid-template-columns:minmax(110px,170px) 1fr 44px;gap:8px;align-items:center;font-size:12.5px;margin-top:4px}
.cons-bar .cons-meter{height:7px}
.cons-tag{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:10px;text-transform:uppercase;letter-spacing:.03em}
.cons-tag.cons-strong,.cons-tag.cons-partial,.cons-tag.cons-divergent{color:#fff}
.cons-tag.cons-none{color:var(--muted,#64748b)}
.op-card{border:1px solid var(--sep);border-radius:12px;padding:9px 11px;margin-top:8px;background:var(--bg2)}
.op-card.mine{border-color:var(--blue)}
.op-chips{display:flex;flex-wrap:wrap;gap:4px;margin:5px 0}
.op-form .op-q{margin-top:10px}
.op-form .op-q > b{display:block;font-size:12px;margin-bottom:4px}
.op-choices{display:flex;flex-wrap:wrap;gap:5px}
.op-choices label{cursor:pointer}
.op-choices input{position:absolute;opacity:0;pointer-events:none}
.op-choices span{display:inline-block;min-height:34px;line-height:22px;padding:5px 11px;border-radius:17px;border:1px solid var(--sep);font-size:12.5px;background:var(--bg2)}
.op-choices input:checked + span{background:var(--blue);border-color:var(--blue);color:#fff}
.op-choices input:focus-visible + span{outline:2px solid var(--blue);outline-offset:2px}
.conclusion-strip{margin-top:8px;padding:8px 11px;border-radius:10px;border:1px solid var(--green);background:color-mix(in srgb,var(--green) 9%,transparent);font-size:13px;white-space:pre-line}