/* GEN — autonomous trading agent console.
 *
 * The palette is taken from GEN himself: near-black rooms, a teal rim light,
 * and data that glows. Two type registers coexist deliberately — prose when
 * GEN speaks, tabular monospace when the market answers.
 *
 * Strict CSP (style-src 'self'): no inline styles anywhere. Dynamic sizing is
 * done from JS through CSSOM property writes, which CSP permits.
 */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/manrope-400.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/manrope-500.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/static/fonts/manrope-600.woff2") format("woff2");
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/static/fonts/manrope-700.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/static/fonts/plex-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/static/fonts/plex-500.woff2") format("woff2");
}

/* ══════════════════════════ tokens ══════════════════════════ */
:root {
  color-scheme: dark;
  /* surfaces — a wider separation between the page and the panels is what
     lets the eye rest: near-black voids, clearly lifted cards */
  --bg: #04070b;
  --bg-soft: #080f17;
  --panel: #0c1521;
  --panel-2: #131e2c;
  --panel-3: #1c2938;
  --hover: #1b2836;

  /* lines */
  --line: #212e3f;
  --line-soft: #17212e;
  --line-strong: #33465c;

  /* text */
  --text: #eef4fa;
  --text-2: #a6b9cd;
  --text-3: #76899f;

  /* GEN's signature */
  --gen: #2fe0a8;
  --gen-bright: #7ff0cb;
  --gen-dim: rgb(var(--gen-rgb) / 0.14);
  --gen-line: rgb(var(--gen-rgb) / 0.4);
  --cyan: #4fd6e8;

  /* semantics — up is its own green, distinct from GEN's teal: the brand
     color means "GEN is speaking", not "money was made" */
  --up: #3dd68c;
  --down: #ff6183;
  --warn: #f5b544;
  --info: #79a6ff;
  /* Direction is not PnL: long/short must not steal the money greens/reds. */
  --side-long: #79a6ff;
  --side-short: #c4a0ff;

  /* RGB channels for alpha-tinted uses of the palette: rgb(var(--gen-rgb) / .2) */
  --gen-rgb: 47 224 168;
  --up-rgb: 61 214 140;
  --down-rgb: 255 97 131;
  --warn-rgb: 245 181 68;
  --info-rgb: 121 166 255;
  --cyan-rgb: 79 214 232;
  --side-long-rgb: 121 166 255;
  --side-short-rgb: 196 160 255;

  /* a lighter loss red that stays legible as small text on near-black */
  --down-soft: #ff9aae;

  /* one-off dark tones */
  --line-bright: #475c74;
  --on-gen: #03100c;
  --dock-bg: #080e15;
  --dock-bg-end: #060b11;
  --hero-bg: #04070a;
  --hero-bg-rgb: 4 7 10;

  /* stacking order, bottom to top (local hero/login layers stay literal) */
  --z-sticky: 1;
  --z-topbar: 20;
  --z-scrim: 25;
  --z-dock: 28;
  --z-drawer: 30;

  /* typography */
  --sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo,
    Consolas, "Liberation Mono", monospace;

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

  /* shape */
  --r-sm: 6px; --r-md: 9px; --r-lg: 12px; --r-xl: 20px;

  /* layout */
  --dock-w: 320px;
  --topbar-h: 54px;
  --page-max: 1500px;
  --page-pad: 26px;

  --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .34);
  --glow: 0 0 0 1px var(--gen-line), 0 0 22px rgb(var(--gen-rgb) / .18);
  /* the lifted-surface recipe: a top inner highlight plus a soft drop */
  --elevate: inset 0 1px 0 rgba(255, 255, 255, .05), 0 16px 40px rgba(0, 0, 0, .28);
}

/* ────────────────────── light theme ──────────────────────
 * Same information, daylight register: paper-gray voids, white cards,
 * ink text. The accent family shifts darker so it keeps its contrast on
 * white. The hero and the login art stay dark islands on purpose — a
 * single near-black block reads as intentional on a light page. */
[data-theme="light"] {
  color-scheme: light;

  --bg: #edf0f4;
  --bg-soft: #f4f6f9;
  --panel: #ffffff;
  --panel-2: #eef1f6;
  --panel-3: #e0e6ee;
  --hover: #e7ecf2;

  --line: #d9e1ea;
  --line-soft: #e3e9f0;
  --line-strong: #bfccda;

  --text: #14202d;
  --text-2: #47596d;
  --text-3: #7e8fa1;

  --gen: #0a9c72;
  --gen-bright: #067a58;
  --gen-dim: rgb(var(--gen-rgb) / 0.12);
  --gen-line: rgb(var(--gen-rgb) / 0.4);
  --cyan: #0d8ea6;

  --up: #0b8f5b;
  --down: #dd2f57;
  --warn: #a87808;
  --info: #3b68d4;
  --side-long: #3b68d4;
  --side-short: #7a4fb5;

  --gen-rgb: 10 156 114;
  --up-rgb: 11 143 91;
  --down-rgb: 221 47 87;
  --warn-rgb: 168 120 8;
  --info-rgb: 59 104 212;
  --cyan-rgb: 13 142 166;
  --side-long-rgb: 59 104 212;
  --side-short-rgb: 122 79 181;

  --down-soft: #c22747;

  --line-bright: #a4b3c4;
  --on-gen: #ffffff;
  --dock-bg: #f7f8fa;
  --dock-bg-end: #eef1f4;
  --hero-bg: #04070a;
  --hero-bg-rgb: 4 7 10;

  --shadow: 0 1px 2px rgba(20, 32, 45, .06), 0 12px 30px rgba(20, 32, 45, .09);
  --glow: 0 0 0 1px var(--gen-line), 0 0 18px rgb(var(--gen-rgb) / .12);
  --elevate: 0 1px 2px rgba(20, 32, 45, .05), 0 10px 26px rgba(20, 32, 45, .08);
}

/* ══════════════════════════ base ══════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

::selection { background: rgb(var(--gen-rgb) / .3); color: #eafff7; }

body {
  margin: 0;
  background:
    radial-gradient(1100px 520px at 16% -12%, rgb(var(--gen-rgb) / .11), transparent 60%),
    radial-gradient(840px 460px at 94% -6%, rgb(var(--cyan-rgb) / .07), transparent 58%),
    radial-gradient(900px 620px at 50% 116%, rgb(var(--info-rgb) / .045), transparent 62%),
    radial-gradient(rgb(255, 255, 255, .016) 1px, transparent 1.2px) 0 0 / 26px 26px,
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--sans);
  font-size: 13.5px;
  line-height: 1.55;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
p, dl, dd, dt, figure, blockquote { margin: 0; }
button { font: inherit; color: inherit; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--gen);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border: 3px solid var(--bg);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: var(--line-bright); }

.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.up { color: var(--up); }
.down { color: var(--down); }
.r { text-align: right; }
.c { text-align: center; }

.meta { color: var(--text-3); font-size: 12px; }
.empty-line { color: var(--text-3); font-size: 12.5px; padding: var(--s5) 0; }
.mono { font-family: var(--mono); }

/* Initial placeholders shimmer until the first payload replaces them:
   a light sweep across the glyphs reads as "fetching", not "frozen". */
.is-loading {
  background: linear-gradient(100deg, var(--text-3) 38%, #d7e6f5 50%, var(--text-3) 62%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: loadingShimmer 1.7s linear infinite;
}
@keyframes loadingShimmer {
  from { background-position: 130% 0; }
  to   { background-position: -110% 0; }
}

/* A number that just changed gets one short brightness pop (JS toggles it). */
.text-pop { animation: textPop .65s ease-out; }
@keyframes textPop {
  0%   { filter: brightness(1.75); }
  100% { filter: brightness(1); }
}

/* When the direction of the move is known, the pop takes the PnL color for a
   beat — the eye catches sign changes without reading a single digit. */
.flash-up   { animation: flashUp .85s ease-out; }
.flash-down { animation: flashDown .85s ease-out; }
@keyframes flashUp {
  0%   { color: var(--gen-bright); text-shadow: 0 0 14px rgb(var(--gen-rgb) / .55); }
  100% { text-shadow: none; }
}
@keyframes flashDown {
  0%   { color: var(--down-soft); text-shadow: 0 0 14px rgb(var(--down-rgb) / .5); }
  100% { text-shadow: none; }
}

/* ══════════════════════════ shell ══════════════════════════ */
.shell { display: flex; min-height: 100vh; }

.stage {
  flex: 1;
  min-width: 0;
  margin-right: var(--dock-w);
  display: flex;
  flex-direction: column;
  /* A faint radial vignette kills the dead-flat void; tint channels flip
     with the theme tokens, so no light-mode override is needed. */
  background:
    radial-gradient(1100px 700px at 14% -8%, rgb(var(--gen-rgb) / .045), transparent 62%),
    radial-gradient(900px 620px at 102% 108%, rgb(var(--cyan-rgb) / .035), transparent 58%);
}

.scrim {
  position: fixed;
  inset: 0;
  z-index: var(--z-scrim);
  background: rgba(0, 0, 0, .6);
}

/* ─────────────── portrait (shared: topbar + hero) ─────────────── */
.portrait { position: relative; width: 56px; height: 56px; flex: none; }
.portrait img {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 28%;
  border: 1px solid var(--line-strong);
  display: block;
}
.portrait-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1.5px solid var(--gen-line);
  opacity: .55;
}
.portrait.is-busy .portrait-ring {
  animation: ringPulse 1.9s ease-out infinite;
  border-color: var(--gen);
}
@keyframes ringPulse {
  0%   { transform: scale(.94); opacity: .85; }
  70%  { transform: scale(1.14); opacity: 0; }
  100% { transform: scale(1.14); opacity: 0; }
}
.portrait-dot {
  position: absolute;
  right: 1px; bottom: 1px;
  width: 13px; height: 13px;
  border-radius: 50%;
  background: var(--text-3);
  border: 2.5px solid var(--dock-bg);
}
.portrait.is-busy .portrait-dot { background: var(--gen); }
.portrait.is-idle .portrait-dot { background: var(--info); }
.portrait.is-off  .portrait-dot { background: var(--down); }

.presence-detail { font-size: 11.5px; color: var(--text-2); line-height: 1.5; }
.presence-timer {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--gen);
  font-variant-numeric: tabular-nums;
}

/* an equaliser that only moves while GEN is working; idle it vanishes so
   the phase label isn't preceded by five dead ticks. */
.wave { display: none; align-items: flex-end; gap: 2px; height: 13px; flex: none; }
.wave.is-busy { display: inline-flex; }
.wave i {
  display: block;
  width: 2.5px;
  height: 3px;
  border-radius: 2px;
  background: var(--text-3);
  transition: background .3s;
}
.wave.is-busy i { background: var(--gen); animation: bar .9s ease-in-out infinite; }
.wave.is-busy i:nth-child(2) { animation-delay: .12s; }
.wave.is-busy i:nth-child(3) { animation-delay: .24s; }
.wave.is-busy i:nth-child(4) { animation-delay: .36s; }
.wave.is-busy i:nth-child(5) { animation-delay: .48s; }
@keyframes bar {
  0%, 100% { height: 3px; }
  50%      { height: 13px; }
}

/* ─────────────── tabs (top navigation) ─────────────── */
.nav-badge {
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 1px 6px;
  border-radius: 20px;
  background: var(--panel-3);
  color: var(--text-2);
}
.tab.is-active .nav-badge { background: rgb(var(--gen-rgb) / .18); color: var(--gen-bright); }

/* ══════════════════════════ dock ══════════════════════════
 * The account is the one thing an operator wants under the eye at all
 * times, so it leaves the scroll flow entirely and lives in a fixed
 * column of its own: the views scroll on the left, his money stays put.
 */
.dock {
  position: fixed;
  inset: 0 0 auto auto;
  z-index: var(--z-dock);
  width: min(var(--dock-w), 92vw);
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding:
    calc(12px + env(safe-area-inset-top, 0px))
    calc(12px + env(safe-area-inset-right, 0px))
    calc(16px + env(safe-area-inset-bottom, 0px))
    12px;
  background: linear-gradient(180deg, var(--dock-bg) 0%, var(--dock-bg-end) 100%);
  border-left: 1px solid var(--line);
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

.dock-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); flex-wrap: wrap; }
.dock-headline { min-width: 0; }
.dock-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  color: var(--gen);
  text-transform: uppercase;
}
.dock-headline h2 { font-size: 13px; margin-top: 1px; }

/* The external account profile is one quiet chip in the header row — the
   dock's vertical budget belongs to the financial zones, not to a passport. */
.dock-profile-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 4px;
  border: 1px solid rgba(90, 119, 150, .3);
  border-radius: 999px;
  background: linear-gradient(112deg, rgb(var(--gen-rgb) / .07), transparent 72%), var(--bg-soft);
  color: var(--text-2);
  font-size: 11px;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.dock-profile-chip:hover {
  border-color: var(--gen-line);
  color: var(--text);
  background: linear-gradient(112deg, rgb(var(--gen-rgb) / .12), transparent 72%), var(--panel);
}
.dock-profile-chip:focus-visible { outline: 2px solid var(--gen); outline-offset: 2px; }
.dock-profile-chip .dock-profile-mark {
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid var(--gen-line);
  border-radius: 999px;
  background: rgb(var(--gen-rgb) / .09);
  color: var(--gen-bright);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 8px;
  letter-spacing: .06em;
  box-shadow: inset 0 0 12px rgb(var(--gen-rgb) / .05);
}
.dock-profile-chip-arrow {
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 11px;
  transition: color .18s ease;
}
.dock-profile-chip:hover .dock-profile-chip-arrow { color: var(--gen); }

/* the headline number: everything else in the dock is context for it */
.dock-equity {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 13px 14px 11px;
  border: 1px solid var(--gen-line);
  border-radius: 14px;
  background:
    linear-gradient(145deg, rgb(var(--gen-rgb) / .12), transparent 64%),
    var(--panel);
  transition: background .5s ease, border-color .5s ease;
}
/* Today's sign washes the whole equity zone: the dock states the day's
   color before any number is read. */
.dock-equity.is-up {
  border-color: rgb(var(--up-rgb) / .42);
  background:
    linear-gradient(145deg, rgb(var(--up-rgb) / .13), transparent 64%),
    var(--panel);
}
.dock-equity.is-down {
  border-color: rgb(var(--down-rgb) / .42);
  background:
    linear-gradient(145deg, rgb(var(--down-rgb) / .13), transparent 64%),
    var(--panel);
}
.dock-equity-head {
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
}
.dock-equity-label { font-size: 11px; color: var(--text-3); }
.dock-equity .currency-seg { flex: none; padding: 1px; border-radius: 7px; }
.currency-seg .seg-btn {
  padding: 2px 7px;
  border-radius: 5px;
  font-size: 9.5px;
  line-height: 17px;
}
.currency-seg .seg-btn:focus-visible { outline: 2px solid var(--gen); outline-offset: 1px; }
.dock-equity-value { font-size: 29px; line-height: 1.08; letter-spacing: -.04em; font-weight: 600; }
.dock-equity-foot {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 3px;
  flex-wrap: wrap;
}
.dock-equity-delta { font-size: 15px; }
.dock-equity-foot > span { font-size: 10.5px; color: var(--text-3); }

/* The number says where the account is; the sparkline says how it got here. */
.dock-spark {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid rgb(var(--gen-rgb) / .14);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dock-spark canvas { width: 100% !important; height: 52px !important; display: block; }
.dock-spark-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  font-size: 10px;
  color: var(--text-3);
}
.dock-spark-foot strong { font-size: 11px; }

.dock-cells { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s3); }
/* De-boxed: numbers don't need their own bordered rooms — the panel already
   is the room. Label quiet, value loud, nothing else. */
.dock-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 2px 0;
}
.dock-cell span { font-size: 10.5px; color: var(--text-3); }
.dock-cell strong { font-size: 13.5px; }
/* "Available / used" reads as one fraction, not two boxed numbers. */
.dock-cell-dual { grid-column: 1 / -1; flex-direction: row; align-items: baseline; gap: 5px; }
.dock-cell-dual em { font-style: normal; font-size: 13.5px; white-space: nowrap; }
.dock-cell-dual em + em::before { content: " / "; color: var(--text-3); }

/* Five stable calendar rows make streaks and outlier days visible at a glance
   without turning the narrow account dock into a second analytics page. */
.dock-pnl-calendar {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 12px 2px 4px;
  border: 0;
  border-top: 1px solid var(--line-soft);
  border-radius: 0;
  background: transparent;
}
.dock-pnl-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s2);
}
.dock-pnl-head h3 { font-size: 12.5px; color: var(--text-2); white-space: nowrap; }
.dock-pnl-head > div:first-child > span {
  display: block;
  margin-top: 1px;
  color: var(--text-3);
  font-size: 9.5px;
}
.dock-pnl-total { display: flex; flex-direction: column; align-items: flex-end; }
.dock-pnl-total span { display: none; }
.dock-pnl-total strong { font-size: 13px; font-weight: 600; }
.dock-pnl-weekdays,
.dock-pnl-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}
.dock-pnl-weekdays span {
  color: var(--text-3);
  font-size: 8.5px;
  line-height: 1;
  text-align: center;
}
.dock-pnl-grid .empty-line { grid-column: 1 / -1; padding: 38px 0; text-align: center; }
.dock-pnl-day {
  position: relative;
  min-width: 0;
  height: 31px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2px 3px 3px;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: var(--panel);
  overflow: hidden;
  transition: transform .14s ease, border-color .14s ease;
}
.dock-pnl-day:hover {
  transform: scale(1.08);
  z-index: var(--z-sticky);
  border-color: var(--line-strong);
}
.dock-pnl-day-date {
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 8.5px;
  line-height: 1;
}
.dock-pnl-day-value {
  overflow: hidden;
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 8.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.04em;
  text-overflow: clip;
  white-space: nowrap;
}
.dock-pnl-day.is-today { box-shadow: inset 0 0 0 1px var(--text-2); }
.dock-pnl-day.is-future { border-color: transparent; background: rgba(16, 24, 35, .28); }
.dock-pnl-day.is-future .dock-pnl-day-date { opacity: .38; }
.dock-pnl-day.is-up .dock-pnl-day-value { color: var(--up); }
.dock-pnl-day.is-down .dock-pnl-day-value { color: var(--down-soft); }
.dock-pnl-day.is-up.level-1 { background: rgb(var(--up-rgb) / .08); border-color: rgb(var(--up-rgb) / .12); }
.dock-pnl-day.is-up.level-2 { background: rgb(var(--up-rgb) / .14); border-color: rgb(var(--up-rgb) / .2); }
.dock-pnl-day.is-up.level-3 { background: rgb(var(--up-rgb) / .22); border-color: rgb(var(--up-rgb) / .29); }
.dock-pnl-day.is-up.level-4 { background: rgb(var(--up-rgb) / .31); border-color: rgb(var(--up-rgb) / .42); }
.dock-pnl-day.is-down.level-1 { background: rgb(var(--down-rgb) / .08); border-color: rgb(var(--down-rgb) / .12); }
.dock-pnl-day.is-down.level-2 { background: rgb(var(--down-rgb) / .14); border-color: rgb(var(--down-rgb) / .2); }
.dock-pnl-day.is-down.level-3 { background: rgb(var(--down-rgb) / .21); border-color: rgb(var(--down-rgb) / .29); }
.dock-pnl-day.is-down.level-4 { background: rgb(var(--down-rgb) / .3); border-color: rgb(var(--down-rgb) / .42); }
.dock-pnl-foot {
  min-height: 17px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  color: var(--text-3);
  font-size: 9.5px;
}
.dock-pnl-legend { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.dock-pnl-legend i { width: 7px; height: 7px; border-radius: 2px; }
.dock-pnl-legend .loss { background: rgb(var(--down-rgb) / .55); }
.dock-pnl-legend .flat { background: var(--panel-3); }
.dock-pnl-legend .profit { background: rgb(var(--up-rgb) / .6); }
.link-btn.dock-pnl-toggle { align-self: flex-start; font-size: 10.5px; text-decoration: none; }
.link-btn.dock-pnl-toggle:hover { color: var(--gen-bright); }

/* Today zone: the three facts an operator actually glances at between
   cycles — today's confirmed tape, protection coverage on the open book,
   and where the book concentrates. Observation only, no verdicts. */
.dock-today {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding-top: 13px;
  border-top: 1px solid var(--line-soft);
}
.dock-today-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.dock-today-head h3 { font-size: 12.5px; color: var(--text-2); }
.dock-today-head span { font-size: 10px; color: var(--text-3); }
.today-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.today-row span { font-size: 11px; color: var(--text-3); }
.today-row strong { font-size: 13px; text-align: right; }
.dock-today-note { font-size: 10px; color: var(--text-3); line-height: 1.5; }

.dock-foot {
  margin-top: auto;
  padding-top: var(--s3);
  border-top: 1px solid var(--line-soft);
  font-size: 10px;
  color: var(--text-3);
  line-height: 1.6;
}

/* ══════════════════════════ topbar ══════════════════════════ */
.topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  min-height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: 4px var(--page-pad);
  background: rgba(6, 10, 15, .78);
  backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s ease, background .25s ease;
}
/* Once the page scrolls, the bar lifts off the content with a real shadow. */
.topbar.is-scrolled {
  background: rgba(5, 8, 12, .94);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .38);
}

/* Hairline at the bottom edge of the bar: how far the 30s data cycle has
   progressed. Width is written from JS (CSSOM), so CSP stays happy. */
.poll-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  overflow: hidden;
  pointer-events: none;
}
.poll-progress i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, rgb(var(--gen-rgb) / .12), rgb(var(--gen-rgb) / .6));
  transition: width .5s linear;
}

/* GEN himself opens the bar: avatar, live phase, and a shortcut to his seat. */
.topbar-presence {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-width: 0;
  /* The only flexible piece of the topbar: when the row runs out of room,
     the presence copy truncates instead of pushing the right-side tools
     (logout included) out of the viewport. */
  flex: 0 1 auto;
  padding: 5px var(--s3) 5px 5px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background .15s, border-color .15s;
}
.topbar-presence:hover { background: var(--hover); border-color: var(--line); }
.topbar-presence.is-busy { border-color: var(--gen-line); background: rgb(var(--gen-rgb) / .05); }
.portrait-topbar { width: 30px; height: 30px; }
.portrait-topbar img { width: 30px; height: 30px; }
.portrait-topbar .portrait-ring { inset: -3px; }
.portrait-topbar .portrait-dot { width: 10px; height: 10px; border-width: 2px; right: 0; bottom: 0; }
.topbar-presence-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.topbar-presence-top {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  font-size: 12.5px;
}
.topbar-presence-top strong { letter-spacing: .16em; font-weight: 700; flex: none; }
.topbar-presence-top .wave { height: 10px; flex: none; }
.topbar-presence-top span:last-child {
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-presence-sub {
  display: flex;
  gap: 6px;
  min-width: 0;
  font-size: 10.5px;
  color: var(--text-3);
}
.topbar-presence-sub .presence-detail {
  overflow: hidden;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.topbar-presence-sub .presence-timer { font-size: 10px; white-space: nowrap; }

/* The views themselves: real tabs, always visible, no drawer to open. */
.tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-soft);
  flex: none;
}
.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  font-size: 12.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.tab svg { width: 14px; height: 14px; flex: none; }
.tab-idx {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
  color: var(--text-3);
  opacity: .75;
  transition: color .15s;
}
.tab.is-active .tab-idx { color: var(--gen); opacity: 1; }
.tab:hover { color: var(--text); background: var(--hover); }
.tab:active { transform: scale(.96); }
.tab.is-active {
  background: rgb(var(--gen-rgb) / .18);
  color: var(--gen-bright);
  box-shadow: inset 0 0 0 1px rgb(var(--gen-rgb) / .28);
}
.tab.is-active::after {
  content: "";
  position: absolute;
  inset: auto 10px -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--gen);
  box-shadow: 0 0 8px rgb(var(--gen-rgb) / .6);
}

/* The phase sentence repeats the hero, so it yields first as space runs out. */
@media (max-width: 1500px) {
  .topbar-presence-sub .presence-detail { display: none; }
}

/* What you are looking at, in words — collapses away as space runs out. */
.topbar-end { display: flex; align-items: center; gap: var(--s3); flex: none; }
.topbar-tools {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 10px;
  margin-left: 2px;
  border-left: 1px solid var(--line);
}
.stamp { font-family: var(--mono); font-size: 11px; color: var(--text-3); }

.voice-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel);
  color: var(--text-3);
  font-size: 11.5px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s, box-shadow .15s, transform .1s ease;
}
.voice-toggle:hover { background: var(--hover); color: var(--text-2); }
.voice-toggle:active:not(:disabled) { transform: scale(.95); }
.voice-toggle-icon { width: 15px; height: 15px; flex: none; }
.voice-toggle-state {
  min-width: 17px;
  padding: 0 4px;
  border-radius: 10px;
  background: var(--panel-3);
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 9.5px;
  line-height: 17px;
  text-align: center;
}
.voice-toggle.is-on {
  border-color: var(--gen-line);
  background: var(--gen-dim);
  color: var(--gen-bright);
}
.voice-toggle.is-on .voice-toggle-state {
  background: rgb(var(--gen-rgb) / .18);
  color: var(--gen-bright);
}
.voice-toggle:disabled { opacity: .48; cursor: not-allowed; }
.voice-level {
  display: none;
  height: 13px;
  align-items: flex-end;
  gap: 2px;
}
.voice-level i {
  display: block;
  width: 2px;
  height: 4px;
  border-radius: 2px;
  background: var(--gen);
}
.voice-toggle.is-speaking .voice-toggle-state { display: none; }
.voice-toggle.is-speaking .voice-level { display: inline-flex; }
.voice-toggle.is-speaking .voice-level i { animation: voiceLevel .72s ease-in-out infinite; }
.voice-toggle.is-speaking .voice-level i:nth-child(2) { animation-delay: .12s; }
.voice-toggle.is-speaking .voice-level i:nth-child(3) { animation-delay: .24s; }
@keyframes voiceLevel {
  0%, 100% { height: 3px; opacity: .6; }
  50% { height: 13px; opacity: 1; }
}

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

.decision-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 11px;
  border: 1px solid var(--gen);
  border-radius: 999px;
  background: var(--gen);
  color: var(--on-gen);
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 0 18px rgb(var(--gen-rgb) / .18);
  transition: background .15s, border-color .15s, color .15s, opacity .15s, transform .1s ease, box-shadow .15s;
}
.decision-trigger svg { width: 14px; height: 14px; flex: none; }
.decision-trigger:hover:not(:disabled) {
  background: var(--gen-bright);
  border-color: var(--gen-bright);
  box-shadow: 0 0 22px rgb(var(--gen-rgb) / .28);
}
.decision-trigger:active:not(:disabled) { transform: scale(.95); }
.decision-trigger:disabled { cursor: not-allowed; opacity: .62; }
.decision-trigger.is-pending,
.decision-trigger.is-busy {
  border-color: var(--gen);
  background: var(--gen-dim);
  color: var(--gen-bright);
  box-shadow: none;
}
.decision-trigger.is-pending svg,
.decision-trigger.is-busy svg { animation: blink 1.2s ease-in-out infinite; }
.decision-trigger.is-off {
  border-color: var(--line);
  background: var(--panel);
  color: var(--text-3);
  box-shadow: none;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--panel);
  color: var(--text-2);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, transform .1s ease;
}
.icon-btn svg { width: 15px; height: 15px; }
.icon-btn:hover { background: var(--hover); color: var(--text); border-color: var(--line-strong); }
.icon-btn:active { transform: scale(.88); }
.icon-btn.is-spinning svg { animation: refreshSpin .8s linear infinite; }
@keyframes refreshSpin { to { transform: rotate(360deg); } }

/* theme toggle: show the icon of the theme you will switch TO */
#theme-toggle .icon-sun { display: none; }
[data-theme="light"] #theme-toggle .icon-sun { display: block; }
[data-theme="light"] #theme-toggle .icon-moon { display: none; }

/* Once the dock folds away, the equity has to stay somewhere in sight. */
.dock-toggle {
  display: none;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 4px 10px;
  border: 1px solid var(--gen-line);
  border-radius: 20px;
  background: var(--gen-dim);
  color: var(--gen-bright);
  font-family: var(--mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, transform .1s ease;
}
.dock-toggle svg { width: 13px; height: 13px; flex: none; }
.dock-toggle:hover { background: rgb(var(--gen-rgb) / .2); }
.dock-toggle:active { transform: scale(.95); }
/* Every control in the topbar's right cluster shares one 30px rail. */
.topbar-end .btn-sm { min-height: 30px; }
.logout-btn svg { width: 13px; height: 13px; flex: none; }
.stamp { white-space: nowrap; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--panel-2);
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .1s ease;
}
.btn:hover { background: var(--hover); border-color: var(--gen-line); }
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn:disabled:hover { background: var(--panel-2); border-color: var(--line-strong); }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--text-2); }
.btn-ghost:hover { color: var(--text); }
.btn-sm { padding: 3px 9px; font-size: 11px; }
.link-btn {
  border: 0;
  background: none;
  color: var(--gen);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .15s;
}
.link-btn:hover { color: var(--gen-bright); }

/* ── light-theme component adjustments (token work alone can't cover) ── */
[data-theme="light"] body {
  background:
    radial-gradient(1100px 520px at 16% -12%, rgb(var(--gen-rgb) / .05), transparent 60%),
    radial-gradient(rgb(20, 32, 45, .05) 1px, transparent 1.2px) 0 0 / 26px 26px,
    var(--bg);
  background-attachment: fixed;
}
[data-theme="light"] .topbar {
  background: rgba(247, 248, 250, .82);
  backdrop-filter: blur(18px) saturate(1.15);
}
[data-theme="light"] .topbar.is-scrolled {
  background: rgba(247, 248, 250, .94);
}
[data-theme="light"] .execution-preview,
[data-theme="light"] .panel-voice {
  background: var(--panel);
}
[data-theme="light"] .toast,
[data-theme="light"] .kbd-help,
[data-theme="light"] .modal,
[data-theme="light"] .to-top {
  background: rgba(255, 255, 255, .97);
}
[data-theme="light"] .modal-backdrop { background: rgba(20, 32, 45, .32); }
[data-theme="light"] .is-loading {
  background: linear-gradient(100deg, var(--text-3) 38%, #1c2b3b 50%, var(--text-3) 62%);
  background-size: 240% 100%;
  -webkit-background-clip: text;
  background-clip: text;
}
[data-theme="light"] .dock-pnl-day.is-future { background: rgba(20, 32, 45, .04); }

/* Light-theme hero: a white card like any other panel — the dark artwork
   and its island treatment belong to the dark theme only. */
/* The hero stays a dark cinematic island on a light page — the portrait
   and teal rim are the brand, not a white card that flattens him. */
[data-theme="light"] .hero {
  background: var(--hero-bg);
  border-color: rgb(var(--gen-rgb) / .28);
  color: #eef4fa;
}
[data-theme="light"] .hero-art { display: block; }
[data-theme="light"] .hero-name { filter: none; }
[data-theme="light"] .hero-role { color: #8fa6bc; border-left-color: rgba(147, 169, 191, .32); }
[data-theme="light"] .hero-state {
  border-color: rgba(51, 70, 92, .55);
  background: rgba(8, 14, 21, .58);
  box-shadow: none;
}
[data-theme="light"] .hero-state.is-busy {
  border-color: rgb(var(--gen-rgb) / .45);
  background: rgb(var(--gen-rgb) / .08);
}
[data-theme="light"] .hero-state strong { color: #eef4fa; }
[data-theme="light"] .hero-state.is-busy strong { color: #7ff0cb; }
[data-theme="light"] .hero-state-sep { background: #76899f; }
[data-theme="light"] .hero-detail { color: #a6b9cd; }
[data-theme="light"] .hero .chip { color: #8fa6bc; }
[data-theme="light"] .hero .chip b { color: #eef4fa; }

/* Compact idle hero on light pages is a paper strip, not a night island. */
[data-theme="light"] .view[data-view="gen"]:not(.cycle-live) > .hero {
  background: var(--panel);
  border-color: var(--line);
  color: var(--text);
  box-shadow: none;
}
[data-theme="light"] .view[data-view="gen"]:not(.cycle-live) > .hero .hero-art,
[data-theme="light"] .view[data-view="gen"]:not(.cycle-live) > .hero .hero-veil,
[data-theme="light"] .view[data-view="gen"]:not(.cycle-live) > .hero::after,
[data-theme="light"] .view[data-view="gen"]:not(.cycle-live) > .hero::before {
  display: none;
}
[data-theme="light"] .view[data-view="gen"]:not(.cycle-live) > .hero .hero-name {
  background: none;
  color: var(--text);
  -webkit-text-fill-color: var(--text);
  filter: none;
}
[data-theme="light"] .view[data-view="gen"]:not(.cycle-live) > .hero .hero-state {
  border-color: var(--line);
  background: var(--bg-soft);
}
[data-theme="light"] .view[data-view="gen"]:not(.cycle-live) > .hero .hero-state strong,
[data-theme="light"] .view[data-view="gen"]:not(.cycle-live) > .hero .hero-detail,
[data-theme="light"] .view[data-view="gen"]:not(.cycle-live) > .hero .chip,
[data-theme="light"] .view[data-view="gen"]:not(.cycle-live) > .hero .chip b {
  color: inherit;
}
[data-theme="light"] .view[data-view="gen"]:not(.cycle-live) > .hero .hero-detail { color: var(--text-2); }
[data-theme="light"] .view[data-view="gen"]:not(.cycle-live) > .hero .chip { color: var(--text-3); }
[data-theme="light"] .view[data-view="gen"]:not(.cycle-live) > .hero .chip b { color: var(--text); }

/* ══════════════════════════ views ══════════════════════════ */
.views {
  flex: 1;
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 20px var(--page-pad) 40px;
  display: flex;
  flex-direction: column;
}
.view { display: none; flex-direction: column; gap: 14px; }
.view.is-active { display: flex; }

/* Seat homepage: cinematic hero, then the two protagonists (book + voice)
   side by side. Tape, actions and the thought stream take the full width so
   a short card never leaves a black hole beside a long one. Observatory
   pairs stay on independent rails. */
.view[data-view="gen"].is-active {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.view[data-view="gen"] .gen-now,
.view[data-view="gen"] .gen-cols {
  display: grid;
  gap: 16px;
  align-items: start;
  min-width: 0;
}
.view[data-view="gen"] .gen-now {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  align-items: stretch;
}
.view[data-view="gen"] .gen-now:has(#positions-empty:not([hidden])) {
  grid-template-columns: 1fr;
}
.view[data-view="gen"] .gen-now:has(#positions-empty:not([hidden])) #card-positions {
  padding-top: 14px;
  padding-bottom: 14px;
}
.view[data-view="gen"] .panel-title p:not(#pulse-sub) { display: none; }
.view[data-view="gen"] .gen-cols {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.view[data-view="gen"] .gen-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  height: 100%;
}
.view[data-view="gen"] .gen-col > .panel { flex: 1; }
.view[data-view="gen"] > .hero,
.view[data-view="gen"] .panel {
  margin: 0;
  min-width: 0;
  container-type: inline-size;
}
.view[data-view="gen"] .panel {
  padding: 18px 20px;
  border-radius: 16px;
  box-shadow: var(--elevate);
}
.view[data-view="gen"] .panel-title h2 {
  font-size: 16.5px;
}
.view[data-view="gen"] .panel-eyebrow {
  letter-spacing: .14em;
}
.view[data-view="gen"] .panel-eyebrow::after { display: none; }

/* The observatory band: a masthead rule that splits the seat view into the
   "now" story above (positions, view, actions, tape, thinking) and the
   supporting observability below (alerts, memory, briefings, coverage,
   health). It is a full-width flex child of the view. */
.view[data-view="gen"] > .band-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 10px 0 0;
  min-width: 0;
}
.view[data-view="gen"] > .band-head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line-soft);
  transform: translateY(-3px);
}
.band-kicker {
  color: var(--gen);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .15em;
  white-space: nowrap;
}
.band-note {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text-3);
  font-size: 10.5px;
}

/* Observatory recedes but still sits on a real surface — dissolving into
   the void read as unfinished, not quiet. */
.view[data-view="gen"] .panel-quiet {
  padding: 16px 18px;
  border-color: var(--line-soft);
  background: var(--panel);
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  box-shadow: none;
}
.view[data-view="gen"] .panel-quiet .panel-head {
  border-bottom: 0;
  padding-bottom: 2px;
}
.view[data-view="gen"] .panel-quiet .panel-title h2 {
  font-size: 14px;
  color: var(--text);
}
.view[data-view="gen"] .panel-quiet .panel-eyebrow {
  margin-bottom: 1px;
}

/* Half-width panels must not push the PnL column out of scroll reach:
   when the execution tape is narrow, the source column yields first. */
@container (max-width: 680px) {
  #card-execution-preview .execution-feed-table th:nth-child(4),
  #card-execution-preview .execution-feed-table td:nth-child(4) { display: none; }

  /* A half-width panel head stacks title above tools instead of crushing
     the eyebrow into three wrapped lines. */
  .view[data-view="gen"] .panel .panel-head { flex-direction: column; align-items: stretch; }
  .view[data-view="gen"] .panel .panel-title p { display: none; }
  .view[data-view="gen"] .panel .panel-head > .tag,
  .view[data-view="gen"] .panel .panel-head > .meta,
  .view[data-view="gen"] .panel .panel-head > .seg { align-self: flex-start; }
  .view[data-view="gen"] .panel .panel-tools { width: 100%; justify-content: flex-start; }
}

/* Entering a view (or first paint) lifts each block in with a short stagger. */
@keyframes riseIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.view.is-active > * { animation: riseIn .5s cubic-bezier(.22, .68, .32, 1) both; }
.view.is-active > *:nth-child(2) { animation-delay: .05s; }
.view.is-active > *:nth-child(3) { animation-delay: .1s; }
.view.is-active > *:nth-child(4) { animation-delay: .15s; }
.view.is-active > *:nth-child(5) { animation-delay: .2s; }
.view.is-active > *:nth-child(6) { animation-delay: .25s; }
.view.is-active > *:nth-child(7) { animation-delay: .3s; }
.view.is-active > *:nth-child(8) { animation-delay: .35s; }
.view.is-active > *:nth-child(9) { animation-delay: .4s; }
.view.is-active > *:nth-child(n+10) { animation-delay: .45s; }
/* Cards nested inside the seat view's rails rise with a short in-rail stagger
   so the two columns don't land as one monolithic block. */
.view[data-view="gen"].is-active .gen-col > * { animation: riseIn .5s cubic-bezier(.22, .68, .32, 1) both; }
.view[data-view="gen"].is-active .gen-col > *:nth-child(2) { animation-delay: .08s; }

.split-detail { display: grid; grid-template-columns: 300px 1fr; gap: var(--s5); align-items: start; }

/* ─────────────── panel ─────────────── */
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}
.panel-flush { padding: var(--s4) 0 var(--s3); gap: var(--s3); }
.panel-flush .panel-head { padding: 0 var(--s4) 10px; }
.panel-sticky { position: sticky; top: calc(var(--topbar-h) + var(--s5)); }
.panel-detail { min-height: 520px; }

.panel-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  justify-content: space-between;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line-soft);
}
.panel-title { min-width: 0; }
.panel-title h2 { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; }
.panel-title p { font-size: 11px; color: var(--text-3); margin-top: 2px; line-height: 1.5; }
/* The eyebrow is a masthead line: index number, label, then a hairline that
   runs out to the edge of the title column — every panel reads like an
   indexed section of one instrument. */
.panel-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
  color: var(--gen);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  white-space: nowrap;
}
.panel-eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  min-width: 12px;
  background: linear-gradient(90deg, var(--line-strong), transparent 88%);
}
.panel-tools { display: flex; align-items: center; gap: var(--s3); flex: none; flex-wrap: wrap; justify-content: flex-end; padding-top: 2px; }

.card-error {
  padding: var(--s3);
  border: 1px solid rgb(var(--down-rgb) / .35);
  border-radius: var(--r-sm);
  background: rgb(var(--down-rgb) / .08);
  color: var(--down);
  font-size: 12px;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 20px;
  border: 1px solid var(--gen-line);
  background: var(--gen-dim);
  color: var(--gen-bright);
  font-size: 11px;
  font-family: var(--mono);
  white-space: nowrap;
}
.tag-idle { border-color: var(--line); background: var(--panel-2); color: var(--text-3); }
.tag-warn { border-color: rgb(var(--warn-rgb) / .4); background: rgb(var(--warn-rgb) / .1); color: var(--warn); }
.tag-bad  { border-color: rgb(var(--down-rgb) / .4); background: rgb(var(--down-rgb) / .1); color: var(--down); }

.seg { display: inline-flex; padding: 2px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-soft); }
.seg-btn {
  border: 0;
  background: transparent;
  color: var(--text-3);
  padding: 3px 9px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.seg-btn:hover { color: var(--text); background: var(--hover); }
.seg-btn.is-active {
  background: rgb(var(--gen-rgb) / .13);
  color: var(--gen-bright);
  box-shadow: inset 0 0 0 1px rgb(var(--gen-rgb) / .26);
}
.seg-btn.is-active:hover { background: rgb(var(--gen-rgb) / .13); }
.seg-btn:active { transform: scale(.94); }

/* ══════════════════════════ hero ══════════════════════════ */
.hero {
  position: relative;
  display: block;
  min-height: 208px;
  padding: 26px 30px 24px;
  border: 1px solid rgb(var(--gen-rgb) / .26);
  border-radius: 20px;
  overflow: hidden;
  background: var(--hero-bg);
  box-shadow: var(--elevate), 0 0 64px rgb(var(--gen-rgb) / .12);
  color: #eef4fa;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 2%,
    rgb(var(--gen-rgb) / .55) 22%,
    var(--gen) 42%,
    rgb(var(--cyan-rgb) / .68) 66%,
    transparent 96%);
  opacity: .85;
  pointer-events: none;
}
.hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(90deg, var(--hero-bg) 4%, rgb(var(--hero-bg-rgb) / .9) 26%, rgb(var(--hero-bg-rgb) / .4) 48%, rgb(var(--hero-bg-rgb) / .05) 72%),
    url("/static/gen/hero.jpg?v=20260813.1");
  background-size: cover, cover;
  background-position: center, 94% 18%;
  opacity: .92;
  filter: saturate(.95) brightness(1.02);
  transition: opacity 1.2s ease;
}
.hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .35;
  background:
    linear-gradient(rgba(151, 203, 255, .04) 1px, transparent 1px) 0 0 / 100% 48px,
    linear-gradient(90deg, rgba(151, 203, 255, .04) 1px, transparent 1px) 0 0 / 48px 100%;
}
.hero-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgb(var(--hero-bg-rgb) / .08), transparent 28%, rgb(var(--hero-bg-rgb) / .55) 100%),
    radial-gradient(520px 220px at 18% 80%, rgb(var(--gen-rgb) / .12), transparent 70%);
}
.hero:has(.hero-state.is-busy) .hero-art { opacity: 1; }
.hero::after {
  content: "";
  position: absolute;
  inset: -45%;
  z-index: 1;
  background:
    radial-gradient(circle at 28% 40%, rgb(var(--gen-rgb) / .12), transparent 34%),
    radial-gradient(circle at 78% 62%, rgb(var(--cyan-rgb) / .08), transparent 38%);
  animation: heroDrift 14s ease-in-out infinite alternate;
  pointer-events: none;
}
.hero-body {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 22px 26px;
  min-height: 156px;
}
@keyframes heroDrift {
  from { transform: translate(-2.5%, -1.5%) scale(1); }
  to   { transform: translate(2.5%, 2%) scale(1.06); }
}

.portrait-hero { width: 88px; height: 88px; }
.portrait-hero img { width: 88px; height: 88px; }
.portrait-hero .portrait-ring { inset: -5px; }
.portrait-hero .portrait-dot { width: 14px; height: 14px; right: 2px; bottom: 2px; }
.portrait-hero::after {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 1px solid rgb(var(--gen-rgb) / .2);
  pointer-events: none;
}

.hero-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero-kicker {
  margin: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gen);
}
.hero-title-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-name {
  font-size: 36px;
  line-height: .95;
  letter-spacing: .18em;
  font-weight: 700;
  background: linear-gradient(94deg, #f2fbf7 26%, #c9f4e2 68%, #9fe9d2 96%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 18px rgb(var(--gen-rgb) / .28));
}
.hero-role {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: .12em;
  color: #8fa6bc;
  padding-left: 14px;
  border-left: 1px solid rgba(147, 169, 191, .32);
  white-space: nowrap;
}
.hero-role::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gen);
  box-shadow: 0 0 8px rgb(var(--gen-rgb) / .6);
  flex: none;
}

/* His current phase reads as one sentence inside a glass capsule: the hero's
   single status object, quiet at rest, lit while he works. */
.hero-state {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  align-self: flex-start;
  min-width: 0;
  max-width: 100%;
  padding: 6px 12px;
  border: 1px solid rgba(51, 70, 92, .55);
  border-radius: 999px;
  background: rgba(8, 14, 21, .62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.hero-state .wave { flex: none; }
.hero-state strong {
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  color: #eef4fa;
  transition: color .3s ease, text-shadow .3s ease;
}
.hero-state.is-busy {
  border-color: rgb(var(--gen-rgb) / .45);
  background: rgb(var(--gen-rgb) / .08);
  box-shadow: 0 0 26px rgb(var(--gen-rgb) / .14);
}
.hero-state.is-busy strong {
  color: #7ff0cb;
  text-shadow: 0 0 16px rgb(var(--gen-rgb) / .4);
}
.hero-state-sep {
  flex: none;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #76899f;
}
.hero-detail {
  overflow: hidden;
  color: #a6b9cd;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* While a decision cycle runs, the hero yields the stage: it collapses with a
   short animation and the live "研究与思考" panel takes the top slot (the JS
   moves #card-pulse before #hero for the duration of the cycle). */
.view[data-view="gen"] > .hero {
  max-height: 360px;
  transition: max-height .5s cubic-bezier(.22, .68, .32, 1),
              min-height .5s cubic-bezier(.22, .68, .32, 1),
              padding .5s cubic-bezier(.22, .68, .32, 1),
              margin-bottom .5s cubic-bezier(.22, .68, .32, 1),
              border-width .5s cubic-bezier(.22, .68, .32, 1),
              opacity .35s ease,
              transform .5s cubic-bezier(.22, .68, .32, 1);
}
.view[data-view="gen"].cycle-live > .hero {
  max-height: 0;
  min-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  border-width: 0;
  opacity: 0;
  transform: translateY(-14px);
}
.view[data-view="gen"].cycle-live > .hero .hero-body { min-height: 0; }
.view[data-view="gen"] > #card-pulse {
  transition: border-color .5s ease, box-shadow .5s ease;
  /* The pulse is one of only two surfaces allowed to glow (the hero strip
     is the other); every other panel stays flat so hierarchy reads at a glance. */
  box-shadow: var(--elevate);
}
.view[data-view="gen"].cycle-live > #card-pulse {
  border-color: rgb(var(--gen-rgb) / .38);
  box-shadow: var(--elevate), 0 0 36px rgb(var(--gen-rgb) / .12);
}
/* First paint during an active cycle promotes the panel without motion, so
   the entrance stagger never fights the collapse. */
.view[data-view="gen"].no-motion > *,
.view[data-view="gen"].no-motion .gen-col > * {
  animation: none !important;
  transition: none !important;
}

/* Idle hero is a compact identity strip so the first screen is the book
   and the voice, not the cinematic artwork. Cycle-live still collapses it. */
.view[data-view="gen"]:not(.cycle-live) > .hero {
  min-height: 0;
  padding: 14px 18px 12px;
  border-radius: 16px;
}
.view[data-view="gen"]:not(.cycle-live) > .hero .hero-body {
  min-height: 0;
  gap: 14px 16px;
}
.view[data-view="gen"]:not(.cycle-live) > .hero .hero-kicker,
.view[data-view="gen"]:not(.cycle-live) > .hero .hero-role { display: none; }
.view[data-view="gen"]:not(.cycle-live) > .hero .hero-name {
  font-size: 22px;
  letter-spacing: .12em;
}
.view[data-view="gen"]:not(.cycle-live) > .hero .portrait-hero,
.view[data-view="gen"]:not(.cycle-live) > .hero .portrait-hero img {
  width: 52px;
  height: 52px;
}
.view[data-view="gen"]:not(.cycle-live) > .hero .hero-art,
.view[data-view="gen"]:not(.cycle-live) > .hero .hero-veil,
.view[data-view="gen"]:not(.cycle-live) > .hero::after {
  opacity: .35;
}
.view[data-view="gen"]:not(.cycle-live) > .hero .hero-meta { margin-top: 0; }
.view[data-view="gen"]:not(.cycle-live) > .hero .chip {
  min-width: 0;
  max-width: 100%;
  padding: 5px 9px;
  white-space: normal;
}
.view[data-view="gen"]:not(.cycle-live) > .hero .chip b { font-size: 13px; }

/* ═══════════════════════ open positions ═══════════════════════ */
/* auto-fit (not auto-fill) collapses empty tracks, so a single position gets
   a full-width card instead of a narrow card beside invisible grid slots. */
.positions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 12px;
}
.position-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 15px 13px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--line-strong);
  border-radius: 14px;
  background: var(--bg-soft);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.position-card:hover {
  transform: translateY(-2px);
  border-color: var(--line-strong);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
}
.position-card.is-long { border-left-color: var(--side-long); }
.position-card.is-short { border-left-color: var(--side-short); }
.position-card.is-focused,
.resting-row.is-focused {
  outline: 1px solid rgb(var(--gen-rgb) / .55);
  box-shadow: 0 0 0 4px rgb(var(--gen-rgb) / .12);
}
.position-symbol-link {
  color: inherit;
  text-decoration: none;
}
.position-symbol-link:hover { color: var(--gen); text-decoration: underline; }
.lev-badge {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--text-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
}
.position-plan {
  font-size: 11px;
  color: var(--text-2);
  padding: 6px 8px;
  border-radius: 8px;
  background: rgb(var(--info-rgb) / .08);
  border: 1px solid rgb(var(--info-rgb) / .22);
}
.position-plan.is-active {
  color: var(--gen-bright);
  background: rgb(var(--gen-rgb) / .08);
  border-color: var(--gen-line);
}
.position-plan.is-submitted { color: var(--text-3); }
.positions-stop.is-crossed { color: var(--down); }
.positions-stop em, .positions-target em {
  font-style: normal;
  color: inherit;
  opacity: .85;
}
/* Money states tint the card itself — a book of green or red is readable
   from across the room before any number is. */
.position-card.is-up {
  background: linear-gradient(150deg, rgb(var(--up-rgb) / .07), transparent 58%), var(--bg-soft);
}
.position-card.is-down {
  background: linear-gradient(150deg, rgb(var(--down-rgb) / .07), transparent 58%), var(--bg-soft);
}
.position-card-head { display: flex; align-items: center; gap: var(--s2); }
.position-card-head .sym { font-size: 15.5px; letter-spacing: .02em; font-weight: 700; }
.panel-voice .voice { min-height: 0; overflow: auto; }
.position-card-pnl { margin-left: auto; font-size: 23px; letter-spacing: -.02em; }
.position-card-price {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  color: var(--text-2);
  font-size: 11.5px;
}
.position-card-stats,
.position-card-protection {
  display: flex;
  gap: var(--s3);
  font-size: 10.5px;
}
.position-card-stats { color: var(--text-3); }
.positions-stop { color: var(--down-soft); }
.positions-target { color: var(--up); }
.position-card-share { display: flex; align-items: center; gap: var(--s2); }
.positions-share-bar {
  flex: 1;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.positions-share-bar i { display: block; height: 100%; background: rgb(var(--info-rgb) / .55); }
.position-card-share > .num { color: var(--text-3); font-size: 10px; }
#positions-empty {
  margin: 0;
  padding: 6px 0 2px;
  text-align: left;
  border: 0;
  background: transparent;
}
#card-positions:has(#positions-empty:not([hidden])) {
  padding-bottom: 18px;
}

/* Where the mark sits between stop and target: a glanceable risk compass.
   Markers are positioned from JS via CSSOM left% writes (CSP-safe). */
.position-range {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: 2px;
}
.position-range-label {
  flex: none;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-3);
}
.position-range-label.is-stop { color: var(--down-soft); }
.position-range-label.is-target { color: var(--up); }
.position-range-track {
  position: relative;
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, rgb(var(--down-rgb) / .3), var(--line) 30%, var(--line) 70%, rgb(var(--up-rgb) / .3));
}
.position-range.is-short .position-range-track {
  background: linear-gradient(90deg, rgb(var(--up-rgb) / .3), var(--line) 30%, var(--line) 70%, rgb(var(--down-rgb) / .3));
}
.position-range-track i {
  position: absolute;
  top: 50%;
  translate: -50% -50%;
  border-radius: 50%;
}
.position-range-entry {
  width: 4px;
  height: 4px;
  background: var(--text-3);
}
.position-range-mark {
  width: 7px;
  height: 7px;
  background: var(--gen-bright);
  box-shadow: 0 0 8px rgb(var(--gen-rgb) / .75);
  animation: rangeMarkPulse 2.2s ease-in-out infinite;
}
@keyframes rangeMarkPulse {
  0%, 100% { scale: 1; }
  50%      { scale: 1.35; }
}

/* Meta closes the status strip on the right: cadence chips behind a
   hairline, right-aligned so the strip reads identity → phase → rhythm. */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-content: center;
  gap: 8px;
  margin: 2px 0 0;
  padding: 0;
  border: 0;
}
.hero .chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 88px;
  padding: 7px 11px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: rgba(4, 8, 12, .46);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 10px;
  letter-spacing: .08em;
  color: #8fa6bc;
  white-space: nowrap;
}
.hero .chip:first-child { padding-left: 11px; border-left: 1px solid rgba(255, 255, 255, .08); }
.hero .chip b {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.02em;
  color: #eef4fa;
  font-variant-numeric: tabular-nums;
}

/* ══════════════════════════ GEN's voice ══════════════════════════ */
.outlook-symbols {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 4px;
}
.outlook-chip {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--text-2);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 9px;
  cursor: pointer;
}
.outlook-chip:hover { color: var(--text); border-color: var(--line-strong); }
.outlook-chip.is-held {
  color: var(--gen-bright);
  border-color: var(--gen-line);
  background: rgb(var(--gen-rgb) / .08);
}
.outlook-chip.is-resting {
  color: var(--cyan);
  border-color: rgb(var(--cyan-rgb) / .35);
}
.panel-voice {
  position: relative;
  overflow: hidden;
  min-height: 0;
  border-color: var(--gen-line);
  background:
    radial-gradient(420px 180px at 100% 0%, rgb(var(--gen-rgb) / .1), transparent 58%),
    linear-gradient(180deg, rgb(var(--gen-rgb) / .05), transparent 72%),
    var(--panel);
}
.panel-voice::before {
  content: "\201C";
  position: absolute;
  top: -18px;
  right: 14px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 132px;
  line-height: 1;
  color: rgb(var(--gen-rgb) / .1);
  pointer-events: none;
}
.voice { display: flex; gap: var(--s4); align-items: flex-start; }
.voice-avatar { flex: none; }
.voice-avatar img {
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 28%;
  border: 1px solid var(--gen-line);
  display: block;
}
.voice-text {
  font-size: 15px;
  line-height: 1.78;
  color: var(--text);
  letter-spacing: .005em;
}
.voice-text.is-clamped {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 6;
  overflow: hidden;
}
.voice-actions { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }

/* ═══════════════════════ seat · information sources ═══════════════════════ */
.panel-sources {
  gap: 12px;
}
.sources-desk {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.source-channel {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--bg-soft);
}
.source-channel.is-used {
  border-color: var(--gen-line);
  background: rgb(var(--gen-rgb) / .06);
}
.source-channel-head {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.source-channel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
  background: var(--gen);
}
.source-channel.is-warn .source-channel-dot { background: var(--warn); }
.source-channel.is-down .source-channel-dot { background: var(--down); }
.source-channel.is-off .source-channel-dot,
.source-channel.is-unknown .source-channel-dot { background: var(--text-3); }
.source-channel-head strong {
  font-size: 13px;
  letter-spacing: .01em;
}
.source-channel-flag {
  margin-left: auto;
  flex: none;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gen-bright);
  background: rgb(var(--gen-rgb) / .12);
  border-radius: 999px;
  padding: 1px 7px;
}
.source-channel-provider {
  color: var(--text-3);
  font-size: 10.5px;
  letter-spacing: .02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.source-channel-note {
  color: var(--text-2);
  font-size: 11.5px;
  line-height: 1.4;
}
.sources-evidence {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.sources-block { display: flex; flex-direction: column; gap: 6px; }
.sources-block-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--text-3);
}
.sources-cites { display: flex; flex-direction: column; gap: 5px; }
.source-cite {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-2);
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: var(--bg-soft);
}
.source-cite a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgb(var(--gen-rgb) / .55);
  text-underline-offset: 3px;
}
.source-cite a:hover { color: var(--gen-bright); }
.source-gap {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-2);
  padding: 8px 10px;
  border: 1px solid rgb(var(--warn-rgb) / .28);
  border-radius: 10px;
  background: rgb(var(--warn-rgb) / .08);
}
@container (max-width: 720px) {
  .sources-desk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.resting-list { display: flex; flex-direction: column; gap: 10px; }
.resting-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--cyan);
  border-radius: 12px;
  background: var(--bg-soft);
}
.resting-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.resting-head .sym { font-size: 14.5px; }
.resting-age { margin-left: auto; color: var(--text-2); font-size: 12px; }
.resting-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  color: var(--text-3);
  font-size: 12px;
  font-family: var(--mono);
}
.resting-verdict {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: 999px;
  padding: 1px 8px;
  border: 1px solid var(--line);
  color: var(--text-2);
}
.resting-verdict.is-keep { color: var(--gen); border-color: var(--gen-line); }
.resting-row.is-missed,
.resting-row.is-unmanaged { border-left-color: var(--warn); }
.resting-verdict.is-missed,
.resting-verdict.is-unmanaged { color: var(--warn); border-color: rgb(var(--warn-rgb) / .45); }
.resting-verdict.is-cancel,
.resting-verdict.is-replace { color: var(--down-soft); border-color: rgb(var(--down-rgb) / .35); }
.resting-thesis {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.resting-row.is-open .resting-thesis {
  display: block;
  -webkit-line-clamp: unset;
}
.resting-intent { display: none; }
.resting-row.is-open .resting-intent {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.6;
}
.resting-intent p { margin: 0; }
.resting-intent-label {
  display: block;
  margin-bottom: 4px;
  color: var(--text-3);
  font-size: 10.5px;
  letter-spacing: .06em;
}
.resting-cancels {
  margin: 0;
  padding-left: 18px;
}
.resting-review-reason { color: var(--text-3); }
.resting-missing {
  margin: 0;
  font-size: 12px;
  color: var(--warn);
}
.resting-toggle { align-self: flex-start; }

.pulse-idle-line {
  margin: 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
}
#card-pulse.is-idle-compact {
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 10px;
}
#card-pulse.is-idle-compact .panel-head {
  padding-bottom: 6px;
}
#card-pulse.is-recap #pulse-status { display: none; }
#pulse-sub:empty { display: none; }
.cycle-recap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.recap-line {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.recap-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text);
}
.recap-intents {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: 4px;
  border-top: 1px solid var(--line-soft);
}
.recap-toggle { align-self: flex-start; }
.view[data-view="gen"].has-symbol-focus [data-seat-symbol].is-dim {
  opacity: .38;
  transition: opacity .18s ease;
}
.view[data-view="gen"].has-symbol-focus [data-seat-symbol].is-focused {
  opacity: 1;
}
.outlook-chip.is-focused {
  color: var(--text);
  border-color: var(--gen);
  background: rgb(var(--gen-rgb) / .14);
}

.panel-desk { padding: 12px 16px; gap: 12px; }
.duty-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  margin: 0;
  padding: 4px 2px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}
.duty-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.duty-item:nth-child(2) { flex: 1; }
.duty-kicker {
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
}
.duty-item strong {
  overflow: hidden;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.duty-item.is-warn strong { color: var(--warn); }
.duty-item.is-bad strong { color: var(--down); }
.duty-caret {
  margin-left: auto;
  color: var(--text-3);
  transition: transform .18s ease;
}
.duty-bar.is-open .duty-caret { transform: rotate(90deg); }
.duty-bar.is-warn { box-shadow: inset 3px 0 0 var(--warn); padding-left: 10px; }
.duty-bar.is-bad { box-shadow: inset 3px 0 0 var(--down); padding-left: 10px; }
.alert-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: var(--text-3);
  font-size: 11.5px;
}
.alert-row.is-near { box-shadow: inset 3px 0 0 var(--warn); padding-left: 8px; }
.alert-row.is-near .alert-cond,
.num.warn { color: var(--warn); }
.alert-row.is-crossed { box-shadow: inset 3px 0 0 var(--down); padding-left: 8px; }
.desk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, .9fr);
  gap: 18px 22px;
  align-items: start;
}
.desk-grid:has(#card-health[hidden]) {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
}
.desk-col { min-width: 0; }
.desk-col-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
#card-alerts .observability-list {
  max-height: 200px;
  overflow-y: auto;
  padding-right: 4px;
}
#card-alerts .observation-note {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.desk-col-head h2 { font-size: 14.5px; }
.desk-notes .observation-note {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  overflow: hidden;
}
.desk-notes.is-open .observation-note {
  display: block;
  -webkit-line-clamp: unset;
}
.desk-health.is-bad .health-copy strong { color: var(--down); }
.observation-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
}
/* Price alerts read "TICKER ≥ price" as one identity cluster, note below. */
.alert-row { cursor: pointer; }
.alert-row .observation-head { justify-content: flex-start; gap: var(--s2); }
.position-card { cursor: pointer; }
.resting-row { cursor: pointer; }
.alert-cond {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg);
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 10.5px;
  white-space: nowrap;
}
.observation-identity {
  display: flex;
  align-items: center;
  gap: var(--s2);
  min-width: 0;
  flex-wrap: wrap;
}
.entity-symbol { color: var(--text); font-family: var(--mono); font-size: 13px; }

/* ═══════════════════════ seat · live work journal ═══════════════════════ */
.activity-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg-soft);
  color: var(--text-3);
  font-family: var(--mono);
  font-size: 10px;
  white-space: nowrap;
}
.activity-state i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-3);
}
.activity-state.is-live {
  border-color: var(--gen-line);
  background: var(--gen-dim);
  color: var(--gen-bright);
}
.activity-state.is-live i {
  background: var(--gen);
  box-shadow: 0 0 9px rgb(var(--gen-rgb) / .65);
  animation: blink 1.4s ease-in-out infinite;
}

.pulse-body { display: flex; flex-direction: column; gap: 14px; }
.pulse-progress {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 11px 13px;
  border: 1px solid var(--gen-line);
  border-radius: var(--r-md);
  background: rgb(var(--gen-rgb) / .05);
}
.pulse-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3);
  color: var(--text-2);
  font-size: 11.5px;
}
.pulse-progress-head strong { color: var(--gen-bright); font-size: 14px; }
.pulse-progress-track {
  height: 4px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}
.pulse-progress-track i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, rgb(var(--gen-rgb) / .55), rgb(var(--gen-rgb) / .85));
  transition: width .9s ease;
}
.pulse-progress-foot {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  color: var(--text-3);
  font-size: 10px;
}
.pulse-progress-steps { display: flex; flex-wrap: wrap; gap: 4px; }
.pulse-progress-steps span {
  padding: 1px 7px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  color: var(--text-3);
  font-size: 9.5px;
}
.pulse-progress-steps span.is-done { color: var(--gen); border-color: var(--gen-line); }
.pulse-progress-steps span.is-active {
  color: var(--gen-bright);
  border-color: var(--gen);
  background: var(--gen-dim);
}
.pulse-now {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  padding: 11px;
  border: 1px solid var(--gen-line);
  border-radius: var(--r-md);
  background:
    linear-gradient(135deg, rgb(var(--gen-rgb) / .095), transparent 62%),
    var(--bg-soft);
  box-shadow: inset 3px 0 0 rgb(var(--gen-rgb) / .5);
}
.pulse-now-avatar { flex: none; }
.pulse-now-avatar img {
  display: block;
  width: 36px;
  height: 36px;
  border: 1px solid var(--gen-line);
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 28%;
}
.pulse-now-copy { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pulse-now-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--gen-bright);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gen);
  box-shadow: 0 0 8px rgb(var(--gen-rgb) / .7);
  animation: blink 1.4s ease-in-out infinite;
}
.pulse-now-text { color: var(--text); font-size: 13px; line-height: 1.7; white-space: pre-wrap; }

.pulse-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: var(--s4) var(--s3);
}
.pulse-stat {
  display: flex;
  align-items: baseline;
  gap: 7px;
  min-width: 0;
  padding: 2px 0;
}
.pulse-stat b { color: var(--text); font-family: var(--mono); font-size: 15px; }
.pulse-stat span { color: var(--text-3); font-size: 10.5px; }

.pulse-plan { display: flex; flex-direction: column; gap: var(--s2); }
.pulse-section-label {
  color: var(--text-3);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pulse-plan-list { display: flex; flex-wrap: wrap; gap: var(--s2); }
.pulse-plan-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  background: var(--bg-soft);
  color: var(--text-3);
  font-size: 11px;
}
.pulse-plan-item i { font-style: normal; color: var(--text-3); }
.pulse-plan-item.done { color: var(--text-2); }
.pulse-plan-item.done i { color: var(--gen); }
.pulse-plan-item.active { border-color: rgb(var(--warn-rgb) / .34); color: var(--text); }
.pulse-plan-item.active i { color: var(--warn); }

.pulse-log {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding-top: var(--s4);
  border-top: 1px solid var(--line-soft);
}
.pulse-log-head { display: flex; justify-content: space-between; gap: var(--s3); }
.pulse-log-head strong { color: var(--text-2); font-size: 12px; }
.pulse-log-head span { color: var(--text-3); font-family: var(--mono); font-size: 10px; }
.pulse-stream { padding-left: var(--s6); }
.pulse-stream .node { padding-top: var(--s2); padding-bottom: var(--s2); }
.pulse-stream .say-text { font-size: 13px; }
.pulse-stream .acts-label { text-transform: none; letter-spacing: .02em; }

/* An empty cycle should not occupy a tall card; collapse to a single strip. */
#card-intents:has(#intents-body > .empty-line) {
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 8px;
}
#card-intents:has(#intents-body > .empty-line) .panel-head {
  flex-direction: row;
  align-items: baseline;
  border-bottom: 0;
  padding-bottom: 0;
}
#card-intents:has(#intents-body > .empty-line) .panel-title p { display: none; }
#card-intents:has(#intents-body > .empty-line) .empty-line {
  padding: 0;
  font-size: 12.5px;
}

/* ══════════════════════════ intents ══════════════════════════ */
.intent {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: 8px 0;
  border-top: 1px solid var(--line-soft);
}
.intent:first-child { border-top: 0; padding-top: 0; }
.intent-sym {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  width: 62px;
  flex: none;
}
.intent-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.intent-head { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.intent-reason { font-size: 12px; color: var(--text-2); line-height: 1.65; }

.act {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-family: var(--mono);
  border: 1px solid transparent;
}
.act-long  { background: rgb(var(--side-long-rgb) / .14); color: var(--side-long); border-color: rgb(var(--side-long-rgb) / .34); }
.act-short { background: rgb(var(--side-short-rgb) / .14); color: var(--side-short); border-color: rgb(var(--side-short-rgb) / .34); }
.act-close { background: rgb(var(--info-rgb) / .13); color: var(--info); border-color: rgb(var(--info-rgb) / .32); }
.act-manage { background: rgb(var(--warn-rgb) / .12); color: var(--warn); border-color: rgb(var(--warn-rgb) / .32); }
.act-hold  { background: var(--panel-3); color: var(--text-3); border-color: var(--line); }

.conf { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-3); }
.conf-track { width: 56px; height: 3px; border-radius: 3px; background: var(--panel-3); overflow: hidden; }
.conf-track i { display: block; height: 100%; width: 0; background: var(--gen); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s4) var(--s3); }
.stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 2px 0;
}
.stat span { font-size: 11px; color: var(--text-3); }
.stat strong { font-size: 15px; }

.reason-line {
  display: flex;
  gap: var(--s2);
  padding: var(--s2) var(--s3);
  border: 1px solid rgb(var(--down-rgb) / .3);
  border-radius: var(--r-sm);
  background: rgb(var(--down-rgb) / .07);
  font-size: 11.5px;
  color: var(--down);
  margin-top: var(--s2);
}

/* ══════════════════════════ session list ══════════════════════════ */
.session-list { display: flex; flex-direction: column; max-height: 68vh; overflow-y: auto; }
.session {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 7px 12px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
}
.session:hover { background: var(--hover); }
.session:active { background: var(--panel-2); }
.session.is-active { background: var(--gen-dim); border-left-color: var(--gen); }
.session-top { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.session-time { font-family: var(--mono); font-size: 12px; color: var(--text); }
.session-dur { font-family: var(--mono); font-size: 10.5px; color: var(--text-3); }
.session-sum { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.pip {
  font-size: 10.5px;
  font-family: var(--mono);
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--panel-3);
  color: var(--text-3);
}
.pip.act { background: rgb(var(--gen-rgb) / .15); color: var(--gen-bright); }
.pip.bad { background: rgb(var(--down-rgb) / .14); color: var(--down); }

/* ══════════════════════════ mind ══════════════════════════ */
.mindstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: var(--s4) var(--s3); }
.mindstat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 2px 0;
}
.mindstat b { font-size: 17px; font-family: var(--mono); letter-spacing: -.02em; }
.mindstat span { font-size: 10.5px; color: var(--text-3); }
/* A zero is a fact, not a headline: keep it visible but out of the spotlight. */
.mindstat.is-zero b { color: var(--text-3); font-weight: 400; }
.pulse-stat.is-zero b { color: var(--text-3); }

.mind-pane { display: none; flex-direction: column; gap: var(--s4); }
.mind-pane.is-active { display: flex; }

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: 11px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--bg-soft);
}
.plan-title { font-size: 11px; color: var(--text-3); letter-spacing: .1em; text-transform: uppercase; }
.plan-item { display: flex; align-items: flex-start; gap: var(--s2); font-size: 12.5px; color: var(--text-2); }
.plan-mark { flex: none; width: 14px; text-align: center; color: var(--text-3); font-size: 11px; line-height: 1.6; }
.plan-item.done .plan-mark { color: var(--gen); }
.plan-item.done { color: var(--text); }
.plan-item.active .plan-mark { color: var(--warn); }

/* thought stream: a spine with GEN's words and the actions between them */
.stream { display: flex; flex-direction: column; position: relative; padding-left: var(--s6); }
.stream::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(180deg, var(--gen-line), var(--line) 40%, var(--line));
}
.node { position: relative; padding: 8px 0; }
.node::before {
  content: "";
  position: absolute;
  left: calc(var(--s6) * -1 + 4px);
  top: 20px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
  border: 2px solid var(--bg);
  box-sizing: content-box;
}
.node-say::before { background: var(--gen); box-shadow: 0 0 10px rgb(var(--gen-rgb) / .6); }
.node-verdict::before { background: var(--cyan); box-shadow: 0 0 10px rgb(var(--cyan-rgb) / .6); }

.say { display: flex; gap: var(--s3); align-items: flex-start; }
.say-avatar { flex: none; }
.say-avatar img {
  width: 30px; height: 30px;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 28%;
  border: 1px solid var(--gen-line);
  display: block;
}
.say-body {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--gen-line);
  border-radius: var(--r-md);
  border-top-left-radius: 3px;
  background: rgb(var(--gen-rgb) / .055);
  padding: 9px 12px;
}
.say-text { font-size: 12.5px; line-height: 1.75; color: var(--text); white-space: pre-wrap; }

.acts { display: flex; flex-wrap: wrap; gap: var(--s2); }
.actchip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--bg-soft);
  font-size: 11px;
  color: var(--text-2);
}
.actchip svg { width: 12px; height: 12px; flex: none; color: var(--text-3); }
.actchip b { font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.actchip em { font-style: normal; font-family: var(--mono); font-size: 10px; color: var(--text-3); }
.actchip.k-read svg { color: var(--info); }
.actchip.k-command { border-style: dashed; }
.actchip.k-command svg { color: var(--warn); }
.actchip.k-tool { border-color: var(--gen-line); background: rgb(var(--gen-rgb) / .07); }
.actchip.k-tool svg { color: var(--gen); }
.actchip.k-web { border-color: rgb(var(--cyan-rgb) / .32); background: rgb(var(--cyan-rgb) / .07); }
.actchip.k-web svg { color: var(--cyan); }
.actchip.is-failed { border-color: rgb(var(--down-rgb) / .35); }
.actchip.is-failed svg { color: var(--down); }
.actchip.is-running {
  border-color: var(--gen-line);
  background: rgb(var(--gen-rgb) / .07);
}
.actchip.is-running em { color: var(--gen-bright); }
.actchip.k-more { border-style: dashed; color: var(--text-3); }

.acts-label {
  font-size: 10.5px;
  color: var(--text-3);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.divider-note {
  font-size: 11px;
  color: var(--text-3);
  font-style: italic;
  padding: var(--s2) 0;
}

.audit-group { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s5); }
.audit-title { font-size: 12px; color: var(--text-2); font-weight: 600; }
.audit-list { display: flex; flex-direction: column; gap: 4px; }
.audit-item {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-3);
  padding: 5px var(--s3);
  border-radius: var(--r-sm);
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  overflow-wrap: anywhere;
}
.audit-item.gap { border-color: rgb(var(--warn-rgb) / .34); background: rgb(var(--warn-rgb) / .07); color: var(--warn); font-family: var(--sans); font-size: 12px; line-height: 1.7; }

/* ═══════════════════════ execution chain ═══════════════════════ */
.execution-chain { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s3); }
.execution-chain-step {
  position: relative;
  padding: var(--s4);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-soft);
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: transform .18s ease, border-color .18s ease;
}
.execution-chain-step:hover { transform: translateY(-2px); }
.execution-chain-step + .execution-chain-step::before {
  content: "";
  position: absolute;
  left: calc(var(--s3) * -1 - 1px);
  top: 50%;
  width: var(--s3);
  height: 1px;
  background: var(--line-strong);
}
.execution-chain-step b { font-size: 22px; font-family: var(--mono); letter-spacing: -.02em; }
.execution-chain-step span { font-size: 11.5px; color: var(--text-2); }
.execution-chain-step em { font-style: normal; font-size: 10.5px; color: var(--text-3); }
.execution-chain-step.is-final { border-color: var(--gen-line); background: rgb(var(--gen-rgb) / .06); }
.execution-chain-step.is-final b { color: var(--gen-bright); }
.execution-chain-step.has-warnings { border-color: rgb(var(--warn-rgb) / .35); background: rgb(var(--warn-rgb) / .06); }
.execution-chain-step.has-warnings b { color: var(--warn); }
.execution-chain-step.has-errors { border-color: rgb(var(--down-rgb) / .35); background: rgb(var(--down-rgb) / .06); }
.execution-chain-step.has-errors b { color: var(--down); }

/* ══════════════════════════ cards / calls ══════════════════════════ */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s3); }
.call {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-soft);
  transition: transform .18s ease, border-color .18s ease;
}
.call:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.call.is-acted { border-color: var(--gen-line); }
.call-head { display: flex; align-items: center; gap: var(--s2); justify-content: space-between; }
.call-sym { font-family: var(--mono); font-size: 14px; font-weight: 600; }
.call-reason { font-size: 12.5px; color: var(--text-2); line-height: 1.7; }
.call-foot { display: flex; gap: var(--s3); flex-wrap: wrap; font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.call-foot > span { min-width: 0; }
.call-foot b { color: var(--text-2); font-weight: 500; overflow-wrap: anywhere; }

/* latest cycle: model output + structural validation */
.observability-list { display: flex; flex-direction: column; gap: var(--s3); }
/* List rows that used to be boxed cards now read as ledger lines: a hairline
   between entries, air everywhere else. */
.observation {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: 0 0 9px;
  border-bottom: 1px solid var(--line-soft);
}
.observation:last-child { border-bottom: 0; padding-bottom: 0; }
.observation.is-active { border-bottom-color: var(--gen-line); }
.observation.is-danger, .validation-error {
  padding: var(--s2) var(--s3);
  border: 1px solid rgb(var(--down-rgb) / .32);
  border-radius: var(--r-sm);
  background: rgb(var(--down-rgb) / .055);
}
.observation-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
  gap: var(--s3);
}
.observation-note {
  color: var(--text-2);
  font-size: 11.5px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.observation-code {
  display: inline-flex;
  margin-left: var(--s2);
  color: var(--text-3);
  font-size: 9.5px;
}

/* ══════════════════════════ coverage universe ══════════════════════════ */
.symbols { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: var(--s2); }
.symbol {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--bg-soft);
  text-decoration: none;
  transition: border-color .15s, background .15s, transform .15s ease;
}
.symbol:hover { border-color: var(--gen-line); background: var(--hover); transform: translateY(-2px); }
.symbol:active { transform: translateY(0) scale(.97); }
.symbol.is-held { border-color: var(--gen-line); background: rgb(var(--gen-rgb) / .06); }
.symbol-top { display: flex; align-items: center; gap: var(--s2); justify-content: space-between; }
.symbol-name { font-family: var(--mono); font-size: 12.5px; font-weight: 600; }
.symbol-flag {
  font-size: 9.5px;
  padding: 0 5px;
  border-radius: 3px;
  background: rgb(var(--gen-rgb) / .18);
  color: var(--gen-bright);
}
.symbol-price { font-size: 13px; }
.symbol-change { font-size: 11px; color: var(--text-3); }

/* ═════════════════════ health + cycle briefings ═════════════════════ */
.health-list { display: flex; flex-direction: column; }
.health-check {
  display: grid;
  grid-template-columns: 8px 1fr;
  gap: var(--s3);
  align-items: start;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
}
.health-check:last-child { border-bottom: 0; padding-bottom: 0; }
.health-check:first-child { padding-top: 0; }
.health-dot { width: 8px; height: 8px; margin-top: 4px; border-radius: 50%; background: var(--gen); }
.health-check.warning .health-dot { background: var(--warn); }
.health-check.critical .health-dot { background: var(--down); }
.health-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.health-copy strong { font-size: 12px; }
.health-copy span { font-size: 11.5px; color: var(--text-3); line-height: 1.55; }

.briefing-layout { display: grid; grid-template-columns: 170px 1fr; gap: var(--s3); min-height: 300px; }
/* Narrow briefing panels (small windows) stack list above content instead
   of squeezing two panes; in the seat grid the panel owns the wide rail. */
@container (max-width: 680px) {
  .briefing-layout { grid-template-columns: 1fr; min-height: 0; }
  .briefing-list { max-height: 150px; }
}
.briefing-list { display: flex; flex-direction: column; gap: 3px; max-height: 280px; overflow-y: auto; }
.briefing-btn {
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-2);
  padding: 5px 8px;
  text-align: left;
  font-family: var(--mono);
  font-size: 10.5px;
  cursor: pointer;
}
.briefing-btn:hover { background: var(--hover); color: var(--text); }
.briefing-btn:active { background: var(--panel-2); }
.briefing-btn.is-active { border-color: var(--gen-line); background: var(--gen-dim); color: var(--gen-bright); }
.briefing-content {
  margin: 0;
  max-height: 300px;
  overflow: auto;
  padding: 11px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--text-2);
  font-family: var(--sans);
  font-size: 11.5px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
/* Rendered briefing markdown (see briefingDoc in app.js). */
.briefing-content > * + * { margin-top: 6px; }
.bd-h { color: var(--text); font-weight: 600; letter-spacing: 0; }
.bd-h1 { font-size: 13.5px; margin-top: 12px; }
.bd-h2 { font-size: 12.5px; margin-top: 10px; }
.bd-h3 { font-size: 11.5px; margin-top: 8px; color: var(--text-2); }
.briefing-content > .bd-h:first-child { margin-top: 0; }
.bd-line { margin: 0; }
.bd-list {
  margin: 2px 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bd-code {
  font-family: var(--mono);
  font-size: 10.5px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--panel-2);
  color: var(--text);
}
.bd-table { margin: 4px 0; font-size: 11px; }
.bd-table th { padding-bottom: 5px; }
.bd-table td { padding: 5px var(--s3); }

/* ═══════════════════════ recent executions ═══════════════════════ */
.execution-preview {
  position: relative;
  overflow: hidden;
  border-color: var(--line);
  background:
    radial-gradient(circle at 4% 0%, rgb(var(--gen-rgb) / .07), transparent 34%),
    var(--panel);
}
.execution-preview::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, var(--gen), rgb(var(--gen-rgb) / .08) 58%, transparent);
}
/* Account tab: the latest-fill strip laid across the top of the full
   execution table — newest confirmed fill plus window counts in one row. */
.execution-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  padding: 8px 12px;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--gen);
  border-radius: var(--r-md);
  background: var(--bg-soft);
}
.execution-strip-latest {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex-wrap: wrap;
}
.execution-strip-symbol {
  font-family: var(--mono);
  font-size: 14.5px;
  letter-spacing: -.02em;
}
.execution-strip-price { color: var(--text-2); font-size: 12.5px; }
.execution-strip-latest time { color: var(--text-3); font-size: 10.5px; white-space: nowrap; }
.execution-strip-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-left: auto;
}
.execution-strip-metrics .execution-metric {
  flex-direction: row;
  align-items: baseline;
  gap: 5px;
}
.execution-strip-metrics .execution-metric strong { font-size: 12.5px; }
.execution-kicker {
  color: var(--gen);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .15em;
}
.execution-metric {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 2px 0;
}
.execution-metric span { color: var(--text-3); font-size: 10px; }
.execution-metric strong {
  overflow: hidden;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.execution-metric strong.up { color: var(--up); }
.execution-metric strong.down { color: var(--down); }
/* Homepage fill feed: compact exchange-style trade history. */
.execution-feed-wrap { max-height: 260px; overflow-y: auto; }
.execution-feed-table td { padding-top: 5px; padding-bottom: 5px; }
.execution-feed-table thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  padding-top: 2px;
  background: var(--bg-soft);
}
.execution-feed-source { color: var(--text-3); font-size: 11px; }
.execution-feed-na { color: var(--text-3); }
.execution-feed-table tbody tr.is-latest-fill td { background: rgb(var(--gen-rgb) / .045); }
.execution-feed-table tbody tr.is-latest-fill td:first-child { box-shadow: inset 2px 0 0 var(--gen); }
.execution-tape {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tape-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  width: 100%;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: var(--bg-soft);
  color: inherit;
  text-align: left;
  cursor: pointer;
  font: inherit;
  appearance: none;
  -webkit-appearance: none;
}
.tape-row:hover { border-color: var(--line-strong); }
.tape-row.is-latest {
  border-color: rgb(var(--gen-rgb) / .35);
  box-shadow: inset 3px 0 0 var(--gen);
}
.tape-time { color: var(--text-3); font-size: 11px; }
.tape-sym { font-family: var(--mono); font-size: 13.5px; letter-spacing: .02em; }
.tape-source { color: var(--text-3); font-size: 11.5px; }
.tape-px, .tape-notional { color: var(--text-2); font-size: 12px; }
.tape-pnl { margin-left: auto; font-size: 13.5px; font-weight: 600; }
.execution-table tbody tr.is-latest-fill td { background: rgb(var(--gen-rgb) / .045); }
.execution-table tbody tr.is-latest-fill td:first-child { box-shadow: inset 2px 0 0 var(--gen); }

/* ══════════════════════════ round-trip review ══════════════════════════ */
.trade-review {
  border-color: var(--line-strong);
  background:
    radial-gradient(circle at 100% 0%, rgb(var(--cyan-rgb) / .045), transparent 30%),
    var(--panel);
}
.review-summary-grid {
  display: grid;
  grid-template-columns: minmax(300px, .85fr) minmax(420px, 1.15fr);
  gap: var(--s3);
}
.review-block,
.review-symbols,
.review-history {
  min-width: 0;
}
.review-block { padding: 0; }
.review-block-head,
.review-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
}
.review-block-head { margin-bottom: var(--s3); }
.review-block-head h3,
.review-section-head h3 { font-size: 12.5px; }
.review-section-head p {
  margin-top: 1px;
  color: var(--text-3);
  font-size: 10.5px;
}
.review-kpis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4) var(--s3);
}
.review-kpi {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
  padding: 2px 0;
}
.review-kpi span { color: var(--text-3); font-size: 10.5px; }
.review-kpi strong { font-size: 16px; letter-spacing: -.01em; }
.review-source-grid {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  height: 100%;
}
.review-source-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  min-width: 0;
  padding: 0 0 var(--s3);
  border-bottom: 1px solid var(--line-soft);
}
.review-source-card:last-child { border-bottom: 0; padding-bottom: 0; }
.review-source-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
}
.review-source-head > strong { font-size: 13px; }
.review-source-stats {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  color: var(--text-3);
  font-size: 10.5px;
}
.review-source-chip { padding: 2px 7px; }
.review-source-chip.source-take-profit {
  border-color: var(--gen-line);
  background: var(--gen-dim);
}
.review-source-chip.source-stop-loss {
  border-color: rgb(var(--down-rgb) / .34);
  background: rgb(var(--down-rgb) / .1);
}
.review-source-chip.source-stop-loss b { color: var(--down); }
.review-source-chip.source-active {
  border-color: rgb(var(--info-rgb) / .32);
  background: rgb(var(--info-rgb) / .1);
}
.review-source-chip.source-active b { color: var(--info); }
.review-source-chip.source-unknown b { color: var(--text-3); }
.review-symbols,
.review-history {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: var(--s4) 0 0;
  border-top: 1px solid var(--line-soft);
}
.review-symbol-table-wrap,
.round-trip-table-wrap { margin: 0; padding: 0; }
.review-symbol-table { max-width: 460px; }
.round-trip-table { min-width: 1380px; }
.round-trip-table-wrap { max-height: 620px; overflow-y: auto; }
.round-trip-table thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  padding-top: 3px;
  background: var(--bg-soft);
}
.round-trip-row.is-profit td { background: rgb(var(--gen-rgb) / .035); }
.round-trip-row.is-loss td { background: rgb(var(--down-rgb) / .045); }
.round-trip-row.is-profit td:first-child { box-shadow: inset 2px 0 0 var(--up); }
.round-trip-row.is-loss td:first-child { box-shadow: inset 2px 0 0 var(--down); }
.round-trip-row.is-profit:hover td { background: rgb(var(--gen-rgb) / .075); }
.round-trip-row.is-loss:hover td { background: rgb(var(--down-rgb) / .085); }
.round-trip-row .review-fee { color: var(--text-3); }
.round-trip-row .review-net { font-weight: 650; }

/* ══════════════════════════ tables ══════════════════════════ */
.table-wrap { overflow-x: auto; margin: 0 -16px; padding: 0 16px; }
.table { width: 100%; border-collapse: collapse; font-size: 12px; }
.table th {
  text-align: left;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-3);
  padding: 0 var(--s3) var(--s2);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.table th.r { text-align: right; }
.table td { padding: 6px 10px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
.table-rows tbody tr { transition: background-color .12s ease; }
.table-rows tbody tr:hover { background: var(--bg-soft); }
.table .sym { font-family: var(--mono); font-weight: 600; }

/* The full execution history can run to 120 rows: its own scroll box with a
   sticky header keeps the columns labeled while paging through fills. */
.execution-table-wrap { max-height: 66vh; overflow-y: auto; }
.execution-table thead th {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  padding-top: 3px;
  background: var(--panel);
}

.panel-more { display: flex; justify-content: center; }

/* ══════════════════════════ chart ══════════════════════════ */
.curve-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4) var(--s3); }
.curve-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 2px 0;
}
.curve-stat span { font-size: 11px; color: var(--text-3); }
.curve-stat strong { font-size: 15px; }
.chart-wrap { position: relative; height: 300px; }
.chart-wrap canvas { width: 100% !important; height: 100% !important; }
.chart-state {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-size: 12.5px;
}

/* ══════════════════════════ foot ══════════════════════════ */
.foot {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--text-3);
}
.foot-spec { font-family: var(--mono); font-size: 10.5px; }
.foot-spec b { color: var(--text-2); font-weight: 500; }

/* ══════════════════════════ login ══════════════════════════ */
.login-page { min-height: 100vh; position: relative; overflow-x: hidden; background: #04070b; }
.login-art {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(90deg, #04070b 10%, rgb(4 7 11 / .94) 34%, rgb(4 7 11 / .42) 62%, rgb(4 7 11 / .12) 100%),
    url("/static/gen/hero.jpg?v=20260813.1");
  background-size: cover, cover;
  background-position: center, 100% 30%;
  animation: loginDrift 28s ease-in-out infinite alternate;
}
@keyframes loginDrift {
  from { background-position: center, 100% 28%; }
  to   { background-position: center, 92% 36%; }
}
.login-wrap > * { animation: riseIn .7s cubic-bezier(.22, .68, .32, 1) both; }
.login-wrap > *:nth-child(2) { animation-delay: .12s; }
.login-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 78% 42%, rgb(var(--gen-rgb) / .08), transparent 36%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 5px);
}

.login-wrap {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--s8) var(--page-pad);
  display: grid;
  grid-template-columns: 1.15fr 400px;
  gap: var(--s8);
  align-items: center;
}

.login-intro { display: flex; flex-direction: column; gap: var(--s5); max-width: 580px; }
.login-id { display: flex; align-items: center; gap: var(--s3); }
.login-id .portrait { position: relative; width: 56px; height: 56px; flex: none; display: block; }
.identity-copy { display: flex; flex-direction: column; gap: 1px; }
.identity-copy strong {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .2em;
}
.identity-copy span { font-size: 12px; color: var(--text-3); }
.login-intro h2 {
  font-size: 38px;
  line-height: 1.22;
  letter-spacing: -.03em;
  font-weight: 700;
}
.login-lede { font-size: 14px; color: var(--text-2); line-height: 1.85; }

.login-points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.login-points li {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: 10px 12px;
  border: 1px solid rgb(255 255 255 / .05);
  border-radius: 12px;
  background: rgb(8 14 20 / .38);
  font-size: 12.5px;
  color: var(--text-2);
  line-height: 1.65;
}
.login-points svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--gen); }
.login-foot { font-size: 11px; color: var(--text-3); }

.login-card {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  padding: 32px;
  border: 1px solid rgb(var(--gen-rgb) / .22);
  border-radius: 22px;
  background: rgb(8 13 20 / .72);
  backdrop-filter: blur(22px) saturate(1.15);
  box-shadow:
    0 0 0 1px rgb(var(--gen-rgb) / .06),
    0 24px 64px rgba(0, 0, 0, .42);
}
.login-card h1 { font-size: 22px; letter-spacing: -.02em; }
.login-sub { font-size: 13px; color: var(--text-3); margin-bottom: var(--s2); }
.login-card label { font-size: 11.5px; color: var(--text-2); letter-spacing: .04em; }
.login-card input {
  width: 100%;
  height: 46px;
  padding: 10px var(--s3);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgb(4 7 10 / .72);
  color: var(--text);
  font-size: 14px;
  font-family: var(--mono);
  transition: border-color .15s, box-shadow .15s;
}
.login-card input:focus {
  outline: none;
  border-color: var(--gen);
  box-shadow: 0 0 0 3px rgb(var(--gen-rgb) / .18);
}
.btn-primary {
  justify-content: center;
  margin-top: var(--s2);
  padding: 12px;
  border-color: var(--gen);
  background: var(--gen);
  color: var(--on-gen);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  box-shadow: 0 8px 24px rgb(var(--gen-rgb) / .22);
}
.btn-primary:hover { background: var(--gen-bright); border-color: var(--gen-bright); }
.btn-primary:disabled { opacity: .6; cursor: default; }
.login-error {
  padding: 8px 12px;
  border: 1px solid rgb(var(--down-rgb) / .4);
  border-radius: 10px;
  background: rgb(var(--down-rgb) / .1);
  color: var(--down);
  font-size: 12.5px;
}

@media (max-width: 920px) {
  .login-wrap { grid-template-columns: 1fr; padding: 28px var(--page-pad) 40px; gap: var(--s6); align-items: start; }
  .login-intro h2 { font-size: 28px; }
  .login-art {
    animation: none;
    background-image:
      linear-gradient(180deg, rgb(4 7 11 / .45) 0%, rgb(4 7 11 / .84) 40%, #04070b 64%),
      url("/static/gen/hero.jpg?v=20260813.1");
    background-position: center, 80% 6%;
  }
  .login-card { max-width: 440px; }
}

/* ══════════════════════════ responsive ══════════════════════════ */

/* Below this the stage can no longer spare a permanent 304px column, so the
   dock becomes a drawer and the topbar keeps the equity on screen. */
@media (max-width: 1280px) {
  body.drawer-open { overflow: hidden; }
  .stage { margin-right: 0; }
  .dock {
    z-index: var(--z-drawer);
    transform: translateX(100%);
    transition: transform .2s ease;
    box-shadow: var(--shadow);
  }
  .dock.is-open { transform: translateX(0); }
  .dock-toggle { display: inline-flex; }
  /* With the dock folded away, overlays anchor to the viewport edge. */
  .kbd-help, .to-top { right: var(--page-pad); }
}

@media (max-width: 1180px) {
  .execution-chain { grid-template-columns: repeat(2, 1fr); }
  .execution-chain-step + .execution-chain-step::before { display: none; }
}

/* Narrow desktop windows: the refresh timestamp is the most disposable
   topbar item, so it leaves first; the action buttons never clip. */
@media (max-width: 1100px) {
  .stamp { display: none; }
}

@media (max-width: 960px) {
  :root { --page-pad: 16px; }
  .topbar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "presence actions"
      "tabs tabs";
    align-items: center;
    row-gap: 8px;
    column-gap: 8px;
  }
  .topbar-presence { grid-area: presence; min-width: 0; }
  .topbar-end { grid-area: actions; }
  .tabs { grid-area: tabs; order: unset; width: 100%; }
  .tab { flex: 1; justify-content: center; }
  .view[data-view="gen"] .gen-now,
  .view[data-view="gen"] .gen-cols,
  .desk-grid { grid-template-columns: 1fr; }
  .view[data-view="gen"] .panel { container-type: inline-size; }
  .hero { min-height: 0; padding: 20px 18px 18px; }
  .hero-body {
    grid-template-columns: auto minmax(0, 1fr);
    min-height: 0;
    gap: 16px;
  }
  .hero .chip { min-width: 84px; }
  .hero-name { font-size: 28px; letter-spacing: .14em; }
  .portrait-hero { width: 68px; height: 68px; }
  .portrait-hero img { width: 68px; height: 68px; }
  .split-detail { grid-template-columns: 1fr; }
  .panel-sticky { position: static; }
  .session-list { max-height: 300px; }
  .curve-stats { grid-template-columns: repeat(2, 1fr); }
  .review-summary-grid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .sources-desk { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duty-bar { flex-wrap: wrap; gap: 10px 14px; }
  .duty-item:nth-child(2) { flex: 1 1 100%; order: 3; }
  .tape-pnl { margin-left: 0; }
  .execution-chain { grid-template-columns: 1fr; }
  .curve-stats { grid-template-columns: 1fr; }
  .panel-head { flex-direction: column; align-items: stretch; }
  .panel-head > .tag, .panel-head > .meta, .panel-head > .seg { align-self: flex-start; }
  .panel-tools { width: 100%; justify-content: flex-start; }
  .panel-tools .seg, .panel-head > .seg { max-width: 100%; overflow-x: auto; }
  .briefing-layout { grid-template-columns: 1fr; min-height: 0; }
  .briefing-list { max-height: 180px; }
  .topbar { gap: var(--s2); }
  .topbar-presence-sub { display: none; }
  .topbar-end { gap: 6px; }
  .topbar-tools { border-left: 0; padding-left: 0; margin-left: 0; }
  #kbd-help-btn { display: none; }
  .kbd-help { display: none; }
  .voice-toggle { width: 30px; padding: 0; }
  .voice-toggle-label, .voice-toggle-state { display: none; }
  .voice-toggle.is-speaking .voice-level { display: none; }
  .decision-trigger { width: 30px; padding: 0; border-radius: var(--r-sm); box-shadow: none; }
  .decision-trigger span { display: none; }
  .stamp { display: none; }
  .logout-btn { width: 30px; padding: 0; }
  .logout-btn span { display: none; }
  .hero { gap: var(--s3); padding: 18px 14px 16px; min-height: 0; border-radius: 16px; }
  .hero-art { background-position: center, 86% 16%; }
  .hero-body { gap: 12px 14px; }
  .portrait-hero { width: 56px; height: 56px; }
  .portrait-hero img { width: 56px; height: 56px; }
  .hero-name { font-size: 26px; letter-spacing: .12em; }
  .hero-title-row { gap: 8px; }
  .hero-role {
    width: 100%;
    padding-left: 0;
    border-left: 0;
    letter-spacing: .04em;
    white-space: normal;
    font-size: 11.5px;
  }
  .hero-kicker { font-size: 10px; }
  .hero-meta { gap: 6px; }
  .hero .chip { min-width: 0; padding: 7px 10px; }
  .voice-text { font-size: 14.5px; }
  .pulse-now { padding: var(--s3); }
  .pulse-now-avatar img { width: 36px; height: 36px; }
  .pulse-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pulse-log-head { flex-direction: column; gap: 2px; }
  .execution-strip-metrics { margin-left: 0; }
}

/* ═══════════════════ overlays · toasts / shortcuts / to-top ═══════════════════ */
/* Fresh fills surface as a transient card in the lower-left corner: the
   operator sees the tape move without watching the table. */
.toasts {
  position: fixed;
  left: var(--page-pad);
  bottom: var(--s5);
  z-index: 45;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  max-width: min(370px, calc(100vw - var(--page-pad) * 2));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--info);
  border-radius: var(--r-md);
  background: rgba(13, 20, 29, .96);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
  animation: toastIn .32s cubic-bezier(.22, .9, .34, 1.18);
}
.toast:hover { border-color: var(--line-bright); transform: translateY(-1px); }
.toast.is-profit { border-left-color: var(--gen); }
.toast.is-loss { border-left-color: var(--down); }
.toast.is-out { animation: toastOut .24s ease-in forwards; }
@keyframes toastIn {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
  to { opacity: 0; transform: translateY(8px) scale(.98); }
}
.toast-dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--info);
  box-shadow: 0 0 8px rgb(var(--info-rgb) / .6);
}
.toast.is-profit .toast-dot { background: var(--gen); box-shadow: 0 0 8px rgb(var(--gen-rgb) / .65); }
.toast.is-loss .toast-dot { background: var(--down); box-shadow: 0 0 8px rgb(var(--down-rgb) / .6); }
.toast-copy { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.toast-copy strong { font-size: 12.5px; }
.toast-copy span { font-size: 11px; color: var(--text-3); }

/* Keyboard shortcut reference, opened with ? or the topbar button. */
kbd {
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1;
  padding: 3px 6px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--panel-2);
  color: var(--text);
  white-space: nowrap;
}
.kbd-help {
  position: fixed;
  top: calc(var(--topbar-h) + 10px);
  right: calc(var(--dock-w) + var(--page-pad));
  z-index: 46;
  width: 280px;
  padding: var(--s4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: rgba(13, 20, 29, .97);
  box-shadow: var(--shadow);
  animation: riseIn .28s cubic-bezier(.22, .68, .32, 1) both;
}
.kbd-help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  margin-bottom: var(--s3);
}
.kbd-help-head strong { font-size: 13px; }
.kbd-help-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.kbd-help-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  font-size: 12px;
  color: var(--text-2);
}
.kbd-help-list li > span:first-child { display: inline-flex; gap: 3px; }

/* ─────────────── confirm modal (manual decision trigger) ─────────────── */
/* Centered within the stage, not the viewport: above the drawer breakpoint
   the dock owns the right column, so the backdrop yields it. */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: var(--page-pad);
  background: rgba(2, 5, 9, .62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: modalFade .18s ease both;
}
.modal-backdrop[hidden] { display: none; }
@media (min-width: 1281px) { .modal-backdrop { right: var(--dock-w); } }
.modal {
  width: min(360px, 100%);
  padding: var(--s6) var(--s5) var(--s5);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: rgba(13, 20, 29, .97);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s3);
  text-align: center;
  animation: modalIn .3s cubic-bezier(.22, .9, .34, 1.18) both;
}
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(12px) scale(.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(var(--gen-rgb) / .4);
  border-radius: 50%;
  background: rgb(var(--gen-rgb) / .12);
  color: var(--gen-bright);
  box-shadow: 0 0 24px rgb(var(--gen-rgb) / .18);
}
.modal-icon svg { width: 20px; height: 20px; }
.modal-title { margin: 0; font-size: 15.5px; font-weight: 600; }
.modal-desc { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--text-2); }
.modal-actions { display: flex; gap: var(--s3); width: 100%; margin-top: var(--s2); }
.modal-actions .btn { flex: 1; justify-content: center; padding: 9px 12px; white-space: nowrap; }
.modal-actions .btn svg { width: 15px; height: 15px; flex: none; }
.modal-confirm {
  border-color: var(--gen);
  background: var(--gen);
  color: var(--on-gen);
  font-weight: 600;
  box-shadow: 0 6px 18px rgb(var(--gen-rgb) / .22);
}
.modal-confirm:hover { background: var(--gen-bright); border-color: var(--gen-bright); }

/* Long pages get a quiet way back up once the topbar context is far away. */
.to-top {
  position: fixed;
  right: calc(var(--dock-w) + var(--page-pad));
  bottom: var(--s5);
  z-index: 44;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(13, 20, 29, .94);
  color: var(--text-2);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: color .15s, border-color .15s, transform .15s;
  animation: riseIn .25s ease both;
}
.to-top:hover { color: var(--gen-bright); border-color: var(--gen-line); transform: translateY(-2px); }
.to-top svg { width: 16px; height: 16px; }

/* Pressing D on a wide screen (where the dock never folds) just reminds the
   operator where the account lives instead of opening a drawer. */
.dock.is-attention {
  animation: dockAttention 1s ease;
}
@keyframes dockAttention {
  0%, 100% { box-shadow: none; }
  30%      { box-shadow: inset 0 0 0 2px var(--gen-line), 0 0 30px rgb(var(--gen-rgb) / .14); }
}

/* ══════════════════ research view · session list & mind ══════════════════ */
.session-rel { font-family: var(--mono); font-size: 9.5px; color: var(--text-3); }
.session-when { display: inline-flex; align-items: baseline; gap: 6px; min-width: 0; }

.mind-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: var(--s8) var(--s5);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  background: var(--bg-soft);
  text-align: center;
}
.mind-empty strong { font-size: 13px; color: var(--text-2); }
.mind-empty span { font-size: 12px; color: var(--text-3); max-width: 380px; line-height: 1.7; }

/* Anchored panels must clear the sticky bar when anything jumps to them. */
.panel, .hero { scroll-margin-top: calc(var(--topbar-h) + 12px); }

/* ═══════════════════════ login · password field ═══════════════════════ */
.login-field { position: relative; }
.login-field input { padding-right: 44px; }
.pass-toggle {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: color .15s, background .15s;
}
.pass-toggle:hover { color: var(--text); background: var(--hover); }
.pass-toggle svg { width: 16px; height: 16px; }
.pass-toggle .pass-toggle-hide { display: none; }
.pass-toggle.is-showing .pass-toggle-show { display: none; }
.pass-toggle.is-showing .pass-toggle-hide { display: block; }
.login-hint {
  margin: 0;
  font-size: 11px;
  color: var(--warn);
}

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