:root {
  color-scheme: dark;
  --ink: #0d100d;
  --panel: #151a14;
  --panel-raised: #1b2119;
  --panel-deep: #10140f;
  --line: #30382e;
  --line-strong: #566151;
  --text: #f2f5e9;
  --muted: #8e9989;
  --signal: #b2f45b;
  --signal-dim: rgba(178, 244, 91, .13);
  --amber: #f0b35b;
  --suspect: #f4e45e;
  --danger: #f27363;
  --cyan: #75c5d8;
  --shadow: 0 24px 70px rgba(0, 0, 0, .38);
  --display: "Bahnschrift SemiCondensed", "DIN Condensed", "Avenir Next Condensed", sans-serif;
  --body: "Avenir Next", "Bahnschrift", "Trebuchet MS", sans-serif;
  --mono: "Cascadia Mono", "IBM Plex Mono", "SFMono-Regular", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--ink); color: var(--text); font-family: var(--body); }
body {
  background-image:
    linear-gradient(rgba(178, 244, 91, .024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(178, 244, 91, .018) 1px, transparent 1px),
    radial-gradient(circle at 78% -18%, rgba(240, 179, 91, .13), transparent 36%);
  background-size: 30px 30px, 30px 30px, auto;
}
button, input, select { font: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; }

.shell { width: min(1240px, calc(100% - 44px)); margin: 0 auto; padding: 28px 0 58px; }
.dashboard-shell { width:min(1600px,calc(100% - 44px)); }
.options-shell { width:min(1040px,calc(100% - 44px)); }
.popup-shell { display:flex; width:640px; min-height:100vh; overflow:hidden; flex-direction:column; font-size:16px; }
.masthead { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:19px 21px; border-bottom:1px solid var(--line); background:rgba(13,16,13,.91); backdrop-filter:blur(18px); }
.brand { display:flex; align-items:center; gap:12px; min-width:0; }
.brand-copy { min-width:0; }
.brand-title-line { display:flex; align-items:baseline; flex-wrap:wrap; gap:5px 9px; min-width:0; }
.brand-mark { width:33px; height:33px; border:1px solid var(--line-strong); border-radius:7px; flex:0 0 auto; background:url("../../icons/icon-48.png") center/cover no-repeat; box-shadow:0 0 18px rgba(178,244,91,.12); }
.brand h1 { margin:0; font:700 18px/1 var(--display); letter-spacing:.05em; text-transform:uppercase; }
.brand p { margin:3px 0 0; color:var(--muted); font:10px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.author-link { color:var(--cyan); font:700 10px/1.2 var(--body); text-decoration:none; text-underline-offset:3px; white-space:nowrap; }
.author-link:link,.author-link:visited { color:var(--cyan); }
.author-link:hover,.author-link:active { color:#b9e7f0; text-decoration:underline; }
.brand-version { color:var(--cyan); font:700 10px/1.2 var(--mono); letter-spacing:.04em; white-space:nowrap; }
.brand-version:link,.brand-version:visited { color:var(--cyan); text-decoration:none; }
.brand-version:hover,.brand-version:active { color:#b9e7f0; text-decoration:underline; text-underline-offset:3px; }
.brand-meta-line { display:flex; align-items:center; flex-wrap:wrap; gap:3px 10px; margin-top:5px; }
.brand-meta-line p { margin:0; }
.brand-github { display:inline-flex; align-items:center; padding-left:10px; border-left:1px solid var(--line-strong); color:var(--cyan); font:700 10px/1.2 var(--mono); text-decoration:none; text-underline-offset:3px; white-space:nowrap; }
.brand-github::after { content:'↗'; margin-left:4px; }
.brand-github:link,.brand-github:visited { color:var(--cyan); }
.brand-github:hover,.brand-github:active { color:#b9e7f0; text-decoration:underline; }
@media(max-width:620px){.brand-github{padding-left:0;border-left:0}}
.masthead-controls { display:grid; flex:0 0 auto; gap:7px; justify-items:end; }
.language-switch { display:grid; grid-template-columns:1fr 1fr; gap:2px; min-width:72px; padding:2px; border:1px solid var(--line-strong); background:var(--panel-deep); }
.language-switch button { min-width:32px; height:24px; padding:0 6px; border:0; background:transparent; color:var(--muted); cursor:pointer; font:800 10px/1 var(--mono); transition:background .14s ease,color .14s ease; }
.language-switch button:hover { color:var(--text); }
.language-switch button.active { background:var(--signal); color:#11170b; }

.signal-pill, .tag { display:inline-flex; align-items:center; gap:7px; padding:6px 9px; border:1px solid var(--line); color:var(--muted); font:10px var(--mono); white-space:nowrap; }
.signal-pill::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--muted); }
.signal-pill.live::before { background:var(--signal); box-shadow:0 0 12px var(--signal); }
.tag.signal { color:var(--signal); border-color:rgba(178,244,91,.38); }
.tag.auto { color:#75c5d8; border-color:rgba(117,197,216,.5); }
.tag.amber { color:var(--amber); border-color:rgba(240,179,91,.42); }
.tag.suspect { color:var(--suspect); border-color:rgba(244,228,94,.55); }
.tag.neutral { color:var(--text); border-color:rgba(242,245,233,.5); }
.tag.danger { color:var(--danger); border-color:rgba(242,115,99,.5); }

.popup-shell .masthead { padding:10px 17px; }
.popup-shell .masthead-controls { display:flex; align-items:center; gap:8px; justify-items:normal; }
.popup-content { display:flex; padding:10px 17px 8px; flex:1 0 auto; flex-direction:column; }
.popup-control-grid { display:grid; grid-template-columns:minmax(0,1.34fr) minmax(238px,.9fr); gap:10px; margin-bottom:8px; }
.capture-console { margin:0; padding:8px 10px; border:1px solid var(--line); background:rgba(10,13,10,.7); }
.overlay-console { display:flex; flex-direction:column; padding-top:8px; }
.console-label { display:flex; justify-content:space-between; align-items:center; margin:0 2px 5px; color:var(--muted); font:10px var(--mono); letter-spacing:.1em; }
.console-label small { color:var(--amber); font:10px var(--mono); }
.mode-selector { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
.mode-selector button { display:flex; align-items:center; justify-content:center; gap:8px; min-height:32px; border:1px solid var(--line); background:var(--panel-deep); color:var(--muted); cursor:pointer; font:700 12px var(--display); letter-spacing:.03em; }
.mode-selector button span { color:var(--line-strong); font:10px var(--mono); }
.mode-selector button b { color:inherit; font:inherit; letter-spacing:inherit; }
.mode-selector button:hover { border-color:var(--line-strong); color:var(--text); }
.mode-selector button.active { border-color:var(--signal); background:var(--signal-dim); color:var(--signal); box-shadow:inset 3px 0 var(--signal); }
.mode-selector button.active span { color:var(--signal); }
.mode-hint { margin:5px 2px 0; color:var(--muted); font:10px/1.35 var(--mono); white-space:nowrap; }
.popup-result-grid { display:grid; grid-template-columns:minmax(0,1fr) 210px; height:156px; }
.hero-readout { position:relative; height:100%; overflow:hidden; padding:10px 14px; border:1px solid var(--line); background:linear-gradient(137deg,rgba(28,34,26,.98),rgba(15,19,14,.98)); }
.hero-readout::after { content:""; position:absolute; width:140px; height:140px; right:-78px; top:-78px; border:1px solid rgba(178,244,91,.16); border-radius:50%; box-shadow:0 0 0 22px rgba(178,244,91,.022),0 0 0 46px rgba(178,244,91,.014); }
.eyebrow { color:var(--amber); font:10px var(--mono); letter-spacing:.14em; text-transform:uppercase; }
.route-lockup { display:grid; grid-template-columns:minmax(0,1fr) 25px minmax(0,1fr); align-items:end; gap:7px; height:37px; margin-top:6px; }
.route-model small { display:block; color:var(--muted); font:10px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.route-model strong { display:block; height:21px; margin-top:4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font:700 18px/21px var(--display); }
.route-arrow { color:var(--line-strong); font:18px var(--mono); text-align:center; }
.verdict-line { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:8px; padding-top:7px; border-top:1px solid var(--line); }
.verdict-line b { font:700 14px var(--display); letter-spacing:.035em; text-transform:uppercase; }
.route-source-line { display:grid; grid-template-columns:auto minmax(0,1fr); gap:9px; align-items:start; margin-top:5px; color:var(--muted); font:10px/1.35 var(--mono); }
.route-source-line code { color:var(--cyan); overflow-wrap:anywhere; }

.metric-grid { display:grid; grid-template-rows:repeat(3,minmax(0,1fr)); border:1px solid var(--line); border-left:0; }
.metric { display:flex; min-width:0; padding:8px 10px; border-bottom:1px solid var(--line); flex-direction:column; justify-content:center; }
.metric:last-child { border-bottom:0; }
.metric-label { display:block; color:var(--muted); font:10px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
.metric-value { display:block; margin-top:4px; overflow-wrap:anywhere; font:600 14px/1.18 var(--display); }
.metric:last-child .metric-value { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.button-stack { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:8px; margin-bottom:8px; }
.button-stack .wide { grid-column:auto; }
.popup-shell .button { font-size:16px; }
.button { border:1px solid var(--line-strong); background:var(--panel); color:var(--text); padding:10px 12px; cursor:pointer; transition:transform .15s ease,border-color .15s ease,background .15s ease; }
.button:hover { transform:translateY(-1px); border-color:var(--signal); background:var(--panel-raised); }
.button:disabled { opacity:.38; cursor:not-allowed; transform:none; }
.button.primary { background:var(--signal); border-color:var(--signal); color:#11170b; font-weight:800; }
.button.amber { color:var(--amber); border-color:rgba(240,179,91,.62); }
.button.danger { color:var(--danger); border-color:rgba(242,115,99,.5); }
.button.quiet { color:var(--muted); border-color:var(--line); }
.privacy-note { margin-top:9px; padding:7px 10px; border-left:2px solid var(--amber); color:var(--muted); background:rgba(240,179,91,.055); font-size:10px; line-height:1.4; }
.pow-readout { display:flex; align-items:center; gap:10px; min-width:0; margin:auto 0; padding:10px 12px; border-left:2px solid var(--amber); background:rgba(240,179,91,.055); white-space:nowrap; }
.pow-readout strong { color:var(--text); font:700 10px var(--mono); }
.pow-readout span { color:var(--muted); font:10px var(--mono); }
.pow-readout code { min-width:0; overflow:hidden; color:var(--cyan); font:12px var(--mono); text-overflow:ellipsis; }
.pow-readout i { color:var(--line-strong); font:normal 12px var(--mono); }
.pow-readout small { margin-left:auto; color:var(--amber); font:10px var(--mono); }
.footer-link { display:grid; grid-template-columns:1fr auto; align-items:center; gap:12px; padding:8px 17px 10px; color:var(--muted); flex:0 0 auto; font:12px var(--mono); }
.footer-link > :last-child { text-align:right; }
.footer-machine { display:inline-flex; align-items:center; justify-content:flex-start; justify-self:start; gap:6px; color:var(--muted); white-space:nowrap; }
#record-count { justify-self:end; }
.footer-machine i { width:6px; height:6px; border-radius:50%; background:var(--muted); }
.footer-machine[data-tone="signal"] { color:var(--signal); }
.footer-machine[data-tone="signal"] i { background:var(--signal); box-shadow:0 0 9px var(--signal); }
.footer-machine[data-tone="amber"] { color:var(--amber); }
.footer-machine[data-tone="amber"] i { background:var(--amber); }

.page-title { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:22px; padding:27px 0 20px; }
.page-title h2 { margin:0; font:700 clamp(40px,6vw,64px)/.92 var(--display); letter-spacing:-.04em; text-transform:uppercase; }
.page-title p { max-width:730px; margin:14px 0 0; color:var(--muted); line-height:1.65; }
.toolbar { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(310px,.72fr); gap:16px; align-items:start; }
.column { display:grid; min-width:0; gap:16px; }
.panel { min-width:0; border:1px solid var(--line); background:rgba(21,26,20,.95); box-shadow:var(--shadow); }
.panel-head { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:48px; padding:12px 15px; border-bottom:1px solid var(--line); }
.panel-head h3 { margin:0; font:700 13px var(--display); letter-spacing:.06em; text-transform:uppercase; }
.panel-body { min-width:0; max-width:100%; padding:15px; }
.table-scroll { overflow-x:auto; overflow-y:visible; }
.panel-empty { padding:38px 16px; color:var(--muted); text-align:center; font-size:13px; }
.readout-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; border:1px solid var(--line); background:var(--line); }
.readout { min-height:86px; padding:13px; background:var(--panel); }
.readout small { color:var(--muted); font:8px var(--mono); letter-spacing:.1em; text-transform:uppercase; }
.readout b { display:block; margin-top:10px; overflow-wrap:anywhere; font:700 21px var(--display); }
.data-table { width:100%; border-collapse:collapse; font-size:12px; }
.data-table { min-width:860px; }
.data-table th { color:var(--muted); font:8px var(--mono); letter-spacing:.09em; text-align:left; text-transform:uppercase; }
.data-table th,.data-table td { padding:10px 8px; border-bottom:1px solid var(--line); vertical-align:top; }
.data-table tbody tr { cursor:pointer; transition:background .12s ease; }
.data-table tbody tr:hover,.data-table tbody tr.selected { background:rgba(178,244,91,.055); }
.mono { font-family:var(--mono); overflow-wrap:anywhere; }
.muted { color:var(--muted); }
.signal-text { color:var(--signal); }
.auto-text { color:#75c5d8; }
.amber-text { color:var(--amber); }
.suspect-text { color:var(--suspect); }
.neutral-text { color:var(--text); }
.danger-text { color:var(--danger); }
.evidence-list { display:grid; gap:9px; }
.evidence { display:grid; grid-template-columns:135px minmax(0,1fr); gap:12px; padding:9px 0; border-bottom:1px solid var(--line); }
.evidence:last-child { border-bottom:0; }
.evidence small { min-width:0; color:var(--muted); font:8px var(--mono); letter-spacing:.08em; text-transform:none; overflow-wrap:anywhere; }
.evidence code { color:var(--text); font:11px/1.45 var(--mono); overflow-wrap:anywhere; }
.evidence-label { display:flex; flex-wrap:wrap; align-items:center; align-content:start; gap:2px; min-width:0; }
.evidence-note { align-self:flex-start; padding:0; border:0; color:var(--muted); font:10px/1 var(--mono); transform:translateY(-1px); cursor:help; }
.evidence-note:focus-visible { outline:1px solid var(--muted); outline-offset:2px; }
.timeline { position:relative; display:grid; gap:13px; }
.timeline::before { content:""; position:absolute; left:5px; top:4px; bottom:5px; width:1px; background:var(--line-strong); }
.timeline-item { position:relative; padding-left:24px; }
.timeline-item::before { content:""; position:absolute; left:1px; top:5px; width:9px; height:9px; border:2px solid var(--panel); border-radius:50%; background:var(--amber); }
.timeline-item.signal::before { background:var(--signal); }
.timeline-item.danger::before { background:var(--danger); }
.timeline-item strong { font:10px var(--mono); }
.timeline-item p { margin:4px 0 0; color:var(--muted); font-size:11px; line-height:1.5; }
.ledger-head { align-items:flex-start; flex-direction:column; }
.filter-stack { display:grid; gap:6px; justify-items:start; width:100%; min-width:0; }
.filter-row { display:flex; flex-wrap:wrap; justify-content:flex-start; gap:7px; width:100%; }
.filter-button { flex:0 0 auto; border:1px solid var(--line); background:transparent; color:var(--muted); padding:6px 9px; cursor:pointer; font:9px var(--mono); white-space:nowrap; }
.filter-button.active { border-color:var(--signal); color:var(--signal); }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.field { display:grid; gap:7px; }
.field.full { grid-column:1/-1; }
.field label { font:10px var(--mono); }
.field small { color:var(--muted); line-height:1.5; }
.field input,.field select { width:100%; padding:10px 11px; border:1px solid var(--line); border-radius:0; background:var(--panel-deep); color:var(--text); }
.switch-row { display:flex; justify-content:space-between; align-items:center; gap:22px; padding:13px 0; border-bottom:1px solid var(--line); }
.switch-copy b { display:block; font-size:13px; }.switch-copy small { display:block; margin-top:4px; color:var(--muted); line-height:1.45; }
.switch { appearance:none; width:42px; height:22px; border:1px solid var(--line-strong); background:#0b0e0b; position:relative; cursor:pointer; flex:0 0 auto; }
.switch::after { content:""; position:absolute; width:14px; height:14px; top:3px; left:3px; background:var(--muted); transition:transform .18s ease,background .18s ease; }
.switch:checked::after { transform:translateX(20px); background:var(--signal); }
.notice { padding:12px 14px; border:1px solid var(--line); background:rgba(117,197,216,.055); color:var(--muted); font-size:12px; line-height:1.6; }
.onboarding { width:min(940px,calc(100% - 40px)); margin:0 auto; padding:50px 0 70px; }
.onboarding-masthead { border:1px solid var(--line); border-bottom:0; }
.onboarding-hero { padding:50px; border:1px solid var(--line); background:linear-gradient(145deg,rgba(28,34,26,.99),rgba(13,16,13,.99)); }
.onboarding-hero h1 { max-width:820px; margin:20px 0; font:700 clamp(48px,9vw,94px)/.87 var(--display); letter-spacing:-.05em; text-transform:uppercase; }
.onboarding-hero .lede { max-width:690px; color:var(--muted); font-size:16px; line-height:1.72; }
.principles { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:22px; border:1px solid var(--line); background:var(--line); }
.principle { padding:24px; background:var(--panel); }.principle span { color:var(--amber); font:10px var(--mono); }.principle h2 { margin:8px 0; font:700 18px var(--display); }.principle p { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }
.toast { position:fixed; left:50%; bottom:18px; z-index:100; transform:translate(-50%,20px); opacity:0; pointer-events:none; padding:9px 13px; border:1px solid var(--line-strong); background:#20271d; color:var(--text); font:10px var(--mono); transition:.18s ease; box-shadow:var(--shadow); }.toast.show { opacity:1; transform:translate(-50%,0); }
@media(max-width:880px){.dashboard-grid,.page-title{grid-template-columns:1fr}.toolbar{justify-content:flex-start}.readout-grid{grid-template-columns:repeat(2,1fr)}}
html[lang="en"] .page-title h2 { letter-spacing:-.035em; }
html[lang="en"] .onboarding-hero h1 { font-size:clamp(43px,8vw,82px); }
html[lang="en"] .mode-selector button { font-size:12px; }
html[lang="en"] .popup-shell .route-model strong { height:21px; white-space:nowrap; font-size:18px; line-height:21px; }
@media(max-width:620px){.shell,.onboarding{width:calc(100% - 24px)}.masthead,.onboarding-hero{padding:18px}.form-grid,.principles{grid-template-columns:1fr}.readout-grid{grid-template-columns:1fr}.page-title h2{font-size:42px}.masthead{align-items:flex-start;gap:10px}.brand{gap:9px}.brand-mark{width:29px;height:29px}.brand h1{font-size:16px}.brand p{font-size:10px}.author-link{font-size:10px}.signal-pill{font-size:10px;padding:5px 7px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

.announcement { width:min(820px,calc(100% - 32px)); margin:40px auto; border:1px solid var(--line); background:var(--panel-deep); box-shadow:var(--shadow); }
.announcement-masthead { padding:20px 32px; }
.announcement-body { padding:34px 40px 30px; }
.announcement-body h3 { margin:30px 0 12px; font:700 20px/1.5 var(--display); }
.announcement-body p { margin:0 0 18px; font-size:16px; line-height:1.95; overflow-wrap:anywhere; }
.announcement-points { margin:26px 0 0; padding-left:27px; }
.announcement-points li { padding-left:4px; margin-bottom:22px; }
.announcement-points li::marker { color:var(--cyan); font:700 16px var(--mono); }
.announcement-points li p { margin-bottom:12px; }
.announcement-points li p:last-child { margin-bottom:0; }
.announcement-points a { color:var(--cyan); text-decoration:underline; text-underline-offset:3px; }
.announcement-points a:hover { color:var(--signal); }
.announcement-points code, .announcement-footnote code { color:var(--cyan); font:14px/1.8 var(--mono); overflow-wrap:anywhere; }
.announcement-note-anchor { display:inline-block; white-space:nowrap; }
.announcement-note-ref { color:var(--cyan); }
.announcement-body .announcement-footnote { margin:0 0 18px; color:var(--muted); font-size:14px; line-height:1.8; }
.announcement-actions { display:flex; flex-wrap:wrap; gap:12px; margin:28px 0 15px; }
.announcement-actions .button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:11px 18px; font-size:14px; text-decoration:none; }
.announcement-history { margin-top:36px; padding-top:22px; border-top:1px solid var(--line); }
.announcement-history h3 { margin-top:0; color:var(--signal); }
.announcement-releases { display:grid; gap:0; margin:18px 0 0; padding:0; list-style:none; }
.announcement-releases li { display:grid; grid-template-columns:90px minmax(0,1fr); gap:16px; padding:12px 0; border-top:1px solid var(--line); }
.announcement-releases .release-version { color:var(--cyan); font:700 12px/1.6 var(--mono); text-decoration:none; }
.announcement-releases a.release-version:hover { color:var(--signal); text-decoration:underline; text-underline-offset:3px; }
.announcement-body .announcement-releases p { margin:0; color:var(--text); font-size:13px; line-height:1.6; }
@media(max-width:620px){.announcement{margin:16px auto}.announcement-masthead{padding:18px}.announcement-body{padding:24px 20px}.announcement-body p{font-size:15px}.announcement-points{padding-left:23px}.announcement-actions .button{flex:1 1 auto}.announcement-masthead .brand h1{font-size:15px}.announcement-releases li{grid-template-columns:70px minmax(0,1fr);gap:9px}}
