/* ============================================================
   SyncGaze Help Center — help.css (CONTENT supplement only)
   The shell (sidebar, topbar, profile menu) is the dashboard's
   own tailwind.min.css + app.css + core-theme.css. This file
   styles ONLY the documentation content components, in the same
   palette (slate + #2563eb) and dark mode (.dark class) as the app.
   ============================================================ */

@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;src:url('/static/help/fonts/Lato-Regular.ttf') format('truetype')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url('/static/help/fonts/Lato-Bold.ttf') format('truetype')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('/static/help/fonts/Montserrat-Medium.ttf') format('truetype')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('/static/help/fonts/Montserrat-SemiBold.ttf') format('truetype')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('/static/help/fonts/Montserrat-Bold.ttf') format('truetype')}

/* API-page type family (self-hosted, latin subset) */
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:600;font-display:swap;src:url('/static/help/fonts/PlusJakartaSans-600.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700;font-display:swap;src:url('/static/help/fonts/PlusJakartaSans-700.woff2') format('woff2')}
@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:800;font-display:swap;src:url('/static/help/fonts/PlusJakartaSans-800.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('/static/help/fonts/Inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('/static/help/fonts/Inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('/static/help/fonts/Inter-600.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('/static/help/fonts/Inter-700.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/static/help/fonts/JetBrainsMono-400.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/static/help/fonts/JetBrainsMono-500.woff2') format('woff2')}

/* ── Un-scoped design tokens (API-page palette) — shared by the shell + content.
   Dark mode is the .dark class (Alpine + syncgaze-theme cookie), NOT [data-theme]. */
:root{
  --hc-brand:#2563eb; --hc-brand-2:#1d4ed8; --hc-brand-light:#eef4ff; --hc-brand-border:#bfdbfe;
  --hc-bg:#ffffff; --hc-bg2:#f6f8fc; --hc-surface:#ffffff;
  --hc-border:#e7ebf2; --hc-border-strong:#d3dae6;
  --hc-text:#0c1424; --hc-text2:#46536b; --hc-text3:#6b7689;
}
.dark{
  --hc-brand:#4b8bf4; --hc-brand-2:#2563eb; --hc-brand-light:rgba(75,139,244,.14); --hc-brand-border:rgba(75,139,244,.35);
  --hc-bg:#0a0f1a; --hc-bg2:#0d131f; --hc-surface:#0f1626;
  --hc-border:#1b2438; --hc-border-strong:#28344c;
  --hc-text:#eef2f8; --hc-text2:#aab6c8; --hc-text3:#8693a8;
}

.help-doc{
  --accent:var(--hc-brand); --accent-hover:var(--hc-brand-2); --accent-ink:#fff;
  --accent-wash:var(--hc-brand-light); --accent-border:var(--hc-brand-border);
  --ink:var(--hc-text); --ink-2:var(--hc-text2); --ink-3:var(--hc-text3);
  --surface:var(--hc-surface); --surface-2:var(--hc-bg2); --bg-tint:var(--hc-bg2);
  --border:var(--hc-border); --border-strong:var(--hc-border-strong);
  --ok:#0f9d58; --ok-wash:#e7f6ee; --ok-border:#bfe6cf;
  --warn:#b45309; --warn-wash:#fdf3d7; --warn-border:#f2dda0;
  --danger:#dc2626; --danger-wash:#fee2e2; --danger-border:#fecaca;
  --code-bg:var(--hc-bg2); --code-ink:var(--hc-text); --code-border:var(--hc-border);
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow:0 1px 3px rgba(15,23,42,.08),0 10px 24px -14px rgba(15,23,42,.22);
  --shadow-lg:0 24px 60px -24px rgba(15,23,42,.32);
  --font-head:'Plus Jakarta Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-body:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono','Cascadia Code',Consolas,monospace;
  --r:12px; --r-sm:8px; --r-lg:16px;
  color:var(--ink-2);font-family:var(--font-body);font-size:16px;line-height:1.65;
}
.dark .help-doc{
  --ok:#34d399; --ok-wash:rgba(16,185,129,.14); --ok-border:rgba(52,211,153,.3);
  --warn:#fbbf24; --warn-wash:rgba(217,119,6,.16); --warn-border:rgba(251,191,36,.3);
  --danger:#f87171; --danger-wash:rgba(220,38,38,.16); --danger-border:rgba(248,113,113,.3);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow:0 1px 3px rgba(0,0,0,.5),0 12px 30px -16px rgba(0,0,0,.7);
  --shadow-lg:0 30px 70px -26px rgba(0,0,0,.75);
}

.help-doc h1,.help-doc h2,.help-doc h3,.help-doc h4{font-family:var(--font-head);color:var(--ink);line-height:1.2;letter-spacing:-.02em;margin:0}
.help-doc p{margin:0 0 1em;color:var(--ink-2)}
.help-doc strong{font-weight:700;color:var(--ink)}
.help-doc a{color:var(--accent);text-decoration:none}
.help-doc a:hover{text-decoration:underline}
.help-doc ul,.help-doc ol{padding-left:22px;margin:0 0 16px}
.help-doc ul{list-style:disc}
.help-doc ol{list-style:decimal}
.help-doc li{margin-bottom:6px;color:var(--ink-2)}
.help-doc h3{font-size:18px;font-weight:700;color:var(--ink)}
.help-doc [x-cloak]{display:none!important}

.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--accent);background:var(--accent-wash);border:1px solid var(--accent-border);padding:4px 11px;border-radius:999px;margin-bottom:16px}
.page-h1{font-size:clamp(30px,4.4vw,38px);font-weight:800;margin:0 0 12px}
.page-h1 .grad{background:linear-gradient(120deg,var(--accent),#6aa1ff);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lead{font-size:18px;color:var(--ink-2);line-height:1.6;margin:0 0 8px;max-width:64ch}

/* Hero band (landing pages) — ported from the API doc-hero */
.hero{position:relative;overflow:hidden;border:1px solid var(--border);border-radius:var(--r-lg);padding:34px 32px;margin:0 0 30px;background:var(--surface-2)}
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(720px 260px at 6% -25%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 70%),radial-gradient(520px 220px at 100% 0%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 72%)}
.hero>*{position:relative}
.hero .lead{margin-bottom:0}
.meta-row{display:flex;flex-wrap:wrap;gap:16px;margin:20px 0 8px;color:var(--ink-3);font-size:13.5px}
.meta-row span{display:inline-flex;align-items:center;gap:6px}
.rule{height:1px;background:var(--border);margin:30px 0}
.h2{font-size:22px;font-weight:800;margin:44px 0 6px;scroll-margin-top:82px}
.h2:first-of-type{margin-top:30px}
.h2 .num{color:var(--accent);font-variant-numeric:tabular-nums}
.sub{color:var(--ink-2);margin:0 0 18px;max-width:64ch}
code.inl{font-family:var(--font-mono);font-size:.86em;background:var(--code-bg);border:1px solid var(--code-border);color:var(--code-ink);padding:1px 6px;border-radius:5px}

.call{display:flex;gap:12px;padding:14px 16px;border-radius:var(--r);border:1px solid var(--accent-border);background:var(--accent-wash);margin:20px 0;font-size:14.5px;line-height:1.55}
.call .ic{flex-shrink:0;margin-top:1px;color:var(--accent)}
.call p{margin:0;color:var(--ink)}
.call .k{font-weight:800;display:block;margin-bottom:2px;font-family:var(--font-head);font-size:13.5px}
.call.warn{border-color:var(--warn-border);background:var(--warn-wash)}
.call.warn .ic{color:var(--warn)}
.call.ok{border-color:var(--ok-border);background:var(--ok-wash)}
.call.ok .ic{color:var(--ok)}

.step-wrap{display:grid;grid-template-columns:34px 1fr;gap:16px}
.step-n{width:34px;height:34px;border-radius:50%;background:var(--accent);color:#fff;font-family:var(--font-head);font-weight:700;font-size:15px;display:grid;place-items:center;box-shadow:0 0 0 5px var(--accent-wash)}

/* Code blocks use the API dark treatment in both themes (inline code.inl stays light) */
.codeblock{position:relative;background:#0f172a;border:1px solid #1e293b;border-radius:var(--r);padding:16px 18px;margin:16px 0;font-family:var(--font-mono);font-size:13px;color:#e5e7eb;overflow-x:auto;line-height:1.75;white-space:pre}
.codeblock .cp{position:absolute;top:8px;right:8px;font-family:var(--font-body);font-size:11.5px;font-weight:600;color:#94a3b8;background:#1e293b;border:1px solid #334155;border-radius:6px;padding:4px 9px;cursor:pointer}
.codeblock .cp:hover{color:#fff;background:#334155}

.frame{border:1px solid var(--border-strong);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);box-shadow:var(--shadow);margin:18px 0 8px}
.frame-bar{display:flex;align-items:center;gap:7px;padding:10px 14px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.frame-bar i{width:11px;height:11px;border-radius:50%;background:var(--border-strong);display:block}
.frame-bar .url{margin-left:10px;flex:1;max-width:340px;height:24px;border-radius:6px;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;gap:6px;padding:0 10px;color:var(--ink-3);font-family:var(--font-mono);font-size:11.5px}
.frame-bar .url svg{color:var(--ok)}
.shot{position:relative;padding:22px;background:var(--bg-tint)}
/* Real screenshot slot: shows the captured PNG; falls back to a "coming soon"
   panel when the file isn't present yet (img onerror adds .is-pending). */
.shot.slot{padding:0;background:var(--surface)}
.shot.slot img{display:block;width:100%;height:auto}
.shot.slot .pending{display:none}
.shot.slot.is-pending img{display:none}
.shot.slot.is-pending .pending{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:220px;padding:34px 24px;text-align:center;background:var(--bg-tint)}
.shot.slot .pending svg{color:var(--border-strong)}
.shot.slot .pending span{font-size:13px;color:var(--ink-3)}
.shot.slot .pending code{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--border);border-radius:5px;padding:2px 7px}
.cap{font-size:13px;color:var(--ink-3);margin:0 2px 22px;font-style:italic}
.pin{position:absolute;width:25px;height:25px;border-radius:50%;background:var(--accent);color:#fff;font:700 12.5px/25px var(--font-body);text-align:center;z-index:4;box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent),0 3px 8px rgba(0,0,0,.3)}
.legend{list-style:none;padding:0;margin:2px 0 0;display:grid;gap:8px}
.legend li{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;font-size:13.5px;color:var(--ink-2)}
.legend .ln{width:22px;height:22px;border-radius:50%;background:var(--accent-wash);color:var(--accent);border:1px solid var(--accent-border);font:700 12px/20px var(--font-body);text-align:center}
.legend b{color:var(--ink)}

.m-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-sm)}
.m-h{font-family:var(--font-head);font-weight:700;color:var(--ink)}
.m-label{font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:5px;display:block}
.m-input{height:38px;border:1px solid var(--border-strong);border-radius:8px;background:var(--surface);display:flex;align-items:center;padding:0 11px;color:var(--ink-3);font-size:13px}
.m-btn{height:38px;border-radius:8px;background:var(--accent);color:#fff;font-weight:700;font-size:13.5px;display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:0 16px;font-family:var(--font-body)}
.m-btn.gh{background:var(--surface);color:var(--ink-2);border:1px solid var(--border-strong)}
.m-chip{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px}
.m-chip.ok{background:var(--ok-wash);color:var(--ok);border:1px solid var(--ok-border)}

.tbl-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--r);margin:16px 0}
table.err{border-collapse:collapse;width:100%;font-size:13.7px;min-width:560px}
table.err th{background:var(--surface-2);text-align:left;font-family:var(--font-head);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2);padding:10px 14px;border-bottom:1px solid var(--border)}
table.err td{padding:12px 14px;border-bottom:1px solid var(--border);color:var(--ink-2);vertical-align:top}
table.err tr:last-child td{border-bottom:none}
table.err td:first-child{color:var(--ink);font-weight:600;white-space:nowrap}
table.err code{font-family:var(--font-mono);font-size:12px;background:var(--code-bg);border:1px solid var(--code-border);padding:1px 5px;border-radius:4px;color:var(--code-ink)}

.video{margin:18px 0;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;background:var(--surface-2)}
.video .screen{aspect-ratio:16/9;display:grid;place-items:center;position:relative;background:radial-gradient(120% 120% at 50% 0%,color-mix(in srgb,var(--accent) 12%,transparent),transparent 60%),var(--surface-2)}
.video .play{width:64px;height:64px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;box-shadow:0 12px 30px -8px color-mix(in srgb,var(--accent) 60%,transparent)}
.video .foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 15px;border-top:1px solid var(--border);font-size:13px;color:var(--ink-2)}
.video .foot .lbl{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--ink)}
.video .soon{font-size:11px;font-weight:700;color:var(--ink-3);background:var(--surface);border:1px solid var(--border);padding:3px 9px;border-radius:999px}

.next{margin:40px 0 0;padding:22px 22px 24px;border:1px solid var(--accent-border);border-radius:var(--r-lg);background:linear-gradient(180deg,var(--accent-wash),transparent)}
.next .q{font-family:var(--font-head);font-weight:800;font-size:18px;color:var(--ink);margin:0 0 14px}
.next-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:640px){.next-grid{grid-template-columns:1fr}}
.next-card{display:flex;align-items:center;gap:12px;padding:14px 15px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);cursor:pointer;transition:.15s;text-decoration:none}
.next-card:hover{border-color:var(--accent);box-shadow:var(--shadow);text-decoration:none;transform:translateY(-1px)}
.next-card .ni{width:38px;height:38px;border-radius:9px;background:var(--accent-wash);color:var(--accent);display:grid;place-items:center;flex-shrink:0}
.next-card b{display:block;color:var(--ink);font-size:14.5px;font-family:var(--font-head)}
.next-card span{color:var(--ink-3);font-size:12.5px}
.next-card .go{margin-left:auto;color:var(--ink-3)}

.path-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:22px 0}
@media(max-width:640px){.path-grid{grid-template-columns:1fr}}
.path{border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;background:var(--surface);box-shadow:var(--shadow-sm);cursor:pointer;transition:.15s;text-decoration:none;display:block}
.path:hover{border-color:var(--accent);box-shadow:var(--shadow);transform:translateY(-2px);text-decoration:none}
.path .pi{width:44px;height:44px;border-radius:11px;background:var(--accent-wash);color:var(--accent);display:grid;place-items:center;margin-bottom:14px}
.path h3{font-size:18px;font-weight:700;margin:0 0 6px}
.path p{font-size:14px;color:var(--ink-2);margin:0 0 12px}
.path .lk{color:var(--accent);font-weight:700;font-size:13.5px;display:inline-flex;align-items:center;gap:6px}
.timeline{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.timeline .t{font-size:12.5px;font-weight:600;color:var(--ink-2);background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:5px 12px;display:inline-flex;align-items:center;gap:7px}
.timeline .t .d{width:18px;height:18px;border-radius:50%;background:var(--accent);color:#fff;font:700 10px/18px var(--font-body);text-align:center}

.soon-panel{max-width:560px;margin:40px auto;text-align:center;padding:40px 30px;border:1px dashed var(--border-strong);border-radius:var(--r-lg);background:var(--bg-tint)}
.soon-panel .pi{width:52px;height:52px;border-radius:13px;background:var(--accent-wash);color:var(--accent);display:grid;place-items:center;margin:0 auto 16px}
.soon-panel h3{font-size:20px;margin:0 0 8px}
.soon-panel p{color:var(--ink-2);margin:0 auto;max-width:44ch}
.soon-panel .ph{margin-top:16px;font-size:12px;font-weight:700;color:var(--accent);background:var(--accent-wash);border:1px solid var(--accent-border);border-radius:999px;padding:5px 13px;display:inline-block}
.soon-panel .home-lk{display:inline-block;margin-top:22px;font-weight:700;font-size:14px}

/* FAQ page (accordion, shortcut grid, support card) */
.faq-list{display:grid;gap:10px;margin:6px 0}
.faq-item{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.faq-item>button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 18px;text-align:left;background:none;border:none;cursor:pointer;color:var(--ink);font-family:var(--font-body);font-size:15px;font-weight:600}
.faq-item>button:hover{background:var(--surface-2)}
.faq-item .chev{width:18px;height:18px;flex-shrink:0;color:var(--ink-3);transition:transform .2s}
.faq-a{padding:0 18px 16px;color:var(--ink-2);font-size:14.5px;line-height:1.65}
.faq-a a{color:var(--accent)}
.faq-a ul{margin:0;padding-left:20px}
.kbd-grid{display:grid;grid-template-columns:1fr;gap:8px;margin:10px 0}
@media(min-width:560px){.kbd-grid{grid-template-columns:1fr 1fr}}
.kbd-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 14px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r-sm);font-size:14px;color:var(--ink-2)}
kbd.key{font-family:var(--font-mono);font-size:12px;color:var(--ink);background:var(--surface);border:1px solid var(--border-strong);border-bottom-width:2px;border-radius:5px;padding:2px 8px}
.help-card{margin-top:36px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface-2);padding:24px}
.help-card h2{font-size:18px;font-weight:800;margin:0 0 6px}
.help-card p{margin:0 0 16px;color:var(--ink-2)}
.help-card .btns{display:flex;flex-wrap:wrap;gap:12px}
.btn-primary{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--r-sm);background:var(--accent);color:#fff;font-weight:600;font-size:14px}
.btn-primary:hover{background:var(--accent-hover);text-decoration:none}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:var(--r-sm);border:1px solid var(--border-strong);color:var(--ink);font-weight:600;font-size:14px;background:var(--surface)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent);text-decoration:none}

/* search results dropdown (topbar search) */
#searchResults{position:absolute;top:44px;left:0;right:0;background:var(--surface,#fff);border:1px solid var(--border,#e2e8f0);border-radius:12px;box-shadow:0 24px 60px -24px rgba(15,23,42,.32);padding:6px;display:none;z-index:60;max-height:70vh;overflow-y:auto}
.dark #searchResults{background:#1f2937;border-color:#374151}
#searchResults a{display:block;padding:9px 12px;border-radius:8px;text-decoration:none}
#searchResults a:hover{background:#f1f5f9;text-decoration:none}
.dark #searchResults a:hover{background:#111827}
#searchResults a b{display:block;font-size:13.5px;color:#0f172a;font-weight:700}
.dark #searchResults a b{color:#f1f5f9}
#searchResults a span{display:block;font-size:12px;color:#64748b;margin-top:1px}
#searchResults .sr-soon{font-style:normal;font-size:9.5px;font-weight:700;color:#64748b;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:5px;padding:1px 5px;margin-left:7px}
.dark #searchResults .sr-soon{background:#111827;border-color:#374151;color:#94a3b8}
#searchResults .sr-empty{padding:12px 14px;font-size:13px;color:#64748b}

/* floating chat button */
.chat-fab{position:fixed;right:22px;bottom:22px;z-index:50;height:48px;padding:0 18px 0 15px;border-radius:999px;background:var(--hc-brand);color:#fff;border:none;font:700 14px 'Inter',system-ui,sans-serif;display:inline-flex;align-items:center;gap:9px;cursor:pointer;box-shadow:0 14px 34px -10px rgba(37,99,235,.55)}
.chat-fab:hover{background:var(--hc-brand-2)}

@media(prefers-reduced-motion:reduce){.next-card,.path{transition:none}}

/* ============================================================
   Shell reskin (sidebar + topbar) — API-page look.
   Classes drive color only; the partials keep their layout
   utilities + Alpine bindings. Body font/colors set here so the
   last-loaded stylesheet wins over the dashboard's app.css.
   ============================================================ */
.hc-body{background:var(--hc-bg);color:var(--hc-text);font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif}

/* Sidebar */
.hc-sidebar{background:var(--hc-bg2);border-right:1px solid var(--hc-border)}
.hc-divider{border-color:var(--hc-border)}
.hc-brand{font-family:'Plus Jakarta Sans',ui-sans-serif,system-ui,sans-serif;color:var(--hc-text);font-weight:800;letter-spacing:-.01em}
.hc-brand-sub{color:var(--hc-text3);border-left:1px solid var(--hc-border)}
.hc-nav-section{color:var(--hc-text2);font-weight:700}
.hc-nav-section:hover{background:var(--hc-brand-light);color:var(--hc-brand)}
.hc-nav-rail{border-left:1px solid var(--hc-border)}
.hc-nav-item{color:var(--hc-text2)}
.hc-nav-item:hover{background:var(--hc-brand-light);color:var(--hc-brand)}
.hc-nav-item.active{background:var(--hc-brand-light);color:var(--hc-brand);font-weight:600}
.hc-tag{background:var(--hc-bg);color:var(--hc-text3);border:1px solid var(--hc-border)}
.hc-soon{color:var(--hc-text3)}
.hc-muted{color:var(--hc-text3)}
.hc-avatar{background:var(--hc-brand-light);color:var(--hc-brand)}
.hc-name{color:var(--hc-text)}

/* Topbar */
.hc-topbar{background:color-mix(in srgb,var(--hc-bg) 82%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border-bottom:1px solid var(--hc-border)}
.hc-search{background:var(--hc-bg2);border:1px solid var(--hc-border);color:var(--hc-text)}
.hc-search::placeholder{color:var(--hc-text3)}
.hc-search:focus{border-color:var(--hc-brand);outline:none;box-shadow:0 0 0 3px var(--hc-brand-light)}
.hc-iconbtn{color:var(--hc-text2)}
.hc-iconbtn:hover{background:var(--hc-brand-light);color:var(--hc-brand)}
.hc-menu{background:var(--hc-surface);border:1px solid var(--hc-border);box-shadow:var(--shadow-lg,0 24px 60px -24px rgba(15,23,42,.32))}
.hc-chat-row{border:1px solid var(--hc-border);border-radius:12px}
.hc-chat-row:hover{border-color:var(--hc-brand);background:var(--hc-brand-light)}
.hc-chip-neutral{background:var(--hc-bg2);color:var(--hc-text3)}

/* Profile dropdown: account switcher + storage */
.hc-menu-divider{border-top:1px solid var(--hc-border)}
.hc-menu-item{color:var(--hc-text2)}
.hc-menu-item:hover{background:var(--hc-brand-light);color:var(--hc-brand);text-decoration:none}
.hc-menu-item .mi{color:var(--hc-text3)}
.hc-menu-item:hover .mi{color:var(--hc-brand)}
.hc-badge-active{background:color-mix(in srgb,#16a34a 15%,transparent);color:#15803d}
.dark .hc-badge-active{color:#4ade80}
.hc-switch{background:var(--hc-brand);color:#fff}
.hc-switch:hover{background:var(--hc-brand-2);text-decoration:none}
.hc-storage-track{height:6px;border-radius:99px;background:var(--hc-border);overflow:hidden}
.hc-storage-fill{height:100%;border-radius:99px;background:var(--hc-brand);transition:width .3s}
.hc-storage-fill.warn{background:#f59e0b}
.hc-storage-fill.full{background:#dc2626}
.hc-danger{color:#dc2626}
.hc-danger:hover{background:color-mix(in srgb,#dc2626 12%,transparent);text-decoration:none}
.dark .hc-danger{color:#f87171}

/* Signed-out CTA (topbar) */
.hc-signin{color:var(--hc-text2);border:1px solid var(--hc-border)}
.hc-signin:hover{border-color:var(--hc-brand);color:var(--hc-brand);text-decoration:none}
.hc-getstarted{background:var(--hc-brand);color:#fff;border:1px solid var(--hc-brand)}
.hc-getstarted:hover{background:var(--hc-brand-2);text-decoration:none}