/* HYPERROLL OPS-CONSOLE v10 — clean rebuild of v9 navy + copper aesthetic */

:root {
  --hud-cyan: #66c0ff; --hud-cyan-dim: #3a6c8c; --hud-cyan-deep: #1d4060; --hud-cyan-soft: #88d0ff;
  --hud-copper: #ff7733; --hud-copper-bright: #ff9966; --hud-copper-deep: #b8500f;
  --hud-amber: #ffb070; --hud-gold: #ffb000; --hud-gold-bright: #ffd24a;
  --hud-red: #ff3b5c; --hud-green: #00ff9c; --hud-purple: #b366ff;
  --bg-deep: #050e1c; --bg-mid: #0a1830; --bg-darker: #02080f;
  --bg-panel: rgba(10, 22, 42, 0.55);
  --grid-line: rgba(102, 192, 255, 0.04); --grid-line-bright: rgba(255, 119, 51, 0.10);
  --grid-warm: rgba(255, 119, 51, 0.06);
  --glow-cyan: 0 0 18px rgba(102, 192, 255, 0.4);
  --glow-copper: 0 0 18px rgba(255, 119, 51, 0.5);
  --glow-gold: 0 0 14px rgba(255, 176, 0, 0.4);
  --glow-red: 0 0 18px rgba(255, 59, 92, 0.5);
  --glow-green: 0 0 14px rgba(0, 255, 156, 0.5);
  --copper-grad: linear-gradient(135deg, #ff7733 0%, #ffb070 35%, #ffd24a 65%, #ff7733 100%);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { background: var(--bg-deep); min-height: 100%; overflow-x: hidden; }
body {
  font-family: 'Rajdhani', 'Noto Sans TC', 'Share Tech Mono', monospace;
  color: var(--hud-cyan); font-size: 14px; line-height: 1.45; letter-spacing: 0.4px;
  font-variant-numeric: tabular-nums slashed-zero;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(255,119,51,0.10) 0%, transparent 55%),
    radial-gradient(ellipse 80% 60% at 12% 35%, rgba(102,192,255,0.08) 0%, transparent 55%),
    radial-gradient(ellipse 70% 50% at 88% 75%, rgba(255,153,102,0.07) 0%, transparent 60%),
    linear-gradient(180deg, #050e1c 0%, #081830 50%, #050e1c 100%);
  min-height: 100vh; padding: 14px 20px 60px; position: relative;
}
body.loading { opacity: 0; }
body.ready { opacity: 1; transition: opacity 220ms ease-out; }
body::before {
  content: ''; position: fixed; inset: 0;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none; z-index: 0;
  mask-image: radial-gradient(ellipse at 50% 40%, #000 30%, transparent 95%);
}

/* horizon scan-sweep (toggle off in PERF mode) */
.horizon { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.horizon::before {
  content: ''; position: absolute; left: 0; right: 0; height: 200px; top: -200px;
  background: linear-gradient(180deg, transparent 0%, rgba(0,230,255,0.05) 50%, rgba(0,230,255,0.16) 92%, transparent 100%);
  animation: horizonSweep 24s ease-in-out infinite;
}
@keyframes horizonSweep { 0% { top: -220px; } 65%, 100% { top: 110vh; } }

.horizon-grid {
  position: fixed; left: 0; right: 0; bottom: 0; height: 280px;
  perspective: 600px; perspective-origin: 50% 0%; pointer-events: none; z-index: 0; overflow: hidden;
  mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 75%, transparent 100%);
}
.horizon-grid::before {
  content: ''; position: absolute; left: -25%; right: -25%; bottom: 0; height: 480px;
  background:
    linear-gradient(0deg, var(--grid-warm) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-warm) 1px, transparent 1px);
  background-size: 36px 36px;
  transform: rotateX(75deg) translateZ(-60px);
  animation: terrainSlide 18s linear infinite;
}
@keyframes terrainSlide { from { background-position: 0 0; } to { background-position: 0 36px; } }

body.perf .horizon, body.perf .horizon-grid { display: none; }
body.perf::before { display: none; }

.wrap { position: relative; z-index: 2; max-width: 1480px; margin: 0 auto; }

/* ── HUD top ────────────────────────────────────────────────────────── */
.hud-top {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 24px; margin-bottom: 12px; position: relative; overflow: hidden;
  background:
    linear-gradient(135deg, rgba(10,30,50,0.94) 0%, rgba(8,18,36,0.72) 50%, rgba(48,22,10,0.88) 100%),
    radial-gradient(ellipse at 50% 0%, rgba(255,119,51,0.22) 0%, transparent 60%);
  border: 1px solid rgba(255,119,51,0.55);
  box-shadow: var(--glow-copper), inset 0 0 40px rgba(255,119,51,0.08);
  clip-path: polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 6px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 6px), 0 20px);
}
.hud-top h1 {
  font-family: 'Orbitron', sans-serif; font-weight: 900; font-size: 22px; letter-spacing: 6px;
  background: var(--copper-grad); background-size: 200% 200%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgba(255,119,51,0.55));
  animation: holoShift 6s ease-in-out infinite;
}
@keyframes holoShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.hud-top h1 .dim {
  -webkit-text-fill-color: var(--hud-cyan); color: var(--hud-cyan);
  background: none; font-weight: 500; letter-spacing: 4px; font-size: 12px;
  margin-left: 12px; opacity: 0.85; padding-left: 12px;
  border-left: 1px solid rgba(0,230,255,0.4);
}
.hud-top .right { display: flex; gap: 14px; align-items: center; font-family: 'Share Tech Mono', monospace; font-size: 12px; }
.stat-pill { display: flex; align-items: center; gap: 6px; }
.stat-pill .lbl { color: var(--hud-cyan-soft); letter-spacing: 2px; opacity: 0.75; }
.stat-pill .val { color: var(--hud-copper-bright); font-weight: 700; text-shadow: 0 0 6px rgba(255,119,51,0.4); }
.pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hud-green); box-shadow: 0 0 10px var(--hud-green); animation: pulse 1.6s ease-in-out infinite; }
.pulse-dot.warn { background: var(--hud-gold); box-shadow: 0 0 10px var(--hud-gold); }
.pulse-dot.bad { background: var(--hud-red); box-shadow: 0 0 10px var(--hud-red); }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

.lang-toggle {
  cursor: pointer; padding: 4px 10px; border: 1px solid var(--hud-cyan); color: var(--hud-cyan-dim);
  font-family: 'Orbitron', sans-serif; font-size: 11px; letter-spacing: 2px;
  background: rgba(0,30,52,0.5); transition: all 0.15s;
}
.lang-toggle.active { color: var(--hud-gold-bright); background: rgba(60,40,0,0.4); border-color: var(--hud-gold); }
.lang-toggle:hover { color: var(--hud-gold-bright); }

/* ── ribbon ─────────────────────────────────────────────────────────── */
.ribbon {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; margin-bottom: 14px;
  background: linear-gradient(90deg, rgba(255,119,51,0.45) 0%, rgba(102,192,255,0.30) 50%, rgba(255,119,51,0.45) 100%);
  border: 1px solid rgba(255,119,51,0.55); box-shadow: var(--glow-copper), inset 0 0 18px rgba(255,119,51,0.08);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 14px);
}
.ribbon .seg {
  background: linear-gradient(180deg, rgba(0,28,48,0.95) 0%, rgba(2,10,20,0.97) 100%);
  padding: 9px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.ribbon .seg .lbl { font-family: 'Orbitron', sans-serif; font-size: 9px; color: var(--hud-cyan-soft); letter-spacing: 2.5px; opacity: 0.7; }
.ribbon .seg .val { font-family: 'Share Tech Mono', monospace; font-size: 13px; color: var(--hud-copper-bright); font-weight: 700; letter-spacing: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ribbon .seg.active .val { color: var(--hud-green); text-shadow: var(--glow-green); }
.ribbon .seg.warn .val { color: var(--hud-red); text-shadow: var(--glow-red); }

.scan-indicator { display: inline-flex; align-items: center; gap: 5px; font-family: 'Share Tech Mono', monospace; font-size: 12px; }
.scan-indicator .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hud-cyan); box-shadow: 0 0 6px var(--hud-cyan); }
.scan-indicator.active .dot { background: var(--hud-green); box-shadow: 0 0 10px var(--hud-green); animation: scanPulse 0.8s ease-in-out infinite; }
@keyframes scanPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ── alerts ─────────────────────────────────────────────────────────── */
.alert-banner {
  margin-bottom: 10px; padding: 10px 16px; border: 1px solid var(--hud-red);
  background: linear-gradient(90deg, rgba(60,8,8,0.6) 0%, rgba(20,4,4,0.3) 100%);
  color: var(--hud-red); font-weight: 700; letter-spacing: 3px;
  box-shadow: var(--glow-red);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  animation: alertFlash 2s ease-in-out infinite;
}
.alert-banner.ok { border-color: var(--hud-green); color: var(--hud-green); box-shadow: var(--glow-green); animation: none; background: linear-gradient(90deg, rgba(8,40,24,0.55) 0%, rgba(4,16,10,0.2) 100%); }
@keyframes alertFlash { 0%, 100% { box-shadow: var(--glow-red); } 50% { box-shadow: 0 0 30px rgba(255,59,59,0.85); } }

/* ── grid ──────────────────────────────────────────────────────────── */
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; margin-bottom: 12px; }
.col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; } .col-12 { grid-column: span 12; }

/* ── panel ─────────────────────────────────────────────────────────── */
.panel {
  background: var(--bg-panel); border: 1px solid rgba(102,192,255,0.18);
  padding: 14px 16px 16px; position: relative; overflow: hidden;
  contain: layout style;
  box-shadow:
    0 0 0 1px rgba(102,192,255,0.04), 0 6px 20px rgba(0,0,0,0.5),
    inset 0 0 28px rgba(102,192,255,0.025), inset 0 1px 0 rgba(102,192,255,0.12);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 14px 100%, 0 calc(100% - 14px), 0 4px);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.panel:hover {
  box-shadow: 0 0 0 1px rgba(255,119,51,0.18), 0 8px 24px rgba(0,0,0,0.55), var(--glow-copper);
  border-color: rgba(255,119,51,0.4);
}
.panel.gold { border-color: rgba(255,119,51,0.5); box-shadow: var(--glow-copper), inset 0 0 32px rgba(255,119,51,0.05); }
.panel.red { border-color: rgba(255,59,92,0.45); box-shadow: var(--glow-red), inset 0 0 28px rgba(255,59,92,0.05); }
.panel.green { border-color: rgba(0,255,156,0.42); box-shadow: var(--glow-green), inset 0 0 28px rgba(0,255,156,0.05); }
.panel::before {
  content: ''; position: absolute; top: 5px; left: 5px; width: 22px; height: 22px;
  border-top: 1px solid var(--hud-copper); border-left: 1px solid var(--hud-copper);
  pointer-events: none; opacity: 0.85;
}
.panel::after {
  content: ''; position: absolute; bottom: 5px; right: 5px; width: 22px; height: 22px;
  border-bottom: 1px solid var(--hud-copper); border-right: 1px solid var(--hud-copper);
  pointer-events: none; opacity: 0.85;
}

.panel h2 {
  font-family: 'Orbitron', sans-serif; font-size: 12px; letter-spacing: 3px;
  color: var(--hud-copper-bright); margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(102,192,255,0.16);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.panel h2 .badge {
  font-size: 9px; padding: 2px 8px; background: rgba(255,119,51,0.2);
  border: 1px solid rgba(255,119,51,0.5); border-radius: 2px;
  color: var(--hud-copper-bright); letter-spacing: 1.5px;
}
.panel h2 .badge.live { background: rgba(0,255,156,0.18); border-color: rgba(0,255,156,0.5); color: var(--hud-green); }

.seg-tabs { display: inline-flex; gap: 1px; margin-left: auto; background: rgba(102,192,255,0.15); padding: 1px; }
.seg-tabs button {
  background: rgba(5,15,28,0.92); color: var(--hud-cyan-dim); border: none;
  padding: 3px 9px; font-family: 'Share Tech Mono', monospace; font-size: 10px;
  letter-spacing: 1.5px; cursor: pointer; transition: all 0.12s;
}
.seg-tabs button:hover { color: var(--hud-cyan-soft); }
.seg-tabs button.on { color: var(--hud-gold-bright); background: rgba(60,40,0,0.55); }

.hdr-stat { font-family: 'Share Tech Mono', monospace; font-size: 10px; color: var(--hud-cyan-soft); letter-spacing: 1.5px; }
.csv-btn {
  font-family: 'Orbitron', sans-serif; font-size: 9px; letter-spacing: 2px;
  padding: 3px 9px; border: 1px solid var(--hud-cyan); color: var(--hud-cyan);
  background: rgba(0,30,52,0.5); cursor: pointer; text-decoration: none;
}
.csv-btn:hover { color: var(--hud-gold-bright); border-color: var(--hud-gold); }
.chart-sym { font-family: 'Orbitron', sans-serif; font-size: 14px; color: #fff; letter-spacing: 3px; margin-left: auto; }

/* ── reactor / equity panel ─────────────────────────────────────────── */
.reactor { position: relative; width: 200px; height: 200px; margin: 0 auto; }
.reactor svg { width: 100%; height: 100%; }
.reactor .ring-bg { fill: none; stroke: rgba(102,192,255,0.12); stroke-width: 8; }
.reactor .ring-fg { fill: none; stroke: var(--hud-copper-bright); stroke-width: 8; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 100px 100px; transition: stroke-dasharray 0.7s ease; filter: drop-shadow(0 0 6px var(--hud-copper)); }
.reactor .ring-tick { stroke: var(--hud-cyan-dim); stroke-width: 1; opacity: 0.6; }
.reactor-core {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.reactor-core .lbl { font-family: 'Orbitron', sans-serif; font-size: 10px; letter-spacing: 3px; color: var(--hud-cyan-soft); }
.reactor-core .val { font-family: 'Orbitron', sans-serif; font-size: 26px; font-weight: 900; color: var(--hud-copper-bright); text-shadow: var(--glow-copper); }
.reactor-core .sub { font-family: 'Share Tech Mono', monospace; font-size: 11px; color: var(--hud-gold-bright); }

.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.kv { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-bottom: 1px solid rgba(102,192,255,0.06); }
.kv .k { font-family: 'Orbitron', sans-serif; font-size: 9px; letter-spacing: 2px; color: var(--hud-cyan-soft); opacity: 0.7; }
.kv .v { font-family: 'Share Tech Mono', monospace; font-size: 14px; color: #fff; }
.kv .v.ok { color: var(--hud-green); }
.kv .v.bad { color: var(--hud-red); }
.kv .v.warn { color: var(--hud-gold-bright); }
.kv .v.dim { color: var(--hud-cyan-dim); }

/* ── battlefront positions ──────────────────────────────────────────── */
.pos-list { display: flex; flex-direction: column; gap: 6px; max-height: 280px; overflow-y: auto; }
.pos-row {
  display: grid; grid-template-columns: 80px 60px 1fr 70px 70px 60px;
  gap: 10px; padding: 7px 10px; align-items: center;
  background: rgba(5,15,28,0.55); border-left: 3px solid var(--hud-cyan-dim);
  font-family: 'Share Tech Mono', monospace; font-size: 12px;
  cursor: pointer; transition: background 0.12s, border-color 0.12s;
}
.pos-row:hover { background: rgba(15,30,50,0.75); border-left-color: var(--hud-copper); }
.pos-row.long { border-left-color: var(--hud-green); }
.pos-row.short { border-left-color: var(--hud-red); }
.pos-row .sym { color: #fff; font-weight: 700; letter-spacing: 1px; }
.pos-row .side { font-size: 9px; padding: 2px 6px; letter-spacing: 1.5px; text-align: center; font-family: 'Orbitron', sans-serif; }
.pos-row .side.long { color: var(--hud-green); border: 1px solid var(--hud-green); }
.pos-row .side.short { color: var(--hud-red); border: 1px solid var(--hud-red); }
.pos-row .reason { color: var(--hud-cyan-soft); font-size: 10px; opacity: 0.8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pos-row .upnl { text-align: right; font-weight: 700; }
.pos-row .upnl.up { color: var(--hud-green); } .pos-row .upnl.dn { color: var(--hud-red); }
.pos-row .roi { text-align: right; }
.pos-row .roi.up { color: var(--hud-green); } .pos-row .roi.dn { color: var(--hud-red); }
.pos-row .held { color: var(--hud-cyan-soft); text-align: right; font-size: 11px; }
.pos-row .flatten-btn {
  background: transparent; border: 1px solid var(--hud-red); color: var(--hud-red);
  font-family: 'Orbitron', sans-serif; font-size: 9px; padding: 3px 7px; letter-spacing: 1.5px; cursor: pointer;
}
.pos-row .flatten-btn:hover { background: var(--hud-red); color: #fff; }
.empty { color: var(--hud-cyan-dim); padding: 18px 6px; font-style: italic; text-align: center; letter-spacing: 2px; }

/* ── canvas charts ──────────────────────────────────────────────────── */
canvas#eqCanvas, canvas#pnlCanvas { width: 100%; display: block; background: rgba(2,8,16,0.45); border: 1px solid rgba(102,192,255,0.10); }

/* ── heatmap ────────────────────────────────────────────────────────── */
.heatmap-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px;
}
.heat-cell {
  background: rgba(5,15,28,0.7); border: 1px solid rgba(102,192,255,0.18);
  padding: 8px 10px; cursor: pointer; transition: transform 0.12s, border-color 0.12s, box-shadow 0.12s;
  position: relative; overflow: hidden;
}
.heat-cell:hover { transform: translateY(-2px); border-color: var(--hud-copper); box-shadow: var(--glow-copper); }
.heat-cell .sym { font-family: 'Orbitron', sans-serif; font-size: 11px; letter-spacing: 1.5px; color: #fff; }
.heat-cell .ext { font-family: 'Share Tech Mono', monospace; font-size: 11px; }
.heat-cell .ext.up { color: var(--hud-green); } .heat-cell .ext.dn { color: var(--hud-red); }
.heat-cell .k { font-family: 'Share Tech Mono', monospace; font-size: 10px; color: var(--hud-cyan-soft); }
.heat-cell .k.high { color: var(--hud-red); } .heat-cell .k.low { color: var(--hud-green); }
.heat-cell .progress-bar { height: 3px; margin-top: 6px; background: rgba(102,192,255,0.1); overflow: hidden; }
.heat-cell .progress-bar .fill { height: 100%; background: var(--hud-cyan-soft); transition: width 0.6s ease; }
.heat-cell.armed { border-color: var(--hud-gold); box-shadow: var(--glow-gold); }
.heat-cell.armed .sym { color: var(--hud-gold-bright); text-shadow: var(--glow-gold); }
.heat-cell.armed .progress-bar .fill { background: var(--hud-gold-bright); }
.heat-cell.armed-short { border-color: var(--hud-red); }
.heat-cell.armed-short .progress-bar .fill { background: var(--hud-red); }
.heat-cell.armed-long { border-color: var(--hud-green); }
.heat-cell.armed-long .progress-bar .fill { background: var(--hud-green); }
.heat-cell .arm-tag {
  position: absolute; top: 4px; right: 4px; font-size: 8px; font-family: 'Orbitron', sans-serif;
  letter-spacing: 1px; padding: 1px 4px; border: 1px solid currentColor;
}
.heat-cell.armed-short .arm-tag { color: var(--hud-red); }
.heat-cell.armed-long .arm-tag { color: var(--hud-green); }

/* ── scan table ─────────────────────────────────────────────────────── */
.scan-table { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow-y: auto; font-family: 'Share Tech Mono', monospace; font-size: 11px; }
.scan-table .hdr, .scan-table .row {
  display: grid; grid-template-columns: 60px 1fr 60px 40px 60px;
  gap: 6px; padding: 4px 8px; align-items: center;
}
.scan-table .hdr { color: var(--hud-cyan-dim); font-size: 9px; letter-spacing: 2px; border-bottom: 1px solid rgba(102,192,255,0.12); padding-bottom: 6px; }
.scan-table .row { background: rgba(5,15,28,0.4); border-left: 2px solid transparent; cursor: pointer; }
.scan-table .row:hover { background: rgba(15,30,50,0.7); }
.scan-table .row.trig-LONG { border-left-color: var(--hud-green); background: rgba(0,40,20,0.4); }
.scan-table .row.trig-SHORT { border-left-color: var(--hud-red); background: rgba(40,0,15,0.4); }
.scan-table .ext.up { color: var(--hud-green); } .scan-table .ext.dn { color: var(--hud-red); }
.scan-table .k.high { color: var(--hud-red); } .scan-table .k.low { color: var(--hud-green); }
.scan-table .stat-trig { font-family: 'Orbitron', sans-serif; font-size: 9px; letter-spacing: 1.5px; }
.scan-table .stat-trig.LONG { color: var(--hud-green); }
.scan-table .stat-trig.SHORT { color: var(--hud-red); }

/* ── kline chart ────────────────────────────────────────────────────── */
#klineWrap { position: relative; height: 380px; background: rgba(2,8,16,0.55); border: 1px solid rgba(102,192,255,0.12); }
#klineWrap canvas { position: absolute; inset: 0; }
.kline-info { position: absolute; top: 6px; left: 10px; font-family: 'Share Tech Mono', monospace; font-size: 11px; color: var(--hud-cyan-soft); pointer-events: none; }

/* ── trade table ────────────────────────────────────────────────────── */
.trade-table { width: 100%; font-family: 'Share Tech Mono', monospace; font-size: 11px; max-height: 380px; overflow-y: auto; display: block; }
.trade-row {
  display: grid; grid-template-columns: 90px 56px 80px 80px 90px 80px 1fr 90px;
  gap: 8px; padding: 5px 10px; align-items: center;
  border-left: 2px solid transparent; background: rgba(5,15,28,0.4);
}
.trade-row.win { border-left-color: var(--hud-green); }
.trade-row.loss { border-left-color: var(--hud-red); }
.trade-row.hdr { color: var(--hud-cyan-dim); font-size: 9px; letter-spacing: 2px; background: transparent; border-bottom: 1px solid rgba(102,192,255,0.12); }
.trade-row .sym { color: #fff; font-weight: 700; }
.trade-row .side.long { color: var(--hud-green); }
.trade-row .side.short { color: var(--hud-red); }
.trade-row .pnl.up { color: var(--hud-green); } .trade-row .pnl.dn { color: var(--hud-red); }
.trade-row .reason { color: var(--hud-cyan-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.8; }
.trade-row .ts { color: var(--hud-cyan-dim); font-size: 10px; }

/* ── controls ───────────────────────────────────────────────────────── */
.ctrl-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ctrl-card {
  padding: 10px 12px; background: rgba(5,15,28,0.6); border: 1px solid rgba(102,192,255,0.18);
  display: flex; flex-direction: column; gap: 8px;
}
.ctrl-card .lbl { font-family: 'Orbitron', sans-serif; font-size: 10px; letter-spacing: 2px; color: var(--hud-cyan-soft); }
.ctrl-card .val { font-family: 'Share Tech Mono', monospace; font-size: 14px; color: var(--hud-copper-bright); font-weight: 700; }
.ctrl-card .row { display: flex; gap: 6px; align-items: center; }
.ctrl-btn {
  flex: 1; padding: 7px 10px; background: rgba(0,30,52,0.55); border: 1px solid var(--hud-cyan-dim);
  color: var(--hud-cyan); font-family: 'Orbitron', sans-serif; font-size: 11px; letter-spacing: 1.5px; cursor: pointer; transition: all 0.12s;
}
.ctrl-btn:hover { color: var(--hud-gold-bright); border-color: var(--hud-gold); }
.ctrl-btn.danger { border-color: rgba(255,59,92,0.5); color: var(--hud-red); }
.ctrl-btn.danger:hover { background: rgba(80,8,16,0.5); color: #fff; box-shadow: var(--glow-red); }
.ctrl-btn.on { color: var(--hud-green); border-color: var(--hud-green); background: rgba(0,40,24,0.5); }
.ctrl-input {
  flex: 1; padding: 6px 10px; background: rgba(2,8,16,0.85); border: 1px solid var(--hud-cyan-dim);
  color: #fff; font-family: 'Share Tech Mono', monospace; font-size: 13px;
}
.ctrl-input:focus { outline: none; border-color: var(--hud-copper); }

/* ── timeline (research) ────────────────────────────────────────────── */
.timeline { display: flex; flex-direction: column; gap: 7px; max-height: 460px; overflow-y: auto; padding-right: 4px; }
.timeline-item {
  display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 8px 10px;
  background: rgba(5,15,28,0.45); border-left: 2px solid var(--hud-cyan-dim);
}
.timeline-item .ver { font-family: 'Orbitron', sans-serif; font-size: 14px; color: var(--hud-copper-bright); font-weight: 700; }
.timeline-item .ver .date { display: block; font-family: 'Share Tech Mono', monospace; font-size: 10px; color: var(--hud-cyan-soft); margin-top: 2px; }
.timeline-item .body .ttl { color: #fff; font-size: 13px; font-weight: 700; margin-left: 8px; }
.timeline-item .body .desc { font-family: 'Share Tech Mono', monospace; font-size: 11px; color: var(--hud-cyan-soft); margin-top: 4px; line-height: 1.4; }
.tag { font-family: 'Orbitron', sans-serif; font-size: 9px; padding: 2px 6px; letter-spacing: 1.5px; }
.tag-DEPLOY { color: var(--hud-green); border: 1px solid var(--hud-green); }
.tag-PATCH { color: var(--hud-gold-bright); border: 1px solid var(--hud-gold); }
.tag-RESEARCH { color: var(--hud-cyan-soft); border: 1px solid var(--hud-cyan-dim); }
.tag-BREAKTHROUGH { color: var(--hud-purple); border: 1px solid var(--hud-purple); }
.tag-ROLLBACK { color: var(--hud-red); border: 1px solid var(--hud-red); }
.tag-NULL, .tag-AUDIT { color: var(--hud-copper); border: 1px solid var(--hud-copper); }
.tag-PIVOT { color: var(--hud-gold-bright); border: 1px solid var(--hud-gold-bright); }
.tag-VALIDATION { color: var(--hud-green); border: 1px solid var(--hud-green); }

/* ── battle log / campaign / alerts ─────────────────────────────────── */
.event-row { display: grid; grid-template-columns: 70px 80px 1fr 80px; gap: 8px; padding: 5px 8px; font-family: 'Share Tech Mono', monospace; font-size: 11px; border-left: 2px solid transparent; background: rgba(5,15,28,0.4); margin-bottom: 3px; }
.event-row.win { border-left-color: var(--hud-green); }
.event-row.loss { border-left-color: var(--hud-red); }
.event-row .kind { color: var(--hud-copper-bright); }
.event-row .pnl.up { color: var(--hud-green); } .event-row .pnl.dn { color: var(--hud-red); }

.audit-row { display: grid; grid-template-columns: 80px 100px 1fr 60px; gap: 8px; padding: 5px 8px; font-family: 'Share Tech Mono', monospace; font-size: 11px; background: rgba(5,15,28,0.4); margin-bottom: 2px; border-left: 2px solid var(--hud-cyan-dim); }
.audit-row.ok { border-left-color: var(--hud-green); }
.audit-row.fail { border-left-color: var(--hud-red); }

/* ── globe ──────────────────────────────────────────────────────────── */
#globe { display: flex; justify-content: center; align-items: center; min-height: 380px; }
#globe svg { width: 100%; height: auto; max-width: 600px; }

/* ── footer ─────────────────────────────────────────────────────────── */
.hud-foot { text-align: center; padding: 16px 0 4px; color: var(--hud-cyan-dim); font-family: 'Share Tech Mono', monospace; font-size: 10px; letter-spacing: 2px; }

/* ════════════════════════════════════════════════════════════════════
   STEALTH theme — calm, high-contrast, designed for long sessions.
   Triggered by body.theme-disabled-stealth. Overrides aesthetic only — no
   structural changes — so all panels work identically.
   ════════════════════════════════════════════════════════════════════ */
body.theme-disabled-stealth {
  --hud-cyan: #d4d4d8;
  --hud-cyan-dim: #52525b;
  --hud-cyan-deep: #27272a;
  --hud-cyan-soft: #a1a1aa;
  --hud-copper: #818cf8;
  --hud-copper-bright: #a5b4fc;
  --hud-copper-deep: #4f46e5;
  --hud-amber: #a1a1aa;
  --hud-gold: #818cf8;
  --hud-gold-bright: #a5b4fc;
  --hud-red: #f87171;
  --hud-green: #34d399;
  --hud-purple: #c4b5fd;
  --bg-deep: #0a0a0b;
  --bg-mid: #131316;
  --bg-darker: #050505;
  --bg-panel: rgba(20, 20, 23, 0.85);
  --grid-line: rgba(255, 255, 255, 0.018);
  --grid-line-bright: rgba(255, 255, 255, 0.03);
  --grid-warm: rgba(255, 255, 255, 0.02);
  --glow-cyan: none; --glow-copper: none; --glow-gold: none;
  --glow-red: none; --glow-green: none;
  --copper-grad: #d4d4d8;
  font-family: 'Inter', -apple-system, 'Noto Sans TC', system-ui, sans-serif;
  letter-spacing: 0.1px;
  background: #0a0a0b !important;
}
body.theme-disabled-stealth::after { display: none; }
body.theme-disabled-stealth .horizon, body.theme-disabled-stealth .horizon-grid { display: none; }
body.theme-disabled-stealth::before {
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 64px 64px;
}
body.theme-disabled-stealth .panel {
  clip-path: none;
  border: 1px solid #1f1f23;
  box-shadow: none;
  background: var(--bg-panel);
}
body.theme-disabled-stealth .panel:hover { border-color: #3f3f46; box-shadow: none; }
body.theme-disabled-stealth .panel.gold { border-color: #312e81; box-shadow: none; }
body.theme-disabled-stealth .panel.red { border-color: #7f1d1d; box-shadow: none; }
body.theme-disabled-stealth .panel.green { border-color: #064e3b; box-shadow: none; }
body.theme-disabled-stealth .panel::before, body.theme-disabled-stealth .panel::after { display: none; }
body.theme-disabled-stealth .panel h2 {
  color: var(--hud-cyan); font-weight: 600; letter-spacing: 1.5px;
  border-bottom-color: #1f1f23;
}
body.theme-disabled-stealth .hud-top {
  clip-path: none;
  border: 1px solid #1f1f23;
  box-shadow: none;
  background: var(--bg-panel);
}
body.theme-disabled-stealth .hud-top::before { display: none; }
body.theme-disabled-stealth .hud-top h1 {
  background: none !important; color: var(--hud-cyan); -webkit-text-fill-color: var(--hud-cyan);
  font-weight: 700; letter-spacing: 3px; filter: none; animation: none;
  font-size: 18px;
}
body.theme-disabled-stealth .hud-top h1 .dim { opacity: 0.65; letter-spacing: 2px; }
body.theme-disabled-stealth .ribbon {
  clip-path: none; box-shadow: none;
  background: #131316; border-color: #1f1f23;
}
body.theme-disabled-stealth .ribbon .seg { background: #18181b; }
body.theme-disabled-stealth .ribbon .seg .val { text-shadow: none; color: var(--hud-cyan); font-weight: 600; }
body.theme-disabled-stealth .ribbon .seg.active .val { color: var(--hud-green); text-shadow: none; }
body.theme-disabled-stealth .ribbon .seg.warn .val { color: var(--hud-red); text-shadow: none; }
body.theme-disabled-stealth .alert-banner {
  animation: none; clip-path: none;
  border-radius: 4px; box-shadow: none;
  background: rgba(127, 29, 29, 0.4);
}
body.theme-disabled-stealth .alert-banner.ok { background: rgba(6, 78, 59, 0.4); }
body.theme-disabled-stealth .reactor .ring-fg {
  filter: none; stroke: var(--hud-copper-bright);
}
body.theme-disabled-stealth .reactor-core .val { text-shadow: none; color: var(--hud-cyan); font-weight: 600; }
body.theme-disabled-stealth .reactor-core .lbl { color: var(--hud-cyan-soft); }
body.theme-disabled-stealth .reactor-core .sub { color: var(--hud-copper-bright); }
body.theme-disabled-stealth .pulse-dot { animation: none; box-shadow: none; }
body.theme-disabled-stealth .stat-pill .val { text-shadow: none; color: var(--hud-cyan); }
body.theme-disabled-stealth .pos-row { border-radius: 3px; background: #18181b; }
body.theme-disabled-stealth .pos-row:hover { background: #27272a; }
body.theme-disabled-stealth .heat-cell { border-radius: 4px; background: #18181b; transition: none; }
body.theme-disabled-stealth .heat-cell:hover { transform: none; box-shadow: none; }
body.theme-disabled-stealth .heat-cell.armed-short { border-color: #7f1d1d; box-shadow: none; }
body.theme-disabled-stealth .heat-cell.armed-long { border-color: #064e3b; box-shadow: none; }
body.theme-disabled-stealth .heat-cell .progress-bar .fill { transition: width 0.4s ease; }
body.theme-disabled-stealth .scan-table .row.trig-LONG { background: rgba(6,78,59,0.25); }
body.theme-disabled-stealth .scan-table .row.trig-SHORT { background: rgba(127,29,29,0.25); }
body.theme-disabled-stealth .timeline-item { border-radius: 4px; background: #18181b; }
body.theme-disabled-stealth .ctrl-card { border-radius: 4px; background: #18181b; }
body.theme-disabled-stealth .ctrl-btn { border-radius: 3px; }
body.theme-disabled-stealth .ctrl-btn:hover { color: var(--hud-copper-bright); border-color: var(--hud-copper-bright); }
body.theme-disabled-stealth .seg-tabs button.on { background: #27272a; color: var(--hud-copper-bright); }
body.theme-disabled-stealth canvas#eqCanvas, body.theme-disabled-stealth canvas#pnlCanvas { background: #0c0c0e; border-color: #1f1f23; }
body.theme-disabled-stealth #klineWrap { background: #0c0c0e; border-color: #1f1f23; }

/* ── DAYLIGHT theme — light, paper-like, for cafe / outdoor ────────── */
body.theme-disabled-day {
  --hud-cyan: #1f2937; --hud-cyan-dim: #94a3b8; --hud-cyan-soft: #4b5563; --hud-cyan-deep: #cbd5e1;
  --hud-copper: #2563eb; --hud-copper-bright: #1d4ed8; --hud-copper-deep: #1e3a8a;
  --hud-amber: #b45309; --hud-gold: #f59e0b; --hud-gold-bright: #d97706;
  --hud-red: #dc2626; --hud-green: #059669; --hud-purple: #7c3aed;
  --bg-deep: #fafaf9; --bg-mid: #f5f5f4; --bg-darker: #ffffff;
  --bg-panel: rgba(255, 255, 255, 0.95);
  --grid-line: rgba(0, 0, 0, 0.04); --grid-line-bright: rgba(0, 0, 0, 0.06); --grid-warm: rgba(0, 0, 0, 0.04);
  --glow-cyan: none; --glow-copper: none; --glow-gold: none; --glow-red: none; --glow-green: none;
  --copper-grad: #1f2937;
  font-family: 'Inter', -apple-system, 'Noto Sans TC', system-ui, sans-serif;
  background: #fafaf9 !important; color: #1f2937;
}
body.theme-disabled-day::before, body.theme-disabled-day::after { display: none; }
body.theme-disabled-day .horizon, body.theme-disabled-day .horizon-grid { display: none; }
body.theme-disabled-day .panel { clip-path: none; border: 1px solid #e7e5e4; box-shadow: 0 1px 3px rgba(0,0,0,0.05); background: #fff; }
body.theme-disabled-day .panel::before, body.theme-disabled-day .panel::after { display: none; }
body.theme-disabled-day .panel h2 { color: #1d4ed8; border-bottom-color: #e7e5e4; font-weight: 600; }
body.theme-disabled-day .hud-top { clip-path: none; border: 1px solid #e7e5e4; box-shadow: 0 1px 3px rgba(0,0,0,0.05); background: #fff; }
body.theme-disabled-day .hud-top::before { display: none; }
body.theme-disabled-day .hud-top h1 { background: none !important; color: #1d4ed8; -webkit-text-fill-color: #1d4ed8; filter: none; animation: none; }
body.theme-disabled-day .ribbon { clip-path: none; background: #fff; border-color: #e7e5e4; box-shadow: 0 1px 3px rgba(0,0,0,0.05); }
body.theme-disabled-day .ribbon .seg { background: #fafaf9; }
body.theme-disabled-day .reactor .ring-fg { filter: none; stroke: #2563eb; }
body.theme-disabled-day .reactor-core .val { color: #1f2937; text-shadow: none; }
body.theme-disabled-day .alert-banner { animation: none; clip-path: none; border-radius: 4px; background: #fee2e2; color: #991b1b; box-shadow: none; }
body.theme-disabled-day .alert-banner.ok { background: #d1fae5; color: #065f46; }
body.theme-disabled-day .pos-row { background: #fafaf9; }
body.theme-disabled-day .heat-cell { background: #fafaf9; }
body.theme-disabled-day .timeline-item { background: #fafaf9; }
body.theme-disabled-day .ctrl-card { background: #fafaf9; }
body.theme-disabled-day .ctrl-input { background: #fff; color: #1f2937; }
body.theme-disabled-day canvas#eqCanvas, body.theme-disabled-day canvas#pnlCanvas { background: #fff; border-color: #e7e5e4; }
body.theme-disabled-day #klineWrap { background: #fff; border-color: #e7e5e4; }

/* ── theme switcher pill ─────────────────────────────────────────────── */
.theme-switch {
  display: inline-flex; align-items: center; gap: 0; padding: 0;
  border: 1px solid var(--hud-cyan-dim); overflow: hidden;
}
.theme-switch button {
  background: transparent; color: var(--hud-cyan-dim); border: none;
  padding: 4px 8px; font-family: 'Orbitron', sans-serif; font-size: 9px;
  letter-spacing: 1.5px; cursor: pointer; transition: all 0.12s;
}
.theme-switch button:hover { color: var(--hud-copper-bright); }
.theme-switch button.on { color: var(--hud-gold-bright); background: rgba(255,255,255,0.08); }
body.theme-disabled-stealth .theme-switch button.on { background: #27272a; color: var(--hud-copper-bright); }
body.theme-disabled-day .theme-switch button.on { background: #dbeafe; color: #1d4ed8; }

/* ════════════════════════════════════════════════════════════════════
   Command palette (⌘K)
   ════════════════════════════════════════════════════════════════════ */
#cmdk-root {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(2, 8, 16, 0.78);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
#cmdk-root.hidden { display: none; }
.cmdk-box {
  width: min(640px, 92vw); max-height: 70vh;
  background: rgba(8, 18, 32, 0.96);
  border: 1px solid var(--hud-copper); box-shadow: var(--glow-copper), 0 20px 60px rgba(0,0,0,0.8);
  display: flex; flex-direction: column;
  font-family: 'Share Tech Mono', monospace;
}
body.theme-disabled-stealth .cmdk-box { background: #18181b; border-color: #3f3f46; box-shadow: 0 30px 80px rgba(0,0,0,0.85); }
body.theme-disabled-day .cmdk-box { background: #fff; border-color: #cbd5e1; box-shadow: 0 30px 80px rgba(0,0,0,0.2); }
.cmdk-header { padding: 10px 14px 8px; border-bottom: 1px solid rgba(102,192,255,0.15); display: flex; align-items: center; gap: 10px; }
body.theme-disabled-stealth .cmdk-header { border-bottom-color: #3f3f46; }
body.theme-disabled-day .cmdk-header { border-bottom-color: #e7e5e4; }
.cmdk-header .glyph { color: var(--hud-copper-bright); font-size: 14px; }
.cmdk-header input {
  flex: 1; background: transparent; border: none; outline: none;
  font-family: 'Share Tech Mono', monospace; font-size: 16px;
  color: #fff; letter-spacing: 0.5px;
}
body.theme-disabled-day .cmdk-header input { color: #1f2937; }
.cmdk-header .kbd { font-size: 10px; color: var(--hud-cyan-dim); padding: 2px 6px; border: 1px solid var(--hud-cyan-dim); border-radius: 3px; }
.cmdk-list { overflow-y: auto; max-height: calc(70vh - 60px); padding: 4px 0; }
.cmdk-item {
  display: grid; grid-template-columns: 70px 1fr auto; gap: 12px; align-items: center;
  padding: 8px 14px; cursor: pointer; font-size: 12px;
  border-left: 2px solid transparent;
}
.cmdk-item:hover { background: rgba(102,192,255,0.08); }
.cmdk-item.sel { background: rgba(255,119,51,0.14); border-left-color: var(--hud-copper-bright); }
body.theme-disabled-stealth .cmdk-item.sel { background: #27272a; border-left-color: var(--hud-copper-bright); }
body.theme-disabled-day .cmdk-item.sel { background: #dbeafe; border-left-color: #1d4ed8; }
.cmdk-cat { font-family: 'Orbitron', sans-serif; font-size: 9px; letter-spacing: 1.5px; padding: 2px 6px; border-radius: 2px; text-align: center; }
.cmdk-cat.cat-trading { color: var(--hud-gold-bright); border: 1px solid var(--hud-gold); }
.cmdk-cat.cat-flatten { color: var(--hud-red); border: 1px solid var(--hud-red); }
.cmdk-cat.cat-risk { color: var(--hud-copper-bright); border: 1px solid var(--hud-copper); }
.cmdk-cat.cat-view { color: var(--hud-cyan-soft); border: 1px solid var(--hud-cyan-dim); }
.cmdk-cat.cat-trades { color: var(--hud-purple); border: 1px solid var(--hud-purple); }
.cmdk-cat.cat-system { color: var(--hud-cyan-soft); border: 1px solid var(--hud-cyan-dim); }
.cmdk-label { color: #fff; font-weight: 500; }
body.theme-disabled-day .cmdk-label { color: #1f2937; }
.cmdk-hint { color: var(--hud-cyan-dim); font-size: 10px; text-align: right; }
.cmdk-empty { padding: 24px; color: var(--hud-cyan-dim); text-align: center; font-style: italic; }

/* ════════════════════════════════════════════════════════════════════
   v16: front-end error console (bottom-right, collapsed)
   ════════════════════════════════════════════════════════════════════ */
#err-console {
  position: fixed; bottom: 12px; right: 12px; z-index: 8000;
  width: 280px; max-width: calc(100vw - 24px);
  background: rgba(20,4,8,0.96); border: 1px solid var(--hud-red);
  font-family: 'Share Tech Mono', monospace; box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}
#err-console.hidden { display: none; }
#err-console .err-bar {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px;
  cursor: pointer; user-select: none;
}
#err-console .err-ind { width: 8px; height: 8px; border-radius: 50%; background: var(--hud-red); box-shadow: 0 0 8px var(--hud-red); animation: pulse 1.4s ease-in-out infinite; }
#err-console .err-count { color: var(--hud-red); font-size: 11px; font-weight: 700; letter-spacing: 1px; }
#err-console .err-spacer { flex: 1; }
#err-console .err-clear {
  background: transparent; border: 1px solid var(--hud-red); color: var(--hud-red);
  width: 22px; height: 22px; cursor: pointer; font-size: 14px; line-height: 1;
}
#err-console .err-list { display: none; max-height: 240px; overflow-y: auto; padding: 4px 0; border-top: 1px solid rgba(255,59,92,0.3); }
#err-console.open .err-list { display: block; }
#err-console .err-row {
  display: grid; grid-template-columns: 60px 50px 1fr; gap: 6px;
  padding: 4px 8px; font-size: 10px; line-height: 1.3;
  border-bottom: 1px solid rgba(255,59,92,0.1);
}
#err-console .err-row .t { color: var(--hud-cyan-dim); }
#err-console .err-row .k { color: var(--hud-red); font-size: 9px; letter-spacing: 1px; }
#err-console .err-row .k-promise { color: var(--hud-gold-bright); }
#err-console .err-row .m { color: #fff; word-break: break-word; }
#err-console .err-row .w { grid-column: span 3; color: var(--hud-cyan-dim); font-size: 9px; }
body.theme-disabled-day #err-console { background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,0.15); }
body.theme-disabled-day #err-console .err-row .m { color: #1f2937; }

/* ════════════════════════════════════════════════════════════════════
   IMPACT preview modal — confirms with rich context
   ════════════════════════════════════════════════════════════════════ */
#impact-root {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(2, 8, 16, 0.78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; padding: 14px;
}
#impact-root.hidden { display: none; }
.impact-box {
  width: min(560px, 96vw);
  background: rgba(8, 18, 32, 0.97); border: 1px solid var(--hud-red);
  box-shadow: var(--glow-red), 0 30px 80px rgba(0,0,0,0.85);
  font-family: 'Share Tech Mono', monospace;
}
body.theme-disabled-stealth .impact-box { background: #18181b; border-color: #f87171; box-shadow: 0 30px 80px rgba(0,0,0,0.85); }
body.theme-disabled-day .impact-box { background: #fff; border-color: #dc2626; box-shadow: 0 30px 80px rgba(0,0,0,0.2); }
.impact-header { padding: 10px 14px; border-bottom: 1px solid rgba(255,59,92,0.3); display: flex; align-items: center; gap: 10px; }
.impact-header .glyph { font-size: 18px; color: var(--hud-red); }
.impact-header .title { flex: 1; font-family: 'Orbitron', sans-serif; font-size: 13px; letter-spacing: 2.5px; color: var(--hud-red); font-weight: 700; }
.impact-header .kbd { font-size: 9px; color: var(--hud-cyan-dim); padding: 2px 6px; border: 1px solid var(--hud-cyan-dim); }
.impact-body { padding: 14px 18px; max-height: 60vh; overflow-y: auto; }
.impact-actions { display: flex; gap: 10px; padding: 10px 14px; border-top: 1px solid rgba(255,59,92,0.2); }
.impact-actions .ctrl-btn { padding: 9px 16px; font-size: 12px; }
.impact-grid { display: flex; flex-direction: column; gap: 8px; }
.impact-row { display: grid; grid-template-columns: 160px 1fr; gap: 14px; align-items: baseline; font-size: 12px; }
.impact-row .k { color: var(--hud-cyan-dim); letter-spacing: 1.5px; font-size: 10px; font-family: 'Orbitron', sans-serif; }
.impact-row .v { color: #fff; font-weight: 500; word-break: break-word; }
body.theme-disabled-day .impact-row .v { color: #1f2937; }
.impact-row .v.up { color: var(--hud-green); }
.impact-row .v.dn { color: var(--hud-red); }
.impact-row .v.warn { color: var(--hud-gold-bright); }
.impact-row .v.dim { color: var(--hud-cyan-soft); }
.impact-row .v.long { color: var(--hud-green); }
.impact-row .v.short { color: var(--hud-red); }
.impact-row.big { padding: 6px 0; border-top: 1px solid rgba(102,192,255,0.1); border-bottom: 1px solid rgba(102,192,255,0.1); }
.impact-row.big .v { font-size: 16px; font-weight: 700; }
.impact-row.sep { border-bottom: 1px dashed rgba(102,192,255,0.15); margin: 4px 0; padding: 0; height: 0; }
.impact-row.reason .v { font-size: 11px; line-height: 1.5; color: var(--hud-cyan-soft); }
.impact-mini-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; max-height: 180px; overflow-y: auto; }
.impact-mini {
  display: grid; grid-template-columns: 80px 50px 1fr; gap: 10px; align-items: center;
  padding: 4px 8px; background: rgba(5,15,28,0.5); font-size: 11px;
  border-left: 2px solid var(--hud-cyan-dim);
}
.impact-mini .sym { color: #fff; font-weight: 700; }
body.theme-disabled-day .impact-mini { background: #fafaf9; }
body.theme-disabled-day .impact-mini .sym { color: #1f2937; }
.impact-mini .side { font-family: 'Orbitron', sans-serif; font-size: 9px; padding: 1px 5px; border: 1px solid currentColor; text-align: center; }
.impact-mini .side.long { color: var(--hud-green); }
.impact-mini .side.short { color: var(--hud-red); }
.impact-mini .upnl { text-align: right; font-family: 'Share Tech Mono', monospace; }
.impact-mini .upnl.up { color: var(--hud-green); } .impact-mini .upnl.dn { color: var(--hud-red); }

/* ════════════════════════════════════════════════════════════════════
   What-if simulator panel
   ════════════════════════════════════════════════════════════════════ */
.whatif-panel { display: grid; grid-template-columns: 280px 1fr; gap: 14px; }
@media (max-width: 700px) { .whatif-panel { grid-template-columns: 1fr; } }
.whatif-controls { display: flex; flex-direction: column; gap: 8px; }
.whatif-section { background: rgba(5,15,28,0.5); border: 1px solid rgba(102,192,255,0.1); padding: 8px 10px; }
body.theme-disabled-stealth .whatif-section { background: #18181b; border-color: #1f1f23; border-radius: 4px; }
body.theme-disabled-day .whatif-section { background: #fafaf9; border-color: #e7e5e4; border-radius: 4px; }
.whatif-section .lbl { font-family: 'Orbitron', sans-serif; font-size: 9px; letter-spacing: 2px; color: var(--hud-cyan-soft); margin-bottom: 6px; }
.whatif-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.whatif-chip {
  padding: 3px 7px; border: 1px solid var(--hud-cyan-dim); color: var(--hud-cyan-dim);
  font-family: 'Share Tech Mono', monospace; font-size: 10px; cursor: pointer;
  background: rgba(2,8,16,0.5); transition: all 0.12s; user-select: none;
}
.whatif-chip:hover { color: var(--hud-cyan-soft); border-color: var(--hud-cyan-soft); }
.whatif-chip.on { color: var(--hud-gold-bright); border-color: var(--hud-gold); background: rgba(60,40,0,0.4); }
body.theme-disabled-stealth .whatif-chip.on { background: #27272a; color: var(--hud-copper-bright); border-color: var(--hud-copper-bright); }
body.theme-disabled-day .whatif-chip.on { background: #dbeafe; color: #1d4ed8; border-color: #3b82f6; }
.whatif-chip.exclude { color: var(--hud-red); border-color: var(--hud-red); background: rgba(60,8,16,0.4); text-decoration: line-through; }
.whatif-results { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: rgba(102,192,255,0.1); }
.whatif-cell { background: rgba(5,15,28,0.7); padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
body.theme-disabled-stealth .whatif-cell { background: #18181b; }
body.theme-disabled-day .whatif-cell { background: #fafaf9; }
.whatif-cell.span2 { grid-column: span 2; }
.whatif-cell .k { font-family: 'Orbitron', sans-serif; font-size: 10px; letter-spacing: 2px; color: var(--hud-cyan-soft); }
.whatif-cell .v { font-family: 'Share Tech Mono', monospace; font-size: 22px; color: #fff; font-weight: 700; }
body.theme-disabled-day .whatif-cell .v { color: #1f2937; }
.whatif-cell .v.up { color: var(--hud-green); } .whatif-cell .v.dn { color: var(--hud-red); }
.whatif-cell .delta { font-family: 'Share Tech Mono', monospace; font-size: 11px; color: var(--hud-cyan-soft); }
.whatif-cell .delta.up { color: var(--hud-green); } .whatif-cell .delta.dn { color: var(--hud-red); }
.whatif-canvas-wrap { background: rgba(2,8,16,0.5); border: 1px solid rgba(102,192,255,0.08); margin-top: 8px; padding: 6px; }
body.theme-disabled-stealth .whatif-canvas-wrap { background: #0c0c0e; border-color: #1f1f23; }
body.theme-disabled-day .whatif-canvas-wrap { background: #fff; border-color: #e7e5e4; }
.whatif-actions { display: flex; gap: 6px; margin-top: 8px; }
.whatif-actions .ctrl-btn { padding: 5px 10px; font-size: 10px; }

/* ════════════════════════════════════════════════════════════════════
   v13: Replay slider
   ════════════════════════════════════════════════════════════════════ */
.replay-wrap { display: flex; flex-direction: column; gap: 10px; }
.replay-slider-row { display: grid; grid-template-columns: 90px 1fr auto auto; gap: 10px; align-items: center; }
.replay-tag {
  font-family: 'Orbitron', sans-serif; font-size: 10px; letter-spacing: 2px;
  padding: 4px 10px; border: 1px solid var(--hud-cyan-dim); color: var(--hud-cyan-soft);
  background: rgba(2,8,16,0.5); text-align: center;
}
.replay-tag.active { color: var(--hud-gold-bright); border-color: var(--hud-gold); background: rgba(60,40,0,0.4); }
.replay-slider { width: 100%; -webkit-appearance: none; appearance: none; height: 4px; background: var(--bg-mid); border: 1px solid rgba(102,192,255,0.18); }
.replay-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 14px; height: 18px;
  background: var(--hud-copper-bright); border: 1px solid var(--hud-copper); cursor: ew-resize;
}
.replay-slider::-moz-range-thumb { width: 14px; height: 18px; background: var(--hud-copper-bright); border: 1px solid var(--hud-copper); cursor: ew-resize; }
.replay-stamp { font-family: 'Share Tech Mono', monospace; font-size: 12px; color: #fff; white-space: nowrap; }
.replay-stamp .dim { color: var(--hud-cyan-dim); }
body.theme-disabled-day .replay-stamp { color: #1f2937; }
.replay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 700px) { .replay-grid { grid-template-columns: 1fr 1fr; } }

/* ════════════════════════════════════════════════════════════════════
   v13: Connection health panel
   ════════════════════════════════════════════════════════════════════ */
.health-canvas-wrap { background: rgba(2,8,16,0.5); border: 1px solid rgba(102,192,255,0.08); padding: 4px; }
body.theme-disabled-stealth .health-canvas-wrap { background: #0c0c0e; border-color: #1f1f23; }
body.theme-disabled-day .health-canvas-wrap { background: #fff; border-color: #e7e5e4; }
.health-canvas-wrap canvas { display: block; width: 100%; }

/* ════════════════════════════════════════════════════════════════════
   v13: Post-mortem panel
   ════════════════════════════════════════════════════════════════════ */
.mortem-row {
  display: grid; grid-template-columns: 60px 1fr; gap: 10px;
  padding: 8px 10px; margin-bottom: 5px;
  background: rgba(5,15,28,0.5); border-left: 3px solid var(--hud-cyan-dim);
  align-items: start;
}
body.theme-disabled-stealth .mortem-row { background: #18181b; border-radius: 0 4px 4px 0; }
body.theme-disabled-day .mortem-row { background: #fafaf9; border-radius: 0 4px 4px 0; }
.mortem-row.high { border-left-color: var(--hud-red); background: rgba(60,8,16,0.32); }
.mortem-row.med { border-left-color: var(--hud-gold); background: rgba(60,40,0,0.28); }
.mortem-row.low { border-left-color: var(--hud-cyan-soft); }
.mortem-row .sev {
  font-family: 'Orbitron', sans-serif; font-size: 9px; letter-spacing: 1.5px;
  padding: 3px 6px; text-align: center; border: 1px solid currentColor;
}
.mortem-row .sev.sev-high { color: var(--hud-red); }
.mortem-row .sev.sev-med { color: var(--hud-gold-bright); }
.mortem-row .sev.sev-low { color: var(--hud-cyan-soft); }
.mortem-row .body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mortem-row .ttl { color: #fff; font-size: 12px; font-weight: 600; }
body.theme-disabled-day .mortem-row .ttl { color: #1f2937; }
.mortem-row .detail { font-family: 'Share Tech Mono', monospace; font-size: 11px; color: var(--hud-cyan-soft); line-height: 1.4; }
.mortem-row .window { font-family: 'Share Tech Mono', monospace; font-size: 10px; color: var(--hud-cyan-dim); }

/* ════════════════════════════════════════════════════════════════════
   Forward ETA banner
   ════════════════════════════════════════════════════════════════════ */
.eta-banner {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 14px; align-items: center;
  padding: 8px 16px; margin-bottom: 12px;
  background: linear-gradient(90deg, rgba(0,40,28,0.55) 0%, rgba(8,30,52,0.55) 100%);
  border: 1px solid rgba(0,255,156,0.4);
  font-family: 'Share Tech Mono', monospace; font-size: 12px;
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 10px);
}
body.theme-disabled-stealth .eta-banner { clip-path: none; border-radius: 4px; background: rgba(6,78,59,0.25); border-color: #064e3b; }
body.theme-disabled-day .eta-banner { clip-path: none; border-radius: 4px; background: #d1fae5; border-color: #6ee7b7; }
.eta-banner.warn { background: linear-gradient(90deg, rgba(60,40,8,0.55) 0%, rgba(40,8,8,0.55) 100%); border-color: rgba(255,176,0,0.55); }
body.theme-disabled-stealth .eta-banner.warn { background: rgba(127,29,29,0.25); border-color: #7f1d1d; }
body.theme-disabled-day .eta-banner.warn { background: #fef3c7; border-color: #fbbf24; }
.eta-banner.bad { background: linear-gradient(90deg, rgba(60,8,16,0.65) 0%, rgba(40,4,8,0.65) 100%); border-color: rgba(255,59,92,0.6); }
.eta-banner .glyph { font-family: 'Orbitron', sans-serif; font-size: 11px; color: var(--hud-green); letter-spacing: 2px; }
.eta-banner.warn .glyph { color: var(--hud-gold-bright); }
.eta-banner.bad .glyph { color: var(--hud-red); }
.eta-banner .msg { color: #fff; font-size: 13px; letter-spacing: 0.5px; }
body.theme-disabled-day .eta-banner .msg { color: #064e3b; }
body.theme-disabled-day .eta-banner.warn .msg { color: #92400e; }
.eta-banner .rate { color: var(--hud-cyan-soft); font-size: 11px; }
.eta-banner .progress { width: 90px; height: 4px; background: rgba(255,255,255,0.08); overflow: hidden; }
.eta-banner .progress .fill { height: 100%; background: var(--hud-green); transition: width 0.6s ease; }
.eta-banner.warn .progress .fill { background: var(--hud-gold-bright); }
.eta-banner.bad .progress .fill { background: var(--hud-red); }

/* ════════════════════════════════════════════════════════════════════
   Trade cards (replaces old trade-table)
   ════════════════════════════════════════════════════════════════════ */
.trade-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; max-height: 540px; overflow-y: auto; padding-right: 4px; }
.trade-card {
  background: rgba(5,15,28,0.55); border: 1px solid rgba(102,192,255,0.15);
  padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
  border-left: 3px solid var(--hud-cyan-dim);
  transition: border-color 0.12s, background 0.12s;
}
body.theme-disabled-stealth .trade-card { background: #18181b; border-color: #1f1f23; border-radius: 4px; }
body.theme-disabled-day .trade-card { background: #fff; border-color: #e7e5e4; border-radius: 4px; }
.trade-card:hover { background: rgba(15,30,50,0.7); border-color: rgba(255,119,51,0.4); }
body.theme-disabled-stealth .trade-card:hover { background: #27272a; border-color: #3f3f46; }
body.theme-disabled-day .trade-card:hover { background: #f9fafb; }
.trade-card.win { border-left-color: var(--hud-green); }
.trade-card.loss { border-left-color: var(--hud-red); }
.trade-card .head { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.trade-card .sym { font-family: 'Orbitron', sans-serif; font-size: 13px; color: #fff; font-weight: 700; letter-spacing: 1.5px; }
body.theme-disabled-day .trade-card .sym { color: #1f2937; }
.trade-card .side { font-family: 'Orbitron', sans-serif; font-size: 9px; padding: 2px 6px; letter-spacing: 1.5px; border: 1px solid currentColor; }
.trade-card .side.long { color: var(--hud-green); }
.trade-card .side.short { color: var(--hud-red); }
.trade-card .pnl { font-family: 'Share Tech Mono', monospace; font-size: 14px; font-weight: 700; margin-left: auto; }
.trade-card .pnl.up { color: var(--hud-green); } .trade-card .pnl.dn { color: var(--hud-red); }
.trade-card .spark {
  height: 48px; position: relative;
  background: rgba(0,0,0,0.25); border: 1px solid rgba(102,192,255,0.05);
}
body.theme-disabled-stealth .trade-card .spark { background: #0c0c0e; border-color: #27272a; }
body.theme-disabled-day .trade-card .spark { background: #f9fafb; border-color: #e7e5e4; }
.trade-card .spark svg { display: block; width: 100%; height: 100%; }
.trade-card .meta {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px;
  font-family: 'Share Tech Mono', monospace; font-size: 10px; color: var(--hud-cyan-soft);
}
.trade-card .meta .k { color: var(--hud-cyan-dim); }
.trade-card .meta .v { color: #fff; }
body.theme-disabled-day .trade-card .meta .v { color: #1f2937; }
.trade-card .reason {
  font-family: 'Share Tech Mono', monospace; font-size: 10px; color: var(--hud-cyan-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top: 2px;
  border-top: 1px solid rgba(102,192,255,0.06);
}
body.theme-disabled-stealth .trade-card .reason { border-top-color: #1f1f23; }
.trade-card-toggle {
  display: inline-flex; gap: 1px; margin-left: 8px;
}
.trade-card-toggle button {
  background: rgba(5,15,28,0.92); color: var(--hud-cyan-dim); border: 1px solid var(--hud-cyan-dim);
  padding: 3px 8px; font-family: 'Orbitron', sans-serif; font-size: 9px; letter-spacing: 1.5px;
  cursor: pointer;
}
.trade-card-toggle button.on { color: var(--hud-gold-bright); border-color: var(--hud-gold); }

/* ════════════════════════════════════════════════════════════════════
   Chart hover tooltip
   ════════════════════════════════════════════════════════════════════ */
.chart-tip {
  position: absolute; pointer-events: none; z-index: 100;
  background: rgba(5,15,28,0.96); border: 1px solid var(--hud-copper);
  padding: 6px 10px; font-family: 'Share Tech Mono', monospace; font-size: 11px;
  color: #fff; line-height: 1.5; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0,0,0,0.5);
  transform: translate(8px, 8px);
}
body.theme-disabled-stealth .chart-tip { background: #18181b; border-color: #3f3f46; box-shadow: 0 8px 24px rgba(0,0,0,0.6); }
body.theme-disabled-day .chart-tip { background: #fff; border-color: #cbd5e1; color: #1f2937; box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
.chart-tip .k { color: var(--hud-cyan-soft); margin-right: 4px; }
.chart-tip .v.up { color: var(--hud-green); }
.chart-tip .v.dn { color: var(--hud-red); }

/* ════════════════════════════════════════════════════════════════════
   Responsive — three breakpoints
   • > 1100px : full 12-col desktop
   • 700-1100 : 2-col tablet
   • < 700px  : single-col phone (mobile-first redesign)
   • < 480px  : small phone (compact, hide non-essential)
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9 { grid-column: span 6; }
  .ribbon { grid-template-columns: repeat(4, 1fr); }
  .ribbon .seg:nth-child(n+5) { display: none; }
  body { padding: 12px 14px 60px; }
  .hud-top h1 { font-size: 18px; letter-spacing: 4px; }
  .hud-top h1 .dim { display: none; }
}

@media (max-width: 700px) {
  /* ── layout: single column, denser spacing ── */
  body { padding: 8px 8px 80px; font-size: 13px; }
  .wrap { max-width: 100%; }
  .grid { gap: 8px; margin-bottom: 8px; }
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-12 { grid-column: span 12; }

  /* ── HUD: compact 2-row layout ── */
  .hud-top {
    flex-direction: column; align-items: stretch; gap: 8px;
    padding: 10px 12px; clip-path: none;
  }
  .hud-top h1 { font-size: 16px; letter-spacing: 3px; text-align: center; }
  .hud-top h1 .dim { display: inline; font-size: 10px; letter-spacing: 1.5px; padding-left: 8px; margin-left: 6px; }
  .hud-top .right { flex-wrap: wrap; justify-content: center; gap: 6px; font-size: 11px; }
  .stat-pill { font-size: 11px; }
  .stat-pill .lbl { font-size: 10px; }
  .lang-toggle { padding: 6px 10px; font-size: 10px; min-height: 32px; }
  .theme-switch button { padding: 6px 8px; font-size: 9px; min-height: 32px; }

  /* ── ribbon: 2 rows × 2 segs visible (collapse rest) ── */
  .ribbon { grid-template-columns: repeat(2, 1fr); clip-path: none; }
  .ribbon .seg { padding: 6px 10px; }
  .ribbon .seg .lbl { font-size: 8px; letter-spacing: 1.5px; }
  .ribbon .seg .val { font-size: 11px; }
  .ribbon .seg:nth-child(n+5) { display: none; }

  /* ── ETA banner: stack vertically ── */
  .eta-banner {
    grid-template-columns: 1fr 1fr; grid-template-rows: auto auto;
    gap: 6px 10px; padding: 8px 12px; clip-path: none; border-radius: 4px;
  }
  .eta-banner .glyph { grid-column: 1; grid-row: 1; font-size: 10px; }
  .eta-banner .rate { grid-column: 2; grid-row: 1; text-align: right; font-size: 10px; }
  .eta-banner .msg { grid-column: span 2; grid-row: 2; font-size: 11px; line-height: 1.4; }
  .eta-banner .progress { grid-column: span 2; grid-row: 3; width: 100%; }

  /* ── panels: less padding, no decorative corners ── */
  .panel { padding: 12px 12px 14px; clip-path: none; }
  .panel::before, .panel::after { display: none; }
  .panel h2 { font-size: 11px; letter-spacing: 2px; padding-bottom: 6px; margin-bottom: 10px; gap: 6px; }
  .panel h2 .badge { font-size: 8px; padding: 1px 5px; }
  .seg-tabs button { padding: 4px 8px; font-size: 10px; min-height: 28px; }

  /* ── reactor: smaller core to fit narrow column ── */
  .reactor { width: 160px; height: 160px; }
  .reactor-core .val { font-size: 22px; }
  .reactor-core .sub { font-size: 10px; }

  /* ── kv-grid: stay 2-col for compactness ── */
  .kv-grid { gap: 4px 10px; }
  .kv { padding: 4px 0; gap: 1px; }
  .kv .k { font-size: 8px; letter-spacing: 1.5px; }
  .kv .v { font-size: 12px; }

  /* ── battlefront: more compact rows, tap targets bigger ── */
  .pos-list { max-height: none; }
  .pos-row {
    grid-template-columns: 60px 50px 1fr 70px 36px;
    grid-template-rows: auto auto;
    gap: 4px 8px;
    padding: 8px 8px;
    min-height: 44px;
    font-size: 11px;
  }
  .pos-row .sym { grid-column: 1; grid-row: 1; }
  .pos-row .side { grid-column: 2; grid-row: 1; font-size: 8px; padding: 1px 4px; }
  .pos-row .upnl { grid-column: 3; grid-row: 1; text-align: right; font-size: 13px; }
  .pos-row .roi { grid-column: 4; grid-row: 1; text-align: right; }
  .pos-row .flatten-btn { grid-column: 5; grid-row: 1 / span 2; padding: 6px 4px; font-size: 9px; min-height: 40px; align-self: center; }
  .pos-row .reason { grid-column: 1 / span 4; grid-row: 2; font-size: 10px; opacity: 0.7; white-space: normal; }
  .pos-row .held { display: none; }

  /* ── heatmap: tighter cells, single-tap zoom ── */
  .heatmap-grid { grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); gap: 4px; }
  .heat-cell { padding: 6px 8px; min-height: 60px; }
  .heat-cell .sym { font-size: 10px; }
  .heat-cell .ext { font-size: 10px; }
  .heat-cell .k { font-size: 9px; }

  /* ── scan table: hide K col, compress ── */
  .scan-table .hdr, .scan-table .row {
    grid-template-columns: 50px 1fr 50px 50px;
    gap: 4px; padding: 4px 6px;
  }
  .scan-table .hdr span:nth-child(4),
  .scan-table .row span:nth-child(4) { display: none; }

  /* ── trade cards: 1 column, compact ── */
  .trade-cards { grid-template-columns: 1fr; gap: 6px; max-height: none; }
  .trade-card { padding: 8px 10px; gap: 4px; }
  .trade-card .spark { height: 36px; }
  .trade-card .meta { font-size: 9px; gap: 2px 8px; }

  /* ── trade table fallback: 4 cols only ── */
  .trade-row { grid-template-columns: 60px 40px 1fr 70px; gap: 6px; padding: 4px 6px; font-size: 10px; }
  .trade-row > *:nth-child(n+5) { display: none; }

  /* ── controls: 1 col on phone (tap targets bigger) ── */
  .ctrl-grid { grid-template-columns: 1fr; gap: 6px; }
  .ctrl-card { padding: 10px 12px; }
  .ctrl-btn { min-height: 40px; padding: 9px 12px; font-size: 11px; }
  .ctrl-input { min-height: 40px; font-size: 14px; }

  /* ── replay slider: stack vertically on phone ── */
  .replay-slider-row { grid-template-columns: 1fr; gap: 6px; }
  .replay-slider { width: 100%; height: 8px; }  /* fatter for touch */
  .replay-slider::-webkit-slider-thumb { width: 24px; height: 24px; }
  .replay-slider::-moz-range-thumb { width: 24px; height: 24px; }
  .replay-grid { grid-template-columns: 1fr 1fr; }
  .replay-tag { padding: 6px 12px; min-height: 36px; }

  /* ── what-if: stack vertically ── */
  .whatif-panel { grid-template-columns: 1fr; gap: 8px; }
  .whatif-results { grid-template-columns: 1fr; gap: 1px; }
  .whatif-cell { padding: 8px 10px; }
  .whatif-cell.span2 { grid-column: span 1; }
  .whatif-cell .v { font-size: 18px; }
  .whatif-chip { padding: 6px 9px; font-size: 11px; min-height: 32px; }

  /* ── timeline: shorter version column ── */
  .timeline-item { grid-template-columns: 80px 1fr; padding: 6px 8px; gap: 8px; }
  .timeline-item .ver { font-size: 12px; }
  .timeline-item .body .ttl { font-size: 12px; margin-left: 6px; }
  .timeline-item .body .desc { font-size: 10px; }

  /* ── globe: smaller container, no description ── */
  #globe { min-height: 280px; }
  #globe svg { max-width: 100%; }

  /* ── post-mortem: tighter rows ── */
  .mortem-row { grid-template-columns: 50px 1fr; padding: 6px 8px; }
  .mortem-row .ttl { font-size: 11px; }
  .mortem-row .detail { font-size: 10px; }

  /* ── kline chart smaller ── */
  #klineWrap { height: 320px; }

  /* ── audit + battle log rows shrink ── */
  .event-row, .audit-row { grid-template-columns: 60px 70px 1fr 60px; gap: 4px; padding: 4px 6px; font-size: 10px; }

  /* ── modal: full-width on phone ── */
  .impact-box { width: 100%; }
  .impact-row { grid-template-columns: 100px 1fr; gap: 8px; font-size: 11px; }
  .impact-row .k { font-size: 9px; }

  .cmdk-box { width: 100%; max-height: 86vh; }
  .cmdk-header { padding: 12px 14px; }
  .cmdk-header input { font-size: 16px; min-height: 36px; }  /* 16px prevents iOS zoom */
  .cmdk-item { padding: 12px 14px; grid-template-columns: 60px 1fr; min-height: 48px; }
  .cmdk-hint { display: none; }

  /* ── footer: smaller ── */
  .hud-foot { font-size: 9px; padding: 12px 0 4px; }
}

/* ── Small phones (iPhone SE 320-375 wide) ── */
@media (max-width: 480px) {
  body { padding: 6px 6px 80px; }
  .ribbon { grid-template-columns: 1fr 1fr; }
  .ribbon .seg:nth-child(n+5) { display: none; }
  .hud-top h1 { font-size: 14px; letter-spacing: 2px; }
  .hud-top h1 .dim { display: none; }
  .panel { padding: 10px; }
  .panel h2 { font-size: 10px; }
  .reactor { width: 140px; height: 140px; }
  .reactor-core .val { font-size: 18px; }

  /* hide some panels by default on tiny screens (user can scroll past anyway) */
  /* Globe is decorative — gets hidden */
  .panel.globe-main { display: none; }
}

/* ── Auto-disable decoration on touch devices regardless of screen size ── */
@media (hover: none) and (pointer: coarse) {
  /* touch device — kill heavy animations to save battery */
  .horizon, .horizon-grid { display: none; }
  body::before { display: none; }
  .panel:hover { box-shadow: none; }
  .pos-row:hover, .heat-cell:hover, .trade-card:hover { background: inherit; transform: none; }
  /* enlarge ALL interactive targets */
  button, .lang-toggle, .seg-tabs button, .ctrl-btn, .whatif-chip, .ctrl-input { min-height: 40px; }
}

/* ── per-bot strategy card (v52) ─────────────── */
.bot-strategy-section .panel { padding: 12px 16px 14px; }
.strategy-card { display: flex; gap: 18px; align-items: stretch; flex-wrap: wrap; }
.strategy-card .desc { flex: 1; min-width: 280px; }
.strategy-card .name { font-family: 'Orbitron', sans-serif; font-size: 17px; letter-spacing: 2px;
  background: var(--copper-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-fill-color: transparent; margin-bottom: 6px; }
.strategy-card .tagline { font-size: 13px; color: var(--hud-cyan-soft); margin-bottom: 10px; line-height: 1.5; }
.strategy-card .live-stats { display: inline-flex; gap: 6px 14px; flex-wrap: wrap; padding: 6px 10px;
  background: rgba(102,192,255,0.05); border-left: 2px solid var(--hud-cyan-dim); }
.strategy-card .ls-k { font-size: 10px; color: var(--hud-cyan-dim); letter-spacing: 1.2px; text-transform: uppercase; align-self: center; }
.strategy-card .ls-v { font-size: 13px; color: #fff; font-family: 'Share Tech Mono', monospace; font-weight: 600; margin-right: 8px; }
.strategy-card .params { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 6px 14px; padding: 10px 14px; min-width: 280px; flex: 1.2;
  background: rgba(255,176,16,0.04); border-left: 2px solid var(--hud-amber); }
.strategy-card .param-k { font-size: 10px; color: var(--hud-cyan-dim); letter-spacing: 1.2px; text-transform: uppercase; align-self: end; }
.strategy-card .param-v { font-size: 13px; color: #fff; font-family: 'Share Tech Mono', monospace; font-weight: 600; }
body.theme-disabled-day .strategy-card .name { color: #1f2937; -webkit-text-fill-color: #1f2937; background: none; }
body.theme-disabled-day .strategy-card .ls-v, body.theme-disabled-day .strategy-card .param-v { color: #1f2937; }
.badge.warn { color: var(--hud-amber); border-color: var(--hud-amber); }
.badge.bad  { color: var(--hud-red); border-color: var(--hud-red); }
@media (max-width: 700px) { .strategy-card { gap: 10px; } .strategy-card .params { grid-template-columns: repeat(2, 1fr); } }

/* ── Binance-style trade table 13-col (v52) ──────────────────────── */
.trade-table.binance .trade-row {
  display: grid;
  grid-template-columns: 115px 80px 62px 82px 88px 88px 100px 56px 100px 72px 110px 86px 1fr;
  gap: 8px; padding: 7px 10px; align-items: center; border-left: 3px solid transparent;
}
.trade-table.binance .trade-row.hdr { font-size: 10px; color: var(--hud-cyan-dim); letter-spacing: 2px;
  border-bottom: 1px solid rgba(102,192,255,0.18); position: sticky; top: 0; z-index: 5;
  background: rgba(5,14,28,0.92); backdrop-filter: blur(4px); }
.trade-table.binance .trade-row:not(.hdr):nth-child(even) { background: rgba(102,192,255,0.025); }
.trade-table.binance .trade-row.win { border-left-color: var(--hud-green); }
.trade-table.binance .trade-row.loss { border-left-color: var(--hud-red); }
.trade-table.binance .ts { color: var(--hud-cyan-soft); font-family: 'Share Tech Mono', monospace; font-size: 11px; }
.trade-table.binance .sym { color: #fff; font-weight: 700; font-family: 'Orbitron', sans-serif; font-size: 12px; }
.trade-table.binance .side { font-family: 'Orbitron', sans-serif; font-size: 10px; padding: 3px 7px; letter-spacing: 1.2px;
  border: 1px solid currentColor; text-align: center; border-radius: 2px; }
.trade-table.binance .side.long { color: var(--hud-green); }
.trade-table.binance .side.short { color: var(--hud-red); }
.trade-table.binance .num { font-family: 'Share Tech Mono', monospace; font-size: 12px; color: #fff; text-align: right; }
.trade-table.binance .pnl-cell { font-family: 'Share Tech Mono', monospace; font-size: 13px; font-weight: 700; text-align: right; }
.trade-table.binance .pnl-cell.up { color: var(--hud-green); } .trade-table.binance .pnl-cell.dn { color: var(--hud-red); }
.trade-table.binance .ret-cell { font-family: 'Share Tech Mono', monospace; font-size: 12px; font-weight: 600; text-align: right; }
.trade-table.binance .ret-cell.up { color: var(--hud-green); } .trade-table.binance .ret-cell.dn { color: var(--hud-red); }
.trade-table.binance .reason, .trade-table.binance .signal { color: var(--hud-cyan-soft); font-size: 11px; opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trade-table.binance { max-height: 560px; overflow-y: auto; }
.trade-table.binance .src-tag { font-family: 'Share Tech Mono', monospace; font-size: 10px; padding: 2px 6px;
  letter-spacing: 0.5px; border: 1px solid currentColor; border-radius: 2px; display: inline-block; }
.trade-table.binance .src-tag.v99_ml { color: #ffd24a; }
.trade-table.binance .src-tag.v36_inverse { color: #66c0ff; }
.trade-table.binance .src-tag.whale_signal { color: #ff7733; }
.trade-table.binance .src-tag.donchian { color: #00ff9c; }
.trade-table.binance .src-tag.tg_signal { color: #ffb070; }
.trade-table.binance .src-tag.unknown { color: var(--hud-cyan-dim); opacity: 0.6; }
body.theme-disabled-day .trade-table.binance .trade-row.hdr { background: rgba(255,255,255,0.92); }
body.theme-disabled-day .trade-table.binance .sym, body.theme-disabled-day .trade-table.binance .num { color: #1f2937; }
@media (max-width: 900px) {
  .trade-table.binance .trade-row { grid-template-columns: 1fr 1fr 1fr; gap: 6px 10px; padding: 8px; border-left: 4px solid transparent; }
  .trade-table.binance .trade-row.hdr { display: none; }
  .trade-table.binance .ts { grid-column: 1 / -1; font-size: 10px; }
  .trade-table.binance .reason, .trade-table.binance .signal { grid-column: 1 / -1; font-size: 10px; }
}
/* HYPERROLL OPS-CONSOLE v18 — PREMIUM theme.
 *
 * Design philosophy: precision, restraint, intentional whitespace.
 * Inspired by Stripe, Linear, Vercel — calm tools that respect 8-hour use.
 *
 * Activated by body.theme-premium. Overrides ALL aesthetic — keeps structure.
 */

body.theme-premium {
  /* ═══════ design tokens ═══════ */
  /* layered surfaces — true blacks with subtle elevation */
  --bg-0: #09090b;
  --bg-1: #0d0d10;
  --bg-2: #131316;
  --bg-3: #1c1c20;
  --bg-4: #27272a;

  /* hairlines */
  --line-1: #1f1f23;
  --line-2: #2a2a30;
  --line-3: #3f3f46;

  /* type — single accent for state, neutrals for everything else */
  --t-0: #fafafa;
  --t-1: #d4d4d8;
  --t-2: #a1a1aa;
  --t-3: #71717a;
  --t-4: #52525b;

  /* semantic colors — restrained */
  --acc: #818cf8;
  --acc-strong: #6366f1;
  --acc-bg: rgba(129, 140, 248, 0.12);
  --acc-border: rgba(129, 140, 248, 0.32);

  --pos: #10b981;
  --pos-bg: rgba(16, 185, 129, 0.08);
  --pos-border: rgba(16, 185, 129, 0.32);

  --neg: #f43f5e;
  --neg-bg: rgba(244, 63, 94, 0.08);
  --neg-border: rgba(244, 63, 94, 0.32);

  --warn: #f59e0b;
  --warn-bg: rgba(245, 158, 11, 0.08);

  /* re-map old vars so legacy components inherit consistency */
  --hud-cyan: var(--t-1);
  --hud-cyan-dim: var(--t-3);
  --hud-cyan-soft: var(--t-2);
  --hud-cyan-deep: var(--bg-3);
  --hud-copper: var(--acc);
  --hud-copper-bright: var(--acc);
  --hud-copper-deep: var(--acc-strong);
  --hud-amber: var(--warn);
  --hud-gold: var(--acc);
  --hud-gold-bright: var(--acc);
  --hud-red: var(--neg);
  --hud-green: var(--pos);
  --hud-purple: #c4b5fd;
  --bg-deep: var(--bg-0);
  --bg-mid: var(--bg-1);
  --bg-darker: var(--bg-0);
  --bg-panel: var(--bg-1);
  --grid-line: transparent;
  --grid-line-bright: transparent;
  --grid-warm: transparent;
  --glow-cyan: none; --glow-copper: none; --glow-gold: none;
  --glow-red: none; --glow-green: none;
  --copper-grad: var(--t-0);

  /* ═══════ typography ═══════ */
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Noto Sans TC', sans-serif;
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  letter-spacing: -0.01em;
  background: var(--bg-0) !important;
  color: var(--t-1);
}

/* kill all decorative chrome */
body.theme-premium::before,
body.theme-premium::after,
body.theme-premium .horizon,
body.theme-premium .horizon-grid { display: none !important; }

/* monospace for numbers — JetBrains Mono for that quant feel */
body.theme-premium .reactor-core .val,
body.theme-premium .kv .v,
body.theme-premium .stat-pill .val,
body.theme-premium .ribbon .seg .val,
body.theme-premium #now,
body.theme-premium #latency,
body.theme-premium .pos-row .upnl,
body.theme-premium .pos-row .roi,
body.theme-premium .trade-card .pnl,
body.theme-premium .trade-card .meta,
body.theme-premium .trade-card .reason,
body.theme-premium .scan-table,
body.theme-premium .heat-cell .ext,
body.theme-premium .heat-cell .k,
body.theme-premium .heat-cell .sym,
body.theme-premium .impact-row .v,
body.theme-premium .replay-stamp,
body.theme-premium .timeline-item .ver,
body.theme-premium .event-row,
body.theme-premium .audit-row,
body.theme-premium .whatif-cell .v,
body.theme-premium .whatif-cell .delta,
body.theme-premium .whatif-chip,
body.theme-premium .eta-banner .msg,
body.theme-premium .eta-banner .rate,
body.theme-premium .eta-banner .glyph {
  font-family: 'JetBrains Mono', 'SF Mono', Consolas, ui-monospace, monospace;
  font-feature-settings: 'tnum', 'zero', 'ss01';
}

/* ═══════ HUD top — clean nav bar ═══════ */
body.theme-premium .hud-top {
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-radius: 8px;
  box-shadow: none;
  clip-path: none;
  padding: 12px 20px;
  margin-bottom: 16px;
}
body.theme-premium .hud-top::before { display: none; }
body.theme-premium .hud-top h1 {
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  background: none !important;
  color: var(--t-0) !important;
  -webkit-text-fill-color: var(--t-0) !important;
  filter: none !important;
  animation: none !important;
  text-transform: none;
}
body.theme-premium .hud-top h1::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--acc); border-radius: 50%;
  margin-right: 10px; vertical-align: middle;
  box-shadow: 0 0 8px var(--acc);
}
body.theme-premium .hud-top h1 .dim {
  border-left: 1px solid var(--line-2);
  font-weight: 400;
  font-size: 11px;
  color: var(--t-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding-left: 12px;
  margin-left: 12px;
  opacity: 1;
}
body.theme-premium .stat-pill {
  font-size: 12px;
  color: var(--t-2);
}
body.theme-premium .stat-pill .lbl {
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--t-3);
  text-transform: uppercase;
}
body.theme-premium .stat-pill .val {
  color: var(--t-0);
  font-weight: 500;
  text-shadow: none;
  font-size: 12px;
}
body.theme-premium .pulse-dot {
  width: 6px; height: 6px;
  background: var(--pos);
  box-shadow: 0 0 6px var(--pos);
}
body.theme-premium .pulse-dot.warn { background: var(--warn); box-shadow: 0 0 6px var(--warn); }
body.theme-premium .pulse-dot.bad { background: var(--neg); box-shadow: 0 0 6px var(--neg); }

/* lang / theme / perf buttons → consistent pill style */
body.theme-premium .lang-toggle,
body.theme-premium .theme-switch button {
  font-family: inherit;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  padding: 5px 10px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--t-2);
  border-radius: 5px;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
  min-height: 28px;
}
body.theme-premium .lang-toggle:hover,
body.theme-premium .theme-switch button:hover {
  color: var(--t-0);
  border-color: var(--line-3);
  background: var(--bg-2);
}
body.theme-premium .lang-toggle.active,
body.theme-premium .lang-toggle.on,
body.theme-premium .theme-switch button.on {
  color: var(--acc);
  border-color: var(--acc-border);
  background: var(--acc-bg);
}
body.theme-premium .theme-switch {
  border: 1px solid var(--line-2);
  border-radius: 5px;
  overflow: hidden;
  padding: 0;
}
body.theme-premium .theme-switch button {
  border: none;
  border-radius: 0;
  border-right: 1px solid var(--line-2);
}
body.theme-premium .theme-switch button:last-child { border-right: none; }

/* ═══════ ribbon — cleaner, no clipPath ═══════ */
body.theme-premium .ribbon {
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-radius: 8px;
  box-shadow: none;
  clip-path: none;
  gap: 0;
}
body.theme-premium .ribbon .seg {
  background: transparent;
  padding: 10px 16px;
  border-right: 1px solid var(--line-1);
}
body.theme-premium .ribbon .seg:last-child { border-right: none; }
body.theme-premium .ribbon .seg .lbl {
  font-family: inherit;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--t-3);
  opacity: 1;
}
body.theme-premium .ribbon .seg .val {
  color: var(--t-0);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
  text-shadow: none;
}
body.theme-premium .ribbon .seg.active .val {
  color: var(--pos); text-shadow: none;
}
body.theme-premium .ribbon .seg.warn .val {
  color: var(--neg); text-shadow: none;
}

/* ═══════ ETA banner — quiet bar with strong typography ═══════ */
body.theme-premium .eta-banner {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: 8px;
  clip-path: none;
  padding: 12px 16px;
  margin-bottom: 16px;
  box-shadow: none;
  animation: none;
}
body.theme-premium .eta-banner.warn {
  background: var(--warn-bg);
  border-color: rgba(245, 158, 11, 0.32);
}
body.theme-premium .eta-banner.bad {
  background: var(--neg-bg);
  border-color: var(--neg-border);
}
body.theme-premium .eta-banner .glyph {
  font-family: inherit;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--pos);
  text-transform: uppercase;
}
body.theme-premium .eta-banner.warn .glyph { color: var(--warn); }
body.theme-premium .eta-banner.bad .glyph { color: var(--neg); }
body.theme-premium .eta-banner .msg {
  color: var(--t-1);
  font-size: 12px;
  letter-spacing: 0;
}
body.theme-premium .eta-banner .rate { color: var(--t-3); }
body.theme-premium .eta-banner .progress {
  background: var(--bg-3);
  height: 3px;
  border-radius: 2px;
}
body.theme-premium .eta-banner .progress .fill {
  background: var(--pos);
  box-shadow: none;
}
body.theme-premium .eta-banner.warn .progress .fill { background: var(--warn); }
body.theme-premium .eta-banner.bad .progress .fill { background: var(--neg); }

/* ═══════ alerts — minimal, no animation ═══════ */
body.theme-premium .alert-banner {
  background: var(--neg-bg);
  border: 1px solid var(--neg-border);
  border-radius: 8px;
  color: var(--neg);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  padding: 12px 16px;
  margin-bottom: 12px;
  clip-path: none;
  box-shadow: none;
  animation: none;
}
body.theme-premium .alert-banner.ok {
  background: var(--pos-bg);
  border-color: var(--pos-border);
  color: var(--pos);
}

/* ═══════ panels — the core surface ═══════ */
body.theme-premium .panel {
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-radius: 8px;
  box-shadow: none;
  clip-path: none;
  padding: 18px 20px 20px;
  contain: layout style;
  transition: border-color 0.15s ease;
}
body.theme-premium .panel::before,
body.theme-premium .panel::after { display: none !important; }
body.theme-premium .panel:hover { border-color: var(--line-2); box-shadow: none; }
body.theme-premium .panel.gold { border-color: var(--line-2); }
body.theme-premium .panel.red { border-color: var(--neg-border); }
body.theme-premium .panel.green { border-color: var(--pos-border); }

body.theme-premium .panel h2 {
  font-family: inherit;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--t-2);
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-1);
  padding-bottom: 12px;
  margin-bottom: 16px;
  display: flex;
  gap: 10px;
  align-items: center;
}
body.theme-premium .panel h2 .badge {
  font-family: inherit;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  background: var(--acc-bg);
  border: 1px solid var(--acc-border);
  border-radius: 4px;
  color: var(--acc);
  text-transform: uppercase;
}
body.theme-premium .panel h2 .badge.live {
  background: var(--pos-bg);
  border-color: var(--pos-border);
  color: var(--pos);
}

/* segmented tabs */
body.theme-premium .seg-tabs {
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: 6px;
  padding: 2px;
  gap: 0;
  margin-left: auto;
}
body.theme-premium .seg-tabs button {
  background: transparent;
  border: none;
  color: var(--t-3);
  font-family: inherit;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
  padding: 4px 10px;
  border-radius: 4px;
  min-height: 26px;
  transition: color 0.12s, background 0.12s;
}
body.theme-premium .seg-tabs button:hover { color: var(--t-1); }
body.theme-premium .seg-tabs button.on {
  background: var(--bg-3);
  color: var(--t-0);
}

body.theme-premium .hdr-stat {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--t-3);
  letter-spacing: 0;
}
body.theme-premium .csv-btn {
  font-family: inherit;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0;
  padding: 5px 10px;
  border: 1px solid var(--line-2);
  border-radius: 5px;
  background: transparent;
  color: var(--t-2);
  text-transform: none;
}
body.theme-premium .csv-btn:hover {
  color: var(--acc);
  border-color: var(--acc-border);
  background: var(--acc-bg);
}
body.theme-premium .chart-sym {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 500;
  color: var(--t-0);
  letter-spacing: 0;
}

/* ═══════ reactor — clean ring, big number ═══════ */
body.theme-premium .reactor { width: 200px; height: 200px; }
body.theme-premium .reactor .ring-bg {
  stroke: var(--line-2);
  stroke-width: 2;
}
body.theme-premium .reactor .ring-fg {
  stroke: var(--acc);
  stroke-width: 2;
  filter: none;
}
body.theme-premium .reactor .ring-tick {
  stroke: var(--line-2);
  opacity: 0.4;
}
body.theme-premium .reactor-core .lbl {
  font-family: inherit;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--t-3);
  text-transform: uppercase;
}
body.theme-premium .reactor-core .val {
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -0.02em;
  color: var(--t-0);
  text-shadow: none;
  font-feature-settings: 'tnum';
}
body.theme-premium .reactor-core .sub {
  font-size: 11px;
  color: var(--t-3);
  letter-spacing: 0;
}

/* ═══════ kv-grid (used everywhere) ═══════ */
body.theme-premium .kv-grid { gap: 6px 20px; }
body.theme-premium .kv {
  border-bottom: 1px solid var(--line-1);
  padding: 8px 0;
  gap: 4px;
}
body.theme-premium .kv:last-child { border-bottom: none; }
body.theme-premium .kv .k {
  font-family: inherit;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--t-3);
  text-transform: uppercase;
  opacity: 1;
}
body.theme-premium .kv .v {
  font-weight: 500;
  font-size: 14px;
  color: var(--t-0);
  letter-spacing: 0;
}
body.theme-premium .kv .v.ok { color: var(--pos); }
body.theme-premium .kv .v.bad { color: var(--neg); }
body.theme-premium .kv .v.warn { color: var(--warn); }
body.theme-premium .kv .v.dim { color: var(--t-3); }

/* ═══════ position rows — table-like ═══════ */
body.theme-premium .pos-row {
  background: transparent;
  border-left: 2px solid var(--line-2);
  border-radius: 0;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 1px;
  transition: background 0.12s, border-left-color 0.12s;
}
body.theme-premium .pos-row:hover { background: var(--bg-2); border-left-color: var(--line-3); }
body.theme-premium .pos-row.long { border-left-color: var(--pos); }
body.theme-premium .pos-row.short { border-left-color: var(--neg); }
body.theme-premium .pos-row .sym {
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 13px;
  color: var(--t-0);
}
body.theme-premium .pos-row .side {
  font-family: inherit;
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border: 1px solid currentColor;
  border-radius: 3px;
  text-transform: uppercase;
}
body.theme-premium .pos-row .reason {
  color: var(--t-3);
  font-size: 11px;
  font-weight: 400;
}
body.theme-premium .pos-row .upnl,
body.theme-premium .pos-row .roi {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.01em;
}
body.theme-premium .pos-row .held {
  color: var(--t-3);
  font-size: 11px;
}
body.theme-premium .pos-row .flatten-btn {
  font-family: inherit;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.04em;
  padding: 4px 9px;
  border: 1px solid var(--neg-border);
  background: transparent;
  color: var(--neg);
  border-radius: 4px;
  text-transform: uppercase;
}
body.theme-premium .pos-row .flatten-btn:hover {
  background: var(--neg);
  color: var(--bg-0);
  border-color: var(--neg);
  box-shadow: none;
}

body.theme-premium .empty {
  color: var(--t-3);
  font-style: normal;
  letter-spacing: 0;
  font-size: 12px;
}

/* ═══════ heatmap — quiet cards ═══════ */
body.theme-premium .heat-cell {
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: 6px;
  padding: 10px 12px;
  transition: border-color 0.12s, transform 0.12s;
}
body.theme-premium .heat-cell:hover {
  border-color: var(--line-3);
  background: var(--bg-3);
  transform: none;
  box-shadow: none;
}
body.theme-premium .heat-cell .sym {
  font-family: inherit;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.01em;
  color: var(--t-0);
  text-shadow: none;
}
body.theme-premium .heat-cell .ext {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
}
body.theme-premium .heat-cell .ext.up { color: var(--pos); }
body.theme-premium .heat-cell .ext.dn { color: var(--neg); }
body.theme-premium .heat-cell .k {
  font-size: 10px;
  color: var(--t-3);
}
body.theme-premium .heat-cell .k.high { color: var(--neg); }
body.theme-premium .heat-cell .k.low { color: var(--pos); }
body.theme-premium .heat-cell .progress-bar {
  background: var(--bg-3);
  height: 2px;
  border-radius: 1px;
}
body.theme-premium .heat-cell .progress-bar .fill {
  background: var(--acc);
}
body.theme-premium .heat-cell.armed-short {
  border-color: var(--neg-border);
  background: var(--neg-bg);
  box-shadow: none;
}
body.theme-premium .heat-cell.armed-short .progress-bar .fill { background: var(--neg); }
body.theme-premium .heat-cell.armed-long {
  border-color: var(--pos-border);
  background: var(--pos-bg);
  box-shadow: none;
}
body.theme-premium .heat-cell.armed-long .progress-bar .fill { background: var(--pos); }
body.theme-premium .heat-cell .arm-tag {
  font-family: inherit;
  font-weight: 600;
  font-size: 8px;
  letter-spacing: 0.08em;
  border: none;
  background: var(--bg-3);
  padding: 1px 5px;
  border-radius: 3px;
  text-transform: uppercase;
}
body.theme-premium .heat-cell.armed-short .arm-tag { color: var(--neg); background: rgba(244,63,94,0.15); }
body.theme-premium .heat-cell.armed-long .arm-tag { color: var(--pos); background: rgba(16,185,129,0.15); }

/* ═══════ scan table ═══════ */
body.theme-premium .scan-table .hdr {
  color: var(--t-3);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line-1);
}
body.theme-premium .scan-table .row {
  background: transparent;
  border-left: 2px solid transparent;
  font-size: 12px;
}
body.theme-premium .scan-table .row:hover { background: var(--bg-2); }
body.theme-premium .scan-table .row.trig-LONG {
  border-left-color: var(--pos);
  background: var(--pos-bg);
}
body.theme-premium .scan-table .row.trig-SHORT {
  border-left-color: var(--neg);
  background: var(--neg-bg);
}
body.theme-premium .scan-table .stat-trig {
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ═══════ trade cards ═══════ */
body.theme-premium .trade-card {
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: 8px;
  padding: 12px 14px;
  border-left: 3px solid var(--line-2);
  transition: border-color 0.12s, background 0.12s;
}
body.theme-premium .trade-card:hover {
  background: var(--bg-3);
  border-color: var(--line-2);
  border-left-color: var(--line-3);
}
body.theme-premium .trade-card.win { border-left-color: var(--pos); }
body.theme-premium .trade-card.loss { border-left-color: var(--neg); }
body.theme-premium .trade-card .sym {
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.01em;
  color: var(--t-0);
}
body.theme-premium .trade-card .side {
  font-family: inherit;
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.08em;
  padding: 2px 6px;
  border-radius: 3px;
  text-transform: uppercase;
}
body.theme-premium .trade-card .pnl {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
}
body.theme-premium .trade-card .spark {
  background: var(--bg-1);
  border: 1px solid var(--line-1);
  border-radius: 4px;
  height: 44px;
}
body.theme-premium .trade-card .meta {
  display: grid;
  grid-template-columns: auto 1fr auto 1fr auto 1fr;
  gap: 4px 12px;
  font-size: 11px;
  margin-top: 6px;
}
body.theme-premium .trade-card .meta .k {
  color: var(--t-3);
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: inherit;
}
body.theme-premium .trade-card .meta .v { color: var(--t-1); }

/* v37: timeline row (entry → exit timestamps) */
body.theme-premium .trade-card .trade-timeline {
  display: grid;
  grid-template-columns: auto 1fr auto auto 1fr;
  gap: 4px 8px;
  align-items: center;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--line-1);
  font-size: 10px;
  color: var(--t-2);
}
body.theme-premium .trade-card .trade-timeline .tl-k {
  color: var(--t-3);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body.theme-premium .trade-card .trade-timeline .tl-v {
  color: var(--t-1);
  font-family: 'Share Tech Mono', monospace;
}
body.theme-premium .trade-card .trade-timeline .tl-arrow {
  color: var(--hud-cyan-soft);
  font-weight: 600;
}

body.theme-premium .trade-card .reason {
  color: var(--t-3);
  font-size: 10px;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid var(--line-1);
}

/* v37: legacy table view — 12 columns now (added 倉位/倍/持倉/開倉) */
body.theme-premium .trade-table .trade-row {
  display: grid;
  grid-template-columns: 95px 95px 55px 65px 70px 80px 80px 90px 70px 1fr;
  align-items: center; min-height: 28px;
  gap: 6px;
  font-size: 11px;
  align-items: center;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line-1);
}
body.theme-premium .trade-table .trade-row.hdr {
  font-size: 9px;
  color: var(--t-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--line-2);
  background: var(--bg-2);
  position: sticky;
  top: 0;
  z-index: 2;
}
body.theme-premium .trade-table .trade-row .ts {
  font-family: 'Share Tech Mono', monospace;
  color: var(--t-2);
  font-size: 10px;
}
@media (max-width: 980px) {
  body.theme-premium .trade-table .trade-row {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 4px;
  }
  body.theme-premium .trade-table .trade-row.hdr { display: none; }
}

/* ═══════ controls ═══════ */
body.theme-premium .ctrl-card {
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: 6px;
  padding: 12px 14px;
}
body.theme-premium .ctrl-card .lbl {
  font-family: inherit;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--t-3);
  text-transform: uppercase;
}
body.theme-premium .ctrl-card .val {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  font-size: 14px;
  color: var(--t-0);
}
body.theme-premium .ctrl-btn {
  font-family: inherit;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
  padding: 7px 12px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--t-1);
  border-radius: 5px;
  text-transform: none;
  transition: all 0.12s;
  min-height: 32px;
}
body.theme-premium .ctrl-btn:hover {
  border-color: var(--line-3);
  background: var(--bg-3);
  color: var(--t-0);
}
body.theme-premium .ctrl-btn.on {
  border-color: var(--acc-border);
  background: var(--acc-bg);
  color: var(--acc);
}
body.theme-premium .ctrl-btn.danger {
  border-color: var(--neg-border);
  color: var(--neg);
}
body.theme-premium .ctrl-btn.danger:hover {
  background: var(--neg);
  color: var(--bg-0);
  border-color: var(--neg);
  box-shadow: none;
}
body.theme-premium .ctrl-input {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: 5px;
  color: var(--t-0);
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  padding: 7px 12px;
}
body.theme-premium .ctrl-input:focus {
  outline: none;
  border-color: var(--acc);
  box-shadow: 0 0 0 3px var(--acc-bg);
}

/* ═══════ command palette ═══════ */
body.theme-premium #cmdk-root {
  background: rgba(9, 9, 11, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.theme-premium .cmdk-box {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}
body.theme-premium .cmdk-header {
  border-bottom: 1px solid var(--line-1);
  padding: 14px 16px;
}
body.theme-premium .cmdk-header .glyph {
  color: var(--t-2);
  font-size: 13px;
  font-weight: 500;
}
body.theme-premium .cmdk-header input {
  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--t-0);
  letter-spacing: -0.01em;
}
body.theme-premium .cmdk-header input::placeholder { color: var(--t-3); }
body.theme-premium .cmdk-header .kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--t-3);
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  border-radius: 4px;
  padding: 2px 6px;
}
body.theme-premium .cmdk-item {
  padding: 10px 16px;
  border-left: 2px solid transparent;
  font-size: 13px;
}
body.theme-premium .cmdk-item:hover { background: var(--bg-2); }
body.theme-premium .cmdk-item.sel {
  background: var(--bg-3);
  border-left-color: var(--acc);
}
body.theme-premium .cmdk-cat {
  font-family: inherit;
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.06em;
  border-radius: 3px;
  padding: 2px 6px;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  color: var(--t-2);
}
body.theme-premium .cmdk-cat.cat-trading { color: var(--warn); border-color: rgba(245,158,11,0.32); }
body.theme-premium .cmdk-cat.cat-flatten { color: var(--neg); border-color: var(--neg-border); }
body.theme-premium .cmdk-cat.cat-risk { color: var(--acc); border-color: var(--acc-border); }
body.theme-premium .cmdk-cat.cat-view { color: var(--t-2); }
body.theme-premium .cmdk-cat.cat-trades { color: #c4b5fd; border-color: rgba(196,181,253,0.32); }
body.theme-premium .cmdk-cat.cat-system { color: var(--t-3); }
body.theme-premium .cmdk-label { color: var(--t-0); font-weight: 500; }
body.theme-premium .cmdk-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--t-3);
}
body.theme-premium .cmdk-empty {
  color: var(--t-3);
  font-style: normal;
}

/* ═══════ IMPACT modal ═══════ */
body.theme-premium #impact-root {
  background: rgba(9, 9, 11, 0.85);
  backdrop-filter: blur(8px);
}
body.theme-premium .impact-box {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6);
}
body.theme-premium .impact-header {
  border-bottom: 1px solid var(--line-1);
  padding: 14px 18px;
}
body.theme-premium .impact-header .glyph {
  color: var(--neg);
  font-size: 14px;
}
body.theme-premium .impact-header .title {
  font-family: inherit;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0;
  color: var(--t-0);
  text-transform: none;
}
body.theme-premium .impact-actions {
  border-top: 1px solid var(--line-1);
  padding: 12px 18px;
}
body.theme-premium .impact-row {
  font-size: 12px;
  gap: 16px;
}
body.theme-premium .impact-row .k {
  font-family: inherit;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--t-3);
  text-transform: uppercase;
}
body.theme-premium .impact-row .v {
  font-family: 'JetBrains Mono', monospace;
  color: var(--t-0);
  font-weight: 500;
}
body.theme-premium .impact-row.big {
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
body.theme-premium .impact-row.big .v { font-size: 16px; font-weight: 600; }
body.theme-premium .impact-mini {
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-left: 2px solid var(--line-2);
  border-radius: 4px;
}

/* ═══════ canvas charts ═══════ */
body.theme-premium canvas#eqCanvas,
body.theme-premium canvas#pnlCanvas {
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: 6px;
}
body.theme-premium #klineWrap {
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: 6px;
}
body.theme-premium .kline-info {
  color: var(--t-2);
  font-size: 11px;
}
body.theme-premium .chart-tip {
  background: var(--bg-2);
  border: 1px solid var(--line-3);
  border-radius: 6px;
  color: var(--t-0);
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  font-size: 11px;
}

/* ═══════ replay slider ═══════ */
body.theme-premium .replay-tag {
  background: var(--bg-2);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  color: var(--t-2);
  font-family: inherit;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 10px;
}
body.theme-premium .replay-tag.active {
  background: var(--acc-bg);
  border-color: var(--acc-border);
  color: var(--acc);
}
body.theme-premium .replay-slider {
  background: var(--bg-3);
  border: none;
  border-radius: 2px;
  height: 4px;
}
body.theme-premium .replay-slider::-webkit-slider-thumb {
  background: var(--acc);
  border: 2px solid var(--bg-1);
  border-radius: 50%;
  width: 16px; height: 16px;
}
body.theme-premium .replay-slider::-moz-range-thumb {
  background: var(--acc);
  border: 2px solid var(--bg-1);
  border-radius: 50%;
  width: 16px; height: 16px;
}
body.theme-premium .replay-stamp { color: var(--t-1); font-size: 12px; }
body.theme-premium .replay-stamp .dim { color: var(--t-3); }

/* ═══════ what-if lab ═══════ */
body.theme-premium .whatif-section {
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: 6px;
  padding: 10px 12px;
}
body.theme-premium .whatif-section .lbl {
  font-family: inherit;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--t-3);
  text-transform: uppercase;
}
body.theme-premium .whatif-chip {
  background: var(--bg-3);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  color: var(--t-2);
  font-size: 11px;
  letter-spacing: 0;
  padding: 4px 9px;
  font-family: inherit;
  font-weight: 500;
}
body.theme-premium .whatif-chip:hover { color: var(--t-0); border-color: var(--line-3); }
body.theme-premium .whatif-chip.on {
  color: var(--acc);
  border-color: var(--acc-border);
  background: var(--acc-bg);
}
body.theme-premium .whatif-chip.exclude {
  color: var(--neg);
  border-color: var(--neg-border);
  background: var(--neg-bg);
}
body.theme-premium .whatif-results {
  background: var(--line-1);
  border-radius: 6px;
  overflow: hidden;
}
body.theme-premium .whatif-cell {
  background: var(--bg-2);
  padding: 14px 16px;
}
body.theme-premium .whatif-cell .k {
  font-family: inherit;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--t-3);
  text-transform: uppercase;
}
body.theme-premium .whatif-cell .v {
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.02em;
  color: var(--t-0);
}
body.theme-premium .whatif-cell .delta { color: var(--t-3); }
body.theme-premium .whatif-canvas-wrap {
  background: var(--bg-2);
  border: 1px solid var(--line-1);
  border-radius: 6px;
}

/* ═══════ timeline (research) ═══════ */
body.theme-premium .timeline-item {
  background: var(--bg-2);
  border-left: 2px solid var(--line-2);
  border-radius: 0 4px 4px 0;
  padding: 10px 14px;
}
body.theme-premium .timeline-item .ver {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  font-size: 13px;
  color: var(--t-0);
}
body.theme-premium .timeline-item .ver .date {
  font-size: 10px;
  color: var(--t-3);
}
body.theme-premium .timeline-item .body .ttl {
  font-weight: 500;
  font-size: 13px;
  color: var(--t-0);
}
body.theme-premium .timeline-item .body .desc {
  font-family: inherit;
  font-size: 11px;
  color: var(--t-2);
  line-height: 1.5;
}
body.theme-premium .tag {
  font-family: inherit;
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.06em;
  border-radius: 3px;
  padding: 2px 6px;
  text-transform: uppercase;
  border: 1px solid var(--line-2);
  background: var(--bg-3);
}
body.theme-premium .tag-DEPLOY { color: var(--pos); border-color: var(--pos-border); background: var(--pos-bg); }
body.theme-premium .tag-PATCH { color: var(--warn); border-color: rgba(245,158,11,0.32); background: var(--warn-bg); }
body.theme-premium .tag-RESEARCH { color: var(--t-2); }
body.theme-premium .tag-BREAKTHROUGH { color: #c4b5fd; border-color: rgba(196,181,253,0.32); }
body.theme-premium .tag-ROLLBACK, body.theme-premium .tag-NULL, body.theme-premium .tag-AUDIT {
  color: var(--neg); border-color: var(--neg-border); background: var(--neg-bg);
}

/* ═══════ event / audit / mortem rows ═══════ */
body.theme-premium .event-row,
body.theme-premium .audit-row {
  background: var(--bg-2);
  border-left: 2px solid var(--line-2);
  border-radius: 0 4px 4px 0;
  padding: 6px 10px;
  font-size: 11px;
}
body.theme-premium .event-row.win { border-left-color: var(--pos); }
body.theme-premium .event-row.loss { border-left-color: var(--neg); }
body.theme-premium .audit-row.ok { border-left-color: var(--pos); }
body.theme-premium .audit-row.fail { border-left-color: var(--neg); }
body.theme-premium .event-row .kind {
  font-family: 'JetBrains Mono', monospace;
  color: var(--acc);
  font-weight: 500;
}
body.theme-premium .mortem-row {
  background: var(--bg-2);
  border-left: 3px solid var(--line-2);
  border-radius: 0 6px 6px 0;
  padding: 12px 14px;
}
body.theme-premium .mortem-row.high {
  border-left-color: var(--neg);
  background: var(--neg-bg);
}
body.theme-premium .mortem-row.med {
  border-left-color: var(--warn);
  background: var(--warn-bg);
}
body.theme-premium .mortem-row.low { border-left-color: var(--line-3); }
body.theme-premium .mortem-row .sev {
  font-family: inherit;
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.08em;
  border-radius: 3px;
  padding: 3px 7px;
  text-transform: uppercase;
}
body.theme-premium .mortem-row .ttl {
  font-weight: 500;
  font-size: 13px;
  color: var(--t-0);
}
body.theme-premium .mortem-row .detail {
  font-family: inherit;
  font-size: 11px;
  color: var(--t-2);
}
body.theme-premium .mortem-row .window {
  font-family: 'JetBrains Mono', monospace;
  color: var(--t-3);
}

/* ═══════ globe ═══════ */
body.theme-premium #globe { min-height: 320px; }

/* ═══════ footer ═══════ */
body.theme-premium .hud-foot {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--t-3);
  letter-spacing: 0;
  border-top: 1px solid var(--line-1);
  margin-top: 24px;
  padding-top: 16px;
}

/* ═══════ error console ═══════ */
body.theme-premium #err-console {
  background: var(--bg-1);
  border: 1px solid var(--neg-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
}
body.theme-premium #err-console .err-row .k {
  font-family: inherit;
  font-weight: 500;
}

/* ═══════ scan-indicator ═══════ */
body.theme-premium .scan-indicator { font-size: 11px; color: var(--t-2); }
body.theme-premium .scan-indicator .dot { background: var(--t-3); box-shadow: none; width: 6px; height: 6px; }
body.theme-premium .scan-indicator.active .dot { background: var(--pos); box-shadow: 0 0 4px var(--pos); }

/* ═══════ wrap padding & spacing ═══════ */
body.theme-premium { padding: 20px 24px 60px; }
body.theme-premium .wrap { max-width: 1480px; }
body.theme-premium .grid { gap: 14px; }

/* ═══════════════════════════════════════════════════════════════════
 *  v25: DD escalation on hero EQUITY card + strategy health badge
 * ═══════════════════════════════════════════════════════════════════ */
.hero-stat.dd-mild {
  position: relative;
  box-shadow: inset 3px 0 0 var(--warn, #f59e0b);
}
.hero-stat.dd-warn {
  position: relative;
  background: var(--warn-bg, rgba(245,158,11,0.08)) !important;
  box-shadow: inset 3px 0 0 var(--warn, #f59e0b);
}
.hero-stat.dd-warn .hero-val { color: var(--warn, #f59e0b); }
.hero-stat.dd-severe {
  position: relative;
  background: var(--neg-bg, rgba(244,63,94,0.10)) !important;
  box-shadow: inset 3px 0 0 var(--neg, #f43f5e), 0 0 0 1px var(--neg-border, rgba(244,63,94,0.32));
  animation: dd-severe-pulse 1.6s ease-in-out infinite;
}
.hero-stat.dd-severe .hero-val { color: var(--neg, #f43f5e); }
@keyframes dd-severe-pulse {
  0%, 100% { box-shadow: inset 3px 0 0 var(--neg, #f43f5e), 0 0 0 1px var(--neg-border, rgba(244,63,94,0.32)); }
  50% { box-shadow: inset 3px 0 0 var(--neg, #f43f5e), 0 0 0 2px var(--neg, #f43f5e); }
}
body.perf .hero-stat.dd-severe { animation: none; }

/* strategy health badge — small pill next to EQUITY label */
.hero-health {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  padding: 1px 6px;
  margin-left: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  border-radius: 3px;
  border: 1px solid currentColor;
  cursor: help;
  vertical-align: middle;
  line-height: 1.4;
}
.hero-health-good {
  color: var(--pos, #10b981);
  background: var(--pos-bg, rgba(16,185,129,0.10));
}
.hero-health-ok {
  color: var(--acc, #818cf8);
  background: var(--acc-bg, rgba(129,140,248,0.10));
}
.hero-health-warn {
  color: var(--warn, #f59e0b);
  background: var(--warn-bg, rgba(245,158,11,0.10));
}
.hero-health-bad {
  color: var(--neg, #f43f5e);
  background: var(--neg-bg, rgba(244,63,94,0.10));
}

/* ═══════════════════════════════════════════════════════════════════
 *  v25c: BOT identity styling — make active bot visually unmistakable
 * ═══════════════════════════════════════════════════════════════════ */

/* When BOT A is active: indigo accent ribbon at top of viewport */
body.bot-active-A::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--acc, #818cf8) 20%, var(--acc, #818cf8) 80%, transparent 100%);
  z-index: 100;
  pointer-events: none;
}
body.bot-active-B::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, var(--pos, #10b981) 20%, var(--pos, #10b981) 80%, transparent 100%);
  z-index: 100;
  pointer-events: none;
}
body.bot-active-C::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #f59e0b 20%, #f59e0b 80%, transparent 100%);
  z-index: 100;
  pointer-events: none;
}
body.bot-active-D::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #ec4899 20%, #ec4899 80%, transparent 100%);
  z-index: 100;
  pointer-events: none;
}
body.bot-compare::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--acc, #818cf8) 0%, var(--acc, #818cf8) 25%,
    var(--pos, #10b981) 25%, var(--pos, #10b981) 50%,
    #f59e0b 50%, #f59e0b 75%,
    #ec4899 75%, #ec4899 100%);
  z-index: 100;
  pointer-events: none;
}

/* HUD shows current bot prominently */
body.bot-active-A .bot-switch button[data-bot="A"].on,
body.bot-active-B .bot-switch button[data-bot="B"].on,
body.bot-active-C .bot-switch button[data-bot="C"].on,
body.bot-active-D .bot-switch button[data-bot="D"].on,
body.bot-compare .bot-switch button[data-bot="compare"].on {
  font-weight: 800;
  letter-spacing: 0.06em;
  transform: scale(1.05);
}
body.bot-active-A .bot-switch button[data-bot="A"].on {
  background: var(--acc, #818cf8) !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px var(--acc-bg, rgba(129,140,248,0.3));
}
body.bot-active-B .bot-switch button[data-bot="B"].on {
  background: var(--pos, #10b981) !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px rgba(16,185,129,0.3);
}
body.bot-active-C .bot-switch button[data-bot="C"].on {
  background: #f59e0b !important;
  color: #1c1917 !important;
  box-shadow: 0 0 0 2px rgba(245,158,11,0.32);
}
body.bot-active-D .bot-switch button[data-bot="D"].on {
  background: #ec4899 !important;
  color: #fff !important;
  box-shadow: 0 0 0 2px rgba(236,72,153,0.32);
}

/* Hero zone gets a subtle bot-tinted left accent */
body.bot-active-A #heroZone .hero-stat:first-child {
  border-left: 3px solid var(--acc, #818cf8);
}
body.bot-active-B #heroZone .hero-stat:first-child {
  border-left: 3px solid var(--pos, #10b981);
}
body.bot-active-C #heroZone .hero-stat:first-child {
  border-left: 3px solid #f59e0b;
}
body.bot-active-D #heroZone .hero-stat:first-child {
  border-left: 3px solid #ec4899;
}

/* Big bot-name plate above hero (built dynamically by JS) — see #botNamePlate */
/* v33: bumped font size + padding so BOT identity is unmistakable */
#botNamePlate {
  display: none;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 10px;
  padding: 8px 16px;
  border-radius: 6px;
  width: fit-content;
}
@media (max-width: 700px) {
  #botNamePlate { font-size: 12px; padding: 6px 12px; letter-spacing: 0.10em; }
}
body.bot-active-A #botNamePlate,
body.bot-active-B #botNamePlate,
body.bot-active-C #botNamePlate,
body.bot-active-D #botNamePlate,
body.bot-compare #botNamePlate {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body.bot-active-A #botNamePlate {
  color: var(--acc, #818cf8);
  background: var(--acc-bg, rgba(129,140,248,0.12));
  border: 1px solid var(--acc-border, rgba(129,140,248,0.32));
}
body.bot-active-B #botNamePlate {
  color: var(--pos, #10b981);
  background: var(--pos-bg, rgba(16,185,129,0.10));
  border: 1px solid var(--pos-border, rgba(16,185,129,0.32));
}
body.bot-active-C #botNamePlate {
  color: #f59e0b;
  background: rgba(245,158,11,0.10);
  border: 1px solid rgba(245,158,11,0.32);
}
body.bot-active-D #botNamePlate {
  color: #ec4899;
  background: rgba(236,72,153,0.10);
  border: 1px solid rgba(236,72,153,0.32);
}
body.bot-compare #botNamePlate {
  background: linear-gradient(90deg,
    var(--acc-bg, rgba(129,140,248,0.12)) 0%,
    var(--pos-bg, rgba(16,185,129,0.10)) 33%,
    rgba(245,158,11,0.10) 66%,
    rgba(236,72,153,0.10) 100%);
  color: var(--t-1, #d4d4d8);
  border: 1px solid var(--line-2, #2a2a30);
}
#botNamePlate .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 6px currentColor;
  animation: pulse 1.6s ease-in-out infinite;
}

/* hero zone "switching" flash */
#heroZone.switching {
  animation: hero-switch-flash 0.35s ease-out;
}
@keyframes hero-switch-flash {
  0% { opacity: 0.4; transform: translateY(2px); }
  100% { opacity: 1; transform: translateY(0); }
}
body.perf #heroZone.switching { animation: none; }

/* ═══════════════════════════════════════════════════════════════════
 *  v20: BOT switcher pill (A / B / COMPARE)
 * ═══════════════════════════════════════════════════════════════════ */
.bot-switch {
  display: inline-flex;
  border: 1px solid var(--line-2, #2a2a30);
  border-radius: 5px;
  overflow: hidden;
  padding: 0;
}
.bot-switch button {
  background: transparent;
  border: none;
  border-right: 1px solid var(--line-2, #2a2a30);
  color: var(--t-2, #a1a1aa);
  padding: 5px 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  cursor: pointer;
  min-height: 28px;
  text-transform: uppercase;
  transition: all 0.12s;
}
.bot-switch button:last-child { border-right: none; }
.bot-switch button:hover {
  color: var(--t-0, #fafafa);
  background: var(--bg-2, #131316);
}
.bot-switch button.on {
  color: var(--acc, #818cf8);
  background: var(--acc-bg, rgba(129,140,248,0.14));
  font-weight: 700;
}
body.theme-jarvis .bot-switch button.on {
  color: var(--hud-copper-bright);
  background: rgba(255,119,51,0.15);
}
body.theme-day .bot-switch button.on {
  color: #1d4ed8; background: #dbeafe;
}

/* ═══════════════════════════════════════════════════════════════════
 *  v29: Trade Attribution panel
 * ═══════════════════════════════════════════════════════════════════ */
.attr-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
}
.attr-pill {
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 3px 9px;
  border-radius: 4px;
  border: 1px solid currentColor;
}
.attr-pill.win { color: var(--pos, #10b981); background: var(--pos-bg, rgba(16,185,129,0.10)); }
.attr-pill.loss { color: var(--neg, #f43f5e); background: var(--neg-bg, rgba(244,63,94,0.10)); }
.attr-pill.flat { color: var(--t-3, #71717a); }
.attr-spacer { flex: 1; }
.attr-net {
  font-family: 'JetBrains Mono', monospace;
  color: var(--t-2, #a1a1aa);
  font-size: 12px;
}
.attr-net .up { color: var(--pos, #10b981); font-weight: 700; }
.attr-net .dn { color: var(--neg, #f43f5e); font-weight: 700; }

.attr-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: var(--line-1, rgba(102,192,255,0.10));
  border: 1px solid var(--line-1, rgba(102,192,255,0.10));
  border-radius: 6px;
  overflow: hidden;
  max-height: 540px;
  overflow-y: auto;
}
.attr-row {
  display: grid;
  grid-template-columns: 130px 1fr 150px;
  gap: 14px;
  padding: 9px 14px;
  background: var(--bg-2, rgba(5,15,28,0.5));
  align-items: center;
  font-size: 12px;
  cursor: default;
  transition: background 0.12s;
}
body.theme-day .attr-row { background: #fafaf9; }
body.theme-jarvis .attr-row { background: rgba(8,18,36,0.85); }
.attr-row:hover { background: var(--bg-3, rgba(2,8,16,0.7)); }
body.theme-day .attr-row:hover { background: #f5f5f4; }
body.theme-jarvis .attr-row:hover { background: rgba(2,8,16,0.92); }
.attr-row.win { border-left: 2px solid var(--pos, #10b981); }
.attr-row.loss { border-left: 2px solid var(--neg, #f43f5e); }
.attr-row.flat { border-left: 2px solid var(--line-3, #3f3f46); opacity: 0.7; }

.attr-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600; font-size: 12px;
  color: var(--t-0, #fafafa);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.theme-day .attr-label { color: #1f2937; }

.attr-bar-wrap {
  position: relative;
  height: 18px;
  background: var(--bg-3, rgba(2,8,16,0.6));
  border-radius: 3px;
  overflow: hidden;
}
body.theme-day .attr-bar-wrap { background: #e7e5e4; }
.attr-center {
  position: absolute; top: 0; bottom: 0;
  left: 50%; width: 1px;
  background: var(--t-3, #71717a);
  opacity: 0.4;
}
.attr-bar {
  position: absolute; top: 2px; bottom: 2px;
  border-radius: 2px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.attr-bar.pos {
  background: linear-gradient(90deg, rgba(16,185,129,0.25) 0%, var(--pos, #10b981) 100%);
}
.attr-bar.neg {
  background: linear-gradient(90deg, var(--neg, #f43f5e) 0%, rgba(244,63,94,0.25) 100%);
}

.attr-stat {
  text-align: right;
  display: flex; flex-direction: column;
  gap: 2px;
}
.attr-stat .attr-pnl {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 13px;
}
.attr-stat .attr-pnl.up { color: var(--pos, #10b981); }
.attr-stat .attr-pnl.dn { color: var(--neg, #f43f5e); }
.attr-stat .attr-pnl.dim { color: var(--t-3, #71717a); }
.attr-stat .attr-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--t-3, #71717a);
}
.attr-stat .attr-meta .up { color: var(--pos, #10b981); }
.attr-stat .attr-meta .dn { color: var(--neg, #f43f5e); }

@media (max-width: 700px) {
  .attr-row { grid-template-columns: 90px 1fr 110px; gap: 10px; padding: 8px 10px; font-size: 11px; }
  .attr-label { font-size: 11px; }
  .attr-stat .attr-pnl { font-size: 12px; }
  .attr-stat .attr-meta { font-size: 9px; }
}

/* ═══════════════════════════════════════════════════════════════════
 *  v22: Strategy DNA panel
 * ═══════════════════════════════════════════════════════════════════ */
.dna-grid {
  display: grid;
  gap: 12px;
}
.dna-grid.compare {
  grid-template-columns: repeat(4, 1fr);  /* v35: 4 bots */
}
@media (max-width: 1400px) { .dna-grid.compare { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .dna-grid.compare { grid-template-columns: 1fr; } }
.dna-card.bot-C { border-left: 3px solid #f59e0b; }
.dna-card.bot-C .dna-name { color: #f59e0b; }
.dna-card.bot-D { border-left: 3px solid #ec4899; }
.dna-card.bot-D .dna-name { color: #ec4899; }
.dna-card {
  background: var(--bg-2, rgba(5,15,28,0.5));
  border: 1px solid var(--line-1, rgba(102,192,255,0.1));
  border-radius: 8px;
  padding: 14px 16px;
  border-left: 3px solid var(--line-2, #2a2a30);
}
body.theme-day .dna-card { background: #fafaf9; border-color: #e7e5e4; }
body.theme-jarvis .dna-card { background: rgba(8,18,36,0.85); }
.dna-card.bot-A { border-left-color: var(--acc, #818cf8); }
.dna-card.bot-B { border-left-color: var(--pos, #10b981); }
.dna-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--line-1, rgba(102,192,255,0.08));
}
.dna-name {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700; font-size: 16px;
  letter-spacing: -0.01em; color: var(--t-0, #fafafa);
}
body.theme-day .dna-name { color: #1f2937; }
.dna-status {
  display: inline-flex; gap: 6px; align-items: center;
}
.dna-pill {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600; font-size: 9px; letter-spacing: 0.06em;
  padding: 2px 7px; border-radius: 3px;
  border: 1px solid currentColor;
  text-transform: uppercase;
}
.dna-pill.engine-on { color: var(--pos, #10b981); }
.dna-pill.engine-off { color: var(--t-3, #71717a); }
.dna-pill.paused { color: var(--warn, #f59e0b); }
.dna-pill.inverse { color: #c4b5fd; }
.dna-pill.pump { color: var(--neg, #f43f5e); }
.dna-pill.live { color: var(--neg, #f43f5e); border-color: var(--neg, #f43f5e); background: rgba(244,63,94,0.08); }
.dna-pill.paper { color: var(--acc, #818cf8); border-color: var(--acc-border, rgba(129,140,248,0.32)); background: var(--acc-bg, rgba(129,140,248,0.10)); }
.dna-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.dna-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 5px 0; border-bottom: 1px solid var(--line-1, rgba(102,192,255,0.05));
  font-size: 12px;
}
.dna-row .k {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500; font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--t-3, #71717a);
  text-transform: uppercase;
}
.dna-row .v {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 500;
  color: var(--t-0, #fafafa);
}
body.theme-day .dna-row .v { color: #1f2937; }
.dna-row .v.diff { color: var(--warn, #f59e0b); font-weight: 600; }
.dna-row .v.up { color: var(--pos, #10b981); }
.dna-row .v.dn { color: var(--neg, #f43f5e); }
.dna-row .v.dim { color: var(--t-3, #71717a); }

/* v31: DNA expand/collapse */
.dna-extras {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.2s ease;
  opacity: 0;
  margin-top: 0;
}
.dna-extras.open {
  max-height: 600px;
  opacity: 1;
  margin-top: 6px;
}
.dna-toggle {
  margin-top: 10px;
  width: 100%;
  background: transparent;
  border: 1px dashed var(--line-2, #2a2a30);
  color: var(--t-2, #a1a1aa);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  padding: 7px 10px;
  border-radius: 5px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: all 0.12s;
}
.dna-toggle:hover {
  border-color: var(--acc, #818cf8);
  color: var(--acc, #818cf8);
  background: var(--acc-bg, rgba(129,140,248,0.08));
}

/* empty-state for inactive bot */
.dna-empty {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px 16px;
  border: 1px dashed var(--line-2, #2a2a30);
  border-radius: 8px;
  background: var(--bg-1, rgba(10,22,42,0.3));
}
.dna-empty .ttl {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600; font-size: 13px;
  color: var(--t-1, #d4d4d8);
}
.dna-empty .body {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--t-3, #71717a);
  line-height: 1.6;
}
.dna-empty code {
  background: var(--bg-3, #1c1c20);
  padding: 1px 5px; border-radius: 3px;
  color: var(--acc, #818cf8);
}

/* ═══════════════════════════════════════════════════════════════════
 *  v22: Hypothesis tracker
 * ═══════════════════════════════════════════════════════════════════ */
.hypothesis-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.hypothesis-grid.three { grid-template-columns: 1fr 1fr 1fr; }  /* v32 */
.hypothesis-grid.four { grid-template-columns: repeat(4, 1fr); }  /* v35 */
@media (max-width: 1400px) {
  .hypothesis-grid.four { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1100px) {
  .hypothesis-grid.three { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) { .hypothesis-grid, .hypothesis-grid.three, .hypothesis-grid.four { grid-template-columns: 1fr; } }
.hypothesis-card {
  background: var(--bg-2, rgba(5,15,28,0.5));
  border: 1px solid var(--line-1, rgba(102,192,255,0.1));
  border-left: 3px solid var(--line-2, #2a2a30);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 8px;
}
body.theme-day .hypothesis-card { background: #fafaf9; border-color: #e7e5e4; }
body.theme-jarvis .hypothesis-card { background: rgba(8,18,36,0.85); }
.hypothesis-card.bot-A { border-left-color: var(--acc, #818cf8); }
.hypothesis-card.bot-B { border-left-color: var(--pos, #10b981); }
.hypothesis-card.bot-C { border-left-color: #f59e0b; }
.hypothesis-card.bot-D { border-left-color: #ec4899; }
.hypothesis-card .lbl {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600; font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--t-3, #71717a);
  text-transform: uppercase;
}
.hypothesis-card .input {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  background: var(--bg-1, rgba(10,22,42,0.55));
  border: 1px solid var(--line-2, #2a2a30);
  border-radius: 5px;
  color: var(--t-0, #fafafa);
  padding: 9px 11px;
  resize: vertical;
  min-height: 56px;
  width: 100%;
  letter-spacing: 0;
  line-height: 1.5;
}
body.theme-day .hypothesis-card .input { background: #fff; color: #1f2937; }
.hypothesis-card .input:focus {
  outline: none;
  border-color: var(--acc, #818cf8);
  box-shadow: 0 0 0 3px var(--acc-bg, rgba(129,140,248,0.10));
}
.hypothesis-card .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--t-3, #71717a);
}

/* ═══════════════════════════════════════════════════════════════════
 *  v24: data-quality warning banner in bot compare panel
 * ═══════════════════════════════════════════════════════════════════ */
.data-quality-warn {
  background: var(--warn-bg, rgba(245,158,11,0.10));
  border: 1px solid rgba(245,158,11,0.32);
  color: var(--warn, #f59e0b);
  padding: 8px 12px;
  margin-bottom: 10px;
  border-radius: 5px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════════
 *  v22: Stat-significance badges in compare panel
 * ═══════════════════════════════════════════════════════════════════ */
.stat-sig {
  display: inline-flex; gap: 6px; align-items: baseline;
  margin-top: 8px; padding: 8px 10px;
  background: var(--bg-3, #1c1c20);
  border: 1px solid var(--line-2, #2a2a30);
  border-radius: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--t-2, #a1a1aa);
}
.stat-sig.sig-strong {
  border-color: var(--pos-border, rgba(16,185,129,0.32));
  background: var(--pos-bg, rgba(16,185,129,0.08));
  color: var(--pos, #10b981);
}
.stat-sig.sig-weak {
  border-color: rgba(245,158,11,0.32);
  background: var(--warn-bg, rgba(245,158,11,0.08));
  color: var(--warn, #f59e0b);
}
.stat-sig.sig-none {
  border-color: var(--line-2, #2a2a30);
  color: var(--t-3, #71717a);
}
.stat-sig .lbl {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600; font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
}
.stat-sig .v { color: inherit; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════
 *  v21: compare-only sections + A/B comparison panel
 * ═══════════════════════════════════════════════════════════════════ */
.compare-only { display: none !important; }
body.bot-compare .compare-only { display: grid !important; }

.botcomp-table {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 0.8fr;
  gap: 1px;
  background: var(--line-1, rgba(102,192,255,0.1));
  border: 1px solid var(--line-1, rgba(102,192,255,0.1));
  border-radius: 6px;
  overflow: hidden;
}
.botcomp-table.three-bot {  /* v32: 5-column (METRIC | A | B | C | WINNER) */
  grid-template-columns: 1.4fr 1fr 1fr 1fr 0.8fr;
}
.botcomp-table.four-bot {  /* v35: 6-column (METRIC | A | B | C | D | WINNER) */
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1fr 0.7fr;
}
.botcomp-row {
  display: contents;
}
.botcomp-row > div {
  background: var(--bg-2, rgba(5,15,28,0.5));
  padding: 10px 14px;
  display: flex;
  align-items: center;
  font-size: 13px;
}
body.theme-day .botcomp-row > div { background: #fafaf9; }
body.theme-jarvis .botcomp-row > div { background: rgba(8,18,36,0.85); }
.botcomp-row.head > div {
  background: var(--bg-3, rgba(2,8,16,0.7));
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-3, #71717a);
}
body.theme-day .botcomp-row.head > div { background: #f5f5f4; color: #6b7280; }
body.theme-jarvis .botcomp-row.head > div { background: rgba(2,8,16,0.92); color: var(--hud-cyan-soft); }
.botcomp-row .metric {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t-2, #a1a1aa);
}
.botcomp-row .v {
  font-family: 'JetBrains Mono', monospace;
  font-feature-settings: 'tnum';
  font-weight: 500;
  font-size: 13px;
  color: var(--t-0, #fafafa);
}
.botcomp-row .v.up { color: var(--pos, #10b981); }
.botcomp-row .v.dn { color: var(--neg, #f43f5e); }
.botcomp-row .winner {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--acc, #818cf8);
  text-transform: uppercase;
}
.botcomp-row .winner.tie { color: var(--t-3, #71717a); }
.botcomp-row.highlight-A .v[data-bot="A"] {
  background: rgba(129,140,248,0.10);
  border-radius: 3px;
  padding: 2px 6px;
  margin: -2px 0;
}
.botcomp-row.highlight-B .v[data-bot="B"] {
  background: rgba(16,185,129,0.10);
  border-radius: 3px;
  padding: 2px 6px;
  margin: -2px 0;
}
.botcomp-row.highlight-C .v[data-bot="C"] {
  background: rgba(245,158,11,0.12);
  border-radius: 3px;
  padding: 2px 6px;
  margin: -2px 0;
}
.botcomp-row.highlight-D .v[data-bot="D"] {
  background: rgba(236,72,153,0.12);
  border-radius: 3px;
  padding: 2px 6px;
  margin: -2px 0;
}

@media (max-width: 700px) {
  /* v31: 2-row layout on phone — metric label on top, A/B/winner on bottom row */
  .botcomp-table {
    grid-template-columns: 1fr 1fr 60px;
  }
  .botcomp-table.three-bot {  /* v32: phone fits A/B/C/winner in 4 cols */
    grid-template-columns: 1fr 1fr 1fr 50px;
  }
  .botcomp-table.four-bot {  /* v35: phone fits A/B/C/D in 4 cols + winner row drops */
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  .botcomp-table.four-bot .botcomp-row > div:last-child {
    grid-column: 1 / -1;
    text-align: right;
    font-size: 9px;
    color: var(--t-3, #71717a);
  }
  .botcomp-row {
    display: contents;
  }
  .botcomp-row.head { display: none; }  /* skip header row on phone */
  .botcomp-row > div:first-child {
    grid-column: 1 / -1;
    background: var(--bg-3, rgba(2,8,16,0.7));
    padding: 5px 10px;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--t-3, #71717a);
    border-bottom: 1px solid var(--line-1, rgba(102,192,255,0.10));
  }
  body.theme-day .botcomp-row > div:first-child {
    background: #f5f5f4;
    color: #6b7280;
  }
  body.theme-jarvis .botcomp-row > div:first-child {
    background: rgba(2,8,16,0.92);
  }
  .botcomp-row > div { padding: 8px 10px; font-size: 11px; }
  .botcomp-row .v { font-size: 12px; }
  .botcomp-row .winner { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════════
 *  v20: Hero zone COMPARE mode — split each metric into A row + B row
 * ═══════════════════════════════════════════════════════════════════ */
.hero-zone.compare-mode {
  grid-template-columns: repeat(4, 1fr);  /* drop the actions column */
}
.hero-stat.compare {
  gap: 2px;
}
.hero-stat.compare .hero-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.hero-bot-tag {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--t-3, #71717a);
  background: var(--bg-3, #1c1c20);
  border-radius: 3px;
  padding: 1px 5px;
  min-width: 16px;
  text-align: center;
}
/* v32+v35: per-bot tag colors */
.hero-bot-tag.tag-A { color: var(--acc, #818cf8); background: var(--acc-bg, rgba(129,140,248,0.16)); }
.hero-bot-tag.tag-B { color: var(--pos, #10b981); background: var(--pos-bg, rgba(16,185,129,0.14)); }
.hero-bot-tag.tag-C { color: #f59e0b; background: rgba(245,158,11,0.16); }
.hero-bot-tag.tag-D { color: #ec4899; background: rgba(236,72,153,0.16); }
body.theme-jarvis .hero-bot-tag {
  color: var(--hud-cyan-soft);
  background: rgba(255,119,51,0.18);
}
body.theme-day .hero-bot-tag {
  color: #1d4ed8;
  background: #dbeafe;
}
.hero-stat.compare .hero-val.small {
  font-size: 18px;
  letter-spacing: -0.01em;
}
.hero-stat.compare .hero-sub.small {
  font-size: 10px;
  margin-left: 24px;  /* align past the bot tag */
}

/* compact when phone */
@media (max-width: 700px) {
  .hero-zone.compare-mode { grid-template-columns: 1fr 1fr; }
  .hero-stat.compare .hero-val.small { font-size: 15px; }
}

/* ═══════════════════════════════════════════════════════════════════
 *  v19: Hero zone — large tabular metrics at top
 * ═══════════════════════════════════════════════════════════════════ */
.hero-zone {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 1px;
  background: var(--line-1);
  border: 1px solid var(--line-1);
  border-radius: 8px;
  margin-bottom: 14px;
  overflow: hidden;
}
body.theme-jarvis .hero-zone {
  background: rgba(255,119,51,0.4);
  border-color: rgba(255,119,51,0.55);
}
body.theme-stealth .hero-zone {
  background: #1f1f23;
  border-color: #1f1f23;
}
body.theme-day .hero-zone {
  background: #e7e5e4;
  border-color: #e7e5e4;
}
.hero-stat {
  background: var(--bg-1, rgba(10,22,42,0.55));
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
body.theme-jarvis .hero-stat { background: rgba(8,18,36,0.92); }
body.theme-day .hero-stat { background: #fff; }
.hero-stat .hero-lbl {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--t-3, #71717a);
  text-transform: uppercase;
  font-weight: 500;
}
body.theme-jarvis .hero-stat .hero-lbl { color: var(--hud-cyan-soft); }
body.theme-day .hero-stat .hero-lbl { color: #6b7280; }
.hero-stat .hero-val {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 26px;
  font-weight: 600;
  color: var(--t-0, #fafafa);
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum';
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.theme-jarvis .hero-stat .hero-val {
  color: var(--hud-copper-bright);
  text-shadow: var(--glow-copper);
}
body.theme-day .hero-stat .hero-val { color: #1f2937; }
.hero-stat .hero-val.up { color: var(--pos, #10b981); }
.hero-stat .hero-val.dn { color: var(--neg, #f43f5e); }
.hero-stat .hero-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--t-3, #71717a);
}
body.theme-day .hero-stat .hero-sub { color: #6b7280; }

.hero-actions {
  background: var(--bg-1, rgba(10,22,42,0.55));
  padding: 14px 18px;
  display: flex;
  gap: 8px;
  align-items: center;
}
body.theme-jarvis .hero-actions { background: rgba(8,18,36,0.92); }
body.theme-day .hero-actions { background: #fff; }
.hero-btn {
  background: transparent;
  border: 1px solid var(--line-2, #2a2a30);
  color: var(--t-1, #d4d4d8);
  padding: 10px 14px;
  font-family: inherit;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.12s;
  min-height: 36px;
}
.hero-btn:hover { background: var(--bg-2, #131316); color: var(--t-0, #fafafa); }
.hero-btn.danger {
  border-color: var(--neg-border, rgba(244,63,94,0.32));
  color: var(--neg, #f43f5e);
}
.hero-btn.danger:hover {
  background: var(--neg, #f43f5e);
  color: var(--bg-0, #09090b);
  border-color: var(--neg, #f43f5e);
}
.hero-btn.warn {
  border-color: rgba(245,158,11,0.32);
  color: var(--warn, #f59e0b);
}
.hero-btn.warn:hover {
  background: var(--warn, #f59e0b);
  color: var(--bg-0, #09090b);
}
.hero-btn.on {
  background: var(--acc-bg, rgba(129,140,248,0.12));
  border-color: var(--acc-border, rgba(129,140,248,0.32));
  color: var(--acc, #818cf8);
}

/* ═══════════════════════════════════════════════════════════════════
 *  v19: Top tab navigation
 * ═══════════════════════════════════════════════════════════════════ */
.top-nav {
  position: sticky;
  top: 8px;
  z-index: 50;
  background: var(--bg-1, rgba(10,22,42,0.55));
  border: 1px solid var(--line-1, rgba(102,192,255,0.18));
  border-radius: 8px;
  display: flex;
  padding: 4px;
  margin-bottom: 14px;
  gap: 2px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
body.theme-jarvis .top-nav {
  background: rgba(8,18,36,0.85);
  border-color: rgba(255,119,51,0.4);
}
body.theme-day .top-nav { background: rgba(255,255,255,0.95); border-color: #e7e5e4; }
.top-nav button {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--t-2, #a1a1aa);
  padding: 9px 12px;
  font-family: inherit;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 5px;
  cursor: pointer;
  min-height: 36px;
  transition: all 0.12s;
}
.top-nav button:hover {
  color: var(--t-0, #fafafa);
  background: var(--bg-2, #131316);
}
.top-nav button.on {
  color: var(--acc, #818cf8);
  background: var(--acc-bg, rgba(129,140,248,0.14));
  font-weight: 600;
}
body.theme-jarvis .top-nav button.on {
  color: var(--hud-copper-bright);
  background: rgba(255,119,51,0.15);
}
body.theme-day .top-nav button.on {
  color: #1d4ed8; background: #dbeafe;
}

/* hidden when not active tab */
[data-section] { transition: opacity 0.15s ease; }
[data-section].hide { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════
 *  v19: Mobile sticky action bar (FAB)
 *  Hidden on desktop. On phone replaces top-nav as primary nav.
 * ═══════════════════════════════════════════════════════════════════ */
.fab-bar {
  display: none;
}
@media (max-width: 700px) {
  .fab-bar {
    display: flex;
    position: fixed;
    bottom: 10px;
    left: 10px;
    right: 10px;
    z-index: 1000;
    background: rgba(13,13,16,0.92);
    border: 1px solid var(--line-2, #2a2a30);
    border-radius: 12px;
    padding: 6px;
    gap: 4px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  body.theme-jarvis .fab-bar {
    background: rgba(8,18,36,0.92);
    border-color: rgba(255,119,51,0.4);
  }
  body.theme-day .fab-bar {
    background: rgba(255,255,255,0.96);
    border-color: #cbd5e1;
    box-shadow: 0 12px 32px rgba(0,0,0,0.15);
  }
  .fab-bar button {
    flex: 1;
    min-height: 44px;
    background: transparent;
    border: none;
    color: var(--t-2, #a1a1aa);
    border-radius: 7px;
    font-family: inherit;
    font-weight: 600;
    font-size: 9px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.12s;
    padding: 4px 2px;
  }
  .fab-bar button.on {
    background: var(--acc-bg, rgba(129,140,248,0.14));
    color: var(--acc, #818cf8);
  }
  body.theme-jarvis .fab-bar button.on {
    color: var(--hud-copper-bright);
    background: rgba(255,119,51,0.18);
  }
  body.theme-day .fab-bar button.on { color: #1d4ed8; background: #dbeafe; }

  /* hide desktop top-nav on phone (FAB replaces it) */
  .top-nav { display: none; }

  /* push body content above FAB */
  body { padding-bottom: 90px !important; }
}

/* hero-zone mobile reflow — v31 compact mode */
@media (max-width: 700px) {
  .hero-zone {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 1px;
  }
  .hero-actions {
    grid-column: span 2;
    padding: 8px 10px;
    gap: 6px;
  }
  .hero-actions button { flex: 1; padding: 8px 10px; font-size: 11px; }
  .hero-stat { padding: 8px 12px; gap: 2px; }
  .hero-stat .hero-lbl { font-size: 9px; letter-spacing: 0.06em; }
  .hero-stat .hero-val { font-size: 18px; line-height: 1.1; }
  .hero-stat .hero-sub { font-size: 9.5px; line-height: 1.3; }
  /* compare-mode tighter too */
  .hero-stat.compare .hero-val.small { font-size: 13px; }
  .hero-stat.compare .hero-sub.small { font-size: 9px; margin-left: 22px; }
  .hero-bot-tag { font-size: 8px; padding: 1px 4px; min-width: 14px; }
}
@media (max-width: 480px) {
  .hero-zone { grid-template-columns: 1fr 1fr; }
  .hero-stat .hero-val { font-size: 16px; }
  .hero-stat .hero-sub { font-size: 9px; }
  .hero-actions { padding: 6px 8px; }
  .hero-actions button { padding: 7px 8px; font-size: 10px; min-height: 36px; }
}

/* ═══════ mobile premium tuning ═══════ */
@media (max-width: 700px) {
  body.theme-premium { padding: 12px 12px 80px; font-size: 13px; }
  body.theme-premium .hud-top {
    flex-direction: column; gap: 10px; padding: 12px 14px;
  }
  body.theme-premium .hud-top h1 {
    font-size: 14px;
    text-align: left;
  }
  body.theme-premium .panel { padding: 14px 14px 16px; border-radius: 8px; }
  body.theme-premium .panel h2 { font-size: 11px; padding-bottom: 10px; margin-bottom: 12px; }
  body.theme-premium .reactor { width: 160px; height: 160px; }
  body.theme-premium .reactor-core .val { font-size: 26px; }
  body.theme-premium .ribbon { border-radius: 8px; }
  body.theme-premium .ribbon .seg { padding: 8px 10px; }
  body.theme-premium .pos-row { padding: 10px 12px; }
  body.theme-premium .heat-cell { padding: 8px 10px; }
}

/* ═══════════════════════════════════════════════════════════════════
 *  v36: BOT C 專屬區塊 — TG signal feed + 訊號源分類
 * ═══════════════════════════════════════════════════════════════════ */
.c-only { display: none !important; }
body.bot-active-C .c-only { display: grid !important; }

#tgFeedPanel {
  max-height: 420px;
  overflow-y: auto;
  font-family: 'JetBrains Mono', monospace;
}
.tg-row {
  display: grid;
  grid-template-columns: 110px 60px 80px 60px 1fr;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line-1, rgba(102,192,255,0.06));
  font-size: 11px;
  align-items: baseline;
}
.tg-row .ts {
  color: var(--t-3, #71717a);
  font-size: 10px;
}
.tg-row .action {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  text-align: center;
}
.tg-row .sym {
  color: var(--t-1, #d4d4d8);
  font-weight: 600;
}
.tg-row .side {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.04em;
}
.tg-row .side.long  { color: var(--pos, #10b981); }
.tg-row .side.short { color: var(--neg, #f43f5e); }
.tg-row .reason {
  color: var(--t-2, #a1a1aa);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tg-row.tg-action-open .action {
  background: rgba(16,185,129,0.18);
  color: var(--pos, #10b981);
  border: 1px solid rgba(16,185,129,0.4);
}
.tg-row.tg-action-skip .action {
  background: rgba(113,113,122,0.10);
  color: var(--t-3, #71717a);
  border: 1px solid var(--line-2, #2a2a30);
}
.tg-row.tg-action-close .action,
.tg-row.tg-action-tp_hit .action,
.tg-row.tg-action-sl_hit .action {
  background: rgba(245,158,11,0.16);
  color: #f59e0b;
  border: 1px solid rgba(245,158,11,0.4);
}

#cAttributionPanel { font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.attr-src-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line-1, rgba(102,192,255,0.06));
  align-items: baseline;
}
.attr-src-name {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 11px;
  color: var(--t-1, #d4d4d8);
  letter-spacing: 0.04em;
}
.attr-src-meta {
  color: var(--t-3, #71717a);
  font-size: 10px;
}
.attr-src-pnl {
  font-weight: 700;
  font-feature-settings: 'tnum';
  font-size: 12px;
  text-align: right;
}
.attr-src-pnl.up { color: var(--pos, #10b981); }
.attr-src-pnl.dn { color: var(--neg, #f43f5e); }

@media (max-width: 700px) {
  .tg-row { grid-template-columns: 1fr 60px 60px; gap: 6px; padding: 6px 8px; }
  .tg-row .ts { grid-column: 1 / -1; }
  .tg-row .reason { grid-column: 1 / -1; font-size: 10px; }
}

/* ═══════════════════════════════════════════════════════════════════
 *  v33: deposit tag in EQUITY hero card
 * ═══════════════════════════════════════════════════════════════════ */
.deposit-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 0 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 600;
  color: #f59e0b;
  background: rgba(245,158,11,0.14);
  border: 1px solid rgba(245,158,11,0.32);
  border-radius: 3px;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}
/* v34: bot role tag — surfaces user-set role text alongside bot name */
.role-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--t-2, #a1a1aa);
  background: var(--bg-3, rgba(2,8,16,0.5));
  border: 1px solid var(--line-2, #2a2a30);
  border-radius: 4px;
  vertical-align: 1px;
}
.role-tag.inline { font-size: 9px; padding: 0 5px; }
/* v34d: 「今日歸零」timestamp tag in baseline editor card header */
.dz-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 500;
  color: var(--acc, #818cf8);
  background: rgba(129,140,248,0.12);
  border: 1px solid rgba(129,140,248,0.32);
  border-radius: 4px;
  letter-spacing: 0.02em;
  vertical-align: 1px;
}
body.bot-active-A .role-tag { color: var(--acc, #818cf8); border-color: rgba(129,140,248,0.32); background: rgba(129,140,248,0.10); }
body.bot-active-B .role-tag { color: var(--pos, #10b981); border-color: rgba(16,185,129,0.32); background: rgba(16,185,129,0.08); }
body.bot-active-C .role-tag { color: #f59e0b; border-color: rgba(245,158,11,0.32); background: rgba(245,158,11,0.10); }
body.bot-active-D .role-tag { color: #ec4899; border-color: rgba(236,72,153,0.32); background: rgba(236,72,153,0.10); }

/* ═══════════════════════════════════════════════════════════════════
 *  v33: per-bot capital baseline editor panel (CONTROL tab)
 * ═══════════════════════════════════════════════════════════════════ */
.baseline-panel {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.baseline-panel .bl-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--t-2, #a1a1aa);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line-1, rgba(102,192,255,0.10));
}
.bl-card {
  background: var(--bg-2, rgba(5,15,28,0.5));
  border: 1px solid var(--line-1, rgba(102,192,255,0.10));
  border-left: 4px solid var(--line-2, #2a2a30);
  border-radius: 8px;
  padding: 12px 14px;
}
.bl-card.bot-A { border-left-color: var(--acc, #818cf8); }
.bl-card.bot-B { border-left-color: var(--pos, #10b981); }
.bl-card.bot-C { border-left-color: #f59e0b; }
.bl-card.bot-D { border-left-color: #ec4899; }
.bl-card.target { box-shadow: 0 0 0 1px var(--acc-bg, rgba(129,140,248,0.18)); }
.bl-header {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 10px;
}
.bl-name {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 700; font-size: 12px;
  letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--t-1, #d4d4d8);
}
.bl-card.bot-A .bl-name { color: var(--acc, #818cf8); }
.bl-card.bot-B .bl-name { color: var(--pos, #10b981); }
.bl-card.bot-C .bl-name { color: #f59e0b; }
.bl-card.bot-D .bl-name { color: #ec4899; }
.bl-cap {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--t-2, #a1a1aa);
}
.bl-cap strong {
  color: var(--t-0, #fafafa);
  font-weight: 700;
}
.bl-rows { display: flex; flex-direction: column; gap: 6px; }
.bl-row {
  display: grid;
  grid-template-columns: 130px 110px 1fr auto auto auto;
  gap: 6px;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}
.bl-row .k {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600; font-size: 10px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--t-3, #71717a);
}
.bl-row .v {
  color: var(--t-1, #d4d4d8);
  font-feature-settings: 'tnum';
}
.bl-input {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  padding: 5px 8px;
  background: var(--bg-1, rgba(10,22,42,0.55));
  border: 1px solid var(--line-2, #2a2a30);
  border-radius: 4px;
  color: var(--t-0, #fafafa);
  width: 110px;
}
.bl-input.wide { width: 160px; }
body.theme-day .bl-input { background: #fff; color: #1f2937; }
.bl-input:focus {
  outline: none;
  border-color: var(--acc, #818cf8);
  box-shadow: 0 0 0 3px var(--acc-bg, rgba(129,140,248,0.10));
}
.dep-list {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dashed var(--line-2, #2a2a30);
}
.dep-row {
  display: grid;
  grid-template-columns: 100px 90px 1fr;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  padding: 2px 0;
  color: var(--t-3, #71717a);
}
.dep-row .ts { color: var(--t-3, #71717a); }
.dep-row .amt.up { color: var(--pos, #10b981); }
.dep-row .amt.dn { color: var(--neg, #f43f5e); }
.dep-row .note { color: var(--t-2, #a1a1aa); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 700px) {
  .bl-row {
    grid-template-columns: 1fr 1fr auto;
    grid-template-rows: auto auto;
  }
  .bl-row .k { grid-column: 1 / -1; }
  .bl-input { width: 100%; }
  .bl-input.wide { grid-column: 1 / -1; width: 100%; }
}


/* 2026-05-16: prevent trade row overlap */
body.theme-premium .trade-table .trade-row > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}
body.theme-premium .trade-table .trade-row .reason {
  font-size: 10px;
  color: var(--t-2);
}
/* HYPERROLL OPS-CONSOLE v23 POLISH layer.
 * Skeleton loaders, toast queue, color-blind markers, focus rings, help tooltips.
 * Loaded after premium.css; works across all themes.
 */

/* ════════════════════════════════════════════════════════════════════
 *  v23: Skeleton loading shimmer
 * ════════════════════════════════════════════════════════════════════ */
.skel {
  display: block;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.4s ease-in-out infinite;
  border-radius: 4px;
  height: 14px;
  margin-bottom: 8px;
}
body.theme-day .skel {
  background: linear-gradient(90deg,
    rgba(0,0,0,0.04) 0%,
    rgba(0,0,0,0.08) 50%,
    rgba(0,0,0,0.04) 100%);
  background-size: 200% 100%;
}
.skel.tall { height: 28px; }
.skel.short { height: 10px; }
.skel.title { height: 12px; width: 35%; margin-bottom: 14px; }
.skel.row { height: 36px; margin-bottom: 6px; border-radius: 6px; }
@keyframes skel-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
body.perf .skel { animation: none; opacity: 0.6; }

/* default skeleton blocks for unloaded panels */
.skel-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
}
.skel-stack { display: flex; flex-direction: column; gap: 6px; }

/* ════════════════════════════════════════════════════════════════════
 *  v23: Toast queue (top-right stack, replaces flashControl alert-banner)
 * ════════════════════════════════════════════════════════════════════ */
#toastWrap {
  position: fixed;
  top: 20px; right: 20px;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 360px;
}
.toast {
  pointer-events: auto;
  background: var(--bg-2, rgba(8,18,32,0.97));
  border: 1px solid var(--line-3, #3f3f46);
  border-radius: 8px;
  padding: 10px 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--t-0, #fafafa);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  animation: toast-in 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  border-left: 3px solid var(--acc, #818cf8);
  display: flex;
  align-items: baseline;
  gap: 8px;
  min-width: 200px;
}
.toast.ok {
  border-left-color: var(--pos, #10b981);
  background: var(--pos-bg, rgba(16,185,129,0.10));
  color: var(--pos, #10b981);
}
.toast.err {
  border-left-color: var(--neg, #f43f5e);
  background: var(--neg-bg, rgba(244,63,94,0.10));
  color: var(--neg, #f43f5e);
}
.toast.warn {
  border-left-color: var(--warn, #f59e0b);
  background: var(--warn-bg, rgba(245,158,11,0.10));
  color: var(--warn, #f59e0b);
}
.toast.fading { opacity: 0; transform: translateX(8px); transition: opacity 0.25s, transform 0.25s; }
.toast .glyph {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; opacity: 0.7;
}
body.theme-day .toast { background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,0.15); color: #1f2937; }
body.theme-day .toast.ok { background: #d1fae5; color: #065f46; }
body.theme-day .toast.err { background: #fee2e2; color: #991b1b; }

@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 700px) {
  #toastWrap { top: 70px; left: 12px; right: 12px; max-width: none; }
  .toast { width: 100%; }
  /* v31: declutter HUD on phone — these are accessible via ⌘K */
  .hud-top #theme-switch,
  .hud-top #perf-toggle {
    display: none !important;
  }
  /* keep ⌘K + lang + bot switcher only */
  .hud-top .right { gap: 4px !important; }
  .hud-top .stat-pill {
    font-size: 10px;
  }
  .hud-top .stat-pill .lbl { display: none; }  /* hide lbl, just show val */
}

/* ════════════════════════════════════════════════════════════════════
 *  v23: Color-blind markers — ▲ ▼ symbols on top of color
 *  Apply ONLY to specific contexts where direction is meaningful.
 * ════════════════════════════════════════════════════════════════════ */
.cb-marker.up::before { content: "▲ "; font-size: 0.85em; opacity: 0.7; }
.cb-marker.dn::before { content: "▼ "; font-size: 0.85em; opacity: 0.7; }
.hero-val.up::before { content: "▲ "; font-size: 0.65em; vertical-align: 4px; opacity: 0.55; margin-right: 1px; }
.hero-val.dn::before { content: "▼ "; font-size: 0.65em; vertical-align: 4px; opacity: 0.55; margin-right: 1px; }
.pos-row .upnl.up::before, .pos-row .roi.up::before,
.trade-card .pnl.up::before { content: "▲"; font-size: 0.7em; margin-right: 3px; opacity: 0.6; }
.pos-row .upnl.dn::before, .pos-row .roi.dn::before,
.trade-card .pnl.dn::before { content: "▼"; font-size: 0.7em; margin-right: 3px; opacity: 0.6; }
.botcomp-row .v.up::before { content: "▲ "; font-size: 0.7em; opacity: 0.5; }
.botcomp-row .v.dn::before { content: "▼ "; font-size: 0.7em; opacity: 0.5; }

/* ════════════════════════════════════════════════════════════════════
 *  v23: Focus rings — accessible keyboard navigation
 * ════════════════════════════════════════════════════════════════════ */
button:focus,
input:focus,
textarea:focus,
[tabindex]:focus,
.lang-toggle:focus,
.theme-switch button:focus,
.bot-switch button:focus,
.ctrl-btn:focus,
.hero-btn:focus,
.seg-tabs button:focus,
.cmdk-item:focus,
.flatten-btn:focus {
  outline: none;
}
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.lang-toggle:focus-visible,
.theme-switch button:focus-visible,
.bot-switch button:focus-visible,
.ctrl-btn:focus-visible,
.hero-btn:focus-visible,
.seg-tabs button:focus-visible,
.cmdk-item:focus-visible,
.flatten-btn:focus-visible {
  outline: 2px solid var(--acc, #818cf8);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--acc-bg, rgba(129,140,248,0.20));
}

/* ════════════════════════════════════════════════════════════════════
 *  v23: Help tooltip — small (?) icon next to metric labels
 * ════════════════════════════════════════════════════════════════════ */
.help {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 13px; height: 13px;
  border: 1px solid var(--t-3, #71717a);
  border-radius: 50%;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: var(--t-3, #71717a);
  cursor: help;
  margin-left: 5px;
  vertical-align: middle;
  transition: color 0.12s, border-color 0.12s;
  background: transparent;
  position: relative;
}
.help::before { content: "?"; line-height: 1; }
.help:hover {
  color: var(--acc, #818cf8);
  border-color: var(--acc, #818cf8);
}
.help[data-help]:hover::after {
  content: attr(data-help);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%; transform: translateX(-50%);
  background: var(--bg-3, #1c1c20);
  border: 1px solid var(--line-3, #3f3f46);
  color: var(--t-0, #fafafa);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  padding: 8px 12px;
  border-radius: 6px;
  white-space: pre-wrap;
  width: max-content;
  max-width: 280px;
  line-height: 1.5;
  z-index: 100;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  pointer-events: none;
}
body.theme-day .help[data-help]:hover::after {
  background: #fff;
  color: #1f2937;
  border-color: #cbd5e1;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* ════════════════════════════════════════════════════════════════════
 *  v27: equity-zoom reset button
 * ════════════════════════════════════════════════════════════════════ */
.eq-zoom-reset {
  display: none;
  margin-left: 6px;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--warn, #f59e0b);
  border-color: rgba(245,158,11,0.32);
  background: rgba(245,158,11,0.08);
}
.eq-zoom-reset.show { display: inline-flex; }
.eq-zoom-reset:hover {
  background: var(--warn, #f59e0b);
  color: var(--bg-0, #09090b);
}

canvas#eqCanvas {
  cursor: crosshair !important;
  /* v30: only allow vertical page scroll through canvas; intercept horizontal drag */
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  /* v31: ensure canvas never grows wider than its container */
  max-width: 100%;
  display: block;
}
#klineWrap canvas {
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
  max-width: 100%;
}
/* v31: defense — prevent any page-level horizontal scroll */
html, body { overflow-x: hidden !important; max-width: 100vw; }
.wrap { overflow-x: hidden; }

/* v31: iPhone safe-area-inset for FAB nav + chat bubble + chat panel */
@supports (padding: env(safe-area-inset-bottom)) {
  @media (max-width: 700px) {
    .fab-bar {
      bottom: max(10px, env(safe-area-inset-bottom)) !important;
      padding-bottom: env(safe-area-inset-bottom);
    }
    body {
      padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important;
    }
    #chat-fab {
      bottom: calc(80px + env(safe-area-inset-bottom)) !important;
    }
    #chat-panel {
      bottom: calc(144px + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* ════════════════════════════════════════════════════════════════════
 *  v23: prefers-reduced-motion — respect user setting
 * ════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .skel { animation: none; opacity: 0.5; }
  .horizon, .horizon-grid { display: none !important; }
  .pulse-dot { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
 *  v23: Print stylesheet — Ctrl+P produces clean PDF report
 * ════════════════════════════════════════════════════════════════════ */
@media print {
  body { background: #fff !important; color: #000 !important; padding: 12px !important; font-size: 10pt; }
  body::before, body::after { display: none !important; }
  .horizon, .horizon-grid, .top-nav, .fab-bar,
  #cmdk-root, #impact-root, #toastWrap, #err-console,
  .hero-actions, .seg-tabs, .csv-btn, .flatten-btn,
  .ctrl-btn, .lang-toggle, .theme-switch, .bot-switch,
  .help { display: none !important; }
  .panel {
    background: #fff !important;
    border: 1px solid #e7e5e4 !important;
    box-shadow: none !important;
    padding: 12px !important;
    page-break-inside: avoid;
    clip-path: none !important;
  }
  .panel h2 { color: #1f2937 !important; border-color: #e7e5e4 !important; }
  .hero-zone {
    border: 1px solid #e7e5e4 !important;
    background: #fff !important;
    page-break-inside: avoid;
  }
  .hero-stat {
    background: #fff !important;
    border: none !important;
  }
  .hero-stat .hero-val { color: #1f2937 !important; }
  .grid { gap: 8px !important; }
  [data-section].hide { display: grid !important; }
  .compare-only { display: none !important; }
  /* hide canvases (charts don't print well) — replace with caption */
  canvas { display: none !important; }
  .panel canvas + .print-only,
  .print-only { display: block !important; font-style: italic; color: #6b7280; }
}

/* ════════════════════════════════════════════════════════════════════
 *  v23: subtle hover lift on cards (premium feel)
 * ════════════════════════════════════════════════════════════════════ */
@media (hover: hover) {
  body.theme-premium .panel { transition: border-color 0.15s ease, transform 0.2s ease; }
  body.theme-premium .panel:hover { border-color: var(--line-2); transform: translateY(-1px); }
  body.theme-premium .trade-card { transition: border-color 0.12s, background 0.12s, transform 0.18s ease; }
  body.theme-premium .trade-card:hover { transform: translateY(-2px); }
  body.theme-premium .heat-cell { transition: border-color 0.12s, transform 0.18s ease; }
  body.theme-premium .heat-cell:hover { transform: translateY(-1px); }
}
/* HYPERROLL chat panel — v26 MVP */

#chat-fab {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 8500;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--acc, #818cf8);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4), 0 0 0 1px rgba(129,140,248,0.4);
  transition: transform 0.18s, background 0.15s, box-shadow 0.18s;
}
#chat-fab:hover {
  transform: scale(1.06);
  background: var(--acc-strong, #6366f1);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 0 4px var(--acc-bg, rgba(129,140,248,0.18));
}
#chat-fab.open { transform: rotate(45deg) scale(0.9); opacity: 0.6; }
#chat-fab .badge-dot {
  position: absolute; top: 4px; right: 4px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--pos, #10b981);
  border: 2px solid var(--bg-0, #09090b);
  display: none;
}
#chat-fab.has-new .badge-dot { display: block; }

body.theme-jarvis #chat-fab {
  background: var(--hud-copper, #ff7733);
  box-shadow: 0 8px 24px rgba(0,0,0,0.5), var(--glow-copper);
}
body.theme-day #chat-fab {
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

#chat-panel {
  position: fixed;
  bottom: 92px; right: 24px;
  z-index: 8600;
  width: 420px;
  height: 580px;
  max-height: calc(100vh - 120px);
  background: var(--bg-1, rgba(13,13,16,0.98));
  border: 1px solid var(--line-2, #2a2a30);
  border-radius: 14px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.7);
  display: none;
  flex-direction: column;
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#chat-panel.open {
  display: flex;
  animation: chat-slide-in 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes chat-slide-in {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

body.theme-day #chat-panel {
  background: rgba(255,255,255,0.98);
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}
body.theme-jarvis #chat-panel {
  background: rgba(8,18,36,0.96);
  border-color: rgba(255,119,51,0.4);
}

.chat-header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line-1, #1f1f23);
}
.chat-header .avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--acc, #818cf8);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0;
}
.chat-header .title {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600; font-size: 13px;
  color: var(--t-0, #fafafa);
  flex: 1;
}
body.theme-day .chat-header .title { color: #1f2937; }
.chat-header .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--t-3, #71717a);
}
.chat-header .stub-tag {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid var(--warn, #f59e0b);
  background: var(--warn-bg, rgba(245,158,11,0.10));
  color: var(--warn, #f59e0b);
}
.chat-header .stub-tag.live {
  border-color: var(--pos, #10b981);
  background: var(--pos-bg, rgba(16,185,129,0.10));
  color: var(--pos, #10b981);
}
.chat-header button {
  background: transparent;
  border: none;
  color: var(--t-2, #a1a1aa);
  cursor: pointer;
  width: 28px; height: 28px;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  transition: background 0.12s, color 0.12s;
}
.chat-header button:hover { background: var(--bg-3, #1c1c20); color: var(--t-0, #fafafa); }

.chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex; flex-direction: column; gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: var(--line-3, #3f3f46) transparent;
}
.chat-empty {
  color: var(--t-3, #71717a);
  font-size: 12px;
  text-align: center;
  padding: 40px 20px;
  font-style: italic;
  line-height: 1.6;
}

.chat-msg {
  display: flex; flex-direction: column; gap: 4px;
  max-width: 95%;
  font-family: 'Inter', system-ui, sans-serif;
}
.chat-msg.user { align-self: flex-end; align-items: flex-end; }
.chat-msg.assistant { align-self: flex-start; }
.chat-msg-head {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--t-3, #71717a);
}
.chat-msg.user .chat-msg-head { color: var(--acc, #818cf8); }
.chat-msg-body {
  font-size: 13px;
  line-height: 1.55;
  color: var(--t-0, #fafafa);
  background: var(--bg-2, #131316);
  border: 1px solid var(--line-1, #1f1f23);
  border-radius: 10px;
  padding: 10px 13px;
  word-wrap: break-word;
  word-break: break-word;
}
body.theme-day .chat-msg-body {
  color: #1f2937;
  background: #f9fafb;
  border-color: #e7e5e4;
}
.chat-msg.user .chat-msg-body {
  background: var(--acc-bg, rgba(129,140,248,0.12));
  border-color: var(--acc-border, rgba(129,140,248,0.32));
}
.chat-msg.assistant.typing .chat-msg-body {
  color: var(--t-3, #71717a);
  font-style: italic;
}
.chat-msg-body strong { font-weight: 700; color: var(--t-0, #fafafa); }
body.theme-day .chat-msg-body strong { color: #1f2937; }
.chat-msg-body code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  background: var(--bg-3, #1c1c20);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--acc, #818cf8);
}
body.theme-day .chat-msg-body code { background: #e5e7eb; }
.chat-msg-body pre {
  background: var(--bg-3, #1c1c20);
  border: 1px solid var(--line-1, #1f1f23);
  border-radius: 6px;
  padding: 8px 10px;
  margin: 6px 0;
  overflow-x: auto;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}
.chat-msg-body ul {
  margin: 4px 0; padding-left: 18px;
}
.chat-msg-body li { margin: 2px 0; }
.chat-msg-body table {
  border-collapse: collapse;
  margin: 6px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}
.chat-msg-body th, .chat-msg-body td {
  border: 1px solid var(--line-2, #2a2a30);
  padding: 4px 8px;
  text-align: left;
}
.chat-msg-body th {
  background: var(--bg-3, #1c1c20);
  color: var(--t-2, #a1a1aa);
  font-weight: 600;
}
.chat-msg.assistant .chat-msg-stub-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  margin-left: 6px;
  border-radius: 3px;
  background: var(--warn-bg, rgba(245,158,11,0.12));
  color: var(--warn, #f59e0b);
  border: 1px solid var(--warn, #f59e0b);
  text-transform: uppercase;
}

.chat-suggestions {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 0 16px 8px;
}
.chat-suggestions button {
  background: var(--bg-2, #131316);
  border: 1px solid var(--line-2, #2a2a30);
  color: var(--t-1, #d4d4d8);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.12s;
}
.chat-suggestions button:hover {
  border-color: var(--acc, #818cf8);
  color: var(--acc, #818cf8);
  background: var(--acc-bg, rgba(129,140,248,0.10));
}

.chat-input-row {
  display: flex; gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--line-1, #1f1f23);
  background: var(--bg-1, rgba(13,13,16,0.95));
}
#chat-input {
  flex: 1;
  background: var(--bg-2, #131316);
  border: 1px solid var(--line-2, #2a2a30);
  border-radius: 8px;
  padding: 9px 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: var(--t-0, #fafafa);
  resize: none;
  min-height: 38px;
  max-height: 120px;
  line-height: 1.4;
  letter-spacing: 0;
}
body.theme-day #chat-input { background: #fff; color: #1f2937; }
#chat-input:focus {
  outline: none;
  border-color: var(--acc, #818cf8);
  box-shadow: 0 0 0 3px var(--acc-bg, rgba(129,140,248,0.15));
}
#chat-send {
  background: var(--acc, #818cf8);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0 14px;
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  transition: background 0.12s, transform 0.12s;
}
#chat-send:hover { background: var(--acc-strong, #6366f1); transform: scale(1.03); }
#chat-send:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

@media (max-width: 700px) {
  #chat-fab {
    bottom: 80px; right: 14px;  /* avoid FAB nav at bottom */
    width: 48px; height: 48px;
  }
  #chat-panel {
    bottom: 144px; left: 12px; right: 12px;
    width: auto; height: calc(100vh - 200px);
  }
}

@media (max-width: 480px) {
  #chat-panel { height: calc(100vh - 180px); border-radius: 10px; }
}

/* prefers-reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  #chat-panel.open { animation: none; }
  #chat-fab { transition: none; }
}