/* ──────────────────────────────────────────────────────────────────
   AutoTrader — majestic dark trading console
   ────────────────────────────────────────────────────────────────── */

:root {
  --bg-0: #060814;
  --bg-1: #0b1020;
  --bg-2: #11172a;
  --line: rgba(255,255,255,0.07);
  --line-strong: rgba(255,255,255,0.14);
  --fg: #e6ecff;
  --fg-dim: #8a92b2;
  --fg-faint: #5a6285;
  --accent: #10b981;
  --accent-2: #fbbf24;
  --accent-3: #6366f1;
  --danger: #ef4444;
  --danger-2: #b91c1c;
  --good: #22c55e;
  --bad: #ef4444;
  --glow-emerald: 0 0 30px rgba(16,185,129,0.25);
  --glow-gold: 0 0 30px rgba(251,191,36,0.20);

  --font-display: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
[hidden] { display: none !important; }

/* QA G4-6: skip link — visually hidden until keyboard-focused, then floats
   pinned to the top-left so a Tab-key user can reach the main landmark in
   one keystroke from page load. Background contrast meets WCAG AA. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10000;
  padding: 8px 14px;
  background: var(--bg-0, #060814);
  color: #fff;
  border: 2px solid var(--accent, #10b981);
  border-radius: 0 0 6px 0;
  text-decoration: none;
  font-weight: 600;
}
.skip-link:focus {
  left: 0;
  outline: 2px solid var(--accent, #10b981);
  outline-offset: 2px;
}
body {
  background: var(--bg-0);
  color: var(--fg);
  font-family: var(--font-display);
  min-height: 100vh;
  letter-spacing: 0.01em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Background glow + grid */
.bg-gradient {
  position: fixed; inset: 0; z-index: -2;
  background:
    radial-gradient(900px 600px at 12% -10%, rgba(99,102,241,0.15), transparent 60%),
    radial-gradient(700px 500px at 95% 5%, rgba(16,185,129,0.10), transparent 60%),
    radial-gradient(900px 700px at 50% 110%, rgba(251,191,36,0.06), transparent 60%),
    linear-gradient(180deg, #060814 0%, #0a0f1f 60%, #050710 100%);
}
.grid-overlay {
  position: fixed; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, black 0%, transparent 70%);
  pointer-events: none;
}

/* ────────────────────────── Topbar ────────────────────────── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(8px);
  background: rgba(8,11,24,0.55);
  position: sticky; top: 0; z-index: 50;
}
.brand { display: flex; align-items: center; gap: 14px; }
.logo {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(16,185,129,0.18), rgba(251,191,36,0.18));
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: var(--glow-emerald);
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text .name {
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.18em;
  background: linear-gradient(90deg, #ffffff 0%, #fbbf24 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-text .name em {
  font-style: normal;
  background: linear-gradient(90deg, #10b981, #6366f1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.brand-text .sub {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-faint);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.status-cluster { display: flex; align-items: center; gap: 12px; }
.ws-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  color: var(--fg-dim);
}
.ws-pill .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--fg-faint);
  box-shadow: 0 0 8px currentColor;
  animation: pulse 1.6s ease-in-out infinite;
}
.ws-pill.connected { color: var(--accent); }
.ws-pill.connected .dot { background: var(--accent); }
.ws-pill.error { color: var(--danger); }
.ws-pill.error .dot { background: var(--danger); }
.ws-pill.halted { color: var(--accent-2); border-color: rgba(251,191,36,0.5); }
.ws-pill.halted .dot { background: var(--accent-2); }

.kill-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: #ef4444;
  background: transparent;
  border: 2px solid #ef4444;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.kill-btn:hover {
  background: rgba(239,68,68,0.1);
}
.kill-btn:active { background: rgba(239,68,68,0.2); }

/* ────────────────────────── Auth gate ────────────────────────── */
.auth-gate {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: rgba(6,8,20,0.85);
  backdrop-filter: blur(14px);
}
.auth-card {
  width: min(420px, 92vw);
  padding: 36px 32px;
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  box-shadow: 0 30px 80px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  text-align: center;
}
.auth-card h2 {
  margin: 0 0 4px 0;
  font-size: 22px;
  letter-spacing: 0.04em;
  background: linear-gradient(90deg, #fff, #fbbf24);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.auth-card p { color: var(--fg-dim); margin: 6px 0 18px; font-size: 14px; }
.auth-card input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: rgba(0,0,0,0.4);
  color: var(--fg);
  font-family: var(--font-mono);
  /* RC-04: 16px on mobile prevents iOS auto-zoom on focus. */
  font-size: 16px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
@media (min-width: 721px) {
  .auth-card input { font-size: 14px; }
}
.auth-card input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(16,185,129,0.18); }
/* v1.5.9 PIN unlock — single-digit boxes (8 since v1.5.10) */
.pin-row { display: flex; gap: 7px; justify-content: center; margin: 18px 0 6px; }
.auth-card input.pin-box {
  width: 36px; height: 48px; padding: 0;
  text-align: center; font-size: 20px;
  caret-color: var(--accent);
}
@media (max-width: 480px) {
  .pin-row { gap: 4px; }
  .auth-card input.pin-box { width: 30px; height: 42px; font-size: 17px; }
}
.pin-row.pin-error input.pin-box { border-color: #ef4444; animation: pin-shake 0.3s; }
@keyframes pin-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}
.auth-card button {
  margin-top: 14px;
  width: 100%;
  padding: 12px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #10b981, #6366f1);
  color: white;
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}
.auth-card button:hover { filter: brightness(1.1); transform: translateY(-1px); }
.auth-card .hint {
  margin-top: 14px;
  font-size: 12px;
  color: var(--fg-faint);
}
.auth-card code {
  font-family: var(--font-mono);
  background: rgba(255,255,255,0.05);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Layout handled via Tailwind utility classes on the elements directly */

.glass {
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid var(--line-strong);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* ────────────────────────── Sidebar ────────────────────────── */
.sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 6px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-dim);
}
.sidebar-header .count {
  background: rgba(255,255,255,0.06);
  padding: 2px 10px; border-radius: 999px;
  color: var(--fg);
  font-family: var(--font-mono);
}
.account-list { display: flex; flex-direction: column; gap: 10px; }
.account-card {
  position: relative;
  padding: 14px 16px;
  border-radius: 14px;
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.account-card:hover { transform: translateY(-1px); border-color: rgba(255,255,255,0.22); }
.account-card.active {
  border-color: rgba(16,185,129,0.55);
  box-shadow: 0 0 0 1px rgba(16,185,129,0.5), 0 0 30px rgba(16,185,129,0.18);
}
.account-card .row { display: flex; justify-content: space-between; align-items: center; }
.account-card .name { font-weight: 600; font-size: 14px; }
.account-card .id { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); }
.account-card .pill {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.1em;
  padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line-strong);
}
.account-card .pill.paper { color: #93c5fd; border-color: rgba(147,197,253,0.4); background: rgba(59,130,246,0.08); }
.account-card .pill.live  { color: #fca5a5; border-color: rgba(252,165,165,0.45); background: rgba(239,68,68,0.08); }
.account-card .pill.run   { color: var(--accent); border-color: rgba(16,185,129,0.5); background: rgba(16,185,129,0.08); }
.account-card .pill.idle  { color: var(--fg-faint); }
.account-card .pnl { font-family: var(--font-mono); font-size: 13px; }
.account-card .pnl.up { color: var(--good); }
.account-card .pnl.down { color: var(--bad); }
.account-card .meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }

/* ────────────────────────── Hero ────────────────────────── */

.hero-card { padding: 22px 24px; min-width: 0; }
.chart-card { min-width: 0; }
.hero-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.hero-name {
  font-size: 24px; font-weight: 600; letter-spacing: 0.02em;
}
.hero-badges { display: flex; gap: 8px; flex-wrap: wrap; }
.badge {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.08em;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--fg-dim);
}
.badge.paper { color: #93c5fd; border-color: rgba(147,197,253,0.4); }
.badge.live  { color: #fca5a5; border-color: rgba(252,165,165,0.45); background: rgba(239,68,68,0.08); }
.badge.run   { color: var(--accent); border-color: rgba(16,185,129,0.5); background: rgba(16,185,129,0.08); }
.badge.off-hours { color: var(--accent-2); border-color: rgba(251,191,36,0.5); background: rgba(251,191,36,0.10); }
.badge.halted    { color: var(--bad);      border-color: rgba(239,68,68,0.55); background: rgba(239,68,68,0.10); }
.badge.strategy { color: var(--accent-2); border-color: rgba(251,191,36,0.4); }

.stat-grid {
  display: grid;
  /* v1.2.52: 7 columns now (added Max Purchase Limit + Max No of Options). */
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
@media (max-width: 1400px) { .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat-hint {
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--fg-faint);
  line-height: 1.3;
  white-space: normal;
}
.stat {
  padding: 14px 14px 12px;
  border-radius: 12px;
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--line);
  min-width: 0;          /* allow grid track to size to 1fr — without this, content forces uneven tracks */
  overflow: hidden;
}
.stat-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-label {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-faint);
}
.stat-value { margin-top: 4px; font-size: clamp(14px, 1.6vw, 20px); font-weight: 600; color: var(--fg); }
.stat-value.up { color: var(--good); }
.stat-value.down { color: var(--bad); }

/* v1.2.53: inline-editable stat tiles. The value <input> is styled to
   match the read-only .stat-value tiles (same font, color, spacing) so
   it doesn't visually announce as a form control until focused. */
.stat-editable .stat-input {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--fg);
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(14px, 1.6vw, 20px);
  margin-top: 4px;
  padding: 2px 6px;
  width: 100%;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
  -moz-appearance: textfield;
}
.stat-editable .stat-input::-webkit-outer-spin-button,
.stat-editable .stat-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stat-editable .stat-input:hover { border-color: var(--line); background: rgba(255,255,255,0.03); }
.stat-editable .stat-input:focus { border-color: var(--accent); background: rgba(16,185,129,0.05); }
.stat-editable .stat-input.saving { border-color: var(--accent-2); }
.stat-editable .stat-input.saved  { border-color: var(--good); }
.stat-editable .stat-input.error  { border-color: var(--bad); }
.stat-save-status {
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
.stat-save-status.ok  { color: var(--good); }
.stat-save-status.err { color: var(--bad); }

.hero-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.btn {
  padding: 10px 18px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.04);
  color: var(--fg);
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease;
}
.btn:hover { background: rgba(255,255,255,0.08); transform: translateY(-1px); }
.btn.primary {
  background: linear-gradient(135deg, #10b981, #059669);
  border-color: rgba(16,185,129,0.5);
  color: #fff;
}
.btn.primary:hover { filter: brightness(1.08); }
.btn.danger {
  background: linear-gradient(135deg, #b91c1c, #ef4444);
  border-color: rgba(239,68,68,0.55);
  color: #fff;
}

/* Chart */
.chart-card { padding: 18px 20px; display: flex; flex-direction: column; }
.chart-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-dim);
  margin-bottom: 8px;
}
#equityChart { flex: 1; min-height: 160px; max-height: 190px; }

/* dash-three-col handled via Tailwind grid utilities */
/* ensure ticket-card in grid doesn't have stale max-width */
.ticket-card { max-width: none; margin-bottom: 0; }

/* Risk Profile — horizontal grid when spanning full width */
.risk-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

/* Compact dashboard variant — single row of small chips, no Universe row,
   so it doesn't push everything below the fold. Full detail still in the
   account-edit modal. */
.risk-panel-compact .panel-header { padding: 8px 14px; font-size: 11px; }
.risk-grid-compact {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  padding: 8px 14px 10px;
}
.risk-grid-compact .risk-row {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 0; border: 0;
  font-size: 12px;
}
.risk-grid-compact .risk-row .label {
  font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--fg-faint);
}
.risk-grid-compact .risk-row .value {
  font-family: var(--font-mono); color: var(--fg);
}

/* Backtester results — in-progress row pulse */
tr.bt-running td { color: var(--accent); animation: bt-pulse 1.4s ease-in-out infinite; }
@keyframes bt-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }

/* Prominent banner shown while a backtest is running. Pulsing accent border
   so even a sub-second run is clearly observable. */
.bt-progress-banner {
  border: 2px solid rgba(16, 185, 129, 0.6) !important;
  box-shadow: 0 0 24px rgba(16, 185, 129, 0.25), inset 0 1px 0 rgba(255,255,255,0.06);
  animation: bt-banner-pulse 1.6s ease-in-out infinite;
}
@keyframes bt-banner-pulse {
  0%,100% { box-shadow: 0 0 24px rgba(16, 185, 129, 0.25); }
  50%     { box-shadow: 0 0 36px rgba(16, 185, 129, 0.55); }
}

/* Disabled / unreachable account cards — dimmed so the user can see they
   exist but understand they aren't selectable. Click opens the editor. */
.account-card--off {
  opacity: 0.55;
  border-style: dashed !important;
}
.account-card--off:hover { opacity: 0.85; }

/* Engine halt reason — yellow inline note under the hero badges so the user
   can see WHY trading paused without hovering the badge. */
.hero-state-reason {
  margin-top: 6px;
  padding: 6px 10px;
  font-size: 12px;
  color: #fbbf24;
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 6px;
  align-self: flex-start;
}

/* v1.2.31: bars side-by-side when both visible. Wraps to stacked on
   narrow viewports. */
.budget-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.budget-row > .premium-budget {
  flex: 1 1 320px;       /* min 320px each, share remaining width equally */
  margin-top: 0;          /* gap handled by .budget-row */
}

.premium-budget-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
}

/* Daily orders + options-premium budget chips.
   v1.2.26: bar moved to its own row below the label/figures so it gets
   the full hero-card width (~3× the prior horizontal footprint). Bar
   bumped to 6px so it stays visible at the new width. Color stops are
   green→amber→red at 50% / 80% / 100%. */
.premium-budget {
  margin-top: 6px;
  padding: 6px 10px 8px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.premium-budget-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: 1 1 auto;
}
.premium-budget-label { color: var(--fg-faint); font-size: 11px; white-space: nowrap; }
.premium-budget-figures { color: var(--fg); font-size: 11px; white-space: nowrap; }
.premium-budget-track {
  /* v1.2.26: full-width bar on its OWN line below the row above. */
  flex: 0 0 100%;
  order: 50;
  height: 6px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  overflow: hidden;
}
.premium-budget-fill {
  height: 100%;
  background: var(--good, #10b981);
  transition: width 320ms ease, background-color 320ms ease;
  width: 0%;
}
.premium-budget-fill.warn { background: #fbbf24; }
.premium-budget-fill.crit { background: var(--bad, #ef4444); }
.premium-budget-note {
  flex: 0 0 100%;
  margin-top: 2px;
  font-size: 11px;
  color: #fbbf24;
  order: 99;
}
.premium-budget-extend {
  flex: 0 0 auto;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid rgba(251, 191, 36, 0.4);
  background: transparent;
  color: #fbbf24;
  cursor: pointer;
  transition: background 150ms ease;
}
.premium-budget-extend:hover { background: rgba(251, 191, 36, 0.15); }
.premium-budget-extend:disabled { opacity: 0.4; cursor: not-allowed; }

/* v1.2.27: sortable tables. Click a th to sort by that column; arrow
   shows the active direction. */
table.sortable thead th[data-sort-key] {
  user-select: none;
  position: relative;
}
table.sortable thead th.sort-asc::after,
table.sortable thead th.sort-desc::after {
  content: "";
  display: inline-block;
  margin-left: 6px;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  vertical-align: middle;
  opacity: 0.85;
}
table.sortable thead th.sort-asc::after  { border-bottom: 5px solid var(--fg, #e2e8f0); }
table.sortable thead th.sort-desc::after { border-top:    5px solid var(--fg, #e2e8f0); }
table.sortable thead th[data-sort-key]:hover { color: var(--fg, #e2e8f0); }

/* v1.2.27: DTE coloring for option expiry tags. Red ≤7, amber ≤14. */
.dte-red    { color: var(--bad, #ef4444); }
.dte-amber  { color: #fbbf24; }
.dte-green  { color: var(--fg-faint, #94a3b8); }

/* v1.2.28: Trade Plan preview panel — sits below the form, shows the
   contract(s) the current form values would pick if fired right now. */
.preview-panel {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 6px;
}
.preview-header { font-size: 12px; color: var(--fg-faint); margin-bottom: 8px; }
.preview-body { font-size: 12px; }
.preview-row { padding: 2px 0; }
.preview-label { color: var(--fg-faint); margin-right: 8px; }
.preview-legs { margin: 8px 0; padding: 6px 8px; background: rgba(255, 255, 255, 0.02); border-radius: 4px; }
.preview-leg { display: grid; grid-template-columns: 70px 1fr 110px 1fr auto; gap: 8px; padding: 2px 0; align-items: center; font-size: 11px; }
.preview-summary { margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, 0.05); }

/* v1.2.29 item 12: top-of-page exit-alert strip on the Options tab. */
.exit-alert-strip {
  margin: 12px 0;
  padding: 10px 12px;
  background: rgba(251, 191, 36, 0.05);
  border: 1px solid rgba(251, 191, 36, 0.25);
  border-radius: 6px;
}
.exit-alert-header {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: #fbbf24; margin-bottom: 6px;
}
.exit-alert-items { display: flex; flex-direction: column; gap: 4px; }
.exit-alert-item {
  display: grid; grid-template-columns: 1fr 80px 80px 90px;
  gap: 10px; align-items: center;
  padding: 4px 6px; border-radius: 4px;
}
.exit-alert-item:hover { background: rgba(255, 255, 255, 0.03); }

/* v1.2.30 item 17: per-strategy P&L attribution panel. */
.strategy-breakdown { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px 12px; }
.strategy-row {
  display: grid;
  grid-template-columns: 140px 100px 1fr 110px;
  gap: 12px;
  align-items: baseline;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 12px;
}
.strategy-row:hover { background: rgba(255, 255, 255, 0.03); }
.strategy-name { font-weight: 600; text-transform: uppercase; }
.strategy-count, .strategy-mv { color: var(--fg-faint); }
.strategy-pnl { text-align: right; font-weight: 600; }

/* v1.2.40: click-to-toggle checkbox grid for the meta_voter `voters`
   field. Each item is a clickable label that toggles a hidden checkbox.
   The .checked class is applied via the inline onchange so the visual
   state matches without re-rendering the whole form. */
.multi-enum-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 6px;
  padding: 6px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
}
.multi-enum-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
  user-select: none;
}
.multi-enum-item:hover { background: rgba(255, 255, 255, 0.05); }
.multi-enum-item.checked {
  background: rgba(16, 185, 129, 0.1);
  border-color: rgba(16, 185, 129, 0.5);
  color: var(--good, #10b981);
}
.multi-enum-item input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

/* v1.2.41: segmented selector for the options limit-aggressiveness α.
   Six preset percentages; 20% is the default-active. Active button has
   a green ring; the sub-label fades. */
.alpha-presets {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}
.alpha-presets > button {
  padding: 8px 4px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  color: var(--fg, #e2e8f0);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
  text-align: center;
  line-height: 1.1;
}
.alpha-presets > button:hover { background: rgba(255, 255, 255, 0.05); }
.alpha-presets > button.active {
  background: rgba(16, 185, 129, 0.10);
  border-color: rgba(16, 185, 129, 0.55);
  color: var(--good, #10b981);
}
.alpha-presets .alpha-sub {
  margin-top: 2px;
  font-size: 10px;
  font-weight: 400;
  color: var(--fg-faint, #94a3b8);
  text-transform: lowercase;
}
@media (max-width: 720px) { .alpha-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* v1.2.32: account-wide options-mode quick toggle on the hero card. */
/* v1.2.35: engine-control buttons moved into the hero row. Compact
   styling so Start/Stop/Flatten + Options-mode toggle all fit inline
   to the right of the strategy badges. The leftmost of this cluster
   gets margin-left:auto via .hero-engine-actions to push the whole
   group to the right edge. */
.hero-engine-actions {
  display: inline-flex;
  gap: 6px;
  margin-left: auto;
}
.btn-compact {
  padding: 5px 10px;
  font-size: 12px;
  border-radius: 6px;
  line-height: 1;
}

.opt-mode-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.03);
  color: var(--fg-faint);
  font-size: 11px;
  cursor: pointer;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.opt-mode-toggle:hover { background: rgba(255, 255, 255, 0.06); }
.opt-mode-toggle.on {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.55);
  color: var(--good, #10b981);
}
.opt-mode-toggle .opt-mode-state {
  font-weight: 700;
  letter-spacing: 0.04em;
}
.opt-mode-toggle:disabled { opacity: 0.4; cursor: not-allowed; }

.panel { display: flex; flex-direction: column; min-width: 0; }
.panel .table-wrap { overflow-x: auto; }
.panel-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-dim);
}
/* display:block required — overflow-x:auto has no effect on inline or table elements */
.table-wrap { overflow-x: auto; display: block; -webkit-overflow-scrolling: touch; }
table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-mono); font-size: 13px;
}
th {
  text-align: left; font-weight: 500;
  padding: 10px 14px;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-faint);
  border-bottom: 1px solid var(--line);
}
td { padding: 12px 14px; border-bottom: 1px solid var(--line); }
tr:last-child td { border-bottom: 0; }
td.empty { color: var(--fg-faint); text-align: center; padding: 28px; }
td.up { color: var(--good); }
td.down { color: var(--bad); }

.risk-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.risk-row:last-child, .risk-row:nth-child(4n) { border-right: 0; }
.risk-row .label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg-faint); }
.risk-row .value { font-family: var(--font-mono); font-size: 13px; color: var(--fg); }

/* ────────────────────────── Journal ────────────────────────── */
.dot.live {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px var(--accent);
  animation: pulse 1.4s ease-in-out infinite;
}
.journal-list {
  list-style: none;
  margin: 0; padding: 8px 0;
}
.journal-list.big {
  max-height: calc(100vh - 320px);
  overflow-y: auto;
}
.journal-list li {
  padding: 10px 18px;
  border-bottom: 1px dashed var(--line);
  font-size: 13px;
}
.journal-list li:last-child { border-bottom: 0; }
.journal-list .ts {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-faint);
  margin-right: 8px;
}
.journal-list .kind {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  margin-right: 6px;
  letter-spacing: 0.08em;
}
.kind.order_submitted { background: rgba(16,185,129,0.14); color: var(--accent); }
.kind.blocked         { background: rgba(239,68,68,0.14);  color: var(--bad); }
.kind.engine_start    { background: rgba(99,102,241,0.16); color: #a5b4fc; }
.kind.engine_stop     { background: rgba(255,255,255,0.06); color: var(--fg-dim); }
.kind.kill_switch     { background: rgba(239,68,68,0.2);   color: #fca5a5; }
.kind.flatten         { background: rgba(251,191,36,0.18); color: var(--accent-2); }
.kind.engine_error,
.kind.tick_error      { background: rgba(239,68,68,0.10);  color: #fca5a5; }
.kind.skip            { background: rgba(255,255,255,0.05); color: var(--fg-faint); }
.journal-list .detail { color: var(--fg-dim); }

/* ────────────────────────── Footer ────────────────────────── */
.footer {
  padding: 14px 28px;
  border-top: 1px solid var(--line);
  color: var(--fg-faint);
  background: rgba(6,8,20,0.6);
  text-align: center;
}

/* Utilities */
.mono { font-family: var(--font-mono); }
.small { font-size: 11px; }

/* Animations */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* ────────────────────────── Live header pieces (uptime, clock, P&L chip) ────────────────────────── */
.uptime-pill {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.03);
  color: var(--fg-dim);
  font-size: 11px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.uptime-pill.up { color: var(--accent); border-color: rgba(16,185,129,0.4); }

/* Reconcile chip (TODO #175). Three states, one per contract verdict.
   Hidden only when it is genuinely empty (no report fetched yet) - an
   alarm that hides itself when the news is bad is not an alarm. */
.oe-recon-chip { cursor: pointer; }
.oe-recon-chip:empty { display: none; }
.oe-recon-chip.ok   { color: var(--accent); border-color: rgba(16,185,129,0.40); }
.oe-recon-chip.bad  { color: #fca5a5; border-color: rgba(239,68,68,0.55);
                      background: rgba(239,68,68,0.10); }
/* CANNOT-VERIFY. Muted on purpose: it must be visibly NOT-green without
   competing with a real MISMATCH for attention. */
.oe-recon-chip.gray { color: var(--fg-dim); border-color: var(--line-strong);
                      background: rgba(255,255,255,0.02); }
/* The reconciler itself has stopped reporting. Dashed border reads as
   "this is not current" at a glance, which is the only honest thing the
   chip can say about a pass that is not running. */
.oe-recon-chip.stale { border-style: dashed; opacity: 0.85; }

/* Board-coverage sentence appended to the stale banner (#161). Dimmed
   because board names lagging is expected, unlike the watchlist half. */
.oe-cov-note { display: block; margin-top: 6px; opacity: 0.85; font-size: 12px; }

.chart-header-right {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 0; overflow: hidden;
}
.chart-header-right .clock { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-chip {
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line-strong);
  font-size: 12px;
}
.today-chip.up   { color: var(--good); border-color: rgba(34,197,94,0.4); }
.today-chip.down { color: var(--bad);  border-color: rgba(239,68,68,0.4); }

.clock {
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}

/* Mini positions inside the Equity Live tile */
.mini-positions {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
}
.mini-positions-label {
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 6px;
}
.mini-positions-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
  max-height: 110px; overflow-y: auto;
}
.mini-positions-list li {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(0,0,0,0.18);
  font-family: var(--font-mono); font-size: 12px;
}
.mini-positions-list li.empty { color: var(--fg-faint); justify-content: center; }
.mini-positions-list .sym { color: var(--fg); }
.mini-positions-list .qty { color: var(--fg-faint); margin: 0 6px; }
.mini-positions-list .pnl.up { color: var(--good); }
.mini-positions-list .pnl.down { color: var(--bad); }

.chart-footer { margin-top: 8px; color: var(--fg-faint); text-align: right; }

/* ────────────────────────── Top nav (page tabs) ────────────────────────── */
.topnav {
  display: flex;
  gap: 4px;
  padding: 6px 28px 0;
  border-bottom: 1px solid var(--line);
  background: rgba(8,11,24,0.55);
  backdrop-filter: blur(8px);
  position: sticky; top: 80px; z-index: 40;
}
.nav-tab {
  padding: 12px 22px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.nav-tab:hover { color: var(--fg-dim); }
.nav-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ────────────────────────── Page layout ────────────────────────── */
/* Every page is a flex column with consistent 18px gutters between its
   top-level sections (page-header, panels, grids, etc.). Mirrors the gap
   used by the outer <section> between pages and by the dashboard grid. */
.page { display: flex; flex-direction: column; gap: 18px; }

/* ────────────────────────── Page header / filters ────────────────────────── */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.page-title {
  margin: 0;
  font-size: 20px;
  letter-spacing: 0.04em;
  background: linear-gradient(90deg, #fff 0%, #fbbf24 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.page-sub {
  margin: 4px 0 0; color: var(--fg-faint); font-size: 12px;
}
.page-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.page-filters input,
.page-filters select {
  padding: 9px 12px;
  background: rgba(0,0,0,0.32);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 12px;
  outline: none;
}
.page-filters input:focus,
.page-filters select:focus { border-color: var(--accent); }

/* ────────────────────────── Totals row ────────────────────────── */
.totals-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
@media (max-width: 1080px) { .totals-row { grid-template-columns: 1fr 1fr; } }

.total-card { padding: 16px 18px; }
.total-card .t-label {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-faint);
}
.total-card .t-value { margin-top: 6px; font-size: 22px; font-weight: 600; }
.total-card.big .t-value.big { font-size: 28px; }
.total-card .t-sub { margin-top: 4px; font-size: 12px; color: var(--fg-faint); }
.total-card .t-value.up { color: var(--good); }
.total-card .t-value.down { color: var(--bad); }

/* Big charts on Today/Week pages */
/* contain:layout isolates the chart so internal resizes (WS tick → Chart.js
   resize) don't shift content outside the card (CLS fix for RC-12). */
.big-chart { padding: 18px 22px; min-height: 320px; contain: layout; }
.big-chart canvas { max-height: 280px; height: 280px; }

/* ────────────────────────── Order Ticket ────────────────────────── */
.ticket-card {
  padding: 20px 22px;
  margin-bottom: 0;
  border-color: rgba(251,191,36,0.18);
  background:
    linear-gradient(180deg, rgba(251,191,36,0.04), rgba(255,255,255,0.015) 50%, rgba(255,255,255,0.015)),
    radial-gradient(800px 200px at 0% 0%, rgba(251,191,36,0.05), transparent 70%);
}
.ticket-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 14px;
}
.ticket-title {
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 600;
}
.ticket-sub { font-size: 11px; color: var(--fg-faint); letter-spacing: 0.06em; }

.ticket-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.ticket-grid .form-row { margin-bottom: 0; }
.ticket-grid input,
.ticket-grid select {
  padding: 10px 12px;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.ticket-grid input:focus,
.ticket-grid select:focus { border-color: var(--accent-2); box-shadow: 0 0 0 3px rgba(251,191,36,0.15); }

.ticket-bracket { margin-top: 14px; }
.ticket-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--fg-dim); cursor: pointer;
  user-select: none;
}
.ticket-toggle input { accent-color: var(--accent-2); }
.ticket-bracket-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 10px;
}
.ticket-bracket-fields input {
  padding: 10px 12px;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 13px;
}

.ticket-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 18px;
}
.ticket-btn {
  padding: 14px 0;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  border-radius: 10px;
  border: 1px solid;
  cursor: pointer;
  transition: transform 0.1s ease, filter 0.15s ease, box-shadow 0.2s ease;
}
.ticket-btn.buy {
  color: #fff;
  background: linear-gradient(135deg, #059669, #10b981);
  border-color: rgba(16,185,129,0.55);
  box-shadow: 0 8px 28px rgba(16,185,129,0.25);
}
.ticket-btn.sell {
  color: #fff;
  background: linear-gradient(135deg, #b91c1c, #ef4444);
  border-color: rgba(239,68,68,0.55);
  box-shadow: 0 8px 28px rgba(239,68,68,0.25);
}
.ticket-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.ticket-btn:active { transform: translateY(0); }
.ticket-btn:disabled {
  filter: grayscale(0.7) brightness(0.6);
  cursor: not-allowed; transform: none;
}
.ticket-hint {
  margin-top: 10px;
  font-size: 11px;
  color: var(--fg-faint);
  text-align: right;
}
.ticket-hint.error { color: var(--bad); }

/* Inline confirmation card (replaces OS confirm dialog) */
.ticket-confirm {
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(251,191,36,0.45);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(251,191,36,0.08), rgba(251,191,36,0.02));
  box-shadow: 0 0 0 1px rgba(251,191,36,0.20), 0 12px 30px rgba(251,191,36,0.10);
  animation: confirmIn 0.18s ease;
}
.ticket-confirm-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.ticket-confirm-label {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-2); font-weight: 600;
}
.ticket-confirm-account { font-size: 11px; color: var(--fg-dim); }
.ticket-confirm-summary {
  font-size: 16px;
  color: var(--fg);
  padding: 10px 12px;
  background: rgba(0,0,0,0.32);
  border: 1px solid var(--line);
  border-radius: 8px;
  word-break: break-word;
}
.ticket-confirm-actions {
  display: flex; gap: 10px; margin-top: 12px; align-items: center;
}
.ticket-confirm-actions .btn { flex: 0 0 auto; }
.ticket-btn.confirm-go {
  flex: 1;
  padding: 12px 0;
  background: linear-gradient(135deg, #f59e0b, #fbbf24);
  border-color: rgba(251,191,36,0.6);
  color: #111;
}
.ticket-btn.confirm-go:hover { filter: brightness(1.06); }
@keyframes confirmIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ────────────────────────── Inline row buttons ────────────────────────── */
.row-btn {
  padding: 4px 10px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  color: var(--fg-dim);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.row-btn:hover { background: rgba(255,255,255,0.08); color: var(--fg); }
.row-btn.danger {
  color: #fca5a5;
  border-color: rgba(252,165,165,0.4);
  background: rgba(239,68,68,0.06);
}
.row-btn.danger:hover {
  color: #fff;
  border-color: rgba(239,68,68,0.7);
  background: rgba(239,68,68,0.18);
}
.actions-cell { text-align: right; }

/* ────────────────────────── Toasts ────────────────────────── */
.toast-stack {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 300;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  min-width: 280px;
  max-width: 360px;
  padding: 12px 16px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(20,24,40,0.95), rgba(12,16,28,0.95));
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  animation: toastIn 0.25s ease;
}
.toast.fade {
  animation: toastOut 0.4s ease forwards;
}
.toast .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 4px;
}
.toast .body {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg);
}
.toast.fill .head { color: var(--accent); }
.toast.cancel .head { color: var(--fg-dim); }
.toast.reject .head { color: var(--bad); }
.toast.partial_fill .head { color: var(--accent-2); }
/* F65: error/warn variants for kill_switch, drawdown_halt, engine_error toasts */
.toast.error .head { color: var(--bad); font-weight: 700; }
.toast.error { border-left: 3px solid var(--bad); }
.toast.warn .head { color: var(--accent-2); font-weight: 600; }
.toast.warn { border-left: 3px solid var(--accent-2); }

@keyframes toastIn {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes toastOut {
  to { transform: translateX(20px); opacity: 0; }
}

/* ────────────────────────── Icon button ────────────────────────── */
.icon-btn {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  color: var(--fg-dim);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.icon-btn:hover { background: rgba(255,255,255,0.08); color: var(--fg); transform: translateY(-1px); }

/* ────────────────────────── Modal ────────────────────────── */
.modal {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: rgba(2,4,12,0.65);
  backdrop-filter: blur(12px);
  padding: 20px;
}
.modal-card {
  width: min(900px, 96vw);
  max-height: 90vh;
  display: flex; flex-direction: column;
  border-radius: 18px;
  overflow: hidden;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--line);
}
.modal-header h2 {
  margin: 0; font-size: 18px; letter-spacing: 0.06em;
  background: linear-gradient(90deg, #fff, #fbbf24);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tabs {
  display: flex; gap: 6px;
  padding: 12px 18px 0;
  border-bottom: 1px solid var(--line);
}
.tab {
  padding: 10px 18px;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--fg-dim);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.tab:hover { color: var(--fg); }
.tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}
.tab-pane {
  padding: 22px 24px;
  overflow-y: auto;
  flex: 1;
}

.form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.form-row label {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-faint);
}
.form-row .hint-inline {
  margin-left: 8px;
  text-transform: none; letter-spacing: 0;
  color: var(--fg-faint);
}
.form-row input,
.form-row select,
.form-row textarea {
  padding: 11px 14px;
  background: rgba(0,0,0,0.32);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 13px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.form-row textarea {
  /* Tailwind CDN ships with preflight off and Chrome/Safari default-style
     <textarea> with white-on-white. Force the dark-theme inheritance. */
  background: rgba(0,0,0,0.32);
  color: var(--fg);
  resize: vertical;
  line-height: 1.5;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(16,185,129,0.18);
}

/* Catch any other <textarea> not wrapped in .form-row (TradingView webhook
   message box, future tabs). Browser-default white background was leaking
   through Tailwind's preflight-off CDN. */
textarea {
  background: rgba(0,0,0,0.32);
  color: var(--fg);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 10px 14px;
}

.input-with-toggle {
  position: relative;
  display: flex;
}
.input-with-toggle input { flex: 1; padding-right: 44px; }
.toggle-eye {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px;
  border: 0; background: transparent;
  color: var(--fg-faint);
  cursor: pointer; font-size: 16px;
  border-radius: 6px;
}
.toggle-eye:hover { color: var(--fg); background: rgba(255,255,255,0.05); }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 18px;
}
.form-grid .span2 { grid-column: 1 / -1; }
@media (max-width: 720px) { .form-grid { grid-template-columns: 1fr; } }

.form-section {
  margin: 22px 0 12px;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent-2);
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.modal-actions {
  display: flex; align-items: center; gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  margin-top: 18px;
}
.back-btn { background: transparent; border-color: transparent; color: var(--fg-dim); padding: 4px 0; }
.back-btn:hover { color: var(--fg); transform: none; background: transparent; }

/* ────────────────────────── Integrations panel ────────────────────────── */
.integration-card {
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(99,102,241,0.04), rgba(255,255,255,0.015));
  padding: 18px 20px;
}
.integration-head { margin-bottom: 14px; }
.integration-title {
  font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase;
  color: #a5b4fc; font-weight: 600;
}
.integration-sub { margin-top: 6px; font-size: 12px; color: var(--fg-dim); }

.copy-row { display: flex; gap: 8px; align-items: stretch; }
.copy-row input, .copy-row textarea {
  flex: 1;
  padding: 10px 12px;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  color: var(--fg);
  font-family: var(--font-mono); font-size: 12px;
  outline: none;
  resize: vertical;
}
.copy-row textarea { line-height: 1.5; min-height: 110px; }

.howto { margin: 0; padding-left: 20px; color: var(--fg-dim); font-size: 13px; line-height: 1.7; }
.howto li { margin-bottom: 6px; }
.howto strong { color: var(--fg); font-weight: 600; }
.howto em { color: var(--accent-2); font-style: normal; }

.accounts-list { display: flex; flex-direction: column; gap: 10px; }
.account-edit-card {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: rgba(255,255,255,0.025);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.1s ease;
}
.account-edit-card:hover { border-color: rgba(16,185,129,0.5); transform: translateY(-1px); }
.account-edit-card .left { display: flex; flex-direction: column; gap: 4px; }
.account-edit-card .left .name { font-weight: 600; }
.account-edit-card .left .id { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); }
.account-edit-card .right { display: flex; gap: 6px; }

/* ────────────────────────── Pager ────────────────────────── */
.pager {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.pager-btn { padding: 6px 12px; font-size: 12px; }
.pager-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.pager-pages { display: flex; gap: 4px; }
.pager-pages .page-num {
  min-width: 30px;
  padding: 6px 10px;
  font-family: var(--font-mono); font-size: 12px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  color: var(--fg-dim);
  cursor: pointer;
}
.pager-pages .page-num:hover { color: var(--fg); background: rgba(255,255,255,0.08); }
.pager-pages .page-num.active {
  background: rgba(16,185,129,0.15);
  border-color: rgba(16,185,129,0.5);
  color: var(--accent);
}
.pager-info { margin-left: auto; color: var(--fg-faint); font-size: 11px; }

/* ────────────────────────── Strategies page ────────────────────────── */
.strategy-nav { list-style: none; margin: 0; padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.strategy-nav li.empty { padding: 12px 14px; color: var(--fg-faint); font-size: 12px; text-align: center; }
.strategy-nav .strategy-item {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(255,255,255,0.02);
  cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.strategy-nav .strategy-item:hover { background: rgba(255,255,255,0.05); }
.strategy-nav .strategy-item.active {
  border-color: rgba(16,185,129,0.55);
  background: rgba(16,185,129,0.08);
}
.strategy-nav .strategy-item .name-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.strategy-nav .strategy-item .name { font-weight: 600; font-size: 13px; }
.rating-badge {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.04);
  color: var(--fg-dim);
}
.rating-badge.rating-high { color: var(--good); border-color: rgba(34,197,94,0.45); background: rgba(34,197,94,0.10); }
.rating-badge.rating-mid  { color: var(--accent-2); border-color: rgba(251,191,36,0.45); background: rgba(251,191,36,0.10); }
.rating-badge.rating-low  { color: var(--bad); border-color: rgba(239,68,68,0.45); background: rgba(239,68,68,0.08); }
#strategyDetailHeader { display: flex; align-items: center; gap: 10px; }
.strategy-nav .strategy-item .meta {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  color: var(--fg-faint);
}
.strategy-detail-body { padding: 18px 22px; }
.strategy-detail-body .desc { color: var(--fg-dim); margin: 0 0 16px; font-size: 13px; line-height: 1.55; }
.strategy-detail-body .used-by {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint);
  margin-bottom: 18px;
}
.strategy-detail-body .used-by .pill {
  background: rgba(16,185,129,0.10); color: var(--accent);
  padding: 2px 8px; border-radius: 999px; margin-right: 6px;
  border: 1px solid rgba(16,185,129,0.35);
}
.strategy-detail-body .params-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 18px;
}
@media (max-width: 720px) { .strategy-detail-body .params-grid { grid-template-columns: 1fr; } }
.strategy-detail-body .help { margin-top: 4px; font-size: 11px; color: var(--fg-faint); }
.strategy-detail-body .actions { display: flex; gap: 10px; margin-top: 18px; align-items: center; }
.strategy-detail-body .save-status { font-family: var(--font-mono); font-size: 12px; color: var(--fg-faint); }
.strategy-detail-body .save-status.ok { color: var(--accent); }
.strategy-detail-body .save-status.err { color: var(--bad); }
.strategy-empty { padding: 24px; color: var(--fg-faint); text-align: center; }

/* Risk-level presets — 4 one-click buttons at the top of the strategy form */
.risk-levels {
  margin: 0 0 18px 0;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line-strong);
}
.risk-levels-label {
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 10px;
}
.risk-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 720px) { .risk-buttons { grid-template-columns: repeat(2, 1fr); } }
.risk-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 8px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.02);
  color: var(--fg-dim);
  font-family: var(--font-display);
  font-size: 12px;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease, transform 0.1s ease;
}
.risk-btn:hover { transform: translateY(-1px); color: var(--fg); }
.risk-btn .lab { font-weight: 600; font-size: 13px; }
.risk-btn .sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-faint);
  letter-spacing: 0.04em;
}
.risk-btn.level-low.active        { border-color: rgba(34,197,94,0.55);  background: rgba(34,197,94,0.10);  color: var(--good); }
.risk-btn.level-moderate.active   { border-color: rgba(251,191,36,0.55); background: rgba(251,191,36,0.10); color: var(--accent-2); }
.risk-btn.level-aggressive.active { border-color: rgba(249,115,22,0.55); background: rgba(249,115,22,0.10); color: #f97316; }
.risk-btn.level-madmax.active     { border-color: rgba(239,68,68,0.6);   background: rgba(239,68,68,0.12);  color: var(--bad); }
.risk-btn.level-low:hover        { border-color: rgba(34,197,94,0.45); }
.risk-btn.level-moderate:hover   { border-color: rgba(251,191,36,0.45); }
.risk-btn.level-aggressive:hover { border-color: rgba(249,115,22,0.45); }
.risk-btn.level-madmax:hover     { border-color: rgba(239,68,68,0.5); }
.risk-hint { margin-top: 10px; font-size: 11px; color: var(--fg-faint); }

/* ────────────────────────── Tickers / group chips ────────────────────────── */
.group-chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 8px 0;
}
.group-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.03);
  color: var(--fg-dim);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.group-chip:hover { border-color: rgba(16,185,129,0.45); color: var(--fg); }
.group-chip .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--fg-faint);
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
.group-chip .name { font-weight: 600; }
.group-chip .count {
  font-family: var(--font-mono);
  font-size: 10px;
  background: rgba(255,255,255,0.06);
  padding: 1px 7px;
  border-radius: 999px;
  color: var(--fg-faint);
}
.group-chip.active {
  border-color: rgba(16,185,129,0.6);
  background: rgba(16,185,129,0.10);
  color: var(--fg);
}
.group-chip.active .dot {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(16,185,129,0.7);
}
.group-chip.active .count { background: rgba(16,185,129,0.18); color: var(--accent); }

.universe-preview {
  margin-top: 6px;
  font-size: 11px;
  color: var(--fg-faint);
  letter-spacing: 0.03em;
}

/* OCC option-symbol pretty cell — used in Open Orders / Positions / History */
.opt-cell { display: flex; flex-direction: column; gap: 2px; }
.opt-cell .opt-head { display: flex; align-items: baseline; gap: 6px; font-family: var(--font-mono); }
.opt-cell .opt-root { font-weight: 600; color: var(--fg); }
.opt-cell .opt-strike { color: var(--fg); }
.opt-cell .opt-type {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  letter-spacing: 0.06em;
}
.opt-cell .opt-type.up   { background: rgba(34,197,94,0.16);  color: var(--good); }
.opt-cell .opt-type.down { background: rgba(239,68,68,0.16); color: var(--bad);  }
.opt-cell .opt-exp { font-size: 10px; color: var(--fg-faint); letter-spacing: 0.04em; }

/* Scrollbars */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* ── Sleeves tab ────────────────────────────────────────────────────────── */
.sleeve-alloc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  padding: 14px;
}
.sleeve-alloc-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px 14px;
}
.sleeve-alloc-card .sleeve-name {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.sleeve-alloc-card .sleeve-pct {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 22px;
  font-weight: 700;
  margin-top: 4px;
}
.sleeve-alloc-card .sleeve-target {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  margin-top: 2px;
}
.sleeve-alloc-card .sleeve-bar {
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: 3px;
  margin-top: 10px;
  overflow: hidden;
}
.sleeve-alloc-card .sleeve-bar > div {
  height: 100%;
  border-radius: 3px;
  transition: width 0.4s ease;
}
.sleeve-alloc-card.vrp   .sleeve-bar > div { background: #6366f1; }
.sleeve-alloc-card.trend .sleeve-bar > div { background: #10b981; }
.sleeve-alloc-card.cash  .sleeve-bar > div { background: #fbbf24; }

/* ── Audit tab (v1.1.14) ─────────────────────────────────────────────── */
.audit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 900px) { .audit-grid { grid-template-columns: 1fr; } }

.audit-floor {
  padding: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.audit-floor-stat {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 12px;
}
.audit-floor-stat.fail   { border-color: rgba(239, 68, 68, 0.5); }
.audit-floor-stat.warn   { border-color: rgba(251, 191, 36, 0.5); }
.audit-floor-stat.ok     { border-color: rgba(34, 197, 94, 0.4); }
.audit-floor-stat .label {
  font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.audit-floor-stat .value {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 16px; font-weight: 600; margin-top: 2px;
}
.audit-floor-stat .delta {
  font-family: var(--font-mono, monospace);
  font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 2px;
}

.audit-dd {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.audit-dd-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.audit-dd-row:last-child { border-bottom: none; padding-bottom: 0; }
.audit-dd-row .label {
  font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.audit-dd-row .value {
  font-family: var(--font-mono, monospace); font-size: 18px; font-weight: 700;
}
.audit-dd-row .value.warn { color: #fbbf24; }
.audit-dd-row .value.fail { color: #ef4444; }

.audit-trace {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.audit-trace-form {
  display: flex; gap: 8px; align-items: center;
}
.audit-trace-form input {
  flex: 0 0 140px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  color: inherit;
  font-family: var(--font-mono, monospace);
  text-transform: uppercase;
}

/* ── Cost Watcher tab (v1.1.14 placeholder) ───────────────────────────── */
.cost-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  padding: 14px;
}
.cost-stat {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cost-stat .label {
  font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.cost-stat .value {
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 22px; font-weight: 700;
}

/* ── Three Rules footer ───────────────────────────────────────────────── */
.footer-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  font-size: 11px;
  color: rgba(255,255,255,0.45);
  flex: 1;
}
.footer-rules .rules-label {
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-right: 4px;
}
.footer-rules .rules-item strong { color: rgba(255,255,255,0.7); margin-right: 4px; }
.footer-rules .rules-sep { color: rgba(255,255,255,0.2); }

/* ── Research / Cost Watcher (v1.2.0) ───────────────────────────────── */
.link {
  color: #6366f1;
  text-decoration: none;
}
.link:hover { text-decoration: underline; }

.btn-ghost {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.55);
  padding: 4px 8px;
  font-size: 12px;
}
.btn-ghost:hover { color: #ef4444; border-color: rgba(239,68,68,0.5); }

#costWatcherStatus.ok, #researchLlmState.ok { color: #22c55e; }
#costWatcherStatus.err, #researchLlmState.err { color: #ef4444; }

/* v1.2.51: Filled-orders + History row chips. CLOSED = no longer held;
   OPEN = still in the live positions snapshot. */
.row-closed-chip,
.row-open-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 0.7em;
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: 3px;
  vertical-align: middle;
}
.row-closed-chip {
  background: rgba(239,68,68,0.18);
  color: #fca5a5;
  border: 1px solid rgba(239,68,68,0.35);
}
.row-open-chip {
  background: rgba(34,197,94,0.15);
  color: #86efac;
  border: 1px solid rgba(34,197,94,0.35);
}

/* ──────────────────────────────────────────────────────────────────────
   v1.2.55: Mobile-friendly UI pass.
   Targets: phones (≤480px) and small tablets (≤720px).
   Single-source mobile stylesheet so future tweaks live in one place.
   ────────────────────────────────────────────────────────────────────── */

/* Topnav: 14 tabs side-by-side easily push the page wide on anything
   under ~1280px. Scroll the nav horizontally instead of wrapping the
   whole document. Active tab stays visible; arrow/swipe to reveal more. */
@media (max-width: 1100px) {
  .topnav {
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .topnav::-webkit-scrollbar { display: none; }
  .nav-tab { white-space: nowrap; flex: 0 0 auto; }
}

/* Tables — get horizontal scroll containers on any narrow screen. */
@media (max-width: 720px) {
  /* Every <table> outside .table-wrap could overflow on mobile. Wrap any
     direct child via overflow-x on its parent .panel. */
  .panel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { font-size: 12px; }
  th, td { padding: 8px 10px; }
  /* RC-tables: prevent tables from squashing cells below readable width on
     375px viewport. Tables inside .table-wrap scroll horizontally instead. */
  .table-wrap table { min-width: 560px; width: max-content; }
}

@media (max-width: 720px) {
  /* Topbar: wrap so the kill button + clock pills don't push the page wide. */
  .topbar {
    flex-wrap: wrap;
    gap: 10px;
    padding: 12px 14px;
    position: static;          /* sticky on a wrapped 2-row bar wastes screen */
  }
  .brand { gap: 10px; }
  .logo { width: 36px; height: 36px; }
  .brand-text .name { font-size: 15px; letter-spacing: 0.14em; }
  .brand-text .sub  { font-size: 10px; letter-spacing: 0.12em; }
  .status-cluster {
    width: 100%;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
  }
  .ws-pill { padding: 5px 10px; font-size: 11px; }
  .uptime-pill { padding: 5px 10px; font-size: 11px; }
  /* Kill button keeps label but smaller — it's the most important affordance. */
  .kill-btn {
    padding: 8px 12px;
    font-size: 11px;
    letter-spacing: 0.10em;
  }
  /* Top nav — horizontal scroll instead of wrap so the active tab stays
     visible and the operator can scroll left/right. */
  .topnav {
    padding: 0 8px;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    position: static;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;     /* Firefox */
  }
  .topnav::-webkit-scrollbar { display: none; }
  .nav-tab {
    padding: 10px 14px;
    font-size: 12px;
    letter-spacing: 0.08em;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  /* Main shell already collapses to 1 col at 980px — tighten gutter. */
  main {
    padding: 14px !important;
  }
  /* Hero card padding shrink. */
  .hero-card { padding: 16px 14px; }
  .hero-row { gap: 8px; }
  .hero-name { font-size: 18px !important; }
  /* Engine action buttons — keep on one line via smaller padding. */
  .btn-compact {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }
  .hero-engine-actions { gap: 6px; flex-wrap: wrap; margin-left: 0 !important; }
  /* Quick-toggle pills wrap to a fresh line so the row doesn't run wide. */
  .opt-mode-toggle {
    padding: 6px 10px;
    font-size: 11px;
  }
  /* Stat tiles — still 2-col at 720, drop to 1-col below 480 (rule below). */
  .stat { padding: 10px 12px; }
  .stat-label { font-size: 10px; letter-spacing: 0.14em; }
  .stat-value { font-size: 16px !important; }
  .stat-hint  { font-size: 9px; }
  /* Modals — tighter chrome on small screens. */
  .modal { padding: 0; }
  .modal-card {
    width: 100vw !important;
    max-width: 100vw;
    max-height: 100vh;
    border-radius: 0;
  }
  .modal-header { padding: 12px 14px; }
  .modal-header h2 { font-size: 16px; }
  /* Form rows: stack label + input on a single column. */
  .form-row { display: block !important; }
  .form-row label { display: block; margin-bottom: 4px; }
  .form-row input,
  .form-row select,
  .form-row textarea { width: 100%; box-sizing: border-box; }
  /* Modal action footer — wrap, full-width buttons. */
  .modal-actions { flex-wrap: wrap; gap: 8px; padding: 12px 14px; }
  .modal-actions .btn { flex: 1 1 auto; min-width: 120px; }
  /* Account cards — slightly tighter. */
  .account-card { padding: 10px 12px; }
  .account-card .name { font-size: 13px; }
  /* Auth gate fits the screen cleanly. */
  .auth-card { padding: 24px 20px; }
}

/* Phone-only — 1-col stat grid, even tighter spacing. */
@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr !important; gap: 8px; }
  .stat { padding: 12px 14px; }
  .stat-value { font-size: 18px !important; }
  /* Hide the secondary status pills — wsPill only stays. The clocks are
     non-essential on a phone and were the main horizontal-overflow culprit. */
  #uptimePill, #liveClock { display: none; }
  /* Brand subtitle (version) hidden — we still have it in Settings. */
  .brand-text .sub { display: none; }
}

/* iOS form-input zoom prevention: fonts ≥16px don't trigger auto-zoom. */
@media (max-width: 720px) {
  input[type="text"],
  input[type="number"],
  input[type="password"],
  input[type="email"],
  input[type="search"],
  textarea,
  select { font-size: 16px; }
  /* Stat-input keeps its bigger styled font when active (≥16px already). */
}

/* RC-02: enforce 44×44 touch-target floor on mobile for compact button variants
   (.btn-compact, .opt-mode-toggle, .alpha-presets > button, etc). The desktop
   styles above intentionally render small for the dense console; this floor
   ONLY kicks in on touch viewports. */
@media (max-width: 720px) {
  .btn,
  .btn-compact,
  .opt-mode-toggle,
  .alpha-presets > button,
  .btn-ghost,
  .ticket-confirm-actions .btn,
  .nav-tab,
  button:not(.kill-btn) {
    min-height: 44px;
  }
  /* Icon-only square controls also need ≥44 in width. */
  .btn[data-icon-only],
  button[aria-label][class*="icon"] {
    min-width: 44px;
  }
}

/* RC-14: respect user's reduced-motion preference across the whole console.
   Trading UIs run a lot of transitions; honor the system preference. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ───────────────────────── Option Eval module ───────────────────────── */
/* The page's own 18px flex gap plus two always-empty placeholder divs
   (oeStatusLine, oeStaleBanner) and the subnav's 12px top margin stacked
   ~60px of dead space between the top bar and the Monitor row. Collapse the
   gap, hide the empties when they carry nothing, and drop the subnav's top
   margin so the tab row sits right under the header. */
#page-optioneval { gap: 0; }
#page-optioneval > #oeStatusLine:empty,
#page-optioneval > #oeStaleBanner:empty { display: none; }
#page-optioneval .oe-subnav { margin-top: 0; }
#page-optioneval .oe-loading { padding: 24px; color: var(--fg-dim); }
.oe-sample-warn { font-family: var(--font-mono); font-size: 12px; padding: 8px 12px; border-radius: 8px;
  margin-bottom: 10px; border: 1px solid rgba(251,191,36,0.5); background: rgba(251,191,36,0.10);
  color: var(--accent-2); font-weight: 600; }
.oe-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.oe-runline { font-family: var(--font-mono); font-size: 12px; color: var(--fg-dim); }
.oe-badge { font-family: var(--font-mono); font-size: 11px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--fg-dim); white-space: nowrap; }
.oe-badge.live { color: var(--good); border-color: rgba(34,197,94,0.5); background: rgba(34,197,94,0.08); }
.oe-badge.sample { color: var(--accent-2); border-color: rgba(251,191,36,0.5); background: rgba(251,191,36,0.08); }
.oe-badge.dry { color: var(--accent-3); border-color: rgba(99,102,241,0.5); background: rgba(99,102,241,0.10); }
.oe-age { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); }
.oe-age.warn { color: var(--accent-2); font-weight: 700; }
/* v4.16.0 column ⟳ + v4.17.0 sector refresh - clearly visible by default */
.oe-refresh-btn { display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; cursor: pointer; user-select: none;
  font-size: 14px; color: var(--accent); border: 1px solid var(--line-strong);
  background: rgba(99,102,241,0.08); vertical-align: middle; }
.oe-refresh-btn:hover, .oe-refresh-btn:focus-visible { color: var(--fg);
  border-color: var(--accent); background: rgba(99,102,241,0.18); outline: none; }
.oe-refresh-btn.busy { pointer-events: none;
  animation: oe-spin 0.8s linear infinite; }
.oe-sector-refresh { color: var(--accent); border-color: var(--line-strong); }
.oe-sector-refresh.busy { pointer-events: none; opacity: 0.6; }
/* v4.17.1: the selected board chip is visibly selected. boardChipRow has
   assigned .btn-primary to the active chip since v4.4.6, but no rule ever
   existed for it - selection was invisible on every tab that shows chips. */
.btn.btn-primary { background: var(--accent); border-color: var(--accent);
  color: #ffffff; font-weight: 700; }
.oe-badge.longg { color: #60a5fa; border-color: rgba(96,165,250,0.5); background: rgba(96,165,250,0.10); }
.oe-badge.shortg { color: var(--accent-2); border-color: rgba(251,191,36,0.5); background: rgba(251,191,36,0.10); }
.oe-spinner { width: 12px; height: 12px; border: 2px solid var(--line-strong); border-top-color: var(--accent);
  border-radius: 50%; animation: oe-spin 0.8s linear infinite; display: inline-block; }
@keyframes oe-spin { to { transform: rotate(360deg); } }
.oe-stale-banner { font-family: var(--font-mono); font-size: 13px; padding: 10px 14px; border-radius: 8px;
  margin-bottom: 10px; border: 1px solid rgba(239,68,68,0.5); background: rgba(239,68,68,0.10); color: var(--bad); }
.oe-stale-banner.partial { border-color: rgba(251,191,36,0.5); background: rgba(251,191,36,0.10); color: var(--accent-2); }
.oe-subnav { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0; align-items: center; }
.oe-subnav-group { display: flex; align-items: center; gap: 6px; padding-right: 14px;
  border-right: 1px solid var(--line); }
.oe-subnav-group:last-child { border-right: none; padding-right: 0; }
.oe-subnav-glabel { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--fg-faint); margin-right: 2px; }
.oe-subnav button { font-family: var(--font-mono); font-size: 12px; padding: 5px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg-2); color: var(--fg-dim); cursor: pointer; }
.oe-subnav button.active { color: var(--fg); border-color: var(--accent); background: rgba(16,185,129,0.08); }
.oe-layout { display: flex; flex-direction: column; gap: 16px; }
.oe-gridwrap { overflow-x: auto; }
table.oe-grid { border-collapse: collapse; width: 100%; font-size: 12px; }
table.oe-grid th, table.oe-grid td { border: 1px solid var(--line); padding: 4px 6px; text-align: center; }
table.oe-grid th.oe-rowlabel, table.oe-grid td.oe-rowlabel { text-align: left; white-space: nowrap;
  position: sticky; left: 0; background: var(--bg-1); z-index: 2; font-family: var(--font-mono); }
table.oe-grid thead th { background: var(--bg-2); vertical-align: top; min-width: 92px; }
.oe-col-ticker { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.oe-col-ticker.trig { color: var(--good); text-shadow: 0 0 12px rgba(34,197,94,0.5); }
.oe-jumpbtn { cursor: pointer; }
.oe-jumpbtn:hover, .oe-jumpbtn:focus-visible { text-decoration: underline; outline: 2px solid var(--accent); outline-offset: 2px; }
.oe-col-price { font-family: var(--font-mono); font-size: 11px; color: var(--fg-dim); }
.oe-col-price .up { color: var(--good); } .oe-col-price .down { color: var(--bad); }
.oe-verdict-badge { font-family: var(--font-mono); font-size: 9px; padding: 1px 6px; border-radius: 999px; display: inline-block; }
.oe-verdict-badge.fired { background: rgba(34,197,94,0.16); color: var(--good); }
.oe-verdict-badge.vetoed { background: rgba(139,92,246,0.16); color: #c4b5fd; }
.oe-verdict-badge.quiet { background: rgba(90,98,133,0.14); color: var(--fg-faint); }
.oe-verdict-line { font-family: var(--font-mono); font-size: 12px; margin-top: 6px; padding: 6px 10px; border-radius: 8px; }
.oe-verdict-line.fired { background: rgba(34,197,94,0.08); color: var(--good); }
.oe-verdict-line.vetoed { background: rgba(139,92,246,0.08); color: #c4b5fd; }
.oe-verdict-line.quiet { background: var(--bg-2); color: var(--fg-dim); }
.oe-sentiment { font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; border-radius: 999px;
  display: inline-block; margin-left: 3px; }
.oe-sentiment.up { background: rgba(34,197,94,0.14); color: var(--good); }
.oe-sentiment.down { background: rgba(239,68,68,0.12); color: var(--bad); }
.oe-sentiment.flat, .oe-sentiment.na { background: rgba(90,98,133,0.14); color: var(--fg-faint); }
.oe-spark { width: 100%; height: 60px; }
.oe-spark .line { fill: none; stroke: var(--accent); stroke-width: 2; }
.oe-spark .zero { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; }
.oe-score { font-family: var(--font-mono); font-weight: 700; }
.oe-score.factor { font-weight: 400; color: var(--fg-dim); font-size: 10px; margin-left: 4px; }
.oe-pcbar { display: inline-flex; height: 6px; width: 66px; border-radius: 3px; overflow: hidden;
  border: 1px solid var(--line); vertical-align: middle; }
.oe-pcbar .call { background: var(--good); } .oe-pcbar .put { background: var(--bad); }
.oe-cell { font-family: var(--font-mono); font-size: 11px; cursor: default; }
.oe-pill { display: inline-block; min-width: 40px; padding: 2px 6px; border-radius: 999px; font-weight: 600; }
.oe-cellbtn { cursor: pointer; }
.oe-cellbtn:hover, .oe-cellbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.oe-drawer-reading { background: var(--bg-2); border-radius: 8px; padding: 10px 12px; margin-bottom: 12px; }
.oe-drawer-reading h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin: 0 0 6px; }
.oe-drawer-reading p { margin: 2px 0; font-size: 12px; color: var(--fg); }
.oe-GREEN { background: rgba(34,197,94,0.16); color: var(--good); }
.oe-RED { background: rgba(239,68,68,0.14); color: var(--bad); }
.oe-GRAY { background: rgba(90,98,133,0.18); color: var(--fg-faint); }
.oe-AMBER { background: rgba(251,191,36,0.16); color: var(--accent-2); }
.oe-sysbadge { display: inline-block; min-width: 30px; padding: 1px 4px; border-radius: 5px; font-family: var(--font-mono);
  font-size: 10px; border: 1px solid var(--line); color: var(--fg-faint); }
.oe-sysbadge.lit { color: var(--fg); border-color: var(--accent); background: rgba(16,185,129,0.12); font-weight: 700; }
.oe-sysbadge.gate { border-style: dashed; }
.oe-sysbadge.event { color: #c4b5fd; border-color: #8b5cf6; background: rgba(139,92,246,0.16); font-weight: 700; }
.oe-info { cursor: pointer; color: var(--fg-faint); border: 1px solid var(--line); border-radius: 50%;
  font-size: 9px; width: 14px; height: 14px; line-height: 12px; display: inline-block; text-align: center; margin-left: 4px; }
.oe-info:hover { color: var(--accent); border-color: var(--accent); }
.oe-arrow.bull { color: var(--good); } .oe-arrow.bear { color: var(--bad); }
/* v4.12.0 master-signal pair: LEFT day aggregate (slightly muted), RIGHT
   immediate. Neutral aggregate keeps the slot so pairs stay aligned. */
.oe-ms-agg { opacity: .68; margin-right: 1px; }
.oe-ms-neutral { color: var(--muted, #8a8f98); }
/* v4.129.0 four-slot trail: [WEEK][DAY] TICKER [PREV][LATEST]. Opacity is
   the age gradient - the older a slot, the fainter - so the eye lands on
   the newest read first and still sees the shape of the trail behind it. */
.oe-ms-week { opacity: .55; margin-right: 1px; font-size: .9em; }
.oe-ms-prev { opacity: .55; margin-left: 1px; font-size: .9em; }
.oe-ms-now  { margin-left: 1px; }
/* v4.14.2: purple flat marker - price data measured, tape genuinely neutral.
   Distinct from gray (no read) so a quiet name never looks like a dead one. */
.oe-ms-flat { color: #a78bfa; }
/* v4.129.0: the same trail one row down, on every V1-V8 cell. Smaller and
   tighter than the header pair so four glyphs plus the state pill still fit
   a grid column; the age gradient matches the header exactly. */
.oe-vcell { white-space: nowrap; }
.oe-vtrail { font-size: 10px; line-height: 1; vertical-align: middle; }
.oe-vtrail-grp { display: inline-block; letter-spacing: -0.5px; }
/* The older slot of each pair is dimmer, never invisible: at 9px/.40 the
   week read vanished on a light background, which would have made the
   whole point of the trail decorative. */
.oe-vt-week, .oe-vt-prev { opacity: .55; }
.oe-vt-day, .oe-vt-now { opacity: .9; }
.oe-vcell .oe-pill { margin: 0 3px; }
@media (max-width: 768px){
  /* Phone: the aggregates are the context, the two point reads are the
     news - keep all four but tighten to hold the column width. */
  .oe-vtrail { font-size: 8px; }
  .oe-vcell .oe-pill { margin: 0 2px; }
}
.oe-confluence { margin: 8px 0; padding: 6px 10px; border-radius: 8px; font-family: var(--font-mono); font-size: 12px;
  color: #c4b5fd; border: 1px solid rgba(139,92,246,0.5); background: rgba(139,92,246,0.10); }
.oe-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; max-width: 700px; }
.oe-form-grid label { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-dim); }
.oe-form-grid input, .oe-form-grid select { font-family: var(--font-mono); font-size: 13px; padding: 6px 8px;
  border-radius: 6px; border: 1px solid var(--line); background: var(--bg-2); color: var(--fg); }
.oe-poseval-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin-top: 8px; }
.oe-chart-card { border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px; background: var(--bg-1); }
.oe-chart-wrap { position: relative; height: 200px; }
.oe-value-cards { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.oe-value-cards .oe-card { flex: 1 1 180px; max-width: 240px; text-align: center; }
.oe-value-cards .sys { font-size: 20px; }
.oe-summary-block { border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px 14px; background: var(--bg-1); }
.oe-summary-block h3 { font-family: var(--font-display); font-size: 13px; margin: 0 0 8px; color: var(--fg-dim); }
.oe-summary-list { margin: 0; padding-left: 18px; font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--fg); }
.oe-summary-list li { margin-bottom: 6px; }
.oe-rail { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; }
.oe-rail h3 { flex-basis: 100%; font-family: var(--font-display); font-size: 13px; margin: 0 0 4px; color: var(--fg-dim); }
.oe-card { flex: 1 1 260px; max-width: 340px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px; background: var(--bg-1); }
.oe-card .oe-card-h { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.oe-card .sys { font-family: var(--font-display); font-weight: 700; font-size: 13px; }
.oe-card .tk { font-family: var(--font-mono); color: var(--fg-dim); }
.oe-card .det, .oe-card .tmpl { font-size: 11px; color: var(--fg-dim); margin-top: 4px; }
.oe-card .foot { font-size: 10px; color: var(--fg-faint); margin-top: 6px; border-top: 1px solid var(--line); padding-top: 5px; }
.oe-card.pending { border-left: 3px solid var(--accent-2); }
.oe-outcome { margin-top: 6px; display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.oe-outcome input, .oe-outcome select { font-size: 11px; padding: 2px 4px; width: 64px; background: var(--bg-2);
  border: 1px solid var(--line); color: var(--fg); border-radius: 5px; }
.oe-outcome button { font-size: 11px; padding: 2px 8px; }
.oe-drawer { position: fixed; top: 0; right: 0; height: 100%; width: 420px; max-width: 92vw; z-index: 200;
  background: var(--bg-1); border-left: 1px solid var(--line-strong); box-shadow: -20px 0 50px rgba(0,0,0,0.5);
  transform: translateX(100%); transition: transform 0.2s ease; overflow-y: auto; padding: 20px; }
.oe-drawer.open { transform: translateX(0); }
.oe-drawer h2 { font-family: var(--font-display); font-size: 18px; margin: 0 0 2px; }
.oe-drawer .sub { color: var(--fg-dim); font-family: var(--font-mono); font-size: 12px; margin-bottom: 14px; }
.oe-drawer section { margin-bottom: 14px; }
.oe-drawer section h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin: 0 0 4px; }
.oe-drawer section p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--fg); white-space: pre-wrap; }
.oe-drawer .close { position: absolute; top: 14px; right: 16px; cursor: pointer; color: var(--fg-dim); font-size: 20px; }
.oe-analytics table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: var(--font-mono); margin-bottom: 18px; }
.oe-analytics th, .oe-analytics td { border: 1px solid var(--line); padding: 5px 8px; text-align: right; }
.oe-analytics th:first-child, .oe-analytics td:first-child { text-align: left; }
.oe-settings-row { display: flex; gap: 8px; align-items: center; margin: 4px 0; font-size: 12px; font-family: var(--font-mono); }
.oe-settings-row input[type=text] { width: 80px; text-transform: uppercase; }
/* colour legend */
.oe-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin: 12px 0 4px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-1);
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-dim); }
.oe-legend-title { font-family: var(--font-display); font-weight: 700; color: var(--fg); font-size: 12px; }
.oe-legend .oe-pill { min-width: 0; padding: 1px 7px; }
.oe-legend-note { flex-basis: 100%; color: var(--fg-faint); line-height: 1.5; }
/* tickers sub-view */
.oe-tk-layout { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .oe-tk-layout { grid-template-columns: 1fr; } }
.oe-tk-nav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 8px; }
.oe-tk-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-2);
  color: var(--fg-dim); cursor: pointer; font-family: var(--font-mono); }
.oe-tk-item:hover { border-color: var(--line-strong); color: var(--fg); }
.oe-tk-item.active { border-color: var(--accent); background: rgba(16,185,129,0.08); color: var(--fg); }
.oe-tk-sym { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.oe-tk-meta { font-size: 10px; color: var(--fg-faint); }
/* v4.5.2: board-quote price/day%% coloring on the no-pool stubs (text ->
   --good-text per the v4.4.9 contrast rule; --bad passes on white). */
.oe-tk-meta .up { color: var(--good-text, var(--good)); }
.oe-tk-meta .down { color: var(--bad); }
.oe-tk-detail section { margin-bottom: 16px; }
.oe-tk-detail h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin: 0 0 6px; }
.oe-tk-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.oe-tk-bigsym { font-family: var(--font-display); font-weight: 700; font-size: 22px; }
.oe-tk-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .oe-tk-grid2 { grid-template-columns: 1fr; } }
.oe-tk-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.oe-tk-tbl td, .oe-tk-tbl th { border-bottom: 1px solid var(--line); padding: 4px 6px; text-align: left; vertical-align: top; }
.oe-tk-tbl th { color: var(--fg-faint); font-weight: 600; font-size: 10px; text-transform: uppercase; }
.oe-tk-tbl .oe-prov { color: var(--fg-faint); font-size: 10px; font-family: var(--font-mono); }
.oe-tk-fire { font-size: 12px; margin: 4px 0; color: var(--fg-dim); }
/* strategy band */
.oe-strat-rating { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint);
  border: 1px solid var(--line); border-radius: 999px; padding: 0 6px; margin-left: 5px; }
.oe-strat-toggle { cursor: pointer; color: var(--fg-faint); display: inline-block; width: 14px;
  transition: transform .12s; margin-right: 2px; }
.oe-strat-toggle:hover { color: var(--accent); }
.oe-strat-toggle.open { transform: rotate(90deg); }
.oe-strat-sub { padding-left: 26px !important; color: var(--fg-dim); font-size: 11px; }
tr.oe-strat-comp td { background: rgba(255,255,255,0.015); }
/* comparison report */
.oe-cmp-alert { margin: 4px 0; padding: 6px 10px; border-radius: 8px; font-family: var(--font-mono);
  font-size: 12px; color: var(--accent-2); border: 1px solid rgba(251,191,36,0.45); background: rgba(251,191,36,0.08); }
.oe-cmp-in { color: var(--good); font-family: var(--font-mono); }
.oe-cmp-out { color: var(--bad); font-family: var(--font-mono); }
.oe-cmp-dim { color: var(--fg-faint); }
tr.oe-cmp-star td { background: rgba(59,130,246,0.08); font-weight: 600; }
tr.oe-cmp-wall td { background: rgba(251,146,60,0.08); }
.oe-lad { display: inline-block; height: 9px; border-radius: 2px; vertical-align: middle; margin-right: 6px; min-width: 2px; }
.oe-lad.callbar { background: #60a5fa; }
.oe-lad.putbar { background: #fb923c; }
.oe-lens-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }

/* ══════════════════════════════════════════════════════════════════
   ROBINHOOD LIGHT THEME (v1.6.0) — Arun's spec: white background,
   Robinhood green. Appended as an override layer so the dark rules
   above stay intact as the fallback reference.
   ══════════════════════════════════════════════════════════════════ */
:root {
  --bg-0: #ffffff;
  --bg-1: #f7f8fa;
  --bg-2: #ffffff;
  --line: rgba(0,0,0,0.07);
  --line-strong: rgba(0,0,0,0.14);
  --fg: #1b1b1d;
  --fg-dim: #6f767e;
  --fg-faint: #9aa0a6;
  --accent: #00c805;        /* Robinhood green */
  --accent-2: #b7862c;      /* amber, darkened for white bg */
  --accent-3: #5856d6;
  --danger: #ff5000;        /* Robinhood down-red */
  --danger-2: #d64500;
  --good: #00c805;
  --bad: #ff5000;
  --glow-emerald: 0 6px 20px rgba(0,200,5,0.15);
  --glow-gold: none;
  /* v4.4.9 design tokens: --border/--panel were referenced by 8 rules but
     never defined (borders rendered currentColor); --good-text is the
     AA-contrast green for TEXT on white (#00c805 is ~2.0:1 - fills only);
     radius + motion scale for the whole Option Eval surface. */
  --border: var(--line-strong);
  --panel: var(--bg-1);
  --good-text: #009104;
  --r-1: 6px;
  --r-2: 10px;
  --r-pill: 999px;
  --t-fast: 120ms ease;
}
body { background: #ffffff; }
.bg-gradient { background: #ffffff; }
.grid-overlay { display: none; }

/* Topbar: clean white, RH-style */
.topbar { background: rgba(255,255,255,0.92); border-bottom: 1px solid var(--line); }
.logo { background: rgba(0,200,5,0.10); border-color: rgba(0,200,5,0.35); box-shadow: none; }
.brand-text .name { background: none; -webkit-background-clip: initial; background-clip: initial; color: #1b1b1d; }
.brand-text .name em { color: var(--accent); font-style: normal; }

/* Cards & panels: flat white with soft borders (no glass) */
.glass, .auth-card, .modal-card {
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  backdrop-filter: none;
}
.auth-gate { background: rgba(247,248,250,0.92); backdrop-filter: blur(6px); }
.auth-card h2 { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--accent); }
.auth-card code { background: var(--bg-1); }

/* Inputs: white fields, gray borders, green focus */
.auth-card input, input, select, textarea {
  background: #ffffff !important;
  color: var(--fg) !important;
  border-color: var(--line-strong) !important;
}
input:focus, select:focus, textarea:focus, .auth-card input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(0,200,5,0.15) !important;
}
input::placeholder, textarea::placeholder { color: var(--fg-faint) !important; }

/* Buttons */
.btn { background: #ffffff; }
.btn:hover { background: var(--bg-1); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.danger { background: var(--danger); border-color: var(--danger); }
.auth-card button { background: var(--accent); }

/* Sidebar account cards */
.sidebar-header .count { background: var(--bg-1); }
.account-card { background: #ffffff; }
.account-card:hover { border-color: rgba(0,0,0,0.25); box-shadow: 0 2px 10px rgba(0,0,0,0.07); }
.account-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 4px 16px rgba(0,200,5,0.14);
}
.account-card .pill.paper { color: #1d4ed8; border-color: rgba(29,78,216,0.35); background: rgba(29,78,216,0.06); }
.account-card .pill.live  { color: var(--danger); border-color: rgba(255,80,0,0.4); background: rgba(255,80,0,0.06); }
.account-card .pill.run   { color: #009104; border-color: rgba(0,200,5,0.45); background: rgba(0,200,5,0.08); }
.badge.paper { color: #1d4ed8; border-color: rgba(29,78,216,0.35); }
.badge.live  { color: var(--danger); border-color: rgba(255,80,0,0.4); background: rgba(255,80,0,0.06); }

/* Tables */
th { color: var(--fg-dim); }
tbody tr:hover { background: var(--bg-1); }

/* Good/bad numbers hold RH green/red via --good/--bad already. */

/* Any leftover translucent dark fills read as light gray panels */
.pin-row .pin-box { background: #ffffff !important; }
.stat, .mini-positions-list li, .ticket-confirm-summary { background: var(--bg-1); }
.nav-tab { color: var(--fg-dim); }
.nav-tab:hover { color: var(--fg); }
/* Tracker + Analyzer (v1.6.0) */
.tracker-form { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px; }
.tracker-form input, .tracker-form select {
  padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line-strong);
  font-family: var(--font-mono); font-size: 13px; min-width: 120px; flex: 1 1 120px;
}
.tracker-form button { flex: 0 0 auto; }
.signal-list { list-style: none; margin: 0; padding: 8px 14px 14px; display: flex; flex-direction: column; gap: 8px; }
.signal-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg-1);
  font-size: 13px;
}
.signal-item .sig-kind { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.06em; }
.signal-item.sev-info .sig-kind { color: #1d4ed8; }
.signal-item.sev-warn .sig-kind { color: #b7862c; }
.signal-item.sev-strong .sig-kind { color: var(--accent); }
.signal-item .sig-msg { flex: 1; }
.signal-item .sig-time { color: var(--fg-faint); font-family: var(--font-mono); font-size: 11px; }
.sig-badge {
  display: inline-block; min-width: 18px; text-align: center;
  background: var(--danger); color: #fff; border-radius: 999px;
  font-size: 11px; font-family: var(--font-mono); padding: 1px 5px; margin-left: 4px;
}
.tracker-notes {
  margin: 0; padding: 14px 18px; white-space: pre-wrap;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.55; color: var(--fg);
}
#anMatrix td.pnl.up { color: var(--good); }
#anMatrix td.pnl.down { color: var(--bad); }
#anMatrix small { color: var(--fg-dim); }
.signal-list .empty, td.empty { color: var(--fg-faint); padding: 12px 14px; }
.page-title { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--fg); }
/* v1.6.1 — mega menu readability: the dark translucent nav bar rendered as
   muddy gray on the white theme and the tab labels were illegible. */
.topnav { background: #ffffff; border-bottom: 1px solid var(--line); }
.nav-tab { color: #56585c; font-weight: 600; }
.nav-tab:hover { color: var(--fg); background: var(--bg-1); border-radius: 8px 8px 0 0; }
.nav-tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ══════════════════════════════════════════════════════════════════
   v1.8.0 — SIDEBAR WORKSPACE (desktop) + clean card mobile
   Base: design 03. Desktop polish borrows from 01 (Robinhood Pure):
   generous cards, big numerals, calm whitespace. Mobile hides the rail
   for a bottom tab bar (design 04 treatment).
   Appended last so it wins the cascade over the earlier theme layers.
   ══════════════════════════════════════════════════════════════════ */
:root{
  /* Neutral dark-slate rail (de-greened for legibility) — green stays only as
     the active/pnl accent, so text no longer reads green-on-green. */
  --rail:#0e141c; --rail-ink:#e8eef7; --rail-dim:#96a3b7; --rail-line:#243040;
  --rail-accent:#35e05b;
  --ws-bg:#f6f7f4;
}
body{background:var(--ws-bg)!important}
.bg-gradient,.grid-overlay{display:none!important}

/* shell grid */
.app-shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh;gap:0;padding:0!important}

/* ── left rail ── */
.rail{background:var(--rail);color:var(--rail-ink);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin}
.rail-brand{padding:18px 18px 12px}
.rail-brand .brand{gap:11px}
.rail-brand .logo{background:rgba(53,224,91,.12);border:1px solid rgba(53,224,91,.3);box-shadow:none;width:38px;height:38px}
.rail-brand .name{background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;color:#fff!important;font-size:16px}
.rail-brand .name em{color:var(--rail-accent);font-style:normal}
.rail-brand .sub{color:var(--rail-dim);font-size:10.5px}

.rail-accounts{padding:2px 12px 6px}
.rail-accounts .sidebar-header{color:var(--rail-dim);padding:6px 8px}
.rail-accounts .sidebar-header .count{background:#1c2431;color:var(--rail-ink)}
.rail .account-card{background:#151d27;border:1px solid var(--rail-line);border-radius:12px;padding:11px 13px}
.rail .account-card:hover{border-color:#3a4a5e;box-shadow:none;transform:none}
.rail .account-card.active{border-color:rgba(53,224,91,.55);background:#172231;box-shadow:0 0 0 1px rgba(53,224,91,.45)}
.rail .account-card .name{color:#eaf1fb;font-size:13px}
.rail .account-card .id,.rail .account-card .pnl,.rail .account-card .meta{color:var(--rail-dim)}
.rail .account-card .pnl.up{color:var(--rail-accent)}.rail .account-card .pnl.down{color:#ff7a45}
/* Collapsed by default — show only name/id/pnl; expand the detail rows (badges,
   strategy, caps) only for the SELECTED account. Click a card to expand it. */
.rail .account-card .meta{display:none}
.rail .account-card.active .meta{display:flex}
.rail .account-card::after{content:"▸";position:absolute;top:11px;right:12px;color:var(--rail-dim);font-size:10px;transition:transform .15s}
.rail .account-card.active::after{transform:rotate(90deg)}

.railnav{display:flex;flex-direction:column;padding:6px 10px 0;gap:2px}
.railgroup{margin-top:12px}
.railgroup h5{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--rail-dim);
  padding:0 12px 5px;margin:0;font-weight:600}
.railnav .nav-tab{display:block;width:100%;text-align:left;padding:8px 12px;border-radius:9px;border:0;
  border-bottom:0;background:transparent;color:var(--rail-ink);font-size:13.5px;font-weight:500;
  letter-spacing:0;text-transform:none;cursor:pointer;transition:background .12s,color .12s}
.railnav .nav-tab:hover{background:#1a2330;color:#fff}
.railnav .nav-tab.active{background:rgba(53,224,91,.15);color:#fff;font-weight:600;border-bottom:0;box-shadow:inset 2px 0 0 var(--rail-accent)}

.rail-foot{margin-top:auto;display:flex;align-items:center;gap:8px;padding:14px 16px;border-top:1px solid var(--rail-line)}
.rail-ver{font-family:var(--font-mono);font-size:11px;color:var(--rail-dim);margin-right:auto}
.rail-foot .icon-btn{color:var(--rail-dim)}
.rail-foot .icon-btn:hover{color:#fff;background:#1a2330}
/* #291 path fallback + #292 deploy-freeze rail badges */
.rail-badges{display:flex;flex-wrap:wrap;gap:4px;padding:0 16px 4px}
.rail-badges:empty{display:none}
.rail-badge{font-family:var(--font-mono);font-size:9px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;padding:2px 6px;border-radius:4px;line-height:1.4;white-space:nowrap}
.rail-badge-warn{background:rgba(255,170,0,.16);color:#ffb020;border:1px solid rgba(255,170,0,.42)}
.rail-badge-freeze{background:rgba(255,80,0,.16);color:var(--danger);border:1px solid rgba(255,80,0,.42)}
/* #299 AI Trader (shadow desk) two-column layout + positions table */
.sd-twocol{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:12px;align-items:start}
@media (max-width:980px){.sd-twocol{grid-template-columns:1fr}}
/* v4.80.0 mega-menu tabs: All Positions / Books / Ledger / Closed */
.sd-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 12px}
.sd-tab{font-size:12px;font-weight:600;padding:6px 14px;border-radius:8px;border:1px solid rgba(128,128,128,.28);background:transparent;color:inherit;cursor:pointer;opacity:.7}
.sd-tab:hover{opacity:1}
.sd-tab.sd-tab-on{opacity:1;background:rgba(99,102,241,.16);border-color:rgba(99,102,241,.5);color:#a5b4fc}
.sd-tab .mono{opacity:.65;font-weight:500;margin-left:4px}
.sd-grp{font-size:10px;padding:1px 5px;border-radius:4px;background:rgba(56,189,248,.12);color:#38bdf8;border:1px solid rgba(56,189,248,.3);white-space:nowrap}
@media (max-width:520px){.sd-tab{font-size:11px;padding:5px 9px}}
/* v4.81.0 Trader Desk: 25 persona chips + head card */
.sd-pchips{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 12px}
.sd-pchip{font-size:11px;font-weight:600;padding:4px 10px;border-radius:999px;border:1px solid rgba(128,128,128,.28);background:transparent;color:inherit;cursor:pointer;opacity:.7}
.sd-pchip:hover{opacity:1}
.sd-pchip.sd-pchip-on{opacity:1;background:rgba(56,189,248,.14);border-color:rgba(56,189,248,.5);color:#38bdf8}
.sd-pchip .mono{margin-left:4px;font-weight:500;opacity:.75}
.sd-trader-head{margin-bottom:12px}
.sd-pending{margin-top:6px;display:flex;gap:5px;flex-wrap:wrap;align-items:center}
@media (max-width:520px){.sd-pchip{font-size:10px;padding:3px 8px}}
/* v4.82.0 tournament: ranking table + goal bars + eye brief */
.sd-rankctl{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:4px 0 10px}
.sd-ranknav{display:inline-flex;gap:8px;align-items:center;margin-left:10px}
.sd-rk-top td{background:rgba(56,189,248,.05)}
.sd-rk-rank{font-size:14px}
.sd-goalbar{width:120px;height:8px;border-radius:4px;background:rgba(128,128,128,.18);overflow:hidden}
.sd-goalfill{height:100%;border-radius:4px;background:linear-gradient(90deg,#38bdf8,#34d399)}
.sd-goalfill-neg{background:linear-gradient(90deg,#f87171,#fbbf24)}
/* v4.88.0: ranking totals strip + intraday capital sparkline */
.sd-rktotals{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:0 0 10px;padding:6px 10px;border:1px solid rgba(56,189,248,.25);border-radius:8px;background:rgba(56,189,248,.05);font-size:12px}
/* v4.92.0 Tournament v2: mode toggle, zero-pick pinning, inf/low-n badges */
.sd-rk-zero td{opacity:.45}
.sd-rk-zero td .sd-nopicks{opacity:1;font-size:10px;white-space:nowrap;cursor:help}
.sd-n5{font-size:8px;padding:0 5px;vertical-align:middle}
.sd-infbadge{font-size:8px;padding:0 5px;border-radius:999px;border:1px solid rgba(52,211,153,.5);color:#34d399;text-transform:uppercase;letter-spacing:.04em;vertical-align:middle;margin-left:3px}
.sd-avgwin{font-weight:700}
@media (max-width:520px){.sd-rankctl .sd-tab{font-size:10px;padding:3px 7px}}
/* #353: degenerate confidence-model banner */
.sd-cm-warn{margin:0 0 10px;padding:8px 12px;border:1px solid rgba(220,70,70,.5);border-radius:8px;background:rgba(220,70,70,.1);color:#d8564e;font-size:12px;line-height:1.5}
.sd-spark{display:block;opacity:.9}
.sd-eyebrief{margin-top:8px;padding:8px 10px;border:1px solid rgba(56,189,248,.3);border-radius:8px;background:rgba(56,189,248,.06);font-size:12px;display:flex;flex-direction:column;gap:3px}
.sd-pchip-p2{border-style:dashed;border-color:rgba(52,211,153,.5)}
.sd-pchip-p2.sd-pchip-on{background:rgba(52,211,153,.14);color:#34d399}
.sd-eyebrief ul{margin:2px 0 0 18px;padding:0}
.sd-needs{margin-top:2px}
.sd-tablewrap{overflow-x:auto}
/* #376: the desk's by-ticker search table ships as a bare table.sd-table with
   no .sd-tablewrap around it - its 11 columns body-scrolled a 375px phone
   sideways. A block-level table is its own overflow-x container, so the page
   body stays fixed-width; every other wide desk/eval table already sits in
   .sd-tablewrap or an inline overflow-x:auto div. */
table.sd-table{display:block;overflow-x:auto;max-width:100%}
.jb-live .jb-bar-fill,.jb-bar.jb-live .jb-bar-fill{background:#38bdf8}
.jb-bar.jb-live{background:rgba(56,189,248,.14)}
.jb-cell.jb-live{color:#0284c7}
.jb-stat.jb-live .jb-stat-v{color:#0284c7}
.jb-retry{font-size:10px;padding:2px 8px;border-radius:5px;border:1px solid #cbd5e1;background:#f8fafc;color:#475569;cursor:pointer;margin-left:8px}
.jb-retry:hover{background:#eef2f7}
.jb-retry-urgent{border-color:#ef4444;color:#b91c1c;background:#fef2f2;font-weight:700}
.jb-retry-urgent:hover{background:#fee2e2}
.sd-xgb{font-size:10px;padding:1px 5px;border-radius:4px;background:rgba(99,102,241,.14);color:#a5b4fc;border:1px solid rgba(99,102,241,.35);cursor:help}
.sd-xgb-learn{background:rgba(148,163,184,.12);color:var(--fg-faint,#94a3b8);border-color:rgba(148,163,184,.3)}
.wb-mode-on{background:rgba(99,102,241,.2);border-color:rgba(99,102,241,.5);color:#a5b4fc}
.sd-postable{border-collapse:collapse;font-size:12px;width:100%}
.sd-postable th{text-align:left;padding:4px 10px 4px 0;opacity:.55;font-weight:600;white-space:nowrap}
.sd-postable td{padding:4px 10px 4px 0;white-space:nowrap;border-top:1px solid rgba(128,128,128,.12)}
.sd-info{border:1px solid rgba(128,128,128,.45);background:transparent;color:inherit;border-radius:50%;width:16px;height:16px;line-height:13px;font-size:10px;font-style:italic;cursor:pointer;margin-left:5px}
.sd-info:hover{border-color:var(--accent);color:var(--accent)}
.sd-sigrow td{background:rgba(128,128,128,.06)}
.sd-sigwrap{display:flex;flex-wrap:wrap;gap:4px;max-height:180px;overflow-y:auto}
.sd-sigchip{font-size:10px;padding:1px 6px;border:1px solid rgba(128,128,128,.3);border-radius:4px;opacity:.85}
.sd-reason{font-size:11px}
.sd-action{white-space:nowrap}
.sd-sell{border:1px solid rgba(220,70,70,.55);background:transparent;color:#d8564e;border-radius:4px;font-size:10px;padding:2px 8px;cursor:pointer;font-weight:600}
.sd-sell:hover{background:rgba(220,70,70,.12);border-color:#d8564e}
.sd-sell:disabled{opacity:.55;cursor:default}
/* v4.91.0: Missed tab summary strip + GRAY badge, Strategy Registry chips */
.sd-missed-strip{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:0 0 10px;padding:6px 10px;border:1px solid rgba(251,191,36,.3);border-radius:8px;background:rgba(251,191,36,.05);font-size:12px}
.sd-graybadge{font-size:9px;padding:1px 6px;border-radius:999px;color:var(--fg-faint,#94a3b8);border:1px solid rgba(148,163,184,.4);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;cursor:help}
.sd-reg{border:1px solid rgba(128,128,128,.2);border-radius:8px;padding:8px 10px;margin-bottom:6px;font-size:12px;display:flex;flex-direction:column;gap:3px}
.sd-reg-head{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.sd-reg-chip{font-size:10px;font-weight:700;padding:1px 8px;border-radius:999px;border:1px solid;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.sd-reg-amber{color:#b7862c;border-color:rgba(251,191,36,.5);background:rgba(251,191,36,.1)}
.sd-reg-green{color:#059669;border-color:rgba(52,211,153,.5);background:rgba(52,211,153,.12)}
.sd-reg-gray{color:var(--fg-faint,#94a3b8);border-color:rgba(148,163,184,.35);background:rgba(148,163,184,.1)}

/* ── workspace ── */
.workspace{min-width:0;display:flex;flex-direction:column;background:var(--ws-bg)}
.wtop{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;
  padding:13px 30px;background:rgba(246,247,244,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.wtop .rail-toggle{display:none;background:none;border:1px solid var(--line);border-radius:9px;
  font-size:16px;padding:5px 11px;cursor:pointer;color:var(--fg)}
.wtop-brand{display:flex;align-items:center;gap:7px;font-family:var(--font-display);font-weight:700;
  font-size:14px;letter-spacing:.02em;color:var(--fg);white-space:nowrap}
.wtop-brand em{color:var(--accent);font-style:normal}
.wtop .uptime-pill{margin-left:0}
/* v3.4.2: Run now + Refresh moved from the Option Eval header into the top
   bar, grouped on the right next to KILL SWITCH (the margin-left:auto that
   used to sit on .kill-btn now sits on the first button of that group). */
.wtop #topRunNow{margin-left:auto}
.wtop .kill-btn{margin-left:0}
@media (max-width:900px){
  /* Tablets: uptime + wall clock are the most expendable chips - drop them
     so sync + Run now/Refresh + KILL SWITCH fit without horizontal scroll. */
  .wtop{padding:11px 14px}
  .wtop #uptimePill,.wtop #liveClock{display:none}
}
@media (max-width:560px){
  /* Narrow phones: drop the OE buttons + info pills (uptime/clock/sync were
     overflowing the header and clipping KILL SWITCH off-screen); keep brand,
     connection state, and the kill switch - the three that matter. Compact
     padding/sizing so those three actually fit inside 375px. */
  .wtop{padding:10px 8px;gap:6px}
  .wtop .topbar-oe,.wtop #lastSyncPill,.wtop #uptimePill,.wtop #liveClock{display:none}
  .wtop .ws-pill{padding:4px 8px;font-size:10px}
  .wtop .kill-btn{margin-left:auto;white-space:nowrap;padding:7px 10px;font-size:10px}
}
/* ── #321b News Desk ticker: marquee below the header, above the pages.
   hidden attribute = artifact absent (GRAY - no fake bar). Two .nt-half
   copies inside .nt-track + translateX(-50%) = a seamless loop; hover
   pauses so items stay readable/clickable for their title tooltips. ── */
.news-ticker{overflow:hidden;white-space:nowrap;border-bottom:1px solid var(--line);
  background:var(--bg-1,rgba(0,0,0,.04));font-size:12px;line-height:1;user-select:none}
.news-ticker[hidden]{display:none}
.nt-track{display:inline-flex;width:max-content;animation:nt-scroll 240s linear infinite;will-change:transform}
.news-ticker:hover .nt-track{animation-play-state:paused}
@keyframes nt-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.nt-half{display:inline-flex;align-items:center;padding:7px 0}
.nt-src{color:var(--fg-faint);font-size:10px;letter-spacing:.08em;margin:0 14px;cursor:help}
.nt-sep{color:var(--fg-faint);margin:0 10px}
.nt-item{color:var(--fg-dim);display:inline-flex;align-items:center;gap:5px;cursor:help}
.nt-when{color:var(--fg-faint);font-size:11px}
.nt-item.nt-hi{color:#ef4444}
.nt-item.nt-hi .nt-when{color:#ef444499}
.nt-imp{font-size:9px;font-weight:700;color:#ef4444;border:1px solid #ef444455;
  border-radius:4px;padding:1px 4px;background:rgba(239,68,68,.08)}
.nt-item.nt-earn{color:var(--fg)}
.nt-item.nt-earn b{color:var(--accent-2,#fbbf24);font-weight:700}
.nt-days{font-size:10px;color:var(--fg-faint)}
@media (prefers-reduced-motion:reduce){.nt-track{animation:none}}

/* News Desk page (#321b, Point 2) - the clickable desk behind the ticker.
   Dark-themed to match the app (unlike the light Jobs page). */
.nd-page { padding: 16px 20px 60px; max-width: 1000px; }
.nd-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.nd-title h2 { margin: 0 0 3px; font-size: 20px; color: var(--fg); }
.nd-title p { margin: 0; font-size: 12px; color: var(--fg-dim); max-width: 560px; }
.nd-daypick { display: flex; align-items: center; gap: 6px; }
.nd-nav, .nd-today, .nd-refresh { background: var(--bg-1, rgba(255,255,255,.05)); border: 1px solid var(--line); color: var(--fg-dim); border-radius: 7px; padding: 5px 9px; cursor: pointer; font-size: 13px; }
.nd-nav:hover, .nd-today:hover, .nd-refresh:hover { color: var(--fg); border-color: var(--accent, #6366f1); }
.nd-nav:disabled { opacity: .4; cursor: default; }
.nd-today.on { color: var(--accent, #818cf8); border-color: var(--accent, #6366f1); }
.nd-dsel { background: var(--bg-1, rgba(255,255,255,.05)); border: 1px solid var(--line); color: var(--fg); border-radius: 7px; padding: 5px 8px; font-size: 12px; font-family: ui-monospace, Menlo, monospace; }
.nd-gen { font-size: 10px; color: var(--fg-faint); margin-bottom: 12px; }

.nd-sec { margin-bottom: 22px; }
.nd-h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--fg-dim); margin: 0 0 9px; display: flex; align-items: center; gap: 8px; }
.nd-count { background: var(--bg-1, rgba(255,255,255,.06)); border: 1px solid var(--line); color: var(--fg-dim); border-radius: 20px; min-width: 20px; text-align: center; font-size: 11px; padding: 1px 7px; }
.nd-daygroup { margin-bottom: 12px; }
.nd-dayhead { font-size: 12px; color: var(--fg); margin: 0 0 6px; display: flex; align-items: center; gap: 8px; }
.nd-daytag { font-size: 9px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-radius: 4px; padding: 1px 6px; }
.nd-daytag.nd-today { background: rgba(99,102,241,.15); color: #a5b4fc; border: 1px solid rgba(99,102,241,.4); }
.nd-daytag.nd-upcoming { background: rgba(16,185,129,.12); color: #6ee7b7; border: 1px solid rgba(16,185,129,.35); }
.nd-daytag.nd-past { background: var(--bg-1, rgba(255,255,255,.05)); color: var(--fg-faint); border: 1px solid var(--line); }

.nd-item { display: flex; gap: 12px; align-items: flex-start; padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px; background: var(--bg-1, rgba(255,255,255,.02)); margin-bottom: 6px; }
.nd-item.nd-hi { border-color: rgba(239,68,68,.4); }
.nd-when { flex: 0 0 auto; min-width: 74px; display: flex; flex-direction: column; gap: 2px; }
.nd-time { font-size: 13px; color: var(--fg); font-weight: 600; }
.nd-date { font-size: 10px; color: var(--fg-faint); }
.nd-tk { font-size: 14px; color: var(--accent-2, #fbbf24); font-weight: 700; }
.nd-body { flex: 1 1 auto; min-width: 0; }
.nd-name { font-size: 13px; color: var(--fg); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.nd-imp { font-size: 9px; font-weight: 700; border-radius: 4px; padding: 1px 5px; }
.nd-imp-high { color: #ef4444; border: 1px solid #ef444455; background: rgba(239,68,68,.08); }
.nd-imp-med { color: #f59e0b; border: 1px solid #f59e0b55; background: rgba(245,158,11,.08); }
.nd-days { font-size: 10px; color: var(--fg-faint); font-weight: 400; }
.nd-src { font-size: 10.5px; color: var(--fg-faint); margin-top: 3px; }
.nd-empty { font-size: 12px; color: var(--fg-faint); font-style: italic; padding: 10px 11px; border: 1px dashed var(--line); border-radius: 9px; }
.nd-notes { margin-top: 8px; font-size: 11px; color: var(--fg-dim); }
.nd-notes summary { cursor: pointer; color: var(--fg-dim); }
.nd-notes ul { margin: 8px 0 0; padding-left: 18px; }
.nd-notes li { margin-bottom: 6px; line-height: 1.5; }
.nd-msg { padding: 40px; text-align: center; color: var(--fg-faint); font-family: ui-monospace, Menlo, monospace; }
.nd-err-msg { color: var(--danger, #ef4444); }
@media (max-width: 700px) { .nd-top { flex-direction: column; } }

.workspace>main,.workspace>.page,.workspace>section{padding:0}
.workspace> section, .workspace .page{padding:0}
/* the pages section gets breathing room */
#mainApp .workspace >section:last-child,
#mainApp .workspace{gap:0}
.workspace .page{padding:24px 30px 40px}
.page-header{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.04)}

/* Robinhood-pure polish on cards & numbers */
.glass,.hero-card,.chart-card{background:#fff!important;border:1px solid var(--line)!important;
  box-shadow:0 1px 2px rgba(0,0,0,.04),0 6px 20px rgba(0,0,0,.05)!important;backdrop-filter:none!important}
.hero-name{font-size:26px;letter-spacing:-.01em}
.stat .v,.kpi .v,.hero .equity{font-variant-numeric:tabular-nums}

/* mobile bottom nav — hidden on desktop */
.botnav{display:none}

@media(max-width:900px){
  .app-shell{grid-template-columns:1fr}
  .rail{position:fixed;left:0;top:0;bottom:0;width:270px;z-index:80;transform:translateX(-100%);
    transition:transform .22s ease;box-shadow:0 0 40px rgba(0,0,0,.4)}
  .app-shell.rail-open .rail{transform:translateX(0)}
  .wtop .rail-toggle{display:inline-block}
  .workspace .page{padding:16px 16px 90px}
  /* bottom tab bar */
  .botnav{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:70;
    background:var(--rail);border-radius:22px;padding:9px 6px 7px;
    box-shadow:0 12px 30px rgba(15,27,19,.4);justify-content:space-around}
  .botnav button{background:none;border:0;color:var(--rail-dim);font-size:9.5px;font-weight:700;
    letter-spacing:.04em;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;padding:2px 8px}
  .botnav button.on{color:var(--rail-accent)}
  .botnav .bi{font-size:18px;line-height:1}
  /* mobile density: hide the noisiest desktop-only columns via utility later */
}

/* ══════════════════════════════════════════════════════════════════
   v1.9.0 — MOBILE HOME (design 04). Desktop: hidden. Phone: the card view.
   ══════════════════════════════════════════════════════════════════ */
#mobileHome{display:none}
@media(max-width:760px){
  #mobileHome.show{display:block;padding:8px 16px 96px;font-family:'Sora',var(--font-display),sans-serif;
    background:linear-gradient(180deg,#eef1ec,#f6f7f4);min-height:calc(100vh - 52px)}
  #mobileHome .mh-hello{padding:12px 6px 8px}
  #mobileHome .mh-hi{font-size:13px;color:var(--fg-dim);font-weight:600}
  #mobileHome .mh-eq{font-size:38px;font-weight:800;letter-spacing:-.02em;margin-top:4px;color:var(--fg);font-variant-numeric:tabular-nums}
  #mobileHome .mh-delta{display:inline-block;margin-top:8px;font-size:12.5px;font-weight:700;border-radius:999px;padding:5px 12px}
  #mobileHome .mh-delta.up{color:#0a9410;background:#dcf7d8}
  #mobileHome .mh-delta.down{color:#ff5000;background:#ffe4d6}
  #mobileHome .mh-spark{margin:8px 6px 14px}
  #mobileHome .mh-accts{display:flex;gap:8px;margin:0 6px 16px;overflow-x:auto}
  #mobileHome .mh-accts span{font-size:11.5px;font-weight:700;padding:8px 14px;border-radius:999px;background:#fff;border:1.5px solid transparent;color:var(--fg-dim);white-space:nowrap;cursor:pointer}
  #mobileHome .mh-accts span.on{border-color:var(--fg);color:var(--fg)}
  #mobileHome .mh-card{background:#fff;border-radius:22px;padding:18px;box-shadow:0 2px 12px rgba(16,20,8,.06);margin-bottom:12px}
  #mobileHome .mh-card-hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
  #mobileHome .mh-card-hd h4{font-size:14px;font-weight:800;margin:0}
  #mobileHome .mh-card-hd a{font-size:12px;font-weight:700;color:#0a9410;cursor:pointer}
  #mobileHome .mh-pos{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #f0f2ec}
  #mobileHome .mh-pos:last-child{border-bottom:0;padding-bottom:0}
  #mobileHome .mh-ava{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;font-weight:800;font-size:11px;flex:none}
  #mobileHome .mh-pos-nm{font-weight:700;font-size:13.5px}
  #mobileHome .mh-pos-sub{font-size:11px;color:var(--fg-faint);margin-top:1px}
  #mobileHome .mh-pos-r{margin-left:auto;text-align:right}
  #mobileHome .mh-pos-v{font-weight:700;font-size:13.5px;font-variant-numeric:tabular-nums}
  #mobileHome .mh-pos-p{font-size:11.5px;font-weight:700}
  #mobileHome .mh-pos-p.up{color:#0a9410}#mobileHome .mh-pos-p.down{color:#ff5000}
  #mobileHome .mh-sig{border-radius:20px;padding:15px 18px;font-size:12.5px;line-height:1.5;margin-bottom:10px;color:#101408}
  #mobileHome .mh-sig b{display:block;font-size:13px;margin-bottom:3px}
  #mobileHome .mh-sig small{display:block;margin-top:7px;font-size:10.5px;color:rgba(16,20,8,.5);font-weight:600;letter-spacing:.05em}
  #mobileHome .mh-sig.grn{background:#dcf7d8}#mobileHome .mh-sig.but{background:#fff3cf}#mobileHome .mh-sig.blu{background:#ddedff}
  #mobileHome .mh-empty{color:var(--fg-faint);font-size:13px;padding:8px 0}
  #mobileHome .mh-fab{position:fixed;right:22px;bottom:88px;width:58px;height:58px;border-radius:50%;
    background:var(--accent);color:#fff;font-size:28px;font-weight:800;border:0;display:grid;place-items:center;
    box-shadow:0 14px 28px rgba(0,200,5,.4);z-index:75;cursor:pointer}
  /* when mobile home is up, hide the slim workspace top bar clutter for a cleaner feel */
  #mobileHome.show ~ .wtop{}
}

/* ===== Vibe Trading (vt-) ===== */
/* Mirrors the oe- visual language: mono runlines, pill badges, bordered
   cards on var(--bg-1), LIVE/SAMPLE provenance on every data panel.
   Everything is driven by the theme variables so it tracks whichever
   theme layer wins the cascade. Mobile-first: grids collapse to a single
   column and tables scroll inside .vt-tablewrap, so the page itself never
   scrolls horizontally at 375px. */

.vt-runline { font-family: var(--font-mono); font-size: 12px; color: var(--fg-dim); }
.vt-blurb { font-size: 13px; line-height: 1.55; color: var(--fg-dim); max-width: 860px; margin: 0 0 14px; }
.vt-blurb b { color: var(--fg); }
.vt-err { margin: 8px 0; padding: 10px 14px; border-radius: 8px; font-family: var(--font-mono); font-size: 12.5px;
  color: var(--bad); border: 1px solid rgba(239,68,68,0.5); background: rgba(239,68,68,0.08); overflow-wrap: anywhere; }
.vt-warnline { margin: 8px 0; padding: 8px 12px; border-radius: 8px; font-family: var(--font-mono); font-size: 12px;
  color: var(--accent-2); border: 1px solid rgba(251,191,36,0.45); background: rgba(251,191,36,0.08); }
.vt-skel { display: flex; flex-direction: column; gap: 10px; padding: 6px 0; }
.vt-skel-bar { height: 14px; border-radius: 6px;
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--line-strong) 50%, var(--bg-2) 75%);
  background-size: 200% 100%; animation: vt-shimmer 1.2s linear infinite; }
@keyframes vt-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* grouped sub-nav (same pattern as .oe-subnav) */
.vt-subnav { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0; align-items: center; }
.vt-subnav-group { display: flex; align-items: center; gap: 6px; padding-right: 14px;
  border-right: 1px solid var(--line); flex-wrap: wrap; }
.vt-subnav-group:last-child { border-right: none; padding-right: 0; }
.vt-subnav-glabel { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--fg-faint); }
.vt-subnav button { font-family: var(--font-mono); font-size: 12px; padding: 5px 12px; border-radius: 8px;
  border: 1px solid var(--line); background: transparent; color: var(--fg-dim); cursor: pointer; }
.vt-subnav button.active { color: var(--fg); border-color: var(--accent); background: rgba(16,185,129,0.08); }

/* badges & pills */
.vt-badge { font-family: var(--font-mono); font-size: 11px; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line-strong); color: var(--fg-dim); display: inline-block; }
.vt-badge.live { color: var(--good); border-color: rgba(34,197,94,0.5); background: rgba(34,197,94,0.08); }
.vt-badge.sample { color: var(--accent-2); border-color: rgba(251,191,36,0.5); background: rgba(251,191,36,0.08); }
.vt-pill { font-family: var(--font-mono); font-size: 10px; padding: 1px 8px; border-radius: 999px; display: inline-block;
  border: 1px solid var(--line); color: var(--fg-faint); text-transform: uppercase; letter-spacing: 0.04em; }
.vt-pill.done { color: var(--good); border-color: rgba(34,197,94,0.5); background: rgba(34,197,94,0.08); }
.vt-pill.fail { color: var(--bad); border-color: rgba(239,68,68,0.5); background: rgba(239,68,68,0.08); }
.vt-pill.run { color: var(--accent); border-color: rgba(16,185,129,0.6); background: rgba(16,185,129,0.10);
  animation: vt-pulse 1.6s ease-in-out infinite; }
.vt-pill.wait { color: var(--accent-2); border-color: rgba(251,191,36,0.5); background: rgba(251,191,36,0.08); }
.vt-pill.mode-paper { color: #1d4ed8; border-color: rgba(29,78,216,0.4); background: rgba(29,78,216,0.07); }
.vt-pill.mode-live { color: var(--bad); border-color: rgba(239,68,68,0.5); background: rgba(239,68,68,0.08); }
@keyframes vt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.vt-verdict { font-family: var(--font-mono); font-size: 10px; font-weight: 700; padding: 1px 8px;
  border-radius: 999px; display: inline-block; }
.vt-verdict.long { background: rgba(34,197,94,0.16); color: var(--good); }
.vt-verdict.short { background: rgba(239,68,68,0.14); color: var(--bad); }
.vt-verdict.neutral { background: rgba(90,98,133,0.16); color: var(--fg-faint); }
.vt-conf { font-family: var(--font-mono); font-size: 10px; color: var(--fg-dim); }
.vt-cost { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); }
.vt-kind { font-family: var(--font-mono); font-size: 9px; font-weight: 700; padding: 2px 7px; border-radius: 6px;
  letter-spacing: 0.06em; flex: none; }
.vt-kind.swarm { color: var(--accent-3); background: rgba(99,102,241,0.12); }
.vt-kind.shadow { color: #a855f7; background: rgba(168,85,247,0.12); }
.vt-kind.bench { color: var(--accent-2); background: rgba(251,191,36,0.14); }

/* sections / generic cards */
.vt-section { margin-top: 22px; }
.vt-section > h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent);
  margin: 0 0 8px; display: flex; align-items: center; gap: 10px; }
.vt-card { border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px 14px; background: var(--bg-1); }
.vt-card h5 { margin: 0 0 8px; font-size: 12px; color: var(--fg); }
.vt-card-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; }
.vt-card-title { font-family: var(--font-display); font-weight: 700; font-size: 15px; }

/* hero cards (overview) */
.vt-hero-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.vt-hero { text-align: left; cursor: pointer; border: 1px solid var(--line-strong); border-radius: 12px;
  padding: 12px 14px; background: var(--bg-1); color: var(--fg); font-family: inherit; }
.vt-hero:hover, .vt-hero:focus-visible { border-color: var(--accent); }
.vt-hero .k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fg-faint); }
.vt-hero .v { font-family: var(--font-mono); font-size: 20px; font-weight: 700; margin-top: 4px; }
.vt-hero .k2 { font-size: 10.5px; color: var(--fg-dim); margin-top: 4px; }
.vt-hero.good .v { color: var(--good); }
.vt-hero.bad .v { color: var(--bad); }

/* strategy family list */
.vt-strats { display: flex; flex-direction: column; gap: 6px; }
.vt-strat { display: flex; gap: 10px; align-items: baseline; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--bg-1); flex-wrap: wrap; }
.vt-strat-name { font-size: 12px; font-weight: 700; color: var(--fg); }
.vt-strat-desc { font-size: 12px; color: var(--fg-dim); }

/* teams */
.vt-preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.vt-preset-card { text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 5px;
  border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 14px; background: var(--bg-1);
  color: var(--fg); font-family: inherit; }
.vt-preset-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,0.08); }
.vt-preset-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.vt-preset-title { font-family: var(--font-display); font-weight: 700; font-size: 14px; }
.vt-preset-desc { font-size: 12px; color: var(--fg-dim); line-height: 1.45; }
.vt-preset-meta { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); }
.vt-preset-detail { margin-top: 14px; }
.vt-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 10px; }
.vt-detail-grid h5, .vt-runform h5 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--accent); margin: 0 0 6px; }
.vt-agent-list { display: flex; flex-direction: column; gap: 6px; }
.vt-agent { border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; background: var(--bg-2); }
.vt-agent-role { font-weight: 700; font-size: 12.5px; }
.vt-agent-meta { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-dim); margin-top: 2px;
  overflow-wrap: anywhere; }
.vt-layers { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.vt-layers li { font-size: 12px; color: var(--fg-dim); }
.vt-layer-n { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; color: var(--fg-faint);
  margin-right: 6px; }
.vt-task-chip { display: inline-block; font-family: var(--font-mono); font-size: 11px; padding: 2px 8px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); color: var(--fg); margin: 2px 2px 2px 0; }
.vt-runform { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }

/* forms */
.vt-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.vt-form label { display: flex; flex-direction: column; gap: 4px; font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-dim); }
.vt-form input, .vt-form select { font-family: var(--font-mono); font-size: 13px; padding: 7px 9px;
  border-radius: 6px; border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--fg); min-width: 110px; }
.vt-form .vt-grow { flex: 1 1 220px; }
.vt-form .vt-grow input { width: 100%; }
.vt-form button { flex: none; }
.vt-csv { width: 100%; font-family: var(--font-mono); font-size: 12px; border-radius: 8px;
  border: 1px solid var(--line-strong); background: var(--bg-2); color: var(--fg); padding: 8px 10px;
  margin-bottom: 8px; resize: vertical; }

/* runs list */
.vt-run { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-1); margin-bottom: 8px;
  overflow: hidden; }
.vt-run.open { border-color: var(--line-strong); }
.vt-run-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 12px; cursor: pointer; }
.vt-run-head:hover, .vt-run-head:focus-visible { background: var(--bg-2); outline: none; }
.vt-run-title { font-size: 12.5px; color: var(--fg); }
.vt-run-time { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); margin-left: auto; }
.vt-run-body { border-top: 1px solid var(--line); padding: 10px 12px; }
.vt-run-meta { font-family: var(--font-mono); font-size: 11px; color: var(--fg-dim); margin: 6px 0 10px; }
.vt-final { border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 8px;
  padding: 8px 12px; background: var(--bg-2); }
.vt-final-label { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; color: var(--fg-faint);
  margin-right: 6px; }
.vt-final-text { margin: 6px 0 0; font-size: 12.5px; color: var(--fg); line-height: 1.5; }
.vt-tasks { display: flex; flex-direction: column; gap: 6px; }
.vt-task { border: 1px solid var(--line); border-radius: 8px; background: var(--bg-2); }
.vt-task summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 10px;
  cursor: pointer; list-style: none; }
.vt-task summary::-webkit-details-marker { display: none; }
.vt-task summary::before { content: "▸"; color: var(--fg-faint); font-size: 10px; transition: transform 0.12s; }
.vt-task[open] summary::before { transform: rotate(90deg); }
.vt-task-id { font-family: var(--font-mono); font-size: 11px; font-weight: 700; }
.vt-task-role { font-size: 11.5px; color: var(--fg-dim); }
.vt-task-body { padding: 0 12px 10px; }
.vt-task-sum { margin: 4px 0 8px; font-size: 12px; color: var(--fg-dim); line-height: 1.5; }
.vt-pre { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--bg-1); border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px; line-height: 1.5; color: var(--fg); white-space: pre-wrap;
  overflow-wrap: anywhere; max-height: 340px; overflow-y: auto; }

/* chips (alpha zoo filter) */
.vt-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.vt-chip { font-family: var(--font-mono); font-size: 11px; padding: 4px 12px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: transparent; color: var(--fg-dim); cursor: pointer; }
.vt-chip.active { color: var(--fg); border-color: var(--accent); background: rgba(16,185,129,0.08); }

/* tables */
.vt-tablewrap { overflow-x: auto; }
.vt-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.vt-tbl td, .vt-tbl th { border-bottom: 1px solid var(--line); padding: 5px 8px; text-align: left;
  vertical-align: top; }
.vt-tbl th { color: var(--fg-faint); font-weight: 600; font-size: 10px; text-transform: uppercase;
  white-space: nowrap; }
.vt-formula { font-family: var(--font-mono); font-size: 10.5px; background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 5px; padding: 1px 5px; display: inline-block; max-width: 420px; overflow-wrap: anywhere; }
.vt-bench-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 8px; }
.vt-icbar { display: inline-block; width: 64px; height: 7px; border-radius: 4px; background: var(--bg-2);
  border: 1px solid var(--line); vertical-align: middle; margin-left: 6px; overflow: hidden; }
.vt-icbar i { display: block; height: 100%; }
.vt-icbar i.pos { background: var(--good); }
.vt-icbar i.neg { background: var(--bad); }
.vt-cat { font-family: var(--font-mono); font-size: 10px; font-weight: 700; padding: 1px 8px;
  border-radius: 999px; display: inline-block; }
.vt-cat.alive { background: rgba(34,197,94,0.16); color: var(--good); }
.vt-cat.reversed { background: rgba(251,191,36,0.16); color: var(--accent-2); }
.vt-cat.dead { background: rgba(90,98,133,0.18); color: var(--fg-faint); }
.vt-cat.na { background: var(--bg-2); color: var(--fg-faint); }

/* history / reports rows */
.vt-history { display: flex; flex-direction: column; gap: 6px; }
.vt-history-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--bg-1); font-size: 12px; }
.vt-hist-main { color: var(--fg); }
.vt-history-row .vt-run-time { margin-left: auto; }

/* shadow */
.vt-shadow-src { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vt-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.vt-stat { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg-1); }
.vt-stat .k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-faint); }
.vt-stat .v { font-family: var(--font-mono); font-size: 17px; font-weight: 700; margin-top: 4px; color: var(--fg); }
.vt-stat .k2 { font-size: 10px; color: var(--fg-dim); margin-top: 3px; }
.vt-stat.warn .v { color: var(--accent-2); }
.vt-light-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.vt-light { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--bg-1); }
.vt-light-head { display: flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700;
  color: var(--fg); text-transform: capitalize; }
.vt-light .vt-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--fg-faint); }
.vt-light.ok { border-color: rgba(34,197,94,0.45); }
.vt-light.ok .vt-dot { background: var(--good); }
.vt-light.mild { border-color: rgba(251,191,36,0.5); }
.vt-light.mild .vt-dot { background: var(--accent-2); }
.vt-light.severe { border-color: rgba(239,68,68,0.55); }
.vt-light.severe .vt-dot { background: var(--bad); }
.vt-light-sev { margin-left: auto; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
  color: var(--fg-faint); }
.vt-light-ev { font-size: 11.5px; color: var(--fg-dim); margin-top: 6px; line-height: 1.45; }
.vt-rules { display: flex; flex-direction: column; gap: 8px; }
.vt-rule { border: 1px solid var(--line); border-left: 3px solid var(--accent-3); border-radius: 9px;
  padding: 9px 12px; background: var(--bg-1); }
.vt-rule-id { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--accent-3); }
.vt-rule-text { font-size: 12.5px; color: var(--fg); margin-top: 3px; line-height: 1.45; }
.vt-rule-cond { font-family: var(--font-mono); font-size: 10.5px; color: var(--fg-dim); margin-top: 5px;
  overflow-wrap: anywhere; }
.vt-rule-meta { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); margin-top: 5px; }
.vt-shadow-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.vt-attr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px;
  margin-bottom: 10px; }
.vt-attr { border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; background: var(--bg-1); }
.vt-attr .k { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-faint); }
.vt-attr .v { font-family: var(--font-mono); font-size: 14px; font-weight: 700; margin-top: 3px; color: var(--fg); }
.vt-canvaswrap { border: 1px solid var(--line); border-radius: 10px; background: var(--bg-1); padding: 8px; }
.vt-canvaswrap canvas { display: block; width: 100%; }
.vt-raw { margin-top: 8px; }
.vt-raw summary { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); cursor: pointer; }

/* correlation heatmap */
.vt-heat th { font-family: var(--font-mono); }
.vt-heat-cell { font-family: var(--font-mono); font-size: 11px; text-align: center !important; min-width: 52px; }
.vt-heat-cell.na { color: var(--fg-faint); }

/* safety */
.vt-kill { border-radius: 14px; padding: 20px 22px; margin-bottom: 14px; border: 1px solid var(--line); }
.vt-kill.engaged { border-color: rgba(239,68,68,0.6); background: rgba(239,68,68,0.10); }
.vt-kill.clear { border-color: rgba(34,197,94,0.55); background: rgba(34,197,94,0.08); }
.vt-kill-state { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: 0.04em; }
.vt-kill.engaged .vt-kill-state { color: var(--bad); }
.vt-kill.clear .vt-kill-state { color: var(--good); }
.vt-kill-sub { font-size: 12px; color: var(--fg-dim); margin-top: 4px; }
.vt-gauge { height: 10px; border-radius: 6px; background: var(--bg-2); border: 1px solid var(--line);
  overflow: hidden; margin-top: 8px; max-width: 420px; }
.vt-gauge i { display: block; height: 100%; background: var(--accent); }
.vt-gauge i.hot { background: var(--bad); }
.vt-credo { font-family: var(--font-mono); font-size: 13px; color: var(--fg); margin: 18px 0 4px;
  padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--bg-1); border-radius: 0 8px 8px 0; }

/* mobile — usable at 375px: two-column grids stack, form fields go full width */
@media (max-width: 760px) {
  .vt-detail-grid, .vt-shadow-grid, .vt-shadow-src { grid-template-columns: 1fr; }
  .vt-run-time { flex-basis: 100%; margin-left: 0; }
  .vt-form input, .vt-form select { min-width: 0; width: 100%; }
  .vt-form label { flex: 1 1 46%; }
  .vt-form button { flex: 1 1 100%; }
}

/* ── Alpha Lights (v3.3.0) — the Vibe Alpha Zoo on the Option Eval grid ──────
   Chip states mirror the backend's light_for(): surge (pulsing — the get-in /
   get-out cue), lean (static tint), neutral, gray (no bars / thin history). */
.oe-alpha-chip { display: inline-block; padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer;
  border: 1px solid transparent; }
.oe-alpha-surge-long { background: rgba(34,197,94,0.22); color: var(--good);
  border-color: rgba(34,197,94,0.65); box-shadow: 0 0 10px rgba(34,197,94,0.55);
  animation: oe-alpha-pulse 1.4s ease-in-out infinite; }
.oe-alpha-surge-short { background: rgba(239,68,68,0.20); color: var(--bad);
  border-color: rgba(239,68,68,0.65); box-shadow: 0 0 10px rgba(239,68,68,0.55);
  animation: oe-alpha-pulse 1.4s ease-in-out infinite; }
.oe-alpha-lean-long { background: rgba(34,197,94,0.12); color: var(--good); }
.oe-alpha-lean-short { background: rgba(239,68,68,0.10); color: var(--bad); }
.oe-alpha-neutral { background: rgba(90,98,133,0.14); color: var(--fg-dim); }
.oe-alpha-gray { background: rgba(90,98,133,0.18); color: var(--fg-faint); }
@keyframes oe-alpha-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
  .oe-alpha-surge-long, .oe-alpha-surge-short { animation: none; }
}
.oe-alpha-strip { margin: 0 0 10px; padding: 8px 12px; border: 1px solid var(--line-strong);
  border-radius: 8px; background: var(--bg-1); font-size: 13px;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.oe-alpha-strip .oe-runline { flex-basis: 100%; }
.oe-pill.oe-alphacell.main { min-width: 52px; }
.oe-alpha-zoo { font-size: 10px; color: var(--fg-faint); font-weight: 400; }
.oe-alpha-tablewrap { overflow-x: auto; }
.oe-alpha-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 6px; }
.oe-alpha-table th, .oe-alpha-table td { text-align: left; padding: 4px 8px;
  border-bottom: 1px solid var(--line); vertical-align: top; }
.oe-alpha-table th { color: var(--fg-dim); font-weight: 600; white-space: nowrap; }
.oe-alpha-rowgray td { color: var(--fg-faint); }

/* ── Term Board + rung picks + alpha verdict (v3.4.0) ── */
.oe-term-cell { min-width: 128px; text-align: left; }
.oe-term-cell .mono { font-weight: 600; }
.oe-alpha-verdict { background: var(--bg-2); border-left: 3px solid var(--accent);
  padding: 8px 10px; border-radius: 0 6px 6px 0; font-size: 13px; line-height: 1.45; }

/* ── Grid rationale cards (v3.4.7) ──────────────────────────────────────────
   The "why" panel under the Option Eval grid: per ticker, what fired, the
   directional thesis, and the recommended 40-50 DTE entry. */
.oe-rat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;margin-top:10px}
.oe-rat-card{border:1px solid var(--line);border-radius:10px;padding:12px 14px;background:var(--panel,rgba(255,255,255,.5))}
.oe-rat-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.oe-rat-verdict{font-family:var(--font-mono,monospace);font-size:11px;color:var(--fg-faint);margin-bottom:6px}
.oe-rat-thesis{font-size:12px;line-height:1.5;margin:6px 0}
.oe-rat-why{margin:8px 0 0;padding-left:16px;font-size:11px;line-height:1.6}
.oe-rat-why li{margin-bottom:3px}
.oe-rat-entry{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line);font-size:11px;
  font-family:var(--font-mono,monospace);line-height:1.5}
.oe-rat-entry.gray{color:var(--fg-faint)}
@media (max-width:720px){ .oe-rat-grid{grid-template-columns:1fr} }

/* v3.4.8 — shared date bar (dropdown + last-10 trading-day chips) */
.oe-datebar{align-items:center}
.oe-datechips{display:inline-flex;flex-wrap:wrap;gap:4px}
.oe-datechip{font-family:var(--font-mono);font-size:11px;padding:2px 8px;border-radius:999px;
  border:1px solid var(--line);background:transparent;color:var(--fg-dim);cursor:pointer}
.oe-datechip:hover{border-color:var(--accent);color:var(--fg)}
.oe-datechip.active{color:var(--good);border-color:rgba(34,197,94,0.5);background:rgba(34,197,94,0.08)}
/* v3.4.8 — OE run-status chip in the global top bar */
#oeTopStatus{display:inline-flex;align-items:center;gap:6px}
#oeTopStatus:empty{display:none}
@media (max-width:900px){ #oeTopStatus{display:none} }

/* ── OE pipeline order-tracker chip (global top bar) ───────────────────────
   Seven thin segments, one per pipeline stage, sitting next to the run-line
   chip and wearing the same .uptime-pill idiom so it reads as one of the
   header chips rather than a bolted-on widget. Empty innerHTML means the
   backend reported no progress at all, and the chip disappears completely -
   an all-outline bar would imply a run that is not happening. Unlike
   .topbar-oe this one survives below 560px, where it drops to the bar alone. */
/* flex:0 1 auto + an explicit min-width, on purpose. .wtop is a nowrap flex row
   that is already tight at 1280px, so the tracker has to be the thing that
   gives way under pressure, never the KILL SWITCH. The explicit min-width
   replaces min-width:auto (which resolves to the full 221px content width and
   would make the chip unshrinkable) and floors it at bar + padding, so the
   current-stage text collapses away but the seven segments never clip. */
#oeProgress{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;
  flex:0 1 auto;min-width:120px;overflow:hidden}
#oeProgress:empty{display:none}
/* Stale (no update in 30+ min): a dimmed remnant, not a live-looking bar. */
#oeProgress.stale{opacity:.45}
.oe-prog-bar{display:inline-flex;align-items:center;gap:3px;flex:0 0 auto}
.oe-prog-seg{width:10px;height:6px;border-radius:2px;flex:0 0 auto;
  background:transparent;border:1px solid transparent}
/* pending = unreached/unknown: a dim outline that cannot be mistaken for progress */
.oe-prog-seg.pending{border-color:var(--line-strong)}
.oe-prog-seg.done{background:var(--accent);border-color:var(--accent)}
.oe-prog-seg.active{background:var(--accent);border-color:var(--accent);
  animation:oe-prog-pulse 1.1s ease-in-out infinite}
.oe-prog-seg.failed{background:var(--bad);border-color:var(--bad)}
/* skipped = deliberately not run (e.g. the 9:05-only settle step): hollow and
   dashed, visibly distinct from pending and never counted as done. */
.oe-prog-seg.skipped{border-style:dashed;border-color:var(--fg-faint)}
/* A stale run is not live - kill the pulse so a dead run cannot look active. */
#oeProgress.stale .oe-prog-seg.active{animation:none}
@keyframes oe-prog-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.oe-prog-now{display:inline-flex;align-items:baseline;gap:4px;min-width:0;max-width:104px;
  overflow:hidden;font-size:10.5px;letter-spacing:0;color:var(--fg-dim);white-space:nowrap}
/* The stage label is short and canonical, so it never truncates; the detail is
   free-form text from the agent ("9/14 tickers"), so it is what gives way.
   flex:0 0 auto vs 1 1 auto is what makes that order deterministic. Full text
   always survives in the segment tooltip and the aria-label. */
.oe-prog-now-label{flex:0 0 auto}
.oe-prog-now-detail{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;
  color:var(--fg-faint);font-variant-numeric:tabular-nums}
.oe-prog-now.failed{color:var(--bad);font-weight:600}
.oe-prog-now.failed .oe-prog-now-detail{color:var(--bad)}
@media (max-width:900px){
  /* Tablet/768px: the current-stage LABEL is the point at this width. Uptime +
     clock are already gone here; drop the free-form detail rather than
     ellipsizing it down to a meaningless stub. */
  #oeProgress{gap:6px;padding:4px 8px;min-width:100px}
  .oe-prog-bar{gap:2px}
  .oe-prog-now{max-width:none}
  .oe-prog-now-detail{display:none}
  /* Below 900px #oeTopStatus is already gone and the row is exactly full, so
     the current-stage label only fits if something yields. #lastSyncPill
     ("sync HH:MM") is the redundant one while a run is being tracked - it
     repeats the LAST run's time, which the tracker supersedes with the
     CURRENT one - so it steps aside for the duration of the run and comes
     back the moment the tracker empties out. */
  .wtop:has(#oeProgress:not(:empty)) #lastSyncPill{display:none}
}
@media (max-width:560px){
  /* Phone/375px: bar alone. The top bar is down to brand + connection state +
     KILL SWITCH here, so the tracker takes a hard width cap and the segments
     flex inside it rather than summing to an unbounded width. */
  #oeProgress{padding:3px 7px;gap:0;min-width:82px}
  .oe-prog-bar{width:66px;gap:2px}
  .oe-prog-seg{width:auto;min-width:0;flex:1 1 0}
  .oe-prog-now{display:none}
}
/* v3.4.8 — blurb demoted from the page header to a footnote under the board */
.oe-page-footnote{margin-top:14px;color:var(--fg-faint)}
.oe-flowread-card{border-top:1px solid var(--line);padding-top:8px}

/* v3.5.0 - lens call/put side chips + daily-history today column */
.oe-lens-side{font-family:var(--font-mono);font-size:10px;padding:1px 6px;border-radius:4px;
  border:1px solid var(--line)}
.oe-lens-side.call{color:var(--good);border-color:rgba(34,197,94,0.5)}
.oe-lens-side.put{color:#ef4444;border-color:rgba(239,68,68,0.5)}
.oe-lens-sideline{margin-bottom:6px}
.oe-sl-today{color:var(--good)}

/* v3.6.0 - sentiment bar, term change, intraday call/put split, teach intro */
.oe-sent-bar{display:flex;align-items:center;gap:4px;margin:0 2px}
.oe-sent-gradient{flex:1;height:8px;border-radius:4px;min-width:50px;max-width:90px;position:relative;
  background:linear-gradient(to right, #ef4444 0%, #f87171 18%, #fbbf24 35%, #9ca3af 50%, #a3e635 65%, #4ade80 82%, #22c55e 100%)}
.oe-sent-marker{position:absolute;top:-2px;width:4px;height:12px;background:#fff;border:1.5px solid #1e293b;border-radius:2px;transform:translateX(-50%);box-shadow:0 0 3px rgba(0,0,0,0.4)}
.oe-regime-hint{display:block;font-size:9px;margin-top:1px;font-weight:400;opacity:0.7}
.oe-regime-hint.longg{color:#60a5fa}
.oe-regime-hint.shortg{color:var(--accent-2)}
.oe-chg-up{color:var(--good);font-size:10px;font-weight:700}
.oe-chg-dn{color:#ef4444;font-size:10px;font-weight:700}
.oe-term-chg{font-size:10px;margin-top:2px;color:var(--fg-dim)}
.oe-cp-split{font-size:9px;margin-top:1px}
.oe-cp-split .up{color:var(--good)}
.oe-cp-split .down{color:#ef4444}
.oe-teach-intro{font-size:13px;line-height:1.5}
.oe-teach-intro h4{font-size:14px}
.oe-ticker-hdr-info{vertical-align:middle;margin-left:4px}

/* v3.7.0 - lens sub-tabs, ticker scores */
.oe-lens-subtab{font-size:12px;padding:3px 10px;border:1px solid var(--border);border-radius:4px;background:none;color:var(--fg);cursor:pointer;margin-left:4px}
.oe-lens-subtab.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.oe-tk-score{font-size:10px;background:var(--bg-2);border-radius:3px;padding:1px 4px;margin-left:4px;white-space:nowrap}
.topbar-err-chip{font-size:11px;padding:2px 8px;border-radius:4px;background:rgba(239,68,68,0.15);color:#ef4444;cursor:pointer}

/* v4.0.0 - Grid Chart tab */
.oe-gc-strip{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:6px}
.oe-gc-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.oe-gc-chip{border:1px solid var(--border);border-radius:14px;padding:3px 10px;cursor:pointer;font-size:11px;
  background:var(--bg-2);color:var(--fg);display:inline-flex;flex-direction:column;align-items:flex-start;line-height:1.25}
.oe-gc-chip.active{border:2px solid var(--accent);background:rgba(99,102,241,0.10)}
.oe-gc-chip.up .oe-gc-chip-lead{color:#22c55e}
.oe-gc-chip.down .oe-gc-chip-lead{color:#ef4444}
.oe-gc-chip.flat .oe-gc-chip-lead{color:var(--fg-dim)}
.oe-gc-chip-lead{font-weight:700}
.oe-gc-chip-avgs{color:var(--fg-dim);font-size:10px;font-family:var(--font-mono)}
.oe-gc-strip-note{font-size:10px;color:var(--fg-dim);margin:-2px 0 8px}
.oe-gc-windows{display:flex;gap:4px}
.oe-gc-win{border:1px solid var(--border);background:var(--bg-2);color:var(--fg);border-radius:4px;
  padding:3px 10px;font-size:11px;cursor:pointer}
.oe-gc-win.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.oe-gc-verdict{border:1px solid var(--border);border-radius:6px;padding:8px 10px;margin-bottom:8px;background:rgba(99,102,241,0.06)}
.oe-gc-verdict-line{font-size:13px;font-weight:700;color:var(--fg)}
.oe-gc-verdict-sub{font-size:11px;color:var(--fg-dim);margin-top:2px}
.oe-gc-chart{width:100%;overflow-x:auto;background:var(--bg-1);border:1px solid var(--border);border-radius:6px;padding:4px}
.oe-gc-svg{width:100%;height:auto;min-width:600px;max-height:340px;display:block}
.oe-gc-story{margin-top:6px;background:var(--bg-2);border:1px solid var(--border);border-radius:4px;padding:6px 10px;font-size:12px}
.oe-gc-story-line1{color:var(--fg)}
.oe-gc-story-line2{color:var(--fg-dim);font-size:11px;margin-top:2px}
.oe-gc-footer{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:var(--fg-dim);margin-top:6px}
.oe-gc-info-link{text-decoration:underline;cursor:pointer}

/* v4.1.0 - Grid Chart insight cards + position advisory */
.oe-gc-section-h{font-size:11px;font-weight:700;color:var(--fg-dim);margin:14px 0 6px;letter-spacing:0.5px}
.oe-gc-insights{display:grid;gap:6px;grid-template-columns:1fr}
.oe-gc-insight-card{background:var(--bg-2);border-left:3px solid #22c55e;border-radius:4px;padding:6px 10px;font-size:12px}
.oe-gc-insight-card.buyer{border-left-color:#22c55e}
.oe-gc-insight-title{font-weight:700;font-size:11px;margin-bottom:2px}
.oe-gc-insight-body{color:var(--fg)}
.oe-gc-empty-insights{font-size:11px;color:var(--fg-dim);font-style:italic;padding:6px 8px}
.oe-gc-positions{display:grid;gap:6px}
.oe-gc-pos-card{background:var(--bg-2);border-left:3px solid var(--border);border-radius:4px;padding:6px 10px;font-size:12px}
.oe-gc-pos-card.close{border-left-color:#ef4444;background:rgba(239,68,68,0.07)}
.oe-gc-pos-card.reduce{border-left-color:#eab308;background:rgba(234,179,8,0.07)}
.oe-gc-pos-card.keep{border-left-color:#22c55e;background:rgba(34,197,94,0.05)}
.oe-gc-pos-head{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.oe-gc-pos-body{color:var(--fg);margin-top:2px;font-size:11px}
.oe-gc-pos-rule{color:var(--fg-dim);font-size:10px;font-style:italic;margin-top:3px}
.oe-gc-days{font-size:10px;padding:1px 6px;border-radius:8px;font-weight:700}
.oe-gc-days.red{background:rgba(239,68,68,0.15);color:#ef4444}
.oe-gc-days.amber{background:rgba(234,179,8,0.15);color:#a16207}
.oe-gc-days.green{background:rgba(34,197,94,0.15);color:#15803d}
.oe-gc-verdict-tag{margin-left:auto;font-size:10px;padding:2px 8px;border-radius:4px;font-weight:700}
.oe-gc-verdict-tag.close{background:#ef4444;color:#fff}
.oe-gc-verdict-tag.reduce{background:#eab308;color:#fff}
.oe-gc-verdict-tag.keep{background:#22c55e;color:#fff}
.oe-gc-others-lbl{font-size:10px;color:var(--fg-dim);margin-top:6px;font-weight:700}

/* v4.1.2 - four stacked chart panels + instant-render polish */
.oe-gc-panels{display:grid;gap:14px;grid-template-columns:1fr;margin-bottom:12px}
.oe-gc-panel{background:var(--bg-1);border:1px solid var(--border);border-radius:6px;padding:8px 10px}
.oe-gc-panel-h{font-size:12px;font-weight:700;color:var(--fg-dim);margin-bottom:4px;letter-spacing:0.3px}
.oe-gc-panel .oe-gc-chart{background:transparent;border:none;padding:0}
/* Keep a legible floor: below this the 900-unit viewBox compresses the
   8-10px SVG text into unreadable sub-pixel glyphs. The parent
   .oe-gc-chart is overflow-x:auto so narrow screens scroll instead. */
.oe-gc-panel .oe-gc-chart{overflow-x:auto}
.oe-gc-panel .oe-gc-svg{min-width:560px;max-height:260px}
@media (max-width: 700px){
  .oe-gc-panel .oe-gc-svg{min-width:520px}
}
.oe-gc-empty{font-size:11px;color:var(--fg-dim);font-style:italic;padding:20px 8px;text-align:center}
@media (min-width: 1400px) {
  .oe-gc-panels{grid-template-columns:1fr 1fr}
}

/* ── Ticker Bucket (v4.4.7): the 12-group board, editable ─────────────── */
/* Each group carries its own accent hue - a thin signature line under its
   header and a whisper of tint on its cells, so the twelve columns read as
   twelve distinct pools at a glance without breaking the console theme. */
table.oe-bucket { border-collapse: collapse; }
table.oe-bucket th.oe-bk-h {
  vertical-align: bottom; padding: 8px 10px 6px; text-align: left;
  border-bottom: 2px solid var(--bk-c, var(--line-strong));
  background: var(--bg-2);
}
.oe-bk-glabel { display: block; font-family: var(--font-display); font-size: 13px;
  letter-spacing: 0.04em; color: var(--fg); }
.oe-bk-owner { font-size: 10px; color: var(--fg-faint); text-transform: uppercase; letter-spacing: 0.08em; }
td.oe-bk-cell { position: relative; padding: 5px 22px 5px 10px; white-space: nowrap;
  border-left: 2px solid color-mix(in srgb, var(--bk-c, transparent) 35%, transparent); }
td.oe-bk-cell.empty { border-left-color: transparent; }
.oe-bk-tk { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.02em; margin-right: 5px; }
.oe-bk-x { position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  border: none; background: none; color: var(--fg-faint); font-size: 13px; line-height: 1;
  padding: 2px 4px; border-radius: 4px; cursor: pointer; opacity: 0; transition: opacity .12s, color .12s; }
td.oe-bk-cell:hover .oe-bk-x { opacity: 1; }
.oe-bk-x:hover { color: var(--danger); background: rgba(239,68,68,0.12); }
td.oe-bk-add { padding: 5px 8px; }
.oe-bk-in { width: 76px; font-family: var(--font-mono); font-size: 11px;
  background: var(--bg-1); color: var(--fg); border: 1px dashed var(--line-strong);
  border-radius: 6px; padding: 4px 6px; text-transform: uppercase; }
.oe-bk-in:focus { border-style: solid; border-color: var(--bk-c, var(--accent)); outline: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--bk-c, var(--accent)) 25%, transparent); }
/* group signature hues */
.oe-bk-metals        { --bk-c: #d4b06a; }
.oe-bk-commodities   { --bk-c: #c07a3d; }
.oe-bk-macro         { --bk-c: #6366f1; }
.oe-bk-tech          { --bk-c: #10b981; }
.oe-bk-semis         { --bk-c: #22d3ee; }
.oe-bk-megacap       { --bk-c: #94a3b8; }
.oe-bk-sector-wise   { --bk-c: #a3e635; }
.oe-bk-crypto-main   { --bk-c: #f97316; }
.oe-bk-crypto-coins  { --bk-c: #fbbf24; }
/* v4.8.0 upper tiers - steel blues, heavier with size */
.oe-bk-mega          { --bk-c: #1d4ed8; }
.oe-bk-large         { --bk-c: #3b82f6; }
.oe-bk-mid           { --bk-c: #7dd3fc; }
/* v4.7.0 cap-band groups - a heat ramp, spark to inferno */
.oe-bk-sparks        { --bk-c: #fde047; }
.oe-bk-flares        { --bk-c: #fb923c; }
.oe-bk-blazes        { --bk-c: #f87171; }
.oe-bk-infernos      { --bk-c: #dc2626; }
.oe-bk-preferred     { --bk-c: #ec4899; }
.oe-bk-suggested     { --bk-c: #8b5cf6; }
.oe-bk-assorted      { --bk-c: #64748b; }

/* ══ v4.4.9 OPTION EVAL DESIGN PASS ═══════════════════════════════════════
   One cohesive layer at the end of the cascade, applied at the shared
   primitives so every tab lifts at once. Grounded in the 2026-07-30 audit:
   fixes the undefined --border borders, the 2.0:1 green-on-white text, the
   unstyled Auto Trader tables, missing focus states, missing transitions,
   9px sub-legible labels, and the four competing header conventions. */

/* Keyboard focus - previously 4 elements in 3,063 lines had focus styling. */
:is(button, [role="button"], a, select, input, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent-3);
  outline-offset: 2px;
}

/* Motion: OE controls snapped while the rest of the app eased. The
   prefers-reduced-motion guard higher up already neutralizes this. */
.oe-badge, .oe-pill, .oe-sysbadge, .oe-datechip, .oe-gc-chip, .oe-gc-win,
.oe-lens-subtab, .oe-subnav button, .oe-tk-item, .oe-info, .oe-bk-in,
.oe-jumpbtn, .oe-cellbtn, .oe-gc-info-link {
  transition: border-color var(--t-fast), background var(--t-fast),
              color var(--t-fast), box-shadow var(--t-fast);
}

/* Contrast: green TEXT switches to the AA-safe green; green FILLS keep the
   brand #00c805. Same for the selected-state convention below. */
.oe-badge.live, .vt-badge.live, .oe-sentiment.up, .oe-tk-score,
.oe-gc-chip.up .oe-gc-chip-lead { color: var(--good-text); }

/* Selected controls: one language everywhere - tint + border, never
   white-on-green (which measured ~2:1). */
.oe-gc-win.active, .oe-lens-subtab.active {
  background: rgba(0, 200, 5, 0.10);
  color: var(--good-text);
  border: 1px solid var(--good-text);
}
.oe-gc-chip { border-radius: var(--r-2); }
.oe-gc-chip.active {
  border-width: 1px;               /* was 2px - shifted layout on select */
  border-color: var(--good-text);
  box-shadow: 0 0 0 1px var(--good-text);
}

/* Tables: the Auto Trader's three tables used class oe-table, which had NO
   rules at all. One skin, and one th voice for the other table families. */
table.oe-table { width: 100%; border-collapse: collapse;
  font-family: var(--font-mono); font-size: 12px; }
table.oe-table th { text-align: left; padding: 5px 8px;
  border-bottom: 1px solid var(--line-strong); }
table.oe-table td { padding: 5px 8px; border-bottom: 1px solid var(--line); }
table.oe-table th, .oe-tk-tbl th, .oe-analytics table th, .oe-alpha-table th {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--fg-dim);
}

/* Section headers: one voice (was 4 conventions across the tabs). */
.oe-gc-section-h, .oe-tk-detail section > h4, .oe-drawer section h4,
.oe-drawer-reading h4, .vt-section > h4 {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-dim);
}
.oe-gc-section-h { margin: 18px 0 8px; padding-bottom: 4px;
  border-bottom: 1px solid var(--line); }

/* Band separator rows in the grid (was 3 identical inline styles). */
td.oe-band-label { background: var(--bg-1); color: var(--fg-dim);
  font-family: var(--font-display); font-size: 11px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; }

/* Collapsible bands (v4.15.1): Systems + Strategies fold behind their
   header rows; the class hides rows independently of the [hidden] attr
   the strategy voter sub-rows already use. */
tr.oe-band-hidden { display: none; }
td.oe-band-toggle { cursor: pointer; user-select: none; }
td.oe-band-toggle:hover { color: var(--accent); }
.oe-band-caret { display: inline-block; width: 14px;
  transition: transform 0.15s ease; }
.oe-band-caret.open { transform: rotate(90deg); }
.oe-band-count { color: var(--fg-faint); font-weight: 400;
  letter-spacing: normal; text-transform: none; margin-left: 8px; }

/* Page titles: size set once (was 8 inline overrides); view titles stop
   borrowing the LIVE data-provenance badge. */
h3.page-title { font-size: 15px; }
.oe-view-title { font-family: var(--font-display); font-size: 13px;
  font-weight: 700; letter-spacing: 0.04em; color: var(--fg); }

/* Errors stop masquerading as eternal spinners. */
.oe-loading.oe-error { color: var(--danger); }

/* Evidence chip: was fully JS-styled inline; now themed classes. */
.oe-ev-chip { display: inline-flex; align-items: center; gap: 3px;
  font-size: 10.5px; font-weight: 600; padding: 1px 7px;
  border-radius: var(--r-pill); border: 1px solid; vertical-align: middle;
  white-space: nowrap; }
.oe-ev-ignore      { color: #64748b; border-color: #94a3b8; background: rgba(148,163,184,0.10); }
.oe-ev-interesting { color: #a16207; border-color: #eab308; background: rgba(234,179,8,0.10); }
.oe-ev-promising   { color: #0369a1; border-color: #38bdf8; background: rgba(56,189,248,0.10); }
.oe-ev-actionable  { color: var(--good-text); border-color: var(--good-text); background: rgba(0,200,5,0.10); }

/* Regime strip: was a fully inline-styled div. */
.oe-regime-strip { display: flex; align-items: center; gap: 8px;
  padding: 4px 10px; margin-bottom: 6px; border-radius: var(--r-1);
  border-left: 4px solid var(--rg-c, #94a3b8);
  background: color-mix(in srgb, var(--rg-c, #94a3b8) 10%, transparent);
  font-size: 12px; }
.oe-regime-strip b { color: var(--rg-c, var(--fg)); }
.oe-regime-strip .oe-info { margin-left: auto; }

/* v4.31.0 (#246): tape-context line under the regime strip. */
.oe-regime-tape { padding: 2px 10px 4px 14px; margin: -4px 0 6px;
  font-size: 11px; color: var(--muted); }

/* v4.31.0 (#249): squeeze-watch tile (FINRA short interest). */
.oe-squeeze-tile { display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px; padding: 4px 10px; margin-bottom: 6px;
  border-radius: var(--r-1); border-left: 4px solid #a855f7;
  background: rgba(168,85,247,0.08); font-size: 11px; }
.oe-squeeze-tile b { color: #a855f7; }
.oe-squeeze-date { color: var(--muted); }
.oe-squeeze-chip { padding: 1px 6px; border-radius: 999px;
  border: 1px solid var(--border, #334155); white-space: nowrap; }
.oe-squeeze-chip.elev { border-color: #a855f7; color: #a855f7;
  font-weight: 600; }

/* Legibility floor: retire the 9px labels. */
.oe-verdict-badge, .oe-regime-hint, .oe-cp-split { font-size: 10px; }

/* Touch: the bucket's hover-reveal remove is always visible on touch. */
@media (pointer: coarse) {
  td.oe-bk-cell .oe-bk-x { opacity: 1; }
}

/* v4.18.0: click-for-details instrument card + inline About strip. */
.oe-instr-pop { position: fixed; z-index: 240; top: 72px; left: 50%;
  transform: translateX(-50%) translateY(-8px); width: min(440px, calc(100vw - 24px));
  max-height: min(70vh, 560px); overflow-y: auto;
  background: var(--card, var(--bg)); color: var(--fg);
  border: 1px solid var(--border, #334155); border-radius: var(--r-2, 10px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.35); padding: 14px 16px;
  opacity: 0; pointer-events: none; transition: opacity .12s, transform .12s; }
.oe-instr-pop.open { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.oe-instr-head { display: flex; align-items: center; gap: 8px; }
.oe-instr-x { margin-left: auto; border: none; background: none; color: var(--fg);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.oe-instr-x:hover { background: color-mix(in srgb, var(--fg) 12%, transparent); }
.oe-instr-name { font-size: 13px; margin: 2px 0 4px; opacity: 0.9; }
.oe-instr-groups { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 6px; }
.oe-instr-desc { font-size: 12px; line-height: 1.45; margin: 6px 0; }
.oe-instr-na { color: var(--muted, #94a3b8); font-style: italic; }
.oe-instr-tbl td:first-child { color: var(--muted, #94a3b8); white-space: nowrap; padding-right: 10px; }
.oe-instr-lev { font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 999px; letter-spacing: 0.03em;
  color: var(--good-text, #16a34a); border: 1px solid currentColor;
  background: color-mix(in srgb, currentColor 10%, transparent); }
.oe-instr-lev.inv { color: var(--bad-text, #dc2626); }
.oe-instr-lev.lev { color: var(--good-text, #16a34a); }
/* #281: Job Settings page - light-themed like the sibling Job Tracker. */
#page-jobsettings { color: #0f172a; background: #f8fafc; padding: 12px; }
#page-jobsettings h2 { margin: 4px 0 8px; }
#page-jobsettings h3 { margin: 14px 0 6px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: #475569; }
#page-jobsettings .js-section { background: #fff; border: 1px solid #e2e8f0;
  border-radius: 8px; padding: 8px 12px 12px; margin-bottom: 10px; }
#page-jobsettings .js-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
#page-jobsettings .js-seq-t { white-space: nowrap; font-weight: 600; }
#page-jobsettings .js-seq h3 { color: #0f172a; }
#page-jobsettings .js-tbl th { text-align: left; padding: 6px 8px; border-bottom: 1px solid #e2e8f0;
  color: #64748b; font-weight: 600; }
#page-jobsettings .js-tbl td { padding: 6px 8px; border-bottom: 1px solid #f1f5f9; vertical-align: top; }
#page-jobsettings .js-name { font-weight: 600; }
#page-jobsettings .js-id { font-size: 11px; color: #64748b; }
#page-jobsettings .js-badge { display: inline-block; padding: 1px 6px; margin-right: 3px;
  border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: 10px;
  font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; }
#page-jobsettings .js-badge.alt { background: #ecfeff; color: #155e75; }
#page-jobsettings .js-cad { color: #475569; }
#page-jobsettings .js-editor { display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  font-size: 12px; }
#page-jobsettings .js-input { width: 72px; padding: 2px 6px; border: 1px solid #cbd5e1;
  border-radius: 4px; font-family: var(--font-mono); font-size: 12px; }
#page-jobsettings .js-input.tiny { width: 46px; }
#page-jobsettings .js-presets { display: flex; gap: 3px; margin-left: 6px; }
#page-jobsettings .js-presets .pre { padding: 1px 6px; font-size: 10px; }
#page-jobsettings .js-runline { color: #64748b; font-size: 11px; }
#page-jobsettings .btn { padding: 3px 10px; font-size: 12px; border: 1px solid #cbd5e1;
  background: #fff; border-radius: 4px; cursor: pointer; }
#page-jobsettings .btn:hover:not(:disabled) { background: #f1f5f9; }
#page-jobsettings .btn:disabled { opacity: 0.55; cursor: not-allowed; }
#page-jobsettings .btn.small { padding: 2px 8px; font-size: 11px; }
#page-jobsettings .btn.primary { border-color: #4338ca; color: #4338ca; background: #eef2ff; }
#page-jobsettings .btn.primary:hover:not(:disabled) { background: #e0e7ff; }
/* #280: related co-movers list under the fundamentals table */
.oe-instr-related-head { font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
  margin: 10px 0 4px; text-transform: uppercase; color: var(--muted, #94a3b8); }
.oe-instr-related-list { display: flex; flex-wrap: wrap; gap: 4px; }
.oe-instr-related { padding: 2px 8px; font-size: 11px; cursor: pointer; }
.oe-instr-related .up   { color: var(--good-text, #16a34a); }
.oe-instr-related .down { color: var(--bad-text,  #dc2626); }
.oe-instr-about { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 6px 0 10px; }
.oe-instr-desc-inline { font-size: 12px; opacity: 0.9; flex: 1 1 260px; }
.oe-bk-tk[data-info-ticker] { cursor: pointer; }
.oe-bk-tk[data-info-ticker]:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .oe-instr-pop { top: auto; bottom: 12px; max-height: 60vh; }
}

/* ============================================================
   Day Eval module (v4.20.0, TODO #222) - .de-* namespace.
   End-of-day evaluate engine: verdict banner, run chips, failures,
   top-5 movers, fires grid. Tokens only - works in both themes.
   Status is never color alone: every chip carries a glyph.
   ============================================================ */
#page-dayeval { min-width: 0; }
.de-datebar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.de-datebar select {
  background: var(--bg-2); color: var(--fg); border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 6px 10px; font-family: var(--font-mono); font-size: 12px;
}
.de-datechips { display: flex; gap: 6px; flex-wrap: wrap; }
.de-datechip {
  background: var(--bg-2); color: var(--fg-dim); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px 10px; font-family: var(--font-mono);
  font-size: 11px; cursor: pointer;
}
.de-datechip.on { color: var(--fg); border-color: var(--accent); }
.de-banner {
  display: flex; gap: 16px; align-items: center; border-radius: 12px;
  padding: 14px 16px; margin-bottom: 12px; border: 1px solid var(--line-strong);
  background: var(--bg-1);
}
.de-banner-verdict { font-family: var(--font-display); font-weight: 700; font-size: 26px; letter-spacing: 1px; }
.de-banner.de-pass .de-banner-verdict { color: var(--good); }
.de-banner.de-fail .de-banner-verdict { color: var(--bad); }
.de-banner.de-mixed .de-banner-verdict { color: var(--accent-2); }
.de-banner-body { flex: 1; min-width: 0; }
.de-banner-date { color: var(--fg-dim); font-size: 12px; font-family: var(--font-mono); }
.de-banner-reasons { color: var(--fg); font-size: 13px; margin-top: 2px; }
.de-notes { color: var(--fg-dim); font-size: 12px; margin-top: 4px; }
.de-rebuild {
  background: var(--bg-2); color: var(--fg); border: 1px solid var(--line-strong);
  border-radius: 8px; padding: 6px 12px; cursor: pointer; font-size: 12px;
}
.de-rebuild:hover { border-color: var(--accent); }
.de-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-bottom: 12px; }
.de-tile { background: var(--bg-1); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; }
.de-tile-v { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--fg); }
.de-tile-l { color: var(--fg-dim); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }
.de-tile-s { color: var(--fg-faint); font-size: 11px; font-family: var(--font-mono); margin-top: 2px; }
.de-panel { background: var(--bg-1); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.de-panel h3 { margin: 0 0 10px; font-size: 14px; color: var(--fg); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.de-panel-fail { border-color: var(--bad); }
.de-empty { color: var(--fg-dim); font-size: 13px; }
.de-gray-txt { color: var(--fg-faint); font-size: 12px; }
.de-chip {
  display: inline-flex; align-items: center; gap: 4px; border-radius: 6px;
  padding: 2px 7px; font-family: var(--font-mono); font-size: 11px;
  border: 1px solid var(--line-strong); color: var(--fg-dim); background: var(--bg-2);
  margin: 2px 3px 2px 0; white-space: nowrap;
}
.de-chip.de-pass { color: var(--good); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.de-chip.de-fail { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 55%, transparent); }
.de-chip.de-noop { color: var(--fg-faint); }
.de-chip.de-cannot_verify { color: var(--accent-2); border-style: dashed; }
.de-chip.de-pending { color: var(--fg-faint); border-style: dotted; }
.de-prov-tag {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase;
  font-family: var(--font-mono); color: var(--fg-dim);
  border: 1px dotted var(--line-strong); background: var(--bg-2);
}
.de-job { border-top: 1px solid var(--line); padding: 10px 0; }
.de-job:first-of-type { border-top: 0; }
.de-job-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.de-job-name { font-weight: 600; color: var(--fg); font-size: 13px; }
.de-job-stat { color: var(--fg-faint); font-size: 11px; }
.de-job-chips { margin-top: 6px; display: flex; flex-wrap: wrap; }
.de-job-reasons { color: var(--fg-dim); font-size: 12px; margin-top: 4px; }
.de-failrow { display: flex; gap: 8px; align-items: baseline; padding: 5px 0; border-top: 1px solid var(--line); font-size: 12px; color: var(--fg); flex-wrap: wrap; }
.de-failrow:first-of-type { border-top: 0; }
.de-movers { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.de-movers-col h4 { margin: 0 0 8px; font-size: 12px; color: var(--fg-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.de-mover { border: 1px solid var(--line); border-left: 3px solid var(--fg-faint); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; background: var(--bg-2); }
.de-mover.de-bull { border-left-color: var(--good); }
.de-mover.de-bear { border-left-color: var(--bad); }
.de-mover-head { display: flex; gap: 8px; align-items: baseline; font-size: 13px; color: var(--fg); }
.de-mover-score { margin-left: auto; color: var(--fg-faint); font-size: 11px; }
.de-mover ul { margin: 6px 0 0; padding-left: 16px; color: var(--fg-dim); font-size: 12px; }
.de-mover li { margin: 1px 0; }
.de-method { color: var(--fg-faint); font-size: 11px; margin-top: 8px; }
.de-range-row { display: inline-flex; gap: 4px; margin-left: auto; }
.de-range {
  background: var(--bg-2); color: var(--fg-dim); border: 1px solid var(--line);
  border-radius: 6px; padding: 3px 9px; font-size: 11px; cursor: pointer;
}
.de-range.on { color: var(--fg); border-color: var(--accent); }
.de-grid-scroll { overflow-x: auto; padding-bottom: 4px; }
.de-grow { display: flex; align-items: center; gap: 3px; padding: 1px 0; width: max-content; }
.de-gt { width: 56px; flex: 0 0 56px; font-size: 11px; color: var(--fg-dim); }
.de-gd { width: 22px; flex: 0 0 22px; text-align: center; font-size: 10px; color: var(--fg-faint); }
.de-gc {
  width: 22px; height: 18px; flex: 0 0 22px; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-family: var(--font-mono); color: var(--fg);
  background: var(--bg-2); border: 1px solid var(--line);
}
.de-gc-bull { background: color-mix(in srgb, var(--good) calc(var(--mag, 0.4) * 55%), var(--bg-2)); }
.de-gc-bear { background: color-mix(in srgb, var(--bad) calc(var(--mag, 0.4) * 55%), var(--bg-2)); }
.de-gc-flat { background: color-mix(in srgb, var(--accent-3) 22%, var(--bg-2)); }
.de-gc-gray { background: var(--bg-2); border-style: dashed; }
.de-legend { display: flex; gap: 8px; align-items: center; color: var(--fg-faint); font-size: 11px; margin-top: 8px; flex-wrap: wrap; }
@media (max-width: 768px) {
  .de-movers { grid-template-columns: 1fr; }
  .de-banner { flex-wrap: wrap; }
  .de-banner-verdict { font-size: 20px; }
}

/* ── Rotation Board (v4.32.0, TODO #251) ─────────────────────────────── */
.ro-head { display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.ro-strip { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; }
.ro-gauge { flex: 0 0 auto; min-width: 118px; padding: 8px 10px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.ro-gauge-l { font-size: 10px; opacity: .7; text-transform: uppercase; letter-spacing: .04em; }
.ro-gauge-v { font-size: 15px; margin-top: 2px; display: flex; gap: 6px; align-items: baseline; }
.ro-gauge-b { font-size: 10px; opacity: .75; }
.ro-b-xhigh { border-color: rgba(52,211,153,.55); }
.ro-b-high  { border-color: rgba(52,211,153,.3); }
.ro-b-low   { border-color: rgba(248,113,113,.3); }
.ro-b-xlow  { border-color: rgba(248,113,113,.55); }
.ro-queues { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ro-qcol h4 { margin: 2px 0 6px; font-size: 12px; }
.ro-q-in h4 { color: #34d399; } .ro-q-out h4 { color: #f87171; }
.ro-qrow { display: flex; gap: 8px; align-items: center; padding: 5px 6px;
  border-radius: 8px; cursor: pointer; font-size: 12px; flex-wrap: wrap; }
.ro-qrow:hover { background: rgba(255,255,255,.05); }
.ro-qg { opacity: .6; font-size: 10px; }
.ro-tag { font-size: 10px; padding: 1px 6px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2); }
.ro-tag-new { color: #34d399; border-color: rgba(52,211,153,.5); }
.ro-tag-acc { color: #a7f3d0; border-color: rgba(167,243,208,.4); }
.ro-tag-hold { color: #fbbf24; border-color: rgba(251,191,36,.4); }
.ro-tag-under { color: #f87171; border-color: rgba(248,113,113,.5); }
.ro-secrow, .ro-trow { display: flex; align-items: center; gap: 10px;
  padding: 8px 6px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 13px; flex-wrap: wrap; }
.ro-secrow:hover, .ro-trow:hover { background: rgba(255,255,255,.04); }
.ro-caret { width: 12px; opacity: .7; }
.ro-secb { font-size: 11px; padding: 1px 8px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.15); margin-left: auto; }
.ro-tlist { padding-left: 14px; }
.ro-score { font-weight: 600; }
.ro-s-hi { color: #34d399; } .ro-s-lo { color: #f87171; }
.ro-detail { padding: 6px 4px 10px 16px; font-size: 12px; }
.ro-sysrow { display: grid; grid-template-columns: 110px 1fr; gap: 4px 10px;
  padding: 4px 0; border-bottom: 1px dashed rgba(255,255,255,.06); }
.ro-sysname { opacity: .75; font-size: 11px; text-transform: uppercase; }
.ro-comp { margin-right: 10px; }
.ro-comp i { opacity: .6; font-style: normal; }
@media (max-width: 768px) {
  .ro-queues { grid-template-columns: 1fr; }
  .ro-sysrow { grid-template-columns: 1fr; }
}

/* -- Shadow Desk (v4.34.0, TODO #261) ---------------------------------- */
.sd-pos { color: #34d399; } .sd-neg { color: #f87171; }
.sd-lown { font-size: 9px; padding: 1px 6px; border-radius: 999px;
  color: #fbbf24; border: 1px solid rgba(251,191,36,.5);
  text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.sd-midfill { font-size: 9px; padding: 1px 6px; border-radius: 999px;
  color: #93c5fd; border: 1px solid rgba(147,197,253,.4); }
.sd-dir { font-size: 10px; padding: 1px 6px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2); }
.sd-dir-b { color: #34d399; border-color: rgba(52,211,153,.5); }
.sd-dir-s { color: #f87171; border-color: rgba(248,113,113,.5); }
.sd-exit { font-size: 10px; opacity: .65; }
.sd-bookrow { display: flex; align-items: center; gap: 10px; padding: 8px 6px;
  cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: 12px; flex-wrap: wrap; }
.sd-bookrow:hover { background: rgba(255,255,255,.04); }
.sd-posrow { display: flex; align-items: center; gap: 10px; padding: 6px 6px;
  border-bottom: 1px dashed rgba(255,255,255,.06); font-size: 12px;
  flex-wrap: wrap; }
.sd-statline { padding: 4px 0; opacity: .85; }
.sd-dim h4 { margin: 10px 0 4px; font-size: 12px; opacity: .85;
  text-transform: uppercase; letter-spacing: .04em; }
.sd-bucketrow { display: flex; align-items: center; gap: 10px; padding: 4px 6px;
  border-bottom: 1px dashed rgba(255,255,255,.06); font-size: 12px;
  flex-wrap: wrap; }
.sd-band { min-width: 110px; opacity: .85; }
@media (max-width: 768px) {
  .sd-band { min-width: 90px; }
  .sd-bookrow, .sd-posrow, .sd-bucketrow { font-size: 11px; gap: 7px; }
}

/* ── Pulse - Sector Sentiment Speedometer (v4.35.0, TODO #269) ─────────── */
.pu-master { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.pu-master-g { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 0 0 auto; }
.pu-master-side { flex: 1 1 260px; min-width: 220px; display: flex; flex-direction: column; gap: 8px; }
.pu-date { font-size: 11px; color: var(--fg-dim); font-weight: 400; }
.pu-mrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12px; }
.pu-klabel { color: var(--fg-dim); font-size: 12px; }
.pu-band { font-size: 10px; font-weight: 700; letter-spacing: .05em; padding: 2px 8px;
  border: 1px solid var(--line-strong); border-radius: 999px; white-space: nowrap; }
.pu-delta { font-size: 11px; font-family: var(--font-mono); color: var(--fg-dim); }
.pu-delta.pu-up { color: var(--good); }
.pu-delta.pu-dn { color: var(--bad); }
.pu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap: 10px; margin-bottom: 12px; }
.pu-cell { background: var(--bg-1); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 8px 12px; display: flex; flex-direction: column; align-items: center;
  gap: 3px; cursor: pointer; transition: border-color .15s; }
.pu-cell:hover, .pu-cell:focus-visible { border-color: var(--line-strong); }
.pu-cell.pu-open { border-color: var(--accent-3); }
.pu-cell.pu-gray { opacity: .65; }
.pu-cell-label { font-size: 11px; color: var(--fg); text-align: center; }
.pu-cell-deltas { display: flex; gap: 8px; }
.pu-detail h3 { align-items: baseline; }
.pu-pillars { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.pu-pillar { display: grid; grid-template-columns: 150px 1fr 46px; gap: 10px;
  align-items: center; font-size: 12px; }
.pu-plabel { color: var(--fg-dim); text-transform: capitalize; }
.pu-plabel i { font-style: normal; opacity: .6; font-size: 10px; text-transform: none; }
.pu-pbar, .pu-cbar { height: 8px; background: var(--bg-2); border-radius: 4px; overflow: hidden; }
.pu-pfill { height: 100%; border-radius: 4px; }
.pu-comps { display: flex; flex-direction: column; gap: 5px; }
.pu-crow { display: grid; grid-template-columns: 130px 86px 1fr 34px auto auto;
  gap: 8px; align-items: center; font-size: 11px; }
.pu-cname { color: var(--fg-dim); }
.pu-craw { text-align: right; white-space: nowrap; }
.pu-inv { font-style: normal; font-size: 9px; color: var(--fg-faint); margin-left: 3px;
  border: 1px solid var(--line); border-radius: 3px; padding: 0 2px; }
.pu-basis { font-size: 9px; font-family: var(--font-mono); padding: 1px 5px;
  border-radius: 999px; border: 1px solid var(--line-strong); white-space: nowrap; }
.pu-b-own { color: var(--accent); }
.pu-b-pool { color: var(--accent-2); }
.pu-legend { display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  font-size: 10px; color: var(--fg-dim); margin: 4px 0 8px; }
.pu-lz { display: inline-flex; align-items: center; gap: 4px; }
.pu-lz i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.oe-pulse-mini { font-size: 10px; margin-left: 5px; font-weight: 700; }
@media (max-width: 768px) {
  .pu-crow { grid-template-columns: 104px 70px 1fr 30px auto; }
  .pu-crow .de-gray-txt:last-child { display: none; }
  .pu-pillar { grid-template-columns: 118px 1fr 40px; }
}
@media (max-width: 420px) {
  .pu-grid { grid-template-columns: repeat(2, 1fr); }
  .pu-master { gap: 10px; }
}

/* Dynamic groups (TODO #270) */
.oe-badge.oe-dyn-star { color: var(--accent-2); border-color: rgba(251,191,36,0.5); background: rgba(251,191,36,0.10); padding: 1px 5px; }
.oe-dyn-cell .oe-runline.mono { display: block; font-size: 10px; opacity: 0.75; }
.oe-dyn-cell.oe-dyn-pinned { outline: 1px solid rgba(251,191,36,0.55); outline-offset: -1px; border-radius: 4px; }
.oe-dyn-pinbtn { opacity: 0.55; }
.oe-dyn-pinbtn.on, .oe-dyn-pinbtn:hover { opacity: 1; }
.oe-dyn-gray { color: var(--muted, #888); font-family: var(--font-mono); font-size: 11px; }
/* ── Elliot Waves (TODO #269) ─────────────────────────────────────────── */
.ew-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.ew-controls { display: flex; gap: 6px; flex: 1 1 260px; max-width: 420px; }
.ew-input { flex: 1; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; color: var(--fg); padding: 5px 8px; font-size: 12px; min-width: 0; }
.ew-scroll { overflow-x: auto; margin-top: 10px; }
.ew-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 640px; }
.ew-table th { text-align: left; color: var(--fg-faint); font-weight: 500; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.ew-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.ew-row[data-sym] { cursor: pointer; }
.ew-row[data-sym]:hover { background: var(--bg-2); }
.ew-dir { font-size: 11px; }
.ew-up { color: var(--good); }
.ew-down { color: var(--danger); }
.ew-score { position: relative; display: inline-block; width: 64px; height: 14px; background: var(--bg-2); border-radius: 4px; overflow: hidden; vertical-align: middle; }
.ew-score-fill { position: absolute; inset: 0 auto 0 0; background: var(--accent-3); opacity: 0.45; }
.ew-score-n { position: relative; font-size: 10px; padding-left: 4px; }
.ew-inv-hard { color: var(--danger); font-size: 10px; }
.ew-inv-soft { color: var(--accent-2); font-size: 10px; }
.ew-foot { margin-top: 8px; }
.ew-detail { margin-top: 12px; }
.ew-consensus { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 6px 0 10px; font-size: 12px; }
.ew-cons-chip { background: var(--bg-2); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; }
.ew-cons-al { color: var(--good); font-size: 10px; letter-spacing: 0.06em; }
.ew-card { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-top: 8px; }
.ew-card h4 { margin: 0 0 6px; font-size: 13px; }
.ew-pivots { font-size: 12px; color: var(--fg-dim); overflow-x: auto; white-space: nowrap; padding-bottom: 4px; }
.ew-ex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 4px 12px; margin: 8px 0; }
.ew-ex { display: flex; justify-content: space-between; font-size: 11px; }
.ew-meta { display: flex; flex-direction: column; gap: 4px; font-size: 12px; }
.oe-dyn-src { font-family: var(--font-mono); font-size: 10px; opacity: 0.8; letter-spacing: 0.06em; margin-left: 4px; }
.oe-dyn-arr { font-size: 9px; margin-right: 3px; }
.oe-dyn-arr.up { color: var(--good); }
.oe-dyn-arr.down { color: var(--bad); }
.oe-dyn-half { font-family: var(--font-mono); font-size: 9px; padding: 1px 4px; border-radius: 3px; margin-left: 4px; opacity: 0.85;
  border: 1px solid var(--border-color, rgba(128,128,128,0.3)); }
.oe-dyn-half-high, .oe-dyn-half-call-rich { color: var(--good); border-color: rgba(34,197,94,0.4); }
.oe-dyn-half-low, .oe-dyn-half-put-rich  { color: var(--bad);  border-color: rgba(239,68,68,0.4); }

/* ── Job Tracker (TODO #273) - LIGHT theme, scoped to #page-jobs ────────── */
#page-jobs { background: #f5f7fb; color: #1b2140; min-height: 100%; }
.jb-page { padding: 16px 20px 60px; max-width: 1400px; }
.jb-page *, .jb-page *::before, .jb-page *::after { box-sizing: border-box; }
.jb-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.jb-title h2 { margin: 0 0 2px; font-size: 20px; color: #101636; letter-spacing: .2px; }
.jb-title p { margin: 0; font-size: 12.5px; color: #6b7395; }
.jb-daypick { display: flex; align-items: center; gap: 8px; }
.jb-nav, .jb-today, .jb-refresh { border: 1px solid #d5dae6; background: #fff; color: #33405f; border-radius: 8px; cursor: pointer; font-size: 14px; height: 32px; }
.jb-nav { width: 32px; } .jb-refresh { width: 34px; font-size: 16px; }
.jb-today { padding: 0 12px; font-size: 12px; }
.jb-nav:hover, .jb-today:hover, .jb-refresh:hover { border-color: #6366f1; color: #4338ca; }
.jb-nav:disabled { opacity: .4; cursor: not-allowed; }
.jb-today.on { border-color: #10b981; color: #059669; background: #ecfdf5; }
.jb-dlabel { display: flex; flex-direction: column; align-items: center; min-width: 128px; padding: 3px 12px; border: 1px solid #d5dae6; border-radius: 8px; background: #fff; }
.jb-dow { font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; color: #9aa1bd; font-family: ui-monospace, Menlo, monospace; }
.jb-dt { font-size: 13px; font-family: ui-monospace, Menlo, monospace; color: #26304d; }

.jb-summary { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.jb-stat { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; border: 1px solid #e2e6ef; border-radius: 10px; background: #fff; min-width: 92px; }
.jb-stat-v { font-size: 20px; font-weight: 650; line-height: 1; font-family: ui-monospace, Menlo, monospace; }
.jb-stat-k { font-size: 10px; letter-spacing: .6px; text-transform: uppercase; color: #8a92ac; }
.jb-stat.jb-ok .jb-stat-v { color: #059669; } .jb-stat.jb-run .jb-stat-v { color: #d97706; }
.jb-stat.jb-err .jb-stat-v { color: #dc2626; } .jb-stat.jb-stale .jb-stat-v { color: #9333ea; }
.jb-stat.jb-gray .jb-stat-v { color: #94a0b8; } .jb-stat.jb-tot .jb-stat-v { color: #334155; }

.jb-legend { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font-size: 11.5px; color: #6b7395; margin-bottom: 8px; }
.jb-legend span { display: inline-flex; align-items: center; gap: 5px; }
.jb-legend-r { margin-left: auto; font-family: ui-monospace, Menlo, monospace; color: #9aa1bd; }

.jb-cathead { display: flex; align-items: center; gap: 8px; font-size: 10.5px; letter-spacing: 1.2px; text-transform: uppercase; color: #8a92ac; margin: 14px 0 4px; }
.jb-cathead span { background: #e7ebf3; color: #667092; border-radius: 999px; padding: 0 7px; font-size: 10px; }

.jb-row { display: grid; grid-template-columns: minmax(240px, 330px) minmax(320px, 1fr); gap: 16px; align-items: center; padding: 9px 12px; border: 1px solid #e6eaf2; border-radius: 10px; background: #fff; margin-bottom: 6px; }
.jb-row:hover { border-color: #cdd4e4; box-shadow: 0 1px 4px rgba(20,30,60,.05); }
.jb-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.jb-name { font-size: 13px; font-weight: 600; color: #1c2444; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.jb-cad { font-weight: 400; font-size: 10.5px; color: #98a0ba; font-family: ui-monospace, Menlo, monospace; }
.jb-note { width: 15px; height: 15px; border-radius: 50%; background: #eef1f7; color: #7b84a6; font-size: 10px; display: inline-grid; place-items: center; cursor: help; font-style: normal; }
.jb-route { margin-top: 4px; display: flex; align-items: center; gap: 6px; font-size: 11px; }
.jb-host { background: #eef2ff; color: #4f46e5; border: 1px solid #dfe4fb; border-radius: 5px; padding: 1px 6px; font-family: ui-monospace, Menlo, monospace; }
.jb-arrow { color: #b3bad0; }
.jb-src { border-radius: 5px; padding: 1px 6px; font-family: ui-monospace, Menlo, monospace; border: 1px solid transparent; }
.jb-src-alpaca { background: #fef3c7; color: #b45309; border-color: #fde68a; }
.jb-src-robinhood { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.jb-src-opra { background: #ede9fe; color: #6d28d9; border-color: #ddd6fe; }
.jb-src-finra, .jb-src-sec-edgar { background: #e0f2fe; color: #0369a1; border-color: #bae6fd; }
.jb-src-s3, .jb-src-github { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.jb-src-internal, .jb-src- { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }

.jb-status { display: flex; flex-direction: column; gap: 3px; }
.jb-bar { position: relative; height: 22px; border-radius: 6px; background: #eef1f7; overflow: hidden; display: flex; align-items: center; }
.jb-bar-fill { position: absolute; inset: 0 auto 0 0; }
.jb-bar-lab { position: relative; padding-left: 9px; font-size: 11px; font-weight: 600; }
.jb-ok .jb-bar-fill { background: #a7f3d0; } .jb-ok .jb-bar-lab { color: #065f46; }
.jb-rec .jb-bar-fill { background: #bbf7d0; } .jb-rec .jb-bar-lab { color: #14532d; }
.jb-run .jb-bar-fill { background: #fed7aa; } .jb-run .jb-bar-lab { color: #9a3412; }
.jb-idle .jb-bar-fill { background: #e2e8f0; } .jb-idle .jb-bar-lab { color: #475569; }
.jb-err .jb-bar-fill { background: #fecaca; } .jb-err .jb-bar-lab { color: #991b1b; }
.jb-stale .jb-bar-fill { background: #e9d5ff; } .jb-stale .jb-bar-lab { color: #6b21a8; }
.jb-gray .jb-bar-lab { color: #94a0b8; }
.jb-bar-indet { position: absolute; inset: 0; width: 35%; background: linear-gradient(90deg, transparent, #fed7aa, transparent); animation: jbIndet 1.3s infinite; }
@keyframes jbIndet { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
.jb-via { font-size: 9.5px; color: #9aa1bd; font-family: ui-monospace, Menlo, monospace; }
.jb-detail { font-size: 9.5px; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 300px; }
.jb-reason { font-size: 9.5px; color: #b0728a; }

/* Expected-vs-actual timeline on a shared ET axis (Point 4, 2026-08-11) */
.jb-grid { display: flex; align-items: center; gap: 10px; min-width: 0; }
.jb-tl { position: relative; flex: 1 1 auto; height: 26px; min-width: 220px; background: #f6f8fc; border: 1px solid #e6eaf2; border-radius: 7px; overflow: hidden; }
.jb-gl { position: absolute; top: 0; bottom: 0; width: 1px; background: #e9edf5; transform: translateX(-.5px); }
.jb-now { position: absolute; top: -1px; bottom: -1px; width: 2px; background: #2563eb; box-shadow: 0 0 0 1px rgba(37,99,235,.2); z-index: 4; }
.jb-win { position: absolute; top: 6px; height: 14px; border-radius: 4px; z-index: 2; }
.jb-win-live { background: repeating-linear-gradient(45deg, #86efac, #86efac 5px, #a7f3d0 5px, #a7f3d0 10px); border: 1px solid #4ade80; }
.jb-win-idle { background: #e5e9f0; border: 1px solid #d3d9e6; }
.jb-tick { position: absolute; top: 5px; width: 8px; height: 16px; border-radius: 2px; transform: translateX(-4px); z-index: 3; border: 1px solid transparent; }
.jb-t-ran { background: #34d399; border-color: #10b981; }
.jb-t-missed { background: #f87171; border-color: #ef4444; }
.jb-t-pending { background: #fff; border: 1px dashed #f59e0b; }
.jb-t-scheduled { background: #dbe2ee; border-color: #c3ccdd; }
.jb-t-extra { top: 8px; height: 10px; opacity: .8; }
.jb-offwrap { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.jb-off { font-size: 9px; font-family: ui-monospace, Menlo, monospace; padding: 1px 4px; border-radius: 4px; background: #eef1f7; color: #64748b; border: 1px solid #e2e8f0; }
.jb-off.jb-t-ran { background: #d1fae5; color: #047857; border-color: #a7f3d0; }
.jb-off.jb-t-missed { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.jb-off.jb-t-pending { background: #fff7ed; color: #b45309; border-color: #fed7aa; }
.jb-runs { font-size: 10px; color: #98a0ba; font-family: ui-monospace, Menlo, monospace; white-space: nowrap; flex: 0 0 auto; min-width: 42px; text-align: right; }
.jb-runs b { font-weight: 700; } .jb-c-ok { color: #059669; } .jb-c-err { color: #dc2626; } .jb-c-pend { color: #b45309; }

/* shared ruler row - aligns hour labels to every timeline below it */
.jb-rulerrow { display: grid; grid-template-columns: minmax(240px, 330px) minmax(320px, 1fr); gap: 16px; align-items: end; padding: 2px 12px 4px; margin-bottom: 2px; }
.jb-rl-lab { font-size: 10px; color: #98a0ba; }
.jb-ruler { position: relative; height: 14px; margin-right: 52px; }
.jb-rl { position: absolute; font-size: 9px; color: #b3bad0; font-family: ui-monospace, Menlo, monospace; transform: translateX(-3px); }
.jb-rl-end { position: absolute; right: -50px; font-size: 9px; color: #b3bad0; font-family: ui-monospace, Menlo, monospace; }
.jb-lg { position: relative; display: inline-block; width: 12px; height: 12px; vertical-align: middle; top: 0; }
.jb-legend .jb-tick, .jb-legend .jb-win { position: relative; top: 0; transform: none; display: inline-block; width: 12px; height: 12px; vertical-align: middle; }
.jb-legend .jb-now { position: relative; top: 0; display: inline-block; width: 3px; height: 12px; vertical-align: middle; }

.jb-msg { padding: 40px; text-align: center; color: #8a92ac; font-family: ui-monospace, Menlo, monospace; }
.jb-err-msg { color: #b91c1c; }
@media (max-width: 820px) { .jb-row, .jb-rulerrow { grid-template-columns: 1fr; gap: 8px; } .jb-grid { overflow-x: auto; } .jb-rl-lab { display: none; } }

/* Whale Buys (v4.48.0) - ASK-lifted OPRA prints table under Analyze. Reuses
   .de-panel / .de-gray-txt from the dark theme; a slim .wb-* namespace on
   top for the table, chips, and controls. */
.wb-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.wb-controls { display: flex; align-items: center; gap: 8px; }
.wb-input { background: var(--bg-2); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font-size: 12px; min-width: 220px; }
.wb-min { min-width: 60px; width: 60px; text-align: right; }
.wb-minlab { font-size: 12px; color: var(--fg-faint); display: flex; align-items: center; gap: 4px; }
.wb-stats { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--fg); margin: 10px 0 6px; }
.wb-stat b { color: var(--fg); font-weight: 600; }
.wb-err { color: var(--danger); font-size: 12px; margin: 6px 0; }
.wb-scroll { overflow-x: auto; margin-top: 6px; }
.wb-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 720px; }
.wb-table th { text-align: left; color: var(--fg-faint); font-weight: 500; padding: 4px 8px; border-bottom: 1px solid var(--line); }
.wb-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.wb-time { color: var(--fg-faint); }
.wb-prem { font-weight: 600; color: var(--fg); }
.wb-tkr { font-weight: 600; color: var(--fg); margin-right: 6px; }
.wb-cp { padding: 1px 6px; border-radius: 4px; font-size: 10px; letter-spacing: 0.06em; margin-right: 6px; }
.wb-call { background: rgba(16, 185, 129, 0.18); color: #10b981; }
.wb-put { background: rgba(239, 68, 68, 0.18); color: #ef4444; }
.wb-strike { color: var(--fg); margin-right: 6px; }
.wb-chip { display: inline-block; padding: 1px 6px; border-radius: 999px; font-size: 10px; letter-spacing: 0.04em; border: 1px solid var(--line); }
.wb-block { background: rgba(99, 102, 241, 0.18); color: #a5b4fc; border-color: rgba(99, 102, 241, 0.4); }
.wb-sweep { background: rgba(234, 88, 12, 0.18); color: #fdba74; border-color: rgba(234, 88, 12, 0.4); }
.wb-largest { background: rgba(148, 163, 184, 0.18); color: #cbd5e1; border-color: rgba(148, 163, 184, 0.4); }
.wb-foot { margin-top: 8px; font-size: 11px; }
/* Premium tiers - >=$1M gets a gold/red highlight so eye-catchers stand out
   at a glance; $250k-$1M gets a subtle orange; else default. Kept subtle on
   whole rows and stronger on the premium cell so scanning the column reads
   as a visual histogram of size. */
.wb-tier-mega td { background: rgba(250, 204, 21, 0.09); }
.wb-tier-large td { background: rgba(234, 88, 12, 0.05); }
.wb-prem-mega { color: #facc15; font-weight: 700; }
.wb-prem-large { color: #fdba74; font-weight: 600; }
.wb-prem-small { color: var(--fg); }
/* Ticker group header - a compact divider row for tickers with 2+ hits */
.wb-grouphdr td { background: var(--bg-2); border-top: 2px solid var(--line); padding: 6px 10px; }
.wb-grouphdr.wb-tier-mega td { background: linear-gradient(90deg, rgba(250, 204, 21, 0.18), var(--bg-2) 60%); border-top-color: #facc15; }
.wb-grouphdr.wb-tier-large td { background: linear-gradient(90deg, rgba(234, 88, 12, 0.14), var(--bg-2) 60%); border-top-color: #ea580c; }
.wb-grouphdr-tkr { font-size: 13px; font-weight: 700; color: var(--fg); margin-right: 12px; letter-spacing: 0.02em; }
.wb-grouphdr-meta { font-size: 11px; color: var(--fg-faint); }
.wb-grouphdr-meta b { color: var(--fg); font-weight: 600; }
/* Source tag - one small chip per row */
.wb-src { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 10px; letter-spacing: 0.04em; border: 1px solid var(--line); background: var(--bg-2); color: var(--fg-faint); }
.wb-src-opra { background: rgba(59, 130, 246, 0.12); color: #93c5fd; border-color: rgba(59, 130, 246, 0.4); }
.wb-src-other { background: var(--bg-2); color: var(--fg); }
.wb-src-unk { color: var(--fg-faint); font-style: italic; }
/* Pinned tickers - a small always-visible section at the top. The row of
   controls to edit the pin list lives above the stats; PINNED chip sits on
   the group header inside the table so pinned clusters read as their own
   band, distinct from the rest. */
.wb-pinrow { display: flex; align-items: center; gap: 8px; margin: 6px 0 2px; font-size: 12px; }
.wb-pinlab { color: var(--fg-faint); }
.wb-pins { flex: 1; min-width: 240px; }
.wb-pinhint { flex-basis: 100%; margin-top: 2px; font-size: 11px; }
.wb-linkbtn { background: transparent; border: none; color: var(--accent-2, #93c5fd); font-size: 11px; padding: 2px 4px; cursor: pointer; text-decoration: underline; }
.wb-linkbtn:hover { color: var(--fg); }
.wb-pin-chip { display: inline-block; background: rgba(139, 92, 246, 0.22); color: #c4b5fd; border: 1px solid rgba(139, 92, 246, 0.45); font-size: 10px; letter-spacing: 0.06em; padding: 1px 6px; border-radius: 999px; margin-right: 8px; vertical-align: middle; }
.wb-grouphdr-pinned td { border-top: 2px solid rgba(139, 92, 246, 0.45); background: linear-gradient(90deg, rgba(139, 92, 246, 0.16), var(--bg-2) 60%); }
.wb-grouphdr-pinned.wb-tier-mega td { border-top-color: #facc15; background: linear-gradient(90deg, rgba(250, 204, 21, 0.22) 0%, rgba(139, 92, 246, 0.18) 40%, var(--bg-2) 80%); }
.wb-grouphdr-pinned.wb-tier-large td { border-top-color: #ea580c; background: linear-gradient(90deg, rgba(234, 88, 12, 0.18) 0%, rgba(139, 92, 246, 0.16) 40%, var(--bg-2) 80%); }
.wb-pinned-empty td { background: rgba(139, 92, 246, 0.06); }
.wb-pinned-empty .wb-grouphdr-tkr { color: var(--fg-faint); }
@media (max-width: 640px) {
  .wb-input { min-width: 140px; }
  .wb-stats { gap: 10px; font-size: 11px; }
  .wb-cp { display: inline-block; margin-bottom: 2px; }
}

/* ══════════════════════════════════════════════════════════════════════
   #309 Settings > General page - four type-grouped account cards, the
   inline editor drawer (ex-modal panes), and the Host fold-in. Mobile
   first: the grid collapses to one column under 720px.
   ══════════════════════════════════════════════════════════════════════ */
.settings-section { padding: 18px 20px; border-radius: 14px; }
.settings-section-title {
  margin: 0 0 4px; font-size: 15px; letter-spacing: 0.05em;
  font-family: var(--font-display); color: var(--fg);
}
.settings-section-sub { margin: 0 0 12px; font-size: 12px; color: var(--fg-dim); }
.settings-actions-row { display: flex; gap: 10px; }

.settings-type-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
@media (max-width: 720px) {
  .settings-type-grid { grid-template-columns: 1fr; }
}
.acct-type-card {
  border: 1px solid var(--line-strong); border-radius: 12px; padding: 14px 16px;
  background: var(--bg-1); display: flex; flex-direction: column; gap: 8px;
  min-width: 0;
}
.sp-kicker {
  font-size: 10px; letter-spacing: 0.14em; color: var(--fg-faint);
  font-family: var(--font-display);
}
.sp-title { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sp-sub { font-size: 12px; color: var(--fg-dim); }
.sp-badge {
  display: inline-block; padding: 1px 7px; border-radius: 999px;
  font-size: 10px; letter-spacing: 0.06em; border: 1px solid var(--line-strong);
  color: var(--fg-dim); background: transparent; vertical-align: middle;
}
.sp-badge.ok    { color: var(--accent); border-color: rgba(16,185,129,0.5); }
.sp-badge.paper { color: var(--accent-3); border-color: rgba(99,102,241,0.5); }
.sp-badge.live  { color: var(--bad); border-color: rgba(239,68,68,0.5); }
.sp-kv { font-size: 12px; border-collapse: collapse; width: 100%; }
.sp-kv td { padding: 2px 0; vertical-align: top; }
.sp-kv td.k { color: var(--fg-faint); padding-right: 14px; white-space: nowrap; }
.sp-kv td.v { word-break: break-word; }
.sp-gray { color: var(--fg-faint); }
.sp-ok { color: var(--accent); }
.sp-err-inline { color: var(--bad); }
.sp-err { color: var(--bad); font-size: 12px; padding: 6px 0; }
.sp-note { font-size: 11px; color: var(--fg-faint); border-left: 2px solid var(--line-strong); padding-left: 8px; }
.sp-hint { font-size: 11px; color: var(--fg-faint); }
.sp-actions { display: flex; gap: 8px; }

.sp-acct-row {
  border: 1px solid var(--line-strong); border-radius: 10px;
  padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 4px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.sp-acct-row:hover { border-color: rgba(16,185,129,0.5); transform: translateY(-1px); }
.sp-acct-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.sp-acct-name { font-weight: 600; font-size: 13px; }
.sp-acct-badges { display: flex; gap: 4px; flex-wrap: wrap; }
.sp-acct-line { font-size: 11px; color: var(--fg-dim); word-break: break-word; }

.sp-at-book { border: 1px solid var(--line-strong); border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.sp-at-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; cursor: pointer; }
.sp-at-fields { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.sp-at-fields label { display: flex; flex-direction: column; gap: 3px; font-size: 10px; color: var(--fg-faint); }
.sp-at-fields input {
  width: 110px; padding: 5px 8px; border-radius: 6px;
  border: 1px solid var(--line-strong); background: var(--bg-2);
  color: var(--fg); font-family: var(--font-mono); font-size: 12px;
}
.sp-at-fields input:focus { border-color: var(--accent); outline: none; }
.sp-at-status { font-size: 11px; color: var(--fg-dim); }

/* The moved editor drawer: same inner markup as the old modal pane, but as a
   page section now - restore the modal-era padding it lost with .tab-pane. */
#tab-account-edit { padding: 18px 20px; }
/* The modal clipped .form-grid overflow (overflow:hidden on .modal-card); on
   the page nothing clips, and `1fr 1fr` tracks default to minmax(auto,1fr) -
   the long unbreakable hint URLs blew the grid past the viewport at 768px.
   minmax(0,1fr) + wrap-anywhere keeps the drawer inside the page. */
#tab-account-edit .form-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (max-width: 720px) {
  #tab-account-edit .form-grid { grid-template-columns: minmax(0, 1fr); }
}
#tab-account-edit .form-row { min-width: 0; }
#tab-account-edit .hint-inline { overflow-wrap: anywhere; }
@media (max-width: 480px) {
  .sp-at-fields input { width: 90px; }
  .settings-section { padding: 14px 12px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Settings top tab bar (Trader | Integrations | Host) + the Host tab's
   Resources story (Arun 2026-08-11): CPU lane table, RAM budget bars,
   cache card, tool inventory, board map. Mobile: the lane table scrolls
   inside .hr-scroll; bars stack.
   ══════════════════════════════════════════════════════════════════════ */
.settings-tabbar {
  display: flex; gap: 4px; border-bottom: 1px solid var(--line-strong);
}
.settings-tab {
  appearance: none; background: transparent; border: none; cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  color: var(--fg-dim); font-family: var(--font-display);
  font-size: 13px; letter-spacing: 0.08em; padding: 9px 16px;
}
.settings-tab:hover { color: var(--fg); }
.settings-tab.active { color: var(--fg); border-bottom-color: var(--accent); }
/* Panes inherit the .page column rhythm so sections keep their spacing. */
.settings-tabpane { display: flex; flex-direction: column; gap: 18px; }
.settings-tabpane[hidden] { display: none; }
.settings-tabbar { flex-wrap: wrap; align-items: center; }
/* "General" group label sits inline in the tab bar before Host/Tools/Resources. */
.settings-tab-group-label {
  font-size: 10px; letter-spacing: 0.14em; color: var(--fg-faint);
  text-transform: uppercase; padding: 0 4px 0 14px; align-self: center;
  border-left: 1px solid var(--line-strong); margin-left: 8px;
}

/* ── Metrics compare (Resources tab): yesterday vs today CPU/GPU/RAM ── */
.mc-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.mc-tab {
  appearance: none; background: transparent; cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: 999px;
  color: var(--fg-dim); font-family: var(--font-display);
  font-size: 12px; letter-spacing: 0.06em; padding: 5px 14px;
}
.mc-tab:hover { color: var(--fg); border-color: var(--fg-faint); }
.mc-tab.active { color: var(--fg); border-color: var(--accent); background: rgba(127,168,247,0.08); }
.mc-summary { width: 100%; border-collapse: collapse; font-size: 12px; margin: 6px 0 4px; }
.mc-summary th {
  text-align: left; font-size: 10px; letter-spacing: 0.08em; color: var(--fg-faint);
  padding: 4px 12px 4px 0; border-bottom: 1px solid var(--line-strong); font-weight: 500;
}
.mc-summary td { padding: 6px 12px 6px 0; border-bottom: 1px solid var(--line); }
.mc-metric { color: var(--fg-dim); }
.mc-v { text-align: right; min-width: 78px; }
.mc-delta { font-size: 11px; font-weight: 600; }
.mc-up { color: #3fb68b; }
.mc-down { color: #e0a458; }
.mc-flat { color: var(--fg-faint); }
.mc-scroll { overflow-x: auto; margin-top: 6px; }
.mc-series { border-collapse: collapse; font-size: 11px; min-width: 640px; }
.mc-series th {
  text-align: right; font-size: 10px; letter-spacing: 0.04em; color: var(--fg-faint);
  padding: 3px 8px 3px 0; border-bottom: 1px solid var(--line-strong); font-weight: 500;
  white-space: nowrap;
}
.mc-series td { padding: 3px 8px 3px 0; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.mc-series .mc-time { text-align: left; color: var(--fg-dim); position: sticky; left: 0; background: var(--bg-1, var(--bg)); }
.mc-series .mc-daygroup {
  text-align: center; color: var(--accent); border-left: 1px solid var(--line-strong);
  letter-spacing: 0.06em;
}
/* Version bullets in the Releases > Versions tab. */
.cs-vbullets { margin: 6px 0 0; padding-left: 18px; color: var(--fg-dim); font-size: 12px; line-height: 1.5; }
.cs-vbullets li { margin: 2px 0; }

.hr-block { margin-bottom: 18px; }
.hr-block:last-child { margin-bottom: 0; }
.hr-block-title {
  font-size: 13px; font-weight: 600; letter-spacing: 0.05em;
  font-family: var(--font-display); margin-bottom: 8px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.hr-block-sub { font-size: 11px; color: var(--fg-faint); font-weight: 400; }
.hr-scroll { overflow-x: auto; }
.hr-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 520px; }
.hr-table th {
  text-align: left; font-size: 10px; letter-spacing: 0.1em; color: var(--fg-faint);
  padding: 4px 10px 4px 0; border-bottom: 1px solid var(--line-strong);
}
.hr-table td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
/* v4.121.0 (Arun "not properly aligned"): the Live-utilization tables (process/
   lane, DuckDB store, cache-family) render with class .hr-util and previously
   had NO CSS at all - browser-default left-aligned, unpadded cells, so the
   numeric columns never lined up. Give them padded cells and right-aligned,
   tabular-figure numeric columns (col 1 = the name stays left). */
.hr-util { width: 100%; border-collapse: collapse; font-size: 12px; }
.hr-util th {
  text-align: left; font-size: 10px; letter-spacing: 0.08em; color: var(--fg-faint);
  padding: 5px 14px 5px 0; border-bottom: 1px solid var(--line-strong); white-space: nowrap;
}
.hr-util td {
  padding: 5px 14px 5px 0; border-bottom: 1px solid var(--line); vertical-align: baseline;
}
.hr-util th:not(:first-child), .hr-util td:not(:first-child) {
  text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.hr-tier-row td {
  padding: 10px 0 4px; border-bottom: 1px solid var(--line-strong);
  font-size: 10px; letter-spacing: 0.12em; color: var(--accent);
}
.hr-lane-name { font-weight: 600; }
.hr-lane-meta { font-size: 10px; color: var(--fg-faint); margin-top: 2px; }
.sp-badge.hr-planned { color: var(--warn, #fbbf24); border-color: rgba(251,191,36,0.5); }
/* v4.125.0: PARTIAL - some of the lane is live, the job text says which half. */
.sp-badge.hr-partial { color: var(--accent, #38bdf8); border-color: rgba(56,189,248,0.5); }
.hr-worker-input {
  width: 58px; padding: 4px 6px; border-radius: 6px;
  border: 1px solid var(--line-strong); background: var(--bg-2);
  color: var(--fg); font-size: 12px;
}
.hr-worker-input:focus { border-color: var(--accent); outline: none; }
.hr-job { color: var(--fg-dim); font-size: 11px; }
.hr-status { font-size: 11px; color: var(--fg-dim); min-height: 16px; margin-top: 6px; }

.hr-ram { display: flex; flex-direction: column; gap: 6px; }
.hr-ram-row {
  display: grid; grid-template-columns: 150px auto 1fr;
  align-items: center; gap: 10px; font-size: 12px;
}
.hr-ram-label { color: var(--fg-dim); }
.hr-ram-nums { font-size: 11px; white-space: nowrap; }
.hr-ram-bar {
  display: block; height: 8px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--line-strong); overflow: hidden;
}
.hr-ram-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.hr-ram-fill.over { background: var(--bad); }

.hr-cache { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; }
.hr-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 6px 18px; }
.hr-tool { display: flex; flex-direction: column; font-size: 12px; }
.hr-tool-name { font-weight: 600; }
.hr-tool-role { font-size: 11px; color: var(--fg-faint); }
.hr-board { font-size: 12px; color: var(--fg-dim); }

@media (max-width: 640px) {
  .settings-tab { padding: 8px 10px; font-size: 12px; }
  .hr-ram-row { grid-template-columns: 110px auto 1fr; gap: 6px; }
  .hr-cache { gap: 10px; }
}

/* ── Coming Soon (v4.59.0) - Settings > Coming Soon roadmap register ── */
#page-comingsoon .cs-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 8px; }
#page-comingsoon .cs-tab {
  background: transparent; border: 1px solid var(--border); color: var(--fg-dim);
  border-radius: 999px; padding: 5px 12px; font-size: 12px; cursor: pointer;
}
#page-comingsoon .cs-tab:hover { color: var(--fg); border-color: var(--fg-faint); }
#page-comingsoon .cs-tab.active { color: var(--fg); border-color: var(--accent, #7aa2f7); background: rgba(122,162,247,.10); }
#page-comingsoon .cs-tab .mono { color: var(--fg-faint); margin-left: 4px; }
#page-comingsoon .cs-meta { color: var(--fg-faint); font-size: 11px; margin-bottom: 10px; }
#page-comingsoon .cs-list { display: flex; flex-direction: column; gap: 6px; }
#page-comingsoon .cs-item { border: 1px solid var(--border); border-radius: 8px; padding: 9px 12px; }
#page-comingsoon .cs-item-main {
  display: flex; gap: 10px; align-items: baseline; justify-content: space-between; flex-wrap: wrap;
}
#page-comingsoon .cs-title { color: var(--fg); font-size: 13px; line-height: 1.45; flex: 1 1 320px; }
#page-comingsoon .cs-chips { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }
#page-comingsoon .cs-badge {
  border: 1px solid var(--fg-faint); border-radius: 999px; padding: 1px 7px;
  font-size: 10px; letter-spacing: .02em; white-space: nowrap;
}
#page-comingsoon .cs-note { color: var(--fg-faint); font-size: 11px; margin-top: 5px; line-height: 1.4; }
#page-comingsoon .cs-done { opacity: .55; }
#page-comingsoon .cs-done .cs-title { text-decoration: line-through; text-decoration-color: var(--fg-faint); }
#page-comingsoon .cs-divider {
  display: flex; align-items: center; gap: 10px; margin: 20px 0 10px;
  color: var(--fg-faint); font-size: 11px; text-transform: uppercase; letter-spacing: .08em;
}
#page-comingsoon .cs-divider::before, #page-comingsoon .cs-divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}
@media (max-width: 480px) {
  /* Stacked, the title's flex-basis becomes a HEIGHT - 320px of empty card.
     Reset the basis and stop the column justifying its two rows apart. */
  #page-comingsoon .cs-item-main {
    flex-direction: column; gap: 6px; align-items: flex-start; justify-content: flex-start;
  }
  #page-comingsoon .cs-title { flex: 0 1 auto; }
}

/* ── v4.91.0 wave 2: sortable columns, Profit Makers, trade archive ────
   Sort arrows reuse the v1.2.27 table.sortable th.sort-asc/.sort-desc
   triangles; this only adds the pointer affordance the old rules left to
   JS. The sd-arch-* set is the per-trader Trades Archive browser (date
   pills, compact trade rows, grouped key-value record, raw JSON fold). */
table.sortable thead th[data-sort-key] { cursor: pointer; }
.sd-pm-note { margin: -4px 0 10px; }
.sd-arch-pills { display: flex; gap: 5px; flex-wrap: wrap; margin: 4px 0 10px; }
.sd-arch-pill { font-size: 11px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid rgba(128,128,128,.3); background: transparent;
  color: inherit; cursor: pointer; opacity: .75; }
.sd-arch-pill:hover { opacity: 1; }
.sd-arch-pill.on { opacity: 1; border-color: rgba(56,189,248,.5);
  background: rgba(56,189,248,.12); color: #38bdf8; }
.sd-arch-row { display: flex; gap: 10px; align-items: center; padding: 6px;
  border-bottom: 1px dashed rgba(128,128,128,.15); font-size: 12px;
  flex-wrap: wrap; cursor: pointer; }
.sd-arch-row:hover { background: rgba(128,128,128,.06); }
.sd-arch-detail { border: 1px solid rgba(128,128,128,.2); border-radius: 8px;
  padding: 10px 12px; margin: 6px 0 10px; font-size: 12px; }
.sd-arch-sec { margin-bottom: 8px; }
.sd-arch-sec h5 { margin: 0 0 4px; font-size: 10px; text-transform: uppercase;
  letter-spacing: .06em; opacity: .7; }
.sd-arch-kvrow { display: grid; grid-template-columns: minmax(90px, 180px) 1fr;
  gap: 8px; padding: 1px 0; font-size: 11px; }
.sd-arch-k { opacity: .6; overflow-wrap: anywhere; }
.sd-arch-v { overflow-wrap: anywhere; }
.sd-arch-raw summary { cursor: pointer; font-size: 11px; opacity: .7; }
.sd-arch-raw pre { margin: 6px 0 0; padding: 8px 10px;
  border: 1px solid rgba(128,128,128,.2); border-radius: 8px;
  font-size: 10.5px; line-height: 1.5; max-height: 320px; overflow: auto;
  white-space: pre-wrap; overflow-wrap: anywhere; }
@media (max-width: 520px) {
  .sd-arch-kvrow { grid-template-columns: 1fr; gap: 2px; }
  .sd-arch-row { font-size: 11px; gap: 7px; }
}

/* ── YouTube Links (v4.124.0, TODO #403) - Settings > YouTube Links ────────
   Candidate cards are deliberately plain: the honest states (no levels
   stated, not mechanisable, symbol inferred) must read as clearly as the
   confident ones, so nothing here is styled to look more certain than it is. */
.yt-banner { padding:8px 12px; border-radius:6px; margin-bottom:10px;
  background:rgba(255,255,255,.06); font-size:12px; }
.yt-form { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:10px 0; }
.yt-input { flex:1 1 320px; min-width:0; padding:8px 10px; border-radius:6px;
  border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.25);
  color:inherit; font-size:13px; }
.yt-input-sm { flex:0 1 200px; }
.yt-list { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.yt-row { display:flex; align-items:center; gap:10px; padding:8px 10px;
  border-radius:6px; background:rgba(255,255,255,.04); }
.yt-row-main { flex:1; min-width:0; }
.yt-row-title { font-size:13px; font-weight:600; }
.yt-row-sub { font-size:11px; opacity:.65; word-break:break-all; }
.yt-row-err { font-size:11px; color:#e0a35c; margin-top:2px; }
.yt-empty, .yt-none { font-size:12px; opacity:.55; padding:6px 0; }
.yt-counts { font-size:11px; opacity:.6; font-weight:400; margin-left:8px; }

.yt-pill { font-size:10px; padding:2px 7px; border-radius:10px; white-space:nowrap;
  background:rgba(255,255,255,.1); }
.yt-ok { background:rgba(80,190,120,.22); color:#7fd8a0; }
.yt-bad { background:rgba(220,90,90,.20); color:#e89090; }
.yt-wait { background:rgba(220,170,70,.18); color:#e0b96a; }
.yt-neutral { background:rgba(255,255,255,.10); }

.yt-cands { display:flex; flex-direction:column; gap:12px; margin-top:10px; }
.yt-cand { padding:12px; border-radius:8px; background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08); }
.yt-cand-err { border-color:rgba(220,90,90,.3); }
.yt-cand-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.yt-cand-head a { font-size:14px; font-weight:600; }
.yt-cand h5 { margin:10px 0 4px; font-size:11px; text-transform:uppercase;
  letter-spacing:.06em; opacity:.6; }
.yt-summary { font-size:13px; margin:8px 0; line-height:1.5; }
.yt-decided-head { margin:16px 0 4px; font-size:12px; opacity:.6; }
.yt-decided { font-size:11px; opacity:.6; margin-top:8px; }

.yt-chips { display:flex; flex-wrap:wrap; gap:6px; }
.yt-chip { display:inline-flex; align-items:center; gap:5px; font-size:11px;
  padding:3px 8px; border-radius:5px; background:rgba(255,255,255,.07); }
.yt-chip b { font-size:12px; }
.yt-chip em { opacity:.6; font-style:normal; }
.yt-chip u { text-decoration:none; opacity:.75; }
.yt-chip .yt-inf { font-style:normal; font-size:9px; text-transform:uppercase;
  padding:1px 4px; border-radius:3px; background:rgba(220,170,70,.22); color:#e0b96a; }
.yt-bullish { box-shadow:inset 2px 0 0 rgba(80,190,120,.7); }
.yt-bearish { box-shadow:inset 2px 0 0 rgba(220,90,90,.7); }

.yt-levels { margin:4px 0; padding-left:18px; font-size:12px; }
.yt-levels li { margin:3px 0; }
.yt-kind { opacity:.6; font-size:11px; }
.yt-price { font-weight:600; }
.yt-note { opacity:.6; font-size:11px; }

.yt-strategy { margin-top:12px; padding-top:10px; border-top:1px solid rgba(255,255,255,.08); }
.yt-strat-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:13px; }
.yt-thesis { font-size:12.5px; margin:6px 0; opacity:.85; line-height:1.5; }
.yt-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; }
.yt-rules { margin:2px 0; padding-left:16px; font-size:12px; }
.yt-rules li { margin:2px 0; }
.yt-missing { margin-top:8px; padding:8px 10px; border-radius:6px;
  background:rgba(220,170,70,.10); }
.yt-actions { display:flex; gap:8px; margin-top:12px; }

@media (max-width:600px) {
  .yt-input, .yt-input-sm { flex:1 1 100%; }
  .yt-grid { grid-template-columns:1fr; }
  .yt-row { flex-wrap:wrap; }
}