/* Design system (core, integrator owns). Every color, size and motion is a token. Features use these classes and
   tokens instead of hard-coded values, so the whole app stays consistent and dark mode just works.
   Per-project look lives in theme.css (brand hue, accent hue, font, radius). Reference: docs/DESIGN.md */

@font-face { font-family: "Inter"; src: url("fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
  --brand-h: 262; --accent-h: 28; --chroma: .17;
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-sans);
  --display-weight: 680; --display-tracking: -.025em;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --radius: 12px;
  --radius-sm: calc(var(--radius) * .66); --radius-lg: calc(var(--radius) * 1.34); --radius-xl: calc(var(--radius) * 1.84); --radius-full: 999px;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px; --s10: 72px;
  --t-xs: 12px; --t-sm: 13.5px; --t-base: 15px; --t-md: 17px; --t-lg: 20px; --t-xl: 24px; --t-2xl: 30px; --t-3xl: 38px; --t-4xl: 50px;

  --ease: cubic-bezier(.2, .8, .2, 1); --ease-in-out: cubic-bezier(.65, 0, .35, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
  --fast: 120ms; --dur: 200ms; --slow: 360ms;

  --bg: oklch(98.6% .004 var(--brand-h));
  --surface: oklch(100% 0 0);
  --surface-2: oklch(97.2% .006 var(--brand-h));
  --surface-3: oklch(94.6% .009 var(--brand-h));
  --border: oklch(91.5% .01 var(--brand-h));
  --border-strong: oklch(84% .013 var(--brand-h));
  --text: oklch(22% .02 var(--brand-h));
  --text-2: oklch(44% .022 var(--brand-h));
  --text-3: oklch(60% .018 var(--brand-h));
  --brand: oklch(55% var(--chroma) var(--brand-h));
  --brand-hover: oklch(50% var(--chroma) var(--brand-h));
  --brand-soft: oklch(95.5% calc(var(--chroma) * .22) var(--brand-h));
  --brand-soft-2: oklch(91% calc(var(--chroma) * .38) var(--brand-h));
  --brand-text: oklch(46% var(--chroma) var(--brand-h));
  --on-brand: oklch(99% .01 var(--brand-h));
  --accent: oklch(72% .16 var(--accent-h));
  --accent-soft: oklch(95.5% .04 var(--accent-h));
  --success: oklch(60% .15 152); --success-soft: oklch(95.5% .04 152);
  --warning: oklch(70% .15 72);  --warning-soft: oklch(96% .05 85);
  --danger: oklch(57% .2 27);    --danger-soft: oklch(96% .03 27);
  --overlay: oklch(20% .02 var(--brand-h) / .38);

  --shadow-sm: 0 1px 2px oklch(20% .03 var(--brand-h) / .06);
  --shadow: 0 1px 2px oklch(20% .03 var(--brand-h) / .05), 0 4px 14px -2px oklch(20% .03 var(--brand-h) / .07);
  --shadow-lg: 0 2px 6px oklch(20% .03 var(--brand-h) / .05), 0 18px 48px -8px oklch(20% .04 var(--brand-h) / .18);
  --ring: 0 0 0 3px color-mix(in oklch, var(--brand) 32%, transparent);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --_dark: 1; } }
:root[data-theme="dark"] { --_dark: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: oklch(16% .012 var(--brand-h)); --surface: oklch(20% .014 var(--brand-h)); --surface-2: oklch(23.5% .016 var(--brand-h)); --surface-3: oklch(27.5% .018 var(--brand-h));
  --border: oklch(29% .016 var(--brand-h)); --border-strong: oklch(37% .02 var(--brand-h));
  --text: oklch(96% .006 var(--brand-h)); --text-2: oklch(76% .014 var(--brand-h)); --text-3: oklch(60% .014 var(--brand-h));
  --brand: oklch(68% var(--chroma) var(--brand-h)); --brand-hover: oklch(73% var(--chroma) var(--brand-h));
  --brand-soft: oklch(28% calc(var(--chroma) * .45) var(--brand-h)); --brand-soft-2: oklch(34% calc(var(--chroma) * .6) var(--brand-h));
  --brand-text: oklch(80% calc(var(--chroma) * .8) var(--brand-h)); --on-brand: oklch(15% .03 var(--brand-h));
  --accent-soft: oklch(30% .06 var(--accent-h));
  --success: oklch(72% .15 152); --success-soft: oklch(28% .05 152); --warning: oklch(80% .14 80); --warning-soft: oklch(30% .05 80);
  --danger: oklch(68% .18 25); --danger-soft: oklch(29% .06 25); --overlay: oklch(5% .01 var(--brand-h) / .6);
  --shadow-sm: 0 1px 2px oklch(0% 0 0 / .3); --shadow: 0 1px 2px oklch(0% 0 0 / .3), 0 6px 18px -4px oklch(0% 0 0 / .45);
  --shadow-lg: 0 2px 8px oklch(0% 0 0 / .35), 0 24px 56px -10px oklch(0% 0 0 / .6);
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --bg: oklch(16% .012 var(--brand-h)); --surface: oklch(20% .014 var(--brand-h)); --surface-2: oklch(23.5% .016 var(--brand-h)); --surface-3: oklch(27.5% .018 var(--brand-h));
  --border: oklch(29% .016 var(--brand-h)); --border-strong: oklch(37% .02 var(--brand-h));
  --text: oklch(96% .006 var(--brand-h)); --text-2: oklch(76% .014 var(--brand-h)); --text-3: oklch(60% .014 var(--brand-h));
  --brand: oklch(68% var(--chroma) var(--brand-h)); --brand-hover: oklch(73% var(--chroma) var(--brand-h));
  --brand-soft: oklch(28% calc(var(--chroma) * .45) var(--brand-h)); --brand-soft-2: oklch(34% calc(var(--chroma) * .6) var(--brand-h));
  --brand-text: oklch(80% calc(var(--chroma) * .8) var(--brand-h)); --on-brand: oklch(15% .03 var(--brand-h));
  --accent-soft: oklch(30% .06 var(--accent-h));
  --success: oklch(72% .15 152); --success-soft: oklch(28% .05 152); --warning: oklch(80% .14 80); --warning-soft: oklch(30% .05 80);
  --danger: oklch(68% .18 25); --danger-soft: oklch(29% .06 25); --overlay: oklch(5% .01 var(--brand-h) / .6);
  --shadow-sm: 0 1px 2px oklch(0% 0 0 / .3); --shadow: 0 1px 2px oklch(0% 0 0 / .3), 0 6px 18px -4px oklch(0% 0 0 / .45);
  --shadow-lg: 0 2px 8px oklch(0% 0 0 / .35), 0 24px 56px -10px oklch(0% 0 0 / .6);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overscroll-behavior-y: none; }
body { overscroll-behavior-y: none; }
body {
  margin: 0; min-height: 100dvh; background: var(--bg); color: var(--text);
  font: 400 var(--t-base)/1.55 var(--font-sans); font-feature-settings: "cv11", "ss01", "ss03";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 650; letter-spacing: -.015em; text-wrap: balance; }
h1 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); font-size: var(--t-3xl); line-height: 1.1; }
h2 { font-size: var(--t-xl); } h3 { font-size: var(--t-md); } h4 { font-size: var(--t-base); }
p { margin: 0; text-wrap: pretty; }
a { color: var(--brand-text); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--brand-soft-2); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }
hr, .divider { border: 0; border-top: 1px solid var(--border); margin: var(--s5) 0; }
code, kbd, .mono { font-family: var(--font-mono); font-size: .9em; }
code { background: var(--surface-3); padding: .12em .38em; border-radius: 6px; }
.kbd, kbd { display: inline-block; min-width: 1.6em; padding: 1px 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 6px; background: var(--surface); color: var(--text-2); font-size: var(--t-xs); text-align: center; }
[hidden] { display: none !important; }
.noscript { padding: var(--s7); text-align: center; }

/* ---------- Layout helpers ---------- */
.stack { display: flex; flex-direction: column; gap: var(--gap, var(--s4)); }
.stack-sm { --gap: var(--s2); } .stack-lg { --gap: var(--s7); }
.row { display: flex; align-items: center; gap: var(--gap, var(--s3)); flex-wrap: wrap; }
.row-between { justify-content: space-between; } .row-end { justify-content: flex-end; } .row-nowrap { flex-wrap: nowrap; }
.grid { display: grid; gap: var(--gap, var(--s4)); grid-template-columns: repeat(auto-fill, minmax(var(--min, 260px), 1fr)); }
.grid-2 { display: grid; gap: var(--s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spacer { flex: 1; }
.center { display: grid; place-items: center; }
.muted { color: var(--text-2); } .subtle { color: var(--text-3); }
.text-xs { font-size: var(--t-xs); } .text-sm { font-size: var(--t-sm); } .text-lg { font-size: var(--t-md); }
.bold { font-weight: 600; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 1.15em; height: 1.15em; flex: none; display: inline-block; vertical-align: -.2em; }

/* ---------- App shell ---------- */
.app-shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100dvh; }
.app-nav {
  position: sticky; top: 0; height: 100dvh; display: flex; flex-direction: column; gap: var(--s1);
  padding: var(--s4) var(--s3); border-right: 1px solid var(--border); background: var(--surface-2);
}
.brand { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s2) var(--s5); color: var(--text); font-weight: 700; font-size: var(--t-md); letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-size: 17px; flex: none;
  background: linear-gradient(145deg, var(--brand), oklch(from var(--brand) calc(l - .1) c calc(h + 35)));
  box-shadow: inset 0 1px 0 oklch(100% 0 0 / .25), var(--shadow-sm);
}
.brand-mark svg { width: 20px; height: 20px; overflow: visible; }
.brand-mark .fc-bubble { fill: white; }
.brand-mark .fc-check { fill: none; stroke: var(--brand); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.brand-mark .fc-dot { fill: var(--accent); stroke: oklch(from var(--brand) calc(l - .1) c calc(h + 35)); stroke-width: 1.4; }
.brand-name { font-family: var(--font-display); letter-spacing: var(--display-tracking); }
.nav-link {
  display: flex; align-items: center; gap: var(--s3); padding: 8px 10px; border-radius: var(--radius-sm);
  color: var(--text-2); font-weight: 500; transition: background var(--fast), color var(--fast);
}
.nav-link .icon { width: 18px; height: 18px; margin: 0 5px; opacity: .85; } /* 28px slot: icons and the avatar share one column */
.nav-link:hover { background: var(--surface-3); color: var(--text); text-decoration: none; }
.nav-link[aria-current="page"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--border); }
.nav-link[aria-current="page"] .icon { color: var(--brand); opacity: 1; }
.nav-section { margin: var(--s4) 10px var(--s1); font-size: var(--t-xs); font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.nav-foot { margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--s1); }
.user-button { width: 100%; display: flex; align-items: center; gap: var(--s3); padding: 8px 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); cursor: pointer; text-align: left; font: inherit; }
.user-button .avatar { --size: 28px; font-size: 11px; }
.user-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.user-name { font-weight: 600; font-size: var(--t-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-handle { color: var(--text-3); font-size: var(--t-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-more { flex: none; width: 16px; height: 16px; color: var(--text-3); }
.user-button:hover { background: var(--surface-3); }
.app-main { min-width: 0; }
.page { max-width: var(--page-w, 1120px); margin: 0 auto; padding: var(--s8) var(--s7) var(--s10); animation: rise var(--slow) var(--ease) both; }
.page-narrow { --page-w: 720px; } .page-wide { --page-w: 1360px; }
.page-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: var(--s5); font-size: var(--t-sm); font-weight: 560; color: var(--text-2); }
.page-back:hover { color: var(--text); text-decoration: none; } .page-back .icon { width: 16px; height: 16px; }
.page-header { display: flex; align-items: flex-end; gap: var(--s5); flex-wrap: wrap; margin-bottom: var(--s8); }
.page-header .titles { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: var(--s2); }
.page-title { font-size: var(--t-3xl); }
.lead, .page-header .subtitle { color: var(--text-2); font-size: var(--t-md); line-height: 1.5; max-width: 62ch; }
.page-actions { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; }
.page-body { display: flex; flex-direction: column; gap: var(--s8); }
.eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--brand-text); }
.eyebrow .icon { width: 14px; height: 14px; }
.section { display: flex; flex-direction: column; gap: var(--s4); }
.page-body > .section + .section { padding-top: var(--s2); }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s4); flex-wrap: wrap; }
.section-title { font-size: var(--t-lg); font-weight: 650; letter-spacing: -.01em; }
.section-desc { color: var(--text-2); font-size: var(--t-sm); margin-top: 4px; max-width: 70ch; }
.section-actions { display: flex; gap: var(--s2); align-items: center; }
.section-body { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s6); align-items: start; }
.split-main, .split-aside { display: flex; flex-direction: column; gap: var(--s6); min-width: 0; }
.grid-sm { --min: 200px; } .grid-md { --min: 280px; } .grid-lg { --min: 380px; }
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--s4); }
.meta-row { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); color: var(--text-2); font-size: var(--t-sm); }
.meta-item { display: inline-flex; align-items: center; gap: 6px; } .meta-item .icon { width: 15px; height: 15px; color: var(--text-3); }
.prose { max-width: 68ch; color: var(--text); line-height: 1.7; }
.prose > * + * { margin-top: var(--s4); }
.prose h2 { font-size: var(--t-xl); margin-top: var(--s7); } .prose h3 { font-size: var(--t-md); margin-top: var(--s6); }
.prose ul, .prose ol { padding-left: 1.3em; } .prose li + li { margin-top: var(--s2); }
.prose blockquote { margin: 0; padding: var(--s3) var(--s5); border-left: 3px solid var(--brand); background: var(--brand-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--brand-text); }
.media { margin: 0; display: flex; flex-direction: column; gap: var(--s2); }
.media-frame { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-3); border: 1px solid var(--border); }
.media-frame > img, .media-frame > video, .media-frame > iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.r-16-9 { aspect-ratio: 16 / 9; } .r-4-3 { aspect-ratio: 4 / 3; } .r-1-1 { aspect-ratio: 1; } .r-21-9 { aspect-ratio: 21 / 9; } .r-16-10 { aspect-ratio: 16 / 10; }
.media-caption { font-size: var(--t-sm); color: var(--text-2); }
.callout { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s4); border-radius: var(--radius); background: var(--tone-soft, var(--brand-soft)); color: var(--text); border: 1px solid color-mix(in oklch, var(--tone-c, var(--brand)) 22%, transparent); }
.callout > .icon { color: var(--tone-c, var(--brand)); width: 20px; height: 20px; margin-top: 1px; }
.callout-title { font-weight: 620; } .callout-body { color: var(--text-2); font-size: var(--t-sm); margin-top: 2px; }
.callout-success { --tone-soft: var(--success-soft); --tone-c: var(--success); } .callout-warning { --tone-soft: var(--warning-soft); --tone-c: var(--warning); }
.callout-danger { --tone-soft: var(--danger-soft); --tone-c: var(--danger); } .callout-accent { --tone-soft: var(--accent-soft); --tone-c: var(--accent); }

/* Workspace: full-height tools with fixed column placement */
.workspace { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100dvh; animation: fade-in var(--slow) var(--ease) both; }
.workspace-bar { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s6); border-bottom: 1px solid var(--border); background: var(--surface); min-height: 64px; }
.workspace-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.workspace-title { font-family: var(--font-sans); font-size: var(--t-md); font-weight: 650; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-meta { display: flex; gap: var(--s3); align-items: center; color: var(--text-2); font-size: var(--t-xs); flex-wrap: wrap; }
.workspace-status { display: flex; align-items: center; gap: var(--s3); }
.workspace-actions { display: flex; align-items: center; gap: var(--s2); }
.workspace-body { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; }
.has-left .workspace-body { grid-template-columns: 300px minmax(0, 1fr); }
.has-right .workspace-body { grid-template-columns: minmax(0, 1fr) 360px; }
.has-left.has-right .workspace-body { grid-template-columns: 300px minmax(0, 1fr) 360px; }
.workspace-col { overflow-y: auto; background: var(--surface-2); display: flex; flex-direction: column; }
.workspace-left { border-right: 1px solid var(--border); } .workspace-right { border-left: 1px solid var(--border); }
.workspace-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--bg); }
.panel-block { padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: var(--s3); }
.panel-block:last-child { border-bottom: 0; }
.panel-flush { padding: 0; } .panel-flush .panel-head { padding: var(--s4) var(--s5) 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.panel-title { font-size: var(--t-xs); font-weight: 650; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); }
.panel-body { display: flex; flex-direction: column; gap: var(--s3); font-size: var(--t-sm); }
@media (max-width: 1180px) {
  .has-left.has-right .workspace-body { grid-template-columns: 280px minmax(0, 1fr); }
  .has-left.has-right .workspace-right { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--border); }
  .workspace { height: auto; min-height: 100dvh; }
}
@media (max-width: 860px) {
  .workspace-body, .has-left .workspace-body, .has-right .workspace-body, .has-left.has-right .workspace-body { grid-template-columns: 1fr; }
  .workspace-left { border-right: 0; border-bottom: 1px solid var(--border); }
  .workspace-bar { flex-wrap: wrap; padding: var(--s3) var(--s4); }
  .split { grid-template-columns: 1fr; }
}
.topbar { display: none; }

@media (max-width: 760px) {
  .app-shell { grid-template-columns: 1fr; }
  .topbar {
    display: flex; align-items: center; gap: var(--s3); position: sticky; top: 0; z-index: 20; padding: 10px var(--s4);
    padding-top: max(10px, env(safe-area-inset-top)); background: color-mix(in oklch, var(--bg) 82%, transparent);
    backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid var(--border);
  }
  .topbar .brand { padding: 0; }
  .app-nav {
    position: fixed; inset: auto 0 0 0; top: auto; height: auto; z-index: 30; flex-direction: row; justify-content: space-around; gap: 0;
    padding: 6px 6px max(6px, env(safe-area-inset-bottom)); border-right: 0; border-top: 1px solid var(--border);
    background: color-mix(in oklch, var(--surface) 88%, transparent); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  }
  .app-nav .brand, .app-nav .nav-section, .app-nav .nav-foot, .app-nav .nav-secondary { display: none; }
  .nav-link { flex: 1; flex-direction: column; gap: 3px; padding: 6px 4px; font-size: 11px; max-width: 96px; text-align: center; }
  .nav-link .icon { width: 22px; height: 22px; }
  .nav-link[aria-current="page"] { background: none; box-shadow: none; color: var(--brand-text); }
  .page { padding: var(--s6) var(--s4) calc(var(--s10) + 40px); }
  .page-header { margin-bottom: var(--s6); } .page-body { gap: var(--s7); }
  h1 { font-size: var(--t-2xl); }
  .grid-2 { grid-template-columns: 1fr; }
  .workspace { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
}

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--surface); --btn-fg: var(--text); --btn-border: var(--border-strong);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: var(--radius-sm); border: 1px solid var(--btn-border);
  background: var(--btn-bg); color: var(--btn-fg); font-weight: 560; font-size: var(--t-sm); white-space: nowrap;
  cursor: pointer; user-select: none; box-shadow: var(--shadow-sm); text-decoration: none;
  transition: background var(--fast), border-color var(--fast), transform var(--fast) var(--ease), box-shadow var(--fast), opacity var(--fast);
}
.btn:hover { text-decoration: none; background: color-mix(in oklch, var(--btn-bg) 92%, var(--text)); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn .icon { width: 16px; height: 16px; }
.btn-primary { --btn-bg: var(--brand); --btn-fg: var(--on-brand); --btn-border: transparent; box-shadow: var(--shadow-sm), inset 0 1px 0 oklch(100% 0 0 / .18); }
.btn-primary:hover { background: var(--brand-hover); }
.btn-soft { --btn-bg: var(--brand-soft); --btn-fg: var(--brand-text); --btn-border: transparent; box-shadow: none; }
.btn-soft:hover { background: var(--brand-soft-2); }
.btn-ghost { --btn-bg: transparent; --btn-border: transparent; box-shadow: none; color: var(--text-2); }
.btn-ghost:hover { background: var(--surface-3); color: var(--text); }
.btn-danger { --btn-bg: var(--danger); --btn-fg: white; --btn-border: transparent; }
.btn-danger:hover { background: oklch(from var(--danger) calc(l - .05) c h); }
.btn-sm { height: 30px; padding: 0 11px; font-size: var(--t-xs); gap: 6px; border-radius: calc(var(--radius-sm) * .85); }
.btn-lg { height: 46px; padding: 0 22px; font-size: var(--t-base); border-radius: var(--radius); }
.btn-icon { width: 38px; padding: 0; } .btn-icon.btn-sm { width: 30px; }
.btn-block { width: 100%; }
.btn[aria-busy="true"] { color: transparent !important; pointer-events: none; }
.btn[aria-busy="true"]::after {
  content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--btn-fg); border-right-color: transparent; animation: spin .7s linear infinite;
}

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label, .label { font-size: var(--t-sm); font-weight: 560; color: var(--text); }
.hint { font-size: var(--t-xs); color: var(--text-3); }
.field-error { font-size: var(--t-xs); color: var(--danger); min-height: 0; }
.input, .field input:not([type="checkbox"]):not([type="radio"]), .field textarea, .field select, .input-bare {
  width: 100%; height: 40px; padding: 0 12px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm) inset; outline: none;
  transition: border-color var(--fast), box-shadow var(--fast);
}
.field textarea, textarea.input { height: auto; min-height: 96px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.field select, select.input { appearance: none; padding-right: 34px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-3) 50%), linear-gradient(135deg, var(--text-3) 50%, transparent 50%);
  background-position: calc(100% - 17px) 17px, calc(100% - 12px) 17px; background-size: 5px 5px; background-repeat: no-repeat; }
.input::placeholder, .field input::placeholder, .field textarea::placeholder { color: var(--text-3); }
.input:hover, .field input:hover, .field textarea:hover, .field select:hover { border-color: color-mix(in oklch, var(--border-strong) 60%, var(--text-3)); }
.input:focus, .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--brand); box-shadow: var(--ring); }
.field[data-invalid] input, .field[data-invalid] textarea, .field[data-invalid] select { border-color: var(--danger); }
.form { display: flex; flex-direction: column; gap: var(--s4); }
.form-actions { display: flex; gap: var(--s3); justify-content: flex-end; margin-top: var(--s2); }
.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--t-sm); }
.check input { appearance: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--border-strong); border-radius: 5px; background: var(--surface); display: grid; place-items: center; transition: all var(--fast); cursor: pointer; }
.check input:checked { background: var(--brand); border-color: var(--brand); }
.check input:checked::after { content: ""; width: 5px; height: 9px; border: solid var(--on-brand); border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.check input:focus-visible { box-shadow: var(--ring); outline: none; }
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: var(--t-sm); }
.switch input { appearance: none; margin: 0; width: 38px; height: 22px; border-radius: 99px; background: var(--surface-3); border: 1px solid var(--border-strong); position: relative; cursor: pointer; transition: background var(--dur) var(--ease); }
.switch input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: white; box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--spring); }
.switch input:checked { background: var(--brand); border-color: var(--brand); }
.switch input:checked::after { transform: translateX(16px); }
.switch input:focus-visible { box-shadow: var(--ring); outline: none; }
input[type="range"].range { width: 100%; height: 22px; background: transparent; appearance: none; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: var(--surface-3); }
.range::-moz-range-track { height: 6px; border-radius: 99px; background: var(--surface-3); }
.range::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: var(--surface); border: 2px solid var(--brand); box-shadow: var(--shadow-sm); transition: transform var(--fast) var(--ease); }
.range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--surface); border: 2px solid var(--brand); }
.range:focus-visible { outline: none; } .range:focus-visible::-webkit-slider-thumb { box-shadow: var(--ring); } .range:active::-webkit-slider-thumb { transform: scale(1.12); }
.segmented { display: inline-flex; padding: 3px; gap: 2px; border-radius: calc(var(--radius-sm) + 3px); background: var(--surface-3); }
.segmented button { border: 0; background: none; padding: 6px 12px; border-radius: var(--radius-sm); color: var(--text-2); font-weight: 550; font-size: var(--t-sm); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.segmented button[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* ---------- Surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s5); box-shadow: var(--shadow-sm); }
.card-flush { padding: 0; overflow: hidden; }
.card { display: flex; flex-direction: column; gap: var(--s3); }
.card-head { display: flex; align-items: flex-start; gap: var(--s3); }
.card-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); display: grid; place-items: center; flex: none; background: color-mix(in oklch, var(--tone, var(--brand)) 14%, transparent); color: var(--tone, var(--brand)); }
.card-icon .icon { width: 18px; height: 18px; }
.card-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.card-subtitle { color: var(--text-2); font-size: var(--t-sm); }
.card-actions { display: flex; gap: var(--s2); align-items: center; }
.card-body { display: flex; flex-direction: column; gap: var(--s3); color: var(--text); font-size: var(--t-base); }
.card-meta { margin-top: auto; }
.card-footer { margin-top: auto; padding-top: var(--s3); border-top: 1px solid var(--border); display: flex; align-items: center; gap: var(--s3); }
.card-interactive { cursor: pointer; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur); color: inherit; }
.card-interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--border-strong); text-decoration: none; }
.card-title { font-size: var(--t-md); font-weight: 620; letter-spacing: -.01em; line-height: 1.3; }
.card-media { aspect-ratio: 16 / 9; background: var(--surface-3); object-fit: cover; width: 100%; }
.panel { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--s5); }
.banner { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--radius); background: var(--brand-soft); color: var(--brand-text); font-size: var(--t-sm); }
.banner-warning { background: var(--warning-soft); color: oklch(from var(--warning) calc(l - .25) c h); }
.banner-danger { background: var(--danger-soft); color: var(--danger); }
.banner-success { background: var(--success-soft); color: oklch(from var(--success) calc(l - .12) c h); }

/* ---------- Data display ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--radius-full); font-size: var(--t-xs); font-weight: 580; background: var(--surface-3); color: var(--text-2); white-space: nowrap; }
.badge-brand { background: var(--brand-soft); color: var(--brand-text); }
.badge-success { background: var(--success-soft); color: oklch(from var(--success) calc(l - .1) c h); }
.badge-warning { background: var(--warning-soft); color: oklch(from var(--warning) calc(l - .28) c h); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }
:root[data-theme="dark"] .badge-success, :root[data-theme="dark"] .badge-warning { color: inherit; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--radius-full); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-2); font-size: var(--t-sm); font-weight: 520; cursor: pointer; transition: all var(--fast); }
.chip:hover { border-color: var(--text-3); color: var(--text); }
.chip[aria-pressed="true"] { background: var(--brand-soft); border-color: color-mix(in oklch, var(--brand) 45%, transparent); color: var(--brand-text); }
.avatar { --size: 32px; width: var(--size); height: var(--size); border-radius: 50%; flex: none; display: grid; place-items: center; font-size: calc(var(--size) * .4); font-weight: 650; color: white; background: var(--brand); letter-spacing: 0; overflow: hidden; }
.avatar-lg { --size: 56px; } .avatar-sm { --size: 24px; }
.avatars { display: flex; } .avatars .avatar { box-shadow: 0 0 0 2px var(--surface); margin-left: -6px; } .avatars .avatar:first-child { margin-left: 0; }
.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-value { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.stat-label { color: var(--text-2); font-size: var(--t-sm); }
.list { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.list-item { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); min-height: 56px; border-top: 1px solid var(--border); color: inherit; transition: background var(--fast); }
.list-item:first-child { border-top: 0; }
a.list-item:hover, .list-item[data-clickable]:hover { background: var(--surface-2); text-decoration: none; cursor: pointer; }
.list-item .grow { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.list-item .title { font-weight: 560; } .list-item .meta { font-size: var(--t-sm); color: var(--text-2); }
.list-icon { width: 36px; height: 36px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--brand-soft); color: var(--brand-text); flex: none; }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.table th { text-align: left; font-weight: 600; color: var(--text-2); font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .05em; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.table td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.tabs { display: flex; gap: var(--s5); border-bottom: 1px solid var(--border); margin-bottom: var(--s5); overflow-x: auto; scrollbar-width: none; }
.tabs button, .tabs a { border: 0; background: none; padding: 10px 0; margin-bottom: -1px; color: var(--text-2); font-weight: 550; border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; }
.tabs [aria-selected="true"], .tabs [aria-current="page"] { color: var(--text); border-bottom-color: var(--brand); }
.progress { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.progress > span { display: block; height: 100%; width: var(--value, 0%); background: var(--brand); border-radius: inherit; transition: width var(--slow) var(--ease); }

/* ---------- Feedback ---------- */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s3); padding: var(--s9) var(--s5); border: 1.5px dashed var(--border-strong); border-radius: var(--radius-xl); background: var(--surface-2); }
.empty-icon { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--surface); color: var(--brand); box-shadow: var(--shadow); font-size: 26px; margin-bottom: var(--s2); }
.empty-icon .icon { width: 26px; height: 26px; }
.grid > .empty, .grid-2 > .empty { grid-column: 1 / -1; }
.empty h3 { font-size: var(--t-lg); } .empty p { color: var(--text-2); max-width: 42ch; }
.skeleton { border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 45%, var(--surface-3) 65%) 0 0 / 300% 100%; animation: shimmer 1.4s var(--ease-in-out) infinite; min-height: 14px; }
.skeleton-card { height: 120px; border-radius: var(--radius-lg); }
.spinner { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--brand); animation: spin .7s linear infinite; }
.loading-page { display: grid; place-items: center; min-height: 40vh; }
#toasts { position: fixed; z-index: 100; bottom: max(var(--s5), env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: var(--s2); pointer-events: none; width: min(440px, calc(100vw - 32px)); }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 11px 14px 11px 12px; border-radius: var(--radius); background: var(--text); color: var(--bg); box-shadow: var(--shadow-lg); font-weight: 520; font-size: var(--t-sm); animation: toast-in var(--slow) var(--spring); max-width: 100%; }
.toast .icon { width: 18px; height: 18px; }
.toast-success .icon { color: oklch(78% .17 152); } .toast-error .icon { color: oklch(72% .18 25); }
.toast.leaving { animation: toast-out var(--dur) var(--ease) forwards; }
@media (max-width: 760px) { #toasts { bottom: calc(80px + env(safe-area-inset-bottom)); } }

/* ---------- Dialogs & menus ---------- */
dialog.modal { width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 64px); padding: 0; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg); overflow: auto; }
dialog.modal[open] { animation: modal-in var(--slow) var(--spring); }
dialog.modal::backdrop { background: var(--overlay); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: fade-in var(--dur) var(--ease); }
.modal-body { padding: var(--s6); display: flex; flex-direction: column; gap: var(--s4); }
.modal-title { font-size: var(--t-lg); font-weight: 650; }
.modal-actions { display: flex; gap: var(--s3); justify-content: flex-end; padding: var(--s4) var(--s6); background: var(--surface-2); border-top: 1px solid var(--border); }
@media (max-width: 760px) { dialog.modal { margin: auto auto 0; width: 100%; max-width: 100%; border-radius: var(--radius-xl) var(--radius-xl) 0 0; } dialog.modal[open] { animation: sheet-in var(--slow) var(--ease); } .modal-actions { padding-bottom: max(var(--s4), env(safe-area-inset-bottom)); } }
.menu { position: fixed; z-index: 90; min-width: 200px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); animation: menu-in var(--dur) var(--ease); }
.menu button, .menu a { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 0; background: none; border-radius: var(--radius-sm); color: var(--text); font-size: var(--t-sm); text-align: left; cursor: pointer; }
.menu button:hover, .menu a:hover, .menu button:focus-visible { background: var(--surface-3); text-decoration: none; outline: none; }
.menu .danger { color: var(--danger); }
.menu hr { margin: 6px 0; }
.menu-label { padding: 8px 10px 6px; font-size: var(--t-xs); color: var(--text-3); }

/* ---------- Auth pages ---------- */
.auth { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, 1fr); min-height: 100dvh; }
.auth-art {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: var(--s8); color: white;
  background:
    radial-gradient(60% 55% at 18% 22%, oklch(72% .17 calc(var(--brand-h) + 40) / .9), transparent 70%),
    radial-gradient(55% 60% at 88% 18%, oklch(74% .16 var(--accent-h) / .85), transparent 70%),
    radial-gradient(70% 70% at 70% 95%, oklch(48% .2 var(--brand-h)), transparent 70%),
    linear-gradient(160deg, oklch(42% .17 var(--brand-h)), oklch(28% .12 calc(var(--brand-h) + 20)));
}
.auth-art::after { content: ""; position: absolute; inset: 0; opacity: .22; mix-blend-mode: overlay; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.auth-art .brand { color: white; padding: 0; position: relative; z-index: 1; }
.auth-art .brand-mark { background: oklch(100% 0 0 / .18); box-shadow: inset 0 0 0 1px oklch(100% 0 0 / .25); backdrop-filter: blur(8px); }
.auth-pitch { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--s4); max-width: 30ch; }
.auth-pitch h1 { font-size: clamp(34px, 4.4vw, 56px); color: white; }
.auth-pitch p { font-size: var(--t-md); color: oklch(100% 0 0 / .82); }
.auth-foot { position: relative; z-index: 1; font-size: var(--t-xs); color: oklch(100% 0 0 / .7); display: flex; gap: var(--s2); align-items: center; }
.auth-panel { display: grid; place-items: center; padding: var(--s8) var(--s6); background: var(--bg); }
.auth-card { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: var(--s6); animation: rise var(--slow) var(--ease); }
.auth-card h2 { font-size: var(--t-2xl); font-family: var(--font-display); letter-spacing: var(--display-tracking); }
.auth-switch { text-align: center; color: var(--text-2); font-size: var(--t-sm); }
.link-button { border: 0; background: none; padding: 0; color: var(--brand-text); font-weight: 560; cursor: pointer; font-size: inherit; }
.link-button:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .auth-art { min-height: 220px; padding: var(--s6); gap: var(--s6); }
  .auth-pitch h1 { font-size: var(--t-3xl); }
  .auth-foot { display: none; }
}

/* ---------- Boot & errors ---------- */
.boot { min-height: 100dvh; display: grid; place-items: center; }
.boot::after { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--brand); animation: spin .7s linear infinite; }
.crash { border-color: color-mix(in oklch, var(--danger) 35%, var(--border)); background: var(--danger-soft); }
.dev-banner { position: fixed; z-index: 200; left: 12px; right: 12px; bottom: 12px; max-width: 640px; margin: auto; padding: 12px 14px; border-radius: var(--radius); background: oklch(25% .05 25); color: white; font-size: var(--t-sm); box-shadow: var(--shadow-lg); }
.dev-banner code { background: oklch(100% 0 0 / .12); }

/* ---------- Conversation (shared by every chat-like screen) ---------- */
.chat { display: flex; flex-direction: column; gap: var(--s3); }
.chat-msg { display: flex; gap: var(--s3); align-items: flex-end; max-width: min(640px, 88%); animation: rise var(--dur) var(--ease) both; }
.chat-msg.from-me { align-self: flex-end; flex-direction: row-reverse; }
.chat-bubble { padding: 10px 14px; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-sm); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-msg:not(.from-me) .chat-bubble { border-bottom-left-radius: var(--radius-sm); }
.from-me .chat-bubble { background: var(--brand); color: var(--on-brand); border-color: transparent; border-bottom-right-radius: var(--radius-sm); }
.chat-name { font-size: var(--t-xs); color: var(--text-3); margin-bottom: 3px; font-weight: 560; }
.from-me .chat-name { text-align: right; }
.chat-event { align-self: center; display: inline-flex; align-items: center; gap: 6px; max-width: 92%; padding: 5px 12px; border-radius: var(--radius-full); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); font-size: var(--t-xs); text-align: center; animation: fade-in var(--dur) var(--ease) both; }
.chat-event.ok { background: var(--success-soft); border-color: color-mix(in oklch, var(--success) 25%, transparent); color: oklch(from var(--success) calc(l - .12) c h); }
.chat-event.blocked { background: var(--danger-soft); border-color: color-mix(in oklch, var(--danger) 25%, transparent); color: var(--danger); }
:root[data-theme="dark"] .chat-event.ok { color: var(--success); }
.chat-event .icon { width: 14px; height: 14px; flex: none; }
.typing-dots { display: inline-flex; gap: 4px; padding: 4px 2px; }
.typing-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); animation: typing 1.1s var(--ease-in-out) infinite; }
.typing-dots i:nth-child(2) { animation-delay: .15s; } .typing-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
.composer { display: flex; gap: var(--s2); align-items: flex-end; padding: var(--s3); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); transition: border-color var(--fast), box-shadow var(--fast); }
.composer:focus-within { border-color: var(--brand); box-shadow: var(--ring); }
.composer textarea { flex: 1; border: 0; outline: none; resize: none; background: transparent; min-height: 24px; max-height: 160px; line-height: 1.5; padding: 6px 4px; font: inherit; color: var(--text); }
.quote { padding: var(--s3) var(--s4); border-left: 3px solid var(--brand); background: var(--brand-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--brand-text); font-weight: 520; }
.quote-muted { border-left-color: var(--border-strong); background: var(--surface-2); color: var(--text-2); font-weight: 450; }

/* ---------- KPIs & charts ---------- */
.kpi { display: flex; flex-direction: column; gap: 6px; padding: var(--s4) var(--s5); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.kpi-label { font-size: var(--t-sm); color: var(--text-2); font-weight: 520; }
.kpi-icon { color: var(--text-3); width: 18px; height: 18px; }
.kpi-value { font-family: var(--font-display); font-size: var(--t-2xl); font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.kpi-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 2px var(--s3); font-size: var(--t-xs); }
.kpi-foot > * { white-space: nowrap; }
.kpi-row + .meta-row, .kpi-row + * > .meta-row { margin-top: var(--s4); }
.kpi-delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 620; }
.kpi-delta .icon { width: 13px; height: 13px; }
.kpi-up { color: oklch(from var(--success) calc(l - .06) c h); } .kpi-down { color: var(--danger); } .kpi-flat { color: var(--text-2); }
.tone-brand { --tone: var(--brand); } .tone-success { --tone: var(--success); } .tone-warning { --tone: var(--warning); } .tone-danger { --tone: var(--danger); } .tone-muted { --tone: var(--text-3); } .tone-accent { --tone: var(--accent); }
.chart-ring { position: relative; display: inline-grid; place-items: center; }
.chart-ring svg { display: block; }
.chart-track { stroke: var(--surface-3); }
.chart-arc { stroke: var(--tone); transition: stroke-dashoffset 900ms var(--ease); animation: ring-in 900ms var(--ease) both; }
.chart-ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.chart-ring-label b { font-family: var(--font-display); font-size: 1.6em; font-weight: 680; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.chart-ring-label span { font-size: var(--t-xs); color: var(--text-2); margin-top: 2px; }
@keyframes ring-in { from { stroke-dashoffset: 1000; } }
.chart-bars { display: flex; flex-direction: column; gap: var(--s3); }
.chart-bar-head { display: flex; justify-content: space-between; gap: var(--s3); font-size: var(--t-sm); margin-bottom: 5px; }
.chart-bar-label { color: var(--text); font-weight: 520; } .chart-bar-value { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.chart-bar { display: block; width: 100%; height: 8px; overflow: visible; }
.chart-track-fill { fill: var(--surface-3); }
.chart-bar-fill { fill: var(--tone); animation: bar-in 800ms var(--ease) both; transform-origin: left; }
@keyframes bar-in { from { transform: scaleX(0); } }
.chart-radar { max-width: 320px; display: block; margin: auto; overflow: visible; }
.chart-grid { fill: none; stroke: var(--border); stroke-width: 1; }
.chart-radar-shape { fill: color-mix(in oklch, var(--brand) 22%, transparent); stroke: var(--brand); stroke-width: 2; stroke-linejoin: round; animation: pop var(--slow) var(--spring) both; transform-origin: center; }
.chart-radar-label { font-size: 11px; fill: var(--text-2); font-weight: 560; }
.chart-spark polyline { stroke: var(--brand); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.chart-columns { display: flex; flex-direction: column; gap: 6px; }
.chart-col { fill: var(--tone); opacity: .9; } .chart-col:hover { opacity: 1; }
.chart-col-labels { display: flex; } .chart-col-labels span { flex: 1; text-align: center; font-size: 10.5px; color: var(--text-3); overflow: hidden; white-space: nowrap; }

.chart-key { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--tone); vertical-align: -1px; margin-right: 6px; }
.chart-key.is-dashed { height: 0; border-top: 2px dashed var(--tone); background: none; border-radius: 0; vertical-align: 3px; }
/* waterfall */
.chart-waterfall { display: flex; flex-direction: column; gap: 6px; }
.chart-wf-values { display: flex; } .chart-wf-values span { flex: 1; min-width: 0; text-align: center; font-size: var(--t-xs); font-weight: 620; font-variant-numeric: tabular-nums; white-space: nowrap; }
.chart-wf-values .is-down { color: oklch(from var(--success) calc(l - .06) c h); } .chart-wf-values .is-total { color: var(--text); }
.chart-wf-bar { fill: var(--tone); animation: wf-in 700ms var(--ease) both; transform-origin: bottom; transform-box: fill-box; }
@keyframes wf-in { from { transform: scaleY(0); } }
.chart-wf-link { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.chart-wf-labels span { white-space: normal; line-height: 1.25; padding: 0 2px; font-size: 11px; }
/* tornado */
.chart-tornado { display: flex; flex-direction: column; gap: var(--s3); }
.chart-tornado-legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--t-xs); }
.chart-tornado-row { display: grid; grid-template-columns: minmax(140px, 32%) minmax(0, 1fr); gap: 2px var(--s4); align-items: center; }
.chart-tornado-label { display: flex; flex-direction: column; font-size: var(--t-sm); font-weight: 540; line-height: 1.3; }
.chart-tornado-label .subtle { font-size: var(--t-xs); font-weight: 450; }
.chart-tornado-bar { width: 100%; height: 22px; overflow: visible; }
.chart-tornado-fill { fill: var(--tone); animation: bar-in 700ms var(--ease) both; transform-box: fill-box; }
.chart-tornado-base { stroke: var(--text-2); stroke-width: 1.5; }
.chart-tornado-range { grid-column: 2; display: flex; justify-content: space-between; font-size: var(--t-xs); color: var(--text-2); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .chart-tornado-row { grid-template-columns: 1fr; } .chart-tornado-range { grid-column: 1; } }
/* heatmap */
.chart-heatmap { overflow-x: auto; }
.chart-heat-table th[scope="row"] { font-weight: 560; color: var(--text); white-space: nowrap; text-transform: none; letter-spacing: 0; font-size: var(--t-sm); }
.chart-heat-table thead th { text-align: center; }
.chart-heat { text-align: center; font-variant-numeric: tabular-nums; font-weight: 560; border: 2px solid var(--surface); border-radius: var(--radius-sm); }
.heat-0 { background: var(--surface-2); color: var(--text-3); } .heat-1 { background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
.heat-2 { background: color-mix(in srgb, var(--brand) 22%, var(--surface)); } .heat-3 { background: color-mix(in srgb, var(--brand) 38%, var(--surface)); }
.heat-4 { background: color-mix(in srgb, var(--brand) 60%, var(--surface)); color: var(--on-brand); }
.chart-heat-total { text-align: center; font-weight: 650; font-variant-numeric: tabular-nums; border-top: 2px solid var(--border-strong); }
.chart-heat-table tfoot th { border-top: 2px solid var(--border-strong); } .heat-5 { background: var(--brand); color: var(--on-brand); }
/* lines */
.chart-lines { display: flex; flex-direction: column; gap: var(--s2); }
.chart-lines-legend { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); font-size: var(--t-xs); color: var(--text-2); }
.chart-lines-plot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s2); }
.chart-lines-axis { display: flex; flex-direction: column; justify-content: space-between; font-size: 11px; font-variant-numeric: tabular-nums; padding: 2px 0; }
.chart-line { stroke: var(--tone); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.chart-line.is-dashed { stroke-dasharray: 5 4; }
.chart-lines-marker { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 4 4; }
.chart-lines-x { display: flex; justify-content: space-between; gap: var(--s2); font-size: 11px; padding-left: var(--s7); }
/* driver tree */
.tree { overflow-x: auto; padding: var(--s1) 0 var(--s2); --tree-gap: var(--s6); }
.tree ul { list-style: none; margin: 0; padding: 0; }
.tree-branch { display: flex; align-items: center; }
.tree-children { display: flex; flex-direction: column; gap: var(--s2); padding-left: var(--tree-gap); position: relative; }
.tree-children::before { content: ""; position: absolute; left: 0; top: 50%; width: calc(var(--tree-gap) / 2); border-top: 1px solid var(--border-strong); }
.tree-children > li { position: relative; }
.tree-children > li::before { content: ""; position: absolute; left: calc(var(--tree-gap) / -2); top: 50%; width: calc(var(--tree-gap) / 2); border-top: 1px solid var(--border-strong); }
.tree-children > li::after { content: ""; position: absolute; left: calc(var(--tree-gap) / -2); top: 0; bottom: 0; border-left: 1px solid var(--border-strong); }
.tree-children > li:first-child::after { top: 50%; } .tree-children > li:last-child::after { bottom: 50%; } .tree-children > li:only-child::after { display: none; }
.tree-card { flex: none; min-width: 148px; max-width: 196px; display: flex; flex-direction: column; gap: 2px; padding: var(--s2) var(--s3); background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--tone, var(--brand)); border-radius: var(--radius-sm); box-shadow: var(--shadow-sm); }
.tree-card.is-leaf { background: var(--surface-2); border-left-color: var(--tone, var(--border-strong)); }
.tree-card[data-ref] { cursor: pointer; transition: border-color var(--fast), box-shadow var(--fast); } .tree-card[data-ref]:hover { box-shadow: var(--shadow); border-color: var(--border-strong); }
.tree-card[data-ref]:focus-visible { outline: none; box-shadow: var(--ring); }
.tree-label { font-size: var(--t-xs); color: var(--text-2); font-weight: 540; line-height: 1.3; }
.tree-value { font-weight: 650; font-variant-numeric: tabular-nums; }
.tree-note { font-size: 11px; color: var(--text-3); line-height: 1.3; }
.tree-card .badge { align-self: flex-start; margin-top: 2px; height: 18px; font-size: 10.5px; }
@media (max-width: 760px) {
  .tree { --tree-gap: var(--s5); }
  .tree-branch { flex-direction: column; align-items: stretch; }
  .tree-children { padding-left: var(--tree-gap); margin-top: var(--s2); }
  .tree-children::before { display: none; }
  .tree-card { max-width: none; }
  .tree-children > li::before { top: 22px; } .tree-children > li:first-child::after { top: 0; } .tree-children > li:last-child::after { bottom: auto; height: 22px; }
}
/* roadmap */
.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 1fr); gap: var(--s4); overflow-x: auto; }
.timeline-phase { display: flex; flex-direction: column; gap: var(--s3); }
.timeline-rail { position: relative; height: 14px; }
.timeline-rail::before { content: ""; position: absolute; left: 0; right: calc(-1 * var(--s4)); top: 6px; border-top: 2px solid var(--border-strong); }
.timeline-phase:last-child .timeline-rail::before { right: 0; }
.timeline-dot { position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--surface); border: 2px solid var(--brand); }
.timeline-phase.is-current .timeline-dot { background: var(--brand); box-shadow: var(--ring); }
.timeline-body { display: flex; flex-direction: column; gap: var(--s2); }
.timeline-when { font-size: var(--t-xs); font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-text); }
.timeline-title { font-weight: 620; }
.timeline-items { margin: 0; padding-left: 1.1em; font-size: var(--t-sm); color: var(--text-2); display: flex; flex-direction: column; gap: 2px; }
.timeline-gate { margin-top: var(--s1); padding: var(--s3); border: 1px dashed color-mix(in oklch, var(--brand) 45%, var(--border)); border-radius: var(--radius-sm); background: var(--brand-soft); font-size: var(--t-xs); }
.timeline-gate-title { display: flex; align-items: center; gap: 6px; font-weight: 650; color: var(--brand-text); margin-bottom: 4px; } .timeline-gate-title .icon { width: 13px; height: 13px; }
.timeline-gate ul { margin: 0; padding-left: 1.1em; color: var(--text-2); }
@media (max-width: 760px) {
  .timeline { grid-auto-flow: row; grid-auto-columns: auto; gap: 0; }
  .timeline-phase { flex-direction: row; gap: var(--s3); padding-bottom: var(--s5); }
  .timeline-rail { height: auto; width: 14px; flex: none; }
  .timeline-rail::before { left: 6px; right: auto; top: 0; bottom: calc(-1 * var(--s5)); border-top: 0; border-left: 2px solid var(--border-strong); }
  .timeline-phase:last-child .timeline-rail::before { display: none; }
}
/* details (copy budget: depth on demand) */
.details { border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.details > summary { cursor: pointer; padding: var(--s3) var(--s5); font-weight: 600; font-size: var(--t-sm); display: flex; align-items: center; gap: var(--s2); list-style: none; }
.details > summary::-webkit-details-marker { display: none; }
.details > summary .icon { color: var(--text-3); }
.details[open] > summary { border-bottom: 1px solid var(--border); }
.details-chev { margin-left: auto; transition: transform var(--dur) var(--ease); } .details[open] .details-chev { transform: rotate(180deg); }
.details-body { padding: var(--s4) var(--s5); display: flex; flex-direction: column; gap: var(--s3); font-size: var(--t-sm); }
.details-inline { border: 0; background: none; } .details-inline > summary { padding: 0; font-weight: 520; color: var(--text-2); } .details-inline[open] > summary { border: 0; } .details-inline .details-body { padding: var(--s2) 0 0; }
/* guided tour */
.tour { position: fixed; inset: 0; z-index: 150; pointer-events: none; } /* the spotlighted element stays usable */
.tour-spot { position: fixed; border-radius: var(--radius); box-shadow: 0 0 0 9999px var(--overlay); outline: 2px solid var(--brand); outline-offset: 2px; pointer-events: none; transition: all var(--slow) var(--ease); }
.tour.no-target .tour-spot { left: 50% !important; top: 50% !important; width: 0 !important; height: 0 !important; outline: 0; }
.tour-card { pointer-events: auto; position: fixed; width: min(340px, calc(100vw - 16px)); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s2); background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); transition: left var(--slow) var(--ease), top var(--slow) var(--ease), opacity var(--dur); outline: none; }
.tour.is-moving .tour-card { opacity: .0; }
.tour-count { font-size: var(--t-xs); font-weight: 600; } .tour-title { font-weight: 650; font-size: var(--t-md); } .tour-text { color: var(--text-2); font-size: var(--t-sm); }
.tour-actions { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); }
/* listening pulse (voice), uses the existing ring token */
.pulse { animation: pulse 1.4s var(--ease-in-out) infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--danger) 45%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in oklch, var(--danger) 0%, transparent); } }
.print-only { display: none; }

/* ---------- Ambient network background (very subtle, slow; brand-colored; off for reduced motion) ---------- */
:root { --net: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='240'%20height='240'%3E%3Cpath%20d='M18%2024L86%2012M86%2012L150%2044M150%2044L214%2020M18%2024L48%2088M86%2012L118%2096M150%2044L118%2096M150%2044L190%20110M214%2020L226%2074M190%20110L226%2074M48%2088L118%2096M118%2096L190%20110M48%2088L24%20156M118%2096L92%20170M118%2096L160%20150M190%20110L160%20150M24%20156L92%20170M92%20170L160%20150M160%20150L212%20196M24%20156L60%20222M92%20170L60%20222M92%20170L130%20226M160%20150L130%20226M212%20196L130%20226M190%20110L212%20196'%20stroke='black'%20stroke-width='1.2'%20fill='none'/%3E%3Cg%20fill='black'%3E%3Ccircle%20cx='18'%20cy='24'%20r='1.8'/%3E%3Ccircle%20cx='86'%20cy='12'%20r='1.8'/%3E%3Ccircle%20cx='150'%20cy='44'%20r='1.8'/%3E%3Ccircle%20cx='214'%20cy='20'%20r='1.8'/%3E%3Ccircle%20cx='48'%20cy='88'%20r='1.8'/%3E%3Ccircle%20cx='118'%20cy='96'%20r='2.8'/%3E%3Ccircle%20cx='190'%20cy='110'%20r='1.8'/%3E%3Ccircle%20cx='226'%20cy='74'%20r='1.8'/%3E%3Ccircle%20cx='24'%20cy='156'%20r='1.8'/%3E%3Ccircle%20cx='92'%20cy='170'%20r='1.8'/%3E%3Ccircle%20cx='160'%20cy='150'%20r='2.8'/%3E%3Ccircle%20cx='212'%20cy='196'%20r='1.8'/%3E%3Ccircle%20cx='60'%20cy='222'%20r='1.8'/%3E%3Ccircle%20cx='130'%20cy='226'%20r='1.8'/%3E%3C/g%3E%3C/svg%3E"); }
body::before, body::after {
  content: ""; position: fixed; inset: -320px; z-index: -1; pointer-events: none; background: var(--brand);
  -webkit-mask: var(--net) 0 0 / 2400px 2400px repeat; mask: var(--net) 0 0 / 2400px 2400px repeat;
  opacity: .08; animation: net-drift 70s var(--ease-in-out) infinite alternate; will-change: transform;
  translate: 0 calc(var(--net-y, 0) * 1px); transition: opacity var(--slow) var(--ease);
}
body::after { -webkit-mask: var(--net2, var(--net)) 0 0 / 2800px 2800px repeat; mask: var(--net2, var(--net)) 0 0 / 2800px 2800px repeat; opacity: .05; animation: net-drift-b 95s var(--ease-in-out) infinite alternate; translate: 0 calc(var(--net-y2, 0) * 1px); }
html.net-active body::before { opacity: .11; } html.net-active body::after { opacity: .07; }
html { background: radial-gradient(1200px 700px at 85% -10%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%) fixed, var(--bg); }
body { background: transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body::before { opacity: .1; } :root:not([data-theme="light"]) body::after { opacity: .06; } }
:root[data-theme="dark"] body::before { opacity: .1; } :root[data-theme="dark"] body::after { opacity: .06; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]).net-active body::before { opacity: .14; } :root:not([data-theme="light"]).net-active body::after { opacity: .09; } }
:root[data-theme="dark"].net-active body::before { opacity: .14; } :root[data-theme="dark"].net-active body::after { opacity: .09; }
@keyframes net-drift { to { transform: translate3d(180px, 140px, 0); } }
@keyframes net-drift-b { to { transform: translate3d(-160px, 200px, 0); } }
@media (prefers-reduced-motion: reduce) { body::before, body::after { animation: none !important; } }

/* ---------- Motion ---------- */
.rise { animation: rise var(--slow) var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.fade-in { animation: fade-in var(--slow) var(--ease) both; }
.pop { animation: pop var(--slow) var(--spring) both; }
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes pop { from { opacity: 0; transform: scale(.94); } }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes sheet-in { from { transform: translateY(100%); } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.96); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px) scale(.98); } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}

/* ---------- Corporate light theme: flat, navy, gray, no ambient effects ---------- */
:root[data-theme="light"] {
  --brand-h: 250; --chroma: .11; --radius: 4px;
  --display-weight: 600; --display-tracking: -.01em;
  --bg: oklch(96.5% .003 250); --surface: oklch(100% 0 0); --surface-2: oklch(97.5% .003 250); --surface-3: oklch(94% .004 250);
  --border: oklch(89% .005 250); --border-strong: oklch(80% .007 250);
  --text: oklch(24% .015 250); --text-2: oklch(42% .012 250); --text-3: oklch(58% .01 250);
  --brand: oklch(42% .11 250); --brand-hover: oklch(36% .11 250);
  --brand-soft: oklch(95.5% .015 250); --brand-soft-2: oklch(90% .03 250); --brand-text: oklch(38% .11 250);
  --accent: oklch(55% .09 220); --accent-soft: oklch(95% .02 220);
  --shadow-sm: 0 1px 1px oklch(0% 0 0 / .05); --shadow: 0 1px 2px oklch(0% 0 0 / .08); --shadow-lg: 0 4px 16px oklch(0% 0 0 / .14);
  --spring: var(--ease);
}
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) {
  --brand-h: 250; --chroma: .11; --radius: 4px;
  --display-weight: 600; --display-tracking: -.01em;
  --bg: oklch(96.5% .003 250); --surface: oklch(100% 0 0); --surface-2: oklch(97.5% .003 250); --surface-3: oklch(94% .004 250);
  --border: oklch(89% .005 250); --border-strong: oklch(80% .007 250);
  --text: oklch(24% .015 250); --text-2: oklch(42% .012 250); --text-3: oklch(58% .01 250);
  --brand: oklch(42% .11 250); --brand-hover: oklch(36% .11 250);
  --brand-soft: oklch(95.5% .015 250); --brand-soft-2: oklch(90% .03 250); --brand-text: oklch(38% .11 250);
  --accent: oklch(55% .09 220); --accent-soft: oklch(95% .02 220);
  --shadow-sm: 0 1px 1px oklch(0% 0 0 / .05); --shadow: 0 1px 2px oklch(0% 0 0 / .08); --shadow-lg: 0 4px 16px oklch(0% 0 0 / .14);
  --spring: var(--ease);
} }
:root[data-theme="light"] { background: var(--bg); }
:root[data-theme="light"] body::before { opacity: .09; } :root[data-theme="light"] body::after { opacity: .055; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { background: var(--bg); }
  :root:not([data-theme="dark"]) body::before { opacity: .09; } :root:not([data-theme="dark"]) body::after { opacity: .055; }
}
:root[data-theme="light"] .auth-art { background: oklch(30% .08 250); }
:root[data-theme="light"] .auth-art::after { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .auth-art { background: oklch(30% .08 250); }
  :root:not([data-theme="dark"]) .auth-art::after { display: none; }
}

/* ---------- Landing + demo banner ---------- */
.landing { min-height: 100dvh; display: flex; flex-direction: column; max-width: 1240px; margin: 0 auto; padding: var(--s5) var(--s7) var(--s6); gap: var(--s8); }
.landing-top { display: flex; align-items: center; gap: var(--s3); } .landing-top .brand { padding: 0; }
.landing-hero { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s9); align-items: center; }
.landing-copy { display: flex; flex-direction: column; gap: var(--s5); }
.landing-title { font-size: var(--t-4xl); line-height: 1.05; }
.landing-proofs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); padding: var(--s4) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.landing-proof { display: flex; flex-direction: column; gap: 2px; min-height: 52px; }
.landing-proof b { font-family: var(--font-display); font-size: var(--t-xl); font-weight: 650; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--brand-text); }
.landing-proof span { font-size: var(--t-sm); color: var(--text-2); line-height: 1.35; }
.landing-proof-skel { display: block; height: 44px; }
.landing-cta { display: flex; flex-wrap: wrap; gap: var(--s3); }
.landing-shot .media-frame { box-shadow: var(--shadow-lg); }
.landing-foot { display: flex; align-items: center; gap: var(--s2); font-size: var(--t-xs); color: var(--text-3); }
.landing-foot .icon { width: 14px; height: 14px; }
@media (max-width: 960px) { .landing { padding: var(--s5) var(--s4); gap: var(--s6); } .landing-hero { grid-template-columns: 1fr; gap: var(--s7); } .landing-title { font-size: var(--t-3xl); } }
@media (max-width: 520px) { .landing-proofs { grid-template-columns: 1fr; } }
.app-shell.has-banner { grid-template-rows: auto minmax(0, 1fr); }
.app-shell.has-banner .app-nav { grid-row: 1 / span 2; }
.guest-banner { grid-column: 2; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s4); padding: var(--s2) var(--s7); background: var(--brand-soft); color: var(--text); border-bottom: 1px solid color-mix(in oklch, var(--brand) 20%, var(--border)); font-size: var(--t-sm); }
.guest-banner > .icon { color: var(--brand-text); }
.guest-banner-text { flex: 1; min-width: 220px; }
.guest-banner-persona { display: inline-flex; align-items: center; gap: var(--s2); }
.guest-banner .segmented button { padding: 4px 10px; font-size: var(--t-xs); }
.app-shell.has-banner .app-main { grid-column: 2; }
@media (max-width: 760px) { .guest-banner, .app-shell.has-banner .app-main { grid-column: auto; } .guest-banner { padding: var(--s2) var(--s4); } .guest-banner-persona { overflow-x: auto; max-width: 100%; } }

/* ---------- Print (Download PDF = the browser's Save as PDF) ---------- */
@page { size: auto; margin: 14mm 14mm 16mm; }
@media print {
  :root, :root[data-theme="dark"] { color-scheme: light; --bg: white; --surface: white; --surface-2: oklch(97% 0 0); --surface-3: oklch(94% 0 0); --text: oklch(20% 0 0); --text-2: oklch(38% 0 0); --text-3: oklch(52% 0 0); --border: oklch(86% 0 0); --border-strong: oklch(76% 0 0); --shadow-sm: none; --shadow: none; --shadow-lg: none; }
  html, body { background: white !important; }
  body::before, body::after, .app-nav, .topbar, .page-actions, .section-actions, .no-print, .btn, .segmented, #toasts, .tour, .guest-banner, .dev-banner { display: none !important; }
  .app-shell { display: block; } .page { padding: 0; max-width: none; animation: none; } .page-header { margin-bottom: var(--s5); }
  .page-body { gap: var(--s5); } .card, .details { break-inside: avoid; box-shadow: none; }
  details > summary { display: none; } details:not([open]) > .details-body { display: flex; }
  .print-only { display: block; }
  .print-head { display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid oklch(42% .11 250); padding-bottom: 6px; margin-bottom: 14px; font-size: 11px; color: var(--text-2); }
  .print-foot { position: fixed; bottom: 0; left: 0; right: 0; font-size: 10px; color: var(--text-3); text-align: center; }
  a { color: inherit; text-decoration: none; }
  * { animation: none !important; transition: none !important; }
}
.badge-muted { background: var(--surface-3); color: var(--text-2); }