/* Keystone v2 design system: premium dark dashboard.
   Inter for prose, monospace for code. Sidebar nav, 2-panel workspace.
   All legacy class names preserved for app.js backward compatibility. */
/* fonts self-hosted via @font-face in ui-v3.css (offline-safe, no runtime CDN) */

:root{
  /* backgrounds */
  --bg-void:#09090B; --bg-base:#0F1117; --bg-surface:#161922; --bg-elevated:#1C1F2E;
  --border-subtle:#232736; --border-default:#2E3347;
  /* backward compat aliases */
  --bg-raised:var(--bg-elevated); --bg-line:var(--border-subtle);
  /* text */
  --text-primary:#F0F0F5; --text-secondary:#9BA3AE; --text-tertiary:#6B7280;
  --text-hi:var(--text-primary); --text-mid:var(--text-secondary); --text-dim:var(--text-tertiary);
  /* accents */
  --orange:#FF8A2B; --green:#3BE081; --gold:#F5C542; --amber:#FFB02E;
  --danger:#FF5C66; --danger-2:#FF8088; --cyan:#5BBFD6;
  /* typography */
  --font-sans:'InterVariable','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,'SF Mono','Cascadia Mono',Menlo,Consolas,monospace;
  --display:var(--ks-font-display);
  /* spacing */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  /* radius */
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --r:10px;
  /* shadows */
  --shadow-sm:0 1px 3px rgba(0,0,0,.4); --shadow-md:0 4px 12px rgba(0,0,0,.5); --shadow-lg:0 8px 30px rgba(0,0,0,.6);
  /* sidebar */
  --sidebar-w:64px; --sidebar-w-expanded:240px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--bg-void);color:var(--text-primary);font-family:var(--font-sans);font-size:14px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{min-height:100vh;position:relative}
::selection{background:rgba(255,138,43,.25);color:var(--text-primary)}

/* scrollbar */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border-subtle);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--border-default)}

/* === COMMAND PALETTE === */
.cmd-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(4px);z-index:100;display:flex;align-items:flex-start;justify-content:center;padding-top:min(20vh,180px);opacity:0;visibility:hidden;transition:opacity .15s ease,visibility .15s ease}
.cmd-overlay.open{opacity:1;visibility:visible}
.cmd-palette{width:min(520px,90vw);background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;transform:translateY(-8px) scale(.98);transition:transform .15s ease;max-height:min(400px,70vh);display:flex;flex-direction:column}
.cmd-overlay.open .cmd-palette{transform:translateY(0) scale(1)}
.cmd-input-wrap{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border-subtle)}
.cmd-input-wrap svg{flex-shrink:0;color:var(--text-tertiary)}
.cmd-input{flex:1;background:transparent;border:none;color:var(--text-primary);font-size:15px;font-family:var(--font-sans);outline:none}
.cmd-input::placeholder{color:var(--text-tertiary)}
.cmd-kbd{font-family:var(--mono);font-size:10px;color:var(--text-tertiary);background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:4px;padding:2px 6px;line-height:1}
.cmd-results{overflow-y:auto;padding:var(--sp-2)}
.cmd-item{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);cursor:pointer;color:var(--text-secondary);font-size:13px;transition:background .1s ease}
.cmd-item:hover,.cmd-item.active{background:rgba(255,138,43,.1);color:var(--text-primary)}
.cmd-item-icon{width:16px;height:16px;color:var(--text-tertiary);flex-shrink:0}
.cmd-item-name{flex:1;font-family:var(--mono)}
.cmd-item-badge{font-size:10px;color:var(--text-tertiary);background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:4px;padding:1px 6px;font-family:var(--mono)}
.cmd-empty{padding:var(--sp-4);text-align:center;color:var(--text-tertiary);font-size:13px}

/* === MOTION LAYER === */
#bg{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.6}
.topbar,.workspace,.ledger,.foot,.hazard,.lede,.tour-bar,.open-banner,.data-prov{position:relative;z-index:1}
.canvas-wrap #g3d{position:absolute;inset:0;width:100%;height:100%;z-index:2;display:none}
.canvas-wrap.has-3d #g3d{display:block}
.canvas-wrap.has-3d #bsvg{opacity:0}
#bsvg{transition:opacity .4s ease}
[data-reveal]{transition:opacity .65s ease,transform .65s cubic-bezier(.2,.8,.2,1);transition-delay:var(--rev-delay,0ms)}
[data-reveal].ks-hidden{opacity:0;transform:translateY(16px)}
@media(prefers-reduced-motion:reduce){#bg{display:none}.canvas-wrap #g3d{display:none}.canvas-wrap.has-3d #bsvg{opacity:1}[data-reveal]{transition:none}[data-reveal].ks-hidden{opacity:1;transform:none}}
.tabnum{font-variant-numeric:tabular-nums}
.scanlines{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.35;background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.08) 2px 3px)}
@media(prefers-reduced-motion:reduce){.scanlines{display:none}*{animation:none!important;transition:none!important}}

/* === SIDEBAR === */
.sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--sidebar-w);background:var(--bg-void);border-right:1px solid var(--border-subtle);z-index:40;display:flex;flex-direction:column;transition:width .25s cubic-bezier(.4,0,.2,1);overflow:hidden}
.sidebar.expanded{width:var(--sidebar-w-expanded)}
.sidebar-brand{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4);height:56px;border-bottom:1px solid var(--border-subtle);flex-shrink:0;overflow:hidden}
.sidebar-logo{width:32px;height:32px;border-radius:var(--radius-sm);background:linear-gradient(135deg,#FF5C66,#FF8A2B);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:18px;font-weight:700;color:#fff;flex-shrink:0;box-shadow:0 0 12px rgba(255,92,102,.3)}
.sidebar-brand-text{font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:1.5px;color:var(--text-primary);white-space:nowrap;opacity:0;transition:opacity .2s ease .1s}
.sidebar.expanded .sidebar-brand-text{opacity:1}
.sidebar-nav{flex:1;display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-2)}
.sidebar-item{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3);border-radius:var(--radius-sm);border:none;background:transparent;color:var(--text-secondary);cursor:pointer;font-family:var(--font-sans);font-size:13px;transition:all .15s ease;width:100%;text-align:left;min-height:44px;overflow:hidden}
.sidebar-item:hover{background:var(--bg-surface);color:var(--text-primary)}
.sidebar-item.active{background:rgba(255,138,43,.1);color:var(--orange);box-shadow:inset 3px 0 0 var(--orange)}
.sidebar-icon{width:20px;height:20px;flex-shrink:0;opacity:.7}
.sidebar-item:hover .sidebar-icon,.sidebar-item.active .sidebar-icon{opacity:1}
.sidebar-label{white-space:nowrap;opacity:0;transition:opacity .2s ease .1s}
.sidebar.expanded .sidebar-label{opacity:1}
.sidebar-footer{padding:var(--sp-3);border-top:1px solid var(--border-subtle);flex-shrink:0}
.sidebar-meta{font-size:11px;color:var(--text-tertiary);text-align:center;font-family:var(--mono)}
.sidebar-item.help{margin-top:auto;border-top:1px solid var(--border-subtle);border-radius:0 0 var(--radius-sm) var(--radius-sm)}

/* === APP SHELL === */
.app-shell{margin-left:var(--sidebar-w);min-height:100vh;transition:margin-left .25s cubic-bezier(.4,0,.2,1)}
.sidebar.expanded~.app-shell{margin-left:var(--sidebar-w-expanded)}

/* === TOPBAR === */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) var(--sp-5);height:52px;border-bottom:1px solid var(--border-subtle);background:rgba(15,17,23,.85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);position:sticky;top:0;z-index:30}
.topbar-left{display:flex;align-items:center;gap:var(--sp-3)}
.topbar-right{display:flex;align-items:center;gap:var(--sp-3)}
.sidebar-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:transparent;color:var(--text-secondary);cursor:pointer;transition:all .15s ease;flex-shrink:0}
.sidebar-toggle:hover{background:var(--bg-surface);color:var(--text-primary);border-color:var(--border-default)}
.brand{display:flex;align-items:baseline;gap:var(--sp-3)}
.kx{font-family:var(--font-sans);font-size:22px;font-weight:700;letter-spacing:1.5px;background:linear-gradient(135deg,var(--text-primary) 0%,var(--orange) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(0 0 20px rgba(255,138,43,.12))}
.brand .sub{color:var(--text-secondary);font-size:12px;font-family:var(--font-sans)}
.status{display:flex;gap:var(--sp-2);flex-wrap:wrap}
.chip{font-size:11px;color:var(--text-secondary);background:var(--bg-surface);border:1px solid var(--border-subtle);border-radius:14px;padding:4px 10px;white-space:nowrap;font-family:var(--font-sans);transition:all .15s ease}
.chip b{color:var(--text-primary);font-weight:600}
.chip.ok{border-color:rgba(59,224,129,.4);color:#bff3d4;background:rgba(59,224,129,.06)}
.chip.ok b{color:var(--green)}
.chip.warn{border-color:rgba(255,176,46,.4);color:#ffe3ad;background:rgba(255,176,46,.06)}
.chip.bad{border-color:rgba(255,92,102,.45);color:#ffc2c6;background:rgba(255,92,102,.06)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:middle}
.dot.g{background:var(--green);box-shadow:0 0 8px rgba(59,224,129,.6)}
.dot.a{background:var(--amber)} .dot.r{background:var(--danger)}

/* === WORKSPACE 2-PANEL LAYOUT === */
.workspace{display:grid;grid-template-columns:1fr 400px;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5);align-items:start}
.primary-panel{display:flex;flex-direction:column;gap:var(--sp-4)}
.detail-panel{display:flex;flex-direction:column;gap:var(--sp-4);position:sticky;top:66px;max-height:calc(100vh - 80px);overflow-y:auto}
/* keep old .grid working */
.grid{display:grid;grid-template-columns:260px 1fr 360px;gap:var(--sp-4);padding:var(--sp-4) var(--sp-5)}

/* === PANELS === */
.panel{background:rgba(15,17,23,.7);border:1px solid var(--border-subtle);border-radius:var(--radius-md);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:var(--shadow-sm);transition:box-shadow .2s ease,border-color .2s ease}
.panel:hover{border-color:var(--border-default)}
.p-h,.rail-h,.stage-h{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border-subtle);font-size:12px;letter-spacing:.1em;color:var(--text-secondary);font-family:var(--mono);font-weight:600}
.p-h .hint,.stage-h .epi{margin-left:auto;font-size:11px;letter-spacing:0;color:var(--text-tertiary);font-weight:400}

/* collapsible panels */
.panel-header{cursor:pointer;user-select:none}
.panel-header .chevron{display:inline-block;transition:transform .2s ease;margin-left:auto;font-size:10px;color:var(--text-tertiary)}
.panel-header .chevron.collapsed{transform:rotate(-90deg)}
.panel-body{overflow:hidden;transition:max-height .3s ease,opacity .2s ease}
.panel-body.collapsed{max-height:0!important;opacity:0;padding-top:0;padding-bottom:0}

/* === LEFT RAIL (symbols) === */
.rail{display:flex;flex-direction:column;min-height:360px}
.search{margin:var(--sp-3);background:var(--bg-void);border:1px solid var(--border-subtle);color:var(--text-primary);border-radius:var(--radius-sm);padding:var(--sp-2) var(--sp-3);font-family:var(--mono);font-size:13px;min-height:40px;transition:all .15s ease}
.search:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,138,43,.15)}
.deflist{list-style:none;margin:0;padding:0 var(--sp-2);overflow:auto;flex:1}
.deflist li{padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);cursor:pointer;color:var(--text-secondary);display:flex;justify-content:space-between;gap:var(--sp-2);transition:all .12s ease;font-family:var(--mono);font-size:13px}
.deflist li:hover{background:var(--bg-surface);color:var(--text-primary)}
.deflist li.sel{background:rgba(255,138,43,.1);color:var(--text-primary);box-shadow:inset 3px 0 0 var(--orange)}
.deflist li:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.rail-foot{border-top:1px solid var(--border-subtle);padding:var(--sp-3) var(--sp-4);display:flex;flex-direction:column;gap:4px}
.kv{display:flex;justify-content:space-between;font-size:12px;color:var(--text-tertiary);font-family:var(--mono)}
.kv b{color:var(--text-primary);font-weight:500;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rail-hint{margin:0 var(--sp-3) var(--sp-2);font-size:11px;color:var(--text-tertiary)}
.rail-hint b{color:var(--orange);font-weight:500}
.rail-toggle{margin:0 var(--sp-3) var(--sp-2);font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--text-secondary);background:transparent;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:4px 9px;cursor:pointer;transition:all .15s ease}
.rail-toggle:hover{color:var(--text-primary);border-color:var(--orange)}
.rail-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:1px}

/* === CENTER STAGE (blast radius) === */
.stage{display:flex;flex-direction:column}
.stage-h .epi{color:var(--orange)}
.canvas-wrap{position:relative;flex:1;min-height:420px;display:flex;align-items:center;justify-content:center;background:radial-gradient(60% 60% at 50% 45%,rgba(22,25,34,.8),var(--bg-void))}
.canvas-wrap.loading::after{content:"computing blast radius from the graph…";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text-secondary);font-size:12px;letter-spacing:.1em;background:rgba(9,9,11,.5);z-index:5;animation:ks-pulse 1.1s ease-in-out infinite}
@keyframes ks-pulse{0%,100%{opacity:.55}50%{opacity:1}}
#bsvg{width:100%;height:100%}
.counter{position:absolute;top:var(--sp-4);right:var(--sp-5);text-align:right;line-height:1}
#counter{font-family:var(--display);font-size:60px;color:var(--gold);text-shadow:0 0 24px rgba(245,197,66,.25)}
.counter small{display:block;color:var(--text-tertiary);font-size:11px;letter-spacing:.12em;margin-top:-6px;font-family:var(--font-sans)}
@keyframes ks-countup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.counter-animate{animation:ks-countup .4s ease-out}
.legend{display:flex;gap:var(--sp-4);flex-wrap:wrap;padding:var(--sp-3) var(--sp-4);border-top:1px solid var(--border-subtle);font-size:11px;color:var(--text-secondary);font-family:var(--font-sans)}
.lg::before{content:"";display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;vertical-align:middle}
.lg0::before{background:var(--danger)} .lg1::before{background:var(--orange)} .lg2::before{background:var(--gold)} .lg3::before{background:var(--cyan)} .lgU::before{background:var(--text-tertiary)}

/* svg nodes */
.node{transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(.1);transition:opacity .25s ease,transform .35s cubic-bezier(.2,.9,.2,1.2)}
.node.show{opacity:1;transform:scale(1)}
.edge{stroke:var(--border-default);stroke-width:1;opacity:0;transition:opacity .3s ease}
.edge.show{opacity:.7}
/* SVG graph tooltips */
.graph-tooltip{position:absolute;pointer-events:none;z-index:10;background:var(--bg-elevated);border:1px solid var(--border-default);border-radius:var(--radius-sm);padding:var(--sp-2) var(--sp-3);font-size:11px;color:var(--text-primary);font-family:var(--mono);box-shadow:var(--shadow-md);white-space:nowrap;opacity:0;transition:opacity .15s ease;max-width:280px}
.graph-tooltip.visible{opacity:1}
.graph-tooltip .tt-name{font-weight:600;color:var(--text-primary)}
.graph-tooltip .tt-ring{font-size:10px;color:var(--text-secondary);margin-top:2px}
.graph-tooltip .tt-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:4px;vertical-align:middle}

/* === SIDE PANELS === */
.side{display:flex;flex-direction:column;gap:var(--sp-4)}
.rings{padding:var(--sp-3) var(--sp-4);display:flex;flex-direction:column;gap:6px}
.ringrow{display:grid;grid-template-columns:64px 40px 1fr;align-items:center;gap:var(--sp-2);padding:6px var(--sp-2);border-radius:var(--radius-sm);background:var(--bg-surface)}
.ringrow .rl{font-size:11px;letter-spacing:.06em;color:var(--text-secondary);font-family:var(--mono)}
.ringrow .rc{font-family:var(--display);font-size:24px;line-height:1}
.ringrow .rn{color:var(--text-secondary);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono)}
.r0 .rc{color:var(--danger)} .r1 .rc{color:var(--orange)} .r2 .rc{color:var(--gold)} .r3 .rc{color:var(--cyan)} .rU .rc{color:var(--text-tertiary)}
.ringrow .rn-sub{color:var(--text-tertiary);font-size:10.5px}
.sig{padding:var(--sp-2) var(--sp-4);color:var(--text-secondary);font-size:11px;border-top:1px solid var(--border-subtle);font-family:var(--mono)}
.sig b{color:var(--text-primary);font-weight:500}
.orbit-verified{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:6px;padding:6px var(--sp-2);border-radius:var(--radius-sm);background:rgba(91,191,214,.08);border:1px solid rgba(91,191,214,.35);color:#bfe9f3;font-size:11px}
.orbit-verified b{color:var(--cyan);font-weight:700}
.orbit-verified code{color:var(--cyan);background:rgba(91,191,214,.1);padding:0 4px;border-radius:4px;font-family:var(--mono)}
.ov-dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px rgba(91,191,214,.6);flex:0 0 auto}
.ov-cmd{flex-basis:100%;margin-top:3px;padding:5px 7px;border-radius:5px;background:rgba(8,12,16,.6);color:#8fd6e6;font-family:var(--mono);font-size:10px;line-height:1.4;white-space:pre-wrap;word-break:break-word;border-left:2px solid rgba(91,191,214,.4)}

/* data provenance strip */
.data-prov{margin:var(--sp-3) var(--sp-5) 0;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);font-size:11.5px;line-height:1.5;color:#bfe9f3;background:rgba(91,191,214,.07);border:1px solid rgba(91,191,214,.3)}

/* === LEDE + TOUR === */
.lede{margin:var(--sp-3) var(--sp-5) 0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2)}
.lede-txt{color:var(--text-secondary);font-size:13px;line-height:1.55;flex:1 1 280px}
.lede-chip{font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--text-primary);background:rgba(255,138,43,.08);border:1px solid rgba(255,138,43,.4);border-radius:14px;padding:6px 14px;cursor:pointer;white-space:nowrap;transition:all .15s ease}
.lede-chip:hover{filter:brightness(1.15);transform:translateY(-1px)} .lede-chip:active{transform:translateY(0)}
.lede-chip:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.lede-tour{background:rgba(43,255,170,.08);border-color:rgba(43,255,170,.45);color:var(--green)}
.tour-bar{margin:6px var(--sp-5) 0;display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-2) var(--sp-4);border:1px solid rgba(43,255,170,.35);border-radius:var(--radius-md);background:rgba(43,255,170,.05);font-family:var(--mono);font-size:12px;color:var(--text-primary)}
.tour-step{font-weight:700;letter-spacing:.04em}
.tour-meta{color:var(--text-secondary);flex:1 1 auto}
.tour-stop{font-family:var(--mono);font-size:11px;color:var(--text-primary);background:transparent;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-md);padding:3px 10px;cursor:pointer}
.tour-stop:hover{filter:brightness(1.15)}

/* === AI BRIEF + ASSISTANT === */
.ai-brief{color:var(--text-primary);font-size:12.5px;line-height:1.55}
.brief-note{margin-top:var(--sp-2);color:var(--text-tertiary);font-size:10.5px;border-top:1px solid var(--border-subtle);padding-top:6px}
.hint.ai-on{color:var(--green);font-weight:700}
.assistant-body{padding:var(--sp-3) var(--sp-4);font-size:12.5px;color:var(--text-secondary);min-height:40px}
.agentic-badge{font-size:10px;letter-spacing:.04em;color:var(--cyan);background:rgba(91,191,214,.1);border:1px solid rgba(91,191,214,.3);border-radius:5px;padding:1px 6px;font-weight:700;font-family:var(--mono)}
.agentic-badge.ai-on{color:var(--green);background:rgba(74,222,128,.1);border-color:rgba(74,222,128,.35)}
.agent-trace{display:flex;flex-direction:column;gap:5px;margin-bottom:var(--sp-2)}
.agent-step{display:grid;grid-template-columns:auto auto 1fr;gap:var(--sp-2);align-items:baseline;padding:5px var(--sp-2);border-radius:var(--radius-sm);background:var(--bg-surface);border-left:2px solid rgba(91,191,214,.4)}
.as-n{font-family:var(--display);font-size:11px;color:var(--cyan);opacity:.8}
.as-tool{font-family:var(--mono);font-size:11px;color:#8fd6e6;white-space:nowrap}
.as-res{font-size:11px;color:var(--text-secondary);line-height:1.4}
.agent-answer{color:var(--text-primary);font-size:12.5px;line-height:1.55;border-left:2px solid var(--green);padding-left:var(--sp-3);margin-top:4px}
.assistant-ask{display:flex;gap:6px;padding:0 var(--sp-4) var(--sp-3)}
.assistant-ask .ip{flex:1;margin:0}
@media(max-width:560px){.agent-step{grid-template-columns:auto 1fr;row-gap:2px}.as-res{grid-column:1/-1}}

/* === HAZARD X-RAY === */
.hazard{margin:var(--sp-4) var(--sp-5) 0}
.hazard-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:1px;background:var(--border-subtle);border-radius:0 0 var(--radius-md) var(--radius-md);overflow:hidden}
.hz-col{padding:var(--sp-3) var(--sp-4);background:var(--bg-base)}
.hz-title{font-size:11px;letter-spacing:.08em;color:var(--cyan);font-weight:700;margin-bottom:var(--sp-2);font-family:var(--mono)}
.hz-sub{display:block;letter-spacing:0;color:var(--text-tertiary);font-weight:400;font-size:10.5px;margin-top:2px}
.hz-body{font-size:12px;color:var(--text-secondary)}
.hz-mrs{display:flex;flex-direction:column;gap:5px;margin-bottom:var(--sp-2)}
.hz-mr{display:flex;justify-content:space-between;gap:var(--sp-3);padding:5px var(--sp-2);border-radius:var(--radius-sm);background:var(--bg-surface);align-items:baseline}
.hz-mrid{color:var(--text-primary);font-family:var(--mono);font-size:11.5px}
.hz-mrmeta{color:var(--text-tertiary);font-size:10.5px;text-align:right}
.hz-collide{margin:6px 0;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);border:1px solid rgba(255,92,102,.4);background:rgba(255,92,102,.06)}
.hz-collide.sev-blast_overlap{border-color:rgba(255,176,46,.4);background:rgba(255,176,46,.05)}
.hz-cl-top{color:var(--text-primary);font-size:12.5px;display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:baseline}
.hz-cl-top b{color:var(--orange);font-weight:600}
.hz-kind{color:var(--text-secondary);font-size:11px;margin-left:auto}
.hz-cl-shared{color:var(--text-secondary);font-size:11px;margin-top:3px}
.hz-cl-shared code{color:var(--cyan);background:rgba(91,191,214,.08);padding:0 4px;border-radius:4px;font-family:var(--mono)}
.hz-noconflict{margin-top:5px;color:#ffb9bd;font-size:11px;font-weight:600}
.hz-order{margin-top:var(--sp-2);padding:7px var(--sp-3);border-radius:var(--radius-sm);background:rgba(74,222,128,.07);border:1px solid rgba(74,222,128,.3);color:#bff0cf;font-size:12px}
.hz-order.bad{background:rgba(255,92,102,.08);border-color:rgba(255,92,102,.4);color:#ffb9bd}
.hz-ord{font-family:var(--mono);color:var(--green);font-weight:700}
.hz-arrow{color:var(--text-tertiary)}
.hz-ok{color:var(--green);font-size:12px;padding:6px 0}
.hz-foot{margin-top:var(--sp-2);color:var(--text-tertiary);font-size:10.5px;border-top:1px solid var(--border-subtle);padding-top:6px;line-height:1.45}
.hz-debt-list{display:flex;flex-direction:column;gap:4px}
.hz-debt-row{display:grid;grid-template-columns:1fr auto auto;gap:var(--sp-2);align-items:baseline;padding:4px var(--sp-2);border-radius:5px;background:var(--bg-surface)}
.hz-debt-row.untested{border-left:2px solid var(--amber)}
.hz-d-name{color:var(--text-primary);font-family:var(--mono);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hz-d-blast{color:var(--orange);font-weight:700;font-size:12px}
.hz-d-tag{color:var(--text-tertiary);font-size:10px;white-space:nowrap}
.hz-ctrl{display:flex;gap:6px;margin-top:var(--sp-2);padding-top:var(--sp-2);border-top:1px dashed var(--border-subtle)}
.hz-ctrl .ip{flex:1;margin:0;font-size:11.5px}
.hz-msg{margin:6px 0 0;font-size:11.5px;min-height:14px;line-height:1.4;color:var(--text-secondary)}
.hz-msg.ok{color:var(--green)} .hz-msg.bad{color:var(--danger-2)}
@media(max-width:900px){.hazard-grid{grid-template-columns:1fr}}

/* === PRECEDENT === */
.prec{padding:var(--sp-3) var(--sp-4);font-size:12.5px;color:var(--text-secondary)}
.prec .counts{display:flex;gap:var(--sp-4);margin-bottom:var(--sp-2)}
.prec .counts b{font-family:var(--display);font-size:22px}
.prec .ap b{color:var(--green)} .prec .rj b{color:var(--danger)}
.contradiction{border:1px solid rgba(255,92,102,.45);background:rgba(255,92,102,.06);border-radius:var(--radius-sm);padding:var(--sp-3);color:var(--danger-2);margin-bottom:var(--sp-2);line-height:1.45}
.contradiction .ttl{color:var(--danger);font-weight:700;letter-spacing:.04em;display:block;margin-bottom:3px;font-family:var(--mono);font-size:11px}
.contradiction.weak{border-color:rgba(255,176,46,.45);background:rgba(255,176,46,.06);color:#ffe3ad}
.contradiction.weak .ttl{color:var(--amber)}
.prec .quote{color:var(--text-secondary);border-left:2px solid var(--border-subtle);padding-left:var(--sp-2);margin-top:6px}
.prec .rowref{color:var(--text-tertiary);font-size:11px;font-family:var(--mono)}

/* === GATE === */
.gate-body{padding:var(--sp-3) var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2)}
.ip{background:var(--bg-void);border:1px solid var(--border-subtle);color:var(--text-primary);border-radius:var(--radius-sm);padding:var(--sp-2) var(--sp-3);font-family:var(--mono);font-size:13px;min-height:40px;transition:all .15s ease}
.ip:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,138,43,.12)}
.gate-btns{display:flex;gap:var(--sp-2)}
.btn{flex:1;font-family:var(--mono);font-weight:700;font-size:13px;letter-spacing:.06em;border:1px solid var(--border-subtle);background:var(--bg-surface);color:var(--text-primary);border-radius:var(--radius-sm);padding:var(--sp-3);cursor:pointer;transition:all .15s ease;min-height:44px}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
.btn.approve{background:linear-gradient(180deg,#2db866,#26a259);border-color:transparent;color:#04140b}
.btn.reject{background:transparent;border-color:rgba(255,92,102,.4);color:var(--danger-2)}
.btn.approve:not(:disabled):hover,.btn.reject:not(:disabled):hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn.ghost{flex:0 0 auto;background:transparent;color:var(--text-secondary);font-weight:500;letter-spacing:.04em;padding:6px 12px;font-size:11.5px;min-height:auto}
.btn.ghost:hover{border-color:var(--orange);color:var(--text-primary)}
.danger-ghost:hover{border-color:var(--danger);color:var(--danger-2)}
.gate-note{color:var(--text-tertiary);font-size:11px;line-height:1.45}
.gate-err{color:var(--danger-2);font-size:11.5px;min-height:0}
.gate-err:not(:empty){min-height:16px}
.id-note{color:var(--amber);opacity:.85}

/* gate refusal animation */
.panel.gate.refused{animation:ks-shake .42s cubic-bezier(.36,.07,.19,.97);box-shadow:0 0 0 2px var(--danger) inset,0 0 22px rgba(255,92,102,.25)}
@keyframes ks-shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
.flash-highlight{animation:ks-flash 1.6s ease-out}
@keyframes ks-flash{0%{box-shadow:0 0 0 2px var(--orange) inset,0 0 26px rgba(255,138,43,.3)}100%{box-shadow:0 0 0 0 transparent,0 0 0 transparent}}
.shake-x{animation:ks-shake .42s cubic-bezier(.36,.07,.19,.97)}

/* === GOVERNANCE === */
.gov{margin:var(--sp-3) var(--sp-4) 4px;padding:var(--sp-3);border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:var(--bg-surface);font-size:12px}
.gov.ok{border-color:rgba(59,224,129,.35)} .gov.warn{border-color:rgba(255,176,46,.4)} .gov.bad{border-color:rgba(255,92,102,.45)}
.gov-top{display:flex;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.tier{font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.06em;padding:3px var(--sp-2);border-radius:var(--radius-sm);background:var(--bg-void);color:var(--text-primary);border:1px solid var(--border-subtle)}
.tier-ISOLATED{color:var(--green)} .tier-LOCAL{color:var(--cyan)} .tier-CROSS_TEAM{color:var(--gold)} .tier-ORG_WIDE{color:var(--danger-2)}
.gov-act{font-weight:700;letter-spacing:.06em;padding:3px var(--sp-2);border-radius:var(--radius-sm);font-size:11px;font-family:var(--mono)}
.gov-act.ok{background:rgba(59,224,129,.12);color:var(--green)} .gov-act.warn{background:rgba(255,176,46,.12);color:var(--amber)} .gov-act.bad{background:rgba(255,92,102,.12);color:var(--danger)}
.gov-need{margin-left:auto;color:var(--text-secondary);font-size:11px}
.gov-owner{margin-top:6px;color:var(--text-secondary)}
.gov-owner b{color:var(--text-primary)}
.gov-why{margin:6px 0 0;padding-left:var(--sp-4);color:var(--text-secondary);line-height:1.5}
.gov-why li{margin:2px 0}
.gov-foot{margin-top:6px;color:var(--text-tertiary);font-size:10.5px;font-family:var(--mono)}
.leaf-note{margin-top:var(--sp-2);padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);background:var(--bg-surface);color:var(--text-secondary);font-size:11.5px;line-height:1.45}
.leaf-note b{color:var(--orange);font-weight:500}

/* === AUDIT LEDGER === */
.ledger{margin:0 var(--sp-5) var(--sp-4)}
.ledger .p-h .verdict{margin-left:6px;font-size:12px;letter-spacing:.04em;padding:3px var(--sp-2);border-radius:12px;font-family:var(--mono)}
.ledger .p-h .btn{margin-left:auto}
.ledger .p-h .btn+.btn{margin-left:var(--sp-2)}
.verdict.ok{background:rgba(59,224,129,.1);color:var(--green);border:1px solid rgba(59,224,129,.35)}
.verdict.bad{background:rgba(255,92,102,.1);color:var(--danger);border:1px solid rgba(255,92,102,.4)}
.verdict.warn{background:rgba(255,176,46,.1);color:var(--amber);border:1px solid rgba(255,176,46,.4)}
.ltable-wrap{overflow:auto;max-height:230px}
.ltable{width:100%;border-collapse:collapse;font-size:12.5px;font-family:var(--mono)}
.ltable th{position:sticky;top:0;background:var(--bg-base);text-align:left;color:var(--text-tertiary);font-weight:500;letter-spacing:.06em;padding:var(--sp-2) var(--sp-3);border-bottom:1px solid var(--border-subtle);font-size:11px}
.ltable td{padding:var(--sp-2) var(--sp-3);border-bottom:1px solid rgba(35,39,54,.6);color:var(--text-secondary)}
.ltable tr.broken td{background:rgba(255,92,102,.04)}
.ltable .dec.approve{color:var(--green)} .ltable .dec.reject{color:var(--danger)}
.ltable .hash{color:var(--text-tertiary);font-size:11px}
.ltable .ch{color:var(--text-secondary)}
.tamper-note{margin:var(--sp-2) var(--sp-4) 2px;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);font-size:11.5px;line-height:1.5}
.tamper-note.bad{color:#ffc2c6;background:rgba(255,92,102,.08);border:1px solid rgba(255,92,102,.4)}
.tamper-note.ok{color:#bff3d4;background:rgba(59,224,129,.07);border:1px solid rgba(59,224,129,.35)}
.risk-badge{font-family:var(--mono);font-size:9.5px;font-weight:700;letter-spacing:.06em;padding:2px 6px;border-radius:4px;vertical-align:middle;margin-right:4px}
.risk-badge.r-high{color:#ffd0d4;background:rgba(255,92,102,.15);border:1px solid rgba(255,92,102,.4)}
.risk-badge.r-mid{color:#ffe3ad;background:rgba(255,176,46,.12);border:1px solid rgba(255,176,46,.4)}
.risk-badge.r-low{color:#cfe9f3;background:rgba(91,191,214,.1);border:1px solid rgba(91,191,214,.4)}

/* === FOOTER === */
.foot{display:flex;justify-content:space-between;gap:var(--sp-4);padding:var(--sp-3) var(--sp-5);color:var(--text-tertiary);font-size:11.5px;border-top:1px solid var(--border-subtle)}

/* === UTILITY === */
.muted{color:var(--text-tertiary)}
.open-banner{margin:var(--sp-3) var(--sp-5) 0;padding:var(--sp-2) var(--sp-3);border-radius:var(--radius-sm);font-size:11.5px;line-height:1.5;color:#ffe3ad;background:rgba(255,176,46,.08);border:1px solid rgba(255,176,46,.4)}
.adv{color:var(--amber);font-weight:700}
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:8px;top:-40px;z-index:100;background:var(--orange);color:#04140b;padding:8px 12px;border-radius:var(--radius-sm);font-weight:700;transition:top .15s}
.skip-link:focus{top:8px}
.noscript-msg{margin:var(--sp-4) var(--sp-5);padding:var(--sp-3) var(--sp-4);border:1px solid var(--amber);border-radius:var(--radius-sm);color:var(--amber);background:rgba(255,176,46,.06)}

/* coach / panel-hover-lift */
.coach{margin:6px var(--sp-5) -2px;color:var(--text-tertiary);font-size:11.5px;line-height:1.5}
.coach b{color:var(--text-secondary);font-weight:700}
.panel-hover-lift{transition:transform .2s ease,box-shadow .2s ease}
.panel-hover-lift:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
/* skeleton loading pulse */
@keyframes ks-skeleton{0%{opacity:.5}50%{opacity:.2}100%{opacity:.5}}
.skeleton{animation:ks-skeleton 1.5s ease-in-out infinite;border-radius:var(--radius-sm)}

/* === RESPONSIVE === */
@media(min-width:1281px){.workspace{align-items:start}.stage{position:sticky;top:66px;align-self:start}}
@media(min-width:1081px) and (max-width:1280px){
  .workspace{grid-template-columns:1fr 340px}
  .detail-panel{position:sticky;top:66px}
  .deflist{max-height:220px}
}
@media(max-width:1080px){
  .workspace{grid-template-columns:1fr;gap:var(--sp-3)}
  .detail-panel{position:static;max-height:none}
  .rail{min-height:auto}
  .stage{order:-1}
  .canvas-wrap{min-height:300px}
}
@media(max-width:768px){
  .sidebar{transform:translateX(-100%);width:var(--sidebar-w-expanded)}
  .sidebar.mobile-open{transform:translateX(0)}
  .app-shell{margin-left:0}
  .sidebar.expanded~.app-shell{margin-left:0}
  .topbar{padding:var(--sp-2) var(--sp-3)}
  .workspace{padding:var(--sp-3)}
  .hazard{margin:var(--sp-3)}
  .ledger{margin:0 var(--sp-3) var(--sp-3)}
  .sidebar-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:39;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}
  .sidebar-backdrop.visible{opacity:1;visibility:visible}
}
@media(max-width:640px){
  .topbar{flex-direction:column;align-items:flex-start;gap:var(--sp-2);height:auto}
  .workspace{padding:var(--sp-2)}
  .canvas-wrap{min-height:280px}
  #counter{font-size:46px}
  .rail{min-height:auto}.deflist{max-height:200px}
  .foot{flex-direction:column;gap:6px}
}

/* === LIGHT THEME VARIABLES === */
body.light-theme {
  --bg-void: #F4F4F5;
  --bg-base: #FFFFFF;
  --bg-surface: #E4E4E7;
  --bg-elevated: #F4F4F5;
  --border-subtle: #D4D4D8;
  --border-default: #A1A1AA;
  --text-primary: #18181B;
  --text-secondary: #52525B;
  --text-tertiary: #71717A;
  --orange: #D97706;
  --green: #15803D;
  --gold: #B45309;
  --amber: #D97706;
  --danger: #B91C1C;
  --danger-2: #DC2626;
  --cyan: #0369A1;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.12);
}

body.light-theme #bg {
  opacity: 0.12;
}

body.light-theme .topbar {
  background: rgba(255, 255, 255, 0.85);
}

body.light-theme .panel {
  background: rgba(255, 255, 255, 0.85);
}

body.light-theme .canvas-wrap {
  background: radial-gradient(60% 60% at 50% 45%, rgba(228, 228, 231, 0.7), var(--bg-void));
}

body.light-theme .ltable th {
  background: var(--bg-surface);
}

body.light-theme .ltable tr.broken td {
  background: rgba(185, 28, 28, 0.05);
}

body.light-theme .orbit-verified {
  background: rgba(3, 105, 161, 0.08);
  border-color: rgba(3, 105, 161, 0.35);
  color: #0c5a85;
}

body.light-theme .orbit-verified code {
  color: var(--cyan);
  background: rgba(3, 105, 161, 0.1);
}

body.light-theme .ov-cmd {
  background: rgba(255, 255, 255, 0.8);
  color: #0a4f75;
  border-left-color: rgba(3, 105, 161, 0.4);
}

body.light-theme .data-prov {
  color: #0c5a85;
  background: rgba(3, 105, 161, 0.07);
  border-color: rgba(3, 105, 161, 0.3);
}

body.light-theme .open-banner {
  color: #b45309;
  background: rgba(180, 83, 9, 0.08);
  border-color: rgba(180, 83, 9, 0.3);
}

body.light-theme .search {
  background: var(--bg-void);
}

body.light-theme .ip {
  background: var(--bg-void);
}

body.light-theme .gov-act.ok {
  background: rgba(21, 128, 61, 0.12);
}

body.light-theme .gov-act.warn {
  background: rgba(217, 119, 6, 0.12);
}

body.light-theme .gov-act.bad {
  background: rgba(185, 28, 28, 0.12);
}

body.light-theme .agent-step {
  background: var(--bg-surface);
}

body.light-theme .hz-col {
  background: var(--bg-base);
}

body.light-theme .hz-mr {
  background: var(--bg-surface);
}

body.light-theme .hz-debt-row {
  background: var(--bg-surface);
}

body.light-theme .hz-order {
  background: rgba(21, 128, 61, 0.08);
  border-color: rgba(21, 128, 61, 0.3);
  color: #14532d;
}

body.light-theme .hz-order.bad {
  background: rgba(185, 28, 28, 0.08);
  border-color: rgba(185, 28, 28, 0.3);
  color: #7f1d1d;
}

body.light-theme .hz-collide {
  background: rgba(185, 28, 28, 0.05);
  border-color: rgba(185, 28, 28, 0.3);
}

body.light-theme .hz-collide.sev-blast_overlap {
  background: rgba(217, 119, 6, 0.05);
  border-color: rgba(217, 119, 6, 0.3);
}

/* === THEME TOGGLE BUTTON === */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px !important;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.theme-toggle .sun-icon {
  display: block;
}

.theme-toggle .moon-icon {
  display: none;
}

body.light-theme .theme-toggle .sun-icon {
  display: none !important;
}

body.light-theme .theme-toggle .moon-icon {
  display: block !important;
}

/* === SYMBOL PANEL FILTERS === */
.rail-filters {
  display: flex;
  gap: var(--sp-2);
  padding: 0 var(--sp-3) var(--sp-2);
}

.filter-select {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 12px;
  height: 32px;
  min-height: 32px;
  padding: 0 var(--sp-2);
  border-radius: var(--radius-sm);
  background: var(--bg-void);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  outline: none;
  transition: all .15s ease;
}

.filter-select:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px rgba(255, 138, 43, 0.15);
}

/* === ONBOARDING MODAL WIZARD === */
.onboarding-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}

.onboarding-overlay:not([hidden]) {
  opacity: 1;
  visibility: visible;
  display: flex;
}

.onboarding-card {
  width: min(480px, 100%);
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.95);
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

.onboarding-overlay:not([hidden]) .onboarding-card {
  transform: scale(1);
}

.onboarding-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-bottom: 1px solid var(--border-subtle);
}

.onboard-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: var(--font-sans);
}

.onboard-close {
  background: transparent;
  border: none;
  color: var(--text-tertiary);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: color .15s ease;
}

.onboard-close:hover {
  color: var(--text-primary);
}

.onboard-progress {
  height: 3px;
  background: var(--border-subtle);
  width: 100%;
}

.onboard-progress-bar {
  height: 100%;
  background: var(--orange);
  transition: width .3s ease;
}

.onboarding-body {
  padding: var(--sp-5);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  min-height: 120px;
}

.onboarding-body p {
  margin: 0 0 var(--sp-3);
}

.onboarding-body p:last-child {
  margin: 0;
}

.onboarding-body ul {
  margin: 0 0 var(--sp-3);
  padding-left: var(--sp-4);
}

.onboarding-body li {
  margin-bottom: var(--sp-1);
}

.onboarding-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--border-subtle);
  background: rgba(0, 0, 0, 0.1);
}

.btn-sm {
  min-height: 32px !important;
  padding: 6px 16px !important;
  font-size: 11px !important;
}

.onboard-dots {
  display: flex;
  gap: 6px;
}

.onboard-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--border-subtle);
  transition: all .2s ease;
}

.onboard-dot.active {
  background: var(--orange);
  transform: scale(1.2);
}

/* === HERO STRIP === */
.hero-strip {
  padding: var(--sp-6) var(--sp-6);
  margin: 0 var(--sp-5) var(--sp-4);
  background: linear-gradient(135deg, rgba(22, 25, 34, 0.95), rgba(15, 17, 23, 0.95));
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.hero-strip::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 138, 43, 0.03) 0%, transparent 60%);
  pointer-events: none;
}
.hero-title {
  font-family: var(--font-sans);
  font-size: 26px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--sp-2);
  line-height: 1.3;
}
.hero-thesis {
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text-secondary);
  margin: 0 0 var(--sp-6);
  font-weight: 500;
}
.hero-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  width: 100%;
  max-width: 800px;
  margin-bottom: var(--sp-6);
}
.hero-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  text-align: left;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.hero-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-default);
}
.hero-card.hero-git {
  border-left: 3px solid var(--green);
}
.hero-card.hero-orbit {
  border-left: 3px solid var(--cyan);
}
.hero-card.hero-keystone {
  border-left: 3px solid var(--orange);
}
.card-tag {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: var(--sp-2);
}
.hero-git .card-tag { color: var(--green); }
.hero-orbit .card-tag { color: var(--cyan); }
.hero-keystone .card-tag { color: var(--orange); }

.card-desc {
  font-size: 13px;
  color: var(--text-primary);
  font-weight: 500;
}
.hero-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.actions-label {
  font-size: 12px;
  color: var(--text-tertiary);
  font-family: var(--mono);
}

/* === FUTURE MERGE SIMULATOR === */
.simulation {
  margin: 0 var(--sp-5) var(--sp-4);
  padding: var(--sp-5);
}
.sim-container {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-top: var(--sp-3);
}
.sim-scenario-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  padding: 4px 10px;
  border-radius: 12px;
  width: fit-content;
}
.sim-mrs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}
.sim-mr {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  position: relative;
  overflow: hidden;
}
.sim-mr.mr-a {
  border-top: 3px solid var(--cyan);
}
.sim-mr.mr-b {
  border-top: 3px solid var(--orange);
}
.mr-badge {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  width: fit-content;
}
.mr-a .mr-badge {
  background: rgba(91, 191, 214, 0.1);
  color: var(--cyan);
}
.mr-b .mr-badge {
  background: rgba(255, 138, 43, 0.1);
  color: var(--orange);
}
.mr-title {
  font-weight: 600;
  font-size: 13px;
}
.mr-file {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-secondary);
}
.mr-symbol {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
  padding: 4px var(--sp-2);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-subtle);
}

.sim-stepper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  max-width: 600px;
  margin: var(--sp-4) auto;
  width: 100%;
}
.sim-stepper::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 30px;
  right: 30px;
  height: 2px;
  background: var(--border-subtle);
  z-index: 1;
}
.sim-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  z-index: 2;
  cursor: pointer;
  width: 80px;
}
.step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--bg-surface);
  border: 2px solid var(--border-default);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--text-secondary);
  transition: all 0.2s ease;
}
.step-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  text-align: center;
  transition: all 0.2s ease;
}
.sim-step.active .step-num {
  border-color: var(--orange);
  background: var(--orange);
  color: var(--bg-void);
  box-shadow: 0 0 10px rgba(255, 138, 43, 0.4);
}
.sim-step.active .step-label {
  color: var(--text-primary);
  font-weight: 600;
}
.sim-step.done .step-num {
  border-color: var(--green);
  background: var(--green);
  color: var(--bg-void);
}
.sim-step.done .step-label {
  color: var(--text-secondary);
}

.sim-display {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-5);
  min-height: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.sim-status-badge {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  padding: 4px var(--sp-2);
  border-radius: 4px;
  width: fit-content;
  margin-bottom: var(--sp-2);
  letter-spacing: 0.05em;
}
.sim-status-badge.success { background: rgba(59, 224, 129, 0.1); color: var(--green); }
.sim-status-badge.warning { background: rgba(91, 191, 214, 0.1); color: var(--cyan); }
.sim-status-badge.danger { background: rgba(255, 92, 102, 0.1); color: var(--danger); }
.sim-status-badge.info { background: rgba(245, 197, 66, 0.1); color: var(--gold); }

.sim-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin: 0;
}
.sim-visual-connection {
  margin-top: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--cyan);
}
.conn-arrow {
  animation: slide-arrow 1.5s infinite;
  display: inline-block;
}
@keyframes slide-arrow {
  0% { transform: translateX(0); opacity: 0.3; }
  50% { transform: translateX(4px); opacity: 1; }
  100% { transform: translateX(0); opacity: 0.3; }
}
.sim-safe-sequence {
  margin-top: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--mono);
  font-size: 12px;
}
.seq-badge {
  background: var(--bg-void);
  border: 1px solid var(--border-default);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
}
.sim-controls {
  display: flex;
  justify-content: space-between;
  margin-top: var(--sp-4);
}

/* === ORBIT DIFFERENCE MATRIX === */
.orbit-diff {
  margin: 0 var(--sp-5) var(--sp-4);
  padding: var(--sp-5);
}
.comparison-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}
.comp-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  position: relative;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.comp-card:hover {
  transform: translateY(-2px);
  border-color: var(--border-default);
}
.comp-card.highlight {
  background: radial-gradient(circle at top right, rgba(91, 191, 214, 0.15), var(--bg-surface));
  border: 2px solid var(--cyan);
  box-shadow: 0 0 20px rgba(91, 191, 214, 0.2);
  transform: scale(1.03);
  z-index: 5;
}
.comp-card.highlight:hover {
  border-color: var(--cyan);
  box-shadow: 0 0 25px rgba(91, 191, 214, 0.3);
}
.comp-card.keystone-highlight {
  background: radial-gradient(circle at top right, rgba(255, 138, 43, 0.15), var(--bg-surface));
  border: 1px solid var(--orange);
}
.comp-card-title {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.comp-card-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.05em;
  font-family: var(--mono);
}
.comp-card.highlight .comp-card-badge {
  background: var(--cyan);
  color: var(--bg-void);
}
.comp-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: 13px;
}
.comp-card-list li {
  position: relative;
  padding-left: var(--sp-4);
  line-height: 1.4;
  color: var(--text-secondary);
}
.comp-card-list li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--text-tertiary);
}
.comp-card-list li.pro::before {
  content: "✓";
  color: var(--green);
}
.comp-card-list li.con::before {
  content: "✕";
  color: var(--danger);
}

/* === HERO MANIFESTO === */
.hero-manifesto {
  margin: var(--sp-2) 0 var(--sp-6);
  padding: var(--sp-4) var(--sp-6);
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  max-width: 760px;
  width: 100%;
}
.manifesto-lead {
  font-size: 15px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-2);
  flex-wrap: wrap;
}
.m-git { color: var(--green); }
.m-orbit { color: var(--cyan); }
.m-keystone { color: var(--orange); }
.manifesto-sub {
  font-size: 12px;
  color: var(--text-secondary);
  font-family: var(--mono);
  letter-spacing: 0.02em;
}

/* === COCKPIT INTRO === */
.cockpit-intro {
  margin: var(--sp-6) var(--sp-5) var(--sp-2);
  padding-left: var(--sp-1);
}
.cockpit-title {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 var(--sp-1);
}
.cockpit-subtitle {
  font-size: 13.5px;
  color: var(--text-secondary);
  margin: 0;
}

/* === TRUST LAYER === */
.trust-layer {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-top: 1px solid var(--border-subtle);
  font-size: 12px;
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.15);
}
.trust-title {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: var(--sp-2);
  letter-spacing: 0.05em;
}
.trust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-2) var(--sp-4);
}
.trust-list li {
  position: relative;
  padding-left: var(--sp-3);
  line-height: 1.4;
}
.trust-list li::before {
  content: "▪";
  position: absolute;
  left: 0;
  color: var(--orange);
  font-size: 9px;
  top: 1px;
}
.trust-list li b {
  color: var(--text-primary);
  font-weight: 600;
}

@media(max-width:1024px) {
  .comparison-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .comp-card.highlight {
    transform: none;
  }
}
@media(max-width:640px) {
  .comparison-cards {
    grid-template-columns: 1fr;
  }
}

/* --- Engineering Harness Pipeline --- */
.harness-section {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  margin-bottom: var(--sp-6);
}
.harness-pitch {
  color: var(--text-secondary);
  font-size: 15px;
  margin: 0 0 var(--sp-6);
  font-style: italic;
}

/* Agent task card */
.harness-task-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-6);
}
.harness-task-header {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.harness-task-icon {
  font-size: 28px;
  line-height: 1;
}
.harness-task-info {
  flex: 1;
}
.harness-task-agent {
  font-family: var(--mono);
  font-size: 14px;
  color: var(--cyan);
  font-weight: 600;
}
.harness-task-mr {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-secondary);
}
.harness-task-kind {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: rgba(91, 191, 214, 0.15);
  color: var(--cyan);
  border: 1px solid rgba(91, 191, 214, 0.3);
}
.harness-task-kind[data-kind="bot"] {
  background: rgba(255, 138, 43, 0.15);
  color: var(--orange);
  border-color: rgba(255, 138, 43, 0.3);
}
.harness-task-kind[data-kind="human"] {
  background: rgba(59, 224, 129, 0.15);
  color: var(--green);
  border-color: rgba(59, 224, 129, 0.3);
}
.harness-task-symbols {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: var(--sp-2);
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border-subtle);
}

/* Pipeline flow */
.harness-pipeline-flow {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: var(--sp-6);
  overflow-x: auto;
  padding: var(--sp-4) 0;
}
.harness-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
  min-width: 100px;
  padding: var(--sp-3);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  border: 2px solid var(--border-subtle);
  transition: border-color 0.4s, background 0.4s, box-shadow 0.4s;
  position: relative;
}
.harness-stage[data-status="done"] {
  border-color: var(--green);
  background: rgba(59, 224, 129, 0.08);
  box-shadow: 0 0 12px rgba(59, 224, 129, 0.15);
}
.harness-stage[data-status="running"] {
  border-color: var(--orange);
  background: rgba(255, 138, 43, 0.08);
  animation: harness-pulse 1.5s ease-in-out infinite;
}
.harness-stage[data-status="error"] {
  border-color: var(--danger);
  background: rgba(255, 92, 102, 0.08);
}
@keyframes harness-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(255, 138, 43, 0.2); }
  50% { box-shadow: 0 0 20px rgba(255, 138, 43, 0.4); }
}
.harness-stage-icon {
  font-size: 22px;
  line-height: 1;
}
.harness-stage-name {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  white-space: nowrap;
}
.harness-stage-status {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--text-tertiary);
}
.harness-stage[data-status="done"] .harness-stage-status {
  color: var(--green);
}
.harness-stage[data-status="running"] .harness-stage-status {
  color: var(--orange);
}

/* Connector between stages */
.harness-connector {
  width: 24px;
  min-width: 16px;
  height: 2px;
  background: var(--border-subtle);
  flex-shrink: 0;
  transition: background 0.4s;
}
.harness-connector.done {
  background: var(--green);
  box-shadow: 0 0 6px rgba(59, 224, 129, 0.3);
}

/* Per-symbol verdict cards */
.harness-verdicts {
  margin-bottom: var(--sp-6);
}
.harness-verdict-header {
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  margin-bottom: var(--sp-3);
}
.harness-verdict-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-3);
}
.harness-verdict-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--sp-3);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  transition: border-color 0.3s;
}
.harness-verdict-card[data-verdict="BLOCK"] {
  border-color: var(--danger);
}
.harness-verdict-card[data-verdict="HOLD"] {
  border-color: var(--amber);
}
.harness-verdict-card[data-verdict="ALLOW"] {
  border-color: var(--green);
}
.harness-verdict-symbol {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--text-primary);
  flex: 1;
}
.harness-verdict-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-tertiary);
}
.harness-verdict-badge {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}
.harness-verdict-badge[data-verdict="ALLOW"] {
  background: rgba(59, 224, 129, 0.15);
  color: var(--green);
}
.harness-verdict-badge[data-verdict="HOLD"] {
  background: rgba(255, 176, 46, 0.15);
  color: var(--amber);
}
.harness-verdict-badge[data-verdict="BLOCK"] {
  background: rgba(255, 92, 102, 0.15);
  color: var(--danger);
}

/* Overall verdict */
.harness-overall {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--bg-elevated);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
}
.harness-overall-label {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
}
.harness-overall-badge {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 4px 16px;
  border-radius: var(--radius-sm);
  transition: all 0.4s;
}
.harness-overall-badge[data-verdict="ALLOW"] {
  background: rgba(59, 224, 129, 0.2);
  color: var(--green);
  border: 1px solid var(--green);
  box-shadow: 0 0 16px rgba(59, 224, 129, 0.2);
}
.harness-overall-badge[data-verdict="HOLD"] {
  background: rgba(255, 176, 46, 0.2);
  color: var(--amber);
  border: 1px solid var(--amber);
  box-shadow: 0 0 16px rgba(255, 176, 46, 0.2);
}
.harness-overall-badge[data-verdict="BLOCK"] {
  background: rgba(255, 92, 102, 0.2);
  color: var(--danger);
  border: 1px solid var(--danger);
  box-shadow: 0 0 16px rgba(255, 92, 102, 0.2);
}

/* Light theme overrides */
.light-theme .harness-section {
  background: #fafafa;
  border-color: #d1d5db;
}
.light-theme .harness-task-card,
.light-theme .harness-stage,
.light-theme .harness-verdict-card,
.light-theme .harness-overall {
  background: #ffffff;
  border-color: #e5e7eb;
}
.light-theme .harness-connector {
  background: #d1d5db;
}

/* Responsive */
@media(max-width:768px) {
  .harness-pipeline-flow {
    flex-wrap: wrap;
    justify-content: center;
  }
  .harness-connector {
    width: 2px;
    height: 16px;
  }
  .harness-stage {
    min-width: 80px;
  }
}

/* Mobile/touch polish (priority H): raise the important interactive targets to >=44px so
   they are comfortably tappable; secondary chips/links to a safe >=32px. No layout regression
   on desktop (scoped to <=640px). */
@media (max-width: 640px) {
  .hubnav-tab { min-height: 44px; }
  .gh-btn, #gh-signin, #gh-signout { min-height: 44px; display: inline-flex; align-items: center; }
  .sidebar-item { min-height: 44px; }
  .topbar-search { min-height: 44px; }
  #theme-toggle, .sidebar-toggle { min-height: 44px; min-width: 44px; }
  .btn, .repo-go, #repo-go { min-height: 44px; }
  .repo-ex { min-height: 36px; padding: 8px 12px; display: inline-flex; align-items: center; }
  .kilo-footer-col a, .kilo-footer-col button { min-height: 40px; display: inline-flex; align-items: center; }
  .faq-item summary { min-height: 44px; display: flex; align-items: center; }
  .onboarding-footer .btn, .onboarding-footer .btn-sm { min-height: 44px; }
  .onboard-close, .settings-close, [class$="-close"] { min-height: 40px; min-width: 40px; }
}