/*
 * Cyber-Intel Console — unified design system.
 * One source of truth for the live dashboard (served at /assets/console.css,
 * linked by console_index / console_case / console_login). Replaces the three
 * divergent inline :root blocks. Self-contained: system fonts only, no web-fonts.
 */

@import "/assets/fonts.css";

:root {
  /* --- Aether: a warm-dark intelligence palette (replaces the Blueprint ramp).
     Variable NAMES are unchanged so every existing rule re-skins; only values move. --- */
  --void: #090b10; --abyss: #0e1219; --slate: #141a24; --paper: #1a2230; --lift: #222b3c;
  --copper: #c9a27a; --copper-2: #e4c49a; --signal: #5ba8b5; --ember: #d46a5a;
  --moss: #6f9a72; --gold: #d4b45a; --violet: #8b7bb8; --pink: #c86b93;

  --bg: #090b10;          /* void — app ground */
  --bg-2: #0e1219;        /* abyss — status bar / deep insets */
  --panel: #141a24;       /* slate — rails / panels */
  --card: #1a2230;        /* paper — cards */
  --card-2: #222b3c;      /* lift — raised / hover */
  --ink: #d7dde8;         /* fog — primary text */
  --muted: #8b97ab;       /* hush — secondary text */
  --muted-2: #5d6880;     /* whisper — tertiary (cites, P4, edge labels) */
  --line: #2c3548;        /* borders */
  --line-2: #3d4860;      /* hover borders / edges */
  --accent: #c9a27a;      /* copper — primary intent */
  --accent-2: #e4c49a;    /* copper-2 */
  --accent-ink: #1a120c;  /* dark ink on copper fills */
  --hl: #d4b45a;          /* gold — interaction highlight (active / graph) */

  /* --- semantic — Aether hues --- */
  --obs: #5ba8b5; --inf: #8b7bb8; --rec: #6f9a72;
  --p1: #d46a5a; --p2: #d4b45a; --p3: #c9a27a; --p4: #5d6880; --p5: #5d6880;
  --crit: #d46a5a; --high: #d4b45a; --info: #5ba8b5;
  --cred: #c86b93;
  --ok: #6f9a72; --ok-bd: #3c5a3f; --ok-bg: #14201a;
  --no: #d46a5a; --no-bd: #7a3a32; --no-bg: #221513;

  /* aliases — older rules still name these; without them color:var(--fg)
     is invalid and the declaration is dropped. */
  --fg: #d7dde8;
  --bg-1: #0e1219;
  --danger: #d46a5a;
  --warn: #d4b45a;

  /* --- type scale (Aether faces, self-hosted) --- */
  --font: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
  --display: "Fraunces", "Palatino Linotype", Georgia, serif;
  --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-base: 14px; --fs-lg: 15px; --fs-xl: 17px; --fs-2xl: 22px;

  /* --- spacing (4px rhythm) --- */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;

  /* --- radius / layout / motion (Aether — softer corners) --- */
  --r-sm: 5px; --r-md: 6px; --r-lg: 8px; --r-xl: 10px; --r-pill: 999px;
  --topbar: 56px; --rail: 440px;
  --shadow-1: 0 0 0 1px rgba(9,11,16,.3), 0 1px 1px rgba(9,11,16,.5);
  --shadow-2: 0 0 0 1px rgba(9,11,16,.3), 0 2px 4px rgba(9,11,16,.5), 0 8px 24px rgba(9,11,16,.6);
  --glow-crit: 0 0 0 1px rgba(212,106,90,.4), 0 0 14px rgba(212,106,90,.22);
  --ease: cubic-bezier(.16,1,.3,1);
  --t-fast: .12s var(--ease); --t: .18s var(--ease);
}

* { box-sizing: border-box; }

/* the hidden attribute must always win over display rules — several
   overlays (cams stage, palette, map legend) set display:flex and
   would otherwise stack on top of the active view */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font: var(--fs-base)/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(201,162,122,.28); }

a { color: var(--accent); text-decoration: none; }

/* consistent, visible keyboard focus everywhere (was entirely absent) */
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--r-sm); }
:focus:not(:focus-visible) { outline: none; }

/* refined rail scrollbar */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: var(--r-pill); border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #5d6880; background-clip: content-box; }

/* data reads in monospace — makes it feel like a real intel console */
.mono, code, .case .id, .pill, .sev, .badge, .when, .aline, .cites, .kv > div:nth-child(even), #q, input#t {
  font-family: var(--mono);
}
code {
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 6px; font-size: var(--fs-sm);
}

h2 {
  font-size: var(--fs-sm); margin: 0 0 var(--s2);
  text-transform: uppercase; letter-spacing: .7px; color: var(--muted); font-weight: 600;
}

/* ---------- top bar ---------- */
#top {
  position: relative;
  display: flex; align-items: center; gap: var(--s3);
  padding: 0 var(--s5); height: var(--topbar);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #141a24, var(--bg));
  box-shadow: var(--shadow-1);
}
/* console_index tops out in normal flow, not fixed */
body.flow #top { position: static; }
#top h1 { font-size: var(--fs-lg); margin: 0; letter-spacing: .3px; font-weight: 650; display: flex; align-items: center; gap: var(--s2); white-space: nowrap; flex: none; }
#top h1 .diamond { color: var(--accent); filter: drop-shadow(0 0 6px rgba(201,162,122,.5)); }
#top .sub { color: var(--muted); font-size: var(--fs-sm); }
#top .nav { margin-left: auto; display: flex; gap: var(--s2); align-items: center; }
#top a, #reset {
  color: var(--muted); font-size: var(--fs-sm); text-decoration: none;
  border: 1px solid var(--line); padding: 5px var(--s3); border-radius: var(--r-sm);
  cursor: pointer; transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
#top a:hover, #reset:hover { color: var(--ink); border-color: var(--line-2); background: rgba(255,255,255,.02); }

/* KEV / count chip in the header */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--mono); font-size: var(--fs-xs); font-weight: 600;
  padding: 3px var(--s2); border-radius: var(--r-pill);
  border: 1px solid var(--line); color: var(--muted); background: var(--bg-2);
}
.chip.kev { color: var(--crit); border-color: rgba(212,106,90,.35); }
.chip.kev::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--crit); box-shadow: 0 0 6px var(--crit); }

/* ---------- page containers (index) ---------- */
#watch, #cases, #track, #corr { max-width: 780px; margin: var(--s6) auto 0; padding: 0 var(--s5); display: flex; flex-direction: column; gap: var(--s2); }
#cases { margin-bottom: var(--s6); }

/* ---------- cards ---------- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-1);
}
.case {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--r-lg);
  padding: var(--s4) var(--s4); text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow-1);
  transition: border-color var(--t), transform var(--t), box-shadow var(--t), background var(--t);
}
.case:hover { border-color: var(--line-2); background: var(--card-2); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.case .id { font-weight: 650; font-size: var(--fs-lg); letter-spacing: .2px; }
.case .n { color: var(--muted); font-size: var(--fs-sm); font-family: var(--mono); }

.hint { color: var(--muted); font-size: var(--fs-md); }

/* ---------- login ---------- */
body.login { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.login .card { width: 350px; padding: var(--s6); border-radius: var(--r-xl); box-shadow: var(--shadow-2); }
.login h1 { font-size: var(--fs-xl); margin: 0 0 var(--s1); letter-spacing: .3px; display: flex; gap: var(--s2); align-items: center; }
.login h1 .diamond { color: var(--accent); filter: drop-shadow(0 0 6px rgba(201,162,122,.5)); }
.login p { color: var(--muted); font-size: var(--fs-md); margin: 0 0 var(--s4); }
#err { color: var(--crit); font-size: var(--fs-md); margin-top: var(--s3); min-height: 16px; }

/* ---------- inputs ---------- */
input, .input, #q {
  width: 100%; padding: 10px 12px; border-radius: var(--r-md);
  border: 1px solid var(--line); background: var(--bg-2); color: var(--ink);
  font-size: var(--fs-base); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
input:focus, #q:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(201,162,122,.15); outline: none; }
input::placeholder, #q::placeholder { color: var(--muted-2); }

/* ---------- buttons ---------- */
button, .btn {
  border: 0; border-radius: var(--r-md); background: var(--accent); color: var(--accent-ink);
  font-weight: 700; cursor: pointer; padding: 10px var(--s4);
  transition: filter var(--t-fast), transform var(--t-fast);
}
button:hover, .btn:hover { filter: brightness(1.08); }
button:active, .btn:active { transform: scale(.98); }
button:disabled, .btn:disabled { opacity: .5; cursor: default; transform: none; filter: none; }
.login button { width: 100%; margin-top: var(--s3); padding: 11px; }

/* ---------- case view shell ---------- */
/* Scoped to the case view on purpose: an unscoped `#cy` leaked its fixed
   positioning into the dashboard, yanking that graph out of its panel. */
.case-view #cy { position: fixed; top: var(--topbar); left: 0; right: var(--rail); bottom: 0; background: radial-gradient(circle at 40% 35%, #141a24, var(--bg) 70%); }
.case-view #side { position: fixed; top: var(--topbar); right: 0; bottom: 0; width: var(--rail);
  background: var(--panel); border-left: 1px solid var(--line); overflow: auto; padding: var(--s4); }
.dash #cy { background: radial-gradient(circle at 45% 40%, #141a24, var(--bg) 72%); }
.dash .panel.flush { overflow: hidden; }  /* the graph canvas must never paint outside its panel */
.case-view #top { position: fixed; top: 0; left: 0; right: 0; z-index: 5; }

#ask { display: flex; gap: var(--s2); margin-bottom: var(--s4); }
#ask #q { flex: 1; }
#run { padding: 10px var(--s4); flex: none; }
#status { color: var(--muted); font-size: var(--fs-sm); min-height: 16px; margin-bottom: var(--s3); font-family: var(--mono); }
#summary {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: var(--s3) var(--s4); margin-bottom: var(--s5); font-size: var(--fs-md); box-shadow: var(--shadow-1);
}

/* ---------- findings ---------- */
.finding {
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--line-2);
  border-radius: var(--r-md); padding: 10px var(--s3); margin-bottom: var(--s2); cursor: pointer;
  box-shadow: var(--shadow-1);
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  animation: rise .22s var(--ease) both;
}
.finding:hover { border-color: var(--line-2); background: var(--card-2); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.finding.active { border-color: var(--hl); box-shadow: 0 0 0 1px var(--hl), var(--shadow-2); }
.finding.confirmed { border-left-color: var(--rec) !important; }
.finding.refuted { opacity: .45; }
.finding .row { display: flex; align-items: center; gap: var(--s2); margin-bottom: 3px; }
.finding .ttl { font-size: var(--fs-md); font-weight: 600; }
.finding .det { font-size: var(--fs-sm); color: var(--muted); margin-top: 3px; }
.finding .cites { font-size: var(--fs-xs); color: var(--muted-2); margin-top: 5px; }

/* ---------- empty states (typed absence: a calm "nothing found" vs an "it failed") ---------- */
.empty-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--s2); padding: var(--s8) var(--s4) var(--s6);
  animation: rise .24s var(--ease) both;
}
.empty-state .es-ic { font-size: 30px; line-height: 1; color: var(--copper); opacity: .82; margin-bottom: var(--s1); }
.empty-state .es-h {
  font-family: var(--display); font-style: italic; font-weight: 600;
  font-size: var(--fs-xl); color: var(--ink); letter-spacing: .2px;
}
.empty-state .es-sub { font-size: var(--fs-sm); color: var(--muted); line-height: 1.55; max-width: 32ch; }
.empty-state .es-cta {
  margin-top: var(--s3); padding: 7px var(--s4);
  font: 600 var(--fs-sm) var(--font); color: var(--copper-2);
  background: transparent; border: 1px solid var(--line-2); border-radius: var(--r-pill);
  cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.empty-state .es-cta:hover { border-color: var(--copper); background: rgba(201,162,122,.08); }
.empty-state .es-cta:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(201,162,122,.2); }
.empty-state.es-error .es-ic { color: var(--ember); opacity: .9; }
.empty-state.es-error .es-h { font-style: normal; }

/* ---------- bulletin board: health + watch alerts + gate, one severity-tagged surface ---------- */
.bull-board {
  position: fixed; top: 52px; right: var(--s4); z-index: 60;
  width: min(440px, calc(100vw - var(--s6)));
  max-height: min(72vh, 660px); display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-2), 0 14px 44px rgba(0, 0, 0, .5);
  animation: rise .18s var(--ease) both;
}
.bull-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line);
  font-family: var(--display); font-style: italic; font-size: var(--fs-lg); color: var(--ink);
}
.bull-x { background: none; border: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; }
.bull-x:hover { color: var(--ink); }
.bull-list { overflow-y: auto; padding: var(--s2) 0; }
.bull-row {
  display: grid; grid-template-columns: auto auto 1fr auto; align-items: baseline; gap: var(--s2);
  padding: 7px var(--s4); border-left: 3px solid var(--line-2); font-size: var(--fs-sm);
}
.bull-row + .bull-row { border-top: 1px solid var(--line); }
.bull-row.sev-error { border-left-color: var(--ember); }
.bull-row.sev-warn { border-left-color: var(--gold); }
.bull-row.sev-info { border-left-color: var(--signal); }
.bull-sev {
  font-family: var(--mono); font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; padding: 1px 5px; border-radius: var(--r-pill);
}
.sev-error .bull-sev { color: var(--ember); background: rgba(212, 106, 90, .12); }
.sev-warn .bull-sev { color: var(--gold); background: rgba(212, 180, 90, .12); }
.sev-info .bull-sev { color: var(--signal); background: rgba(91, 168, 181, .12); }
.bull-comp { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted-2); white-space: nowrap; }
.bull-msg { color: var(--ink); line-height: 1.4; }
.bull-age { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted-2); white-space: nowrap; }
.bull-empty { padding: var(--s6) var(--s4); text-align: center; color: var(--muted); font-size: var(--fs-sm); }

/* ---------- re-id trajectories on the map (cross-camera arcs, kepler-style) ---------- */
.reid-arc { stroke-dasharray: 5 7; animation: reidflow .9s linear infinite; }
@keyframes reidflow { to { stroke-dashoffset: -12; } }
.leaflet-tooltip.reid-tip {
  background: var(--card); color: var(--ink); border: 1px solid var(--line-2);
  border-radius: var(--r-sm); font-family: var(--mono); font-size: var(--fs-xs);
  box-shadow: var(--shadow-1);
}
.leaflet-tooltip.reid-tip::before { display: none; }
@media (prefers-reduced-motion: reduce) { .reid-arc { animation: none; } }

/* ---------- MapLibre GL controls + popups, themed to Aether (#lfmap beats maplibre-gl.css) ---------- */
#lfmap .maplibregl-ctrl-group { background: var(--card); border: 1px solid var(--line-2); box-shadow: var(--shadow-1); }
#lfmap .maplibregl-ctrl-group button { background: transparent; }
#lfmap .maplibregl-ctrl-group button + button { border-top: 1px solid var(--line); }
#lfmap .maplibregl-ctrl-group button:hover { background: var(--card-2); }
#lfmap .maplibregl-ctrl button .maplibregl-ctrl-icon { filter: invert(0.85); }
#lfmap .maplibregl-ctrl-attrib { background: rgba(20, 26, 36, .72); }
#lfmap .maplibregl-ctrl-attrib a { color: var(--muted); }
#lfmap .maplibregl-popup-content { background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--shadow-2); color: var(--ink); padding: var(--s3) var(--s4); }
#lfmap .maplibregl-popup-tip { border-top-color: var(--card); border-bottom-color: var(--card); }
#lfmap .maplibregl-popup-close-button { color: var(--muted); font-size: 16px; }
.gl-pop-ip { font-family: var(--mono); font-weight: 700; color: var(--ink); font-size: var(--fs-md); }
.gl-pop-meta { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); margin-top: 2px; }
.gl-pop-stat { font-size: var(--fs-xs); color: var(--muted); margin-top: 5px; }

/* ---------- pills / badges (one unified system) ---------- */
.pill {
  font-size: var(--fs-xs); font-weight: 700; padding: 1px 7px; border-radius: var(--r-pill);
  color: var(--accent-ink); letter-spacing: .3px;
}
.sev, .badge {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .5px; padding: 2px 7px;
  border-radius: var(--r-sm); background: var(--bg-2); border: 1px solid var(--line); color: var(--muted);
}
.badge { border-radius: var(--r-pill); }
.badge.kev { background: #2a1517; color: #fa999c; border-color: var(--no-bd); }

/* ---------- feedback ✓ / ✗ ---------- */
.fb { margin-left: auto; display: flex; gap: var(--s1); flex: none; }
.fb button {
  font-size: var(--fs-sm); line-height: 1; padding: 2px 7px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--bg-2); color: var(--muted); font-weight: 600;
}
.fb button:hover { color: var(--ink); border-color: var(--line-2); filter: none; }
.fb button.on-ok { color: var(--ok); border-color: var(--ok-bd); background: var(--ok-bg); }
.fb button.on-no { color: var(--no); border-color: var(--no-bd); background: var(--no-bg); }

/* ---------- provenance / key-value ---------- */
.kv { display: grid; grid-template-columns: 84px 1fr; gap: 3px var(--s3); font-size: var(--fs-sm); }
.kv .k { color: var(--muted); }
.prov { border: 1px solid var(--line); border-radius: var(--r-md); padding: 7px var(--s2); margin-top: 6px; background: var(--bg-2); }
.prov .src { font-weight: 600; color: var(--accent-2); }
/* edge detail card: the relationship + its endpoints (provenance reuses .prov above) */
.edge-rel { font-family: var(--mono); font-weight: 700; color: var(--accent-2); letter-spacing: .03em; }
.edge-ends { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin: 4px 0 var(--s3); }
.ee-node { display: inline-flex; align-items: baseline; gap: 6px; background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 3px 9px; color: var(--ink); font-size: var(--fs-sm); }
.ee-ty { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ee-arrow { color: var(--accent-2); font-weight: 700; }
/* Admiralty code: a reliability letter per provenance row + a code badge per entity */
.prov .adm { font-family: var(--mono); font-weight: 700; font-size: var(--fs-xs); color: var(--accent-2); margin-left: 5px; }
.adm-code { display: inline-block; font-family: var(--mono); font-weight: 700; font-size: var(--fs-xs);
  letter-spacing: .04em; padding: 1px 6px; border-radius: var(--r-sm); vertical-align: middle; border: 1px solid var(--line-2); }
.adm-code.adm-A, .adm-code.adm-B { color: #8fc096; border-color: rgba(143,192,150,.4); background: rgba(143,192,150,.10); }
.adm-code.adm-C, .adm-code.adm-D { color: var(--gold); border-color: rgba(212,180,90,.4); background: rgba(212,180,90,.10); }
.adm-code.adm-F { color: var(--muted); border-color: var(--line); background: var(--bg-2); }

/* ---------- alerts (watch activity) ---------- */
.alert {
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--muted-2);
  border-radius: var(--r-lg); padding: 10px var(--s4); box-shadow: var(--shadow-1);
  animation: rise .22s var(--ease) both;
}
.alert.sev-critical { border-left-color: var(--crit); box-shadow: var(--glow-crit); }
.alert.sev-high { border-left-color: var(--high); }
.alert.sev-info { border-left-color: var(--accent); }
.ahead { display: flex; align-items: center; gap: var(--s2); margin-bottom: var(--s1); }
.sev-critical .sev { color: var(--crit); border-color: rgba(212,106,90,.4); }
.sev-high .sev { color: var(--high); border-color: rgba(236,154,60,.35); }
.sev-info .sev { color: var(--accent); }
.case-ref { color: var(--accent); font-weight: 600; font-size: var(--fs-md); }
.case-ref:hover { text-decoration: underline; }
.when { color: var(--muted); font-size: var(--fs-xs); margin-left: auto; }
.aline { color: var(--ink); font-size: var(--fs-md); line-height: 1.5; }

/* ---------- track record (scorecard) ---------- */
.track-head { display: flex; align-items: baseline; gap: var(--s2); }
.track-head .big { font-family: var(--mono); font-size: var(--fs-2xl); font-weight: 700; color: var(--rec); }
.track-head .big.zero { color: var(--muted); }
.track-head .lbl { color: var(--muted); font-size: var(--fs-sm); }
.vind {
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--rec);
  border-radius: var(--r-lg); padding: 10px var(--s4); box-shadow: var(--shadow-1);
  animation: rise .22s var(--ease) both;
}
.vind.k-kev { border-left-color: var(--rec); }
.vind.k-epss, .vind.k-path { border-left-color: var(--accent); }
.vind .vh { display: flex; align-items: center; gap: var(--s2); margin-bottom: 3px; }
.vind .tick { color: var(--rec); font-weight: 700; }
.vind .conf { font-size: var(--fs-xs); color: var(--rec); border: 1px solid var(--ok-bd); background: var(--ok-bg); border-radius: var(--r-pill); padding: 1px 6px; }
.vind .vbody { font-size: var(--fs-md); color: var(--ink); }
.vind .vmeta { font-size: var(--fs-xs); color: var(--muted-2); font-family: var(--mono); margin-top: 3px; }

/* ---------- cross-case correlations ---------- */
.corr {
  background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--inf);
  border-radius: var(--r-lg); padding: 10px var(--s4); box-shadow: var(--shadow-1);
  animation: rise .22s var(--ease) both;
}
.corr.hot { border-left-color: var(--cred); }          /* reused credential — the bridge signal */
.corr.crit { border-left-color: var(--crit); box-shadow: var(--glow-crit); }
.corr .ch { display: flex; align-items: center; gap: var(--s2); margin-bottom: 3px; }
.corr .etype { font-size: var(--fs-xs); font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--inf); }
.corr.hot .etype { color: var(--cred); }
.corr.crit .etype { color: var(--crit); }
.corr .ident { font-family: var(--mono); font-weight: 600; font-size: var(--fs-md); }
.corr .spread { margin-left: auto; font-size: var(--fs-xs); color: var(--muted); }
.corr .cases { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s1); }
.corr-case {
  font-family: var(--mono); font-size: var(--fs-xs); color: var(--accent);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 1px 7px; text-decoration: none;
}
.corr-case:hover { border-color: var(--line-2); background: rgba(255,255,255,.02); }

/* ---------- skeleton / loading ---------- */
.skel { border-radius: var(--r-md); background: linear-gradient(90deg, var(--card) 25%, var(--card-2) 37%, var(--card) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; }
.skel.line { height: 12px; margin: 8px 0; }
.skel.block { height: 58px; margin-bottom: var(--s2); }

@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ==================== OPERATIONS DASHBOARD ====================
   Dense multi-panel command surface. Every number rendered here is real —
   graph counts, CVE severities, FIRST EPSS probabilities, watch-agent alerts,
   operator verdicts. No simulated telemetry.
   ============================================================== */
body.dash { height: 100vh; overflow: hidden; }
.dash-grid {
  display: grid; height: calc(100vh - var(--topbar));
  grid-template-columns: 268px minmax(0, 1fr) 340px;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: var(--s3); padding: var(--s3);
}
.rail { display: flex; flex-direction: column; gap: var(--s3); min-height: 0; overflow: auto; }
.center { display: flex; flex-direction: column; min-height: 0; gap: var(--s3); }
.span-3 { grid-column: 1 / -1; }

/* ---- panel shell ---- */
.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  display: flex; flex-direction: column; min-height: 0; box-shadow: var(--shadow-1);
}
.panel > header {
  display: flex; align-items: center; gap: var(--s2);
  padding: 9px var(--s3); border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .7px; text-transform: uppercase;
  color: var(--muted); flex: none;
}
.panel > header .act { margin-left: auto; font-size: var(--fs-xs); color: var(--accent); text-transform: none; letter-spacing: 0; }
.panel > .body { padding: var(--s3); overflow: auto; min-height: 0; }
.panel.flush > .body { padding: 0; }
.panel.grow { flex: 1; min-height: 0; }

/* ---- stat rows ---- */
.stat { display: flex; align-items: baseline; justify-content: space-between; font-size: var(--fs-sm); padding: 3px 0; }
.stat .k { color: var(--muted); }
.stat .v { font-family: var(--mono); font-weight: 600; }
.stat .v.big { font-size: var(--fs-xl); }

/* ---- context layers ---- */
.layer { display: flex; align-items: center; gap: var(--s2); padding: 5px 0; font-size: var(--fs-sm); cursor: pointer; }
.layer .dot { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.layer .nm { color: var(--ink); }
.layer .ct { margin-left: auto; font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); }
.layer.off { opacity: .4; }

/* ---- risk donut ---- */
.donut-wrap { display: flex; align-items: center; gap: var(--s4); }
.donut { position: relative; width: 108px; height: 108px; flex: none; }
.donut svg { transform: rotate(-90deg); }
.donut .mid { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.donut .mid .n { font-family: var(--mono); font-size: 26px; font-weight: 700; line-height: 1; }
.donut .mid .of { font-size: 9px; color: var(--muted); letter-spacing: .5px; }
.legend { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.legend .row { display: flex; align-items: center; gap: var(--s2); font-size: var(--fs-sm); }
.legend .sw { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.legend .ct { margin-left: auto; font-family: var(--mono); font-weight: 600; }

/* ---- prediction / meter bars ---- */
.meter { margin-bottom: 9px; }
.meter .top { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); margin-bottom: 3px; }
.meter .nm { font-family: var(--mono); font-size: var(--fs-xs); }
.meter .pct { margin-left: auto; font-family: var(--mono); font-weight: 700; font-size: var(--fs-sm); }
.meter .track { height: 6px; border-radius: var(--r-pill); background: var(--bg-2); overflow: hidden; border: 1px solid var(--line); }
.meter .fill { height: 100%; background: var(--accent); border-radius: var(--r-pill); transition: width .5s var(--ease); }
.meter.kev .fill { background: var(--crit); }
.meter.kev .pct { color: var(--crit); }

/* ---- event feed ---- */
.feed-row { display: flex; align-items: flex-start; gap: var(--s2); padding: 7px var(--s3); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.feed-row:last-child { border-bottom: 0; }
.feed-row .t { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); flex: none; }
.feed-row .msg { flex: 1; min-width: 0; }
.feed-row .tag { font-size: 9px; font-weight: 700; letter-spacing: .4px; padding: 1px 6px; border-radius: var(--r-sm); border: 1px solid var(--line); flex: none; }
.tag.CRITICAL { color: var(--crit); border-color: rgba(212,106,90,.4); }
.tag.HIGH { color: var(--high); border-color: rgba(236,154,60,.35); }
.tag.INFO { color: var(--accent); }

/* ---- evolution overlay (real self-evolution telemetry) ---- */
.evo { position: absolute; right: var(--s3); left: auto; top: 46px; width: 300px; z-index: 3;
  background: rgba(20,26,36,.94); backdrop-filter: blur(8px);
  border: 1px solid rgba(201,162,122,.22); border-radius: var(--r-lg); box-shadow: var(--shadow-2); }
.evo.closed { width: auto; min-width: 0; }
.evo > header { display: flex; align-items: center; gap: var(--s2); padding: 9px var(--s3); border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .7px; text-transform: uppercase; color: var(--muted); }
.evo .fold { margin-left: auto; cursor: pointer; color: var(--muted); font-size: var(--fs-sm); }
.evo .body { padding: var(--s3); }
.evo.closed .body, .evo.closed .evo-foot { display: none; }
.evo.closed > header { border-bottom: 0; }
.evo-live { display: flex; gap: var(--s2); align-items: flex-start; background: rgba(111,154,114,.07);
  border: 1px solid var(--ok-bd); border-radius: var(--r-md); padding: 9px var(--s3); margin-bottom: var(--s3); }
.evo-live .pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--ok); margin-top: 4px; flex: none;
  box-shadow: 0 0 0 0 rgba(111,154,114,.55); animation: pulse 2.4s infinite; }
.evo-live .ttl { font-size: var(--fs-md); font-weight: 700; color: var(--ok); }
.evo-live .sub { font-size: var(--fs-sm); color: var(--muted); margin-top: 2px; }
.evo-foot { border-top: 1px solid var(--line); padding: 7px var(--s3); font-family: var(--mono);
  font-size: var(--fs-xs); color: var(--muted-2); display: flex; gap: var(--s3); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(111,154,114,.5); }
  70% { box-shadow: 0 0 0 9px rgba(111,154,114,0); }
  100% { box-shadow: 0 0 0 0 rgba(111,154,114,0); }
}

/* ---- timeline ---- */
.tl { display: flex; align-items: stretch; gap: 0; overflow-x: auto; padding: var(--s3) var(--s3) 6px; }
.tl-item { flex: 1 0 132px; position: relative; padding-top: var(--s4); }
.tl-item::before { content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 1px; background: var(--line); }
.tl-item::after { content: ""; position: absolute; top: 2px; left: 50%; width: 9px; height: 9px; margin-left: -4px;
  border-radius: 50%; background: var(--bg); border: 2px solid var(--muted-2); }
.tl-item.CRITICAL::after { border-color: var(--crit); box-shadow: 0 0 8px rgba(212,106,90,.6); }
.tl-item.HIGH::after { border-color: var(--high); }
.tl-item.VIND::after { border-color: var(--rec); box-shadow: 0 0 8px rgba(111,154,114,.5); }
.tl-item .tt { font-family: var(--mono); font-size: var(--fs-xs); color: var(--muted); text-align: center; }
.tl-item .tx { font-size: var(--fs-xs); text-align: center; padding: 0 var(--s2); margin-top: 2px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ---- top nav tabs + search ---- */
.tabs { display: flex; gap: 2px; margin-left: var(--s4); }
.tab { font-size: var(--fs-sm); color: var(--muted); padding: 4px 10px; border-radius: var(--r-sm);
  text-decoration: none; border: 1px solid transparent; cursor: pointer; }
.tab:hover { color: var(--ink); background: rgba(255,255,255,.03); }
.tab.on { color: var(--ink); border-color: var(--line); background: var(--card); }
.searchbox { margin-left: auto; position: relative; width: 300px; }
.searchbox input { padding: 6px 10px 6px 30px; font-size: var(--fs-sm); font-family: var(--font); }
.searchbox .ic { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--muted-2); font-size: var(--fs-sm); }
.searchbox .kbd { position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  font-family: var(--mono); font-size: 10px; color: var(--muted-2); border: 1px solid var(--line);
  border-radius: 4px; padding: 1px 5px; pointer-events: none; }
.results { position: absolute; top: calc(100% + 5px); left: 0; right: 0; max-height: 320px; overflow: auto;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: var(--r-md); box-shadow: var(--shadow-2); z-index: 20; }
.results:empty { display: none; }
.res { display: flex; align-items: center; gap: var(--s2); padding: 7px var(--s3); font-size: var(--fs-sm);
  border-bottom: 1px solid var(--line); cursor: pointer; text-decoration: none; color: var(--ink); }
.res:last-child { border-bottom: 0; }
.res:hover, .res.sel { background: var(--card-2); }
.res .ty { font-size: 9px; font-weight: 700; text-transform: uppercase; color: var(--muted); flex: none; width: 62px; }
.res .id { font-family: var(--mono); font-size: var(--fs-xs); }
.res .cs { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--muted-2); }

.mini { width: 100%; height: 118px; display: block; }
.warn { font-size: var(--fs-xs); color: var(--high); margin-top: var(--s2); }

/* ---- geolocation map (MAP tab) ---- */
#mapStage { flex:1; min-height:0; display:flex; flex-direction:column; }
#mapStage[hidden] { display:none; }

/* ============================================================================
   EVOLUTION view — the real self-improvement dashboard (dedicated center view)
   ============================================================================ */
#evoStage { flex:1; min-height:0; overflow:auto; }
#evoStage[hidden] { display:none; }
.ev-view { padding:var(--s5) var(--s5) var(--s6); max-width:1100px; margin:0 auto; }
.ev-hd { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s5);
  padding-bottom:var(--s4); border-bottom:1px solid var(--line); margin-bottom:var(--s5); }
.ev-h1 { font-size:var(--fs-2xl); font-weight:700; letter-spacing:.2px;
  background:linear-gradient(92deg,#d7dde8,#c9a27a 60%,#d4b45a);
  -webkit-background-clip:text; background-clip:text; color:transparent; }
.ev-subline { color:var(--muted); font-size:var(--fs-md); margin-top:var(--s2); max-width:640px; line-height:1.5; }
.ev-big { flex:none; text-align:center; padding:var(--s3) var(--s5); border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(111,154,114,.12),rgba(111,154,114,.04));
  border:1px solid rgba(111,154,114,.3); }
.ev-bn { display:block; font:700 40px/1 var(--mono); color:var(--rec); text-shadow:0 0 18px rgba(111,154,114,.5); }
.ev-bl { display:block; font-size:var(--fs-xs); color:var(--muted); letter-spacing:.04em; margin-top:var(--s2); }

.ev-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:var(--s4); }
.ev-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:var(--s4); box-shadow:var(--shadow-1); }
.ev-card.ev-learn { grid-column:1; grid-row:1 / span 2; }  /* the star: the ranker learning */
.ev-card h3 { font-size:var(--fs-sm); text-transform:uppercase; letter-spacing:.08em; color:var(--accent-2);
  margin:0 0 var(--s3); font-weight:700; display:flex; flex-direction:column; gap:3px; }
.ev-tip { font:400 var(--fs-xs)/1.45 var(--font); text-transform:none; letter-spacing:0; color:var(--muted-2); }

/* learned-prior bars: a signed nudge from centre (green right = favoured, red left = disfavoured) */
.ev-pitem { padding:var(--s3) 0; border-bottom:1px solid var(--line); }
.ev-pitem:last-child { border-bottom:0; }
.ev-prow { display:flex; align-items:center; gap:var(--s3); }
.ev-ptool { flex:none; width:96px; font:600 var(--fs-sm) var(--mono); color:var(--ink); }
.ev-ptrack { position:relative; flex:1; height:14px; background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r-pill); overflow:hidden; }
.ev-pmid { position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--line-2); }
.ev-pfill { position:absolute; top:0; bottom:0; }
.ev-pfill.pos { background:linear-gradient(90deg,rgba(111,154,114,.5),var(--rec)); border-radius:0 var(--r-pill) var(--r-pill) 0; }
.ev-pfill.neg { background:linear-gradient(270deg,rgba(212,106,90,.5),var(--crit)); border-radius:var(--r-pill) 0 0 var(--r-pill); }
.ev-pw { flex:none; width:44px; text-align:right; font:700 var(--fs-xs) var(--mono); }
.ev-pw.pos { color:var(--rec); } .ev-pw.neg { color:var(--crit); }
.ev-pmeta { color:var(--muted-2); font-size:var(--fs-xs); margin-top:5px; margin-left:calc(96px + var(--s3)); font-family:var(--mono); }

/* vindications list */
.ev-vind-row { display:flex; align-items:flex-start; gap:var(--s2); padding:7px 0; border-bottom:1px solid var(--line); }
.ev-vind-row:last-child { border-bottom:0; }
.ev-vk { flex:none; font:700 9px/1.6 var(--font); letter-spacing:.06em; padding:2px 6px; border-radius:var(--r-sm);
  color:var(--rec); border:1px solid var(--ok-bd); background:var(--ok-bg); }
.ev-vl { font-size:var(--fs-sm); color:var(--ink); line-height:1.45; }
.ev-trend { display:flex; align-items:flex-end; gap:3px; margin-top:var(--s3); min-height:28px; }
.ev-tlabel { font-size:var(--fs-xs); color:var(--muted-2); margin-right:var(--s2); align-self:center; }
.ev-tbar { width:8px; border-radius:2px 2px 0 0; background:linear-gradient(180deg,var(--rec),rgba(111,154,114,.3)); }

/* calibration */
.ev-calib, #ev-calib { display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; }
.ev-cbox { display:flex; flex-direction:column; align-items:center; padding:var(--s2) var(--s4); border-radius:var(--r-md);
  border:1px solid var(--line); background:var(--bg-2); min-width:74px; }
.ev-cbox.ok { border-color:var(--ok-bd); } .ev-cbox.no { border-color:var(--no-bd); }
.ev-cn { font:700 var(--fs-xl) var(--mono); }
.ev-cbox.ok .ev-cn { color:var(--rec); } .ev-cbox.no .ev-cn { color:var(--crit); }
.ev-cl { font-size:var(--fs-xs); color:var(--muted); }
.ev-cnote { flex-basis:100%; color:var(--muted-2); font-size:var(--fs-xs); line-height:1.5; margin:var(--s2) 0 0; }

/* adaptive tier weights: static vs adapted, a dual-marker bar per tier */
.ev-card.ev-tiers { grid-column:1 / span 2; grid-row:3; }
.ev-trow { display:flex; align-items:center; gap:var(--s3); padding:6px 0; border-bottom:1px solid var(--line); }
.ev-trow:last-child { border-bottom:0; }
.ev-tname { flex:none; width:120px; font:600 var(--fs-xs) var(--mono); color:var(--ink); text-transform:uppercase; letter-spacing:.04em; }
.ev-ttrack { position:relative; flex:1; height:18px; background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r-sm); overflow:hidden; }
.ev-tstatic { position:absolute; top:0; bottom:0; width:2px; background:var(--muted-2); z-index:2; }
.ev-tstatic::after { content:attr(data-v); position:absolute; top:-15px; left:50%; transform:translateX(-50%);
  font:600 8px/1 var(--mono); color:var(--muted-2); white-space:nowrap; }
.ev-tadapted { position:absolute; top:0; bottom:0; width:3px; border-radius:1px; z-index:3; transition:left .3s ease; }
.ev-tadapted.up { background:var(--rec); box-shadow:0 0 6px rgba(111,154,114,.6); }
.ev-tadapted.down { background:var(--crit); box-shadow:0 0 6px rgba(212,106,90,.6); }
.ev-tadapted.same { background:var(--accent-2); }
.ev-tadapted.frozen { background:var(--muted); opacity:.5; }
.ev-tlink { position:absolute; top:50%; height:2px; transform:translateY(-50%); z-index:1; }
.ev-tlink.up { background:linear-gradient(90deg,rgba(111,154,114,.2),var(--rec)); }
.ev-tlink.down { background:linear-gradient(270deg,rgba(212,106,90,.2),var(--crit)); }
.ev-tdelta { flex:none; width:56px; text-align:right; font:700 var(--fs-xs) var(--mono); }
.ev-tdelta.up { color:var(--rec); } .ev-tdelta.down { color:var(--crit); } .ev-tdelta.same { color:var(--muted-2); }
.ev-tdelta.frozen { color:var(--muted); font-size:11px; }
.ev-tlegend { display:flex; gap:var(--s4); margin-top:var(--s3); font-size:var(--fs-xs); color:var(--muted-2); }
.ev-tlg { display:flex; align-items:center; gap:5px; }
.ev-tlg-dot { width:10px; height:10px; border-radius:2px; }

@media (max-width:900px){ .ev-grid { grid-template-columns:1fr; } .ev-card.ev-learn { grid-column:1; grid-row:auto; }
  .ev-card.ev-tiers { grid-column:1; grid-row:auto; } }
#mapBar { display:flex; align-items:center; gap:var(--s2); padding:6px var(--s3);
  border-bottom:1px solid var(--line); background:var(--bg-2); flex:none; }
.map-stats { font:600 var(--fs-xs) var(--mono); color:var(--muted); margin-right:auto; }
.map-btn { appearance:none; cursor:pointer; font:600 var(--fs-xs) var(--font); color:var(--muted);
  background:var(--card); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:4px var(--s2); }
.map-btn:hover { color:var(--ink); border-color:var(--accent); }
.map-btn.on { color:#ffb1b1; border-color:rgba(212,106,90,.5); background:rgba(212,106,90,.10); }
.map-btn.armed { color:var(--accent-2); border-color:rgba(201,162,122,.5); background:rgba(201,162,122,.10); }
.map-search { font:600 var(--fs-xs) var(--mono); color:var(--ink); background:var(--card);
  border:1px solid var(--line-2); border-radius:var(--r-sm); padding:4px var(--s2); width:180px; }
.map-search::placeholder { color:var(--muted); font-family:var(--font); }
.map-search:focus { outline:none; border-color:var(--accent); }
.gl-pop-zoom { margin-top:6px; width:100%; text-align:center; }
.map-unplaced { font:600 var(--fs-xs) var(--mono); color:var(--high); }
#mapCanvas { position:relative; flex:1; min-height:0; }
#lfmap { position:absolute; inset:0; background:#0a0d10; }
.leaflet-container { background:#0a0d10; font:var(--fs-sm) var(--font); }
.leaflet-container a { color:var(--accent-2); }
.leaflet-control-attribution {
  background:rgba(9,11,16,.75) !important; color:var(--muted-2);
  font:10px var(--mono); border-radius:var(--r-sm) 0 0 0; }
.leaflet-control-attribution a { color:var(--muted); }
.leaflet-bar a { background:rgba(20,26,36,.92); color:var(--muted); border-color:var(--line-2); }
.leaflet-bar a:hover { background:var(--card-2); color:var(--ink); }
.gibs-live { image-rendering:auto; }
.geo-n-tip { background:transparent; border:none; box-shadow:none;
  font:700 11px var(--mono); color:#fff; text-shadow:0 0 4px rgba(0,0,0,.9); }
.geo-pt.fresh { animation: geoPulse 1.5s ease-in-out 7; }
path.geo-arc { animation: geoFlow 1.4s linear infinite; }
path.geo-xarc { animation: geoFlow 1.4s linear infinite; }
.country { fill: rgba(201,162,122,0.04); stroke: rgba(201,162,122,0.18); stroke-width: 0.13;
  stroke-linejoin: round; vector-effect: non-scaling-stroke; cursor:pointer; }
.country.has-hosts { fill: rgba(201,162,122,0.13); stroke: rgba(201,162,122,0.38); }
.country.heat-1 { fill: rgba(201,162,122,0.14); }
.country.heat-2 { fill: rgba(236,154,60,0.18); stroke: rgba(236,154,60,0.40); }
.country.heat-3 { fill: rgba(236,154,60,0.30); stroke: rgba(236,154,60,0.55); }
.country.heat-4 { fill: rgba(205,66,70,0.28); stroke: rgba(205,66,70,0.50); }
.country.heat-5 { fill: rgba(205,66,70,0.46); stroke: rgba(205,66,70,0.70); }
.country.on { fill: rgba(201,162,122,0.28); stroke: var(--accent-2); }
.country.heat-4.on, .country.heat-5.on { fill: rgba(205,66,70,0.55); stroke: #ffb1b1; }
.country.dim { opacity:.28; }
.country:hover { fill: rgba(201,162,122,0.20); }
.country.heat-2:hover, .country.heat-3:hover { fill: rgba(236,154,60,0.40); }
.country.heat-4:hover, .country.heat-5:hover { fill: rgba(205,66,70,0.58); }
.geo-halo { fill: var(--accent); opacity: 0.18; pointer-events:none; }
.geo-halo.kev { fill: var(--crit); opacity: 0.28; }
.geo-pt { fill: var(--accent-2); cursor:pointer; }
.geo-pt.kev, .geo-pt.hot { fill: var(--crit); }
.geo-pt.sel { stroke:#fbd065; stroke-width:0.45; }
.geo-arc { fill:none; stroke:rgba(245,73,139,.55); stroke-width:0.38;  pointer-events:stroke; vector-effect:non-scaling-stroke; }
.geo-arc.kev { stroke:rgba(212,106,90,.72); }
.geo-xarc { fill:none; stroke:rgba(236,154,60,.62); stroke-width:0.42; stroke-dasharray:1.9 1.7;
  pointer-events:stroke; vector-effect:non-scaling-stroke; cursor:pointer;
  animation: geoFlow 1.4s linear infinite; }
@keyframes geoFlow { to { stroke-dashoffset:-7.2; } }

/* satellite stack: day texture + night shading + masked city lights */
#mapSatDay { opacity:.92; }
#mapSatNight { opacity:.9; mix-blend-mode:screen; }
#mapSatDay, #mapSatNight, .geo-night { pointer-events:none; }
.geo-night { fill:rgba(3,8,20,.55); }
.geo-grid { fill:none; stroke:rgba(140,170,210,.12); stroke-width:.25;
  vector-effect:non-scaling-stroke; pointer-events:none; }
.map-clock { margin-left:auto; font:var(--fs-xs) var(--mono); color:var(--muted); white-space:nowrap; padding:0 var(--s2); }
.map-satdate { font:var(--fs-xs) var(--mono); color:#7ce38b; white-space:nowrap; padding:1px var(--s2); border:1px solid rgba(124,227,139,.35); border-radius:var(--r-sm); }

/* ---- new-case ingest modal (dashboard) ---- */
.ing-lb { display:block; font:600 var(--fs-xs) var(--mono); text-transform:uppercase; letter-spacing:.06em; color:var(--muted-2); margin:var(--s3) 0 var(--s1); }
.ing-lb:first-child { margin-top:0; }
.ing-in { width:100%; }
.ing-note { margin:var(--s3) 0 0; font-size:var(--fs-xs); color:var(--muted-2); line-height:1.5; }

/* ---- command palette (Ctrl+K) ---- */
.pal-back { position:fixed; inset:0; z-index:60; background:rgba(5,8,12,.62); display:flex; justify-content:center; align-items:flex-start; padding:14vh var(--s3) 0; }
.pal { width:min(620px, 94vw); background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-lg); box-shadow:0 18px 60px rgba(0,0,0,.55); overflow:hidden; }
.pal-input { width:100%; padding:var(--s3) var(--s4); background:transparent; border:none; border-bottom:1px solid var(--line); color:var(--fg); font:var(--fs-lg) var(--font); outline:none; }
.pal-list { max-height:46vh; overflow-y:auto; padding:var(--s1) 0; }
.pal-item { display:flex; align-items:center; gap:var(--s2); padding:var(--s2) var(--s4); cursor:pointer; }
.pal-item.on, .pal-item:hover { background:rgba(201,162,122,.16); }
.pal-none { color:var(--muted-2); cursor:default; }
.pal-cat { font:600 9px var(--mono); text-transform:uppercase; letter-spacing:.06em; padding:1px 6px; border:1px solid var(--line-2); border-radius:var(--r-pill); color:var(--muted); flex:none; }
.pal-cat-view { color:var(--accent-2); border-color:rgba(201,162,122,.4); }
.pal-cat-case { color:#d8b4fe; border-color:rgba(216,180,254,.35); }
.pal-cat-host { color:#7ce38b; border-color:rgba(124,227,139,.35); }
.pal-cat-map { color:#ffcc66; border-color:rgba(255,204,102,.35); }
.pal-label { flex:1; font:var(--fs-md) var(--font); color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pal-hint { font:var(--fs-xs) var(--mono); color:var(--muted-2); flex:none; max-width:40%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pal-foot { display:flex; justify-content:space-between; align-items:center; padding:var(--s2) var(--s4); border-top:1px solid var(--line); font:var(--fs-xs) var(--mono); color:var(--muted-2); }
.pal-keys kbd { border:1px solid var(--line-2); border-radius:var(--r-sm); padding:0 5px; margin-left:4px; font:var(--fs-xs) var(--mono); color:var(--muted); }
#palBtn { cursor:pointer; }
.map-coord { font:var(--fs-xs) var(--mono); color:var(--muted); white-space:nowrap; min-width:9ch; text-align:right; }

/* map legend */
.map-legend { position:absolute; left:var(--s3); bottom:var(--s3); z-index:4;
  display:flex; flex-direction:column; gap:var(--s1); padding:var(--s2) var(--s3);
  border:1px solid var(--line); border-radius:var(--r-sm); background:rgba(9,11,16,.85);
  font:var(--fs-xs) var(--font); color:var(--muted); pointer-events:none; }
.map-legend .lg-row { display:flex; align-items:center; gap:var(--s2); }
.map-legend .lg-lb { margin-right:var(--s1); }
.map-legend .lg-heat { display:flex; gap:2px; }
.map-legend .lg-sw { width:13px; height:7px; border-radius:2px; display:inline-block; }
.map-legend .lg-ln { flex:none; }
.map-legend .lg-arc-c line { stroke:rgba(245,73,139,.75); stroke-width:2; }
.map-legend .lg-arc-x line { stroke:rgba(236,154,60,.8); stroke-width:2; stroke-dasharray:4 3; }
.map-legend .lg-dot { width:7px; height:7px; border-radius:50%; display:inline-block; margin:0 3px; }
.map-legend .lg-dot.kev { background:var(--crit); }
.map-legend .lg-dot.fresh { background:#8fc096; }
.geo-xarc { fill:none; stroke:rgba(236,154,60,.62); stroke-width:0.42; stroke-dasharray:1.9 1.7;
  pointer-events:stroke; vector-effect:non-scaling-stroke; cursor:pointer; }
.geo-xarc.kev { stroke:rgba(212,106,90,.82); }
.geo-xarc:hover { stroke-width:0.75; }
.geo-pt.fresh { fill:#7ce38b; animation: geoPulse 1.5s ease-in-out 7; }
@keyframes geoPulse { 0%,100%{ opacity:1; } 50%{ opacity:.3; } }
#mapLive .live-dot { color:var(--muted); }
#mapLive.on { color:#7ce38b; border-color:rgba(124,227,139,.5); background:rgba(124,227,139,.10); }
#mapLive.on .live-dot { color:#7ce38b; animation: geoPulse 2s ease-in-out infinite; }

/* ---- CAMS view: public camera wall ---- */
#camsStage { position:absolute; inset:0; display:flex; flex-direction:column; }
#camsBar { display:flex; align-items:center; gap:var(--s2); padding:var(--s2) var(--s3);
  border-bottom:1px solid var(--line); flex:none; flex-wrap:wrap; }
#camsBar .map-stats { margin-right:auto; }
#camsSearch { width:200px; min-width:120px; }
@media (max-width:720px){
  #camsSearch { width:130px; }
  #camsGrid { grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); padding:var(--s2); }
  /* topbar: let the nav wrap instead of pushing the page wide */
  #top { flex-wrap:wrap; height:auto; min-height:var(--topbar); padding:var(--s2) var(--s3); row-gap:var(--s1); }
  #top .sub { display:none; }
}
#camsGrid { flex:1; overflow-y:auto; padding:var(--s3);
  display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
  grid-auto-rows:max-content; gap:var(--s3); align-content:start; }
.cam-card { border:1px solid var(--line); border-radius:var(--r-md);
  background:var(--panel); overflow:hidden; display:flex; flex-direction:column; }
.cam-img { width:100%; aspect-ratio:16/9; object-fit:cover; display:block;
  background:var(--bg); min-height:110px; }
.cam-hd { display:flex; align-items:center; gap:var(--s2); padding:var(--s2) var(--s3) 0; }
.cam-live { font:600 var(--fs-xs) var(--mono); color:#7ce38b; letter-spacing:.06em; }
.cam-live::before { content:''; display:inline-block; width:7px; height:7px; border-radius:50%;
  background:#7ce38b; margin-right:5px; animation: geoPulse 1.6s ease-in-out infinite; }
.cam-name { font:600 var(--fs-sm) var(--font); color:var(--fg);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cam-meta { display:flex; flex-wrap:wrap; gap:var(--s1) var(--s2); padding:var(--s2) var(--s3) var(--s3);
  font:var(--fs-xs) var(--mono); color:var(--muted); }
.cam-video { color:var(--accent-2); text-decoration:none; margin-left:auto; }
.cam-video:hover { text-decoration:underline; }
.cam-src { font:600 9px var(--mono); letter-spacing:.05em; text-transform:uppercase;
  padding:1px 6px; border-radius:99px; border:1px solid var(--line); color:var(--muted);
  margin-left:auto; flex:none; }
.cam-src-tfl { color:var(--accent-2); border-color:rgba(120,160,220,.35); }
.cam-src-windy { color:#7ce38b; border-color:rgba(124,227,139,.35); }
.cam-src-cdot { color:#ffcc66; border-color:rgba(255,204,102,.35); }
.cam-src-tripcheck { color:#66ccff; border-color:rgba(102,204,255,.35); }
.cam-src-caltrans { color:#ff9966; border-color:rgba(255,153,102,.35); }
.cam-src-nyc { color:#66ffcc; border-color:rgba(102,255,204,.35); }
/* ---- camera lightbox ---- */
.lb-back { position:fixed; inset:0; z-index:70; background:rgba(5,8,12,.78);
  display:flex; align-items:center; justify-content:center; padding:var(--s3); }
.lb { width:min(880px, 94vw); background:var(--panel); border:1px solid var(--line-2);
  border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; }
.lb-hd { display:flex; align-items:center; gap:var(--s2); padding:var(--s2) var(--s3);
  border-bottom:1px solid var(--line); }
.lb-name { flex:1; font:var(--fs-md) var(--font); color:var(--fg); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.lb-x { background:none; border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--muted); cursor:pointer; padding:2px 8px; }
.lb-x:hover { color:var(--fg); border-color:var(--line-2); }
.lb-img { width:100%; max-height:70vh; object-fit:contain; background:var(--bg); display:block; }
#lbVideoEl { width:100%; max-height:70vh; background:var(--bg); display:block; }
.cam-pin { cursor:pointer; }
.cam-pin:hover { stroke-width:2.5; }
.lb-meta { display:flex; gap:var(--s3); padding:var(--s2) var(--s3);
  font:var(--fs-xs) var(--mono); color:var(--muted); }
.lb-acts { display:flex; gap:var(--s2); padding:0 var(--s3) var(--s3); }
.lb-btn { font:var(--fs-xs) var(--mono); color:var(--accent-2); text-decoration:none;
  border:1px solid var(--line); border-radius:var(--r-sm); padding:var(--s1) var(--s3); }
.lb-btn:hover { border-color:var(--accent); background:rgba(201,162,122,.12); }
.lb-case { width:110px; font:var(--fs-xs) var(--mono); color:var(--ink);
  background:transparent; border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:var(--s1) var(--s2); }
.lb-case:focus { outline:none; border-color:var(--accent); }

/* ---- case-view camera observations strip ---- */
.obs-list { display:flex; flex-direction:column; gap:var(--s1); }
.obs-row { display:flex; align-items:center; gap:var(--s3); padding:var(--s1) var(--s2);
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card); }
.obs-thumb { flex:none; display:block; width:64px; height:36px; border-radius:var(--r-sm);
  overflow:hidden; border:1px solid var(--line); }
.obs-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.obs-thumb:hover { border-color:var(--accent); }
.obs-cam { font:600 var(--fs-xs) var(--font); color:var(--ink); flex:1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.obs-counts { font:var(--fs-xs) var(--mono); color:#7ce38b; }
.obs-meta { font:var(--fs-xs) var(--mono); color:var(--muted); }

/* ---- self-audit advice strip (evo panel) ---- */
.evo-adv-t { font:600 var(--fs-xs) var(--font); text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); margin:var(--s2) 0 var(--s1); }
.evo-adv { display:flex; align-items:center; gap:var(--s2); padding:var(--s1) var(--s2);
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card); }
.evo-imp { flex:none; font:600 var(--fs-2xs, 10px) var(--mono); text-transform:uppercase;
  padding:1px 6px; border-radius:var(--r-sm); }
.evo-imp.high { color:#ff8866; border:1px solid rgba(255,136,102,.4); }
.evo-imp.medium { color:#ffcc66; border:1px solid rgba(255,204,102,.4); }
.evo-imp.low { color:var(--muted); border:1px solid var(--line-2); }
.evo-adv-txt { font:var(--fs-xs) var(--font); color:var(--ink); }
/* re-identification tracks: a vehicle followed across the camera network */
.evo-reid { display:flex; flex-direction:column; gap:3px; padding:var(--s1) var(--s2);
  margin-top:var(--s1); border:1px solid var(--line); border-left:2px solid var(--accent, #58a6ff);
  border-radius:var(--r-sm); background:var(--card); }
.evo-reid-badge { font:600 var(--fs-2xs, 10px) var(--mono); color:var(--ink); text-transform:uppercase;
  letter-spacing:.04em; }
.evo-reid-chain { font:var(--fs-xs) var(--mono); color:var(--muted); overflow-x:auto; white-space:nowrap; }
/* target dossier — cyber attack-surface fused with the physical intelligence around a host */
.dsr { width:min(760px, 94vw); max-height:88vh; background:var(--panel); border:1px solid var(--line-2);
  border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; }
.dsr-body { padding:var(--s3); overflow-y:auto; display:flex; flex-direction:column; gap:var(--s2); }
.dsr-head { display:flex; flex-wrap:wrap; gap:var(--s2); align-items:center; }
.dsr-dim { font:var(--fs-xs) var(--font); color:var(--muted); }
.dsr-cols { display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); }
@media (max-width:640px){ .dsr-cols { grid-template-columns:1fr; } }
.dsr-col { display:flex; flex-direction:column; gap:var(--s1); min-width:0; align-items:flex-start; }
.dsr-h { font:600 var(--fs-xs) var(--font); text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin-top:var(--s2); border-bottom:1px solid var(--line);
  padding-bottom:3px; width:100%; }
.dsr-stats { display:flex; gap:var(--s2); flex-wrap:wrap; }
.dsr-stat { display:flex; flex-direction:column; align-items:center; padding:4px 10px;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card); }
.dsr-stat.m-exp { border-color:rgba(255,136,102,.4); }
.dsr-sv { font:700 var(--fs-md) var(--mono); color:var(--fg); }
.dsr-sl { font:var(--fs-2xs,10px) var(--font); color:var(--muted); text-transform:uppercase; }
.dsr-badge { font:600 var(--fs-2xs,10px) var(--mono); text-transform:uppercase; padding:2px 7px;
  border-radius:var(--r-sm); border:1px solid var(--line-2); color:var(--fg); }
.dsr-badge.kev { color:#ff8866; border-color:rgba(255,136,102,.5); }
.dsr-line { font:var(--fs-xs) var(--font); color:var(--muted); }
.dsr-cam { display:grid; grid-template-columns:1fr auto; gap:2px var(--s2); align-items:baseline;
  padding:4px 6px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card); }
.dsr-cam .nm { font:var(--fs-xs) var(--font); color:var(--fg); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.dsr-cam .ct { font:var(--fs-2xs,10px) var(--mono); color:var(--muted); }
.dsr-cam .dsr-dim { grid-column:1 / -1; font:var(--fs-2xs,10px) var(--mono); }
.dsr-track { display:flex; flex-direction:column; gap:3px; padding:var(--s1) var(--s2); margin-top:2px;
  border:1px solid var(--line); border-left:2px solid var(--accent-2); border-radius:var(--r-sm); background:var(--card); }
.dsr-chain { font:var(--fs-xs) var(--mono); color:var(--muted); overflow-x:auto; white-space:nowrap; }
.dsr-strip { display:flex; align-items:flex-end; gap:2px; height:56px; padding:var(--s1);
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card); }
.dsr-bar { flex:1; min-width:0; background:var(--accent-2); border-radius:1px 1px 0 0; }
.dsr-bar.empty { background:var(--line-2); }
.mi-dossier { border-color:var(--accent) !important; color:var(--accent-2) !important; }
/* copilot: natural-language control of the whole platform */
#copilotStage { display:flex; flex-direction:column; min-height:0; flex:1; padding:var(--s3); gap:var(--s2); }
.cp-chat { flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column;
  gap:var(--s2); padding-right:4px; }
.cp-chat::before { content:''; flex:1 1 0; min-height:0; }
.cp-msg { max-width:82%; display:flex; }
.cp-msg.me { align-self:flex-end; }
.cp-msg.bot, .cp-msg.tool, .cp-msg.busy { align-self:flex-start; }
.cp-txt { padding:8px 12px; border-radius:var(--r-lg); font:var(--fs-sm) var(--font); line-height:1.45;
  border:1px solid var(--line); background:var(--card); color:var(--fg);
  white-space:pre-wrap; overflow-wrap:anywhere; }
.cp-msg.me .cp-txt { background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.cp-msg.tool .cp-txt { font:var(--fs-xs) var(--mono); color:var(--muted); background:var(--bg-2); }
.cp-msg.busy .cp-txt { color:var(--muted); }
.cp-action { border:1px solid var(--accent-2); border-radius:var(--r-lg); background:var(--card);
  padding:var(--s2) var(--s3); }
.cp-action-t { font:600 var(--fs-xs) var(--font); text-transform:uppercase; letter-spacing:.05em;
  color:var(--accent-2); }
.cp-action-sum { font:var(--fs-sm) var(--mono); color:var(--fg); margin:4px 0 8px; overflow-wrap:anywhere; }
.cp-action-btns { display:flex; gap:var(--s2); }
.cp-confirm { background:var(--accent); color:var(--accent-ink); border:1px solid var(--accent);
  border-radius:var(--r-sm); padding:6px 16px; cursor:pointer; font:600 var(--fs-sm) var(--font); }
.cp-cancel { background:none; color:var(--muted); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:6px 16px; cursor:pointer; font:var(--fs-sm) var(--font); }
.cp-bar { display:flex; gap:var(--s2); }
.cp-input { flex:1; background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-sm);
  color:var(--fg); padding:9px 12px; font:var(--fs-sm) var(--font); }
.cp-input:focus { border-color:var(--accent); outline:none; }
.msg.tools { font:var(--fs-xs) var(--mono); opacity:.7; }  /* copilot tool-step line in the case chat */

/* copilot cockpit: rich per-tool result cards — the copilot shows its work inline */
.cp-step { align-self:flex-start; max-width:92%; border:1px solid var(--line);
  border-left:2px solid var(--accent-2); border-radius:var(--r-sm); background:var(--bg-2); padding:7px 10px; }
.cp-step.confirmed { border-left-color:var(--accent); }
.cp-step-hd { display:flex; align-items:center; gap:6px; margin-bottom:5px; }
.cp-step-ic { font-size:12px; line-height:1; }
.cp-step-name { font:600 var(--fs-xs) var(--font); color:var(--fg); letter-spacing:.02em; }
.cp-step-tag { margin-left:auto; font:600 var(--fs-xs) var(--mono); color:var(--accent-2);
  text-transform:uppercase; letter-spacing:.05em; }
.cp-step-body { display:flex; flex-direction:column; gap:5px; }
.cp-kvs, .cp-chips { display:flex; flex-wrap:wrap; gap:5px; }
.cp-kv { display:inline-flex; align-items:center; gap:5px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:1px 7px; font:var(--fs-xs) var(--mono); }
.cp-kk { color:var(--muted); }
.cp-kv-v { color:var(--fg); }
.cp-chip { background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:1px 7px; font:var(--fs-xs) var(--mono); color:var(--fg); }
.cp-chip.more { color:var(--muted); border-style:dashed; }
.cp-chip.link { cursor:pointer; }
.cp-chip.link:hover { border-color:var(--accent); color:var(--accent-2); }
.cp-step-link { align-self:flex-start; cursor:pointer; background:none; border:1px solid var(--accent-2);
  color:var(--accent-2); border-radius:var(--r-sm); padding:2px 9px; font:600 var(--fs-xs) var(--font); }
.cp-step-link:hover { background:var(--accent-2); color:var(--accent-ink); }
.cp-paths { margin:0; font:var(--fs-xs) var(--mono); color:var(--fg); white-space:pre-wrap;
  overflow-wrap:anywhere; max-height:220px; overflow-y:auto; }
.cp-rec { display:flex; gap:6px; align-items:baseline; font:var(--fs-xs) var(--font); color:var(--fg); }
.cp-rec-t { overflow-wrap:anywhere; }
.cp-imp { font:600 var(--fs-xs) var(--mono); text-transform:uppercase; padding:0 5px; border-radius:2px;
  background:var(--card); color:var(--muted); }
.cp-imp.high { color:var(--crit); }
.cp-imp.med { color:var(--accent-2); }
.cp-sum { margin:0; font:var(--fs-sm) var(--font); color:var(--fg); }
.cp-count, .cp-empty { font:var(--fs-xs) var(--mono); color:var(--muted); }

/* ---- multi-camera wall: 2x2/3x3 live surveillance grid ---- */
.cam-add { appearance:none; cursor:pointer; flex:none; margin-left:auto;
  font:600 var(--fs-xs) var(--mono); color:var(--muted); background:transparent;
  border:1px solid var(--line-2); border-radius:var(--r-sm); padding:1px 7px; }
.cam-add:hover { color:var(--ink); border-color:var(--accent); }
.cam-add.on { color:#7ce38b; border-color:rgba(124,227,139,.5); background:rgba(124,227,139,.10); }
.wall-back { position:fixed; inset:0; z-index:70; background:rgba(5,8,12,.82);
  display:flex; align-items:center; justify-content:center; padding:var(--s4); }
.wall { width:min(1400px, 96vw); height:min(860px, 92vh); display:flex; flex-direction:column;
  background:var(--glass, rgba(20,26,36,.9)); border:1px solid var(--line-2);
  border-radius:var(--r-lg); overflow:hidden; }
.wall-top { display:flex; align-items:center; gap:var(--s3); padding:var(--s2) var(--s3);
  border-bottom:1px solid var(--line); flex:none; }
.wall-title { font:600 var(--fs-sm) var(--font); text-transform:uppercase;
  letter-spacing:.06em; color:var(--muted); }
#wallGridBtn { margin-left:auto; }
.wall-grid { flex:1; min-height:0; display:grid; gap:var(--s2); padding:var(--s2); }
.wall-grid.g2 { grid-template-columns:repeat(2, 1fr); grid-template-rows:repeat(2, 1fr); }
.wall-grid.g3 { grid-template-columns:repeat(3, 1fr); grid-template-rows:repeat(3, 1fr); }
.wall-grid .hint { grid-column:1/-1; align-self:center; justify-self:center; }
.wall-cell { display:flex; flex-direction:column; min-height:0; min-width:0; cursor:pointer;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.wall-cell:hover { border-color:var(--accent); }
.wall-hd { display:flex; align-items:center; gap:var(--s2); padding:var(--s1) var(--s2); flex:none; }
.wall-name { flex:1; font:600 var(--fs-xs) var(--font); color:var(--fg);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wall-media { flex:1; min-height:0; position:relative; background:var(--bg); }
.wall-media img, .wall-media video { width:100%; height:100%; object-fit:cover; display:block; }
.geo-n { fill:#fff; font-size:2.4px; font-weight:700; font-family:var(--mono); pointer-events:none; }
.geo-empty { fill: var(--muted); font-size: 5px; font-family: var(--font); }
#mapTip { position:absolute; z-index:5; pointer-events:none; max-width:220px;
  font:600 var(--fs-xs) var(--font); color:var(--ink); background:rgba(20,26,36,.94);
  border:1px solid var(--line-2); border-radius:var(--r-sm); padding:4px 8px; box-shadow:var(--shadow-2); }
#mapTip[hidden] { display:none; }
#mapInspect { position:absolute; top:var(--s2); right:var(--s2); bottom:var(--s2); width:240px;
  overflow:auto; z-index:4; background:rgba(20,26,36,.92); border:1px solid var(--line-2);
  border-radius:var(--r-md); box-shadow:var(--shadow-2); padding:var(--s2) var(--s3); }
#mapInspect[hidden] { display:none; }
.mi-h { display:flex; align-items:center; gap:var(--s2); margin-bottom:var(--s2); }
.mi-t { font:700 var(--fs-sm) var(--font); color:var(--ink); flex:1; }
.mi-x { appearance:none; cursor:pointer; background:none; border:none; color:var(--muted);
  font:600 var(--fs-lg) var(--font); line-height:1; padding:0 var(--s1); }
.mi-x:hover { color:var(--ink); }
.mi-sub { font:500 var(--fs-xs) var(--mono); color:var(--muted); margin:-4px 0 var(--s2); }
.mi-host { padding:var(--s2) 0; border-top:1px solid var(--line); }
.mi-host.kev { border-left:2px solid var(--crit); padding-left:var(--s2); }
.mi-row { display:flex; align-items:center; gap:var(--s2); }
.mi-meta { font:400 var(--fs-xs) var(--mono); color:var(--muted-2); margin-top:2px; }
.mi-go { display:inline-block; margin-top:4px; font:600 var(--fs-xs) var(--font); color:var(--accent-2); }
.mi-acts { display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3); margin-top:4px; }
button.mi-go { appearance:none; background:none; border:none; padding:0; cursor:pointer; }
.mi-cty { display:flex; align-items:center; flex-wrap:wrap; gap:var(--s2); padding:5px 0; cursor:pointer;
  border-bottom:1px solid var(--line); font-size:var(--fs-sm); }
.mi-bar { flex:1 0 100%; height:3px; background:var(--line); border-radius:2px; }
.mi-bar i { display:block; height:100%; width:0; background:var(--accent); border-radius:2px; }
.mi-bar i.kev { background:var(--crit); }
.mi-cty:hover, .mi-cty.on { color:var(--ink); }
.mi-cty .nm { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mi-cty .ct { font:600 var(--fs-xs) var(--mono); color:var(--muted); }
/* L2: nearby-cameras section in the map inspector */
.mi-prox { margin-top:var(--s3); }
.prox-cam:hover { color:var(--ink); }
#mapInspect .map-btn { margin-top:var(--s2); width:100%; }

/* ============================================================================
   Command center — metrics, tabs, and the collection queue (Phase: command UI)
   ============================================================================ */

/* header metric chips */
#top .metrics { display:flex; gap:var(--s2); align-items:center; margin-left:var(--s4); flex-wrap:wrap; }
.metric { display:inline-flex; flex-direction:column; align-items:center; line-height:1.05;
  padding:var(--s1) var(--s3); background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r-md); }
.metric .mv { font:600 var(--fs-md)/1 var(--mono); color:var(--ink); }
.metric .ml { font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); margin-top:2px; }
.metric.m-crit .mv { color:var(--crit); }
.metric.m-crit { border-color:rgba(212,106,90,.35); box-shadow:var(--glow-crit); }
 .metric.m-exp .mv { color:#eb6847; }
 .metric.m-exp { border-color:rgba(235,104,71,.35); }
 .metric.m-var .mv { color:#c9a27a; }
 .metric.m-var { border-color:rgba(201,162,122,.4); box-shadow:0 0 10px rgba(201,162,122,.15); }
 .metric.m-bounty .mv { color:#6f9a72; }
 .metric.m-bounty { border-color:rgba(111,154,114,.4); }
  .pp-value { font:600 var(--fs-sm)/1 var(--mono); color:#c9a27a; padding:1px 6px;
    border:1px solid rgba(201,162,122,.4); border-radius:var(--r-sm); }

  /* LOOT panel — the money */
  #lootKpis { display:flex; gap:var(--s2); margin:var(--s2) 0 var(--s3); }
  .loot-kpi { flex:1; display:flex; flex-direction:column; align-items:center; line-height:1.05;
    padding:var(--s2) var(--s3); background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); }
  .loot-kpi .lkv { font:700 var(--fs-lg)/1 var(--mono); }
  .loot-kpi .lkl { font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted-2); margin-top:3px; }
  .loot-kpi-var .lkv { color:#c9a27a; }
  .loot-kpi-var { border-color:rgba(201,162,122,.4); box-shadow:0 0 10px rgba(201,162,122,.12); }
  .loot-kpi-bounty .lkv { color:#6f9a72; }
  .loot-kpi-bounty { border-color:rgba(111,154,114,.4); }
  .loot-receiving { flex-basis:100%; font-size:var(--fs-sm); color:var(--muted);
    padding:var(--s1) var(--s2); background:var(--bg-2); border:1px dashed var(--line);
    border-radius:var(--r-sm); }
  .loot-receiving .mono { color:#c9a27a; }
  .loot-list { display:flex; flex-direction:column; gap:6px; margin-bottom:var(--s3); }
  .loot-row { display:flex; align-items:center; gap:var(--s2); padding:var(--s2) var(--s3);
    background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-sm); font-size:var(--fs-sm); }
  .loot-type { font-weight:600; color:var(--ink); min-width:96px; }
  .loot-path { color:var(--muted); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .loot-val { font:700 var(--fs-sm)/1 var(--mono); color:#c9a27a; }
  .loot-tag { font-size:10px; letter-spacing:.04em; padding:1px 6px; border-radius:var(--r-sm);
    border:1px solid var(--line); color:var(--muted); white-space:nowrap; }
  .loot-tag-ok { color:#6f9a72; border-color:rgba(111,154,114,.4); }
  .loot-cashout { display:flex; align-items:center; gap:var(--s2); margin-top:6px; padding:4px var(--s2);
    background:var(--bg-1); border:1px dashed var(--line); border-radius:var(--r-sm); font-size:var(--fs-sm); }
  .loot-co-prog { color:var(--muted); font-size:10px; letter-spacing:.04em; }
  .loot-co-net { font:700 var(--fs-sm)/1 var(--mono); color:#6f9a72; }

   /* rail tabs — wrap so LOOT / AUDIT stay reachable in a 440px rail */
#side .tabs { display:flex; flex-wrap:wrap; gap:0; padding:6px 8px 0; border-bottom:1px solid var(--line);
  position:sticky; top:0; background:var(--panel); z-index:2; }
#side .tab { appearance:none; border:none; background:transparent; color:var(--muted);
  font:600 11px/1 var(--font); letter-spacing:.06em; padding:9px 8px;
  border-bottom:2px solid transparent; cursor:pointer; transition:color var(--t), border-color var(--t);
  display:inline-flex; align-items:center; gap:4px; }
#side .tab:hover { color:var(--ink); }
#side .tab.active { color:var(--accent-2); border-bottom-color:var(--accent); }
.tab-badge { min-width:16px; height:16px; padding:0 4px; border-radius:var(--r-pill);
  background:var(--accent); color:var(--accent-ink); font:700 10px/16px var(--mono); text-align:center; }
#side .panel { padding:var(--s4); }
#side .panel[hidden] { display:none; }

/* collection: plan bar + queue */
.collect-intro { margin:0 0 var(--s3); }
.plan-bar { display:flex; gap:var(--s2); margin-bottom:var(--s3); }
.plan-bar #scope { flex:1; background:var(--bg-2); border:1px solid var(--line); color:var(--ink);
  border-radius:var(--r-md); padding:var(--s2) var(--s3); font:var(--fs-sm)/1.3 var(--mono); }
.plan-bar #scope:focus-visible { outline:2px solid var(--accent); outline-offset:1px; }
.plan-bar #planBtn { background:var(--accent); color:var(--accent-ink); border:none; border-radius:var(--r-md);
  padding:var(--s2) var(--s4); font:600 var(--fs-sm) var(--font); cursor:pointer; white-space:nowrap; }
.plan-bar #planBtn:hover { background:var(--accent-2); }
.plan-bar #planBtn:disabled { opacity:.5; cursor:default; }

.runcmd { background:var(--bg-2); border:1px solid rgba(111,154,114,.30); border-radius:var(--r-md);
  padding:var(--s3); margin-bottom:var(--s3); }
.runcmd .runhead { font-size:var(--fs-xs); color:var(--rec); letter-spacing:.03em; margin-bottom:var(--s2); }
.runcmd code { display:block; font:var(--fs-sm)/1.4 var(--mono); color:var(--ink); word-break:break-all; }
.runcmd .copy { margin-top:var(--s2); background:var(--card-2); color:var(--muted); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:2px var(--s3); font-size:var(--fs-xs); cursor:pointer; }
.runcmd .copy:hover { color:var(--ink); }

/* action card */
.action { background:var(--card); border:1px solid var(--line); border-left:3px solid var(--line-2);
  border-radius:var(--r-md); padding:var(--s3); margin-bottom:var(--s2); }
.action.st-approved { border-left-color:var(--ok); }
.action.st-rejected { border-left-color:var(--no); opacity:.6; }
.action.st-executed { border-left-color:var(--accent); }
.action.st-failed   { border-left-color:var(--crit); }
.arow { display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; }
.arat { color:var(--muted); font-size:var(--fs-sm); margin-top:var(--s2); }
/* Decision log — the AIP staged-write "inspect before approving" panel on a proposal. */
.dlog { margin-top:var(--s2); padding-top:var(--s2); border-top:1px dashed var(--line); }
.dlog .dl-meta { font:var(--fs-xs) var(--font); color:var(--muted); }
.dlog .dl-foot { display:flex; align-items:center; gap:var(--s2); margin-top:var(--s2); flex-wrap:wrap; }
.dl-risk { font:600 var(--fs-xs) var(--font); text-transform:uppercase; letter-spacing:.04em;
  padding:1px var(--s2); border-radius:var(--r-pill); border:1px solid var(--line); color:var(--muted-2); }
.dl-risk.r-high { color:#ff9980; border-color:#eb6847; background:rgba(235,104,71,.12); }
.dl-risk.r-medium { color:var(--copper-2); border-color:var(--copper); background:rgba(201,162,122,.10); }
.dl-risk.r-low { color:var(--muted); }
.dl-evidence { font:600 var(--fs-xs) var(--font); color:var(--signal); background:transparent;
  border:1px solid var(--line); border-radius:var(--r-sm); padding:2px var(--s2); cursor:pointer; }
.dl-evidence:hover { border-color:var(--signal); background:rgba(91,168,181,.10); }
.eff { margin-top:var(--s2); padding:var(--s2); border:1px solid var(--line); border-left:3px solid var(--signal);
  border-radius:var(--r-sm); background:rgba(91,168,181,.05); }
.eff .eff-hd { font:600 var(--fs-xs) var(--font); color:var(--signal); text-transform:uppercase;
  letter-spacing:.04em; margin-bottom:var(--s2); }
.eff .eff-body { display:flex; align-items:center; gap:var(--s1); flex-wrap:wrap; }
.eff .eff-node { font:600 var(--fs-xs) var(--mono); color:var(--ink); background:transparent;
  border:1px solid var(--line); border-radius:var(--r-pill); padding:2px var(--s2); cursor:pointer; }
.eff .eff-node:hover { border-color:var(--signal); background:rgba(91,168,181,.10); color:var(--signal); }
.eff .eff-node.eff-target { border-color:var(--signal); background:rgba(91,168,181,.14); color:var(--signal); }
.eff .eff-arrow { color:var(--muted); font-size:var(--fs-xs); }
.eff .eff-count { margin-top:var(--s2); font:var(--fs-xs) var(--font); color:var(--muted); }
.atool { font:600 var(--fs-sm) var(--font); color:var(--ink); }
.atarget { color:var(--accent-2); font-size:var(--fs-sm); }

/* chain report — surfaces post-exploit chain + C2 deploy after a Run (ADR-0009) */
.chainreport { display:flex; flex-direction:column; gap:var(--s1); margin:var(--s2) 0; }
.chain-row { display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--accent);
  padding:var(--s1) var(--s2); border-radius:var(--r-sm); font-size:var(--fs-sm); }
.chain-row.fail { border-left-color:var(--crit); }
.chain-row .ct { font-weight:600; color:var(--ink); }
.chain-row .ctool { color:var(--accent-2); font-family:var(--mono); }
.chain-row .cmeta { color:var(--muted); }
.chain-row .cerr { color:var(--crit); }

/* C2 panel — implants + listeners */
.c2-list { display:flex; flex-direction:column; gap:var(--s1); }
.c2-row { display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line); padding:var(--s1) var(--s2);
  border-radius:var(--r-sm); font-size:var(--fs-sm); }
.c2stat { flex:none; font:700 var(--fs-xs)/1 var(--mono); padding:3px var(--s2);
  border-radius:var(--r-sm); border:1px solid var(--line-2); }
.c2stat.alive, .c2stat.active { color:var(--ok); background:rgba(111,154,114,.12); }
.c2stat.dead, .c2stat.inactive { color:var(--no); background:rgba(196,93,93,.12); }
.c2-row .c2meta { color:var(--muted); }
/* wifi panel — the surveyed neighbourhood + recovered logins */
.wifi-list { display:flex; flex-direction:column; gap:var(--s1); margin-bottom:var(--s3); }
.wifi-row { display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line); padding:var(--s1) var(--s2);
  border-radius:var(--r-sm); font-size:var(--fs-sm); }
.wifi-main { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.wifi-ssid { font-weight:600; color:var(--ink); }
.wifi-meta { color:var(--muted); font-size:var(--fs-xs); }
.wifi-secret { color:var(--ok); font-size:var(--fs-xs); }
.wifi-crack { margin-left:auto; }
.plan-bar #wifiIface, .plan-bar #camTarget { flex:1; background:var(--bg-2); border:1px solid var(--line);
  color:var(--ink); border-radius:var(--r-md); padding:var(--s1) var(--s2); font-size:var(--fs-sm); }
.plan-bar #wifiSeconds { background:var(--bg-2); border:1px solid var(--line); color:var(--ink);
  border-radius:var(--r-md); padding:var(--s1) var(--s2); font-size:var(--fs-sm); }
.plan-bar #wifiSurveyBtn, .plan-bar #camProbeBtn { background:var(--accent); color:var(--accent-ink);
  border:none; border-radius:var(--r-md); padding:var(--s1) var(--s2); font:600 var(--fs-sm) var(--font); cursor:pointer; }
.plan-bar #wifiSurveyBtn:hover, .plan-bar #camProbeBtn:hover { background:var(--accent-2); }
.plan-bar #wifiSurveyBtn:disabled { opacity:.5; cursor:default; }
/* audit transition feed — the platform's autonomous action history (ADR-0009) */
.audit-list { display:flex; flex-direction:column; gap:var(--s1); }
.audit-row { display:flex; align-items:baseline; gap:var(--s2); flex-wrap:wrap;
  background:var(--card); border:1px solid var(--line); padding:var(--s1) var(--s2);
  border-radius:var(--r-sm); font-size:var(--fs-sm); }
.audit-row .at-ts { flex:none; font:600 var(--fs-xs)/1 var(--mono); color:var(--muted); }
.audit-row .at-ev { flex:none; font:700 var(--fs-xs)/1 var(--mono); padding:3px var(--s2);
  border-radius:var(--r-sm); border:1px solid var(--line-2); }
.audit-row .at-ev.ev-ok { color:var(--ok); background:rgba(111,154,114,.12); }
.audit-row .at-ev.ev-crit { color:var(--no); background:rgba(196,93,93,.12); }
.audit-row .at-ev.ev-warn { color:var(--warn,#c89b3c); background:rgba(200,155,60,.12); }
.audit-row .at-ev.ev-info { color:var(--accent-2); background:var(--bg-2); }
.audit-row .at-act { flex:none; font:500 var(--fs-xs)/1 var(--mono); color:var(--muted); }
.audit-row .at-detail { flex:1 1 auto; min-width:0; color:var(--fg); }
/* priority score badge — the analyst's expected-gain ranking, made visible */
.prio { flex:none; font:700 var(--fs-xs)/1 var(--mono); color:var(--accent-2);
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:3px var(--s2); letter-spacing:.02em; }
.prio.hot { color:var(--hl); border-color:rgba(240,183,38,.45); box-shadow:0 0 10px -3px var(--hl); }
.astate { margin-left:auto; font-size:var(--fs-xs); color:var(--muted-2); text-transform:uppercase; letter-spacing:.05em; }
.aout { margin-top:var(--s2); font:var(--fs-xs) var(--mono); color:var(--rec); }

.tier { font:700 10px/1 var(--font); letter-spacing:.06em; padding:3px var(--s2); border-radius:var(--r-sm);
  color:#090b10; background:var(--muted-2); }
.tier.t-recon { background:var(--obs); }
.tier.t-enum  { background:#3fa6da; }
.tier.t-xint  { background:var(--high); }
.tier.t-xexec { background:var(--crit); color:#2a1517; }

.tag { font:700 9px/1 var(--font); letter-spacing:.06em; padding:3px var(--s2); border-radius:var(--r-pill); }
.tag.ok { color:var(--ok); background:var(--ok-bg); border:1px solid var(--ok-bd); }
.tag.no { color:var(--no); background:var(--no-bg); border:1px solid var(--no-bd); }

.aacts { display:flex; gap:var(--s2); margin-top:var(--s3); }
.aacts button { flex:1; border-radius:var(--r-sm); padding:var(--s2); font:600 var(--fs-sm) var(--font);
  cursor:pointer; border:1px solid var(--line); background:var(--card-2); color:var(--muted); }
.aacts .btn-ok:hover, .aacts .btn-ok.on { color:var(--ok); border-color:var(--ok-bd); background:var(--ok-bg); }
.aacts .btn-no:hover, .aacts .btn-no.on { color:var(--no); border-color:var(--no-bd); background:var(--no-bg); }
.aacts .btn-exec:hover, .aacts .btn-exec.on { color:#ff9980; border-color:#eb6847; background:rgba(235,104,71,.12); }
.aacts button:disabled { opacity:.4; cursor:default; }

/* phase 4: staged command block (exploit_stage executed) */
.astaged { margin-top:var(--s3); border:1px solid #eb6847; border-left-width:3px; border-radius:var(--r-sm);
  padding:var(--s3); background:rgba(235,104,71,.06); }
.astaged .st-hd { font:600 var(--fs-xs) var(--font); color:#ff9980; text-transform:uppercase; letter-spacing:.04em; }
.astaged .st-argv { display:block; margin:var(--s2) 0; padding:var(--s2); border-radius:var(--r-sm);
  background:var(--bg); color:var(--fg); word-break:break-all; }
.astaged .st-never { font:var(--fs-xs) var(--font); color:var(--muted); }
.astaged .st-hint { margin-top:var(--s2); font:var(--fs-xs) var(--font); color:var(--muted); }

/* exploit badge on a finding */
.pill.badge-exploit { background:#eb6847; color:#2a1517; }

/* run-approved button (amber = it sends packets, distinct from the safe plan/approve) */
.runcmd .runbtn { display:block; width:100%; margin:var(--s2) 0; padding:var(--s2) var(--s4);
  background:var(--high); color:#2a1a05; border:none; border-radius:var(--r-md);
  font:700 var(--fs-sm) var(--font); cursor:pointer; letter-spacing:.02em; }
.runcmd .runbtn:hover { filter:brightness(1.08); }
.runcmd .runbtn:disabled { opacity:.5; cursor:default; }
.runcmd .runalt { font-size:var(--fs-xs); color:var(--muted-2); display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap; margin-top:var(--s1); }
.runcmd .runalt code { display:inline; padding:1px var(--s2); background:var(--card); border-radius:var(--r-sm); color:var(--muted); }

/* ============================================================================
   COMMAND CENTER — visual overhaul (atmosphere, glow, gradients)
   Appended last so it wins over the base case-view rules.
   ============================================================================ */

/* atmosphere: navy glow + faint blue grid + magenta corner */
body.case-view {
  background:
    radial-gradient(1100px 620px at 46% -12%, rgba(201,162,122,.18), transparent 62%),
    radial-gradient(760px 520px at 108% 118%, rgba(219,44,111,.09), transparent 60%),
    var(--bg);
}
.case-view #cy {
  background:
    radial-gradient(1000px 560px at 42% 30%, rgba(201,162,122,.12), transparent 60%),
    linear-gradient(rgba(160,170,185,.05) 1px, transparent 1px) -1px -1px / 44px 44px,
    linear-gradient(90deg, rgba(160,170,185,.05) 1px, transparent 1px) -1px -1px / 44px 44px,
    radial-gradient(circle at 50% 45%, #141a24, #090b10 80%);
  box-shadow: inset 0 0 180px 24px rgba(0,0,0,.6);
}

/* top bar: glass + glowing underline, gradient case title */
.case-view #top {
  background: linear-gradient(180deg, rgba(20,26,36,.92), rgba(9,11,16,.85));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(201,162,122,.16);
  box-shadow: 0 1px 0 rgba(201,162,122,.12), 0 8px 24px rgba(0,0,0,.4);
}
.case-view #top h1 { font-size: var(--fs-xl); letter-spacing: .4px; }
.case-view #top h1 .diamond { filter: drop-shadow(0 0 12px rgba(201,162,122,.9)); }
#top #case {
  background: linear-gradient(92deg, #e4c49a, #c9a27a 55%, #d4b45a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 700;
}

/* header metric chips: glowing stat cards */
#top .metric {
  background: linear-gradient(180deg, rgba(26,34,48,.92), rgba(20,26,36,.92));
  border: 1px solid rgba(201,162,122,.20);
  box-shadow: inset 0 0 14px rgba(201,162,122,.12), 0 2px 8px rgba(0,0,0,.3);
  min-width: 56px;
}
#top .metric .mv { text-shadow: 0 0 12px rgba(201,162,122,.45); font-size: var(--fs-base); }
#top .metric .ml { color: var(--muted); }
#top .metric.m-crit { border-color: rgba(212,106,90,.45);
  box-shadow: inset 0 0 14px rgba(212,106,90,.16), 0 0 14px rgba(212,106,90,.22); }
#top .metric.m-crit .mv { text-shadow: 0 0 12px rgba(212,106,90,.7); }
#top .metric.m-exp { border-color: rgba(235,104,71,.45);
  box-shadow: inset 0 0 14px rgba(235,104,71,.16), 0 0 12px rgba(235,104,71,.20); }
#top .metric.m-exp .mv { text-shadow: 0 0 12px rgba(235,104,71,.7); }

/* rail: glass panel with a glowing left seam; tabs/panels own the padding */
.case-view #side {
  background: linear-gradient(180deg, rgba(20,26,36,.97), rgba(9,11,16,.98));
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border-left: 1px solid rgba(201,162,122,.18);
  box-shadow: -16px 0 44px rgba(0,0,0,.45), inset 1px 0 0 rgba(201,162,122,.10);
  padding: 0;
  /* flex column so the active panel fills below the tabs — lets the chat pin its input */
  display: flex; flex-direction: column; overflow: hidden;
}
#side .tabs { flex: none; }
#side .panel:not([hidden]) { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#side #panel-agent { overflow: hidden; }  /* the chat list scrolls, not the whole panel */
#side .tabs { background: transparent; border-bottom: 1px solid rgba(201,162,122,.12); }
#side .tab.active { text-shadow: 0 0 14px rgba(201,162,122,.55);
  box-shadow: 0 3px 16px -6px var(--accent); }
#side .panel h2 {
  text-transform: uppercase; letter-spacing: .11em; font-size: var(--fs-xs);
  color: var(--muted); position: relative; padding-left: 13px; margin: var(--s5) 0 var(--s2);
}
#side .panel h2::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 9px var(--accent);
}
#side .panel h2:first-child { margin-top: var(--s3); }

/* analyst input + analyze button: focus glow + gradient */
#ask #q { background: var(--bg-2); border: 1px solid var(--line); color: var(--ink);
  border-radius: var(--r-md); padding: var(--s2) var(--s3); }
#ask #q:focus-visible { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(201,162,122,.18); }
#ask #run, .plan-bar #planBtn {
  background: linear-gradient(180deg, #c9a27a, #a8845c); color: #fff; border: none;
  box-shadow: 0 2px 10px rgba(201,162,122,.35), inset 0 1px 0 rgba(255,255,255,.15);
}
#ask #run:hover, .plan-bar #planBtn:hover { filter: brightness(1.08); }

/* tier badges: gradient + glow */
.tier { box-shadow: 0 0 10px -2px currentColor; background-image: linear-gradient(180deg, rgba(255,255,255,.18), rgba(0,0,0,.06)); }
.pill.badge-exploit { background: linear-gradient(180deg, #ff9980, #eb6847);
  box-shadow: 0 0 12px rgba(235,104,71,.5); }

/* action cards: raised with a state glow */
.action { background: linear-gradient(180deg, rgba(26,34,48,.92), rgba(20,26,36,.92));
  box-shadow: 0 2px 10px rgba(0,0,0,.28); }
.action.st-approved { box-shadow: 0 0 0 1px rgba(111,154,114,.25), 0 0 16px -6px rgba(111,154,114,.5); }
.tag.ok { box-shadow: 0 0 10px -3px var(--ok); }
.metric, .action, .runcmd, .finding { transition: box-shadow var(--t), border-color var(--t); }

/* run button: amber gradient + glow (it sends packets) */
.runcmd { box-shadow: 0 0 22px -8px rgba(111,154,114,.4); }
.runcmd .runbtn { background: linear-gradient(180deg, #d4b45a, #c9a27a);
  box-shadow: 0 3px 14px rgba(209,152,11,.4), inset 0 1px 0 rgba(255,255,255,.25); }

/* ============================================================================
   COMMAND CENTER — usability layer (legend, help, guided steps)
   ============================================================================ */

/* header language toggle (ES/EN) */
#top #lang { color:var(--muted); border:1px solid var(--line); padding:5px var(--s3);
  border-radius:var(--r-sm); cursor:pointer; font:700 var(--fs-xs)/1 var(--mono); letter-spacing:.06em; }
#top #lang:hover { color:var(--ink); border-color:var(--line-2); background:rgba(255,255,255,.02); }

/* header "how to use" button */
#top #help { color:var(--accent-2); border:1px solid rgba(201,162,122,.32); padding:5px var(--s3);
  border-radius:var(--r-sm); cursor:pointer; font-size:var(--fs-sm); font-weight:600;
  box-shadow:0 0 12px -4px var(--accent); }
#top #help:hover { background:rgba(201,162,122,.12); color:var(--ink); }

/* graph legend (bottom-left, always available) — scoped to its own element.
   As a bare .legend it also matched the dashboard's #risk-legend and yanked the
   severity rows out of flow, which stayed invisible only while nothing was
   rendered after them. */
#legend { position:fixed; left:var(--s4); bottom:var(--s4); z-index:4; max-width:290px;
  background:rgba(20,26,36,.94); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(201,162,122,.22); border-radius:var(--r-lg); box-shadow:var(--shadow-2); overflow:hidden; }
.legend .lg-toggle { display:block; width:100%; text-align:left; appearance:none; border:none;
  background:rgba(201,162,122,.08); color:var(--accent-2); cursor:pointer;
  font:700 var(--fs-xs)/1 var(--font); letter-spacing:.09em; text-transform:uppercase; padding:var(--s2) var(--s4); }
.lg-body { padding:var(--s3) var(--s4) var(--s4); }
.lg-body[hidden] { display:none; }
.lg-hd { font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.09em; color:var(--muted); margin-bottom:var(--s2); }
.lg-row { display:flex; align-items:center; gap:var(--s2); font-size:var(--fs-sm); color:var(--ink); padding:2px 0; }
.lg-dot { width:12px; height:12px; border-radius:50%; box-shadow:0 0 8px -1px currentColor;
  flex:none; border:1px solid rgba(255,255,255,.25); }
.lg-dia { border-radius:2px; transform:rotate(45deg); }
.lg-hint { font-size:var(--fs-xs); color:var(--muted-2); margin-top:var(--s3); line-height:1.45; }
.lg-adm { font-size:var(--fs-xs); color:var(--muted); margin-top:var(--s2); line-height:1.5; }
.lg-adm b { color:var(--accent-2); font-weight:700; }

/* help overlay */
.helppanel { position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  background:rgba(10,12,15,.74); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.helppanel[hidden] { display:none; }
.hp-card { position:relative; max-width:560px; margin:var(--s4);
  background:linear-gradient(180deg,#1a2230,#141a24); border:1px solid rgba(201,162,122,.28);
  border-radius:var(--r-xl); box-shadow:var(--shadow-2), 0 0 48px -12px rgba(201,162,122,.5); padding:var(--s6); }
.hp-card h2 { margin:0 0 var(--s3); font-size:var(--fs-2xl); color:var(--ink); letter-spacing:.2px;
  text-transform:none; padding-left:0; }
.hp-card h2::before { display:none; }
.hp-card p { color:var(--muted); font-size:var(--fs-base); line-height:1.55; margin:0 0 var(--s3); }
.hp-card ul { margin:0 0 var(--s4); padding-left:var(--s5); }
.hp-card li { color:var(--muted); font-size:var(--fs-md); line-height:1.55; margin-bottom:var(--s3); }
.hp-card b { color:var(--ink); font-weight:650; }
.hp-safe { font-size:var(--fs-sm); color:var(--rec); background:rgba(111,154,114,.08);
  border:1px solid rgba(111,154,114,.25); border-radius:var(--r-md); padding:var(--s3); margin:0; }
.hp-close { position:absolute; top:var(--s3); right:var(--s3); appearance:none; border:none;
  background:var(--card-2); color:var(--muted); width:28px; height:28px; border-radius:var(--r-sm);
  cursor:pointer; font-size:16px; line-height:1; }
.hp-close:hover { color:var(--ink); }

/* guided collection steps */
.steps { display:flex; flex-direction:column; gap:var(--s2); margin:var(--s2) 0 var(--s4); }
.step { display:flex; gap:var(--s3); align-items:flex-start; font-size:var(--fs-sm); color:var(--muted); line-height:1.4; }
.step .sn { flex:none; width:20px; height:20px; border-radius:50%; background:var(--accent); color:var(--accent-ink);
  font:700 var(--fs-xs)/20px var(--mono); text-align:center; box-shadow:0 0 10px -2px var(--accent); }
.step b { color:var(--ink); }

/* node "what is this" line + idle run box */
.whatis { color:var(--accent-2); font-size:var(--fs-sm); margin:-2px 0 var(--s3); font-style:italic; }

/* node detail: location line + neighbour badge (Shodan external surface) */
.node-where { font-size:var(--fs-sm); color:var(--ink); margin:0 0 var(--s3);
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); padding:var(--s2) var(--s3); }
.nb-tag { display:inline-block; font:700 9px/1.4 var(--font); letter-spacing:.06em; vertical-align:middle;
  color:#86c9d1; border:1px solid rgba(134,201,209,.4); background:rgba(134,201,209,.10);
  border-radius:var(--r-sm); padding:1px 6px; margin-right:var(--s2); }
/* legend: neighbour dot (dotted cerulean) + the device-icon key line */
.lg-nb { border:2px dotted #86c9d1 !important; background:transparent !important; box-shadow:none !important; }
.lg-devs { font-size:var(--fs-xs); color:var(--muted); margin-top:var(--s2); line-height:1.5; }
.runcmd-idle { border-color:var(--line) !important; box-shadow:none !important; opacity:.9; }
.runcmd-idle .runhead { color:var(--muted); }
.runcmd-idle .runbtn { background:var(--line-2); }

/* ============================================================================
   GRAPH TOOLBAR + AGENT CHAT — a more functional graph and a control surface
   ============================================================================ */

/* graph toolbar (top-left of the canvas): search + fit + relayout */
#gtools { position:fixed; left:var(--s4); top:calc(var(--topbar) + var(--s3)); z-index:4;
  display:flex; gap:var(--s2); align-items:center; flex-wrap:wrap;
  max-width:calc(100vw - var(--rail) - 32px); }
.gt-search { position:relative; display:flex; align-items:center; }
.gt-search .gt-ic { position:absolute; left:9px; color:var(--muted-2); font-size:var(--fs-sm); pointer-events:none; }
#gsearch { width:190px; padding:6px 10px 6px 26px; font:var(--fs-sm) var(--mono); color:var(--ink);
  background:rgba(20,26,36,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(201,162,122,.22); border-radius:var(--r-md); }
#gsearch:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(201,162,122,.18); }
.gt-btn { font:600 var(--fs-xs) var(--font); color:var(--muted); cursor:pointer;
  background:rgba(20,26,36,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--line-2); border-radius:var(--r-md); padding:6px var(--s3); letter-spacing:.02em; }
.gt-btn:hover { color:var(--ink); border-color:var(--accent); }
select.gt-btn { appearance:none; -webkit-appearance:none; cursor:pointer; color:var(--muted); padding-right:var(--s4); }
select.gt-btn:hover { color:var(--ink); }
select.gt-btn option { background:var(--panel); color:var(--ink); }
.gt-btn.on { color:var(--accent-2); border-color:var(--accent); }

/* ---- graph quick-filter chips (risk/value focus) ---- */
.gfilters { position:fixed; left:var(--s4); top:calc(var(--topbar) + var(--s3) + 38px); z-index:4;
  display:flex; gap:var(--s1); align-items:center; flex-wrap:wrap;
  max-width:min(560px, calc(100vw - var(--rail) - 32px)); }
.gf-hd { font:600 var(--fs-xs) var(--font); color:var(--muted-2); text-transform:uppercase;
  letter-spacing:.06em; margin-right:var(--s1); }
.gf-chip { font:600 var(--fs-xs) var(--font); color:var(--muted); cursor:pointer;
  background:rgba(20,26,36,.92); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid var(--line-2); border-radius:var(--r-pill); padding:4px var(--s3);
  letter-spacing:.02em; transition:color var(--t-fast), border-color var(--t-fast), background var(--t-fast); }
.gf-chip:hover { color:var(--ink); border-color:var(--accent); }
.gf-chip.on { color:var(--bg); background:var(--signal); border-color:var(--signal); }
.gf-clear { font:600 var(--fs-xs) var(--font); color:var(--muted); cursor:pointer;
  background:transparent; border:1px solid var(--line-2); border-radius:var(--r-pill);
  padding:4px var(--s2); transition:color var(--t-fast), border-color var(--t-fast); }
.gf-clear:hover { color:var(--danger); border-color:var(--danger); }
.lg-cnt { color:var(--muted-2); font:var(--fs-xs) var(--mono); margin-left:auto; }

/* ---- graph minimap (cytoscape-navigator) ---- */
.cytoscape-navigator { position:fixed; bottom:var(--s4); right:var(--s4); width:180px; height:120px;
  z-index:30; border:1px solid var(--line-2); border-radius:var(--r-sm); overflow:hidden;
  background:rgba(9,11,16,.92); }
.cytoscape-navigatorContent, .cytoscape-navigatorOverlay { position:absolute; top:0; left:0; }
.cytoscape-navigatorView { position:absolute; border:1px solid #e4c49a; cursor:move; }
.cytoscape-navigatorHidden { display:none; }

/* floating graph actions (dashboard corpus) */
.graph-fabs { position:absolute; bottom:var(--s3); right:var(--s3); display:flex; gap:var(--s1); z-index:5; }
.graph-fabs button { font:600 var(--fs-xs) var(--font); color:var(--muted); cursor:pointer;
  background:rgba(20,26,36,.92); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:5px var(--s3); }
.graph-fabs button:hover { color:var(--ink); border-color:var(--accent); }

/* corpus time-scrubber: rewind the graph through its history */
.time-scrub { position:absolute; bottom:var(--s3); left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:var(--s2); z-index:5;
  background:rgba(20,26,36,.92); border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:var(--s1) var(--s3); font:var(--fs-xs) var(--mono); color:var(--muted); }
.time-scrub button { font:600 var(--fs-xs) var(--font); color:var(--muted); cursor:pointer;
  background:transparent; border:1px solid var(--line-2); border-radius:var(--r-sm);
  padding:2px var(--s2); }
.time-scrub button:hover { color:var(--ink); border-color:var(--accent); }
.time-scrub input[type=range] { width:180px; accent-color:var(--accent); }
.time-scrub .mono { white-space:nowrap; color:var(--muted); }

/* legend rows are now filter toggles */
.lg-tip { color:var(--muted-2); font-weight:400; text-transform:none; letter-spacing:0; }
.lg-row[data-type] { cursor:pointer; border-radius:var(--r-sm); padding:2px 4px; margin:0 -4px;
  transition:background var(--t-fast), opacity var(--t-fast); }
.lg-row[data-type]:hover { background:rgba(201,162,122,.10); }
.lg-row[data-type].off { opacity:.4; text-decoration:line-through; }

/* AGENT chat panel */
#panel-agent { padding:0; display:flex; flex-direction:column; }
.chat { flex:1; overflow-y:auto; padding:var(--s4); display:flex; flex-direction:column; gap:var(--s3); min-height:0; }
.chat::before { content:''; flex:1 1 0; min-height:0; }
.msg { max-width:88%; padding:var(--s3) var(--s4); border-radius:var(--r-lg); font-size:var(--fs-md); line-height:1.5;
  animation:rise .2s var(--ease) both; word-wrap:break-word; }
.msg.bot { align-self:flex-start; background:var(--card); border:1px solid var(--line);
  border-bottom-left-radius:var(--r-sm); color:var(--ink); }
.msg.user { align-self:flex-end; color:var(--accent-ink); border-bottom-right-radius:var(--r-sm);
  background:linear-gradient(180deg,#c9a27a,#a8845c); box-shadow:0 2px 10px rgba(201,162,122,.35); }
.msg.busy { color:var(--muted); font-style:italic; }
.msg .dots { animation:blink 1.2s steps(3,end) infinite; }
@keyframes blink { 0%,100%{opacity:.3} 50%{opacity:1} }
.msg .c-list { margin:var(--s2) 0 0; padding-left:var(--s5); }
.msg .c-list li { margin-bottom:3px; font-size:var(--fs-sm); }
.msg .c-prio { font:700 var(--fs-xs) var(--mono); color:var(--hl); }
.msg .c-hl { margin-top:var(--s2); font-size:var(--fs-xs); color:var(--accent-2); }
.msg .mono { font-family:var(--mono); color:var(--accent-2); }
.msg .c-go { margin-top:var(--s3); appearance:none; cursor:pointer; font:600 var(--fs-sm) var(--font);
  color:var(--accent-2); background:rgba(201,162,122,.10); border:1px solid rgba(201,162,122,.3);
  border-radius:var(--r-md); padding:var(--s2) var(--s3); }
.msg .c-go:hover { background:rgba(201,162,122,.18); color:var(--ink); }

/* chat quick-action chips */
.chat-chips { display:flex; flex-wrap:wrap; gap:var(--s2); padding:var(--s2) var(--s4); border-top:1px solid var(--line); }
.chip-act { font:600 var(--fs-xs) var(--font); color:var(--muted); cursor:pointer; white-space:nowrap;
  background:var(--bg-2); border:1px solid var(--line-2); border-radius:var(--r-pill); padding:5px var(--s3); }
.chip-act:hover { color:var(--ink); border-color:var(--accent); background:rgba(201,162,122,.10); }

/* chat input row */
.chat-input { display:flex; gap:var(--s2); padding:var(--s2) var(--s4) var(--s1); }
.chat-input #chatQ { flex:1; padding:9px var(--s3); font-size:var(--fs-md); color:var(--ink);
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-md); }
.chat-input #chatQ:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(201,162,122,.18); }
.chat-input #chatSend { flex:none; padding:9px var(--s4); font:600 var(--fs-sm) var(--font); color:#fff; cursor:pointer;
  border:none; border-radius:var(--r-md); background:linear-gradient(180deg,#c9a27a,#a8845c);
  box-shadow:0 2px 10px rgba(201,162,122,.35), inset 0 1px 0 rgba(255,255,255,.15); }
.chat-input #chatSend:hover { filter:brightness(1.08); }
.chat-note { padding:var(--s1) var(--s4) var(--s3); font-size:var(--fs-xs); color:var(--muted-2); }
.chat-note b { color:var(--muted); }

/* ---- chat actionable chips: findings / targets / re-trace ---- */
.msg .c-find, .msg .c-trace, .msg .c-tgt { cursor:pointer; }
.msg .c-find { list-style:none; margin-left:calc(-1 * var(--s3)); padding:2px var(--s2) 2px var(--s3);
  border-radius:var(--r-sm); transition:background var(--t-fast), color var(--t-fast); }
.msg .c-find:hover { background:rgba(201,162,122,.12); color:var(--ink); }
.msg .c-find b { color:var(--hl); font-family:var(--mono); }
.msg .c-trace { border-bottom:1px dotted rgba(201,162,122,.5); display:inline-block; }
.msg .c-trace:hover { color:var(--ink); border-bottom-color:var(--accent-2); }
.msg .tr-hd { display:block; font:600 var(--fs-xs) var(--font); color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:var(--s1); }
.msg .c-tgt { border-bottom:1px dotted rgba(201,162,122,.45); }
.msg .c-tgt:hover { color:var(--ink); border-bottom-color:var(--accent-2); background:rgba(201,162,122,.08); }

/* ---- attack-paths panel (bottom-right, over the canvas) ---- */
.pp { position:fixed; right:var(--s4); bottom:var(--s4); width:340px; max-height:min(52vh,420px);
  display:flex; flex-direction:column; z-index:60; background:var(--panel); border:1px solid var(--line-2);
  border-radius:var(--r-lg); box-shadow:var(--shadow-2); overflow:hidden; }
.pp[hidden] { display:none; }
.pp-hd { display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  padding:var(--s2) var(--s3); font:600 var(--fs-sm) var(--font); color:var(--ink);
  background:linear-gradient(180deg, rgba(235,104,71,.16), rgba(235,104,71,.05));
  border-bottom:1px solid rgba(235,104,71,.35); }
.pp-x { appearance:none; cursor:pointer; background:none; border:none; color:var(--muted);
  font:600 var(--fs-lg) var(--font); line-height:1; padding:2px var(--s2); border-radius:var(--r-sm); }
.pp-x:hover { color:var(--ink); background:var(--card-2); }
.pp-body { overflow-y:auto; padding:var(--s2); flex:1; }
.pp-item { cursor:pointer; padding:var(--s2) var(--s3); border-radius:var(--r-md);
  border:1px solid transparent; transition:background var(--t-fast), border-color var(--t-fast); }
.pp-item:hover { background:var(--card); border-color:var(--line-2); }
.pp-item.on { background:rgba(235,104,71,.12); border-color:rgba(235,104,71,.5); }
.pp-row { display:flex; align-items:baseline; gap:var(--s2); }
.pp-cost { font:700 var(--fs-sm) var(--mono); color:#ff9980; min-width:34px; }
.pp-tgt { flex:1; font:600 var(--fs-sm) var(--font); color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pp-hops { font:500 var(--fs-xs) var(--mono); color:var(--muted-2); white-space:nowrap; }
.pp-steps { margin-top:3px; font:400 var(--fs-xs) var(--mono); color:var(--muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pp-ft { padding:var(--s2) var(--s3); font-size:var(--fs-xs); color:var(--muted-2);
  border-top:1px solid var(--line); background:var(--bg-2); }
.pp-ck { display:inline-block; margin:2px 4px 2px 0; cursor:pointer; font:600 var(--fs-xs) var(--font);
  color:#ff9980; background:rgba(235,104,71,.10); border:1px solid rgba(235,104,71,.35);
  border-radius:var(--r-pill); padding:2px var(--s2); }
.pp-ck:hover { color:var(--ink); background:rgba(235,104,71,.22); }

/* ---- graph context menu (right-click) ---- */
#ctxmenu { position:fixed; z-index:70; min-width:190px; padding:var(--s1);
  background:var(--panel); border:1px solid var(--line-2); border-radius:var(--r-md);
  box-shadow:var(--shadow-2); }
#ctxmenu[hidden] { display:none; }
#ctxmenu button { display:block; width:100%; appearance:none; cursor:pointer; text-align:left;
  font:500 var(--fs-sm) var(--font); color:var(--ink); background:none; border:none;
  border-radius:var(--r-sm); padding:var(--s2) var(--s3); }
#ctxmenu button:hover { background:var(--accent); color:var(--accent-ink); }

/* ---- live mode: button state + toast ---- */
#gtLive.on { color:#7ce38b; border-color:rgba(124,227,139,.55); background:rgba(124,227,139,.10);
  animation:livepulse 2s var(--ease) infinite; }
@keyframes livepulse { 0%,100%{ box-shadow:0 0 0 0 rgba(124,227,139,.35); } 50%{ box-shadow:0 0 0 4px rgba(124,227,139,.12); } }
.toast { position:fixed; left:50%; bottom:var(--s6); transform:translateX(-50%); z-index:80;
  font:600 var(--fs-sm) var(--mono); color:#7ce38b; background:rgba(16,35,26,.92);
  border:1px solid var(--ok-bd); border-radius:var(--r-pill); padding:var(--s2) var(--s4);
  box-shadow:var(--shadow-2); animation:toastin .25s var(--ease); pointer-events:none; }
.dtoast { position:fixed; left:50%; bottom:var(--s6); transform:translateX(-50%); z-index:80;
  font:600 var(--fs-sm) var(--mono); color:var(--fg); background:rgba(9,11,16,.94);
  border:1px solid var(--line-2); border-radius:var(--r-pill); padding:var(--s2) var(--s4);
  box-shadow:var(--shadow-2); opacity:0; transition:opacity .25s var(--ease); pointer-events:none; }
.dtoast.show { opacity:1; }
@keyframes toastin { from{ opacity:0; transform:translateX(-50%) translateY(8px); } to{ opacity:1; transform:translateX(-50%) translateY(0); } }

/* ---- exec confirm modal ---- */
.xm-back { position:fixed; inset:0; z-index:80; background:rgba(5,8,12,.78);
  display:flex; align-items:center; justify-content:center; padding:var(--s3); }
.xm { width:min(520px,94vw); background:var(--panel); border:1px solid var(--line-2);
  border-radius:var(--r-lg); overflow:hidden; }
.xm-hd { padding:var(--s3) var(--s4); border-bottom:1px solid var(--line);
  color:#ff9980; font:600 var(--fs-xs) var(--mono); text-transform:uppercase; letter-spacing:.08em; }
.xm-body { padding:var(--s4); color:var(--fg); font-size:var(--fs-md); line-height:1.55; }
.xm-acts { display:flex; gap:var(--s2); padding:0 var(--s4) var(--s4); justify-content:flex-end; }
.xm-no, .xm-yes { font:600 var(--fs-xs) var(--mono); padding:var(--s2) var(--s4);
  border-radius:var(--r-sm); border:1px solid var(--line-2); background:transparent;
  color:var(--muted); cursor:pointer; }
.xm-no:hover { color:var(--fg); }
.xm-yes { color:#ff9980; border-color:rgba(235,104,71,.5); }
.xm-yes:hover, .xm-yes.danger { background:rgba(235,104,71,.14); border-color:#eb6847; }

/* ============================================================
   VISUAL LEAP — "Deep Space" refresh
   ambient depth · glass overlays · gradient identity · motion
   (all additive overrides; tokens and semantics above win on
   data-bearing elements — this layer only re-skins chrome)
   ============================================================ */

/* -- identity tokens -- */
:root {
  --grad: linear-gradient(135deg, #c9a27a 0%, #e4c49a 100%);
  --grad-soft: linear-gradient(135deg, rgba(201,162,122,.16), rgba(228,196,154,.10));
  --glass: rgba(20, 26, 36, .72);
  --glass-2: rgba(26, 34, 48, .66);
  --glass-border: rgba(201, 162, 122, .22);
  --shadow-glass: 0 18px 50px rgba(2, 6, 16, .55), 0 2px 10px rgba(2, 6, 16, .4);
  --glow-grad: 0 0 22px rgba(201, 162, 122, .35);
}

/* -- ambient depth: fixed aurora + fine grid behind everything -- */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(1100px 700px at 12% -8%, rgba(201, 162, 122, .16), transparent 60%),
    radial-gradient(900px 600px at 96% 108%, rgba(139, 123, 184, .10), transparent 55%),
    radial-gradient(700px 500px at 70% -12%, rgba(228, 196, 154, .07), transparent 60%),
    linear-gradient(rgba(140, 170, 210, .028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 170, 210, .028) 1px, transparent 1px);
  background-size: auto, auto, auto, 44px 44px, 44px 44px;
}

/* -- topbar: glass with a gradient hairline -- */
#top {
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(201, 162, 122, .18), 0 10px 30px rgba(2, 6, 16, .35);
}
#top::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 162, 122, .55), rgba(228, 196, 154, .35), transparent);
  pointer-events: none;
}
#top h1 .diamond {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 8px rgba(201, 162, 122, .5));
}

/* -- primary buttons: gradient identity -- */
button:not(.gt-btn):not(.map-btn):not(.pal-item):not(.xm-no):not(.xm-yes):not(.tab):not(.act):not(.btn-exec):not(.btn-ok):not(.btn-no):not(.st-x):not(.pp-x):not(.lb-x):not(#tsPlay):not(.graph-fabs button):not(.mission):not(.es-cta) {
  background: var(--grad);
  border: 1px solid rgba(201, 162, 122, .55);
  box-shadow: 0 4px 14px rgba(201, 162, 122, .35), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: box-shadow var(--t) var(--ease), filter var(--t) var(--ease), transform var(--t-fast) var(--ease);
}
button:not(.gt-btn):not(.map-btn):not(.pal-item):not(.xm-no):not(.xm-yes):not(.tab):not(.act):not(.btn-exec):not(.btn-ok):not(.btn-no):not(.st-x):not(.pp-x):not(.lb-x):not(#tsPlay):not(.graph-fabs button):not(.mission):not(.es-cta):hover {
  filter: brightness(1.1);
  box-shadow: 0 6px 22px rgba(201, 162, 122, .5), inset 0 1px 0 rgba(255, 255, 255, .22);
}

/* -- tabs: gradient underline indicator -- */
.tab { position: relative; transition: color var(--t) var(--ease), background var(--t) var(--ease); }
.tab.on { background: rgba(201, 162, 122, .10); border-color: rgba(201, 162, 122, .25); }
.tab.on::after {
  content: ''; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px;
  background: var(--grad); border-radius: 2px;
  box-shadow: 0 0 10px rgba(201, 162, 122, .6);
}

/* -- glass overlays: palette, lightbox, exec modal, navigator, legend, bars, fabs, scrubber, toasts -- */
.pal, .lb, .xm, .cytoscape-navigator, .map-legend, #mapBar, #camsBar, .graph-fabs, .time-scrub, .toast, .dtoast, .pp {
  background: var(--glass) !important;
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-color: var(--glass-border) !important;
  box-shadow: var(--shadow-glass);
}
.pal-back, .lb-back, .xm-back { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.graph-fabs button, .time-scrub button { background: var(--glass-2); }

/* -- panels breathe with the depth layer -- */
.panel { background: rgba(20, 26, 36, .82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.card { background: rgba(26, 34, 48, .72); border-color: var(--line-2); }

/* -- login: the first impression -- */
body.login::before {
  background:
    radial-gradient(1000px 700px at 20% 0%, rgba(201, 162, 122, .22), transparent 60%),
    radial-gradient(800px 600px at 90% 100%, rgba(139, 123, 184, .16), transparent 55%),
    linear-gradient(rgba(140, 170, 210, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140, 170, 210, .04) 1px, transparent 1px);
  background-size: auto, auto, 44px 44px, 44px 44px;
}
body.login .card {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(1.3);
  -webkit-backdrop-filter: blur(20px) saturate(1.3);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-glass), var(--glow-grad);
  animation: viewIn .5s var(--ease) both;
}
body.login h1 .diamond {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(201, 162, 122, .6));
  animation: diamondPulse 3.2s ease-in-out infinite;
}
@keyframes diamondPulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(201, 162, 122, .45)); }
  50% { filter: drop-shadow(0 0 18px rgba(201, 162, 122, .8)); }
}

/* -- view transition motion -- */
@keyframes viewIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.stage-in { animation: viewIn .28s var(--ease) both; }

/* -- focus rings glow -- */
input:focus, select:focus, textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(201, 162, 122, .18), 0 0 14px rgba(201, 162, 122, .25) !important;
}

/* -- refined scrollbars -- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(201, 162, 122, .25); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(201, 162, 122, .45); }

/* -- chips get a glass touch -- */
.chip { background: rgba(26, 34, 48, .6); border-color: var(--line-2); }

/* ---- print: the operator's briefing sheet ---- */
@media print {
  /* dark theme inks bleed on paper — force a light, flat layout */
  :root { --bg:#fff; --panel:#fff; --fg:#111; --muted:#555; --muted-2:#777;
          --line:#ccc; --line-2:#bbb; --accent:#1a4f8f; --accent-2:#1a4f8f; }
  body { background:#fff !important; color:#111 !important; }
  /* chrome that makes no sense on paper */
  #top, .tabs, .sidebar, .gt-bar, #gtools, #pathsPanel, #ctxmenu, #xmodal,
  #camLightbox, #palette, #mapTip, #mapInspect, #mapLegend, #liveToast, .dtoast,
  .toast, #camsBar, #mapBar, #evoBar, .pal-back, .lb-back, .runbox, .qacts,
  .aacts, #agentForm, .chat-input { display:none !important; }
  /* stages are absolutely positioned overlays — let the active one flow */
  #cy, #mapStage, #evoStage, #camsStage { position:static !important; inset:auto !important; }
  #camsStage[hidden], #evoStage[hidden], #mapStage[hidden] { display:none !important; }
  #camsGrid { display:block; overflow:visible !important; }
  .cam-card { break-inside:avoid; page-break-inside:avoid; border:1px solid #ccc; }
  .cam-img { min-height:0; max-height:2.2in; }
  .case-list, #cases { overflow:visible !important; }
  .main { position:static !important; overflow:visible !important; }
  .view { position:static !important; height:auto !important; }
  h1, h2, h3 { break-after:avoid; }
  a { color:#1a4f8f; text-decoration:none; }
  /* the corpus graph canvas prints as a blank box — note it instead */
  #cy::after { content:"[ graph omitted — open the console for the interactive view ]";
               display:block; padding:24px; color:#777; font:12px/1.4 var(--mono); }
}

/* ---- polish pass: detection overlay, button states, atmosphere ---- */
.lb-frame { position:relative; }
.lb-img { display:block; width:100%; }
.lb-box { position:absolute; border:1.5px solid var(--accent-2);
  box-shadow:0 0 0 1px rgba(201,162,122,.25); pointer-events:none; }
.lb-box-tag { position:absolute; top:-17px; left:-1.5px;
  font:600 var(--fs-xs) var(--mono); background:rgba(201,162,122,.88); color:#fff;
  padding:0 4px; border-radius:2px; white-space:nowrap; }

.map-btn, .lb-btn, .gt-btn, .cam-add, .chip-act {
  transition:background .15s ease, border-color .15s ease, transform .06s ease; }
.map-btn:active, .lb-btn:active, .gt-btn:active, .cam-add:active, .chip-act:active {
  transform:translateY(1px); }
.map-btn:focus-visible, .lb-btn:focus-visible, .gt-btn:focus-visible,
.cam-add:focus-visible, .chip-act:focus-visible {
  outline:2px solid var(--accent-2); outline-offset:1px; }
.busy { opacity:.55; pointer-events:none; }

.cam-card { transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease; }
.cam-card:hover { transform:translateY(-2px); border-color:var(--accent-2);
  box-shadow:0 6px 18px rgba(0,0,0,.35); }

::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--card-2); border-radius:5px; }
::-webkit-scrollbar-thumb:hover { background:var(--line-2); }
* { scrollbar-width:thin; scrollbar-color:var(--card-2) transparent; }

::selection { background:var(--accent); color:var(--accent-ink); }

@keyframes fadeUp { from { opacity:0; transform:translateY(6px); }
  to { opacity:1; transform:none; } }
.cam-card, .obs-row, .evo-adv { animation:fadeUp .25s ease both; }
.cam-card:nth-child(1) { animation-delay:.02s; } .cam-card:nth-child(2) { animation-delay:.04s; }
.cam-card:nth-child(3) { animation-delay:.06s; } .cam-card:nth-child(4) { animation-delay:.08s; }
.cam-card:nth-child(5) { animation-delay:.10s; } .cam-card:nth-child(6) { animation-delay:.12s; }
.cam-card:nth-child(7) { animation-delay:.14s; } .cam-card:nth-child(8) { animation-delay:.16s; }

@keyframes dtoastIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.dtoast { animation:dtoastIn .2s ease both; box-shadow:0 8px 24px rgba(0,0,0,.45); }

.obs-day { font:600 var(--fs-xs) var(--mono); text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted); margin:var(--s3) 0 var(--s1);
  padding-bottom:var(--s1); border-bottom:1px solid var(--line); }

/* ==== Aether display typography ==========================================
   Fraunces (italic optical) carries the display register — the wordmark,
   the login title, the big view headings and the large metric numbers.
   The small uppercase labels (.panel h2, .obs-day) deliberately stay in
   the sans/mono register; only true display type takes the serif. ======= */
#top h1 .wm,
body.login h1,
.ev-h1,
.donut .mid .n {
  font-family: var(--display);
  font-style: italic;
  font-weight: 480;
  letter-spacing: .2px;
}
.stat .v.big {
  font-family: var(--display);
  font-style: italic;
  font-weight: 480;
  letter-spacing: .3px;
}
.obs-day:first-child { margin-top:0; }

/* ---- operator polish: rail density, drawers, wifi, stream, dashboard wrap ---- */
#side .tab.active::after {
  content:''; position:absolute; left:6px; right:6px; bottom:-1px; height:2px;
  background:var(--grad); border-radius:2px;
  box-shadow:0 0 10px rgba(201,162,122,.55);
}
.obs-drawer {
  flex:none; max-height:34%; overflow:auto;
  border-top:1px solid var(--line);
  background:rgba(9,11,16,.45);
  padding:var(--s3) var(--s4) var(--s4);
}
.obs-drawer > header {
  font:700 var(--fs-xs)/1 var(--font); letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); margin:0 0 var(--s2);
}
.obs-drawer[hidden] { display:none; }
.wifi-row.is-hidden { opacity:.72; }
.wifi-ssid.is-hidden { color:var(--muted); font-style:italic; font-weight:500; }
.wifi-row { align-items:flex-start; }
.wifi-crack { flex:none; }

@media (max-width: 1180px) {
  .dash-grid { grid-template-columns: 240px minmax(0,1fr) 300px; }
  .searchbox { width: 220px; }
}
@media (max-width: 920px) {
  .dash-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    overflow: auto;
    height: auto;
  }
  body.dash { height: auto; overflow: auto; }
  .rail, .center { min-height: 280px; }
  .span-3 { grid-column: 1; }
  #top { height: auto; min-height: var(--topbar); flex-wrap: wrap; row-gap: var(--s1); }
  .dash .tabs { margin-left: 0; flex-wrap: wrap; }
  .searchbox { width: 100%; margin-left: 0; }
  .case-view #side { width: min(100vw, var(--rail)); }
  #gtools, .gfilters { max-width: calc(100vw - 24px); }
}

@media (prefers-reduced-motion: reduce) {
  .stream-pulse { animation: none; }
}

/* ---- panel state: a failed query must not look like an empty result ----
   The badge rides in the panel header so a stale panel is legible without
   reading its contents; the error block replaces the body only when there was
   never anything good to keep. */
.pbadge { margin-left:auto; font:600 var(--fs-xs) var(--mono); text-transform:uppercase;
  letter-spacing:.06em; padding:1px 6px; border-radius:var(--r-pill); border:1px solid; }
.pbadge.stale { color:var(--high); border-color:rgba(212,180,90,.45); background:rgba(212,180,90,.10); }
.pbadge.error { color:var(--crit); border-color:rgba(212,106,90,.45); background:rgba(212,106,90,.10); }
.panel > header { display:flex; align-items:center; gap:var(--s2); }

.perr { padding:var(--s3); display:flex; flex-direction:column; gap:var(--s2); align-items:flex-start; }
.perr-msg { color:var(--muted); font-size:var(--fs-sm); line-height:1.45; }
.perr-retry { font:600 var(--fs-xs) var(--mono); text-transform:uppercase; letter-spacing:.06em;
  padding:3px 10px; border-radius:var(--r-sm); cursor:pointer; }

/* ---- score confidence: what the number did and did not see ----
   Two tiers. The summary chips are the glance; the detail folds. Severity is a
   real three-level language: a finding (open amplifier) is red, a caveat about
   the score's trust is amber, a neutral metric is muted. */
.conf { margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--line);
  display:flex; flex-direction:column; gap:var(--s2); }

/* tier 1 — the glance */
.conf-summary { display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); }
.conf-chips { display:flex; flex-wrap:wrap; gap:4px; }
.conf-chip { font:600 var(--fs-xs) var(--mono); padding:1px 7px; border-radius:var(--r-pill);
  border:1px solid; white-space:nowrap; }
.conf-chip.ok { color:var(--rec); border-color:rgba(111,154,114,.42); background:rgba(111,154,114,.10); }
.conf-chip.warn { color:var(--high); border-color:rgba(212,180,90,.42); background:rgba(212,180,90,.10); }
.conf-chip.danger { color:var(--crit); border-color:rgba(212,106,90,.5); background:rgba(212,106,90,.13); }
.conf-toggle { margin-left:auto; cursor:pointer; color:var(--muted); font-size:var(--fs-xs);
  font-family:var(--mono); letter-spacing:.04em; user-select:none; }
.conf-toggle:hover { color:var(--accent-2); }
.conf-bar { flex-basis:100%; height:4px; border-radius:2px; background:var(--bg-2); overflow:hidden; }
.conf-fill { display:block; height:100%; background:var(--rec); border-radius:2px;
  transition:width .6s var(--ease); }
.conf-fill.warn { background:var(--high); }

/* tier 2 — the specifics, folded by default (auto-open on a finding) */
.conf-detail { display:flex; flex-direction:column; gap:var(--s2);
  max-height:0; opacity:0; overflow:hidden;
  transition:max-height .28s var(--ease), opacity .2s var(--ease), margin-top .28s var(--ease); }
.conf-detail.open { max-height:520px; opacity:1; margin-top:var(--s1); }

.conf-finding { border-left:2px solid var(--crit); padding-left:var(--s2); }
.conf-finding-t { color:var(--crit); font-size:var(--fs-sm); line-height:1.4; }
.conf-finding-t::before { content:'\25CF '; }  /* ● — this is a finding, not a footnote */
.conf-caveat { border-left:2px solid var(--high); padding-left:var(--s2); }
.conf-caveat-t { color:var(--high); font-size:var(--fs-sm); line-height:1.4; }
.conf-metric { display:flex; justify-content:space-between; align-items:baseline; font-size:var(--fs-sm); }
.conf-k { color:var(--muted); }
.conf-v { font-family:var(--mono); font-weight:600; }
.conf-hosts { font:var(--fs-xs)/1.5 var(--mono); color:var(--muted-2); margin-top:2px;
  word-break:break-all; }
.conf-flag { font:600 var(--fs-xs) var(--mono); text-transform:uppercase; letter-spacing:.06em;
  color:var(--high); }

/* feed health chip — silent while every source answers */
.chip.health { cursor:help; font-weight:600; }
.chip.health.warn { color:var(--high); border-color:rgba(212,180,90,.45); background:rgba(212,180,90,.10); }
.chip.health.crit { color:var(--crit); border-color:rgba(212,106,90,.45); background:rgba(212,106,90,.10); }

/* ---- layer cards, mission presets, new-since-visit ---- */
/* Two even columns: the rail is narrow and flex-wrap let the wider label
   overflow its row and clip. A grid gives every chip the same budget. */
.missions { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin-bottom:var(--s3);
  padding-bottom:var(--s3); border-bottom:1px solid var(--line); }
.mission { font:600 var(--fs-xs) var(--font); letter-spacing:.02em; padding:3px 6px;
  border-radius:var(--r-pill); border:1px solid var(--line-2); background:transparent;
  color:var(--muted); cursor:pointer; transition:color var(--t), border-color var(--t);
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mission:hover { color:var(--ink); border-color:var(--accent); }
.mission.on { color:var(--accent-ink); background:var(--accent); border-color:var(--accent); }

.layer-wrap { display:flex; flex-direction:column; }
.layer-i { margin-left:6px; width:14px; height:14px; flex:none; border-radius:50%;
  border:1px solid var(--line-2); color:var(--muted-2); cursor:help;
  font:700 9px/13px var(--mono); text-align:center; }
.layer-i:hover { color:var(--accent); border-color:var(--accent); }
.lcard { margin:var(--s2) 0 var(--s3); padding:var(--s3); border-radius:var(--r-md);
  background:var(--bg-2); border:1px solid var(--line); display:flex;
  flex-direction:column; gap:var(--s2); }
.lcard-row { display:flex; flex-direction:column; gap:1px; }
.lcard-k { font:700 var(--fs-xs) var(--mono); text-transform:uppercase; letter-spacing:.07em;
  color:var(--muted-2); }
.lcard-v { font-size:var(--fs-sm); line-height:1.45; color:var(--ink); }
.lcard-lim { display:flex; flex-direction:column; gap:2px; }
.lcard-li { font-size:var(--fs-sm); line-height:1.45; color:var(--muted);
  padding-left:var(--s3); position:relative; }
.lcard-li::before { content:'—'; position:absolute; left:0; color:var(--high); }

.chip.fresh { cursor:pointer; font-weight:600; color:var(--rec);
  border-color:rgba(111,154,114,.45); background:rgba(111,154,114,.10); }

/* Live camera stream modal (RTSP→MJPEG via ffmpeg, multipart/x-mixed-replace) */
.stream-row { margin:10px 0 2px; }
.stream-btn { width:100%; padding:9px 12px; font:600 var(--fs-sm)/1 var(--font);
  color:var(--accent-ink); background:var(--accent); border:1px solid var(--accent);
  border-radius:var(--r-sm); cursor:pointer; }
.stream-btn:hover { filter:brightness(1.08); }
.stream-modal { display:none; position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,.72); align-items:center; justify-content:center; }
.stream-modal.open { display:flex; }
.stream-modal-box { width:min(920px,92vw); background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.6); }
.stream-modal-hd { display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px; border-bottom:1px solid var(--line); font:600 var(--fs-sm)/1 var(--font); }
.stream-close { padding:5px 10px; font:600 var(--fs-xs)/1 var(--font); color:var(--ink);
  background:transparent; border:1px solid var(--line); border-radius:var(--r-sm); cursor:pointer; }
.stream-close:hover { border-color:var(--accent); color:var(--accent); }
.stream-hint { padding:8px 14px 0; color:var(--muted); font:var(--fs-xs)/1.4 var(--font); }
.stream-stage { position:relative; aspect-ratio:16/9; background:#05070b; }
.stream-wait {
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:var(--s3); color:var(--muted); font:var(--fs-sm)/1.45 var(--font); text-align:center;
  padding:var(--s4);
}
.stream-wait[hidden] { display:none; }
.stream-pulse {
  width:10px; height:10px; border-radius:50%; background:var(--ok); flex:none;
  box-shadow:0 0 0 0 rgba(111,154,114,.5); animation:pulse 1.6s infinite;
}
.stream-img { display:block; width:100%; height:100%; background:transparent; object-fit:contain; position:relative; z-index:2; }
.stream-img[src=""], .stream-img:not([src]) { visibility:hidden; }

/* ============================================================
   CHART ROOM — the design ceiling.
   Admiralty plotting table: copper instruments on void. The
   signature is the corner ticks + Fraunces seal, not glow soup.
   Appended last so it wins chrome; data color tokens above stay.
   ============================================================ */
html { color-scheme: dark; }

#top h1 .wm {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
#top h1 .wm-ops {
  font: 700 9px/1 var(--mono);
  font-style: normal;
  letter-spacing: .22em;
  color: var(--copper);
  margin-left: 8px;
  padding: 3px 6px 2px;
  border: 1px solid rgba(201,162,122,.35);
  border-radius: 2px;
  transform: translateY(1px);
}

/* rails recede — the graph is the product, not the chrome */
.dash .rail > .panel {
  background: rgba(10, 13, 18, .92);
  background-image: none;
  border-color: rgba(44, 53, 72, .7);
  box-shadow: none;
}
.dash .rail > .panel > header {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--muted);
  font-weight: 600;
}
.dash .rail > .panel > header .act { color: var(--copper); }
.dash-grid > .span-3.panel {
  background: rgba(10, 13, 18, .92);
  background-image: none;
  border-color: rgba(44, 53, 72, .7);
}
.dash-grid > .span-3.panel > header {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--muted);
}

/* only the graph stage carries the copper ticks */
.dash-grid > .center > .panel.grow.flush {
  background-color: rgba(14, 18, 25, .55);
  background-image:
    linear-gradient(var(--copper), var(--copper)),
    linear-gradient(var(--copper), var(--copper)),
    linear-gradient(var(--copper), var(--copper)),
    linear-gradient(var(--copper), var(--copper)),
    linear-gradient(var(--copper), var(--copper)),
    linear-gradient(var(--copper), var(--copper)),
    linear-gradient(var(--copper), var(--copper)),
    linear-gradient(var(--copper), var(--copper));
  background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px;
  background-position:
    left 8px top 8px, left 8px top 8px,
    right 8px top 8px, right 8px top 8px,
    left 8px bottom 8px, left 8px bottom 8px,
    right 8px bottom 8px, right 8px bottom 8px;
  background-repeat: no-repeat;
  border-color: rgba(201,162,122,.28);
}
.dash .center > .panel > header {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  color: var(--copper);
  background: transparent;
  border-bottom-color: rgba(201,162,122,.12);
}

/* risk gauge — the number is the seal, the arc is the finding */
.donut .mid .n {
  font-size: 32px;
  line-height: .9;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.donut .mid .of { letter-spacing: .14em; font-family: var(--mono); }

/* timeline as a plotted track */
.tl-item::before {
  background: linear-gradient(90deg, transparent, rgba(201,162,122,.4), transparent);
  height: 1px; top: 6px;
}
.tl-item::after {
  width: 8px; height: 8px; margin-left: -4px; top: 2px;
  background: var(--bg);
  border: 1.5px solid rgba(201,162,122,.55);
}
.tl-item .tt { letter-spacing: .04em; color: var(--copper-2); }

/* search as a chart index */
.searchbox input {
  background: rgba(9,11,16,.55);
  border-color: rgba(201,162,122,.22);
}

/* login — a room, not a floating card */
body.login {
  display: flex; align-items: stretch; justify-content: stretch;
  min-height: 100vh;
}
.login-room {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(320px, 420px);
  gap: clamp(32px, 8vw, 96px);
  align-items: center;
  width: min(1080px, 92vw);
  margin: auto;
  padding: 48px 24px;
}
.login-id { display: flex; flex-direction: column; gap: 18px; }
.login-ey {
  margin: 0;
  font: 700 10px/1 var(--mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--copper);
  white-space: nowrap;
}
.login-lede {
  margin: 0;
  font: 400 18px/1.45 var(--font);
  color: var(--muted);
  max-width: 22ch;
}
body.login h1 {
  font-size: clamp(40px, 6vw, 64px);
  margin: 0;
  letter-spacing: .4px;
}
body.login::before {
  background:
    radial-gradient(1100px 720px at 18% 40%, rgba(201,162,122,.34), transparent 58%),
    radial-gradient(800px 560px at 92% 88%, rgba(139,123,184,.16), transparent 52%),
    linear-gradient(rgba(201,162,122,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,162,122,.05) 1px, transparent 1px);
  background-size: auto, auto, 52px 52px, 52px 52px;
}
.login .card {
  width: 100%;
  padding: 28px 26px 22px;
  background-image:
    linear-gradient(var(--copper), var(--copper)),
    linear-gradient(var(--copper), var(--copper)),
    linear-gradient(var(--copper), var(--copper)),
    linear-gradient(var(--copper), var(--copper)),
    linear-gradient(var(--copper), var(--copper)),
    linear-gradient(var(--copper), var(--copper)),
    linear-gradient(var(--copper), var(--copper)),
    linear-gradient(var(--copper), var(--copper));
  background-size: 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px, 14px 1px, 1px 14px;
  background-position:
    left 10px top 10px, left 10px top 10px,
    right 10px top 10px, right 10px top 10px,
    left 10px bottom 10px, left 10px bottom 10px,
    right 10px bottom 10px, right 10px bottom 10px;
  background-repeat: no-repeat;
}
.login-ft {
  margin: 16px 0 0;
  font: 11px/1.5 var(--mono);
  color: var(--muted-2);
  text-align: left;
  white-space: nowrap;
}
#top .nav .chip, #top #lang, #top a { white-space: nowrap; }
.login-ft code { font-size: 11px; }
@media (max-width: 760px) {
  .login-room { grid-template-columns: 1fr; gap: 28px; padding: 32px 18px; }
  .login-lede { max-width: none; }
  body.login h1 { font-size: 40px; }
  .login-ft { white-space: normal; }
}

/* case rail as a briefing dossier */
.case-view #side {
  box-shadow: -24px 0 60px rgba(0,0,0,.5), inset 1px 0 0 rgba(201,162,122,.22);
}
.case-view #top h1 { font-family: var(--font); font-style: normal; }
.case-view #top #case {
  font-family: var(--display);
  font-style: italic;
  font-weight: 480;
}

/* graph canvas: deeper vignette, copper graticule */
.case-view #cy {
  background:
    radial-gradient(1000px 560px at 42% 30%, rgba(201,162,122,.10), transparent 60%),
    linear-gradient(rgba(201,162,122,.045) 1px, transparent 1px) -1px -1px / 48px 48px,
    linear-gradient(90deg, rgba(201,162,122,.045) 1px, transparent 1px) -1px -1px / 48px 48px,
    radial-gradient(circle at 50% 45%, #141a24, #090b10 80%);
}

/* chips of focus never wrap mid-word */
.gf-chip, .gf-hd, .gf-clear { white-space: nowrap; }
.gfilters { row-gap: 6px; }

/* clickable surfaces declare themselves */
.tab, .chip, .layer, .gf-chip, .mission, .feed-row, .case, .res, .pal-item { cursor: pointer; }

/* feed: a row you can actually scan */
.feed-row { transition: background var(--t-fast); }
.feed-row:hover { background: rgba(201,162,122,.05); }

/* meters: copper fill by default, ember only for KEV */
.meter .track { height: 5px; border-color: rgba(201,162,122,.18); }
.meter .fill { background: linear-gradient(90deg, #a8845c, var(--copper-2)); }

/* tighter instrument density on the ops grid */
.dash-grid { gap: 10px; padding: 10px; }

.dash #cy {
  background:
    radial-gradient(900px 500px at 50% 40%, rgba(201,162,122,.08), transparent 62%),
    linear-gradient(rgba(201,162,122,.04) 1px, transparent 1px) -1px -1px / 48px 48px,
    linear-gradient(90deg, rgba(201,162,122,.04) 1px, transparent 1px) -1px -1px / 48px 48px,
    radial-gradient(circle at 50% 45%, #121820, #090b10 78%);
}
.evo.closed > header { border-bottom: 0; }

/* case metrics: instruments, not badges */
.case-view #top .metric {
  background: rgba(9,11,16,.45);
  border-color: rgba(201,162,122,.18);
  min-width: 52px;
}
.case-view #top .metric .mv { font-variant-numeric: tabular-nums; }

/* composer as a dock, not a leftover form */
.chat-input {
  padding: 10px 14px 8px;
  background: rgba(9,11,16,.35);
  border-top: 1px solid rgba(201,162,122,.14);
}
.chat-chips {
  background: rgba(9,11,16,.2);
}

@media (prefers-reduced-motion: reduce) {
  body.login h1 .diamond { animation: none; }
}