/* Rampart — design tokens + component classes.
   Source of truth: ui-design/design-system/MASTER.md, refined by the design-polish pass (docs/design-review.md).
   Components use tokens only. Fonts are self-hosted (air-gap safe, no third-party request, CSP font-src 'self'). */
@font-face { font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap; src:url("../fonts/inter-latin-wght.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-style:normal; font-weight:100 800; font-display:swap; src:url("../fonts/jetbrains-mono-latin-wght.woff2") format("woff2"); }

/* ---------- Tokens: light ---------- */
:root {
  color-scheme: light;
  --bg-canvas:#F3F5F8; --bg-surface:#FFFFFF; --bg-surface-2:#F5F7FA; --bg-raised:#FFFFFF;
  --bg-hover:#EEF2F6; --bg-selected:#E3F3F6;
  --border:#DCE2E8; --border-strong:#B9C3CD; --border-soft:#E8ECF1;
  --highlight:rgb(255 255 255 / 0); --nav-bg:#FBFCFD;
  --text:#0D1620; --text-muted:#46525E; --text-subtle:#5E6B78;
  --primary:#0B6F82; --primary-hover:#095C6C; --on-primary:#FFFFFF; --focus-ring:#0B6F82;
  --sev-critical:#B0124C; --sev-high:#A84B05; --sev-medium:#7A5A00; --sev-low:#1A62C2; --sev-info:#56616D;
  --fill-critical:#B8124F; --fill-high:#D9670F; --fill-medium:#7A5A00; --fill-low:#1F6FD1; --fill-info:#8A95A1;
  --ok:#11744A; --learn:#2556B4; --warn:#855600; --bad:#BC2A1E; --neutral:#56616D;
  --cat-1:#0B7285; --cat-2:#4B4FBF; --cat-3:#16795A; --cat-4:#7F5F22; --cat-5:#A33B7C; --cat-6:#56616D;
  --code-key:#0B6F82; --code-str:#11744A; --code-num:#A84B05; --code-com:#5E6B78;
  --shadow-1:0 1px 2px rgb(13 22 32 / .05), 0 1px 1px rgb(13 22 32 / .03); --shadow-2:0 6px 16px -4px rgb(13 22 32 / .12), 0 2px 4px rgb(13 22 32 / .05); --shadow-3:0 20px 48px -12px rgb(13 22 32 / .28), 0 4px 12px rgb(13 22 32 / .08);
  --scrim:rgb(13 22 32 / .40);
  --r-xs:4px; --r-sm:6px; --r-md:10px; --r-lg:14px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px;
  /* Z-INDEX SCALE (single source of truth; never hard-code a z-index elsewhere).
     page content 0 < sticky table heads / edit bar 10 < side nav 20 < mobile nav scrim 26 < mobile nav drawer 27
     < top bar 30 (always above the side nav) < drawers + copilot 40 < modal 50 < command palette 60
     < menus & popovers 70 (body-level layer, fixed, so no ancestor can clip or bury them) < toasts 80 < tooltips 90
     The progress bar (.net-busy) rides on top of the top bar at --z-topbar + 1. */
  --z-base:0; --z-sticky:10; --z-nav:20; --z-navscrim:26; --z-navdrawer:27; --z-topbar:30; --z-drawer:40; --z-modal:50; --z-palette:60; --z-dropdown:70; --z-toast:80; --z-tooltip:90;
  --dur-1:120ms; --dur-2:200ms; --dur-3:280ms; --ease-in:cubic-bezier(.2,0,0,1); --ease-out:cubic-bezier(.4,0,1,1);
  --font-sans:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --nav-w:232px; --top-h:52px;
}
/* ---------- Tokens: dark (default for SOC) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-canvas:#080C11; --bg-surface:#0E141B; --bg-surface-2:#131B24; --bg-raised:#18222C;
  --bg-hover:#1A2530; --bg-selected:#112C35;
  --border:#212D39; --border-strong:#3A4957; --border-soft:#1A242E;
  --highlight:rgb(255 255 255 / .035); --nav-bg:#0B1016;
  --text:#E6EDF3; --text-muted:#A3B1BE; --text-subtle:#8494A2;
  --primary:#3CC3DA; --primary-hover:#5CCFE3; --on-primary:#06232A; --focus-ring:#5CCFE3;
  --sev-critical:#EF73A2; --sev-high:#EE8E3E; --sev-medium:#F4DA7A; --sev-low:#6AA9EA; --sev-info:#A3AFBA;
  --fill-critical:#D9437E; --fill-high:#E5832F; --fill-medium:#F4DA7A; --fill-low:#4A93DE; --fill-info:#6B7886;
  --ok:#4CC38A; --learn:#7FA9F5; --warn:#E9B949; --bad:#F26B61; --neutral:#9AA6B2;
  --cat-1:#3CC3DA; --cat-2:#8B93F0; --cat-3:#5CC9A0; --cat-4:#D6B37A; --cat-5:#E58BC2; --cat-6:#9AA6B2;
  --code-key:#5CCFE3; --code-str:#4CC38A; --code-num:#EE8E3E; --code-com:#8494A2;
  --shadow-1:0 1px 2px rgb(0 0 0 / .35); --shadow-2:0 8px 24px -6px rgb(0 0 0 / .55); --shadow-3:0 24px 56px -12px rgb(0 0 0 / .7);
  --scrim:rgb(2 5 8 / .62);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-canvas:#080C11; --bg-surface:#0E141B; --bg-surface-2:#131B24; --bg-raised:#18222C;
    --bg-hover:#1A2530; --bg-selected:#112C35; --border:#212D39; --border-strong:#3A4957; --border-soft:#1A242E;
    --highlight:rgb(255 255 255 / .035); --nav-bg:#0B1016;
    --text:#E6EDF3; --text-muted:#A3B1BE; --text-subtle:#8494A2;
    --primary:#3CC3DA; --primary-hover:#5CCFE3; --on-primary:#06232A; --focus-ring:#5CCFE3;
    --sev-critical:#EF73A2; --sev-high:#EE8E3E; --sev-medium:#F4DA7A; --sev-low:#6AA9EA; --sev-info:#A3AFBA;
    --fill-critical:#D9437E; --fill-high:#E5832F; --fill-medium:#F4DA7A; --fill-low:#4A93DE; --fill-info:#6B7886;
    --ok:#4CC38A; --learn:#7FA9F5; --warn:#E9B949; --bad:#F26B61; --neutral:#9AA6B2;
    --cat-1:#3CC3DA; --cat-2:#8B93F0; --cat-3:#5CC9A0; --cat-4:#D6B37A; --cat-5:#E58BC2; --cat-6:#9AA6B2;
    --code-key:#5CCFE3; --code-str:#4CC38A; --code-num:#EE8E3E; --code-com:#8494A2;
    --shadow-1:0 1px 2px rgb(0 0 0 / .35); --shadow-2:0 8px 24px -6px rgb(0 0 0 / .55); --shadow-3:0 24px 56px -12px rgb(0 0 0 / .7);
    --scrim:rgb(2 5 8 / .62);
  }
}
@media (prefers-contrast: more) { :root { --border: var(--border-strong); } }

/* ---------- Base ---------- */
*,*::before,*::after { box-sizing: border-box; }
html,body { height:100%; }
body { margin:0; background:var(--bg-canvas); color:var(--text); font-family:var(--font-sans); font-size:14px; line-height:20px; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-feature-settings:"cv05" 1, "cv08" 1, "cv11" 1; text-rendering:optimizeLegibility; }
@media (max-width:768px){ body{ font-size:15px; line-height:22px; } }
.mono, code, pre, kbd, .code { font-family:var(--font-mono); font-variant-ligatures:none; font-feature-settings:"liga" 0, "calt" 0; }
.tnum { font-variant-numeric: tabular-nums; }
a { color:var(--primary); text-decoration:none; }
a:hover { color:var(--primary-hover); text-decoration:underline; }
:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:var(--r-xs); }
button, [role="button"], a, summary, select, label[for], .clickable { cursor:pointer; }
button:disabled, .is-disabled { opacity:.5; cursor:not-allowed; }
::selection { background: color-mix(in srgb, var(--primary) 30%, transparent); }
h1 { font-size:20px; line-height:28px; font-weight:600; margin:0; }
h2 { font-size:16px; line-height:24px; font-weight:600; margin:0; }
h3 { font-size:14px; line-height:20px; font-weight:600; margin:0; }
.overline { font-size:11px; line-height:16px; letter-spacing:.04em; text-transform:uppercase; font-weight:500; color:var(--text-subtle); }
.muted { color:var(--text-muted); } .subtle { color:var(--text-subtle); }
.skip-link { position:absolute; left:-999px; top:8px; z-index:var(--z-toast); background:var(--primary); color:var(--on-primary); padding:8px 12px; border-radius:var(--r-sm); }
.skip-link:focus { left:8px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
svg.lucide { width:16px; height:16px; stroke-width:1.75; flex-shrink:0; }
.i-20 svg.lucide, svg.lucide.i-20 { width:20px; height:20px; }
.i-24 svg.lucide, svg.lucide.i-24 { width:24px; height:24px; }
.i-14 svg.lucide, svg.lucide.i-14 { width:14px; height:14px; }

/* ---------- Shell ---------- */
.app { display:grid; grid-template-columns: var(--nav-w) 1fr; grid-template-rows: var(--top-h) 1fr; min-height:100vh; }
.app.nav-collapsed { --nav-w:56px; }
.topbar { grid-column:1 / -1; position:sticky; top:0; z-index:var(--z-topbar); display:flex; align-items:center; gap:8px; padding:0 12px; height:var(--top-h); background:var(--bg-surface); border-bottom:1px solid var(--border); }
.brand { display:flex; align-items:center; gap:8px; font-weight:600; font-size:15px; color:var(--text); min-width:0; }
.brand-mark { width:26px; height:26px; border-radius:7px; background:var(--primary); color:var(--on-primary); display:grid; place-items:center; flex-shrink:0; }
.sidenav { position:sticky; top:var(--top-h); height:calc(100vh - var(--top-h)); overflow-y:auto; background:var(--bg-surface); border-right:1px solid var(--border); padding:8px; z-index:var(--z-nav); overscroll-behavior:contain; }
.nav-group { margin:10px 0 4px; padding:0 8px; }
.nav-item { display:flex; align-items:center; gap:10px; height:34px; padding:0 10px; border-radius:var(--r-sm); color:var(--text-muted); font-weight:500; white-space:nowrap; position:relative; }
.nav-item:hover { background:var(--bg-hover); color:var(--text); text-decoration:none; }
.nav-item[aria-current="page"] { background:var(--bg-selected); color:var(--text); }
.nav-item[aria-current="page"]::before { content:""; position:absolute; left:-8px; top:6px; bottom:6px; width:3px; border-radius:2px; background:var(--primary); }
.nav-item .count { margin-left:auto; }
.app.nav-collapsed .nav-item span.label, .app.nav-collapsed .nav-group, .app.nav-collapsed .nav-item .count { display:none; }
.main { min-width:0; padding:16px 20px 48px; transition: margin-right var(--dur-2) var(--ease-in); }
@media (min-width:1440px){ .app.copilot-open .main { margin-right:400px; } }
.page-head { display:flex; flex-wrap:wrap; align-items:flex-end; gap:12px; justify-content:space-between; margin-bottom:12px; }
.crumbs { display:flex; gap:6px; align-items:center; color:var(--text-subtle); font-size:12px; margin-bottom:4px; }
.crumbs a { color:var(--text-muted); }
@media (max-width:1023px){
  .app { grid-template-columns: 1fr; }
  .sidenav { position:fixed; left:0; top:var(--top-h); bottom:0; width:260px; transform:translateX(-100%); transition:transform var(--dur-2) var(--ease-in), visibility 0s linear var(--dur-2); z-index:var(--z-navdrawer); visibility:hidden; }
  .app.nav-open .sidenav { transform:none; box-shadow:var(--shadow-3); visibility:visible; transition-delay:0s; }
  .app.nav-collapsed { --nav-w:232px; }
  .main { padding:12px 16px 48px; }
}
@media (max-width:768px){ .topbar{ gap:2px; padding:0 6px; } }
.scrim { position:fixed; inset:0; background:var(--scrim); z-index:calc(var(--z-drawer) - 1); }
.nav-scrim { display:none; }
@media (max-width:1023px){ .nav-scrim { display:block; position:fixed; inset:0; background:var(--scrim); z-index:var(--z-navscrim); opacity:0; visibility:hidden; transition:opacity var(--dur-2) var(--ease-in), visibility 0s linear var(--dur-2); } .app.nav-open .nav-scrim { opacity:1; visibility:visible; transition-delay:0s; } }

/* ---------- Surfaces ---------- */
.card { background:var(--bg-surface); border:1px solid var(--border); border-radius:var(--r-md); box-shadow:var(--shadow-1); min-width:0; }
.card-h { display:flex; align-items:center; gap:8px; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--border); min-height:44px; }
.card-b { padding:12px; }
.card-f { padding:8px 12px; border-top:1px solid var(--border); color:var(--text-subtle); font-size:12px; display:flex; gap:8px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.inset { background:var(--bg-surface-2); border:1px solid var(--border); border-radius:var(--r-sm); }
.divider { height:1px; background:var(--border); margin:12px 0; }
.grid-12 { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:12px; }
@media (max-width:768px){ .grid-12 { gap:8px; } }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; height:32px; padding:0 12px; border-radius:var(--r-sm); font:inherit; font-weight:500; border:1px solid transparent; background:transparent; color:var(--text); transition: background var(--dur-1) var(--ease-in), border-color var(--dur-1), color var(--dur-1); white-space:nowrap; }
.btn-sm { height:28px; padding:0 10px; font-size:13px; }
.btn-lg { height:36px; padding:0 16px; }
.btn-primary { background:var(--primary); color:var(--on-primary); }
.btn-primary:hover { background:var(--primary-hover); }
.btn-secondary { background:var(--bg-surface); border-color:var(--border-strong); }
.btn-secondary:hover { background:var(--bg-hover); }
.btn-ghost { color:var(--text-muted); }
.btn-ghost:hover { background:var(--bg-hover); color:var(--text); }
.btn-danger { background:var(--bad); color:#fff; }
:root[data-theme="dark"] .btn-danger { color:#1B0605; }
.btn-danger:hover { filter:brightness(1.08); }
.btn-icon { width:32px; padding:0; }
.btn-icon.btn-sm { width:28px; }
.btn[aria-pressed="true"] { background:var(--bg-selected); color:var(--text); border-color:var(--border-strong); }
@media (max-width:768px){ .btn { height:40px; } .btn-sm { height:36px; } .btn-icon { width:40px; } .btn-icon.btn-sm{ width:36px; } }
.seg { display:inline-flex; border:1px solid var(--border-strong); border-radius:var(--r-sm); overflow:hidden; background:var(--bg-surface); }
.seg button { border:0; background:transparent; color:var(--text-muted); height:30px; padding:0 10px; font:inherit; font-weight:500; display:inline-flex; gap:6px; align-items:center; border-right:1px solid var(--border); }
.seg button:last-child { border-right:0; }
.seg button[aria-pressed="true"] { background:var(--bg-selected); color:var(--text); box-shadow: inset 0 -2px 0 var(--primary); }
.seg button:hover { color:var(--text); }

/* ---------- Pills / badges ---------- */
.pill { display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 7px; border-radius:9999px; font-size:12px; font-weight:500; line-height:20px; white-space:nowrap; --c:var(--neutral); color:var(--c); background:color-mix(in srgb, var(--c) 14%, transparent); }
.pill svg.lucide { width:12px; height:12px; stroke-width:2.2; }
.pill.sev-critical{--c:var(--sev-critical)} .pill.sev-high{--c:var(--sev-high)} .pill.sev-medium{--c:var(--sev-medium)} .pill.sev-low{--c:var(--sev-low)} .pill.sev-info{--c:var(--sev-info)}
.pill.ok{--c:var(--ok)} .pill.learn{--c:var(--learn)} .pill.warn{--c:var(--warn)} .pill.bad{--c:var(--bad)} .pill.neutral{--c:var(--neutral)} .pill.primary{--c:var(--primary)}
.pill.draft { background:transparent; border:1px dashed var(--border-strong); color:var(--text-muted); }
.pill.outline { background:transparent; border:1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.tag { display:inline-flex; align-items:center; height:20px; padding:0 6px; border-radius:var(--r-xs); background:var(--bg-surface-2); border:1px solid var(--border); font-size:12px; color:var(--text-muted); }
kbd { display:inline-flex; align-items:center; min-width:18px; height:18px; padding:0 4px; border-radius:var(--r-xs); border:1px solid var(--border-strong); border-bottom-width:2px; font-size:11px; color:var(--text-muted); background:var(--bg-surface-2); }
.dot { width:8px; height:8px; border-radius:50%; background:var(--c, var(--neutral)); display:inline-block; flex-shrink:0; }
.live-dot { position:relative; } .live-dot::after { content:""; position:absolute; inset:-3px; border-radius:50%; border:2px solid var(--ok); opacity:0; animation:pulse 2s infinite; }
@keyframes pulse { 0%{opacity:.7; transform:scale(.6)} 100%{opacity:0; transform:scale(1.6)} }

/* ---------- Forms ---------- */
.field { display:flex; flex-direction:column; gap:4px; min-width:0; }
.field > label, .label { font-size:12px; font-weight:500; color:var(--text-muted); }
.input, .select, textarea.input { height:32px; width:100%; padding:0 10px; border-radius:var(--r-sm); border:1px solid var(--border-strong); background:var(--bg-surface); color:var(--text); font:inherit; }
textarea.input { height:auto; padding:8px 10px; line-height:20px; }
.input::placeholder { color:var(--text-subtle); }
.input:hover, .select:hover { border-color:var(--text-subtle); }
.input:focus-visible, .select:focus-visible { outline:2px solid var(--focus-ring); outline-offset:0; border-color:var(--focus-ring); }
.input[aria-invalid="true"] { border-color:var(--bad); }
.help { font-size:12px; color:var(--text-subtle); }
.err { font-size:12px; color:var(--bad); display:flex; gap:4px; align-items:center; }
.keyhint { font-family:var(--font-mono); font-size:11px; color:var(--text-subtle); }
@media (max-width:768px){ .input, .select { height:44px; font-size:16px; } }
.switch { position:relative; display:inline-flex; width:34px; height:20px; flex-shrink:0; }
.switch input { opacity:0; width:100%; height:100%; position:absolute; inset:0; margin:0; cursor:pointer; }
.switch .track { width:34px; height:20px; border-radius:9999px; background:var(--border-strong); transition:background var(--dur-1); }
.switch .knob { position:absolute; left:3px; top:3px; width:14px; height:14px; border-radius:50%; background:#fff; transition:transform var(--dur-1) var(--ease-in); box-shadow:var(--shadow-1); }
.switch input:checked + .track { background:var(--primary); }
.switch input:checked + .track + .knob { transform:translateX(14px); }
.switch input:focus-visible + .track { outline:2px solid var(--focus-ring); outline-offset:2px; }
.check { display:inline-flex; gap:8px; align-items:flex-start; }
.check input { accent-color: var(--primary); width:16px; height:16px; margin-top:2px; }

/* ---------- Tables ---------- */
.table-wrap { overflow:auto; max-width:100%; }
table.tbl { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; line-height:18px; }
.tbl th { position:sticky; top:0; z-index:var(--z-sticky); background:var(--bg-surface-2); color:var(--text-muted); font-weight:500; text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); white-space:nowrap; font-size:12px; }
.tbl td { padding:8px 10px; border-bottom:1px solid var(--border); vertical-align:middle; max-width:360px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tbl tbody tr { transition: background var(--dur-1); }
.tbl tbody tr:hover { background:var(--bg-hover); }
.tbl tbody tr.is-selected { background:var(--bg-selected); box-shadow: inset 2px 0 0 var(--primary); }
.tbl tbody tr.row-link { cursor:pointer; }
.tbl .num { text-align:right; font-variant-numeric: tabular-nums; }
.tbl.compact td { padding:6px 10px; }
@media (max-width:768px){
  .tbl.stack thead { display:none; }
  .tbl.stack, .tbl.stack tbody, .tbl.stack tr, .tbl.stack td { display:block; width:100%; }
  .tbl.stack tr { border:1px solid var(--border); border-radius:var(--r-md); margin:0 0 8px; padding:6px 0; background:var(--bg-surface); }
  .tbl.stack td { border:0; padding:4px 12px; white-space:normal; max-width:none; display:flex; gap:12px; justify-content:space-between; }
  .tbl.stack td::before { content: attr(data-label); color:var(--text-subtle); font-size:12px; flex-shrink:0; }
}

/* ---------- Tabs ---------- */
.tabs { display:flex; gap:2px; border-bottom:1px solid var(--border); overflow-x:auto; scrollbar-width:thin; margin-bottom:12px; }
.tab { display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 12px; color:var(--text-muted); font-weight:500; border-bottom:2px solid transparent; white-space:nowrap; background:none; border-top:0; border-left:0; border-right:0; font:inherit; }
.tab:hover { color:var(--text); text-decoration:none; }
.tab[aria-selected="true"] { color:var(--text); border-bottom-color:var(--primary); }

/* ---------- KPI tiles ---------- */
.kpi { padding:12px; display:flex; flex-direction:column; gap:4px; min-width:0; }
.kpi .v { font-size:28px; line-height:32px; font-weight:600; font-variant-numeric:tabular-nums; }
.kpi .src { font-size:11px; color:var(--text-subtle); display:flex; gap:4px; align-items:center; }

/* ---------- Code / diff ---------- */
.code-block { background:var(--bg-surface-2); border:1px solid var(--border); border-radius:var(--r-sm); font-family:var(--font-mono); font-variant-ligatures:none; font-size:12.5px; line-height:20px; overflow:auto; }
.code-block pre { margin:0; padding:10px 12px; white-space:pre; }
.code-lines { display:grid; grid-template-columns:auto 1fr; }
.code-lines .ln { color:var(--text-subtle); text-align:right; padding:0 10px 0 12px; user-select:none; border-right:1px solid var(--border); }
.code-lines .lc { padding:0 12px; white-space:pre; }
.tk-key{color:var(--code-key)} .tk-str{color:var(--code-str)} .tk-num{color:var(--code-num)} .tk-com{color:var(--code-com); font-style:italic}
.hl-payload { background:color-mix(in srgb, var(--fill-critical) 28%, transparent); color:var(--text); border-radius:2px; outline:1px solid color-mix(in srgb, var(--sev-critical) 60%, transparent); }
.diff-line { display:grid; grid-template-columns: 44px 44px 18px 1fr; font-family:var(--font-mono); font-variant-ligatures:none; font-size:12.5px; line-height:20px; }
.diff-line > span { padding:0 6px; white-space:pre; }
.diff-line .n { color:var(--text-subtle); text-align:right; user-select:none; }
.diff-line.add { background:color-mix(in srgb, var(--ok) 14%, transparent); }
.diff-line.del { background:color-mix(in srgb, var(--bad) 14%, transparent); }
.diff-line.add .g { color:var(--ok); } .diff-line.del .g { color:var(--bad); }
.diff-line .w-add { background:color-mix(in srgb, var(--ok) 32%, transparent); border-radius:2px; }
.diff-line .w-del { background:color-mix(in srgb, var(--bad) 32%, transparent); border-radius:2px; text-decoration:line-through; }
.diff-hunk { background:var(--bg-surface-2); color:var(--text-subtle); font-family:var(--font-mono); font-size:12px; padding:2px 10px; border-block:1px solid var(--border); }
.terminal { background:#071016; color:#D7E3EC; border-radius:var(--r-sm); border:1px solid var(--border); font-family:var(--font-mono); font-variant-ligatures:none; font-size:12.5px; line-height:19px; padding:10px 12px; overflow:auto; }
:root:not([data-theme="dark"]) .terminal { background:#0F1A22; }
.terminal .ok{color:#4CC38A} .terminal .bad{color:#F26B61} .terminal .dim{color:#8494A2} .terminal .cmd{color:#5CCFE3}

/* ---------- Charts ---------- */
.chart svg { display:block; width:100%; height:auto; overflow:visible; }
.chart .axis text { fill:var(--text-subtle); font-size:11px; font-family:var(--font-sans); }
.chart .grid line { stroke:var(--border); stroke-width:1; }
.chart .mark { transition: opacity var(--dur-1); cursor:pointer; }
.chart .mark:hover, .chart .mark:focus-visible { opacity:.82; }
.legend { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12px; color:var(--text-muted); }
.legend span { display:inline-flex; gap:6px; align-items:center; }
.swatch { width:10px; height:10px; border-radius:2px; background:var(--c); }
.bar-track { height:6px; border-radius:9999px; background:var(--bg-surface-2); overflow:hidden; border:1px solid var(--border); }
.bar-fill { height:100%; border-radius:9999px; background:var(--c, var(--primary)); }
.hatch-bad { background-image: repeating-linear-gradient(45deg, var(--bad) 0 2px, transparent 2px 6px); background-color: color-mix(in srgb, var(--bad) 18%, transparent); }
.tooltip { position:fixed; z-index:var(--z-tooltip); pointer-events:none; background:var(--bg-raised); color:var(--text); border:1px solid var(--border-strong); border-radius:var(--r-sm); box-shadow:var(--shadow-2); padding:6px 8px; font-size:12px; max-width:280px; }

/* ---------- Drawers, modals, palette, copilot, toasts ---------- */
.drawer { position:fixed; top:0; right:0; bottom:0; width:min(600px, 100vw); background:var(--bg-raised); border-left:1px solid var(--border); box-shadow:var(--shadow-3); z-index:var(--z-drawer); display:flex; flex-direction:column; animation: slide-in var(--dur-2) var(--ease-in); }
.drawer-h { display:flex; align-items:flex-start; gap:8px; padding:12px 14px; border-bottom:1px solid var(--border); }
.drawer-b { flex:1; overflow:auto; padding:14px; }
.drawer-f { padding:10px 14px; border-top:1px solid var(--border); display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; background:var(--bg-raised); }
@keyframes slide-in { from { transform:translateX(24px); opacity:0 } to { transform:none; opacity:1 } }
.modal-wrap { position:fixed; inset:0; z-index:var(--z-modal); display:grid; place-items:center; padding:16px; background:var(--scrim); }
.modal { width:min(760px, 100%); max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); display:flex; flex-direction:column; background:var(--bg-raised); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-3); animation: pop var(--dur-3) var(--ease-in); }
.modal.wide { width:min(1100px, 100%); }
.modal-h { padding:14px 16px; border-bottom:1px solid var(--border); display:flex; gap:8px; align-items:flex-start; }
.modal-b { padding:16px; overflow:auto; }
.modal-f { padding:12px 16px; border-top:1px solid var(--border); display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }
@keyframes pop { from { transform:translateY(8px); opacity:0 } to { transform:none; opacity:1 } }
@media (max-width:768px){ .modal-wrap{ padding:0; place-items:stretch; } .modal{ max-height:100vh; max-height:100dvh; border-radius:0; } body:has(.modal-wrap) .toasts { bottom:auto; top:8px; } }
.palette-wrap { position:fixed; inset:0; z-index:var(--z-palette); background:var(--scrim); display:flex; justify-content:center; align-items:flex-start; padding:10vh 16px 16px; }
.palette { width:min(640px,100%); background:var(--bg-raised); border:1px solid var(--border-strong); border-radius:var(--r-lg); box-shadow:var(--shadow-3); overflow:hidden; }
.palette input { width:100%; height:48px; border:0; border-bottom:1px solid var(--border); background:transparent; color:var(--text); padding:0 16px; font:inherit; font-size:15px; }
.palette input:focus-visible { outline:none; }
.palette ul { list-style:none; margin:0; padding:6px; max-height:52vh; overflow:auto; }
.palette li { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:var(--r-sm); color:var(--text-muted); }
.palette li[aria-selected="true"] { background:var(--bg-selected); color:var(--text); }
.copilot { position:fixed; right:0; top:var(--top-h); bottom:0; width:min(400px, 100vw); background:var(--bg-raised); border-left:1px solid var(--border); box-shadow:var(--shadow-3); z-index:var(--z-drawer); display:flex; flex-direction:column; animation: slide-in var(--dur-2) var(--ease-in); }
@media (min-width:1440px){ .copilot { box-shadow:none; } }
.chat-msg { padding:10px 12px; border-radius:var(--r-md); max-width:100%; }
.chat-msg.user { background:var(--bg-selected); align-self:flex-end; }
.chat-msg.bot { background:var(--bg-surface-2); border:1px solid var(--border); }
.cite { font-size:11px; color:var(--text-subtle); font-family:var(--font-mono); }
.toasts { position:fixed; right:16px; bottom:16px; z-index:var(--z-toast); display:flex; flex-direction:column; gap:8px; width:min(380px, calc(100vw - 32px)); }
.toast { background:var(--bg-raised); border:1px solid var(--border-strong); border-left:3px solid var(--c, var(--primary)); border-radius:var(--r-md); box-shadow:var(--shadow-2); padding:10px 12px; display:flex; gap:10px; align-items:flex-start; animation: pop var(--dur-2) var(--ease-in); }
.menu { position:fixed; z-index:var(--z-dropdown); max-width:calc(100vw - 16px); max-height:calc(100vh - 16px); max-height:calc(100dvh - 16px); overflow:auto; overscroll-behavior:contain; background:var(--bg-raised); border:1px solid var(--border-strong); border-radius:var(--r-md); box-shadow:var(--shadow-2); padding:4px; min-width:220px; }
.menu.menu-inline { position:absolute; z-index:calc(var(--z-sticky) + 5); }
.menu button, .menu a { display:flex; width:100%; align-items:center; gap:8px; padding:7px 10px; border-radius:var(--r-sm); border:0; background:none; color:var(--text); font:inherit; text-align:left; }
.menu button:hover, .menu a:hover { background:var(--bg-hover); text-decoration:none; }

/* ---------- Banners, empty, skeleton ---------- */
.banner { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border-radius:var(--r-md); border:1px solid color-mix(in srgb, var(--c) 45%, transparent); background:color-mix(in srgb, var(--c) 10%, var(--bg-surface)); --c:var(--primary); }
.banner.bad{--c:var(--bad)} .banner.warn{--c:var(--warn)} .banner.ok{--c:var(--ok)} .banner.learn{--c:var(--learn)}
.banner > svg.lucide { color:var(--c); margin-top:2px; }
.empty { display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:32px 16px; color:var(--text-muted); }
.empty svg.lucide { width:24px; height:24px; color:var(--text-subtle); }
.skel { background: linear-gradient(90deg, var(--bg-surface-2) 0%, var(--bg-hover) 50%, var(--bg-surface-2) 100%); background-size:200% 100%; animation: shimmer 1.4s infinite; border-radius:var(--r-xs); }
@keyframes shimmer { from { background-position:200% 0 } to { background-position:-200% 0 } }
.stepper { display:flex; gap:0; counter-reset: step; flex-wrap:wrap; }
.step { display:flex; align-items:center; gap:8px; color:var(--text-subtle); padding:4px 10px 4px 0; font-weight:500; }
.step .n { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--border-strong); font-size:12px; }
.step.done { color:var(--text-muted); } .step.done .n { background:var(--ok); color:var(--bg-surface); border-color:var(--ok); }
.step.current { color:var(--text); } .step.current .n { border-color:var(--primary); color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent); }
.step + .step::before { content:""; width:24px; height:1px; background:var(--border-strong); margin-right:8px; }
.timeline { list-style:none; margin:0; padding:0; position:relative; }
.timeline li { display:grid; grid-template-columns: 28px 1fr; gap:10px; padding-bottom:14px; position:relative; }
.timeline li::before { content:""; position:absolute; left:13px; top:26px; bottom:0; width:1px; background:var(--border); }
.timeline li:last-child::before { display:none; }
.timeline .tl-ic { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:color-mix(in srgb, var(--c, var(--neutral)) 16%, var(--bg-surface)); color:var(--c, var(--neutral)); border:1px solid color-mix(in srgb, var(--c, var(--neutral)) 40%, transparent); }

/* ---------- Utility ---------- */
.row { display:flex; align-items:center; gap:8px; } .wrap { flex-wrap:wrap; } .col { display:flex; flex-direction:column; gap:8px; }
.between { justify-content:space-between; } .grow { flex:1; min-width:0; } .truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hide-sm { } @media (max-width:768px){ .hide-sm{ display:none !important; } }
.show-sm { display:none; } @media (max-width:768px){ .show-sm{ display:initial; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:0ms !important; animation-iteration-count:1 !important; transition-duration:0ms !important; scroll-behavior:auto !important; }
  .live-dot::after { display:none; }
}
@media print { .sidenav, .topbar, .copilot, .toasts { display:none !important; } .app { display:block; } }

/* Route changes move focus to the page h1 for screen readers; it is not an interactive control, so no ring. */
h1[tabindex="-1"]:focus, main[tabindex="-1"]:focus { outline:none; }

/* Every element wired to an action or a link is visibly clickable. */
[data-href], [data-action], [data-tip][role="link"] { cursor:pointer; }

/* =====================================================================
   Rampart product layer (API-backed): login, shell chrome, loading, deltas
   ===================================================================== */
[hidden] { display:none !important; }
body.signed-out { background:var(--bg-canvas); }
.login-wrap { min-height:100vh; min-height:100dvh; display:grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.login-side { position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; gap:24px; padding:40px 48px; color:var(--text);
  background:
    radial-gradient(1200px 600px at -10% -20%, color-mix(in srgb, var(--primary) 22%, transparent), transparent 60%),
    radial-gradient(800px 500px at 110% 120%, color-mix(in srgb, var(--cat-2) 16%, transparent), transparent 60%),
    var(--bg-surface);
  border-right:1px solid var(--border); }
.login-side::before { content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 32px 32px; mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 30% 40%, #000 0%, transparent 70%); }
.login-side > * { position:relative; }
.login-side .brand { font-size:18px; }
.login-pitch { max-width:460px; }
.login-pitch h2 { font-size:28px; line-height:36px; font-weight:600; letter-spacing:-.01em; }
.login-ic { width:32px; height:32px; border-radius:8px; display:grid; place-items:center; flex-shrink:0; color:var(--primary); background:color-mix(in srgb, var(--primary) 14%, transparent); border:1px solid color-mix(in srgb, var(--primary) 30%, transparent); }
.login-main { display:grid; place-items:center; padding:32px 20px; }
.login-card { width:min(400px, 100%); padding:28px; box-shadow:var(--shadow-3); }
.login-card h1 { font-size:22px; line-height:30px; }
.show-login-sm { display:none; }
@media (max-width:900px) { .login-wrap { grid-template-columns:1fr; } .login-side { display:none; } .show-login-sm { display:flex; } .login-card { padding:22px; } }

.avatar { width:26px; height:26px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:600; letter-spacing:.02em; background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 40%, var(--bg-selected)), var(--bg-selected)); color:var(--text); border:1px solid var(--border-strong); }
.badge-dot { position:absolute; top:-2px; right:-3px; height:16px; min-width:16px; padding:0 4px; justify-content:center; font-size:10px; line-height:16px; font-weight:600; background:var(--bad); color:#fff; box-shadow:0 0 0 2px var(--bg-surface); }
:root[data-theme="dark"] .badge-dot { color:#1B0605; }
.nav-foot { display:flex; align-items:center; gap:8px; margin:16px 8px 4px; padding-top:10px; border-top:1px solid var(--border); font-size:11px; color:var(--text-subtle); }
.app.nav-collapsed .nav-foot .label { display:none; }
.net-busy { position:fixed; top:0; left:0; right:0; height:2px; z-index:calc(var(--z-topbar) + 1); opacity:0; transition:opacity var(--dur-2); background:linear-gradient(90deg, transparent, var(--primary), transparent); background-size:40% 100%; background-repeat:no-repeat; animation: busy 1.1s linear infinite; pointer-events:none; }
@keyframes busy { from { background-position:-40% 0 } to { background-position:140% 0 } }
.tenant-btn { border-color:var(--border); }
.search-btn { max-width:420px; min-width:200px; justify-content:flex-start; color:var(--text-subtle); border-color:var(--border); background:var(--bg-surface-2); }
.search-btn:hover { color:var(--text-muted); }
.palette-foot { padding:8px 12px; font-size:12px; border-top:1px solid var(--border); }
.palette .row > svg.lucide { color:var(--text-subtle); }

.spin { animation: spin 900ms linear infinite; } svg.spin, .spin svg { animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.empty-ic { width:48px; height:48px; border-radius:14px; display:grid; place-items:center; color:var(--primary); background:color-mix(in srgb, var(--primary) 10%, var(--bg-surface-2)); border:1px solid color-mix(in srgb, var(--primary) 25%, var(--border)); margin-bottom:4px; }
.empty .empty-ic svg.lucide { color:var(--primary); width:22px; height:22px; }
.delta { display:inline-flex; align-items:center; gap:2px; font-size:12px; font-weight:500; padding:0 6px; height:20px; border-radius:9999px; font-variant-numeric:tabular-nums; }
.delta.good { color:var(--ok); background:color-mix(in srgb, var(--ok) 12%, transparent); }
.delta.bad { color:var(--bad); background:color-mix(in srgb, var(--bad) 12%, transparent); }
.delta.flat { color:var(--text-subtle); background:var(--bg-surface-2); }
.kv-mini { display:grid; grid-template-columns:auto 1fr; gap:4px 10px; margin:8px 0 0; font-size:12px; }
.kv-mini dt { color:var(--text-subtle); text-transform:capitalize; } .kv-mini dd { margin:0; overflow-wrap:anywhere; }
.chat-msg p { margin:0 0 6px; } .chat-msg p:last-child { margin-bottom:0; } .chat-msg ul { margin:6px 0; padding-left:18px; }
.chat-msg code { font-size:12px; background:var(--bg-surface); border:1px solid var(--border); border-radius:3px; padding:0 3px; overflow-wrap:anywhere; }

/* refined surfaces */
.card { transition: border-color var(--dur-1) var(--ease-in), box-shadow var(--dur-1) var(--ease-in); }
a.card.clickable:hover, .card.kpi.clickable:hover { border-color:var(--border-strong); box-shadow:var(--shadow-2); text-decoration:none; }
.kpi .label { font-size:12px; font-weight:500; color:var(--text-muted); }
.kpi .v { letter-spacing:-.01em; }
.kpi .v-row { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.kpi .spark { margin-top:auto; opacity:.9; }
.page-head h1 { font-size:22px; line-height:30px; letter-spacing:-.01em; }
.copy-field { display:flex; gap:6px; align-items:stretch; }
.copy-field .code-block { flex:1; min-width:0; }
.secret-once { border:1px dashed color-mix(in srgb, var(--warn) 60%, transparent); background:color-mix(in srgb, var(--warn) 8%, var(--bg-surface-2)); border-radius:var(--r-md); padding:10px 12px; }
.status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; background:var(--c, var(--neutral)); box-shadow:0 0 0 3px color-mix(in srgb, var(--c, var(--neutral)) 20%, transparent); }
.fade-in { animation: fadein var(--dur-2) var(--ease-in); }
@keyframes fadein { from { opacity:0; transform:translateY(2px) } to { opacity:1; transform:none } }
.status-item { padding:10px 12px; color:inherit; text-decoration:none; display:flex; gap:10px; align-items:flex-start; height:100%; position:relative; overflow:hidden; }
.status-item::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c); }
.status-item:hover { text-decoration:none; }
.status-item .si-ic { color:var(--c); margin-top:2px; width:32px; height:32px; border-radius:8px; display:grid; place-items:center; flex-shrink:0; background:color-mix(in srgb, var(--c) 12%, transparent); }
.status-item .si-v { font-weight:600; font-size:16px; line-height:22px; display:block; }
.fleet-row { display:flex; align-items:center; gap:8px; padding:6px 6px; border-radius:var(--r-sm); color:inherit; }
.fleet-row:hover { background:var(--bg-hover); text-decoration:none; color:inherit; }

@media (max-width:1279px){ .search-btn .row { display:none !important; } }

/* === events === */
.ev-query { padding:12px; margin-bottom:12px; }
.ev-qwrap { position:relative; min-width:240px; }
.ev-qicon { position:absolute; left:10px; top:8px; color:var(--text-subtle); pointer-events:none; }
.ev-qwrap .input { padding-left:32px; font-size:13px; height:34px; background:var(--bg-surface-2); border-color:var(--border); transition:border-color var(--dur-1), background var(--dur-1); }
.ev-qwrap .input:focus-visible { background:var(--bg-surface); }
@media (max-width:768px){ .ev-qwrap .input { height:44px; } .ev-qwrap { min-width:100%; } }
.ev-acitem { padding:6px 10px; border-radius:6px; }
.ev-acitem[aria-selected="true"] { background:var(--bg-selected); }
.ev-chips { margin-top:8px; gap:6px; min-height:24px; }
.ev-chip { height:24px; gap:6px; max-width:100%; }
.ev-chip .mono { font-size:11px; overflow:hidden; text-overflow:ellipsis; }
.ev-chip .btn { width:18px; height:18px; min-width:18px; padding:0; }
.ev-sevsum { gap:10px; font-size:12px; }
.ev-sevdot { display:inline-flex; align-items:center; gap:4px; color:var(--text-muted); font-variant-numeric:tabular-nums; }
.ev-sevdot i { width:8px; height:8px; border-radius:2px; background:var(--c); display:inline-block; }
.ev-livebar { margin-top:8px; gap:8px; }
.ev-facets { padding:4px 12px; }
.ev-fhead { padding:8px 0; font-weight:600; gap:8px; list-style:none; }
.ev-fhead::-webkit-details-marker, .ev-facet summary::-webkit-details-marker { display:none; }
.ev-facet { border-top:1px solid var(--border); }
.ev-facet summary { padding:7px 0; font-weight:500; font-size:13px; list-style:none; }
.ev-facet summary::after { content:"▸"; color:var(--text-subtle); font-size:10px; margin-left:6px; transition:transform var(--dur-1); }
.ev-facet[open] summary::after { transform:rotate(90deg); }
.ev-facet ul { list-style:none; margin:0 0 8px; padding:0; }
.ev-facet li { gap:6px; font-size:12px; padding:1px 0; }
.ev-fv { justify-content:flex-start; height:24px; padding:0 4px; min-width:0; font-size:12px; font-weight:400; color:var(--text); }
.ev-fn { width:30px; text-align:right; }
.ev-fo { height:24px !important; width:24px !important; opacity:.55; }
.ev-facet li:hover .ev-fo, .ev-fo:focus-visible { opacity:1; }
@media (max-width:768px){ .ev-fv { height:36px; } .ev-fo { height:36px !important; width:36px !important; opacity:1; } }
.ev-hist { padding:8px 12px 10px; margin-bottom:12px; position:relative; }
.ev-hist > .row:first-child { position:absolute; right:12px; top:6px; }
.ev-grid .tbl tbody tr.ev-row td:first-child, .tbl tbody tr.ev-row td:first-child { box-shadow: inset 3px 0 0 var(--sevc, transparent); }
.tbl tbody tr.ev-row.is-selected td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.ev-sample { display:inline-block; max-width:260px; overflow:hidden; text-overflow:ellipsis; vertical-align:bottom; color:var(--sev-critical); }
@media (max-width:768px){ .ev-sample { max-width:100%; white-space:normal; overflow-wrap:anywhere; } }
.ev-summary { padding:10px 12px; border-radius:var(--r-md); border:1px solid var(--border); background:var(--bg-surface-2); box-shadow: inset 3px 0 0 var(--sevc); margin-bottom:16px; overflow-wrap:anywhere; }
.ev-sec { margin-bottom:18px; }
.ev-sec > h3 { margin-bottom:8px; gap:6px; color:var(--text); }
.ev-sec > h3 svg.lucide { color:var(--text-subtle); }
.ev-explain .chat-msg { margin:0; }
.ev-kv { display:grid; grid-template-columns:minmax(120px,34%) 1fr; gap:6px 12px; margin:0; font-size:13px; }
.ev-kv dt { color:var(--text-muted); } .ev-kv dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.ev-tile { padding:8px 10px; }
.ev-tv { font-size:16px; line-height:22px; margin:2px 0; }
.ev-steps { margin:14px 0 0; padding-left:20px; font-size:13px; display:flex; flex-direction:column; gap:6px; }
.ev-scorebar { position:relative; height:36px; margin:6px 0 4px; }
.ev-scoretrack { position:absolute; left:0; right:0; top:10px; height:10px; border-radius:9999px; overflow:hidden; display:flex; border:1px solid var(--border); }
.ev-scoremark { position:absolute; top:24px; font-size:10px; color:var(--text-subtle); transform:translateX(-50%); white-space:nowrap; }
.ev-scoredot { position:absolute; top:8px; width:14px; height:14px; border-radius:50%; border:2px solid var(--bg-raised); box-shadow:0 0 0 1px var(--border-strong); transition:left var(--dur-2) var(--ease-in); }
.ev-fs { border:0; padding:0; margin:0; min-width:0; }
.ev-fs legend { margin-bottom:6px; }
.ev-act { padding:8px 10px; align-items:center; transition:border-color var(--dur-1), background var(--dur-1); }
.ev-act:has(input:checked) { border-color:var(--primary); background:var(--bg-selected); }
@media (min-width:1024px){ .ev-grid .table-wrap { max-height:calc(100vh - 230px); min-height:320px; } }

/* === changes === */
.draft-hero { display:flex; align-items:center; gap:14px; padding:14px 16px; flex-wrap:wrap; position:relative; overflow:hidden; }
.draft-hero::before { content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--c, var(--ok)); }
.draft-hero.dirty { --c:var(--primary); background:linear-gradient(90deg, color-mix(in srgb, var(--primary) 7%, var(--bg-surface)), var(--bg-surface) 60%); }
.draft-hero.clean { --c:var(--ok); }
.draft-hero .dh-ic { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; flex-shrink:0; color:var(--c); background:color-mix(in srgb, var(--c) 13%, transparent); border:1px solid color-mix(in srgb, var(--c) 30%, transparent); }
.draft-hero .dh-v { font-size:18px; line-height:26px; font-weight:600; letter-spacing:-.01em; }
.chg-group h3 { color:var(--text-muted); font-size:13px; }
.chg-card { overflow:hidden; position:relative; }
.chg-card::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--c); }
.chg-head { display:flex; align-items:center; gap:8px; padding:10px 12px 8px 14px; flex-wrap:wrap; }
.op-badge { display:inline-flex; align-items:center; gap:4px; height:20px; padding:0 7px; border-radius:var(--r-xs); font-size:11px; font-weight:600; letter-spacing:.03em; text-transform:uppercase; --c:var(--neutral); color:var(--c); background:color-mix(in srgb, var(--c) 14%, transparent); }
.op-badge.ok{--c:var(--ok)} .op-badge.bad{--c:var(--bad)} .op-badge.learn{--c:var(--learn)} .op-badge.neutral{--c:var(--neutral)}
.chg-leaves { list-style:none; margin:0; padding:0 12px 10px 14px; display:flex; flex-direction:column; gap:4px; }
.chg-leaf { display:grid; grid-template-columns:minmax(140px, 34%) 1fr; gap:4px 12px; align-items:center; padding:5px 8px; border-radius:var(--r-sm); background:var(--bg-surface-2); border:1px solid var(--border); min-width:0; }
.chg-path { font-size:12px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chg-vals { display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0; }
.chg-arrow { color:var(--text-subtle); display:inline-flex; }
.chg-val { font-size:12px; padding:1px 6px; border-radius:var(--r-xs); max-width:100%; overflow-wrap:anywhere; }
.chg-val.before { background:color-mix(in srgb, var(--bad) 12%, transparent); color:var(--text); text-decoration:line-through; text-decoration-color:color-mix(in srgb, var(--bad) 60%, transparent); }
.chg-val.after { background:color-mix(in srgb, var(--ok) 14%, transparent); color:var(--text); }
.chg-val.none { color:var(--text-subtle); font-style:italic; font-size:12px; }
.chg-more { margin:0 0 8px 8px; }
@media (max-width:768px){ .chg-leaf { grid-template-columns:1fr; } }
.val-card.ok { border-color:color-mix(in srgb, var(--ok) 40%, var(--border)); }
.val-card.bad { border-color:color-mix(in srgb, var(--bad) 45%, var(--border)); }
.ch-stepper { padding-bottom:12px; margin-bottom:14px !important; border-bottom:1px solid var(--border); }
.publish-hero { display:flex; gap:16px; align-items:center; flex-wrap:wrap; padding:12px 14px; margin-bottom:14px; border-radius:var(--r-md); border:1px solid color-mix(in srgb, var(--primary) 35%, var(--border)); background:color-mix(in srgb, var(--primary) 7%, var(--bg-surface)); }
.ph-ver { display:flex; flex-direction:column; } .ph-ver .mono { font-size:26px; line-height:32px; font-weight:600; color:var(--primary); }
.deploy-grp { display:flex; align-items:flex-start; gap:10px; padding:10px 12px; border-radius:var(--r-md); border:1px solid var(--border); background:var(--bg-surface); transition:border-color var(--dur-1), background var(--dur-1); }
.deploy-grp:hover { border-color:var(--border-strong); }
.deploy-grp.on { border-color:color-mix(in srgb, var(--primary) 55%, var(--border)); background:color-mix(in srgb, var(--primary) 6%, var(--bg-surface)); }
.deploy-grp input { accent-color:var(--primary); width:16px; height:16px; margin-top:2px; flex-shrink:0; }
.rollout { overflow:hidden; }
.rollout.in_progress { border-color:color-mix(in srgb, var(--learn) 45%, var(--border)); }
.rollout.rolled_back, .rollout.stalled { border-color:color-mix(in srgb, var(--warn) 45%, var(--border)); }
.rollout.failed { border-color:color-mix(in srgb, var(--bad) 50%, var(--border)); }
.ro-head { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; padding:10px 12px; border-bottom:1px solid var(--border); background:var(--bg-surface-2); }
.ro-ver { display:inline-flex; align-items:center; gap:4px; font-size:13px; }
.ro-body { padding:12px; }
.phase-track { list-style:none; margin:0 0 10px; padding:0; display:flex; align-items:center; gap:0; flex-wrap:wrap; }
.pt-step { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:500; color:var(--text-subtle); }
.pt-step + .pt-step::before { content:""; width:36px; height:2px; margin:0 8px; border-radius:2px; background:var(--border-strong); }
.pt-step.done + .pt-step::before, .pt-step.done + .pt-step.active::before { background:var(--ok); }
.pt-dot { width:24px; height:24px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--border-strong); background:var(--bg-surface); }
.pt-step.done { color:var(--text-muted); } .pt-step.done .pt-dot { background:var(--ok); border-color:var(--ok); color:var(--bg-surface); }
.pt-step.active { color:var(--text); } .pt-step.active .pt-dot { border-color:var(--learn); color:var(--learn); box-shadow:0 0 0 3px color-mix(in srgb, var(--learn) 22%, transparent); }
.pt-step.halt { color:var(--warn); } .pt-step.halt .pt-dot { border-color:var(--warn); color:var(--warn); }
.ro-progress { height:6px; border-radius:9999px; background:var(--bg-surface-2); border:1px solid var(--border); overflow:hidden; }
.ro-progress span { display:block; height:100%; background:linear-gradient(90deg, var(--ok), color-mix(in srgb, var(--ok) 70%, var(--primary))); border-radius:9999px; transition:width var(--dur-3) var(--ease-in); }
.ro-agents { list-style:none; margin:10px 0 0; padding:0; display:flex; flex-direction:column; gap:2px; }
.ro-agent { display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:6px 8px; border-radius:var(--r-sm); }
.ro-agent:hover { background:var(--bg-hover); }
.ro-agent .ro-st { display:inline-flex; color:var(--text-subtle); }
.ro-agent.applied .ro-st { color:var(--ok); } .ro-agent.pending .ro-st { color:var(--learn); } .ro-agent.failed .ro-st, .ro-agent.timeout .ro-st { color:var(--bad); }
.ro-err { flex-basis:100%; padding-left:24px; }
.ch-cb { accent-color:var(--primary); width:16px; height:16px; }

@media (min-width:1024px){ .app { background: linear-gradient(to right, var(--bg-surface) calc(var(--nav-w) - 1px), var(--border) calc(var(--nav-w) - 1px), var(--border) var(--nav-w), transparent var(--nav-w)); } }

/* === fleet === */
.ag-kv { display:grid; grid-template-columns:minmax(110px,40%) 1fr; gap:6px 12px; margin:0; font-size:13px; }
.ag-kv dt { color:var(--text-subtle); font-size:12px; } .ag-kv dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.ag-chip { display:inline-flex; align-items:center; gap:4px; padding:3px 8px; border-radius:var(--r-sm); font-size:12px; line-height:16px; border:1px solid color-mix(in srgb, var(--c) 40%, transparent); background:color-mix(in srgb, var(--c) 10%, var(--bg-surface)); color:var(--text); max-width:100%; overflow-wrap:anywhere; }
.ag-chip.bad { --c:var(--bad); } .ag-chip.learn { --c:var(--learn); } .ag-chip svg.lucide { color:var(--c); flex-shrink:0; }
.ag-pulse { position:relative; } .ag-pulse::after { content:""; position:absolute; inset:-3px; border-radius:50%; border:2px solid var(--c); opacity:0; animation:pulse 2.4s infinite; }
.live-ind { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:500; color:var(--ok); padding:0 6px; height:18px; border-radius:9999px; background:color-mix(in srgb, var(--ok) 12%, transparent); vertical-align:middle; }
.live-ind svg.lucide { width:12px; height:12px; }
.ag-cmd { display:flex; align-items:center; gap:8px; width:100%; border:0; background:transparent; color:var(--text-muted); font:inherit; text-align:left; padding:7px 10px; border-radius:var(--r-sm); min-height:34px; transition:background var(--dur-1), color var(--dur-1); position:relative; }
.ag-cmd:hover { background:var(--bg-hover); color:var(--text); }
.ag-cmd.on { background:var(--bg-selected); color:var(--text); }
.ag-cmd.on::before { content:""; position:absolute; left:0; top:6px; bottom:6px; width:3px; border-radius:2px; background:var(--primary); }
.ag-files { list-style:none; margin:0; padding:4px; max-height:620px; overflow:auto; }
.ag-prompt { padding:10px 12px; white-space:pre-wrap; word-break:break-all; }
.ag-term { max-height:520px; min-height:120px; white-space:normal; }
.ag-term .tl { white-space:pre-wrap; word-break:break-word; padding:1px 0; border-bottom:1px solid rgb(255 255 255 / .03); }
.ag-term .tl.bad { color:#F26B61; } .ag-term .tl.warn { color:#E9B949; } .ag-term .tl.ok { color:#7FE0B0; } .ag-term .tl.dim { color:#8494A2; }
.ag-term .cmd { margin-bottom:6px; color:#5CCFE3; }
.ag-run { margin-top:12px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-surface-2); display:flex; flex-direction:column; gap:8px; }
.ag-run-t { display:flex; align-items:center; gap:8px; }
.ag-run-steps { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px; font-size:13px; }
.ag-run-steps li { display:inline-flex; align-items:center; gap:6px; color:var(--text-subtle); }
.ag-run-steps li.done { color:var(--ok); } .ag-run-steps li.cur { color:var(--text); font-weight:500; }
.ag-run-steps li.cur svg.lucide { animation: spin 900ms linear infinite; color:var(--primary); }
.ag-snip-pre { margin:0; white-space:pre; overflow:auto; max-height:360px; font-size:12px; }
.ag-empty { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:24px; padding:12px; align-items:start; }
.ag-empty-l .empty-ic { margin:0; }
@media (max-width:1023px){ .ag-empty { grid-template-columns:1fr; } }
.ag-steps { margin:0; padding-left:20px; display:flex; flex-direction:column; gap:6px; color:var(--text-muted); }
.ag-steps b { color:var(--text); }
.ag-spark svg { width:100%; height:48px; }
.ob-opt { display:flex; gap:10px; align-items:flex-start; padding:12px; transition:border-color var(--dur-1), background var(--dur-1); }
.ob-opt input { accent-color:var(--primary); margin-top:3px; }
.ob-opt.on { border-color:var(--primary); background:color-mix(in srgb, var(--primary) 7%, var(--bg-surface)); box-shadow:0 0 0 1px var(--primary); }
.ob-opt > svg.lucide { color:var(--text-subtle); }
.ob-notes { margin:10px 0 0; padding-left:18px; display:flex; flex-direction:column; gap:4px; }
.ob-wait { text-align:center; padding:24px 8px; }
.ob-radar { width:72px; height:72px; margin:0 auto; border-radius:50%; display:grid; place-items:center; color:var(--primary); background:color-mix(in srgb, var(--primary) 12%, var(--bg-surface-2)); position:relative; }
.ob-radar::before, .ob-radar::after { content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--primary); opacity:0; animation: ob-ring 2.4s infinite; }
.ob-radar::after { animation-delay:1.2s; }
.ob-radar.ok { color:var(--ok); background:color-mix(in srgb, var(--ok) 14%, var(--bg-surface-2)); } .ob-radar.ok::before, .ob-radar.ok::after { display:none; }
@keyframes ob-ring { 0% { opacity:.6; transform:scale(1); } 100% { opacity:0; transform:scale(1.8); } }
@media (prefers-reduced-motion: reduce) { .ob-radar::before, .ob-radar::after, .ag-pulse::after { display:none; } }
.cp-sec { margin-top:8px; } .cp-sec .label { margin-bottom:2px; }

/* === ops & admin === (learning, alerts, audit, reports, admin, settings, updates) */
.al-sevstrip { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px; margin-bottom:12px; }
@media (max-width:768px){ .al-sevstrip { grid-template-columns:repeat(3, minmax(0,1fr)); } }
.al-sevchip { display:flex; flex-direction:column; align-items:flex-start; gap:4px; padding:10px 12px; border-radius:var(--r-md); border:1px solid var(--border); background:var(--bg-surface); color:var(--text); font:inherit; text-align:left; transition:border-color var(--dur-1), background var(--dur-1); }
.al-sevchip .tnum { font-size:20px; font-weight:600; line-height:24px; }
.al-sevchip:hover { border-color:var(--border-strong); background:var(--bg-hover); }
.al-sevchip.on { border-color:var(--primary); background:var(--bg-selected); }
.al-list { list-style:none; margin:0; padding:0; }
.al-item { display:grid; grid-template-columns:3px 1fr auto; gap:12px; padding:12px 14px 12px 0; border-bottom:1px solid var(--border); transition:background var(--dur-1); }
.al-item:last-child { border-bottom:0; }
.al-item:hover { background:var(--bg-hover); }
.al-item .al-bar { background:transparent; border-radius:0 2px 2px 0; }
.al-item.unread .al-bar { background:var(--c); }
.al-item.unread .al-title { font-weight:600; }
.al-main { min-width:0; }
.al-title { margin-top:4px; font-size:14px; overflow-wrap:anywhere; }
.al-title a { color:var(--text); } .al-title a:hover { color:var(--primary); }
.al-body { font-size:13px; margin-top:2px; overflow-wrap:anywhere; }
.al-type { padding:12px; height:100%; }
.al-type-ic, .ln-rec .lucide { flex-shrink:0; }
.al-type-ic { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; color:var(--primary); background:color-mix(in srgb, var(--primary) 12%, transparent); border:1px solid color-mix(in srgb, var(--primary) 25%, transparent); }
.al-fs { border:1px solid var(--border); border-radius:var(--r-md); padding:10px 12px 12px; margin:0; min-width:0; }
.al-fs legend { padding:0 6px; }

.ln-step { width:14px; height:6px; border-radius:2px; background:var(--bg-surface-2); border:1px solid var(--border-strong); }
.ln-step.on { background:var(--learn); border-color:var(--learn); }
.ln-step.on.grad { background:var(--ok); border-color:var(--ok); }
.ln-step.unknown { border-style:dashed; }
.ln-card { width:100%; display:flex; flex-direction:column; border-top:3px solid var(--border-strong); }
.ln-card > .card-b { flex:1; }
.ln-card.ready { border-top-color:var(--ok); }
.ln-card.focus { outline:2px solid var(--primary); outline-offset:2px; }
.ln-name { font-weight:600; font-size:15px; color:var(--text); }
.ln-metrics { display:grid; grid-template-columns:1fr auto; gap:2px 12px; margin:0; font-size:12px; }
.ln-metrics dt { color:var(--text-subtle); } .ln-metrics dd { margin:0; text-align:right; }
.ln-ev { display:flex; flex-direction:column; gap:2px; font-size:12px; padding:8px 10px; border-radius:var(--r-sm); background:var(--bg-surface-2); border:1px solid var(--border); }
.ln-rec { padding:8px 10px; border-radius:var(--r-sm); border:1px solid color-mix(in srgb, var(--c) 40%, var(--border)); background:color-mix(in srgb, var(--c) 8%, var(--bg-surface)); }
.ln-rec > .row { color:var(--c); }
.ln-path { list-style:none; margin:0; padding:0 0 0 14px; border-left:2px solid var(--border); display:flex; flex-direction:column; gap:8px; }
.ln-path li { position:relative; display:flex; flex-direction:column; }
.ln-path li::before { content:""; position:absolute; left:-20px; top:5px; width:10px; height:10px; border-radius:50%; background:var(--bg-surface); border:2px solid var(--learn); }
.ln-path li.grad::before { border-color:var(--ok); background:var(--ok); }

.au-filters { padding:10px 12px; margin-bottom:12px; }
.au-kv { display:grid; grid-template-columns:minmax(110px, 32%) 1fr; gap:6px 12px; margin:0; font-size:13px; }
.au-kv dt { color:var(--text-muted); } .au-kv dd { margin:0; min-width:0; overflow-wrap:anywhere; }
.au-hash { display:grid; grid-template-columns:1fr auto 1fr; gap:10px; align-items:center; padding:10px; border-radius:var(--r-sm); background:var(--bg-surface-2); border:1px solid var(--border); }
.au-hash .mono { font-size:11px; overflow-wrap:anywhere; }

.rp-doc { padding:24px 28px; }
@media (max-width:768px){ .rp-doc { padding:16px; } }
.rp-head { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:flex-start; padding-bottom:16px; border-bottom:1px solid var(--border); margin-bottom:16px; }
.rp-meta { font-size:12px; color:var(--text-muted); display:flex; flex-direction:column; gap:2px; text-align:right; }
@media (max-width:768px){ .rp-meta { text-align:left; } }
.rp-kpis { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; margin-bottom:14px; }
@media (min-width:1024px){ .rp-kpis { grid-template-columns:repeat(6, minmax(0,1fr)); } }
.rp-kpi { display:flex; flex-direction:column; gap:2px; padding:10px; border-radius:var(--r-sm); background:var(--bg-surface-2); border:1px solid var(--border); }
.rp-kpi svg.lucide { color:var(--primary); }
.rp-kpi b { font-size:20px; line-height:26px; }
.rp-lead { font-size:14px; line-height:22px; margin:0 0 16px; max-width:80ch; }
.rp-doc section { margin-bottom:18px; } .rp-doc h3 { margin-bottom:8px; }
.rp-tops { gap:16px; }
.rp-tbl td, .rp-tbl th { padding-left:0; }
.rp-foot { font-size:12px; color:var(--text-subtle); border-top:1px solid var(--border); padding-top:10px; }
@media print {
  .rp-side, .page-head .row.wrap, .tabs, .toasts, .skip-link { display:none !important; }
  .main { padding:0 !important; } .grid-12 > .xl\:col-span-8 { grid-column:span 12 / span 12 !important; }
  .rp-doc { border:0; box-shadow:none; padding:0; }
  .rp-doc a { color:inherit; text-decoration:none; }
}

.ad-role { padding:12px; height:100%; }
.st-theme { width:100%; display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:12px; text-align:left; font:inherit; color:var(--text); }
.st-theme.on { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); }
.st-theme .lucide { color:var(--primary); }
.st-swatch { display:grid; grid-template-columns:2fr 1fr 1fr; gap:4px; width:100%; height:56px; border-radius:var(--r-sm); padding:6px; border:1px solid var(--border); }
.st-swatch.dark { background:#0A0F14; } .st-swatch.dark span:nth-child(1) { background:#10171E; } .st-swatch.dark span:nth-child(2) { background:#3CC3DA; } .st-swatch.dark span:nth-child(3) { background:#1B2631; }
.st-swatch.light { background:#F4F6F8; } .st-swatch.light span:nth-child(1) { background:#FFFFFF; } .st-swatch.light span:nth-child(2) { background:#0B6F82; } .st-swatch.light span:nth-child(3) { background:#E1F2F5; }
.st-swatch span { border-radius:4px; }
.up-tests { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.up-tests li { display:flex; gap:8px; align-items:flex-start; }

/* === assets & policies === */
.lvl-seg { width:14px; height:6px; border-radius:2px; background:var(--bg-surface-2); border:1px solid var(--border-strong); }
.lvl-seg.on { background:var(--learn); border-color:var(--learn); }
.as-card { display:flex; flex-direction:column; position:relative; overflow:hidden; }
.as-card::before { content:""; position:absolute; left:0; right:0; top:0; height:3px; background:var(--c); opacity:.9; }
.as-card:hover { border-color:var(--border-strong); box-shadow:var(--shadow-2); }
.as-card-link { color:inherit; text-decoration:none; flex:1; display:block; }
.as-card-link:hover { text-decoration:none; color:inherit; }
.as-card-stats { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:10px; margin-top:14px; padding-top:10px; border-top:1px dashed var(--border); }
.as-card-stats > div { min-width:0; }
.edit-bar { position:sticky; top:calc(var(--top-h) + 8px); z-index:var(--z-sticky); padding:10px 12px; margin-bottom:12px; border-color:color-mix(in srgb, var(--primary) 60%, var(--border)); background:color-mix(in srgb, var(--primary) 7%, var(--bg-raised)); display:flex; gap:10px; align-items:center; flex-wrap:wrap; box-shadow:var(--shadow-2); animation: fadein var(--dur-2) var(--ease-in); }
.edit-bar-ic { width:30px; height:30px; border-radius:8px; display:grid; place-items:center; color:var(--primary); background:color-mix(in srgb, var(--primary) 14%, transparent); flex-shrink:0; }
.url-row { padding:8px 10px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:6px 12px; align-items:center; }
.grp-pick { padding:8px 10px; align-items:center !important; transition:border-color var(--dur-1), background var(--dur-1); }
.grp-pick.is-on { border-color:color-mix(in srgb, var(--primary) 55%, var(--border)); background:color-mix(in srgb, var(--primary) 6%, var(--bg-surface-2)); }
.kv-grid { display:grid; grid-template-columns:minmax(90px, auto) 1fr; gap:6px 12px; margin:0; font-size:13px; }
.kv-grid dt { color:var(--text-muted); text-transform:capitalize; } .kv-grid dd { margin:0; min-width:0; overflow-wrap:anywhere; text-align:right; }
.danger-card { border-color:color-mix(in srgb, var(--bad) 35%, var(--border)); }
.mode-explain { display:flex; gap:8px; align-items:flex-start; max-width:420px; font-size:13px; color:var(--text-muted); padding:8px 10px; border-radius:var(--r-md); background:var(--bg-surface-2); border:1px solid var(--border); }
.mode-explain svg.lucide { color:var(--primary); margin-top:2px; }
.threshold-bar { position:relative; display:flex; height:8px; border-radius:9999px; overflow:visible; margin:10px 0 6px; max-width:520px; border:1px solid var(--border); }
.threshold-bar span:nth-child(1) { background:color-mix(in srgb, var(--fill-low) 40%, transparent); border-radius:9999px 0 0 9999px; }
.threshold-bar span:nth-child(2) { background:color-mix(in srgb, var(--fill-medium) 40%, transparent); }
.threshold-bar span:nth-child(3) { background:color-mix(in srgb, var(--fill-high) 40%, transparent); }
.threshold-bar span:nth-child(4) { background:color-mix(in srgb, var(--fill-critical) 40%, transparent); border-radius:0 9999px 9999px 0; }
.threshold-bar i { position:absolute; top:-5px; height:16px; border-left:2px solid var(--text); transition:left var(--dur-2) var(--ease-in); }
.threshold-bar i::after { content:"blocks from here →"; position:absolute; left:6px; top:-2px; font-size:10px; font-style:normal; color:var(--text-subtle); white-space:nowrap; }
details.adv { border-top:1px solid var(--border); padding-top:10px; }
details.adv > summary { display:flex; gap:8px; align-items:center; font-weight:500; list-style:none; color:var(--text-muted); }
details.adv > summary:hover { color:var(--text); }
details.adv[open] > summary { color:var(--text); }
.locked-eng { padding:12px; height:100%; background:repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--border) 35%, transparent) 10px 11px), var(--bg-surface); opacity:.92; }
.exc-list { list-style:none; margin:0; padding:0; gap:8px; }
.exc-row { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:start; padding:10px 12px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-surface-2); transition:border-color var(--dur-1); }
.exc-row:hover { border-color:var(--border-strong); }
.cond-tag { gap:4px; height:auto; min-height:20px; flex-wrap:wrap; overflow-wrap:anywhere; }
.cond-row { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.cond-row select { width:auto; min-width:170px; }
.cond-row input { min-width:160px; }
.act-opt { display:flex; gap:8px; align-items:center; padding:9px 10px; cursor:pointer; color:var(--text-muted); font:inherit; text-align:left; transition:border-color var(--dur-1), background var(--dur-1), color var(--dur-1); }
.act-opt:hover { color:var(--text); border-color:var(--border-strong); }
.act-opt.is-on { color:var(--text); border-color:var(--primary); background:color-mix(in srgb, var(--primary) 10%, var(--bg-surface-2)); box-shadow: inset 0 0 0 1px var(--primary); }
.wz-opt { padding:14px; display:flex; gap:12px; align-items:flex-start; transition:border-color var(--dur-1), background var(--dur-1); }
.wz-opt:hover { border-color:var(--border-strong); }
.wz-opt.is-on { border-color:var(--primary); background:var(--bg-selected); }
.wz-opt-ic { width:36px; height:36px; border-radius:9px; display:grid; place-items:center; color:var(--primary); background:color-mix(in srgb, var(--primary) 12%, transparent); flex-shrink:0; }
.wz-review { display:grid; grid-template-columns:minmax(120px, auto) 1fr; gap:8px 14px; margin:0; font-size:13px; padding:12px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--bg-surface-2); }
.wz-review dt { color:var(--text-muted); } .wz-review dd { margin:0; min-width:0; }
.rp-preview { border:1px solid var(--border); border-radius:var(--r-md); background:#F7F8FA; color:#1A2430; padding:28px 20px; text-align:center; font-family:system-ui, sans-serif; }
.rp-ic { width:36px; height:36px; margin:0 auto 12px; border-radius:50%; background:#E4E9EE; display:grid; place-items:center; color:#46525E; }
.rp-title { font-size:18px; font-weight:600; overflow-wrap:anywhere; } .rp-body { margin-top:8px; font-size:14px; color:#46525E; overflow-wrap:anywhere; white-space:pre-wrap; } .rp-code { margin-top:14px; font-size:12px; color:#5E6B78; }
#po-pv-redir, #po-pv-code2 { white-space:pre-wrap; }
.used-row { color:inherit; padding:4px 6px; border-radius:var(--r-sm); } .used-row:hover { background:var(--bg-hover); text-decoration:none; color:inherit; }
@media (max-width:768px) { .as-card-stats { grid-template-columns:1fr 1fr; } .exc-row { grid-template-columns:1fr; } .cond-row select, .cond-row input { width:100%; } .kv-grid dd { text-align:left; } .threshold-bar i::after { display:none; } }
@media (max-width:768px){ .ev-hist > .row:first-child { position:static; justify-content:flex-end; margin-bottom:4px; } }
.st-form .seg, .field > .seg { align-self:flex-start; max-width:100%; overflow-x:auto; }
.input.mono, textarea.input.mono { font-family:var(--font-mono); font-variant-ligatures:none; }
.ag-spark svg { width:100%; height:56px; display:block; }
@media (max-width:768px) { .field > .seg, .card-h .seg { display:flex; flex-wrap:wrap; max-width:100%; } .field > .seg button, .card-h .seg button { flex:1 1 auto; justify-content:center; white-space:nowrap; } }
/* overflow guards (found by the 375 px route test) */
.rp-tbl { table-layout:fixed; } .rp-tbl td, .rp-tbl th { white-space:normal; overflow-wrap:anywhere; max-width:none; }

/* =====================================================================
   Design polish pass (2026-10-19) — see docs/design-review.md.
   Overrides earlier rules by source order; tokens only; motion 120–280 ms; reduced-motion honoured.
   ===================================================================== */

/* ---------- type scale & rhythm ---------- */
h1 { font-size:22px; line-height:30px; font-weight:650; letter-spacing:-.02em; }
h2 { font-size:16px; line-height:24px; font-weight:600; letter-spacing:-.01em; }
h3 { font-size:14px; line-height:20px; font-weight:600; letter-spacing:-.005em; }
.page-head h1 { font-size:24px; line-height:32px; letter-spacing:-.022em; font-weight:650; }
.page-head { margin-bottom:18px; gap:12px 16px; align-items:flex-end; }
.page-head > div:first-child > .muted { font-size:13.5px; margin-top:4px !important; max-width:92ch; }
.overline { font-size:10.5px; letter-spacing:.08em; font-weight:600; }
.mono, code, pre, kbd, .code { font-size:.94em; }
td.mono, .tbl .mono { font-size:12.5px; }
.tnum, .v, .si-v, .kpi .v { font-variant-numeric:tabular-nums; }
.help { line-height:18px; }
.sp-4 { height:var(--sp-4); }

/* ---------- shell ---------- */
.main { padding:20px 24px 64px; container:main / inline-size; }
@media (max-width:1023px){ .main { padding:14px 16px 56px; } }
.topbar { gap:10px; padding:0 14px; background:color-mix(in srgb, var(--bg-surface) 96%, transparent); box-shadow:0 1px 0 var(--highlight) inset; }
.brand { gap:10px; font-size:15.5px; font-weight:700; letter-spacing:-.015em; }
.brand:hover { text-decoration:none; color:var(--text); }
.brand-mark { width:28px; height:28px; border-radius:8px; background:linear-gradient(160deg, color-mix(in srgb, var(--primary) 100%, #fff 0%), color-mix(in srgb, var(--primary) 78%, #000)); color:var(--on-primary); box-shadow:inset 0 1px 0 rgb(255 255 255 / .25), 0 1px 2px rgb(0 0 0 / .25); }
.logo-svg { width:18px; height:18px; display:block; }
.logo-svg .logo-slit { fill:var(--primary); }
.top-pill { height:28px; padding:0 10px; font-weight:550; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 28%, transparent); }
.top-pill:hover { text-decoration:none; filter:brightness(1.08); }
.search-btn { height:32px; border-radius:8px; background:var(--bg-surface-2); border-color:var(--border); font-weight:400; }
.search-btn kbd { background:var(--bg-surface); }
.sidenav { background:var(--nav-bg); padding:10px 10px 16px; }
@media (min-width:1024px){ .app { background: linear-gradient(to right, var(--nav-bg) calc(var(--nav-w) - 1px), var(--border) calc(var(--nav-w) - 1px), var(--border) var(--nav-w), transparent var(--nav-w)); } }
.nav-group { margin:16px 0 6px; padding:0 10px; color:var(--text-subtle); }
.nav-group:first-child { margin-top:6px; }
.nav-item { height:34px; border-radius:8px; gap:10px; padding:0 10px; font-weight:500; font-size:13.5px; transition:background var(--dur-1) var(--ease-in), color var(--dur-1) var(--ease-in); }
.nav-item svg.lucide { width:18px; height:18px; color:var(--text-subtle); transition:color var(--dur-1); }
.nav-item:hover svg.lucide { color:var(--text-muted); }
.nav-item[aria-current="page"] { background:color-mix(in srgb, var(--primary) 13%, transparent); color:var(--text); font-weight:600; }
.nav-item[aria-current="page"] svg.lucide { color:var(--primary); }
.nav-item[aria-current="page"]::before { left:-10px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; }
.nav-item .count { height:18px; min-width:18px; justify-content:center; padding:0 5px; font-size:11px; }
.nav-foot { margin:18px 6px 0; padding:10px 6px 0; }
.avatar { width:28px; height:28px; font-size:11px; background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 55%, var(--bg-raised)), color-mix(in srgb, var(--cat-2) 45%, var(--bg-raised))); border-color:color-mix(in srgb, var(--primary) 35%, var(--border)); }

/* ---------- surfaces ---------- */
.card { border-radius:var(--r-md); border-color:var(--border); box-shadow:inset 0 1px 0 var(--highlight), var(--shadow-1); }
.card-h { padding:12px 16px; min-height:48px; border-bottom-color:var(--border-soft); }
.card-h h3 { font-size:13.5px; }
.card-h > .row:first-child > svg.lucide { color:var(--text-subtle); }
.card-b { padding:14px 16px; }
.card-f { padding:10px 16px; border-top-color:var(--border-soft); }
.card-h .btn-ghost.btn-sm { color:var(--primary); font-weight:550; }
.card-h .btn-ghost.btn-sm:hover { color:var(--primary-hover); }
a.card.clickable:hover, .card.kpi.clickable:hover, .as-card:hover { border-color:color-mix(in srgb, var(--primary) 35%, var(--border-strong)); box-shadow:inset 0 1px 0 var(--highlight), var(--shadow-2); }
.inset { border-radius:var(--r-sm); }
.grid-12 { gap:14px; }
@media (max-width:768px){ .grid-12 { gap:10px; } }
.src-tag { display:inline-flex; align-items:center; gap:4px; font-size:11px; color:var(--text-subtle); min-width:0; max-width:100%; white-space:nowrap; }
.src-tag .truncate { min-width:0; }
.src-tag svg.lucide { width:12px; height:12px; opacity:.85; }

/* ---------- buttons, inputs, pills ---------- */
.btn { border-radius:8px; font-weight:550; transition:background var(--dur-1) var(--ease-in), border-color var(--dur-1), color var(--dur-1), box-shadow var(--dur-1), transform var(--dur-1); }
.btn:active:not(:disabled) { transform:translateY(.5px); }
.btn-primary { background:var(--primary); box-shadow:inset 0 1px 0 rgb(255 255 255 / .18), 0 1px 2px rgb(0 0 0 / .18); }
.btn-primary:hover { background:var(--primary-hover); }
.btn-secondary { background:var(--bg-surface); border-color:var(--border-strong); box-shadow:var(--shadow-1); }
.btn-secondary:hover { background:var(--bg-hover); border-color:color-mix(in srgb, var(--text-subtle) 60%, var(--border-strong)); }
.btn:focus-visible, .seg button:focus-visible, .tab:focus-visible, .nav-item:focus-visible { outline:2px solid var(--focus-ring); outline-offset:2px; }
.seg { border-radius:8px; border-color:var(--border-strong); padding:2px; gap:2px; background:var(--bg-surface-2); }
.seg button { height:26px; border-radius:6px; border-right:0; padding:0 10px; font-size:13px; transition:background var(--dur-1), color var(--dur-1); }
.seg button[aria-pressed="true"] { background:var(--bg-raised); color:var(--text); box-shadow:0 1px 2px rgb(0 0 0 / .18), inset 0 0 0 1px var(--border); }
:root[data-theme="light"] .seg button[aria-pressed="true"], :root:not([data-theme]) .seg button[aria-pressed="true"] { background:#fff; box-shadow:0 1px 2px rgb(13 22 32 / .12), inset 0 0 0 1px var(--border); }
@media (max-width:768px){ .seg button { height:36px; } }
.input, .select, textarea.input { border-radius:8px; background:var(--bg-surface); transition:border-color var(--dur-1), box-shadow var(--dur-1); }
.input:focus-visible, .select:focus-visible { outline:none; border-color:var(--focus-ring); box-shadow:0 0 0 3px color-mix(in srgb, var(--focus-ring) 28%, transparent); }
.input-lg { height:40px; font-size:14px; }
.pill { height:22px; padding:0 8px; gap:5px; font-weight:550; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 24%, transparent); }
.pill svg.lucide { width:12px; height:12px; }
.tag { border-radius:6px; height:22px; padding:0 7px; }
.delta { height:20px; border-radius:6px; font-weight:600; font-size:11.5px; padding:0 6px; }
.delta svg.lucide { width:12px; height:12px; }
.tabs { gap:4px; margin-bottom:16px; }
.tab { height:40px; padding:0 12px; font-size:13.5px; transition:color var(--dur-1), border-color var(--dur-1); }
.tab svg.lucide { color:var(--text-subtle); }
.tab[aria-selected="true"] svg.lucide { color:var(--primary); }
.tab .pill { height:18px; min-width:18px; justify-content:center; padding:0 5px; font-size:11px; box-shadow:none; }
.banner { border-radius:var(--r-md); padding:12px 14px; }

/* ---------- tables ---------- */
.table-wrap { scrollbar-width:thin; }
table.tbl { font-size:13px; }
.tbl th { background:color-mix(in srgb, var(--bg-surface-2) 70%, var(--bg-surface)); color:var(--text-subtle); font-size:11.5px; font-weight:600; letter-spacing:.02em; padding:9px 12px; border-bottom:1px solid var(--border); }
.tbl td { padding:10px 12px; border-bottom:1px solid var(--border-soft); }
.tbl tbody tr:last-child td { border-bottom:0; }
.tbl tbody tr:hover { background:color-mix(in srgb, var(--bg-hover) 70%, transparent); }
.tbl tbody tr.row-link:hover td:first-child { box-shadow:inset 2px 0 0 color-mix(in srgb, var(--primary) 60%, transparent); }
.tbl.compact td, [data-density="compact"] .tbl td { padding:6px 12px; }
[data-density="compact"] .tbl th { padding:7px 12px; }
.ev-time { display:inline-flex; align-items:baseline; gap:6px; white-space:nowrap; }
.ev-time .ev-date { font-size:11px; color:var(--text-subtle); }
@media (max-width:768px){ .tbl.stack tr { border-radius:var(--r-md); border-color:var(--border); box-shadow:var(--shadow-1); padding:8px 0; } .tbl.stack td { padding:5px 14px; } }

/* ---------- KPI tiles & overview ---------- */
.kpi-grid { display:grid; gap:14px; grid-template-columns:repeat(2, minmax(0,1fr)); }
@container main (min-width:560px){ .kpi-grid { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@container main (min-width:1000px){ .kpi-grid { grid-template-columns:repeat(6, minmax(0,1fr)); } }
@media (max-width:768px){ .kpi-grid { gap:10px; } }
.kpi { padding:14px 16px 12px; gap:4px; height:100%; text-decoration:none; color:inherit; }
a.kpi:hover { text-decoration:none; color:inherit; }
.kpi-h { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:22px; }
.kpi .label { font-size:12.5px; font-weight:550; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kpi-ic { width:22px; height:22px; border-radius:6px; display:grid; place-items:center; color:var(--c); background:color-mix(in srgb, var(--c) 12%, transparent); flex-shrink:0; }
.kpi .v { font-size:28px; line-height:34px; font-weight:650; letter-spacing:-.025em; }
.kpi .v-row { gap:8px; align-items:center; margin-top:2px; }
.kpi-sub { min-height:36px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--text-subtle); font-size:12px; }
.kpi .spark { margin-top:auto; height:28px; opacity:1; }
.kpi .spark .spark-svg { width:100%; height:28px; display:block; }
.kpi .src { border-top:1px solid var(--border-soft); margin-top:8px; padding-top:8px; min-width:0; display:flex; }
.kpi-note { margin:8px 2px 18px; font-size:12px; color:var(--text-subtle); }
.status-strip { display:grid; gap:14px; grid-template-columns:repeat(auto-fit, minmax(190px, 1fr)); }
@container main (min-width:1000px){ .status-strip { grid-template-columns:repeat(5, minmax(0,1fr)); } }
.status-strip > div { min-width:0; }
.status-item { padding:12px 14px 12px 16px; gap:12px; align-items:center; }
.status-item::before { width:3px; border-radius:0 3px 3px 0; top:10px; bottom:10px; }
.status-item .si-ic { margin-top:0; width:36px; height:36px; border-radius:10px; box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 22%, transparent); }
.si-l { display:block; font-size:12px; font-weight:550; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.status-item .si-v { font-size:17px; line-height:24px; font-weight:650; letter-spacing:-.015em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.si-s { display:block; font-size:12px; color:var(--text-subtle); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (max-width:640px){
  .status-strip { display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:16px; gap:10px; padding-bottom:4px; margin:0 -16px; padding-left:16px; padding-right:16px; scrollbar-width:none; }
  .status-strip::-webkit-scrollbar { display:none; }
  .status-strip > div { flex:0 0 78%; scroll-snap-align:start; }
}

/* ---------- charts ---------- */
.chart .grid line { stroke:var(--border); stroke-dasharray:2 4; opacity:.9; }
.chart .grid line.base { stroke:var(--border-strong); stroke-dasharray:none; opacity:.7; }
.chart .axis text, .chart text.axis { fill:var(--text-subtle); font-size:10.5px; font-family:var(--font-sans); font-variant-numeric:tabular-nums; }
.chart .mark { transition:opacity var(--dur-2) var(--ease-in); }
.chart svg:hover .bar-col .mark { opacity:.5; }
.chart svg .bar-col:hover .mark { opacity:1; }
.chart .mark:hover { opacity:1 !important; filter:brightness(1.12); }
.chart .mark:focus-visible { outline:none; stroke:var(--focus-ring); stroke-width:2; }
.legend { gap:6px 16px; font-size:12px; }
.swatch { width:10px; height:10px; border-radius:3px; }
.tooltip { background:var(--bg-raised); border:1px solid var(--border-strong); border-radius:8px; box-shadow:var(--shadow-3); padding:7px 10px; font-size:12px; font-weight:500; line-height:16px; animation:fadein var(--dur-1) var(--ease-in); font-variant-numeric:tabular-nums; }
.hbars { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }
.hbar { display:grid; grid-template-columns:18px minmax(0, 44%) minmax(0,1fr) 52px; gap:10px; align-items:center; padding:5px 6px; border-radius:6px; color:inherit; text-decoration:none; font-size:13px; transition:background var(--dur-1); }
.hbar:hover { background:var(--bg-hover); text-decoration:none; color:inherit; }
.hbar-rank { color:var(--text-subtle); font-size:11px; text-align:right; }
.hbar-l { display:flex; min-width:0; gap:4px; }
.hbar-l.mono { font-size:12.5px; }
.hbar-t { height:6px; border-radius:9999px; background:var(--bg-surface-2); overflow:hidden; }
.hbar-f { display:block; height:100%; border-radius:9999px; background:var(--c); transition:width var(--dur-3) var(--ease-in); }
.hbar-v { text-align:right; font-weight:550; }
.donut-wrap { display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.donut-v { fill:var(--text); font-size:22px; font-weight:650; letter-spacing:-.02em; font-family:var(--font-sans); }
.donut-l { fill:var(--text-subtle); font-size:10px; font-family:var(--font-sans); }
.donut-legend { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; flex:1; min-width:180px; }
.donut-row { display:flex; align-items:center; gap:10px; padding:5px 6px; border-radius:6px; color:inherit; font-variant-numeric:tabular-nums; }
.donut-row:hover { background:var(--bg-hover); text-decoration:none; color:inherit; }
.donut-pct { width:38px; text-align:right; font-size:12px; }
.ag-spark svg { height:56px; }

/* ---------- empty / loading / error ---------- */
.empty { padding:40px 20px; gap:6px; }
.empty-ic, .empty .empty-ic { position:relative; width:56px; height:56px; border-radius:16px; margin-bottom:10px; color:var(--primary);
  background:linear-gradient(160deg, color-mix(in srgb, var(--primary) 18%, var(--bg-surface-2)), color-mix(in srgb, var(--primary) 6%, var(--bg-surface)));
  border:1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
  box-shadow:0 0 0 8px color-mix(in srgb, var(--primary) 5%, transparent), 0 0 0 16px color-mix(in srgb, var(--primary) 2.5%, transparent), inset 0 1px 0 var(--highlight); }
.empty .empty-ic svg.lucide, .empty-ic svg.lucide { width:24px; height:24px; color:var(--primary); }
.empty-t { font-weight:600; font-size:14.5px; color:var(--text); margin-top:6px; }
.empty-b { max-width:52ch; color:var(--text-muted); font-size:13px; line-height:20px; }
.empty-a { margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; justify-content:center; }
.skel { background:linear-gradient(90deg, var(--bg-surface-2) 0%, color-mix(in srgb, var(--bg-hover) 85%, var(--text-subtle)) 50%, var(--bg-surface-2) 100%); background-size:200% 100%; border-radius:6px; }

/* ---------- drawers, modals, palette, copilot, toasts, menus ---------- */
.scrim, .modal-wrap, .palette-wrap { animation:scrim-in var(--dur-2) var(--ease-in); }
@keyframes scrim-in { from { opacity:0 } to { opacity:1 } }
.drawer { border-left-color:var(--border-strong); animation:slide-in var(--dur-3) cubic-bezier(.16,1,.3,1); }
.drawer-h { padding:14px 18px; gap:10px; }
.drawer-b { padding:16px 18px; }
.drawer-f { padding:12px 18px; background:color-mix(in srgb, var(--bg-raised) 92%, var(--bg-canvas)); }
.modal { border-radius:var(--r-lg); border-color:var(--border-strong); animation:pop var(--dur-3) cubic-bezier(.16,1,.3,1); }
.modal-h { padding:16px 20px; } .modal-b { padding:18px 20px; } .modal-f { padding:14px 20px; }
@keyframes pop { from { transform:translateY(10px) scale(.985); opacity:0 } to { transform:none; opacity:1 } }
.palette { border-radius:16px; }
.palette input { height:52px; font-size:15px; }
.palette li { padding:9px 10px; border-radius:8px; transition:background var(--dur-1); }
.palette li[aria-selected="true"] { background:color-mix(in srgb, var(--primary) 14%, transparent); color:var(--text); }
.palette li[aria-selected="true"] svg.lucide { color:var(--primary); }
.copilot { border-left-color:var(--border-strong); }
.chat-msg { border-radius:12px; padding:10px 12px; line-height:20px; }
.chat-msg.user { background:color-mix(in srgb, var(--primary) 16%, var(--bg-surface-2)); border:1px solid color-mix(in srgb, var(--primary) 28%, transparent); border-bottom-right-radius:4px; max-width:88%; }
.chat-msg.bot { border-bottom-left-radius:4px; }
.toast { border-radius:12px; box-shadow:var(--shadow-3); }
.menu { border-radius:12px; box-shadow:var(--shadow-3); padding:6px; animation:fadein var(--dur-1) var(--ease-in); }
.menu button, .menu a { border-radius:7px; }

/* ---------- login ---------- */
.login-wrap { grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); }
.login-side { padding:36px 56px; gap:32px;
  background:
    radial-gradient(900px 520px at 0% 0%, color-mix(in srgb, var(--primary) 20%, transparent), transparent 62%),
    radial-gradient(700px 480px at 100% 100%, color-mix(in srgb, var(--cat-2) 14%, transparent), transparent 60%),
    var(--nav-bg); }
.login-side::before { opacity:.55; background-size:28px 28px; }
.login-brand { font-size:18px; color:var(--text); }
.login-brand .brand-mark { width:32px; height:32px; border-radius:9px; }
.login-brand .logo-svg { width:20px; height:20px; }
.login-pitch { max-width:520px; }
.login-eyebrow { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--primary); padding:4px 10px; border-radius:9999px; background:color-mix(in srgb, var(--primary) 10%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--primary) 28%, transparent); }
.login-pitch h2 { font-size:34px; line-height:42px; font-weight:700; letter-spacing:-.03em; margin-top:16px; }
.login-lead { color:var(--text-muted); font-size:15px; line-height:24px; margin:12px 0 24px; max-width:46ch; }
.login-glimpse { display:grid; grid-template-columns:1.25fr 1fr; grid-template-rows:repeat(3, auto); gap:10px; }
.lg-card { background:color-mix(in srgb, var(--bg-surface) 88%, transparent); border:1px solid var(--border); border-radius:12px; box-shadow:inset 0 1px 0 var(--highlight), var(--shadow-2); }
.lg-main { grid-row:1 / span 3; padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.lg-h { display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:600; color:var(--text-muted); }
.lg-h > span:first-child { display:inline-flex; gap:6px; align-items:center; }
.lg-live { display:inline-flex; align-items:center; gap:5px; color:var(--ok); font-size:11px; }
.lg-live i { width:6px; height:6px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 3px color-mix(in srgb, var(--ok) 25%, transparent); }
.lg-bars { flex:1; min-height:118px; display:flex; align-items:flex-end; gap:4px; padding-top:6px; border-bottom:1px solid var(--border-strong); background-image:linear-gradient(var(--border) 1px, transparent 1px); background-size:100% 25%; }
.lg-bars span { flex:1; border-radius:3px 3px 0 0; background:var(--c); opacity:.92; }
.lg-row { display:flex; gap:10px; align-items:center; padding:10px 12px; font-size:12px; }
.lg-row b { display:block; font-size:12.5px; color:var(--text); }
.lg-row .grow > span { color:var(--text-subtle); display:block; line-height:16px; }
.lg-ic { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; flex-shrink:0; color:var(--c); background:color-mix(in srgb, var(--c) 13%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--c) 25%, transparent); }
.login-feats { list-style:none; padding:0; margin:22px 0 0; display:flex; flex-wrap:wrap; gap:8px 18px; color:var(--text-muted); font-size:13px; }
.login-feats li { display:inline-flex; gap:6px; align-items:center; }
.login-feats svg.lucide { color:var(--ok); }
.login-foot { display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:12px; color:var(--text-subtle); }
.login-main { background:var(--bg-canvas); }
.login-card { width:min(420px, 100%); padding:32px; border-radius:16px; box-shadow:inset 0 1px 0 var(--highlight), var(--shadow-3); }
.login-card h1 { font-size:24px; line-height:32px; letter-spacing:-.022em; }
.login-sub { margin:4px 0 22px; }
.login-brand-sm { margin-bottom:18px; }
.pw-wrap { position:relative; }
.pw-wrap .input { padding-right:44px; }
.pw-wrap .pw-eye { position:absolute; right:4px; top:50%; transform:translateY(-50%); }
.login-go { width:100%; height:42px; font-size:14.5px; margin-top:4px; }
.login-meta { display:flex; justify-content:space-between; gap:8px 12px; flex-wrap:wrap; align-items:center; margin-top:20px; padding-top:16px; border-top:1px solid var(--border-soft); font-size:12px; color:var(--text-subtle); }
.login-meta > span, .login-meta a { display:inline-flex; gap:5px; align-items:center; }
@media (max-width:1180px){ .login-side { padding:32px 36px; } .login-glimpse { grid-template-columns:1fr; } .lg-main { grid-row:auto; } .lg-row { display:none; } }
@media (max-width:900px) { .login-main { padding:24px 16px; align-content:center; } .login-card { padding:24px 20px; } }
@media (max-width:768px) { .input-lg { height:44px; } .pw-wrap .pw-eye { right:4px; } }

/* ---------- misc screen-level refinements ---------- */
.draft-hero, .publish-hero { border-radius:var(--r-md); }
.as-card::before { height:2px; }
.ln-card { border-top-width:2px; }
.status-dot { box-shadow:0 0 0 3px color-mix(in srgb, var(--c, var(--neutral)) 18%, transparent); }
.terminal { border-radius:10px; box-shadow:inset 0 1px 0 rgb(255 255 255 / .03); }
.code-block { border-radius:8px; }
.stepper .step .n, .pt-dot { font-variant-numeric:tabular-nums; }
.al-sevchip { border-radius:var(--r-md); }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:color-mix(in srgb, var(--text-subtle) 30%, transparent); border-radius:9999px; border:2px solid transparent; background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover { background-color:color-mix(in srgb, var(--text-subtle) 50%, transparent); }
::-webkit-scrollbar-track { background:transparent; }

@media (prefers-reduced-motion: reduce) {
  .chart svg:hover .bar-col .mark { opacity:1; }
  .lg-live i { box-shadow:none; }
}
.si-s { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; line-height:16px; }
.status-item { align-items:flex-start; }
.status-item .si-ic { margin-top:2px; }
.donut-row .pill { min-width:0; }
.donut-row > .tnum:not(.donut-pct) { min-width:52px; text-align:right; font-weight:600; }
.ev-hist > .src-tag:first-child { position:absolute; right:14px; top:10px; z-index:1; }
@media (max-width:768px){ .ev-hist > .src-tag:first-child { position:static; margin-bottom:4px; } }
.ev-hist { padding:12px 14px 12px; }
.ev-inc { display:inline-flex; align-items:center; gap:6px; max-width:240px; min-width:0; }
.ev-more { height:18px; padding:0 5px; font-size:11px; flex-shrink:0; font-variant-numeric:tabular-nums; }
.ev-sample { max-width:220px; }
.ev-query { padding:14px; }
.ev-facets { padding:6px 14px; }
@media (max-width:1023px){ .topbar { gap:6px; padding:0 10px; } }
@media (max-width:768px){ .topbar { gap:2px; padding:0 6px; } .app { grid-template-columns:minmax(0,1fr); } }
.grid-12 > div > .card.kpi, .grid-12 > .card.kpi, [class*="col-span"] > .card.kpi { height:100%; }
.kpi > .src { margin-top:auto; padding-top:8px; }
.kpi > .spark + .src { margin-top:8px; }
.kpi > .help { color:var(--text-subtle); }

/* ---- auth / MFA (security phase): everything from here to the end of this file belongs to js/screens/auth.js + account.js ---- */
/* ---------- sign-in extras: forgot password, second step, accept invitation ---------- */
.login-forgot { display:flex; justify-content:flex-end; margin-top:-6px; font-size:12.5px; }
.login-forgot a { padding:2px 0; }
.auth-icon { width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:14px; color:var(--primary); background:color-mix(in srgb, var(--primary) 13%, transparent); border:1px solid color-mix(in srgb, var(--primary) 28%, transparent); }
.auth-icon.ok { color:var(--ok); background:color-mix(in srgb, var(--ok) 13%, transparent); border-color:color-mix(in srgb, var(--ok) 28%, transparent); }
.auth-icon.warn { color:var(--warn); background:color-mix(in srgb, var(--warn) 13%, transparent); border-color:color-mix(in srgb, var(--warn) 28%, transparent); }
.auth-back { display:flex; justify-content:center; margin-top:18px; font-size:13px; }
.auth-back .btn { height:auto; padding:4px 8px; }
.auth-facts { display:grid; gap:8px; margin:0 0 16px; padding:12px 14px; border:1px solid var(--border-soft); border-radius:var(--r-md); background:var(--bg-surface-2); font-size:13px; }
.auth-facts div { display:flex; justify-content:space-between; gap:12px; }
.auth-facts dt { color:var(--text-subtle); } .auth-facts dd { margin:0; font-weight:500; text-align:right; min-width:0; overflow-wrap:anywhere; }
.otp-input { text-align:center; font-family:var(--font-mono); font-size:26px; letter-spacing:.42em; padding-left:.42em; height:56px; font-variant-numeric:tabular-nums; }
.otp-input::placeholder { letter-spacing:.42em; color:var(--text-subtle); opacity:.55; }
.otp-input.recovery { font-size:19px; letter-spacing:.14em; padding-left:.14em; }
.otp-input.recovery::placeholder { letter-spacing:.14em; }
.pw-meter { display:grid; grid-template-columns:repeat(4, 1fr); gap:4px; margin-top:6px; }
.pw-meter i { height:4px; border-radius:4px; background:var(--border); transition:background var(--dur-2) var(--ease-in); }
.pw-meter[data-level="1"] i:nth-child(-n+1) { background:var(--bad); }
.pw-meter[data-level="2"] i:nth-child(-n+2) { background:var(--warn); }
.pw-meter[data-level="3"] i:nth-child(-n+3) { background:var(--learn); }
.pw-meter[data-level="4"] i { background:var(--ok); }
.pw-rules { display:flex; gap:6px 14px; flex-wrap:wrap; margin-top:6px; font-size:12px; color:var(--text-subtle); }
.pw-rules span.met { color:var(--ok); }
.spinner-line { display:flex; align-items:center; gap:10px; padding:18px 0; color:var(--text-muted); }

/* ---------- two-factor: QR code, manual key, recovery codes ---------- */
.mfa-enroll { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:18px; align-items:start; }
.qr { width:184px; height:184px; padding:10px; border-radius:12px; background:#fff; border:1px solid var(--border-strong); box-shadow:var(--shadow-1); line-height:0; }
.qr svg { width:100%; height:100%; display:block; }
.qr-key { font-family:var(--font-mono); font-size:15px; letter-spacing:.06em; word-break:break-all; }
.qr-manual { margin-top:10px; font-size:13px; }
.qr-manual summary { cursor:pointer; color:var(--primary); padding:2px 0; }
.qr-manual .copy-field { margin-top:8px; }
.mfa-steps { display:flex; gap:6px; margin:0 0 14px; padding:0; list-style:none; font-size:12px; color:var(--text-subtle); }
.mfa-steps li { display:flex; align-items:center; gap:6px; }
.mfa-steps li + li::before { content:""; width:18px; height:1px; background:var(--border-strong); }
.mfa-steps .n { width:20px; height:20px; border-radius:9999px; display:grid; place-items:center; font-size:11px; font-weight:600; border:1px solid var(--border-strong); font-variant-numeric:tabular-nums; }
.mfa-steps li[aria-current="step"] { color:var(--text); font-weight:600; }
.mfa-steps li[aria-current="step"] .n { background:var(--primary); color:var(--on-primary); border-color:var(--primary); }
.mfa-steps li.done .n { background:color-mix(in srgb, var(--ok) 16%, transparent); color:var(--ok); border-color:var(--ok); }
.codes-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:6px 14px; margin:0; padding:14px 16px; list-style:none; border:1px dashed var(--border-strong); border-radius:var(--r-md); background:var(--bg-surface-2); font-family:var(--font-mono); font-size:15px; letter-spacing:.05em; font-variant-numeric:tabular-nums; }
.codes-grid li { padding:2px 0; user-select:all; }
.codes-grid li.used { text-decoration:line-through; opacity:.5; }
@media (max-width:560px) { .mfa-enroll { grid-template-columns:1fr; justify-items:center; } .qr { width:176px; height:176px; } .mfa-enroll > div:last-child { width:100%; } }

/* ---------- account & security ---------- */
.sec-facts { display:grid; gap:0; margin:0; }
.sec-facts > div { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:10px 0; border-bottom:1px solid var(--border-soft); font-size:13px; }
.sec-facts > div:last-child { border-bottom:0; }
.sec-facts dt { color:var(--text-subtle); flex-shrink:0; white-space:nowrap; } .sec-facts dd { margin:0; display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; text-align:right; }
.sec-hero { display:flex; gap:14px; align-items:flex-start; }
.sec-hero .auth-icon { margin:0; flex-shrink:0; }
.sec-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.mfa-cell { white-space:nowrap; }

/* UI polish pass 2 */
.grid-12 > [class*="col-span"] > .card:only-child { height:100%; }
.search-btn.grow { flex:0 1 380px; }
.kpi-grid { margin-bottom:12px; }
/* top bar on mid-size screens: the search field collapses to an icon so nothing overflows (was 1110 px wide at 1024) */
@media (max-width:1279px) and (min-width:769px){
  .search-btn.grow { flex:0 0 auto; min-width:0; width:32px; padding:0; justify-content:center; }
  .search-btn > .truncate, .search-btn > .row { display:none; }
  .brand-name { display:none; }
  .tenant-btn .truncate { max-width:120px !important; }
}
/* touch targets: 44 px minimum on phones/tablets */
@media (max-width:768px){
  .btn, .btn-sm { min-height:44px; height:44px; }
  .btn-icon, .btn-icon.btn-sm { width:44px; }
  .topbar .btn { min-height:44px; height:44px; }
  .topbar .btn-icon { width:44px; }
  .hbar, .donut-row { min-height:44px; }
  .ln-name { display:inline-block; padding:12px 0; margin:-12px 0; }
  .tab { height:44px; }
  .seg button { height:44px; }
  .nav-item { height:44px; }
  .brand { min-height:44px; min-width:32px; }
  .menu button, .menu a { min-height:44px; }
  .topbar .btn-sm:not(.btn-icon) { padding:0 8px; }
}
@media (max-width:1023px){ .stat-col { display:grid !important; grid-template-columns:repeat(2, minmax(0,1fr)); } .stat-col > a.btn { grid-column:1 / -1; } }