/* ─────────────────────────────────────────────────────────────────
   VOREX TERMINAL — supersystem styles
   Dark, mono-first, hyperliquid-restrained palette
   ───────────────────────────────────────────────────────────────── */

:root {
  --bg: #08090B;
  --bg-1: #0D0F12;
  --bg-2: #12151A;
  --bg-3: #181B22;
  --edge: rgba(255,255,255,0.06);
  --edge-2: rgba(255,255,255,0.10);
  --ink: #E6E8EC;
  --ink-2: #B7BCC6;
  --ink-3: #9aa3b2;
  --dim: #5b6470;
  --long: #16C784;
  --short: #EA3943;
  --info: #4F8DFD;
  --warn: #E6B83C;
  --pairs: #B884F2;
}

* { box-sizing: border-box; }
html, body { background: var(--bg); color: var(--ink); }
body {
  font-family: var(--font-body);
  font-size: 13px;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── TOPBAR ────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  height: 38px; padding: 0 14px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--edge);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
}
.brand-wm { display: flex; align-items: center; gap: 8px; padding-right: 4px; }
.brand-wm .brand-mark { width: 28px; height: 28px; display: block; flex-shrink: 0; object-fit: contain; }
.brand-wm .wm { font-family: var(--font-wordmark); font-style: italic; font-size: 22px; color: var(--ink); letter-spacing: -0.01em; line-height: 1; }
.brand-wm .sub { font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); letter-spacing: 0.16em; align-self: flex-end; padding-bottom: 2px; }
.topbar .sep { color: var(--dim); }
.topbar .live {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--short); box-shadow: 0 0 6px var(--short);
  animation: pulse 1.6s ease-in-out infinite;
}
.topbar .lab { color: var(--short); font-weight: 700; letter-spacing: 0.12em; }
.topbar .mono.small { font-size: 10px; color: var(--ink-3); }
.tb-tickers { display: flex; align-items: center; gap: 10px; margin-left: auto; flex: 1 1 auto; min-width: 0; overflow: hidden; mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
.tk { display: inline-flex; align-items: baseline; gap: 6px; flex-shrink: 0; }
.tk > span:first-child { color: var(--ink-3); font-size: 10px; letter-spacing: 0.10em; }
.tk b { color: var(--ink); font-weight: 600; font-size: 11px; }
.tk .l { color: var(--long); font-size: 10px; }
.tk .s { color: var(--short); font-size: 10px; }
.tb-right { display: flex; align-items: center; gap: 6px; padding-left: 14px; border-left: 1px solid var(--edge); margin-left: 8px; flex-shrink: 0; }
.tb-btn[data-vx-profile] { background: linear-gradient(135deg, #4F8DFD 0%, #9b6cf2 100%); color: #fff; font-weight: 700; border-color: transparent; }
.tb-btn[data-vx-profile]:hover { filter: brightness(1.1); }
.tb-btn {
  background: var(--bg-2);
  border: 1px solid var(--edge);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  padding: 5px 9px;
  display: inline-flex; gap: 6px; align-items: center;
  cursor: pointer;
  border-radius: 2px;
}
.tb-btn:hover { color: var(--ink); border-color: var(--edge-2); }
.tb-btn.alerts { color: var(--short); }
.tb-btn .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--short); }
.s-dot { background: var(--short); }
.l-dot { background: var(--long); box-shadow: 0 0 4px var(--long); }

@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ── SHELL ─────────────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: 196px 1fr; min-height: calc(100vh - 38px); }

/* ── LEFT RAIL ─────────────────────────────────────────────────── */
.rail {
  background: var(--bg-1);
  border-right: 1px solid var(--edge);
  padding: 14px 8px 14px;
  display: flex; flex-direction: column;
  gap: 18px;
  position: sticky; top: 38px;
  height: calc(100vh - 38px);
  overflow-y: auto;
}
.rail-section { display: flex; flex-direction: column; gap: 2px; }
.rail-h {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.20em;
  color: var(--dim);
  padding: 4px 8px 6px;
}
.rail-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
  cursor: pointer;
  border-radius: 2px;
  border: 1px solid transparent;
  text-decoration: none;
  position: relative;
}
.rail-btn:hover { background: var(--bg-2); color: var(--ink); }
.rail-btn.active { background: var(--bg-2); color: var(--ink); border-color: var(--edge-2); }
.rail-btn.active::before { content: ''; position: absolute; left: -8px; top: 25%; bottom: 25%; width: 2px; background: var(--long); }
.rail-btn .ico { width: 14px; text-align: center; color: var(--ink-3); font-size: 12px; }
.rail-btn.active .ico { color: var(--long); }
.rail-btn .lbl { flex: 1; font-weight: 500; }
.rail-btn .kbd {
  font-size: 9px; color: var(--dim);
  padding: 1px 5px; border: 1px solid var(--edge);
  border-radius: 2px;
}
.rail-btn .bdg {
  font-size: 9px; padding: 1px 5px; border-radius: 2px;
  background: var(--info); color: #fff; letter-spacing: 0.08em;
}
.rail-btn .bdg.long { background: var(--long); }
.rail-btn .bdg.short { background: var(--short); }
.rail-foot { margin-top: auto; padding: 10px 8px 0; border-top: 1px solid var(--edge); }
.rail-status { display: flex; gap: 8px; align-items: center; }
.rail-status .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.rail-status b { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--ink); letter-spacing: 0.06em; }
.rail-status span { font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); }

/* ── MAIN ──────────────────────────────────────────────────────── */
.content { padding: 18px 22px 60px; min-width: 0; }

/* ── VIEW HEADER ───────────────────────────────────────────────── */
.vh { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid var(--edge); }
.vh-l { display: flex; flex-direction: column; gap: 4px; }
.vh-num { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.20em; color: var(--ink-3); }
.vh-title { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 38px; line-height: 1; color: var(--ink); letter-spacing: -0.01em; }
.vh-cursor { color: var(--long); font-style: normal; font-family: var(--font-mono); font-weight: 300; animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.vh-sub { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; }
.vh-r { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.vh-r .sep { color: var(--dim); padding: 0 4px; }

/* ── CHIPS / BUTTONS ───────────────────────────────────────────── */
.t-chip {
  background: transparent;
  border: 1px solid var(--edge);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 5px 9px;
  cursor: pointer;
  border-radius: 2px;
  display: inline-flex; align-items: center; gap: 5px;
}
.t-chip:hover { color: var(--ink); border-color: var(--edge-2); background: var(--bg-2); }
.t-chip.active { background: var(--bg-3); color: var(--ink); border-color: var(--edge-2); }
.t-chip.add { color: var(--ink-3); border-style: dashed; }
.t-btn {
  background: var(--bg-2); border: 1px solid var(--edge-2);
  color: var(--ink); font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 0.10em;
  padding: 7px 12px; border-radius: 2px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
}
.t-btn:hover { background: var(--bg-3); }
.t-btn-long { background: var(--long); color: #001b10; border-color: var(--long); font-weight: 700; }
.t-btn-long:hover { background: #1ad994; }
.t-btn-short { background: var(--short); color: #fff; border-color: var(--short); font-weight: 700; }
.t-btn-short:hover { background: #f04553; }

/* ── PILLS ─────────────────────────────────────────────────────── */
.t-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.10em;
  padding: 2px 6px; border-radius: 2px;
  border: 1px solid var(--edge);
  background: var(--bg-2); color: var(--ink-2);
}
.t-pill.lg { font-size: 11px; padding: 4px 9px; letter-spacing: 0.12em; font-weight: 700; }
.t-pill-long { background: rgba(22,199,132,0.12); color: var(--long); border-color: rgba(22,199,132,0.30); }
.t-pill-short { background: rgba(234,57,67,0.12); color: var(--short); border-color: rgba(234,57,67,0.30); }
.t-pill-info { background: rgba(79,141,253,0.12); color: var(--info); border-color: rgba(79,141,253,0.30); }
.t-pill-warn { background: rgba(230,184,60,0.12); color: var(--warn); border-color: rgba(230,184,60,0.30); }

/* ── LABELS / NUMS ─────────────────────────────────────────────── */
.t-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.18em; color: var(--ink-3); display: block; margin-bottom: 4px; }
.t-faint { color: var(--ink-3); }
.t-dim { color: var(--dim); }
.long { color: var(--long); }
.short { color: var(--short); }
.warn { color: var(--warn); }
.info { color: var(--info); }
.mono { font-family: var(--font-mono); }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.small { font-size: 10px; }

/* ── PANELS ────────────────────────────────────────────────────── */
.t-panel {
  background: var(--bg-1);
  border: 1px solid var(--edge);
  border-radius: 3px;
  display: flex; flex-direction: column;
  min-width: 0;
}
.t-panel-h {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--edge);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.t-panel-h.flat { border-bottom: 1px solid var(--edge); }
.t-panel-h .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--long); box-shadow: 0 0 4px var(--long); }
.t-panel-h .ttl { color: var(--ink); font-weight: 700; letter-spacing: 0.18em; }
.t-panel-h .acc { color: var(--ink-3); }
.t-panel-h .right { margin-left: auto; }
.t-panel-body { padding: 14px; }

/* ── GRID ──────────────────────────────────────────────────────── */
.grid-12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; margin-bottom: 16px; }
.g-col-1 { grid-column: span 1; }
.g-col-2 { grid-column: span 2; }
.g-col-3 { grid-column: span 3; }
.g-col-4 { grid-column: span 4; }
.g-col-5 { grid-column: span 5; }
.g-col-6 { grid-column: span 6; }
.g-col-7 { grid-column: span 7; }
.g-col-8 { grid-column: span 8; }
.g-col-9 { grid-column: span 9; }
.g-col-10 { grid-column: span 10; }
.g-col-11 { grid-column: span 11; }
.g-col-12 { grid-column: 1 / -1; }
.stack { display: flex; flex-direction: column; gap: 16px; }

/* ── HOME · BRIEF ──────────────────────────────────────────────── */
.brief-panel { padding: 0; }
.brief-body { padding: 18px 20px 20px; }
.brief-eyebrow { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--ink-3); margin: 0 0 10px; }
.brief-eyebrow .acc { color: var(--long); font-weight: 700; }
.brief-h { font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 28px; line-height: 1.2; color: var(--ink); margin: 0 0 14px; letter-spacing: -0.005em; }
.brief-hl { background: linear-gradient(180deg, transparent 60%, rgba(22,199,132,0.30) 60%); padding: 0 4px; }
.brief-lede { color: var(--ink-2); font-size: 13px; line-height: 1.65; margin: 0 0 14px; max-width: 60ch; }
.brief-bullets { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 10px; }
.brief-bullets li { display: flex; gap: 12px; padding: 10px 12px; border: 1px solid var(--edge); border-radius: 2px; background: var(--bg-2); }
.brief-bullets .n { font-family: var(--font-mono); font-size: 10px; color: var(--long); font-weight: 700; letter-spacing: 0.10em; }
.brief-bullets b { display: block; font-size: 12px; color: var(--ink); margin-bottom: 2px; }
.brief-bullets span { display: block; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); line-height: 1.5; }
.brief-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ── ACCOUNT/PNL ───────────────────────────────────────────────── */
.pnl-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 16px; align-items: end; padding-bottom: 14px; border-bottom: 1px solid var(--edge); }
.big-num { font-family: var(--font-mono); font-size: 28px; font-weight: 600; color: var(--ink); letter-spacing: -0.01em; line-height: 1.05; }
.big-cents { font-size: 16px; color: var(--ink-3); }
.num-row { display: flex; gap: 6px; align-items: baseline; margin-top: 4px; font-family: var(--font-mono); font-size: 11px; }
.pnl-spark { display: flex; flex-direction: column; align-items: stretch; }
.pnl-spark svg { width: 100%; height: 56px; }
.spark-lab { text-align: right; padding-top: 4px; color: var(--long); }
.pnl-mini { padding-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 14px; }
.pnl-mini > div { display: flex; flex-direction: column; gap: 2px; }
.pnl-mini b { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }

/* system grid */
.sys-grid { padding: 14px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 14px; }
.sys-grid > div { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; }
.sys-grid > div span:last-child { color: var(--ink); font-weight: 600; }

/* ── FORWARD PERFORMANCE PANEL ─────────────────────────────────── */
/* Right-column stack stretches to morning-brief height; FP panel grows to fill,
   breakdown table scrolls if it would overflow. Bottom edges always align. */
.g-col-5.stack { height: 100%; min-height: 0; }
.g-col-5.stack > .fperf-panel { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.fperf-panel .t-chip.is-active { background: var(--ink); color: var(--bg-0); border-color: var(--ink); }
/* 2-col grid: metric pairs side-by-side, rolling-R spans full width */
.fperf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; flex-shrink: 0; }
.fperf-box { padding: 10px 14px; border-right: 1px solid var(--edge); border-bottom: 1px solid var(--edge); display: flex; flex-direction: column; gap: 3px; min-height: 56px; }
.fperf-box:nth-child(2n) { border-right: none; }
.fperf-wide { grid-column: 1 / -1; border-right: none; }
.fperf-big { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; line-height: 1.1; }
.fperf-big.long { color: var(--long); }
.fperf-big.short { color: var(--short); }
.fperf-mini { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: 0.02em; line-height: 1.2; }
.fperf-sub { font-size: 9px; letter-spacing: 0.04em; }
.fperf-curve { gap: 2px; }
.fperf-spark { width: 100%; height: 22px; display: block; }
.fperf-breakdown { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; overflow: hidden; }
.fperf-bk-h { padding: 7px 14px 6px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; border-bottom: 1px solid var(--edge); background: var(--bg-2); flex-shrink: 0; }
.fperf-bk-h .t-faint.small { font-size: 9px; }
.fperf-bk-scroll { flex: 1 1 0; min-height: 0; overflow-y: auto; }
.fperf-table { font-size: 10.5px; }
.fperf-table th, .fperf-table td { padding: 5px 14px; }
.fperf-table td:first-child { color: var(--ink); font-weight: 600; letter-spacing: 0.04em; }
.fperf-table td.fperf-pos { color: var(--long); }
.fperf-table td.fperf-neg { color: var(--short); }

/* ── KPI STRIP ─────────────────────────────────────────────────── */
.kpi-strip { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0; margin-bottom: 16px; border: 1px solid var(--edge); border-radius: 3px; background: var(--bg-1); }
.kpi-strip.lg { margin-top: 0; }
.kpi { padding: 12px 14px; border-right: 1px solid var(--edge); display: flex; flex-direction: column; gap: 4px; }
.kpi:last-child { border-right: none; }
.kpi-v { font-family: var(--font-mono); font-size: 16px; font-weight: 600; color: var(--ink); }
.kpi .mono { font-size: 10px; letter-spacing: 0.06em; }
.kpi-strip.lg .kpi-v { font-size: 18px; }

/* ── TABLES ────────────────────────────────────────────────────── */
.t-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11px; }
.t-table th { font-weight: 500; font-size: 9px; letter-spacing: 0.14em; color: var(--ink-3); text-align: left; padding: 9px 14px; border-bottom: 1px solid var(--edge); background: var(--bg-2); }
.t-table th.num, .t-table td.num { text-align: right; }
.t-table td { padding: 8px 14px; border-bottom: 1px solid var(--edge); color: var(--ink-2); }
.t-table tbody tr:hover { background: var(--bg-2); }
.t-table tbody tr:last-child td { border-bottom: none; }
.ledger-when { white-space: nowrap; color: var(--ink-3); }
.t-table.compact th, .t-table.compact td { padding: 6px 12px; }
.watch-table tbody tr td:first-child b { color: var(--ink); }
.mini-spark { width: 60px; height: 18px; }

/* ── SIGNAL LIST (small) ───────────────────────────────────────── */
.signal-list { display: flex; flex-direction: column; }
.signal-row { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px 11px; border-bottom: 1px solid var(--edge); }
.signal-row:last-child { border-bottom: none; }
.signal-row.long { border-left: 2px solid var(--long); }
.signal-row.short { border-left: 2px solid var(--short); }
.signal-row.pairs { border-left: 2px solid var(--pairs); }

/* Header row: pill · pair · style/tf · conviction (right-aligned) */
.sig-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sig-pair { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: 0.04em; flex-shrink: 0; }
.sig-style { font-size: 10px; letter-spacing: 0.08em; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sig-top .conv-num { margin-left: auto; }

/* Conviction big number — used in row header AND in the legacy stacked block */
.conv-num { font-family: var(--font-mono); font-size: 20px; font-weight: 700; color: var(--long); line-height: 1; flex-shrink: 0; }
.conv-num.med { color: var(--warn); }
.conv-num.xl { font-size: 38px; }
.conv-num.xxl { font-size: 56px; text-align: center; }

/* Progress bar sits under the header, full-width */
.t-track { width: 100%; height: 3px; background: var(--bg-3); border-radius: 1px; overflow: hidden; }
.t-track .fill { height: 100%; background: var(--long); }
.t-track .fill.med { background: var(--warn); }
.t-track .fill.lo { background: var(--short); }
.t-track.lg { height: 6px; }

/* Bottom row: 3 evenly-laid-out level cells (ENTRY / TP / SL) */
.sig-levels { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 14px; padding-top: 2px; }
.sig-levels > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sig-levels .t-label { font-size: 9px; letter-spacing: 0.12em; }
.sig-levels b { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sig-levels b.long { color: var(--long); }
.sig-levels b.short { color: var(--short); }

/* Legacy classes — kept so any other view using sig-l/sig-conv/sig-r still renders */
.sig-l { display: flex; flex-direction: column; gap: 4px; }
.sig-conv { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.sig-r { display: grid; grid-template-columns: auto auto; gap: 4px 12px; align-items: baseline; font-size: 11px; }
.sig-r .small { font-size: 9px; }

/* ── SIGNAL CARDS (large) ──────────────────────────────────────── */
.signal-list.lg .signal-card {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1.6fr;
  gap: 18px;
  padding: 18px;
  border-bottom: 1px solid var(--edge);
  align-items: center;
}
.signal-list.lg .signal-card:last-child { border-bottom: none; }
.signal-card.long { border-left: 3px solid var(--long); }
.signal-card.short { border-left: 3px solid var(--short); }
.sc-l { display: flex; flex-direction: column; gap: 12px; }
.sc-side { display: flex; gap: 6px; }
.sc-pair { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: 0.04em; }
.sc-pair .sc-tf { font-size: 11px; color: var(--ink-3); margin-left: 8px; font-weight: 400; }
.sc-conv-block { display: flex; flex-direction: column; gap: 6px; }
.sc-conv-foot { font-size: 9px; letter-spacing: 0.10em; }
.sc-mid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }
.lvl { display: flex; flex-direction: column; gap: 2px; }
.lvl b { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.sc-r { display: flex; flex-direction: column; gap: 10px; }
.sc-chart { width: 100%; height: 80px; }
.sc-actions { display: flex; gap: 6px; }
.sc-foot { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 10px; align-items: baseline; }
.sc-foot b { font-family: var(--font-mono); color: var(--ink); }

/* ── NEWS LIST ─────────────────────────────────────────────────── */
.news-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.news-item { display: grid; grid-template-columns: 60px 50px 1fr; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--edge); align-items: flex-start; }
.news-item:last-child { border-bottom: none; }
.news-item .t { color: var(--ink-3); font-size: 10px; padding-top: 2px; }
.news-item .imp { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--edge); height: fit-content; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.news-item .imp.h { background: rgba(234,57,67,0.18); color: var(--short); border-color: rgba(234,57,67,0.45); }
.news-item .imp.m { background: rgba(230,184,60,0.18); color: var(--warn);  border-color: rgba(230,184,60,0.45); }
.news-item .imp.l { background: rgba(22,199,132,0.18); color: var(--long);  border-color: rgba(22,199,132,0.45); }
.news-item p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--ink); }
.news-item .news-impact { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); margin-top: 4px; display: block; line-height: 1.5; }
.news-list.compact .news-item { padding: 8px 12px; grid-template-columns: 50px 40px 1fr; }
.news-list.compact .news-item p { font-size: 11px; }

/* big news (war room) */
.news-list.lg .news-item { padding: 14px 16px; grid-template-columns: 70px 50px 1fr; }
.news-list.lg .news-body { display: flex; flex-direction: column; gap: 6px; }
.news-list.lg .news-head { display: flex; gap: 8px; align-items: center; }
.news-tag { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.10em; padding: 2px 6px; border-radius: 2px; background: var(--bg-2); color: var(--ink-3); border: 1px solid var(--edge); }
.news-tag.long { background: rgba(22,199,132,0.10); color: var(--long); border-color: rgba(22,199,132,0.30); }
.news-tag.short { background: rgba(234,57,67,0.10); color: var(--short); border-color: rgba(234,57,67,0.30); }
.news-tag.warn { background: rgba(230,184,60,0.10); color: var(--warn); border-color: rgba(230,184,60,0.30); }
.news-tag.info { background: rgba(79,141,253,0.10); color: var(--info); border-color: rgba(79,141,253,0.30); }
.news-src { font-family: var(--font-mono); font-size: 9px; color: var(--dim); letter-spacing: 0.12em; margin-left: auto; }
.news-list.lg h3 { margin: 0; font-size: 14px; line-height: 1.4; color: var(--ink); font-weight: 500; }
.news-list.lg .news-impact b { color: var(--ink); font-family: var(--font-mono); }
.news-list.lg .news-impact.long { color: var(--long); }
.news-actions { display: flex; gap: 6px; padding-top: 4px; }
.news-item.flash { background: rgba(22,199,132,0.04); }

/* ── EXPOSURE BARS ─────────────────────────────────────────────── */
.exposure-bar { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 50px 1fr 80px; gap: 10px; align-items: center; }
.bar-row .lab { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.10em; }
.bar-row .num { font-family: var(--font-mono); font-size: 11px; text-align: right; }
.bar-track { height: 8px; background: var(--bg-3); border-radius: 1px; position: relative; overflow: hidden; }
.bar-fill { position: absolute; top: 0; bottom: 0; background: var(--info); }
.bar-fill.long { background: var(--long); }
.bar-fill.short { background: var(--short); }
.bar-fill.cash { background: var(--ink-3); }
.exposure-bar.lg .bar-track { height: 10px; }

.risk-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 14px; padding-top: 14px; margin-top: 14px; border-top: 1px solid var(--edge); }
.risk-meta > div { display: flex; flex-direction: column; }
.risk-meta b { font-family: var(--font-mono); font-size: 13px; color: var(--ink); }
.risk-meta.lg { grid-template-columns: repeat(3, 1fr); }

/* ── CALENDAR LIST ─────────────────────────────────────────────── */
.cal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cal-row { display: grid; grid-template-columns: 70px 1fr 60px; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--edge); align-items: flex-start; }
.cal-row:last-child { border-bottom: none; }
.cal-time { display: flex; flex-direction: column; gap: 2px; }
.cal-time b { font-family: var(--font-mono); font-size: 14px; color: var(--ink); }
.cal-time span { font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); letter-spacing: 0.10em; }
.cal-body b { display: block; font-size: 12px; color: var(--ink); margin-bottom: 4px; }
.cal-body span { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); line-height: 1.5; }
.cal-imp { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.12em; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--edge); font-weight: 700; height: fit-content; text-transform: uppercase; white-space: nowrap; }
.cal-imp.h { background: rgba(234,57,67,0.18); color: var(--short); border-color: rgba(234,57,67,0.45); }
.cal-imp.m { background: rgba(230,184,60,0.18); color: var(--warn);  border-color: rgba(230,184,60,0.45); }
.cal-imp.l { background: rgba(22,199,132,0.18); color: var(--long);  border-color: rgba(22,199,132,0.45); }
.cal-row.hi { background: rgba(234,57,67,0.03); }
.cal-row.md { background: rgba(230,184,60,0.02); }

/* ── COPILOT MINI ──────────────────────────────────────────────── */
.cp-prompts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 12px; }
.cp-prompt { background: var(--bg-2); border: 1px solid var(--edge); color: var(--ink-2); font-family: var(--font-mono); font-size: 11px; padding: 9px 12px; border-radius: 2px; cursor: pointer; text-align: left; }
.cp-prompt:hover { border-color: var(--edge-2); color: var(--ink); }
.cp-input { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-2); border: 1px solid var(--edge-2); border-radius: 2px; }
.cp-prefix { font-family: var(--font-mono); color: var(--long); font-size: 14px; }
.cp-input input { flex: 1; background: transparent; border: none; outline: none; color: var(--ink); font-family: var(--font-mono); font-size: 12px; }
.cp-input input::placeholder { color: var(--ink-3); }
.cp-foot { display: flex; justify-content: space-between; padding-top: 10px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }

/* ── COPILOT FULL ──────────────────────────────────────────────── */
.copilot-layout { display: grid; grid-template-columns: 240px 1fr 240px; gap: 16px; min-height: 600px; }
.cp-threads, .cp-tools { background: var(--bg-1); border: 1px solid var(--edge); border-radius: 3px; display: flex; flex-direction: column; }
.thread-list { display: flex; flex-direction: column; padding: 6px; gap: 2px; flex: 1; }
.thread { display: flex; flex-direction: column; gap: 3px; padding: 9px 10px; border-radius: 2px; cursor: pointer; text-decoration: none; }
.thread:hover { background: var(--bg-2); }
.thread.active { background: var(--bg-2); }
.thread .t-label { margin: 0 0 2px; }
.thread b { font-family: var(--font-body); font-size: 12px; color: var(--ink); font-weight: 500; }
.thread span:not(.t-label) { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-threads-foot { padding: 10px; border-top: 1px solid var(--edge); }

.cp-thread { background: var(--bg-1); border: 1px solid var(--edge); border-radius: 3px; padding: 22px; display: flex; flex-direction: column; gap: 22px; overflow-y: auto; }
.cp-msg { display: grid; grid-template-columns: 32px 1fr 60px; gap: 10px; align-items: flex-start; }
.cp-avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-mono); font-size: 10px; font-weight: 700; }
.cp-avatar.u { background: var(--bg-3); color: var(--ink); }
.cp-avatar.a { background: var(--long); color: #001b10; }
.cp-bubble { background: var(--bg-2); border: 1px solid var(--edge); border-radius: 2px; padding: 14px 16px; }
.cp-bubble.assist { background: var(--bg-1); border-left: 2px solid var(--long); }
.cp-bubble p { margin: 0 0 10px; font-size: 13px; line-height: 1.6; color: var(--ink); }
.cp-bubble p:last-child { margin-bottom: 0; }
.cp-bubble.assist p:last-child { margin-bottom: 0; }
.cp-meta { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.cp-list { padding-left: 0; margin: 0 0 12px; list-style: none; counter-reset: x; }
.cp-list li { padding: 8px 12px; background: var(--bg-2); border: 1px solid var(--edge); margin-bottom: 6px; font-size: 12px; line-height: 1.5; }
.cp-cite { color: var(--info); font-family: var(--font-mono); font-size: 10px; cursor: pointer; }
.cp-callout { background: rgba(22,199,132,0.06); border: 1px solid rgba(22,199,132,0.30); border-radius: 2px; padding: 14px; margin: 14px 0; }
.cp-callout-h { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--long); font-weight: 700; margin-bottom: 8px; }
.cp-callout-actions { display: flex; gap: 6px; flex-wrap: wrap; padding-top: 10px; }
.cp-fold { color: var(--ink-3); font-style: italic; font-size: 12px; }
.cp-cites { padding-top: 12px; border-top: 1px dashed var(--edge); margin-top: 14px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cp-cites .t-label { margin: 0 4px 0 0; }
.cp-pill { background: var(--bg-2); border: 1px solid var(--edge); border-radius: 2px; font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); padding: 3px 7px; cursor: pointer; }
.cp-time { font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); padding-top: 6px; text-align: right; letter-spacing: 0.10em; }
.cp-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px; padding: 10px 0; }
.cp-stats.compact { grid-template-columns: repeat(4, 1fr); padding: 0 0 10px; }
.cp-stats > div { display: flex; flex-direction: column; gap: 3px; }
.cp-stats b { font-family: var(--font-mono); font-size: 18px; color: var(--ink); font-weight: 600; }
.cp-stats.compact b { font-size: 16px; }
.cp-chart { padding: 8px 0 4px; }
.cp-chart svg { width: 100%; height: 140px; display: block; }
.cp-chart-lab { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.16em; color: var(--ink-3); }

.tool-list { padding: 8px; display: flex; flex-direction: column; }
.tool-row { display: flex; gap: 8px; align-items: center; padding: 6px 8px; font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.ctx-list { padding: 8px 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.ctx-row { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; }
.ctx-row b { color: var(--ink-3); font-weight: 400; }
.ctx-row span:last-child { color: var(--ink); font-weight: 600; }

.cp-composer { margin-top: 14px; display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 12px 14px; background: var(--bg-1); border: 1px solid var(--edge-2); border-radius: 3px; }
.cp-composer input { background: transparent; border: none; outline: none; color: var(--ink); font-family: var(--font-mono); font-size: 12px; }
.cp-composer-actions { display: flex; gap: 6px; align-items: center; }

/* ── PERF / CONV DIST ──────────────────────────────────────────── */
.perf-chart svg, .equity-chart, .candle-chart { width: 100%; display: block; }
.conv-dist { display: flex; flex-direction: column; gap: 8px; }
.cd-bar { display: grid; grid-template-columns: 50px 1fr 30px; gap: 10px; align-items: center; }
.cd-bar .lab { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.cd-bar .num { font-family: var(--font-mono); font-size: 10px; text-align: right; color: var(--ink); }
.cd-bar .bk { height: 8px; background: var(--bg-3); border-radius: 1px; overflow: hidden; }
.cd-bar .fl { height: 100%; background: var(--long); }
.cd-bar .fl.med { background: var(--warn); }
.cd-bar .fl.lo { background: var(--short); }

/* ── WAR ROOM SENTIMENT ────────────────────────────────────────── */
.sentiment-radar { display: grid; place-items: center; padding: 8px 0; }
.sentiment-radar svg { width: 100%; max-width: 220px; height: auto; }
.radar-key { padding: 12px 14px 0; border-top: 1px dashed var(--edge); margin-top: 10px; display: flex; flex-direction: column; gap: 2px; }
.radar-key b { font-family: var(--font-mono); font-size: 16px; }

.trend-list { list-style: none; padding: 8px 14px 14px; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.trend-list li { display: grid; grid-template-columns: 18px 1fr auto auto; gap: 10px; align-items: baseline; padding: 5px 0; border-bottom: 1px dashed var(--edge); font-family: var(--font-mono); font-size: 11px; }
.trend-list .r { color: var(--ink-3); }
.trend-list b { color: var(--ink); }
.trend-list .tag { font-size: 10px; padding: 1px 5px; border-radius: 2px; }
.trend-list .tag.long { background: rgba(22,199,132,0.10); color: var(--long); }
.trend-list .tag.warn { background: rgba(230,184,60,0.10); color: var(--warn); }

.voice-list { list-style: none; padding: 8px 14px 14px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.voice-list li { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 5px 0; }
.vavatar { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-3); color: var(--ink); font-family: var(--font-mono); font-size: 10px; font-weight: 700; }
.voice-list b { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--ink); }
.voice-list .t-faint { font-family: var(--font-mono); font-size: 10px; }

/* ── MACRO CALENDAR WEEK ───────────────────────────────────────── */
.cal-week { display: flex; flex-direction: column; }
.cal-day { display: grid; grid-template-columns: 110px 1fr; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--edge); }
.cal-day:last-child { border-bottom: none; }
.cal-day.today { background: rgba(22,199,132,0.03); }
.cd-h { display: flex; flex-direction: column; gap: 4px; }
.cd-h b { font-family: var(--font-mono); font-size: 14px; color: var(--ink); letter-spacing: 0.06em; }
.cd-h span { font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); letter-spacing: 0.12em; }
.cal-events { display: flex; flex-direction: column; gap: 8px; }
.evt { display: grid; grid-template-columns: 56px 1fr; gap: 12px; padding: 10px 12px; border: 1px solid var(--edge); border-radius: 2px; background: var(--bg-2); }
.evt.h { border-left: 2px solid var(--short); }
.evt.m { border-left: 2px solid var(--warn); }
.evt.l { border-left: 2px solid var(--ink-3); }
.evt-time { font-family: var(--font-mono); font-size: 12px; color: var(--ink); font-weight: 600; padding-top: 1px; }
.evt-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.evt-head b { font-size: 12px; color: var(--ink); }
.evt-imp { font-family: var(--font-mono); font-size: 9px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--edge); letter-spacing: 0.12em; font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.evt-imp.h { background: rgba(234,57,67,0.18); color: var(--short); border-color: rgba(234,57,67,0.45); }
.evt-imp.m { background: rgba(230,184,60,0.18); color: var(--warn);  border-color: rgba(230,184,60,0.45); }
.evt-imp.l { background: rgba(22,199,132,0.18); color: var(--long);  border-color: rgba(22,199,132,0.45); }
.evt-desc { margin: 0 0 6px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); line-height: 1.55; }
.evt-take { margin: 0; padding: 6px 8px; background: rgba(22,199,132,0.06); border-left: 2px solid var(--long); font-family: var(--font-mono); font-size: 10px; color: var(--ink-2); line-height: 1.55; }
.cal-empty { padding: 10px 0; font-family: var(--font-mono); font-size: 10px; }

/* regime card */
.regime-card { display: flex; flex-direction: column; gap: 10px; }
.regime-name { font-family: var(--font-mono); font-size: 16px; font-weight: 700; letter-spacing: 0.10em; }
.regime-meta { font-size: 10px; }
.regime-bars { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); }
.regime-bars > div { display: grid; grid-template-columns: 50px 1fr 50px; gap: 10px; align-items: center; }
.regime-bars .bk { height: 6px; background: var(--bg-3); border-radius: 1px; }
.regime-bars .fl { height: 100%; background: var(--long); }
.regime-bars .fl.med { background: var(--warn); }
.regime-bars .num { font-family: var(--font-mono); font-size: 10px; text-align: right; color: var(--ink); }

/* ── CHARTS ────────────────────────────────────────────────────── */
.charts-toolbar { display: flex; gap: 4px; align-items: center; padding: 8px 12px; margin-bottom: 12px; background: var(--bg-1); border: 1px solid var(--edge); border-radius: 3px; flex-wrap: wrap; }
.ct-btn { background: transparent; border: 1px solid transparent; color: var(--ink-2); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; padding: 5px 8px; cursor: pointer; border-radius: 2px; display: inline-flex; align-items: center; gap: 5px; }
.ct-btn:hover { background: var(--bg-2); color: var(--ink); }
.ct-btn.active { background: var(--bg-2); color: var(--long); border-color: var(--edge-2); }
.ct-btn.ai { color: var(--long); border-color: rgba(22,199,132,0.30); }
.charts-toolbar .sep { color: var(--dim); padding: 0 4px; }

.charts-grid { display: grid; grid-template-columns: 1fr 380px; gap: 16px; grid-template-rows: 1fr 1fr 1fr; }
.chart-main { grid-row: span 3; }
.chart-h { display: flex; align-items: baseline; gap: 14px; padding: 10px 14px; border-bottom: 1px solid var(--edge); flex-wrap: wrap; }
.chart-h.compact { padding: 8px 12px; gap: 10px; }
.cm-pair { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--ink); }
.cm-pair .cm-tf { font-size: 10px; color: var(--ink-3); margin-left: 6px; font-weight: 400; }
.cm-px { font-family: var(--font-mono); font-size: 16px; color: var(--ink); }
.cm-tfs { display: flex; gap: 3px; margin-left: auto; }
.cm-info { font-family: var(--font-mono); font-size: 10px; }
.chart-body { padding: 8px; }
.chart-body.small { padding: 4px 6px; }
.candle-chart { height: 360px; }
.chart-body.small svg { height: 100px; }

/* ── ORDER BOOK ────────────────────────────────────────────────── */
.dom-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11px; }
.dom-table th { font-size: 9px; color: var(--ink-3); text-align: left; padding: 6px 12px; border-bottom: 1px solid var(--edge); letter-spacing: 0.10em; }
.dom-table td { padding: 4px 12px; position: relative; }
.dom-table td.num { text-align: right; }
.dom-table td.bar { padding: 0; width: 48%; }
.dom-table .bk { height: 100%; min-height: 18px; }
.dom-table .bk.ask { background: rgba(234,57,67,0.10); margin-left: 0; }
.dom-table .bk.bid { background: rgba(22,199,132,0.10); }
.dom-table tbody.ask td.px { color: var(--short); }
.dom-table tbody.bid td.px { color: var(--long); }
.mid-row { padding: 8px 12px !important; background: var(--bg-2); border-top: 1px solid var(--edge-2); border-bottom: 1px solid var(--edge-2); }
.mid-px { font-family: var(--font-mono); font-size: 18px; font-weight: 700; color: var(--ink); }
.mid-meta { display: flex; gap: 6px; font-family: var(--font-mono); font-size: 10px; }

.liq-heat { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 4px; }
.liq-row { display: grid; grid-template-columns: 110px 1fr 80px; gap: 10px; align-items: center; }
.liq-row .lab { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); }
.liq-row .bar { height: 14px; background: rgba(255,255,255,0.02); border-radius: 1px; position: relative; overflow: hidden; }
.liq-row .seg { height: 100%; }
.liq-row .seg.short { background: rgba(234,57,67,0.40); }
.liq-row .seg.long { background: rgba(22,199,132,0.40); }
.liq-row.hi .seg { box-shadow: inset 0 0 0 1px currentColor; }
.liq-row.hi .seg.short { color: var(--short); }
.liq-row.hi .seg.long { color: var(--long); }
.liq-row.mid .lab { color: var(--ink); font-weight: 700; }
.liq-row.mid .bar { background: var(--bg-3); }
.liq-row .num.small { font-family: var(--font-mono); font-size: 10px; text-align: right; }

.footprint { padding: 10px 14px 14px; display: flex; flex-direction: column; gap: 2px; }
.fp-row { display: grid; grid-template-columns: 70px 1fr; gap: 10px; align-items: center; }
.fp-row.mid { background: var(--bg-2); padding: 2px 0; }
.fp-px { font-family: var(--font-mono); font-size: 11px; color: var(--ink-2); padding-left: 4px; }
.fp-cells { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
.fp-cell { font-family: var(--font-mono); font-size: 10px; padding: 4px 8px; text-align: right; border-radius: 1px; }
.fp-cell.short { background: rgba(234,57,67,0.10); color: var(--short); }
.fp-cell.long { background: rgba(22,199,132,0.10); color: var(--long); }
.fp-cell.hi { font-weight: 700; }
.fp-cell.hi.short { background: rgba(234,57,67,0.30); }
.fp-cell.hi.long { background: rgba(22,199,132,0.30); }

.trade-tape { list-style: none; padding: 4px 14px 12px; margin: 0; max-height: 280px; overflow-y: auto; font-family: var(--font-mono); font-size: 10px; }
.trade-tape li { display: grid; grid-template-columns: 80px 1fr 60px; gap: 8px; padding: 3px 0; align-items: center; border-bottom: 1px dashed var(--edge); }
.trade-tape li.long .tt-px { color: var(--long); }
.trade-tape li.short .tt-px { color: var(--short); }
.trade-tape li.lg { background: rgba(22,199,132,0.06); padding: 5px 4px; margin: 2px -4px; }
.tt-time { color: var(--ink-3); }
.tt-px, .tt-qty { text-align: right; }

.delta { font-size: 28px; }
.delta-bars { padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }

/* ── ON-CHAIN ──────────────────────────────────────────────────── */
.netflow-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--edge); margin-bottom: 12px; }
.nf { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; background: var(--bg-2); border: 1px solid var(--edge); border-radius: 2px; }
.nf-num { font-family: var(--font-mono); font-size: 18px; font-weight: 700; }
.nf .t-faint { font-family: var(--font-mono); font-size: 9px; }
.row-flash { background: rgba(234,57,67,0.04); }

/* ── PORTFOLIO ─────────────────────────────────────────────────── */
.equity-chart { height: 200px; }
.equity-stats { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; padding-top: 14px; border-top: 1px solid var(--edge); margin-top: 14px; }
.equity-stats > div { display: flex; flex-direction: column; }
.equity-stats b { font-family: var(--font-mono); font-size: 14px; color: var(--ink); }

/* ── QUANT LAB ─────────────────────────────────────────────────── */
.quant-layout { display: grid; grid-template-columns: 240px 1fr 280px; gap: 16px; min-height: 600px; }
.strat-list { display: flex; flex-direction: column; padding: 6px; gap: 2px; }
.strat { display: grid; grid-template-columns: auto 1fr; gap: 4px 8px; padding: 9px 10px; border-radius: 2px; cursor: pointer; text-decoration: none; }
.strat:hover { background: var(--bg-2); }
.strat.active { background: var(--bg-2); }
.strat .t-pill { grid-column: 1; grid-row: 1; }
.strat b { grid-column: 2; grid-row: 1; font-family: var(--font-body); font-size: 12px; color: var(--ink); font-weight: 500; }
.strat .t-faint { grid-column: 2; grid-row: 2; font-family: var(--font-mono); font-size: 10px; }
.strat-sharpe { grid-column: 1 / 3; grid-row: 3; font-family: var(--font-mono); font-size: 9px; color: var(--long); margin-top: 2px; letter-spacing: 0.10em; }

.builder-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--edge); margin-bottom: 16px; }
.builder-col { display: flex; flex-direction: column; gap: 6px; }
.builder-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.rules { display: flex; flex-direction: column; gap: 6px; }
.rules .t-label { margin-top: 14px; }
.rules .t-label:first-child { margin-top: 0; }
.rule { display: grid; grid-template-columns: 28px auto 1fr auto auto; gap: 10px; align-items: center; padding: 10px 14px; background: var(--bg-2); border: 1px solid var(--edge); border-radius: 2px; }
.rule .r-n { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.10em; }
.rule .r-when { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--long); font-weight: 700; }
.rule .r-and { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--ink-3); font-weight: 700; }
.rule .r-pill { background: var(--bg-3); border: 1px solid var(--edge); border-radius: 2px; padding: 4px 8px; font-family: var(--font-mono); font-size: 11px; }
.rule .r-pill b { color: var(--info); font-weight: 500; }
.rule .r-op { font-family: var(--font-mono); font-size: 12px; color: var(--ink); font-weight: 700; }
.rule .r-val { font-family: var(--font-mono); font-size: 11px; color: var(--ink); }
.builder-actions { display: flex; gap: 8px; padding-top: 16px; border-top: 1px solid var(--edge); margin-top: 16px; flex-wrap: wrap; }

.qresults-foot { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px dashed var(--edge); margin-top: 10px; }

/* ── RESEARCH ──────────────────────────────────────────────────── */
.research-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.research-card { padding: 18px 20px; cursor: pointer; transition: border-color 0.15s; display: flex; flex-direction: column; gap: 10px; }
.research-card:hover { border-color: var(--edge-2); }
.research-card.lead { grid-column: span 3; }
.research-card .rc-tag { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); letter-spacing: 0.12em; }
.research-card .rc-tag .long, .research-card .rc-tag .info, .research-card .rc-tag .warn { font-weight: 700; }
.research-card h3 { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 28px; line-height: 1.2; color: var(--ink); }
.research-card h4 { margin: 0; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 18px; line-height: 1.3; color: var(--ink); }
.research-card p { margin: 0; font-size: 12px; line-height: 1.55; color: var(--ink-2); }
.research-card.lead p { font-size: 14px; line-height: 1.6; max-width: 70ch; }
.rc-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding-top: 10px; margin-top: auto; border-top: 1px dashed var(--edge); flex-wrap: wrap; }
.rc-tags { display: flex; gap: 4px; }

/* ── ALERTS ────────────────────────────────────────────────────── */
.ch { font-family: var(--font-mono); font-size: 9px; padding: 2px 5px; border-radius: 2px; margin-right: 4px; letter-spacing: 0.10em; font-weight: 700; }
.ch.tg { background: #229ED920; color: #5fbef0; }
.ch.sms { background: #16C78420; color: var(--long); }
.ch.web { background: var(--bg-3); color: var(--info); }
.ch.dc { background: #5865F220; color: #8b94f5; }
.ch.sl { background: #4A154B20; color: #d397d4; }
.ch.wh { background: var(--bg-3); color: var(--ink-3); }
.ch.lg { padding: 4px 7px; font-size: 10px; }
.ch-row { display: grid; grid-template-columns: 40px 1fr auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--edge); }
.ch-row:last-child { border-bottom: none; }
.ch-row b { display: block; font-family: var(--font-body); font-size: 12px; color: var(--ink); margin-bottom: 2px; }
.ch-row .t-faint { font-family: var(--font-mono); font-size: 10px; display: block; }

/* ── MOBILE RACK ───────────────────────────────────────────────── */
.mobile-rack { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.phone {
  background: var(--bg-1);
  border: 1px solid var(--edge-2);
  border-radius: 24px;
  padding: 6px;
  display: flex; flex-direction: column;
  height: 620px;
  position: relative;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.03);
}
.phone-status { display: flex; justify-content: space-between; padding: 8px 18px 4px; font-family: var(--font-mono); font-size: 10px; color: var(--ink); }
.phone-status.dark { color: var(--ink); }
.phone-body { background: var(--bg); border-radius: 18px; flex: 1; overflow: hidden; padding: 14px 14px 0; display: flex; flex-direction: column; gap: 10px; }
.phone-body.lock { background: linear-gradient(180deg, #0a0c10, #08090b); padding: 60px 14px 14px; }
.lock-time { font-family: var(--font-display); font-style: italic; font-size: 56px; text-align: center; line-height: 1; }
.lock-date { font-family: var(--font-mono); font-size: 11px; text-align: center; color: var(--ink-3); margin-bottom: 24px; letter-spacing: 0.10em; }
.push { background: rgba(255,255,255,0.06); backdrop-filter: blur(12px); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.push-h { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 9px; color: var(--ink-2); margin-bottom: 6px; letter-spacing: 0.10em; }
.push-app.long { color: var(--long); }
.push h5 { margin: 0 0 4px; font-size: 13px; color: var(--ink); }
.push p { margin: 0; font-size: 11px; color: var(--ink-2); line-height: 1.4; }

.ph-h { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 8px; border-bottom: 1px solid var(--edge); }
.ph-h.slim { padding: 4px 0 6px; }
.ph-h .wm { font-family: var(--font-wordmark); font-style: italic; font-size: 22px; line-height: 1; }
.ph-h .wm.small { font-size: 14px; }
.ph-greeting { font-family: var(--font-mono); font-size: 10px; color: var(--ink-3); }
.ph-h .bell { font-family: var(--font-mono); font-size: 11px; color: var(--short); }
.ph-h .back { font-family: var(--font-mono); font-size: 16px; color: var(--ink-2); }

.ph-card { background: var(--bg-1); border: 1px solid var(--edge); border-radius: 6px; padding: 12px; }
.ph-card.hero { border-left: 2px solid var(--long); }
.ph-card.sig.long { border-left: 2px solid var(--long); }
.ph-eyebrow { font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); letter-spacing: 0.14em; display: block; margin-bottom: 6px; font-weight: 700; }
.ph-card h4 { margin: 0 0 6px; font-family: var(--font-display); font-style: italic; font-size: 16px; line-height: 1.3; color: var(--ink); }
.ph-card p { margin: 0 0 4px; font-size: 11px; color: var(--ink-2); line-height: 1.5; }
.ph-btn { background: var(--long); color: #001b10; border: none; font-family: var(--font-mono); font-size: 10px; font-weight: 700; padding: 7px 10px; border-radius: 2px; letter-spacing: 0.10em; margin-top: 6px; cursor: pointer; }
.ph-btn.long { background: var(--long); width: 100%; padding: 10px; }

.ph-sig-h { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ph-pair { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--ink); }
.ph-sig-lvls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ph-sig-lvls > div { display: flex; flex-direction: column; gap: 1px; padding: 6px 8px; background: var(--bg-2); border-radius: 2px; }
.ph-sig-lvls b { font-family: var(--font-mono); font-size: 12px; }

.ph-conv-block { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 0; border-bottom: 1px solid var(--edge); }
.ph-mini-chart svg { width: 100%; height: 100px; padding: 10px 0; }
.ph-lvls { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 10px 0; }
.ph-lvls .lv { padding: 8px 10px; background: var(--bg-1); border: 1px solid var(--edge); border-radius: 3px; }
.ph-lvls b { font-family: var(--font-mono); font-size: 13px; }

.phone-tabs { display: flex; justify-content: space-around; padding: 12px 14px 8px; border-top: 1px solid var(--edge); margin-top: 0; background: var(--bg-1); border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; }
.tab { font-family: var(--font-mono); font-size: 14px; color: var(--ink-3); }
.tab.active { color: var(--long); }

.ph-cp-msg { padding: 10px 12px; border-radius: 8px; font-size: 12px; line-height: 1.5; max-width: 85%; }
.ph-cp-msg.user { background: var(--bg-3); align-self: flex-end; margin-left: auto; }
.ph-cp-msg.assist { background: var(--bg-1); border: 1px solid var(--edge); border-left: 2px solid var(--long); align-self: flex-start; }
.ph-cp-meta { display: block; font-family: var(--font-mono); font-size: 9px; color: var(--ink-3); margin-bottom: 4px; letter-spacing: 0.10em; }
.ph-cp-pill { display: inline-block; margin-top: 6px; font-family: var(--font-mono); font-size: 9px; color: var(--long); padding: 2px 6px; background: rgba(22,199,132,0.10); border-radius: 2px; }
.ph-cp-msg.assist p { margin: 0; }
.ph-cp-input { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--bg-1); border: 1px solid var(--edge); border-radius: 18px; margin-top: auto; margin-bottom: 8px; }
.ph-cp-input span:first-child { font-family: var(--font-mono); color: var(--long); font-weight: 700; }

/* responsive collapse */
@media (max-width: 1280px) {
  .copilot-layout { grid-template-columns: 200px 1fr; }
  .cp-tools { display: none; }
  .quant-layout { grid-template-columns: 220px 1fr; }
  .quant-results { display: none; }
}
@media (max-width: 1100px) {
  .shell { grid-template-columns: 56px 1fr; }
  .rail-btn .lbl, .rail-btn .kbd, .rail-btn .bdg, .rail-h, .rail-foot { display: none; }
  .rail-btn { justify-content: center; }
}

/* ── MOBILE (≤ 720px) ──────────────────────────────────────────────
   Phone-friendly layout: hamburger drawer for the rail, stacked
   grids, topbar that fits one line, tables that scroll horizontally.
   Desktop layout is fully preserved above 720px.
   ────────────────────────────────────────────────────────────────── */
.mobile-menu-btn { display: none; }   /* hidden on desktop */
.mobile-overlay  { display: none; }

@media (max-width: 720px) {
  body { overflow-x: hidden; }

  /* Topbar trims to fit a phone */
  .topbar { height: 44px; padding: 0 10px; gap: 6px; flex-wrap: nowrap; }
  .topbar .sep, .topbar .live, .topbar .lab, .topbar #utcTime, .topbar #mktSession,
  .topbar .tb-tickers, .topbar .tb-btn:not([data-vx-profile]):not(.alerts) { display: none; }
  .brand-wm .wm  { font-size: 18px; }
  .brand-wm .brand-mark { width: 24px; height: 24px; }
  .brand-wm .sub { display: none; }
  .tb-right { padding-left: 6px; margin-left: auto; gap: 4px; }
  .tb-btn { padding: 5px 7px; font-size: 9px; }
  .tb-btn .dot { display: none; }

  /* Hamburger sits at the very left */
  .mobile-menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    background: var(--bg-2); border: 1px solid var(--edge);
    color: var(--ink); border-radius: 3px;
    cursor: pointer; padding: 0;
    flex-shrink: 0;
  }
  .mobile-menu-btn span {
    display: block; width: 16px; height: 2px;
    background: var(--ink);
    box-shadow: 0 -5px 0 var(--ink), 0 5px 0 var(--ink);
  }

  /* Shell collapses to single column. The rail becomes a slide-out drawer. */
  .shell { display: block; min-height: calc(100vh - 44px); }
  .rail {
    position: fixed; top: 44px; bottom: 0; left: 0; z-index: 80;
    width: 240px; height: calc(100vh - 44px);
    transform: translateX(-100%);
    transition: transform 220ms ease;
    box-shadow: 4px 0 16px rgba(0,0,0,0.4);
    padding: 14px 8px;
  }
  /* Restore full labels/sections inside the drawer (override 1100px collapse) */
  .rail-btn .lbl, .rail-btn .kbd, .rail-btn .bdg, .rail-h, .rail-foot { display: revert; }
  .rail-btn { justify-content: flex-start; }
  body.rail-open .rail { transform: translateX(0); }
  body.rail-open .mobile-overlay {
    display: block; position: fixed; inset: 44px 0 0 0; z-index: 70;
    background: rgba(0,0,0,0.55);
  }

  /* Content takes the full width */
  .content { padding: 14px 12px 80px; }

  /* Grids — stack everything to full width */
  .grid-12 { grid-template-columns: 1fr; gap: 12px; margin-bottom: 12px; }
  .g-col-1, .g-col-2, .g-col-3, .g-col-4, .g-col-5,
  .g-col-6, .g-col-7, .g-col-8, .g-col-9, .g-col-10, .g-col-11, .g-col-12 { grid-column: 1 / -1; }
  .stack { gap: 12px; }

  /* KPI strip — wrap to 2 columns instead of 8 */
  .kpi-strip { grid-template-columns: repeat(2, 1fr); }
  .kpi { padding: 10px 12px; border-bottom: 1px solid var(--edge); }
  .kpi:nth-child(2n) { border-right: none; }
  .kpi:nth-last-child(-n+2) { border-bottom: none; }
  .kpi-v { font-size: 14px; }

  /* View headers — stack title above filter chips */
  .vh { flex-direction: column; align-items: stretch; gap: 8px; padding: 4px 0 12px; }
  .vh-l { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .vh-title { font-size: 22px; }
  .vh-sub { font-size: 10px; }
  .vh-r { display: flex; flex-wrap: wrap; gap: 6px; }
  .vh-r .t-chip { font-size: 9px; padding: 4px 8px; }
  .vh-r .sep { display: none; }

  /* Brief / hero text scales down */
  .brief-h { font-size: 20px; line-height: 1.25; margin-bottom: 10px; }
  .brief-body { padding: 14px 14px 16px; }
  .brief-bullets li { font-size: 12px; }
  .brief-actions { flex-wrap: wrap; gap: 6px; }
  .brief-actions .t-btn { font-size: 10px; padding: 6px 10px; }

  /* P&L card — shrink the big number */
  .big-num { font-size: 26px; }
  .pnl-grid { grid-template-columns: 1fr; gap: 10px; }
  .pnl-mini { grid-template-columns: repeat(3, 1fr); gap: 8px; }

  /* Forward Performance — switch back to single-column inside the panel */
  .g-col-5.stack { height: auto; }
  .g-col-5.stack > .fperf-panel { flex: 0 0 auto; max-height: none; overflow: visible; }
  .fperf-grid { grid-template-columns: 1fr; }
  .fperf-box { border-right: none; }
  .fperf-bk-scroll { max-height: 220px; }

  /* Tables — let them scroll horizontally instead of crushing */
  .t-panel { overflow: hidden; }
  .t-panel table.t-table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .t-panel table.t-table thead, .t-panel table.t-table tbody { display: table; width: max-content; min-width: 100%; }

  /* Signal rows — already vertical; tighten the level grid */
  .sig-levels { grid-template-columns: 1fr; gap: 6px; }
  .sig-levels > div { flex-direction: row; align-items: baseline; gap: 8px; }
  .sig-levels .t-label { font-size: 9px; min-width: 48px; }

  /* News list — stack icon, time, content vertically */
  .news-list.lg .news-item { grid-template-columns: 1fr; gap: 6px; padding: 12px 14px; }
  .news-list.lg h3 { font-size: 13px; }
  .news-item .t.mono { font-size: 9px; }

  /* War Room news header chips wrap */
  .news-list.compact .news-item { padding: 10px 12px; }

  /* Watchlist table — tighten hover/cell widths */
  .watch-table th, .watch-table td { padding: 6px 8px; font-size: 10px; }
  .mini-spark { display: none; }   /* sparkline column too crammed on mobile */

  /* Hide the desktop-only "PAIRS" pill column extras */
  .news-tag { font-size: 8px; padding: 1px 4px; }

  /* Charts container — let it use full width */
  iframe, .vx-chart-host { max-width: 100%; }

  /* ── SIGNALS VIEW · large signal cards ──────────────────────────
     Desktop: 3-column grid (info | levels | chart+actions). On mobile,
     stack vertically and shrink everything so cards stop dominating
     the screen.
     ────────────────────────────────────────────────────────────── */
  .signal-list.lg .signal-card {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }
  .sc-l { gap: 8px; }
  .sc-side { flex-wrap: wrap; }
  .sc-pair { font-size: 16px; }
  .conv-num.xl { font-size: 28px; }      /* down from 38 */
  .sc-conv-block { gap: 4px; }
  .sc-conv-foot { font-size: 8px; }
  .sc-mid {
    grid-template-columns: 1fr 1fr;       /* keep 2 cols, just tighter */
    gap: 8px 12px;
  }
  .sc-mid .lvl b { font-size: 12px; }
  .sc-r { gap: 8px; }
  .sc-chart { height: 90px; }
  .sc-actions { flex-wrap: wrap; gap: 5px; }
  .sc-actions .t-btn { font-size: 9px; padding: 5px 9px; }
  .sc-foot { grid-template-columns: 1fr 1fr; gap: 2px 8px; font-size: 9px; }

  /* Conviction-distribution rows in the right column */
  .conv-dist .cd-bar { font-size: 10px; gap: 8px; }

  /* ── CHARTS VIEW ─────────────────────────────────────────────────
     Desktop: main candle chart + 380px right rail of mini charts.
     On mobile: full-width main chart with usable height, mini charts
     stack underneath, toolbar wraps and shrinks. Layout chips hidden
     because there's no room for 2×2 / 3+side / SINGLE on phone.
     ──────────────────────────────────────────────────────────────── */
  .charts-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 12px;
  }
  .chart-main { grid-row: auto; }
  .charts-toolbar { padding: 6px 8px; gap: 3px; }
  .charts-toolbar .sep { display: none; }
  .ct-btn { font-size: 9px; padding: 4px 7px; }
  .chart-h { padding: 8px 10px; gap: 8px; }
  .cm-pair { font-size: 13px; }
  .cm-px { font-size: 13px; }
  .cm-tfs { margin-left: 0; flex-wrap: wrap; gap: 2px; width: 100%; }
  .cm-tfs .t-chip { font-size: 9px; padding: 3px 7px; }
  .cm-info { font-size: 9px; width: 100%; }
  .chart-body { padding: 4px; }
  .candle-chart { height: 280px; }       /* full-width on phone — was 360 */

  /* The view-header layout chips (2×2 / SINGLE etc.) take too much space.
     Hide them on phone — only one layout makes sense. */
  .view-charts .vh-r { display: none; }

  /* ── COPILOT VIEW ────────────────────────────────────────────────
     Desktop: 240px Threads | 1fr Conversation | 240px Tools — three
     columns. The 1280px rule already drops Tools, but on phone we
     also need to drop Threads (with a hamburger entry instead) so
     the conversation gets the full width.
     ──────────────────────────────────────────────────────────────── */
  .copilot-layout {
    grid-template-columns: 1fr;           /* conversation only */
    gap: 12px;
    min-height: 400px;
  }
  .cp-threads, .cp-tools { display: none; }
  .cp-thread { padding: 14px; gap: 16px; }
  .cp-msg { grid-template-columns: 28px 1fr; gap: 8px; }
  .cp-msg .cp-time { display: none; }     /* timestamp eats the right column */
  .cp-bubble { padding: 12px 14px; }
  .cp-bubble p { font-size: 12px; line-height: 1.55; }
  .cp-bubble.assist { border-left-width: 2px; }
  .cp-meta { flex-wrap: wrap; gap: 6px; }
  .cp-stats { grid-template-columns: repeat(2, 1fr); gap: 8px 12px; }
  .cp-stats.compact { grid-template-columns: repeat(2, 1fr); }
  .cp-stats b { font-size: 16px; }
  .cp-callout { padding: 12px; }
  .cp-callout-actions { flex-wrap: wrap; gap: 5px; }
  .cp-callout-actions .t-btn { font-size: 9px; padding: 5px 9px; }
  .cp-cites { flex-wrap: wrap; gap: 4px; }
  .cp-pill { font-size: 9px; padding: 2px 5px; }
  .cp-list li { font-size: 12px; }
  .cp-fold { font-size: 11px; }
  .cp-chart svg { max-height: 120px; }

  /* Composer — switch from desktop grid (prefix | input | actions) to a
     flex layout so the input can take full row width and the action chips
     wrap to a second row. Without this override the input stays trapped
     in the desktop 1fr column and gets crushed to ~0px on a phone. */
  .cp-composer {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 8px; padding: 10px 12px;
    margin-top: 14px;
  }
  .cp-composer .cp-prefix { flex: 0 0 auto; font-size: 14px; }
  .cp-composer input {
    flex: 1 1 0; min-width: 0;
    font-size: 14px; padding: 10px 8px;
    background: transparent; border: none; outline: none;
    color: var(--ink); font-family: var(--font-mono);
    -webkit-appearance: none;            /* iOS Safari: kill rounded corners */
    border-radius: 0;
  }
  .cp-composer-actions {
    flex: 0 0 100%;                       /* drop to second row */
    flex-wrap: wrap; gap: 5px;
  }
  .cp-composer-actions .t-chip { font-size: 9px; padding: 4px 7px; }
  .cp-composer-actions .t-btn { font-size: 10px; padding: 6px 10px; }
}