/* style.css — Skipper trading terminal aesthetic.
   No frameworks, no gradients (except the header bar), no oversized rounding.
   Variables centralize the palette so we can tune the whole UI from one place. */

:root {
  /* OCR brand — black + orange + teal. Old token names kept as aliases so
     existing component CSS doesn't all need rewriting; new tokens added for
     spots the spec calls out specifically. */
  --bg:            #0A0A0A;
  --surface:       #111111;
  --surface-2:     #1A1A1A;
  --border:        #2A2A2A;
  --border-strong: #2A2A2A;

  --accent-orange:     #F5720A;
  --accent-orange-hot: #FF8C00;
  --accent-orange-dim: #B25406;
  --accent-teal:       #00CED1;
  --accent-teal-dim:   #008B8B;

  /* Aliases so existing rules (--accent-red / --accent-gold / --info) still resolve. */
  --accent-red:    #FF4444;
  --accent-gold:   #F5720A;
  --success:       #00CC44;
  --info:          #00CED1;
  --warning:       #F5720A;
  --danger:        #FF4444;

  --text:          #FFFFFF;
  --text-dim:      #999999;
  --text-faint:    #555555;

  --font-mono:     'JetBrains Mono', ui-monospace, monospace;
  --font-ui:       'Sora', system-ui, -apple-system, sans-serif;
}

/* OCR-spec component overrides */
.header { border-bottom: 1px solid var(--accent-orange); }
.brand-mark { color: var(--accent-orange) !important; }
.brand-sub  { color: var(--accent-teal)   !important; }

.mode-pill.active[data-mode="paper"]  { border-color: var(--accent-teal); }
.mode-pill.active[data-mode="parity"] { border-color: var(--accent-orange-dim); }
.mode-pill.active[data-mode="live"]   { border-color: var(--accent-orange); }

.status-badge { color: var(--accent-teal); }
.status-badge.parity { color: var(--accent-orange-dim); }
.status-badge.live   { color: var(--accent-orange); }

.regime-tile.active { border-color: var(--accent-orange); box-shadow: 0 0 12px rgba(245,114,10,0.35); }

.btn-primary { background: var(--accent-orange); color: #000; font-weight: 700; border: none; }
.btn-primary:hover { background: var(--accent-orange-hot); }

.kill-banner { background: var(--danger); color: #fff; }
.kill-banner.hidden { display: none; }
@keyframes killpulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
.kill-banner:not(.hidden) { animation: killpulse 1.4s ease-in-out infinite; }
.kill-banner-row { border-left: 3px solid var(--danger); }

.signals-head { border-left: 3px solid var(--accent-orange); padding-left: 8px; }
.signals-head h3 { color: var(--accent-orange); }

.signal-action.buy-yes { background: var(--accent-teal); color: #000; }
.signal-action.buy-no, .signal-action.fade { background: var(--accent-orange); color: #000; }
.signal-action.value { background: var(--success); color: #000; }
.signal-action.post-limits { background: var(--accent-teal); color: #000; }

.s8-banner-ok { color: var(--accent-orange); }
.s8-banner-warn { color: var(--danger); }
.s8-banner-pending { color: var(--text-dim); }

/* Trade-row badges (added by app.js renderTrades) */
.trade-source-auto   { background: var(--accent-orange); color: #000; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; }
.trade-source-manual { background: var(--text-faint);   color: #fff; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; }
.trade-result-win  { background: var(--success); color: #000; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; }
.trade-result-loss { background: var(--danger);  color: #fff; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; }

.cell-pnl.pos { color: var(--success); }
.cell-pnl.neg { color: var(--danger); }

/* Header AUTO indicator */
.auto-indicator { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 4px; background: var(--surface-2); color: var(--accent-teal); font-weight: 600; font-size: 11px; letter-spacing: 0.08em; }
.auto-indicator.off { color: var(--text-faint); }
.auto-indicator.hidden { display: none; }
.window-indicator { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 4px; background: var(--surface-2); color: var(--text-dim); font-weight: 600; font-size: 11px; letter-spacing: 0.08em; }

/* AUTO TRADER panel (Settings sidebar) */
.auto-trader-panel { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 12px; }
.auto-panel-head { color: var(--accent-orange); font-size: 12px; letter-spacing: 0.12em; margin: 0 0 4px; }
.auto-panel-help { color: var(--text-dim); font-size: 11px; }
.auto-mode-block { padding: 10px 12px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
.auto-mode-block[data-mode="parity"] { border-left: 2px solid var(--accent-orange-dim); }
.auto-mode-block[data-mode="live"]   { border-left: 2px solid var(--accent-orange); }
.auto-gate-hint { color: var(--text-dim); font-size: 10px; letter-spacing: 0.05em; }
.auto-gate-hint.met { color: var(--success); }
.auto-mode-strats { display: flex; flex-wrap: wrap; gap: 4px; min-height: 18px; }
.auto-strat-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 3px; background: var(--border); color: var(--text-dim); font-family: var(--font-mono); font-size: 10px; cursor: pointer; user-select: none; }
.auto-strat-chip.on { background: var(--accent-orange); color: #000; font-weight: 700; }
.auto-strat-chip.gated { background: var(--surface-2); color: var(--text-faint); cursor: not-allowed; text-decoration: line-through; }
.auto-strat-chip-reason { color: var(--text-faint); font-size: 9px; margin-left: 2px; }
.auto-size-field input { width: 100%; }
.checkbox-line:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }

/* Trade-row mode badge */
.trade-mode-paper  { background: var(--text-faint); color: #fff; padding: 1px 6px; border-radius: 3px; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; }
.trade-mode-parity { background: var(--accent-orange-dim); color: #000; padding: 1px 6px; border-radius: 3px; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; }
.trade-mode-live   { background: var(--accent-orange); color: #000; padding: 1px 6px; border-radius: 3px; font-size: 9px; font-weight: 700; letter-spacing: 0.05em; }

/* Live-confirm modal input */
#live-confirm-input { width: 100%; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-family: var(--font-mono); font-size: 13px; border-radius: 4px; margin: 8px 0 12px; }
#live-confirm-input:focus { outline: none; border-color: var(--accent-orange); }
.btn-danger { background: var(--danger); color: #fff; border: none; padding: 8px 16px; border-radius: 4px; font-weight: 700; cursor: pointer; }
.btn-danger:disabled { opacity: 0.4; cursor: not-allowed; }

/* Window pill row */
.window-pills { display: flex; gap: 6px; padding: 8px 0 12px; flex-wrap: wrap; }
.window-pill { padding: 6px 12px; background: var(--border); color: var(--text-dim); border: none; border-radius: 4px; font-family: var(--font-mono); font-size: 12px; cursor: pointer; letter-spacing: 0.05em; }
.window-pill.active { background: var(--accent-orange); color: #000; font-weight: 700; }

/* Scrollbars */
::-webkit-scrollbar       { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--surface-2); }
::-webkit-scrollbar-thumb { background: var(--accent-orange); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-orange-hot); }

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.4;
  min-width: 1180px;
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
em.hint { color: var(--text-dim); font-style: normal; font-size: 11px; }

/* ========== HEADER ========== */
.header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 22px;
  background: linear-gradient(90deg, #0F0F18 0%, #15151F 50%, #0F0F18 100%);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; flex-direction: column; gap: 2px; }
.brand-mark {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 22px;
  color: var(--accent-gold);
  letter-spacing: 0.5px;
}
.brand-sub {
  color: var(--text-dim);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.mode-switch { display: flex; gap: 0; border: 1px solid var(--border-strong); padding: 2px; background: var(--surface); }
.mode-pill {
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 1.5px;
  padding: 8px 16px;
  transition: background 120ms, color 120ms;
}
.mode-pill:hover { color: var(--text); }
.mode-pill.active { color: var(--text); background: var(--surface-2); border-left: 2px solid var(--accent-gold); }
.mode-pill.active[data-mode="paper"]  { border-left-color: var(--info);       }
.mode-pill.active[data-mode="parity"] { border-left-color: var(--accent-gold);}
.mode-pill.active[data-mode="live"]   { border-left-color: var(--accent-red); }

.status-cluster { display: flex; align-items: center; gap: 12px; justify-content: flex-end; }
.status-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: 1.5px;
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--info); box-shadow: 0 0 8px currentColor; color: var(--info); }
.status-badge.parity .status-dot { background: var(--accent-gold); color: var(--accent-gold); }
.status-badge.live   .status-dot { background: var(--accent-red);  color: var(--accent-red);  }
.icon-btn {
  background: var(--surface); color: var(--text-dim);
  border: 1px solid var(--border-strong);
  padding: 6px 10px; font-size: 14px;
}
.icon-btn:hover { color: var(--text); border-color: var(--accent-gold); }

/* ========== REGIME BAR ========== */
.regime-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  padding: 12px 22px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.regime-tile {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  padding: 10px 14px;
  cursor: pointer;
  display: flex; flex-direction: column; gap: 4px;
  position: relative;
  transition: border-color 120ms, background 120ms;
}
.regime-tile:hover { border-color: var(--text-dim); }
.regime-tile.active {
  border-color: var(--accent-gold);
  background: linear-gradient(180deg, rgba(245,166,35,0.08) 0%, var(--surface-2) 100%);
  box-shadow: inset 0 0 12px rgba(245,166,35,0.15);
}
.regime-head { display: flex; justify-content: space-between; align-items: baseline; }
.regime-id  { font-family: var(--font-mono); font-weight: 700; color: var(--text); font-size: 12px; }
.regime-status {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.5px; color: var(--text-faint);
}
.regime-tile.active .regime-status { color: var(--accent-gold); }
.regime-name { font-size: 12px; font-weight: 500; color: var(--text); }
.regime-meta { font-size: 10px; color: var(--text-dim); display: flex; gap: 8px; }
.regime-meta .pri { color: var(--info); font-family: var(--font-mono); }

/* ========== KPI ROW ========== */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  padding: 12px 22px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.kpi-label {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 1.5px; color: var(--text-dim);
  text-transform: uppercase;
}
.kpi-value {
  font-family: var(--font-mono);
  font-size: 20px; font-weight: 500; color: var(--text);
}
.kpi-sub { font-size: 10px; color: var(--text-faint); }
.kpi.good .kpi-value { color: var(--success); }
.kpi.bad  .kpi-value { color: var(--accent-red); }
.kpi.gold .kpi-value { color: var(--accent-gold); }
.kpi-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 1px;
  padding: 3px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
}
.kpi-badge.eligible { color: var(--success); border-color: var(--success); }
.kpi-badge.gold     { color: var(--accent-gold); border-color: var(--accent-gold); }
.kpi-badge.warn     { color: var(--accent-red); border-color: var(--accent-red); }

/* ========== MAIN GRID ========== */
.main-grid {
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 12px;
  padding: 12px 22px;
}
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex; flex-direction: column;
  min-height: 540px;
}
.panel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.panel-head h2 { margin: 0; font-size: 12px; letter-spacing: 2px; color: var(--text-dim); font-weight: 600; }
.panel-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }

/* ----- STRATEGY PANEL ----- */
.strategy-panel { max-height: calc(100vh - 280px); }
.strategy-list {
  list-style: none; margin: 0; padding: 0;
  flex: 1; overflow-y: auto;
}
/* Subtle scrollbar so long playbooks (study mode) don't look broken. */
.strategy-list::-webkit-scrollbar       { width: 8px; }
.strategy-list::-webkit-scrollbar-track { background: var(--surface); }
.strategy-list::-webkit-scrollbar-thumb { background: var(--border-strong); }
.strategy-list::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }
.strategy-row {
  border-bottom: 1px solid var(--border);
  padding: 10px 16px;
  display: grid;
  grid-template-columns: 14px 32px 1fr auto;
  gap: 10px; align-items: center;
  cursor: pointer;
  transition: background 100ms;
}
.strategy-row:hover { background: var(--surface-2); }
.strategy-row.expanded { background: var(--surface-2); }
.strat-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-faint); }
.strat-dot.active  { background: var(--success); box-shadow: 0 0 6px var(--success); }
.strat-dot.warming { background: var(--accent-gold); box-shadow: 0 0 6px var(--accent-gold); }
.strat-dot.killed  { background: var(--accent-red); box-shadow: 0 0 6px var(--accent-red); }
.strat-dot.idle    { background: var(--text-faint); }
.strat-id { font-family: var(--font-mono); font-weight: 700; font-size: 11px; color: var(--text); }
.strat-body { display: flex; flex-direction: column; gap: 2px; }
.strat-name { font-size: 12px; color: var(--text); font-weight: 500; }
.strat-meta { font-family: var(--font-mono); font-size: 10px; color: var(--text-dim); display: flex; gap: 10px; }
.strat-meta .pos { color: var(--success); }
.strat-meta .neg { color: var(--accent-red); }
.strat-pill {
  font-family: var(--font-mono);
  font-size: 9px; letter-spacing: 1px;
  padding: 3px 8px;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  background: var(--surface);
}
.strat-pill.paper  { color: var(--info); border-color: var(--info); }
.strat-pill.parity { color: var(--accent-gold); border-color: var(--accent-gold); }
.strat-pill.live   { color: var(--accent-red); border-color: var(--accent-red); }
.strat-pill.idle   { color: var(--text-faint); }

.strat-expand {
  grid-column: 1 / -1;
  padding: 12px 4px 4px;
  border-top: 1px dashed var(--border-strong);
  margin-top: 8px;
}
.strat-thesis { color: var(--text-dim); font-size: 11px; margin-bottom: 8px; font-style: italic; }

/* Playbook reference card — structured rules for a strategy, shown in the expand panel.
   Mono font, dim labels, brighter values. Tight grid so it's data-dense, not airy. */
.strat-playbook {
  margin: 0 0 10px;
  padding: 10px 12px;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-left: 2px solid var(--accent-gold);
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 6px 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.45;
}
.strat-playbook .pb-row { display: contents; }
.strat-playbook .pb-label {
  color: var(--text-faint);
  letter-spacing: 1.5px;
  font-weight: 700;
  text-align: right;
  padding-top: 1px;
}
.strat-playbook .pb-value { color: var(--text); white-space: pre-wrap; }
.strat-playbook .pb-bullet { line-height: 1.55; }
.strat-playbook .pb-skip   { color: var(--accent-red); }    /* pre-entry: don't open the trade */
.strat-playbook .pb-cancel { color: var(--accent-gold); }   /* post-entry: exit the live position */
.strat-playbook .pb-edge   { color: var(--accent-gold); font-style: italic; }
.strat-mini-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 10px; }
.strat-mini-table th, .strat-mini-table td { padding: 4px 6px; text-align: left; color: var(--text-dim); }
.strat-mini-table tbody tr { border-top: 1px solid var(--border); }
.strat-toggle-row { display: flex; gap: 6px; margin-top: 8px; }
.btn-tiny {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px;
  padding: 4px 10px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--text-dim);
}
.btn-tiny.on { color: var(--success); border-color: var(--success); }
.btn-tiny.off { color: var(--accent-red); border-color: var(--accent-red); }
.btn-tiny.promote {
  color: #1A1A22; background: var(--accent-gold); border-color: var(--accent-gold);
  font-weight: 700;
}
.btn-tiny.promote:hover { filter: brightness(1.1); }
.btn-tiny[disabled] { opacity: 0.4; cursor: not-allowed; }

.strat-promote-hint {
  font-family: var(--font-mono); font-size: 9px; color: var(--text-faint);
  letter-spacing: 0.5px; padding: 2px 0;
}
/* Strategy-row inline kill banner — distinct from the page-wide one. */
.strat-kill-banner {
  background: rgba(230,57,70,0.12);
  border: 1px solid var(--accent-red);
  border-left-width: 3px;
  padding: 8px 12px;
  margin-bottom: 10px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--accent-red);
}
.strat-kill-banner .kill-icon { font-size: 14px; }
.strat-kill-banner .kill-text { flex: 1; color: var(--text); }
.strat-pill.killed {
  color: var(--accent-red); border-color: var(--accent-red);
  background: rgba(230,57,70,0.12);
  animation: kill-pulse-mild 2s ease-in-out infinite;
}
@keyframes kill-pulse-mild {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* ----- RIGHT PANEL TABS ----- */
.tabs {
  display: flex; align-items: center;
  border-bottom: 1px solid var(--border);
  padding: 0 12px;
  gap: 0;
}
.tab {
  background: transparent; border: 0;
  color: var(--text-dim);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px;
  padding: 14px 16px;
  border-bottom: 2px solid transparent;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent-gold); border-bottom-color: var(--accent-gold); }
.tab-actions { margin-left: auto; padding-right: 6px; }
.tab-panel { display: none; padding: 16px; }
.tab-panel.active { display: block; }

.chart-block { margin-bottom: 18px; }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.chart-head h3 { margin: 0; font-size: 11px; letter-spacing: 2px; color: var(--text-dim); font-weight: 600; }
.chart-sub { font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); }
.chart-wrap { background: var(--surface-2); border: 1px solid var(--border); padding: 10px; height: 220px; position: relative; }
.chart-wrap canvas { width: 100% !important; height: 100% !important; }

/* ----- TRADES TABLE ----- */
.trades-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.trades-head h3 { margin: 0; font-size: 11px; letter-spacing: 2px; color: var(--text-dim); font-weight: 600; }
.trades-table-wrap { position: relative; }
.trades-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-mono); font-size: 11px;
}
.trades-table th, .trades-table td { padding: 8px 10px; text-align: left; }
.trades-table th {
  color: var(--text-dim); border-bottom: 1px solid var(--border-strong);
  font-weight: 500; letter-spacing: 1px; cursor: pointer;
  user-select: none;
}
.trades-table th:hover { color: var(--text); }
.trades-table tbody tr:nth-child(odd)  { background: var(--surface-2); }
.trades-table tbody tr:hover { background: #1B1B26; }
.trades-table td { color: var(--text); border-bottom: 1px solid var(--border); }
.cell-pnl.pos { color: var(--success); }
.cell-pnl.neg { color: var(--accent-red); }
.wl-badge {
  display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  padding: 2px 8px; min-width: 24px; text-align: center;
}
.wl-badge.win  { background: rgba(45,198,83,0.12);  color: var(--success);    border: 1px solid var(--success); }
.wl-badge.loss { background: rgba(230,57,70,0.12); color: var(--accent-red); border: 1px solid var(--accent-red); }

.empty-state {
  padding: 40px 16px; text-align: center;
  color: var(--text-dim); font-style: italic;
  border: 1px dashed var(--border-strong);
}

/* ----- SIGNALS TAB ----- */
.signals-status-row {
  display: flex; align-items: center; gap: 14px;
  padding: 8px 0 12px;
  font-family: var(--font-mono); font-size: 11px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.signals-live {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--success); letter-spacing: 1.5px;
  font-weight: 700;
}
.signals-live .live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--success); box-shadow: 0 0 6px var(--success);
  animation: live-pulse 1.6s ease-in-out infinite;
}
@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
.signals-meta { color: var(--text-dim); }
.signals-stale {
  color: var(--accent-red); border: 1px solid var(--accent-red);
  padding: 2px 8px; letter-spacing: 1px;
}
/* Pause badge for the S10/S9 status lines — shows when refresh loop is off. */
.paused-badge {
  display: inline-block;
  color: var(--accent-gold); border: 1px solid var(--accent-gold);
  background: rgba(245,166,35,0.10);
  padding: 1px 8px; margin-right: 6px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px;
  font-weight: 700;
}
.signals-error {
  background: rgba(230,57,70,0.08); border: 1px solid var(--accent-red);
  color: var(--accent-red);
  padding: 10px 14px; margin-bottom: 14px;
  font-family: var(--font-mono); font-size: 11px;
}
.signals-section { margin-bottom: 22px; }
.signals-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.signals-head h3 { margin: 0; font-size: 11px; letter-spacing: 2px; color: var(--text-dim); font-weight: 600; }
.signals-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-mono); font-size: 11px;
}
.signals-table th, .signals-table td { padding: 7px 10px; text-align: left; }
.signals-table th {
  color: var(--text-dim); border-bottom: 1px solid var(--border-strong);
  font-weight: 500; letter-spacing: 1px;
}
.signals-table tbody tr { border-bottom: 1px solid var(--border); }
.signals-table tbody tr:nth-child(odd) { background: var(--surface-2); }
.signals-table tbody tr:hover { background: #1B1B26; }
.signals-table td { color: var(--text); }
.signal-action {
  display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  padding: 2px 8px; letter-spacing: 1px; border-width: 1px; border-style: solid;
}
.signal-action.buy-no      { color: var(--accent-red); border-color: var(--accent-red); background: rgba(230,57,70,0.12); }
.signal-action.buy-yes     { color: var(--success);    border-color: var(--success);    background: rgba(45,198,83,0.12); }
.signal-action.post-limits { color: var(--accent-gold); border-color: var(--accent-gold); background: rgba(245,166,35,0.12); }
.cell-spread.warn { color: var(--accent-red); }
.cell-sum.juicy   { color: var(--accent-red); font-weight: 700; }
.cell-sum.gold    { color: var(--accent-gold); }
/* S10 gap column — red when Kalshi is overpriced (FADE), green when underpriced (VALUE). */
.cell-gap.warn    { color: var(--accent-red); font-weight: 700; }
.cell-gap.good    { color: var(--success);    font-weight: 700; }
/* S9 days-to-resolve buckets — capital lock-up urgency. */
.days-urgent { color: var(--accent-gold); font-weight: 700; }   /* < 30d */
.days-mid    { color: var(--text); }                             /* 30-90d */
.days-long   { color: var(--text-faint); }                       /* > 90d  */
.cell-profit     { color: var(--success); font-weight: 700; }
.cell-market { max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-prefill {
  background: var(--surface); color: var(--accent-gold);
  border: 1px solid var(--accent-gold);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1px;
  padding: 4px 8px;
}
.btn-prefill:hover { background: rgba(245,166,35,0.12); }
.signals-fee-note {
  margin-top: 8px;
  font-family: var(--font-mono); font-size: 10px; color: var(--text-faint);
  font-style: italic;
}

/* ----- S8 HEDGE LOCK ----- */
.s8-banner {
  padding: 8px 12px;
  margin-bottom: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-left-width: 3px;
  font-family: var(--font-mono); font-size: 11px;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.s8-banner-ok      { color: var(--success); font-weight: 700; letter-spacing: 1px; }
.s8-banner-warn    { color: var(--accent-red); font-weight: 700; letter-spacing: 1px; }
.s8-banner-pending { color: var(--text-dim); }
.s8-banner-detail  { color: var(--text-dim); }
.s8-banner code    { background: var(--bg); padding: 1px 6px; border: 1px solid var(--border); color: var(--text); }

/* Inline paper-position add form */
.paper-form {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: var(--bg);
  border: 1px dashed var(--border-strong);
  margin-bottom: 8px;
}
.paper-form-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.5px;
  color: var(--accent-gold); font-weight: 700;
  white-space: nowrap;
}
.paper-form input {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border-strong);
  padding: 6px 8px;
  font-family: var(--font-mono); font-size: 11px;
  outline: none;
}
.paper-form input:focus { border-color: var(--accent-gold); }
.paper-form input[type="text"]   { flex: 1; min-width: 200px; }
.paper-form input[type="number"] { width: 80px; }

.s8-paper-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.s8-paper-empty {
  padding: 6px 10px;
  font-family: var(--font-mono); font-size: 10px; color: var(--text-faint);
  font-style: italic;
}
.s8-paper-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 11px;
}
.s8-paper-ticker { color: var(--accent-gold); font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s8-paper-meta   { color: var(--text-dim); }

/* Source badges (LIVE / PAPER) on hedge rows */
.src-badge {
  display: inline-block;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 1px;
  padding: 2px 8px; border: 1px solid;
}
.src-live  { color: var(--success);    border-color: var(--success);    background: rgba(45,198,83,0.10); }
.src-paper { color: var(--info);       border-color: var(--info);       background: rgba(76,201,240,0.10); }

/* ----- LOG FORM ----- */
.log-form {
  background: var(--surface);
  border-top: 1px solid var(--border);
  padding: 14px 22px 18px;
  position: sticky; bottom: 0;
}
.log-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.log-head h2 { margin: 0; font-size: 12px; letter-spacing: 2px; color: var(--accent-gold); font-weight: 600; }
.log-sub { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); }

.log-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr) auto;
  gap: 10px;
  align-items: end;
}
.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field > span {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1px; color: var(--text-dim);
  text-transform: uppercase;
}
.field-wide { grid-column: span 2; }
.field input, .field select {
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 8px 10px;
  outline: none;
  transition: border-color 120ms;
}
.field input:focus, .field select:focus { border-color: var(--accent-gold); }
.seg-control { display: flex; }
.seg {
  flex: 1; background: var(--surface-2); border: 1px solid var(--border-strong);
  color: var(--text-dim); font-family: var(--font-mono); font-size: 11px;
  padding: 8px 10px; letter-spacing: 1px;
}
.seg.active[data-result="WIN"]  { background: rgba(45,198,83,0.15);  color: var(--success);    border-color: var(--success); }
.seg.active[data-result="LOSS"] { background: rgba(230,57,70,0.15); color: var(--accent-red); border-color: var(--accent-red); }
.pnl-preview {
  display: block; padding: 8px 10px;
  font-family: var(--font-mono); font-size: 14px; font-weight: 500;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  color: var(--text);
}
.pnl-preview.pos { color: var(--success); border-color: var(--success); }
.pnl-preview.neg { color: var(--accent-red); border-color: var(--accent-red); }

.form-actions {
  display: flex; flex-direction: column; gap: 6px;
  align-self: end;
}

/* ----- BUTTONS ----- */
.btn-primary {
  background: var(--accent-gold);
  color: #1A1A22;
  border: 0;
  font-family: var(--font-mono); font-weight: 700;
  font-size: 11px; letter-spacing: 1.5px;
  padding: 9px 18px;
  transition: filter 120ms;
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-ghost {
  background: var(--surface); color: var(--text-dim);
  border: 1px solid var(--border-strong);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px;
  padding: 8px 14px;
}
.btn-ghost:hover { color: var(--text); border-color: var(--accent-gold); }
.btn-sm { padding: 6px 10px; font-size: 10px; }
.btn-danger {
  background: var(--surface); color: var(--accent-red);
  border: 1px solid var(--accent-red);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 1.5px;
  padding: 8px 14px;
}
.btn-danger:hover { background: rgba(230,57,70,0.1); }

/* ========== KILL SWITCH BANNER ========== */
.kill-banner {
  background: var(--accent-red);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  gap: 14px;
  padding: 12px 20px;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 1px;
  font-weight: 700;
  animation: kill-pulse 1.4s ease-in-out infinite;
  border-bottom: 2px solid #fff;
}
.kill-icon { font-size: 18px; }
.kill-ack {
  background: #fff; color: var(--accent-red);
  border: 0; padding: 6px 14px;
  font-family: var(--font-mono); font-weight: 700; font-size: 11px; letter-spacing: 1px;
}
.kill-ack:hover { background: #ffe6e6; }
@keyframes kill-pulse {
  0%, 100% { background: var(--accent-red); }
  50%      { background: #c0202c; }
}

.hidden { display: none !important; }

/* ========== MODAL ========== */
.modal {
  position: fixed; inset: 0; background: rgba(0,0,0,0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
}
.modal-card {
  background: var(--surface); border: 1px solid var(--accent-red);
  width: 520px; max-width: 92vw; padding: 22px;
}
.modal-card h2 { margin: 0 0 4px; font-size: 14px; letter-spacing: 1px; color: var(--accent-red); }
.modal-sub { color: var(--text-dim); font-size: 11px; margin: 0 0 12px; }
.modal-card textarea {
  width: 100%; background: var(--surface-2); border: 1px solid var(--border-strong);
  color: var(--text); font-family: var(--font-mono); font-size: 12px;
  padding: 10px; resize: vertical; outline: none;
}
.modal-card textarea:focus { border-color: var(--accent-gold); }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }

/* Promotion modal — gold accent (vs the kill modal's red). */
.modal-card.promo-card { border-color: var(--accent-gold); }
.modal-card.promo-card h2 { color: var(--accent-gold); }
.promo-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  background: var(--surface-2); padding: 10px;
  border: 1px solid var(--border-strong);
  margin: 10px 0;
}
.promo-stat { display: flex; flex-direction: column; gap: 2px; }
.promo-stat-label {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: 1.5px;
  color: var(--text-dim); text-transform: uppercase;
}
.promo-stat-value {
  font-family: var(--font-mono); font-size: 16px; font-weight: 500;
  color: var(--text);
}
.promo-switch-line {
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px;
  font-size: 12px; color: var(--text);
  cursor: pointer;
}
.promo-switch-line input[type="checkbox"] {
  width: 14px; height: 14px; accent-color: var(--accent-gold); cursor: pointer; margin: 0;
}

/* ========== SETTINGS SIDEBAR ========== */
.settings-sidebar {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 380px; background: var(--surface);
  border-left: 1px solid var(--border-strong);
  z-index: 50; overflow-y: auto;
  box-shadow: -8px 0 24px rgba(0,0,0,0.5);
}
.settings-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.settings-head h2 { margin: 0; font-size: 12px; letter-spacing: 2px; color: var(--accent-gold); }
.settings-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.settings-divider { border: 0; border-top: 1px solid var(--border); margin: 8px 0; }
.settings-actions { display: flex; gap: 6px; }
.settings-actions.stack { flex-direction: column; }
.import-label { display: inline-block; cursor: pointer; text-align: center; }

/* Settings checkbox row — keeps the same vertical rhythm as text fields. */
.field-checkbox .checkbox-line {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-size: 12px; color: var(--text);
  text-transform: none; letter-spacing: 0;
  cursor: pointer;
}
.field-checkbox input[type="checkbox"] {
  width: 14px; height: 14px;
  accent-color: var(--accent-gold);
  cursor: pointer;
  margin: 0;
}
.field-checkbox .checkbox-text { font-weight: 500; }
.field-checkbox em.hint { display: block; margin-top: 4px; padding-left: 22px; }
.settings-meta h4 { margin: 0 0 8px; font-size: 11px; letter-spacing: 1.5px; color: var(--text-dim); font-weight: 500; }
.inv-log { list-style: none; margin: 0; padding: 0; max-height: 200px; overflow-y: auto; }
.inv-log li {
  border-left: 2px solid var(--accent-red); padding: 6px 10px;
  background: var(--surface-2); margin-bottom: 6px;
  font-family: var(--font-mono); font-size: 10px; color: var(--text-dim);
}
.inv-log li .inv-ts { color: var(--text-faint); display: block; margin-bottom: 2px; }
.inv-log li .inv-text { color: var(--text); white-space: pre-wrap; }

/* Promotion history — structured audit trail. Distinct from investigation log. */
.promo-log { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.promo-log-empty {
  border-left: 2px solid var(--border-strong);
  padding: 6px 10px; background: var(--surface-2);
  font-family: var(--font-mono); font-size: 10px; color: var(--text-dim);
}
.promo-log-entry {
  border-left: 2px solid var(--accent-gold);
  padding: 8px 10px; background: var(--surface-2);
  margin-bottom: 6px;
  font-family: var(--font-mono);
}
.promo-log-when    { font-size: 10px; color: var(--text-faint); margin-bottom: 4px; }
.promo-log-line    { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.promo-log-strat   { font-size: 11px; font-weight: 700; color: var(--text); }
.promo-log-arrow   { font-size: 10px; color: var(--accent-gold); letter-spacing: 1px; }
.promo-log-stats   { font-size: 10px; color: var(--text-dim); }

/* ========== TOAST ========== */
.toast-stack {
  position: fixed; bottom: 20px; right: 20px;
  display: flex; flex-direction: column; gap: 8px;
  z-index: 80;
}
.toast {
  background: var(--surface); border: 1px solid var(--accent-gold);
  color: var(--text); font-family: var(--font-mono); font-size: 12px;
  padding: 10px 14px; min-width: 280px;
  border-left: 4px solid var(--accent-gold);
  animation: toast-in 200ms ease-out;
}
.toast.success { border-color: var(--success); border-left-color: var(--success); }
.toast.warn    { border-color: var(--accent-red); border-left-color: var(--accent-red); }
.toast .toast-title { display: block; font-weight: 700; margin-bottom: 2px; color: var(--accent-gold); font-size: 11px; letter-spacing: 1px; }
.toast.success .toast-title { color: var(--success); }
.toast.warn    .toast-title { color: var(--accent-red); }
@keyframes toast-in {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ========== UTIL ========== */
.text-pos  { color: var(--success); }
.text-neg  { color: var(--accent-red); }
.text-gold { color: var(--accent-gold); }
.mono { font-family: var(--font-mono); }