:root {
  --sidebar:#14294c;
  --side-ink:#cad8ee;
  --side-muted:#aabfdf;
  --side-active:#284774;
  --side-hover:#233f6a;
  --side-line:#3b5172;
  --primary-hover:#194aab;
  --display-font:Inter,system-ui,sans-serif;
}
:root[data-ui-style=clinical] {
  --sidebar:#101e39;
  --side-ink:#e3edff;
  --side-muted:#a7b9d8;
  --side-active:#243d65;
  --side-hover:#1c3153;
  --side-line:#2e4261;
  --side-active-ink:#f0f6ff;
}
:root[data-theme=dark] {
  --primary-hover:#2859ba;
}
:root[data-ui-style=clinical][data-theme=dark] {
  --sidebar:#131f32;
  --side-ink:#d5e3f7;
  --side-muted:#a5b9d5;
  --side-active:#29476f;
  --side-hover:#203754;
  --side-line:#344865;
}
:root[data-ui-style=midnight] {
  --sidebar:#0d1930;
  --side-active:#21467e;
  --side-hover:#172b4a;
  --page:#edf3fa;
  --surface:#fafcff;
  --soft:#e4ecf8;
}
:root[data-ui-style=midnight][data-theme=dark] {
  --page:#0b1322;
  --surface:#121f34;
  --soft:#182b47;
  --tint:#193d58;
  --accent:#a1e2e6;
}
:root[data-ui-style=cobalt] {
  --sidebar:#0e2a8b;
  --side-active:#284aba;
  --side-hover:#223e9f;
  --side-line:#4463c6;
  --blue:#153bb8;
  --primary-hover:#102c8f;
}
:root[data-ui-style=cobalt][data-theme=dark] {
  --sidebar:#102568;
  --page:#101735;
  --surface:#1a254a;
  --soft:#202e58;
  --blue:#2d51ba;
}
:root[data-ui-style=editorial] {
  --display-font:Georgia,'Times New Roman',serif;
  --sidebar:#142a3e;
  --side-active:#dfbb65;
  --side-active-ink:#18243a;
  --page:#f7f0e3;
  --surface:#fffaf1;
  --soft:#f4ead6;
  --border:#ddd0b5;
  --tint:#f0e2bd;
  --accent:#69501c;
  --blue:#243e53;
  --primary-hover:#162e45;
}
:root[data-ui-style=editorial][data-theme=dark] {
  --page:#181b20;
  --surface:#23282e;
  --soft:#30343b;
  --border:#50493d;
  --tint:#3f3525;
  --accent:#efd28f;
  --blue:#35516a;
}
:root[data-ui-style=mint] {
  --sidebar:#2d2555;
  --side-active:#b8f3d8;
  --side-active-ink:#203044;
  --side-hover:#403568;
  --side-line:#544778;
  --page:#f1f8f5;
  --surface:#fcfffd;
  --soft:#e8f4ee;
  --tint:#d8f3e6;
  --accent:#17594b;
  --border:#d2e5dc;
  --blue:#285a51;
  --primary-hover:#19463e;
}
:root[data-ui-style=mint][data-theme=dark] {
  --page:#121a25;
  --surface:#1a2a33;
  --soft:#20383d;
  --tint:#23443f;
  --accent:#b2ead3;
  --border:#335459;
  --blue:#28695e;
}

.side{background:var(--sidebar);color:var(--side-ink)}
.brand small,.nav-label,.side-footer{color:var(--side-muted)}
.nav button{color:var(--side-ink)}
.nav button:hover{background:var(--side-hover)}
.nav button[aria-current=page]{background:var(--side-active);color:var(--side-active-ink,var(--side-ink))}
.side-footer{border-color:var(--side-line)}
.primary:hover{background:var(--primary-hover)}
h1,h2{font-family:var(--display-font)}
.mobile-hub-name{display:none}

.appearance{max-width:960px}
.appearance-mode{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:10px 0 18px}
.style-fieldset{margin:0;padding:0;border:0;min-width:0}
.style-fieldset legend{font-size:18px;font-weight:750}
.style-fieldset>.sub{margin:5px 0 12px}
.style-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:10px}
.style-option{display:grid;grid-template-columns:auto 62px minmax(0,1fr);align-items:center;gap:10px;padding:11px;border:1px solid var(--border);border-radius:12px;background:var(--surface);cursor:pointer}
.style-option:has(input:checked){border-color:var(--accent);background:var(--tint)}
.style-option input{width:auto;margin:0;accent-color:var(--blue)}
.style-option strong,.style-option small{display:block}
.style-option small{margin-top:3px;color:var(--muted);font-weight:450}
.style-preview{display:grid;grid-template-columns:13px 1fr 1fr;grid-template-rows:14px 11px;gap:3px;background:var(--mock-bg,#fff);border:1px solid var(--border);border-radius:6px;padding:5px;height:37px}
.style-preview i{grid-row:1/3;background:var(--mock-side,#dceafe);border-radius:2px}
.style-preview b:first-of-type{grid-column:2/4;background:var(--mock-hero,#bad8fc);border-radius:2px}
.style-preview b:last-of-type{grid-column:2/4;background:var(--mock-card,#e8f2ff);border-radius:2px}
.style-preview--midnight{--mock-bg:#0c172c;--mock-side:#1e355b;--mock-hero:#305c9c;--mock-card:#1b4260}
.style-preview--cobalt{--mock-side:#0e2a8b;--mock-hero:#284fd2;--mock-card:#baf3dd}
.style-preview--editorial{--mock-bg:#f7f0e3;--mock-side:#142a3e;--mock-hero:#dfbb65;--mock-card:#e7d8b8}
.style-preview--mint{--mock-bg:#f1f8f5;--mock-side:#2d2555;--mock-hero:#bdeed7;--mock-card:#dad3f1}

:root {
  --workspace-blue: #122855;
  --workspace-edge: #254687;
  --workspace-light: #cde3ff;
  --workspace-action: #d5e6ff;
  --workspace-text: #102344;
}
[data-ui-style=midnight] { --workspace-blue:#101b32; --workspace-edge:#274775; }
[data-ui-style=cobalt] { --workspace-blue:#122d87; --workspace-edge:#3458d2; --workspace-action:#bff5de; }
[data-ui-style=editorial] { --workspace-blue:#142b40; --workspace-edge:#435261; --workspace-action:#f5db9f; }
[data-ui-style=mint] { --workspace-blue:#23364b; --workspace-edge:#285950; --workspace-action:#bcebd6; }

.shell { grid-template-columns:224px minmax(0,1fr); }
.side { gap:21px; padding:22px 14px 16px; border-right:1px solid var(--side-line); }
.brand { padding:0 4px 16px; border-bottom:1px solid var(--side-line); }
.brand .crest { width:40px; height:40px; }
.brand strong { font-size:15px; line-height:1.2; letter-spacing:-.025em; }
.brand small { font-size:12px; }
.nav { gap:17px; }
.nav-section { display:grid; gap:2px; }
.nav-label { padding:0 10px 3px; letter-spacing:.08em; }
.nav button { min-height:37px; padding:7px 10px; font-size:13px; border-radius:8px; }
.nav button[aria-current=page] { box-shadow:inset 2px 0 var(--side-active-ink,var(--accent)); }
.nav svg { width:17px; height:17px; }
.top { min-height:64px; }
.crumb { font-size:13px; }
.page-crumb > span { margin-inline:5px; color:var(--muted); }
.wrap { max-width:1380px; }
.preview-note { display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-bottom:15px; }
.preview-note > span:first-child { width:6px; height:6px; background:var(--accent); border-radius:50%; }
.preview-note strong { color:var(--strong); }
.btn { border-radius:9px; }
a.btn { text-decoration:none; }
.inline-link { color:var(--accent); text-underline-offset:3px; overflow-wrap:anywhere; }

.overview {
  display:grid;
  grid-template-columns:minmax(0,1.34fr) minmax(0,1fr);
  gap:22px;
}
.overview > .hero, .overview-today { grid-column:1/-1; }
.hero {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:24px;
  min-height:242px;
  padding:clamp(24px,4vw,46px);
  background:linear-gradient(118deg,var(--workspace-blue) 40%,var(--workspace-edge));
  border-radius:22px;
  box-shadow:0 12px 24px -18px #112448af;
  color:#fff;
}
.hero::after { display:none; }
.hero .hero-label { margin:0; color:var(--workspace-light); font-size:12px; font-weight:700; }
.hero h1 { margin:8px 0; font-size:clamp(43px,6vw,78px); letter-spacing:-.065em; }
.hero p:not(.hero-label) { margin:0; color:#edf3ff; font-size:15px; }
.hero .actions { margin-top:22px; }
.hero .btn { background:transparent; border-color:#b9d0ef91; color:white; }
.hero .btn:hover { background:#ffffff24; }
.hero .btn.primary { background:var(--workspace-action); border-color:var(--workspace-action); color:var(--workspace-text); }
.hero .btn.primary:hover { background:white; border-color:white; }
.hero-seal {
  display:grid;
  place-items:center;
  width:clamp(118px,15vw,175px);
  aspect-ratio:1;
  border:1px solid #cfdef47a;
  border-radius:50%;
  box-shadow:0 0 0 9px #d3e3ff12,0 0 0 10px #d3e3ff40;
}
.hero-seal img { display:block; width:82%; height:auto; border-radius:50%; }
.overview-today { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.overview-today button {
  display:flex;
  min-width:0;
  min-height:86px;
  align-items:center;
  gap:10px;
  padding:12px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  color:var(--strong);
  text-align:left;
}
.overview-today button:hover { border-color:var(--accent); background:var(--hover); }
.quick-icon { display:grid; place-items:center; flex:none; width:37px; height:37px; border-radius:10px; background:var(--tint); color:var(--accent); }
.quick-label { min-width:0; }
.quick-label strong, .quick-label small { display:block; overflow-wrap:anywhere; }
.quick-label strong { font-size:13px; }
.quick-label small { margin-top:3px; color:var(--muted); font-size:11px; }
.quick-arrow { color:var(--accent); margin:3px 2px 0 auto; align-self:flex-start; }
.outbound-arrow { display:inline-block; position:relative; width:12px; height:12px; flex:none; }
.outbound-arrow::before { content:""; position:absolute; inset:0 0 auto auto; width:7px; height:7px; border-top:1.5px solid; border-right:1.5px solid; }
.outbound-arrow::after { content:""; position:absolute; top:1px; right:1px; width:11px; height:1.5px; background:currentColor; transform:rotate(-45deg); transform-origin:right; }
.overview-panel {
  align-self:start;
  min-width:0;
  padding:5px 16px 0;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--surface);
}
.overview .heading { margin:0; min-height:54px; gap:10px; }
.overview-panel .heading h2 { min-width:0; }
.overview .heading .btn { background:transparent; color:var(--accent); }
.overview .heading .btn:hover { background:var(--hover); }
.overview .card {
  margin:0;
  padding:14px 0;
  border:0;
  border-top:1px solid var(--border);
  border-radius:0;
}
.overview .empty { margin-bottom:12px; }
.overview .card h3 { overflow-wrap:anywhere; }
.overview .resource .btn { min-height:36px; }
[data-ui-style=midnight] .overview { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
[data-ui-style=cobalt] .overview-today button:nth-child(odd) { background:var(--soft); }
[data-ui-style=editorial] .hero, [data-ui-style=editorial] .overview-today button { border-radius:6px; }
[data-ui-style=mint] .overview-today button { background:var(--soft); border-radius:18px; }

.chat-room { max-width:850px; margin-top:14px; border:1px solid var(--border); border-radius:16px; background:var(--surface); }
.chat-room .demo-chat { margin:0; padding:15px; }
.chat-message { display:flex; align-items:flex-start; gap:10px; }
.chat-message + .chat-message { margin-top:14px; }
.chat-avatar { display:grid; place-items:center; flex:none; width:34px; height:34px; border-radius:10px; background:var(--tint); color:var(--accent); font-size:13px; font-weight:800; }
.chat-message-content { min-width:0; padding:8px 11px; border-radius:0 12px 12px; background:var(--soft); }
.chat-message h3 { color:var(--strong); font-size:13px; margin-bottom:3px; }
.chat-message p { color:var(--text); font-size:14px; white-space:pre-wrap; overflow-wrap:anywhere; }
.shared-link { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 10px; margin-top:6px; border:1px solid var(--border); border-radius:8px; background:var(--surface); color:var(--accent); text-decoration:none; }
.shared-link:hover { border-color:var(--accent); }
.shared-link strong, .shared-link small { display:block; overflow-wrap:anywhere; }
.shared-link strong { font-size:13px; }
.shared-link small { margin-top:3px; color:var(--muted); font-size:11px; }
.chat-composer { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; padding:15px; border-top:1px solid var(--border); }
.chat-composer > label, .chat-composer > .error { grid-column:1/-1; }
.chat-composer > .error:empty { display:none; }
.chat-composer textarea { min-height:64px; }
.chat-composer .btn { align-self:start; }
.chat-link-field summary { display:list-item; width:fit-content; min-height:40px; padding:9px 2px; color:var(--accent); font-size:13px; font-weight:700; cursor:pointer; }

@media (max-width:1000px) {
  .overview-today { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .overview-today button { min-height:68px; }
}
@media (min-width:701px) and (max-width:900px) {
  .shell { grid-template-columns:174px minmax(0,1fr); }
  .brand .crest { width:32px; height:32px; }
  .brand { gap:8px; }
}
@media (max-width:700px) {
  .top { min-height:62px; }
  .top .btn { min-height:40px; white-space:nowrap; }
  .top-actions > .tag { display:none; }
  .mobile-hub-name { display:block; font-size:13px; font-weight:800; line-height:1.2; color:var(--strong); }
  .page-crumb { font-size:11px; }
  .bottom-nav { inset:auto 8px max(5px,env(safe-area-inset-bottom)) 8px; border:1px solid var(--border); border-radius:17px; padding:4px; box-shadow:0 4px 22px #14294c32; }
  .bottom-nav--chat { grid-template-columns:repeat(5,minmax(0,1fr)); }
  .bottom-nav button { border-radius:12px; }
  .overview { display:flex; flex-direction:column; gap:17px; }
  .hero { min-height:0; padding:18px; grid-template-columns:minmax(0,1fr); border-radius:17px; }
  .hero h1 { margin-block:7px; font-size:clamp(38px,9vw,57px); }
  .hero p:not(.hero-label) { font-size:13px; }
  .hero .hero-label { font-size:10px; padding-right:clamp(56px,15vw,88px); }
  .hero-copy > p:not(.hero-label) { max-width:calc(100% - 58px); }
  .hero .actions { margin-top:14px; }
  .hero .btn { min-height:40px; padding:6px 9px; font-size:12px; }
  .hero-seal { position:absolute; top:19px; right:20px; width:clamp(46px,13vw,80px); }
  .overview-today { gap:7px; }
  .overview-today button { min-height:60px; padding:7px; gap:6px; }
  .quick-icon { width:29px; height:29px; border-radius:8px; }
  .quick-icon svg { width:16px; height:16px; }
  .quick-label strong { font-size:12px; }
  .quick-label small { font-size:10px; }
  .quick-arrow { display:none; }
  .overview .heading h2 { font-size:18px; }
}
@media (max-width:350px) {
  .hero-seal { display:none; }
  .hero .hero-label { padding-right:0; }
  .hero-copy > p:not(.hero-label) { max-width:none; }
}