/* === Theta — Options Dashboard ============================= */
:root {
  --bg: #0a0d12;
  --surface: #11151c;
  --surface-2: #161b24;
  --border: #1f2630;
  --border-strong: #2a3441;
  --text: #e6ebf2;
  --text-dim: #98a2b3;
  --text-faint: #5d6878;
  --accent: #5eead4;     /* teal */
  --accent-dim: #134e4a;
  --green: #22c55e;
  --red: #ef4444;
  --amber: #f59e0b;
  --blue: #60a5fa;
  --shadow: 0 1px 0 rgba(255,255,255,0.04), 0 8px 24px rgba(0,0,0,0.4);
  font-family: 'Inter', system-ui, sans-serif;
  font-feature-settings: "cv11", "ss01";
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--text); }
body { font-size: 14px; line-height: 1.45; }
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums lining-nums; }

button { font-family: inherit; cursor: pointer; }
input, select { font-family: inherit; }

.dashboard {
  display: grid;
  grid-template-columns: 232px 1fr;
  grid-template-rows: 56px 1fr;
  height: 100dvh;
}

/* === Sidebar ============================================== */
.sidebar {
  grid-row: 1 / -1;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  color: var(--accent);
}
.brand-name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; color: var(--text); }

.sidebar nav { padding: 12px 8px; display: flex; flex-direction: column; gap: 2px; }
.nav-item {
  background: none; border: none; color: var(--text-dim);
  text-align: left; padding: 9px 12px; border-radius: 6px;
  font-size: 13px; font-weight: 500;
  transition: background 120ms ease, color 120ms ease;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--surface-2); color: var(--text); box-shadow: inset 2px 0 0 var(--accent); }

.sidebar-foot { padding: 8px; margin-top: auto; border-top: 1px solid var(--border); }
.watchlist-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; color: var(--text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.icon-btn { background: none; border: none; color: var(--text-dim); font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 4px; }
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.watchlist { list-style: none; padding: 0; margin: 0; }
.watchlist li {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: 4px; cursor: pointer; font-size: 13px;
}
.watchlist li:hover { background: var(--surface-2); }
.watchlist li.active { background: var(--accent-dim); }
.watchlist li .sym { font-weight: 600; }
.watchlist li .px { font-family: 'JetBrains Mono', monospace; color: var(--text-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.watchlist li .rm { color: var(--text-faint); padding: 0 4px; opacity: 0; transition: opacity 120ms; }
.watchlist li:hover .rm { opacity: 1; }
.watchlist li .rm:hover { color: var(--red); }
.watchlist li .chg-up { color: var(--green); }
.watchlist li .chg-dn { color: var(--red); }

/* === Header =============================================== */
.header {
  grid-column: 2;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 8px 20px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: 10;
  min-height: 56px;
}
.header-meta { font-size: 11px !important; gap: 10px !important; }
.header-meta span { white-space: nowrap; }
.header-symbol { display: flex; align-items: baseline; gap: 14px; }
#sym-input {
  background: transparent; border: none; color: var(--text);
  font-size: 18px; font-weight: 700; width: 90px; padding: 4px 6px;
  border-radius: 4px; letter-spacing: 0.02em; text-transform: uppercase;
}
#sym-input:focus { outline: 1px solid var(--accent); background: var(--surface-2); }
.header-price { font-family: 'JetBrains Mono', monospace; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.header-change { font-family: 'JetBrains Mono', monospace; font-size: 13px; font-variant-numeric: tabular-nums; }
.up { color: var(--green); }
.down { color: var(--red); }

.header-meta { color: var(--text-dim); font-size: 12px; display: flex; gap: 18px; flex-wrap: wrap; }
.header-meta span b { color: var(--text); font-weight: 500; font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; }

.header-actions { display: flex; align-items: center; gap: 8px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.dot.live { background: var(--green); box-shadow: 0 0 0 0 rgba(34,197,94, 0.6); animation: pulse 2s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(34,197,94, 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(34,197,94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94, 0); }
}
.muted { color: var(--text-dim); }
.small { font-size: 12px; }

/* === Main / Cards ========================================= */
.main {
  grid-column: 2;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px 24px 40px;
}
.tab { display: flex; flex-direction: column; gap: 16px; }
.tab.hidden { display: none; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.card h3 {
  margin: 0 0 12px;
  font-size: 13px; font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.card-head h3 { margin: 0; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } }

/* === KPI row ============================================== */
.kpi-row { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
@media (max-width: 1100px) { .kpi-row { grid-template-columns: repeat(3, 1fr); } }
.kpi {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.kpi-label { color: var(--text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.kpi-val { font-size: 17px; font-weight: 600; }

/* === Charts =============================================== */
.chart { width: 100%; height: 380px; }
.chart.sm { height: 220px; }
.chart.lg { height: 460px; }

/* === Segmented control ==================================== */
.seg { display: inline-flex; background: var(--surface-2); border-radius: 6px; padding: 2px; gap: 2px; }
.seg button {
  background: none; border: none; color: var(--text-dim);
  padding: 4px 12px; font-size: 12px; font-weight: 500; border-radius: 4px;
}
.seg button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px rgba(0,0,0,0.4); }
.seg button:hover:not(.on) { color: var(--text); }

/* === Options chain ======================================== */
.chain-controls { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.chain-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-faint); text-transform: uppercase; font-weight: 600; letter-spacing: 0.06em; }
.chain-controls select { background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); padding: 6px 10px; border-radius: 5px; }

.chain-card { padding: 0; overflow: hidden; }
.chain-grid-head {
  display: grid; grid-template-columns: 1fr 80px 1fr;
  background: var(--surface-2); padding: 8px 12px; font-size: 11px; font-weight: 600;
  color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em;
  border-bottom: 1px solid var(--border);
}
.calls-head { text-align: right; padding-right: 12px; color: var(--green); }
.puts-head { text-align: left; padding-left: 12px; color: var(--red); }
.strike-head { text-align: center; color: var(--text); }

.chain-cols-head {
  display: grid; grid-template-columns: 1fr 80px 1fr;
  font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
  padding: 6px 12px;
  background: var(--bg);
}
.col-grp { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; align-items: center; }
.call-cols { text-align: right; }
.put-cols { text-align: right; }

.chain-body { max-height: calc(100dvh - 280px); overflow-y: auto; overscroll-behavior: contain; }
.chain-row {
  display: grid; grid-template-columns: 1fr 80px 1fr;
  border-bottom: 1px solid var(--border);
  font-family: 'JetBrains Mono', monospace; font-size: 12px; font-variant-numeric: tabular-nums;
  padding: 6px 12px;
}
.chain-row .strike { text-align: center; font-weight: 600; color: var(--text); }
.chain-row .strike.atm { color: var(--accent); }
.chain-row .calls, .chain-row .puts { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; text-align: right; }
.chain-row .calls { color: var(--text-dim); }
.chain-row .puts { color: var(--text-dim); }
.chain-row .itm { background: rgba(94, 234, 212, 0.06); }
.chain-row:hover { background: var(--surface-2); }

/* === Builder ============================================= */
.builder-row { display: grid; grid-template-columns: 500px 1fr; gap: 16px; }
@media (max-width: 1100px) { .builder-row { grid-template-columns: 1fr; } }

.builder-form label { display: block; font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-bottom: 10px; }
.builder-form label input, .builder-form label select {
  display: block; width: 100%; margin-top: 4px;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong);
  padding: 7px 10px; border-radius: 5px; font-size: 13px;
}
.legs-table { width: 100%; border-collapse: collapse; margin: 8px 0; table-layout: fixed; }
.legs-table th { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; padding: 6px 3px; text-align: left; }
.legs-table th:nth-child(1) { width: 56px; }
.legs-table th:nth-child(2) { width: 50px; }
.legs-table th:nth-child(3), .legs-table th:nth-child(4) { width: 62px; }
.legs-table th:nth-child(5), .legs-table th:nth-child(6) { width: 44px; }
.legs-table th:nth-child(7) { width: 50px; }
.legs-table th:nth-child(8) { width: 22px; }
.legs-table td { padding: 4px 2px; }
.legs-table input, .legs-table select {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  padding: 4px 5px; border-radius: 4px; font-size: 12px; width: 100%;
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  appearance: none; -webkit-appearance: none;
}
.legs-table select { background-image: linear-gradient(45deg, transparent 50%, var(--text-dim) 50%), linear-gradient(135deg, var(--text-dim) 50%, transparent 50%); background-position: calc(100% - 9px) center, calc(100% - 5px) center; background-size: 4px 4px; background-repeat: no-repeat; padding-right: 14px; }
.legs-table .leg-rm { background: none; border: none; color: var(--text-faint); padding: 2px 6px; }
.legs-table .leg-rm:hover { color: var(--red); }

.btn-primary {
  background: var(--accent); color: #052e2b;
  border: none; padding: 8px 16px; border-radius: 6px;
  font-weight: 600; font-size: 13px; transition: background 120ms ease;
}
.btn-primary:hover { background: #2dd4bf; }
.btn-secondary {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong);
  padding: 7px 14px; border-radius: 6px; font-size: 13px; font-weight: 500;
}
.btn-secondary:hover { background: var(--border); }

.row { display: flex; gap: 8px; }

.stats { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; font-size: 13px; }
.stats[hidden] { display: none !important; }
.stats div { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed var(--border); }
.stats .lbl { color: var(--text-dim); }
.stats .val { font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums; font-weight: 600; }

/* === Backtest ============================================ */
.bt-controls { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 16px; }
.bt-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.bt-controls input, .bt-controls select { background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong); padding: 7px 10px; border-radius: 5px; font-size: 13px; min-width: 120px; }

/* === Alerts ============================================== */
#al-symbol, #al-threshold, #al-rule {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border-strong);
  padding: 7px 10px; border-radius: 5px; font-size: 13px; width: 100%; margin-bottom: 10px;
}
#tab-alerts label { display: block; font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-bottom: 4px; }
.alert-item, .event-item {
  display: grid; grid-template-columns: 60px 1fr auto; align-items: center; gap: 8px;
  padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 13px;
}
.alert-item .badge {
  font-size: 10px; padding: 2px 6px; border-radius: 3px;
  background: var(--surface-2); color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
}
.alert-item.inactive { opacity: 0.5; }
.alert-item .sym { font-weight: 600; }
.alert-item .desc { color: var(--text-dim); }
.event-item time { color: var(--text-faint); font-family: 'JetBrains Mono', monospace; font-size: 11px; }
.empty { color: var(--text-faint); padding: 18px; text-align: center; font-style: italic; }

/* === Data-source badge =================================== */
.badge-src {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
  background: var(--surface-2); color: var(--text-dim);
  border: 1px solid var(--border-strong);
  font-family: 'JetBrains Mono', monospace;
}
.badge-src.alpaca { color: var(--accent); border-color: var(--accent-dim); background: rgba(94,234,212,0.06); }
.badge-src.yfinance { color: var(--amber); border-color: rgba(245,158,11,0.3); background: rgba(245,158,11,0.06); }

/* === Greeks panel ======================================== */
.greeks-panel {
  display: none;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}
.greeks-panel.show { display: grid; }
.greeks-panel .gk {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px;
  background: var(--surface-2);
  border-radius: 5px;
  border: 1px solid var(--border);
}
.greeks-panel .gk-lbl { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.greeks-panel .gk-val { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.greeks-panel .gk-val.pos { color: var(--green); }
.greeks-panel .gk-val.neg { color: var(--red); }

/* === Trade log table ===================================== */
.trades-wrap { max-height: 420px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--border); border-radius: 6px; }
.trades-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.trades-table thead { position: sticky; top: 0; background: var(--surface-2); z-index: 1; }
.trades-table th {
  text-align: left; padding: 8px 10px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint);
  font-weight: 600; border-bottom: 1px solid var(--border);
}
.trades-table td {
  padding: 6px 10px;
  font-family: 'JetBrains Mono', monospace; font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--border);
  color: var(--text-dim);
}
.trades-table tr:hover td { background: var(--surface-2); color: var(--text); }
.trades-table td.pnl-pos { color: var(--green); font-weight: 600; }
.trades-table td.pnl-neg { color: var(--red); font-weight: 600; }
.trades-table td.legs-cell { font-size: 11px; max-width: 280px; }

/* === What-if sliders ===================================== */
.whatif-block { margin-top: 14px; }
.whatif-block summary {
  cursor: pointer; padding: 8px 10px;
  font-size: 11px; font-weight: 600; color: var(--text-dim);
  background: var(--surface-2); border-radius: 5px;
  text-transform: uppercase; letter-spacing: 0.06em;
  border: 1px solid var(--border);
  user-select: none;
}
.whatif-block summary:hover { color: var(--text); }
.whatif-block[open] summary { color: var(--accent); border-color: var(--accent-dim); }
.whatif-controls { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 10px; margin: 12px 0 8px; align-items: end; }
.whatif-controls label { display: flex; flex-direction: column; gap: 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-faint); font-weight: 600; }
.whatif-controls label span { color: var(--accent); font-size: 12px; align-self: flex-end; }
.whatif-controls input[type=range] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 4px;
  background: var(--surface-2); border-radius: 2px;
  outline: none;
}
.whatif-controls input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); cursor: pointer;
  border: 2px solid var(--bg);
}
.whatif-controls input[type=range]::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent); cursor: pointer; border: 2px solid var(--bg);
}
#wf-result { padding: 8px 10px; background: var(--surface-2); border-radius: 5px; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
#wf-result .delta { font-weight: 600; }
#wf-result .delta.up { color: var(--green); }
#wf-result .delta.down { color: var(--red); }

/* === Saved strategies ==================================== */
.saved-strats { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.saved-strats:empty { display: none; }
.saved-strat-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; background: var(--surface-2); border-radius: 5px;
  border: 1px solid var(--border);
  font-size: 12px;
}
.saved-strat-item:hover { border-color: var(--border-strong); }
.saved-strat-item .name { font-weight: 600; cursor: pointer; flex: 1; }
.saved-strat-item .name:hover { color: var(--accent); }
.saved-strat-item .meta { color: var(--text-faint); font-size: 11px; margin-right: 8px; }
.saved-strat-item .del { background: none; border: none; color: var(--text-faint); padding: 2px 6px; cursor: pointer; }
.saved-strat-item .del:hover { color: var(--red); }
.saved-strats-head { font-size: 10px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-bottom: 2px; padding-left: 2px; }

/* === Keyboard hint ======================================= */
.kbd-hint { text-align: center; padding: 16px 0 8px; opacity: 0.6; }
.kbd-hint kbd {
  display: inline-block; padding: 1px 6px; margin: 0 1px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  background: var(--surface-2); border: 1px solid var(--border-strong);
  border-radius: 3px; box-shadow: 0 1px 0 var(--border-strong);
}

/* === Trade log exit-reason badges ======================== */
.trades-table .exit-badge {
  display: inline-block; padding: 1px 6px; border-radius: 3px;
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
  font-family: 'Inter', sans-serif;
}
.exit-badge.expiry { background: rgba(94,234,212,0.1); color: var(--accent); }
.exit-badge.profit_target { background: rgba(34,197,94,0.12); color: var(--green); }
.exit-badge.stop_loss { background: rgba(239,68,68,0.12); color: var(--red); }

/* Plotly tweaks */
.js-plotly-plot .plotly text { fill: var(--text-dim) !important; font-family: 'Inter', sans-serif !important; }

/* ============================================================
   SYSTEM TAB — Trading System integration
   ============================================================ */
.card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; flex-wrap: wrap; gap: 8px; }
.card-header h3 { margin: 0; }

#tab-system .card { margin-bottom: 12px; }
#tab-system .kpi-row { grid-template-columns: repeat(8, 1fr); margin-bottom: 12px; }
@media (max-width: 1300px) { #tab-system .kpi-row { grid-template-columns: repeat(4, 1fr); } }

.sys-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sys-header-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sys-header-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sys-version-label { display: inline-flex; flex-direction: column; gap: 4px; font-size: 10px; color: var(--text-faint); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.sys-version-label select {
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  padding: 6px 28px 6px 10px; border-radius: 6px; font-size: 13px; font-family: 'Inter', sans-serif;
  min-width: 240px;
}
#sys-version-meta { max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sys-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sys-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--surface-2); color: var(--text-dim);
  padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 500;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.sys-chip.ok { background: rgba(34,197,94,0.12); color: var(--green); }
.sys-chip.warn { background: rgba(251,191,36,0.12); color: #fbbf24; }
.sys-chip.danger { background: rgba(239,68,68,0.15); color: var(--red); font-weight: 600; }
.sys-chip.muted { background: transparent; color: var(--text-faint); }

.sys-upload-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 6px 12px; border-radius: 6px; font-size: 12px;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  font-family: 'Inter', sans-serif;
}
.sys-upload-btn:hover { background: var(--border); }
.sys-upload-btn.drag-over {
  background: rgba(110, 231, 210, 0.18);
  border-color: rgba(110, 231, 210, 0.6);
  color: rgba(110, 231, 210, 1);
  box-shadow: 0 0 0 2px rgba(110, 231, 210, 0.25);
}

.btn-ghost {
  background: transparent; border: 1px solid var(--border); color: var(--text-dim);
  padding: 6px 12px; border-radius: 6px; font-size: 12px; cursor: pointer;
  font-family: 'Inter', sans-serif;
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }
.btn-ghost.danger:hover { background: rgba(239,68,68,0.1); color: var(--red); border-color: rgba(239,68,68,0.3); }

.chart-sm { height: 220px; }

.sys-filters { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sys-filters select {
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  padding: 5px 26px 5px 8px; border-radius: 5px; font-size: 12px; font-family: 'Inter', sans-serif;
  min-width: 140px;
}

.table-wrap { overflow: auto; max-height: 520px; border: 1px solid var(--border); border-radius: 8px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.data-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--surface-2); color: var(--text-faint);
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border);
}
.data-table tbody td { padding: 7px 10px; border-bottom: 1px solid var(--border); color: var(--text); }
.data-table tbody tr:hover { background: var(--surface-2); }
.data-table tbody td.r, .data-table thead th.r { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tbody td.empty { text-align: center; padding: 30px; color: var(--text-faint); }
.data-table.compact tbody td { padding: 5px 8px; font-size: 11.5px; }
.data-table .mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }
.data-table .small { font-size: 11.5px; color: var(--text-dim); }
.data-table .up { color: var(--green); }
.data-table .down { color: var(--red); }

.sys-event {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-size: 10.5px; font-weight: 600; font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: var(--surface-2); color: var(--text-dim);
}
.sys-event.built { background: rgba(94,234,212,0.12); color: var(--accent); }
.sys-event.submit { background: rgba(34,197,94,0.15); color: var(--green); }
.sys-event.reject { background: rgba(239,68,68,0.12); color: var(--red); }

.sys-errors { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow: auto; }
.sys-error-row {
  display: grid; grid-template-columns: 50px 170px 1fr; gap: 8px; align-items: start;
  padding: 6px 8px; border-radius: 6px; background: var(--surface-2);
}
.empty-msg { padding: 20px; text-align: center; }

.sys-config-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px;
}
.sys-config-item {
  display: flex; flex-direction: column; gap: 4px;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
}
.sys-config-item .lbl {
  font-size: 9.5px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
}
.sys-config-item .val {
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--text);
  word-break: break-word;
}
.sys-config-item .val.danger { color: var(--red); font-weight: 600; }
.sys-config-item .val.warn { color: #fbbf24; font-weight: 600; }

/* --- System tab: package capabilities card ---------------------- */
.sys-cap-card { padding: 14px 16px; }
.sys-cap-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.sys-cap-badge.ok { background: rgba(34,197,94,0.12); color: #22c55e; border: 1px solid rgba(34,197,94,0.35); }
.sys-cap-badge.warn { background: rgba(251,191,36,0.12); color: #fbbf24; border: 1px solid rgba(251,191,36,0.35); }
.sys-cap-summary { margin: 6px 0 10px 0; }
.sys-cap-modules { display: flex; flex-wrap: wrap; gap: 6px; }
.sys-mod-chip {
  display: inline-flex; align-items: center;
  padding: 3px 8px; border-radius: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10.5px; font-weight: 500;
  border: 1px solid var(--border); cursor: help;
}
.sys-mod-chip.ok { background: rgba(34,197,94,0.06); color: #86efac; border-color: rgba(34,197,94,0.25); }
.sys-mod-chip.missing { background: rgba(239,68,68,0.06); color: #fca5a5; border-color: rgba(239,68,68,0.3); text-decoration: line-through; }

/* --- Paper-trade replay --------------------------------------------- */
.sys-replay-btn {
  background: transparent; border: 1px solid var(--border);
  color: #86efac; padding: 3px 9px; border-radius: 4px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px; font-weight: 600; cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.sys-replay-btn:hover:not(:disabled) {
  background: rgba(34,197,94,0.10); border-color: rgba(34,197,94,0.55);
}
.sys-replay-btn:disabled { opacity: 0.6; cursor: progress; }

.sys-replay-card .card-header { align-items: center; }
.sys-replay-controls {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.sys-replay-broker {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.06em;
}
.sys-replay-broker select {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 4px 8px; font-size: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.sys-replay-safety { padding: 6px 0 10px 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.sys-replay-row.flash-new {
  animation: replayFlash 1.4s ease-out;
}
@keyframes replayFlash {
  0%   { background: rgba(34,197,94,0.30); }
  100% { background: transparent; }
}

#sys-replays.compact td, #sys-replays.compact th { padding: 5px 8px; }

/* Replay + Preview button cell */
.sys-replay-btn-cell {
  display: inline-flex; gap: 4px; align-items: center;
}
.sys-preview-btn {
  background: transparent; border: 1px solid var(--border);
  color: var(--accent, #5eead4); padding: 3px 6px; border-radius: 4px;
  font-size: 12px; line-height: 1; cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.sys-preview-btn:hover {
  background: rgba(94,234,212,0.10); border-color: rgba(94,234,212,0.55);
}

/* Mode chip beside broker name in replay table */
.sys-mode-chip {
  display: inline-block; padding: 1px 6px; margin-left: 6px;
  border-radius: 3px; font-size: 10px; letter-spacing: 0.06em;
  font-weight: 600; text-transform: uppercase;
  background: rgba(94,234,212,0.12); color: var(--accent, #5eead4);
  border: 1px solid rgba(94,234,212,0.25);
}
.sys-mode-chip.live {
  background: rgba(34,197,94,0.12); color: #86efac;
  border-color: rgba(34,197,94,0.30);
}

/* NO CHAIN status badge — yellow / warning */
.exit-badge.no-chain {
  background: rgba(251,191,36,0.14); color: #fbbf24;
}

/* Chain preview popover */
.sys-preview-popover {
  position: absolute; z-index: 1000;
  width: 360px; max-width: calc(100vw - 16px);
  background: var(--surface, #0d1117);
  border: 1px solid var(--border, #2a2f3a);
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.4);
  padding: 10px 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  animation: previewFadeIn 140ms ease-out;
}
@keyframes previewFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.sys-preview-popover.loading { min-height: 60px; }
.sys-preview-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border, #2a2f3a);
  font-size: 12px;
}
.sys-preview-close {
  background: transparent; border: none; color: var(--text-faint);
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.sys-preview-close:hover { color: var(--text); }
.sys-preview-meta {
  margin-bottom: 6px; color: var(--text-faint);
}
.sys-preview-warnings {
  background: rgba(251,191,36,0.08);
  border: 1px solid rgba(251,191,36,0.25);
  border-radius: 4px;
  padding: 4px 8px; margin-bottom: 8px;
  color: #fbbf24; font-size: 11px; line-height: 1.5;
}
.sys-preview-empty { padding: 8px 0; }
.sys-preview-error {
  color: var(--red, #ef4444); font-size: 11px; padding: 6px 0;
}
table.sys-preview-legs {
  width: 100%; border-collapse: collapse; margin-top: 4px;
}
table.sys-preview-legs th, table.sys-preview-legs td {
  padding: 4px 6px; border-bottom: 1px solid var(--border, #2a2f3a);
  font-size: 11px;
}
table.sys-preview-legs th {
  text-align: left; color: var(--text-faint);
  font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em;
  font-size: 10px;
}
table.sys-preview-legs th.r, table.sys-preview-legs td.r { text-align: right; }
.sys-preview-foot {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--border, #2a2f3a);
  color: var(--text-faint); text-align: right;
}

/* ============ Alpaca credentials modal ===================================== */
.sys-creds-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(8, 11, 16, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: sys-creds-fade 140ms ease-out;
}
@keyframes sys-creds-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
.sys-creds-modal {
  width: min(440px, calc(100vw - 32px));
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  animation: sys-creds-slide 180ms cubic-bezier(.2,.8,.2,1);
}
@keyframes sys-creds-slide {
  from { transform: translateY(8px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.sys-creds-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}
.sys-creds-head strong {
  color: var(--text);
  font-size: 14px;
  letter-spacing: 0.01em;
}
.sys-creds-close {
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.sys-creds-close:hover { color: var(--text); }
.sys-creds-body {
  padding: 14px 16px 4px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sys-creds-body p { margin: 0 0 4px; line-height: 1.45; }
.sys-creds-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: var(--text-dim);
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.sys-creds-label input {
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  color: var(--text);
  font: 13px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  padding: 10px 12px;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.sys-creds-label input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.18);
}
.sys-creds-err {
  color: #fca5a5;
  font-size: 12px;
  padding: 6px 10px;
  background: rgba(220, 38, 38, 0.12);
  border: 1px solid rgba(220, 38, 38, 0.35);
  border-radius: 6px;
}
.sys-creds-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 16px;
  border-top: 1px solid var(--border);
}
.sys-creds-foot .btn {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text);
  transition: background 120ms ease, border-color 120ms ease;
}
.sys-creds-foot .btn.ghost:hover { background: var(--surface); }
.sys-creds-foot .btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #07221f;
  font-weight: 600;
}
.sys-creds-foot .btn.primary:hover { filter: brightness(1.08); }

/* ============ Decision Analyze drawer ====================================== */
.sys-analyze-btn {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 13px;
  cursor: pointer;
  transition: background 100ms, border-color 100ms;
}
.sys-analyze-btn:hover { background: rgba(94, 234, 212, 0.08); border-color: var(--accent); }

.sys-analyze-drawer {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(680px, 100vw);
  background: var(--surface-2);
  border-left: 1px solid var(--border-strong);
  box-shadow: -16px 0 48px rgba(0, 0, 0, 0.6);
  z-index: 900;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 240ms cubic-bezier(.2,.8,.2,1);
  overscroll-behavior: contain;
}
.sys-analyze-drawer.open { transform: translateX(0); }

.sys-analyze-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  flex-shrink: 0;
}
.sys-analyze-title { font-size: 15px; font-weight: 600; color: var(--text); }
.sys-analyze-sub { margin-top: 2px; }
.sys-analyze-actions { display: flex; gap: 8px; align-items: center; }
.sys-analyze-mode {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  padding: 5px 8px;
  font-size: 12px;
  cursor: pointer;
}
.sys-analyze-refresh, .sys-analyze-close {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-dim);
  width: 28px; height: 28px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.sys-analyze-close { font-size: 18px; }
.sys-analyze-refresh:hover, .sys-analyze-close:hover { color: var(--text); border-color: var(--accent); }

.sys-analyze-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px 18px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.sys-analyze-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 48px 12px;
  color: var(--text-dim);
}
.spinner {
  width: 18px; height: 18px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.sys-analyze-error {
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.32);
  color: #fca5a5;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 13px;
}
.sys-analyze-warn {
  background: rgba(251, 191, 36, 0.08);
  border: 1px solid rgba(251, 191, 36, 0.32);
  color: #fcd34d;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  margin-top: 8px;
}

.sys-analyze-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.sys-analyze-section h4 {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
}
.sys-analyze-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.sys-analyze-section-head h4 { margin: 0; }
.sys-mode-chip.synth {
  background: rgba(153, 163, 178, 0.16);
  color: var(--text-dim);
  border: 1px solid var(--border-strong);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 4px;
  letter-spacing: 0.06em;
}

.sys-analyze-headline {
  display: grid;
  grid-template-columns: auto 1fr 1fr 1fr;
  gap: 16px;
  align-items: center;
  margin-bottom: 14px;
}
.sys-headline-pill {
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 8px;
  letter-spacing: 0.05em;
  text-align: center;
}
.sys-headline-pill.bullish { background: rgba(52, 211, 153, 0.16); color: #6ee7b7; border: 1px solid rgba(52, 211, 153, 0.4); }
.sys-headline-pill.bearish { background: rgba(248, 113, 113, 0.16); color: #fca5a5; border: 1px solid rgba(248, 113, 113, 0.4); }
.sys-headline-pill.neutral { background: rgba(153, 163, 178, 0.12); color: var(--text-dim); border: 1px solid var(--border-strong); }
.sys-headline-meta .big { font-size: 18px; font-weight: 600; color: var(--text); }

.sys-gauge { margin: 8px 0 14px; }
.sys-gauge-track {
  position: relative;
  height: 6px;
  border-radius: 3px;
  background: var(--surface-2);
  display: flex;
  overflow: hidden;
}
.sys-gauge-zone { flex: 1; }
.sys-gauge-zone.bear { background: linear-gradient(90deg, rgba(248,113,113,0.5), rgba(248,113,113,0.2)); }
.sys-gauge-zone.neutral { background: rgba(153,163,178,0.18); }
.sys-gauge-zone.bull { background: linear-gradient(90deg, rgba(52,211,153,0.2), rgba(52,211,153,0.5)); }
.sys-gauge-marker {
  position: absolute;
  top: -3px;
  width: 4px;
  height: 12px;
  border-radius: 2px;
  transform: translateX(-50%);
  box-shadow: 0 0 8px currentColor;
}
.sys-gauge-labels { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; }

.sys-vote-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; font-size: 12px; }
.sys-vote-list li { display: flex; align-items: center; gap: 6px; }
.sys-vote-list strong { color: var(--text); font-weight: 500; }
.vote-pos { color: #6ee7b7; }
.vote-neg { color: #fca5a5; }
.vote-neu { color: var(--text-dim); }

.sys-analyze-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.sys-analyze-card {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.sys-analyze-card .card-title {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.sys-meter { margin: 6px 0 8px; }
.sys-meter-label { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 3px; color: var(--text); }
.sys-meter-track {
  position: relative;
  height: 4px;
  background: var(--surface);
  border-radius: 2px;
  overflow: hidden;
}
.sys-meter-fill { height: 100%; border-radius: 2px; transition: width 200ms ease; }
.sys-meter-mid {
  position: absolute;
  top: -2px;
  width: 1px;
  height: 8px;
  background: var(--border-strong);
}
.sys-meter.empty { padding: 2px 0; }

.sys-kv {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 3px 0;
  color: var(--text);
}
.sys-kv span:first-child { color: var(--text-dim); }

.sys-greeks-net {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  background: var(--surface-2);
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  margin-bottom: 12px;
}
.sys-greeks-net .sys-kv {
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  gap: 2px;
}
.sys-greeks-net .sys-kv span:last-child { font-size: 13px; font-weight: 600; color: var(--text); }

.sys-legs-wrap { overflow-x: auto; }
.sys-legs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.sys-legs-table th, .sys-legs-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.sys-legs-table th { color: var(--text-dim); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; font-size: 10px; }
.sys-legs-table .r { text-align: right; }
.sys-legs-table tr.leg-buy td:first-child { color: #6ee7b7; font-weight: 600; }
.sys-legs-table tr.leg-sell td:first-child { color: #fca5a5; font-weight: 600; }

.sys-payoff-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 8px;
}
.sys-payoff-cell {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.sys-payoff-cell .big { font-size: 16px; font-weight: 600; margin-top: 2px; }
.sys-payoff-cell .big.ok { color: #6ee7b7; }
.sys-payoff-cell .big.bad { color: #fca5a5; }

@media (max-width: 720px) {
  .sys-analyze-drawer { width: 100vw; }
  .sys-analyze-grid, .sys-payoff-grid { grid-template-columns: 1fr; }
  .sys-greeks-net { grid-template-columns: repeat(2, 1fr); }
  .sys-analyze-headline { grid-template-columns: 1fr 1fr; }
}

/* ===== Analyze drawer extras (payoff curve, scenarios, advisor, patterns) ===== */

.sys-chart-box {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 4px;
  margin: 8px 0;
  min-height: 220px;
}

/* Scenario heatmap tabs */
.sys-scenario-tabs { display: flex; gap: 4px; }
.sys-scenario-tab {
  background: transparent;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 9px;
  font-size: 11px;
  cursor: pointer;
  font-family: ui-monospace, monospace;
}
.sys-scenario-tab:hover { color: var(--text); border-color: var(--accent); }
.sys-scenario-tab.active {
  background: rgba(94, 234, 212, 0.12);
  color: var(--accent);
  border-color: var(--accent);
}
.sys-scenario-note { margin-top: 4px; }

/* Strategy advisor */
.sys-advisor-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sys-advisor-row {
  display: grid;
  grid-template-columns: 28px 1fr 110px;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 9px 12px;
  align-items: center;
}
.sys-advisor-rank {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  color: var(--accent);
  font-weight: 600;
  text-align: center;
}
.sys-advisor-name {
  color: var(--text);
  font-weight: 500;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}
.sys-advisor-reasons {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.sys-advisor-reasons li {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.4;
}
.sys-advisor-score { display: flex; flex-direction: column; gap: 3px; align-items: stretch; }
.sys-advisor-score-bar {
  height: 6px;
  background: var(--surface);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.sys-advisor-score-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), #6ee7b7);
  transition: width 200ms ease;
}
.sys-advisor-score .mono { text-align: right; color: var(--text); }

.sys-strat-chip {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-dim);
}
.sys-strat-chip.bullish { background: rgba(52,211,153,0.10); color: #6ee7b7; border-color: rgba(52,211,153,0.3); }
.sys-strat-chip.bearish { background: rgba(248,113,113,0.10); color: #fca5a5; border-color: rgba(248,113,113,0.3); }
.sys-strat-chip.neutral { background: rgba(153,163,178,0.10); color: var(--text-dim); border-color: var(--border-strong); }
.sys-strat-chip.volatility { background: rgba(252,211,77,0.10); color: #fcd34d; border-color: rgba(252,211,77,0.3); }
.sys-strat-chip.long_vol { background: rgba(167,139,250,0.10); color: #c4b5fd; border-color: rgba(167,139,250,0.3); }
.sys-strat-chip.short_vol { background: rgba(94,234,212,0.10); color: var(--accent); border-color: rgba(94,234,212,0.3); }
.sys-strat-chip.defined { background: rgba(52,211,153,0.08); color: #6ee7b7; border-color: rgba(52,211,153,0.25); }
.sys-strat-chip.naked { background: rgba(248,113,113,0.08); color: #fca5a5; border-color: rgba(248,113,113,0.25); }

/* Pattern matcher */
.sys-pattern-target {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 7px 10px;
  margin-bottom: 8px;
}
.sys-pattern-agg {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.sys-pattern-cell {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}
.sys-pattern-cell .big { font-size: 15px; font-weight: 600; color: var(--text); margin-top: 2px; }
.sys-pattern-cell .big.ok { color: #6ee7b7; }
.sys-pattern-cell .big.bad { color: #fca5a5; }
.sys-pattern-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.sys-pattern-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.sys-pattern-table thead th {
  background: var(--surface-2);
  color: var(--text-dim);
  text-align: left;
  font-weight: 500;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.sys-pattern-table thead th.r,
.sys-pattern-table tbody td.r { text-align: right; }
.sys-pattern-table tbody td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.sys-pattern-table tbody tr:last-child td { border-bottom: none; }
.sys-pattern-table tbody tr:hover { background: rgba(94,234,212,0.04); }
.sys-pattern-table .ok { color: #6ee7b7; }
.sys-pattern-table .bad { color: #fca5a5; }
.sys-pattern-table .muted { color: var(--text-faint); }
.sys-event-chip {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 3px;
  background: rgba(248,113,113,0.10);
  color: #fca5a5;
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid rgba(248,113,113,0.25);
  font-family: ui-monospace, monospace;
}

@media (max-width: 720px) {
  .sys-pattern-agg { grid-template-columns: repeat(2, 1fr); }
  .sys-advisor-row { grid-template-columns: 22px 1fr 90px; }
}

/* === Build & Submit order modal ============================ */
.sys-order-modal {
  max-width: 720px !important;
  width: 92vw !important;
}
.sys-order-body {
  max-height: 70vh;
  overflow-y: auto;
}
.sys-order-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.sys-order-summary-cell {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
}
.sys-order-summary-cell .big {
  font-size: 16px;
  font-weight: 600;
  margin-top: 2px;
}
.sys-order-warn {
  color: #fcd34d;
  background: rgba(252,211,77,0.10);
  border: 1px solid rgba(252,211,77,0.30);
  border-radius: 4px;
  padding: 6px 8px;
  margin-bottom: 8px;
}
.sys-order-legs {
  margin-bottom: 12px;
}
.sys-order-legs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.sys-order-legs-table th {
  text-align: left;
  font-weight: 500;
  color: var(--text-dim);
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
}
.sys-order-legs-table th.r,
.sys-order-legs-table td.r { text-align: right; }
.sys-order-legs-table td {
  padding: 5px 6px;
  border-bottom: 1px solid var(--border);
}
.sys-order-controls {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-bottom: 10px;
}
.sys-order-controls .sys-creds-label {
  margin: 0;
}
.sys-order-controls input,
.sys-order-controls select {
  width: 100%;
  margin-top: 2px;
}
.sys-build-order-btn {
  margin-top: 6px;
  padding: 4px 8px;
  font-size: 11px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  color: var(--accent);
  border-radius: 4px;
  cursor: pointer;
  transition: all .15s;
}
.sys-build-order-btn:hover {
  background: var(--accent);
  color: var(--surface);
  border-color: var(--accent);
}
.sys-strat-chip.long {
  background: rgba(52,211,153,0.15);
  color: #6ee7b7;
}
.sys-strat-chip.short {
  background: rgba(248,113,113,0.15);
  color: #fca5a5;
}

@media (max-width: 720px) {
  .sys-order-summary { grid-template-columns: repeat(2, 1fr); }
  .sys-order-controls { grid-template-columns: 1fr 1fr; }
}

/* Auto-trade card */
.auto-trade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin: 10px 0 16px;
}
.auto-trade-grid label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--muted, #666);
}
.auto-trade-grid label > input,
.auto-trade-grid label > select {
  padding: 6px 8px; border: 1px solid var(--border, #d5d5d5);
  border-radius: 6px; background: var(--bg-elev, #fff);
  font-family: inherit; font-size: 13px;
}
.auto-trade-grid-wide { grid-column: 1 / -1; }
.auto-trade-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px; align-items: center;
}
.auto-trade-actions .danger { color: #c0392b; }
.auto-trade-log-title {
  margin: 14px 0 6px; font-size: 13px; font-weight: 600;
  color: var(--muted, #666); text-transform: uppercase;
  letter-spacing: 0.04em;
}
#auto-trade-status { margin-bottom: 12px; }
#auto-trade-status .bad { color: #c0392b; }
.sys-event-chip.ok { background: #d5f5e3; color: #14532d; }
.sys-event-chip.bad { background: #fadbd8; color: #7a1f17; }

/* ---------- Recent auto-orders (Wave 30) ---------- */
.ao-empty {
  padding: 22px 18px;
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  text-align: center;
  color: var(--muted, #9aa3ad);
}
.ao-empty-icon { font-size: 22px; margin-bottom: 4px; opacity: 0.8; }
.ao-empty-title { font-size: 13px; font-weight: 600; color: #d5dbe2; margin-bottom: 2px; }
.ao-empty-sub { font-size: 12px; opacity: 0.8; }

.ao-summary {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 4px 0 10px;
}
.ao-sum-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: #c5cbd2;
}
.ao-sum-pill b { color: #ffffff; font-weight: 700; }
.ao-sum-pill.ok    { background: rgba(89,230,160,0.10); border-color: rgba(89,230,160,0.28); color: #b6f0cd; }
.ao-sum-pill.ok b  { color: #59e6a0; }
.ao-sum-pill.bad   { background: rgba(255,107,129,0.10); border-color: rgba(255,107,129,0.28); color: #ffc4cd; }
.ao-sum-pill.bad b { color: #ff8a9b; }
.ao-sum-pill.mode  { background: rgba(95,212,255,0.08); border-color: rgba(95,212,255,0.22); color: #b8e1f0; }
.ao-sum-pill.muted { color: #8a929a; }

.ao-table-wrap { overflow-x: auto; border-radius: 8px; border: 1px solid rgba(255,255,255,0.06); }
.ao-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: rgba(255,255,255,0.015);
}
.ao-table thead th {
  text-align: left; padding: 7px 10px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  color: #8a929a; font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.025);
  position: sticky; top: 0;
}
.ao-table thead th.r { text-align: right; }
.ao-table tbody td { padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); vertical-align: middle; }
.ao-table tbody tr:last-child td { border-bottom: none; }
.ao-table tbody tr:hover { background: rgba(95,212,255,0.045); }
.ao-table .r { text-align: right; }

.ao-row[data-status="submitted"] { box-shadow: inset 3px 0 0 0 rgba(89,230,160,0.55); }
.ao-row[data-status="skipped"]   { box-shadow: inset 3px 0 0 0 rgba(150,150,160,0.40); }
.ao-row[data-status="rejected"], .ao-row[data-status="failed"], .ao-row[data-status="error"], .ao-row[data-status="canceled"] {
  box-shadow: inset 3px 0 0 0 rgba(255,107,129,0.55);
}

.ao-time-rel { font-weight: 600; color: #d5dbe2; font-size: 11.5px; }
.ao-time-abs { font-size: 10.5px; }
.ao-sym-main { font-weight: 700; color: #f0f3f6; font-size: 12.5px; }
.ao-sym-sub  { font-size: 10.5px; margin-top: 1px; }
.ao-strat { color: #c5cbd2; }
.ao-qty { font-weight: 600; color: #e8ecf0; }

.ao-side {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em;
  background: rgba(255,255,255,0.06);
  color: #aab3bf;
  margin-right: 4px;
}
.ao-side.long  { background: rgba(89,230,160,0.14); color: #59e6a0; }
.ao-side.short { background: rgba(255,107,129,0.14); color: #ff8a9b; }

.ao-mode {
  display: inline-block; padding: 1px 5px;
  border-radius: 3px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ao-mode.paper { background: rgba(95,212,255,0.10); color: #5fd4ff; }
.ao-mode.live  { background: rgba(255,180,90,0.12); color: #ffb45a; }

.ao-debit  { color: #ff8a9b; font-weight: 600; }
.ao-credit { color: #59e6a0; font-weight: 600; }

.ao-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 600;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  color: #c5cbd2;
  text-transform: capitalize;
}
.ao-chip-icon { font-size: 10px; line-height: 1; }
.ao-chip.ok   { background: rgba(89,230,160,0.12); border-color: rgba(89,230,160,0.32); color: #6cf0aa; }
.ao-chip.bad  { background: rgba(255,107,129,0.12); border-color: rgba(255,107,129,0.32); color: #ff8a9b; }
.ao-chip.warn { background: rgba(255,180,90,0.12); border-color: rgba(255,180,90,0.30); color: #ffc278; }

.ao-order-id {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  background: rgba(255,255,255,0.04);
  padding: 2px 4px 2px 7px;
  border-radius: 4px;
  color: #c5cbd2;
  border: 1px solid rgba(255,255,255,0.06);
}
.ao-copy {
  background: transparent; border: none; color: #8a929a; cursor: pointer;
  font-size: 12px; padding: 0 4px; line-height: 1;
  transition: color 0.12s ease;
}
.ao-copy:hover { color: #5fd4ff; }
.ao-copy.ok { color: #59e6a0; }
.ao-error { color: #ff8a9b; }
.ao-dec { letter-spacing: 0; }

@media (max-width: 720px) {
  .ao-table thead th, .ao-table tbody td { padding: 6px 7px; font-size: 11px; }
  .ao-time-abs, .ao-sym-sub { display: none; }
}
.creds-status-inline { display: inline-flex; align-items: center; }
.sys-creds-warn {
  background: #fef3c7; color: #78350f;
  border-left: 3px solid #d97706;
  padding: 8px 10px; margin-bottom: 10px;
  border-radius: 4px; font-size: 13px;
}
.sys-creds-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--muted, #666);
  margin-top: 4px;
}

/* Wave 4 Stage 2 — Bot subprocess card */
.bot-log-pre {
  background: #0b0f14;
  color: #c6d3df;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.06);
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 4px 0 0 0;
}

/* Wave 5 — Bot metrics strip + log toolbar */
.bot-metrics-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin: 4px 0 8px 0;
}
.bot-metric {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.bot-metric-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.55);
}
.bot-metric-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 600;
  color: #e7eef5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bot-log-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
  flex-wrap: wrap;
}
.bot-log-filters {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}
.bot-log-filters label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.bot-log-search {
  flex: 1 1 200px;
  background: #0b0f14;
  color: #d6e1ec;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 12px;
  min-width: 140px;
}
.bot-log-line { padding: 0; line-height: 1.45; }
.bot-log-line.lvl-error   { color: #ff7a7a; }
.bot-log-line.lvl-warn    { color: #ffd166; }
.bot-log-line.lvl-wrapper { color: #5fc7ff; font-style: italic; }

/* Wave 6 — Bot observability */
.bot-heartbeat-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; margin: 8px 0;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  font-size: 12px;
}
.bot-heartbeat-dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block;
}
.bot-heartbeat-fresh { background: #4caf50; box-shadow: 0 0 6px #4caf50; animation: hbPulse 2s infinite; }
.bot-heartbeat-stale { background: #e57373; box-shadow: 0 0 6px #e57373; }
.bot-heartbeat-unknown { background: #777; }
@keyframes hbPulse { 0%,100% { opacity:1 } 50% { opacity: 0.4 } }
.bot-heartbeat-label { color: #888; }
.bot-heartbeat-text { font-family: ui-monospace, monospace; font-weight: 600; }

.bot-obs-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: 8px 0;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.bot-obs-tab.active, .bot-audit-tab.active {
  background: #2a5a8a !important;
  color: #fff !important;
  border-color: #2a5a8a !important;
}
.bot-obs-panel {
  padding: 8px 0;
}
.bot-obs-filters {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  margin-bottom: 8px;
}
.bot-obs-filters select {
  padding: 4px 6px; font-size: 12px;
}
.bot-obs-tablewrap {
  max-height: 320px; overflow: auto;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
}
.bot-obs-table {
  width: 100%; border-collapse: collapse;
  font-size: 11px; font-family: ui-monospace, monospace;
}
.bot-obs-table th, .bot-obs-table td {
  padding: 4px 8px; text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  white-space: nowrap;
}
.bot-obs-table th {
  position: sticky; top: 0;
  background: #1a1a1a;
  color: #aaa; font-weight: 600;
  text-transform: uppercase; font-size: 10px;
}
.bot-obs-table tbody tr:hover { background: rgba(255,255,255,0.03); }
.bot-dec-acc-yes { color: #4caf50; font-weight: bold; }
.bot-dec-acc-no { color: #e57373; }

.bot-iv-spark {
  width: 100%; max-width: 720px;
  background: #0e0e0e;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 4px;
  display: block;
}

.bot-fill-stats {
  font-family: ui-monospace, monospace; font-size: 12px;
  padding: 6px 10px; margin-bottom: 8px;
  background: rgba(92,200,255,0.06);
  border-left: 3px solid #5cc8ff;
  border-radius: 3px;
}

.bot-audit-subtabs {
  border-bottom: none;
  margin-bottom: 6px;
}

/* ============================== Wave 7 ============================== */
.insights-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
.insights-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px;
  padding: 10px 12px;
}
.insights-card-wide { grid-column: 1 / -1; }
.insights-card-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.7);
  margin-bottom: 8px;
}
.rejects-row { cursor: pointer; }
.rejects-row:hover { background: rgba(94,234,212,0.06) !important; }
.good { color: #2ecc71; }
.bad  { color: #e74c3c; }

/* v3.8.29.27 — staleness pills for the positions tab */
.pill {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 16px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.pill.good  { background: rgba(46,204,113,0.12); color: #2ecc71; border-color: rgba(46,204,113,0.30); }
.pill.warn  { background: rgba(251,191,36,0.12); color: #fbbf24; border-color: rgba(251,191,36,0.35); }
.pill.bad   { background: rgba(231,76,60,0.12);  color: #e74c3c; border-color: rgba(231,76,60,0.35); }
.pill.muted { background: rgba(255,255,255,0.04); color: rgba(255,255,255,0.5); border-color: rgba(255,255,255,0.10); }

/* Heatmap */
.heatmap-wrap { display: flex; flex-direction: column; gap: 4px; }

/* Config snapshot */
.config-snapshot details {
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 4px;
  margin-bottom: 6px;
  padding: 4px 8px;
}
.config-snapshot summary {
  cursor: pointer;
  padding: 4px 0;
  font-size: 12px;
}
.config-table { margin-top: 6px; }
.config-table td { padding: 2px 6px; word-break: break-all; }
.config-table td:first-child { color: rgba(255,255,255,0.6); width: 40%; }

/* Candlesticks */
.candles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
.score-bar-wrap { display: flex; flex-direction: column; gap: 6px; }
.score-bar {
  display: flex;
  width: 100%;
  height: 18px;
  background: #1a1a1a;
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.08);
}
.score-bar-bull { background: #2ecc71; height: 100%; transition: width 200ms ease; }
.score-bar-bear { background: #e74c3c; height: 100%; transition: width 200ms ease; }
.top-patterns { display: flex; flex-direction: column; gap: 8px; }
.top-pattern-row {
  padding: 6px 8px;
  background: rgba(255,255,255,0.02);
  border-left: 2px solid rgba(94,234,212,0.4);
  border-radius: 3px;
}
.badge-confirmed {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(94,234,212,0.15);
  color: #5eead4;
  border: 1px solid rgba(94,234,212,0.3);
  margin-left: 6px;
}

@media (max-width: 900px) {
  .insights-grid, .candles-grid { grid-template-columns: 1fr; }
}

/* ===== Wave 8: Lifecycle / Positions / Calibration / Pattern Lab ===== */
.kind-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
}
.kind-row {
  display: flex;
  justify-content: space-between;
  padding: 3px 8px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 3px;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.kind-name {
  color: rgba(255, 255, 255, 0.7);
  text-transform: lowercase;
}
.kind-count {
  color: #5eead4;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.patternlab-row { cursor: pointer; transition: background 120ms ease; }
.patternlab-row:hover { background: rgba(94, 234, 212, 0.06) !important; }
.patternlab-row td { transition: background 120ms ease; }

/* ---- Wave 9 deep observability ---- */
.bot-health-badge { display:inline-block; padding:4px 10px; border-radius:12px; font-weight:600; font-size:11px; letter-spacing:0.5px; background:#333; color:#ddd; }
.bot-health-badge.status-healthy { background:#1b3d1f; color:#7fdc8a; }
.bot-health-badge.status-warn { background:#3d3a1a; color:#e5d36b; }
.bot-health-badge.status-degraded { background:#4a2e1a; color:#e8a26b; }
.bot-health-badge.status-stale { background:#2a3a4a; color:#7fb6dc; }
.bot-health-badge.status-killed { background:#4a1f1f; color:#e57878; }
.bot-health-badge.status-unknown { background:#333; color:#888; }
.bot-health-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:8px; margin-top:8px; }
.bot-health-tile { background:#1a1f26; border:1px solid #2a2f36; border-radius:6px; padding:8px 10px; }
.bot-health-tile-val { font-size:15px; font-weight:600; color:#eee; margin-top:2px; word-break:break-word; }
.bot-obs-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:760px) { .bot-obs-grid2 { grid-template-columns:1fr; } }
.section-label { font-size:11px; text-transform:uppercase; letter-spacing:0.6px; color:#888; margin-bottom:4px; font-weight:600; }
.bot-bar-list { display:flex; flex-direction:column; gap:4px; }
.bot-bar-row { display:grid; grid-template-columns:120px 1fr 60px; align-items:center; gap:8px; font-size:12px; }
.bot-bar-label { color:#bbb; font-weight:500; }
.bot-bar-track { height:14px; background:#1a1f26; border:1px solid #2a2f36; border-radius:3px; position:relative; overflow:hidden; }
.bot-bar-fill { height:100%; }
.bot-bar-fill.pos { background:linear-gradient(90deg, #1f5026, #4caf50); }
.bot-bar-fill.neg { background:linear-gradient(90deg, #5a2424, #d35454); }
.bot-bar-value { color:#ddd; text-align:right; font-variant-numeric:tabular-nums; font-size:11px; }

/* Wave 9b — Alpha Vantage sentiment / movers coloring */
.av-pos { color: #7fdc8a; font-weight: 600; }
.av-neg { color: #e57878; font-weight: 600; }
#bot-av-news-items a { color: #7fb6dc; text-decoration: none; }
#bot-av-news-items a:hover { text-decoration: underline; }

/* Wave 9c: Config editor */
.bot-cfg-editor {
  width: 100%;
  min-height: 360px;
  max-height: 60vh;
  margin-top: 8px;
  padding: 10px 12px;
  background: #0e1117;
  color: #d4d4d4;
  border: 1px solid #2a2f3a;
  border-radius: 4px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.45;
  white-space: pre;
  overflow: auto;
  resize: vertical;
}
.bot-cfg-editor:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 1px #3b82f6; }
.bot-cfg-statusrow { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; gap: 12px; flex-wrap: wrap; }
#bot-cfg-pathline { font-family: ui-monospace, Menlo, Consolas, monospace; margin-top: 6px; }
.bot-cfg-restore-btn { padding: 2px 8px; }

/* ============================================================
   Wave 9d — Protective orders console
   ============================================================ */
.prot-chip {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  background: #1f2937;
  color: #d1d5db;
  text-transform: uppercase;
}
.prot-chip.ok { background: rgba(34,197,94,0.14); color: #4ade80; border-color: rgba(34,197,94,0.3); }
.prot-chip.off { background: rgba(120,120,120,0.10); color: #6b7280; border-color: rgba(120,120,120,0.2); }
.prot-chip.kind-stop { background: rgba(239,68,68,0.14); color: #fca5a5; border-color: rgba(239,68,68,0.3); }
.prot-chip.kind-take_profit { background: rgba(34,197,94,0.14); color: #86efac; border-color: rgba(34,197,94,0.3); }
.prot-chip.kind-trailing { background: rgba(234,179,8,0.14); color: #facc15; border-color: rgba(234,179,8,0.3); }
.prot-chip.kind-synthetic { background: rgba(168,85,247,0.14); color: #d8b4fe; border-color: rgba(168,85,247,0.3); }
.prot-chip.kind-oco { background: rgba(59,130,246,0.14); color: #93c5fd; border-color: rgba(59,130,246,0.3); }
.prot-chip.src-managed_exits { background: rgba(59,130,246,0.10); color: #93c5fd; }
.prot-chip.src-exit_orders { background: rgba(20,184,166,0.10); color: #5eead4; }
.prot-chip.src-synthetic { background: rgba(168,85,247,0.10); color: #d8b4fe; }
.prot-chip.src-oco { background: rgba(245,158,11,0.10); color: #fcd34d; }

.bot-prot-warnings {
  margin: 8px 0;
  padding: 8px 12px;
  background: rgba(234,179,8,0.10);
  border: 1px solid rgba(234,179,8,0.35);
  border-radius: 6px;
  color: #fcd34d;
  font-size: 13px;
}

.btn.danger {
  background: rgba(239,68,68,0.14);
  border-color: rgba(239,68,68,0.45);
  color: #fca5a5;
}
.btn.danger:hover { background: rgba(239,68,68,0.22); border-color: rgba(239,68,68,0.6); }
.btn.danger:disabled { opacity: 0.45; cursor: not-allowed; }

.bot-prot-panic-modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.bot-prot-panic-modal[hidden] { display: none; }
.bot-prot-panic-card {
  background: #0f172a;
  border: 1px solid rgba(239,68,68,0.45);
  border-radius: 10px;
  padding: 16px 18px;
  max-width: 560px;
  width: 92%;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.bot-prot-panic-title {
  font-size: 15px;
  font-weight: 700;
  color: #fca5a5;
  margin-bottom: 8px;
  letter-spacing: 0.01em;
}
.bot-prot-pre {
  background: #020617;
  border: 1px solid #1f2937;
  border-radius: 6px;
  padding: 8px;
  font-size: 11px;
  color: #94a3b8;
  max-height: 220px;
  overflow: auto;
  margin: 6px 0;
}

/* ============================================================
   Wave 9e — Export bot tree
   ============================================================ */
.export-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 8px;
}
.export-stat {
  background: #0b1220;
  border: 1px solid #1f2937;
  border-radius: 6px;
  padding: 10px 12px;
}
.export-stat-k {
  font-size: 11px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.export-stat-v {
  font-size: 18px;
  font-weight: 600;
  color: #e5e7eb;
  font-family: ui-monospace, Menlo, Consolas, monospace;
}
#bot-exp-list a.btn { margin-right: 4px; }

/* ===== Connections card (System tab) ===== */
.sys-conn-card { padding: 14px 16px; }
.sys-conn-card .card-header kbd {
  display: inline-block;
  border: 1px solid #1f2937;
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 1px 6px;
  font: 11px ui-monospace, Menlo, Consolas, monospace;
  background: #0b1220;
  color: #cbd5e1;
}
.sys-conn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.sys-conn-tile {
  background: #0b1220;
  border: 1px solid #1f2937;
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color .15s;
}
.sys-conn-tile:hover { border-color: #334155; }
.sys-conn-head { display: flex; align-items: center; gap: 10px; }
.sys-conn-logo {
  width: 32px; height: 32px;
  border-radius: 6px;
  background: linear-gradient(135deg, #f5c842, #d99c1e);
  color: #1a0f00;
  font-weight: 700;
  font-size: 16px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.sys-conn-logo.danger { background: linear-gradient(135deg, #ef4444, #b91c1c); color: #fff; }
.sys-conn-logo.av { background: linear-gradient(135deg, #3b82f6, #1d4ed8); color: #fff; font-style: italic; }
.sys-conn-title { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.sys-conn-title strong { color: #e5e7eb; font-size: 13px; }
.sys-conn-sub { font-size: 11px; }
.sys-conn-pill {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #1f2937;
  color: #94a3b8;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-weight: 600;
  flex-shrink: 0;
}
.sys-conn-pill.ok { background: rgba(34, 197, 94, 0.15); color: #4ade80; }
.sys-conn-pill.warn { background: rgba(245, 158, 11, 0.15); color: #fbbf24; }
.sys-conn-actions { display: flex; gap: 6px; }
.sys-conn-actions .btn-secondary, .sys-conn-actions .btn-ghost {
  font-size: 12px;
  padding: 5px 10px;
  flex: 1;
}

/* AV-only mode hint inside the creds modal */
.sys-creds-modal[data-mode="alphavantage"] .alpaca-only { display: none; }
.sys-creds-modal:not([data-mode="alphavantage"]) .av-only { display: none; }
.sys-creds-mode-tabs {
  display: flex;
  gap: 4px;
  background: #0b1220;
  border: 1px solid #1f2937;
  border-radius: 6px;
  padding: 3px;
  margin-bottom: 12px;
}
.sys-creds-mode-tab {
  flex: 1;
  background: transparent;
  border: 0;
  color: #94a3b8;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  transition: background .15s, color .15s;
}
.sys-creds-mode-tab:hover { color: #e5e7eb; }
.sys-creds-mode-tab.active { background: #1e293b; color: #f8fafc; }
.sys-creds-help {
  font-size: 11px;
  color: #64748b;
  padding: 6px 0 0;
}
.sys-creds-help a { color: #60a5fa; text-decoration: none; }
.sys-creds-help a:hover { text-decoration: underline; }
.sys-creds-verify-result {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
}
.sys-creds-verify-result.ok { background: rgba(34, 197, 94, 0.12); color: #86efac; border-left: 3px solid #22c55e; }
.sys-creds-verify-result.err { background: rgba(239, 68, 68, 0.12); color: #fca5a5; border-left: 3px solid #ef4444; }

/* ================================================================ */
/* Wave 12 — Overview operational visibility (Trade Gating + Bridge) */
/* ================================================================ */
.ov-bot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.ov-gating-card .card-head,
.ov-bridge-card .card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ov-gating-card h3,
.ov-bridge-card h3 { margin: 0; font-size: 13px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--text); }

.ov-gating-totals,
.ov-bridge-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.ov-stat {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ov-stat-k {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-faint);
  font-weight: 600;
}
.ov-stat-v {
  font-size: 18px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.ov-stat.orphan.active {
  border-color: #b3261e;
  background: linear-gradient(180deg, rgba(179, 38, 30, 0.18), var(--surface-2));
}
.ov-stat.orphan.active .ov-stat-v { color: #ff8b85; }

.ov-gating-section { margin-top: 12px; }
.ov-gating-subtitle {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  margin-bottom: 6px;
}

.ov-bar-list { display: flex; flex-direction: column; gap: 4px; }
.ov-bar-row {
  display: grid;
  grid-template-columns: 180px 1fr 48px;
  align-items: center;
  gap: 8px;
}
.ov-bar-lbl {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-dim);
}
.ov-bar-track {
  height: 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
}
.ov-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent));
  transition: width 200ms ease-out;
}
.ov-bar-cnt { text-align: right; color: var(--text); font-weight: 600; }

.ov-mini-table { width: 100%; border-collapse: collapse; }
.ov-mini-table th,
.ov-mini-table td {
  padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.ov-mini-table th { color: var(--text-faint); text-align: left; font-weight: 600; }
.ov-mini-table td.r,
.ov-mini-table th.r { text-align: right; }

.ov-bridge-prune {
  margin-bottom: 10px;
  padding: 6px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text-dim);
}
.ov-bridge-prune .mono { color: var(--accent); }

.ov-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ov-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
}
.ov-chip-cnt {
  background: rgba(179, 38, 30, 0.25);
  color: #ff9d97;
  border-radius: 999px;
  padding: 0 6px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ================================================================ */
/* Wave 12 — Command Palette                                        */
/* ================================================================ */
#cmd-palette-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 10vh;
}
#cmd-palette-modal .pal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
#cmd-palette-modal .pal-shell {
  position: relative;
  width: 540px; max-width: calc(100vw - 32px);
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  display: flex; flex-direction: column;
}
#cmd-palette-modal .pal-input {
  background: var(--surface);
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-size: 15px;
  padding: 14px 16px;
  outline: none;
}
#cmd-palette-modal .pal-list {
  max-height: 50vh;
  overflow-y: auto;
  padding: 6px 0;
}
#cmd-palette-modal .pal-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  cursor: pointer;
  color: var(--text-dim);
}
#cmd-palette-modal .pal-row.active {
  background: var(--surface-2);
  color: var(--text);
  box-shadow: inset 2px 0 0 var(--accent);
}
#cmd-palette-modal .pal-row-hint {
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
}
#cmd-palette-modal .pal-foot {
  border-top: 1px solid var(--border);
  padding: 8px 16px;
  background: var(--surface-2);
}
#cmd-palette-modal .pal-empty { padding: 14px 16px; }

.pal-flash {
  animation: pal-flash 1.4s ease-out;
}
@keyframes pal-flash {
  0%   { box-shadow: 0 0 0 2px var(--accent); }
  100% { box-shadow: 0 0 0 0 rgba(94, 234, 212, 0); }
}

/* ================================================================ */
/* Wave 13 — Header ops strip + toasts + chain ATM + watchlist polish */
/* ================================================================ */

/* Header ops strip */
.header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.ops-strip {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-right: 6px;
  padding-right: 8px;
  border-right: 1px solid var(--border);
  flex-wrap: nowrap;
}
.ops-pill[hidden] { display: none !important; }
.ops-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
}
.ops-pill:hover { background: var(--surface); border-color: var(--border-strong); }
.ops-pill .ops-lbl {
  color: var(--text-faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 9px;
}
.ops-pill .ops-val {
  color: var(--text);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.ops-pill .ops-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--text-faint);
  box-shadow: 0 0 0 0 currentColor;
}
/* Bot state colors */
#ops-bot-state[data-state="running"] { border-color: rgba(94, 234, 212, 0.4); }
#ops-bot-state[data-state="running"] .ops-dot {
  background: var(--accent);
  animation: ops-pulse 2.2s ease-in-out infinite;
}
#ops-bot-state[data-state="stopped"] .ops-dot,
#ops-bot-state[data-state="halted"] .ops-dot { background: #ff8b85; }
#ops-bot-state[data-state="paused"] .ops-dot,
#ops-bot-state[data-state="killed"] .ops-dot { background: #ffb85f; }
#ops-bot-state.stale {
  border-color: rgba(255, 184, 95, 0.5);
}
#ops-bot-state.stale .ops-dot { background: #ffb85f; animation: none; }
@keyframes ops-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(94, 234, 212, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.25); }
}
#ops-killswitch {
  background: linear-gradient(180deg, rgba(179, 38, 30, 0.25), rgba(179, 38, 30, 0.1));
  border-color: #b3261e;
  color: #ff8b85;
  font-weight: 700;
}
#ops-orphan {
  background: linear-gradient(180deg, rgba(179, 38, 30, 0.25), rgba(179, 38, 30, 0.1));
  border-color: #b3261e;
}
#ops-orphan .ops-val { color: #ff9d97; }

.ops-cmd-btn {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--text-dim);
}
.ops-cmd-btn:hover { background: var(--surface); color: var(--text); border-color: var(--border-strong); }

/* Toasts */
.toast-root {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 10000;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 240px;
  max-width: 420px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45);
  animation: toast-in 200ms cubic-bezier(0.2, 0.9, 0.3, 1.4);
  border-left-width: 3px;
}
.toast.out { animation: toast-out 200ms ease-in forwards; }
.toast-msg { font-size: 13px; color: var(--text); flex: 1; }
.toast-x {
  background: none; border: none; color: var(--text-faint);
  cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px;
}
.toast-x:hover { color: var(--text); }
.toast-info { border-left-color: var(--accent); }
.toast-ok   { border-left-color: #5eea9a; }
.toast-warn { border-left-color: #ffb85f; }
.toast-err  { border-left-color: #ff8b85; }
@keyframes toast-in {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes toast-out {
  to { transform: translateX(20px); opacity: 0; }
}

/* Chain ATM row highlight */
.chain-row.atm-row {
  background: linear-gradient(90deg, rgba(94, 234, 212, 0.06), rgba(94, 234, 212, 0.10), rgba(94, 234, 212, 0.06));
  box-shadow: inset 0 0 0 1px rgba(94, 234, 212, 0.18);
}
.chain-row.atm-row .strike.atm {
  color: var(--accent);
  font-weight: 700;
  text-shadow: 0 0 8px rgba(94, 234, 212, 0.35);
}

/* Watchlist enriched rows */
.watchlist li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  cursor: pointer;
  gap: 8px;
}
.watchlist li.active { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--accent); }
.watchlist .wl-l { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.watchlist .wl-r { display: flex; align-items: center; gap: 6px; }
.watchlist .sym {
  color: var(--text); font-weight: 600; font-size: 12px; letter-spacing: 0.01em;
}
.watchlist .wl-chg {
  font-size: 10px; font-variant-numeric: tabular-nums;
  color: var(--text-faint);
}
.watchlist .wl-chg.chg-up { color: #5eea9a; }
.watchlist .wl-chg.chg-dn { color: #ff8b85; }
.watchlist .px {
  font-size: 12px; font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--text);
}
.watchlist .px.chg-up { color: #5eea9a; }
.watchlist .px.chg-dn { color: #ff8b85; }
.watchlist .rm {
  background: none; border: none; color: var(--text-faint); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 4px; opacity: 0;
  transition: opacity 120ms;
}
.watchlist li:hover .rm { opacity: 1; }
.watchlist .rm:hover { color: #ff8b85; }

/* ===== Wave 14 — Backtest Workbench ===== */
.bt-card .card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.bt-controls { display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; margin-bottom:10px; }
.bt-controls label { display:flex; flex-direction:column; gap:4px; font-size:11px; color:#5d6878; text-transform:uppercase; letter-spacing:0.5px; }
.bt-controls input, .bt-controls select { background:#0e1217; border:1px solid #1f262e; color:#e6e8eb; padding:6px 10px; border-radius:6px; font-size:13px; min-width:120px; }
.bt-controls input:focus, .bt-controls select:focus { outline:none; border-color:#5eead4; }

.bt-chip-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:8px 0 12px; padding:8px 10px; background:rgba(94,234,212,0.02); border:1px solid #1a2126; border-radius:8px; }
.bt-chip-label { font-size:10px; text-transform:uppercase; letter-spacing:0.6px; color:#5d6878; margin-right:4px; }
.bt-chips { display:flex; gap:4px; flex-wrap:wrap; }
.bt-chip { background:#13181f; border:1px solid #1f262e; color:#98a2b3; padding:4px 10px; border-radius:14px; font-size:11px; font-family:"JetBrains Mono", monospace; cursor:pointer; transition:all 120ms; }
.bt-chip:hover { background:#1a2128; color:#e6e8eb; border-color:#2a3340; }
.bt-chip.active { background:rgba(94,234,212,0.12); color:#5eead4; border-color:rgba(94,234,212,0.5); }

.bt-explainer { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; background:rgba(94,234,212,0.04); border-left:3px solid #5eead4; border-radius:0 6px 6px 0; margin-bottom:10px; }
.bt-explainer strong { color:#5eead4; font-size:12px; white-space:nowrap; }
.bt-explainer span { color:#98a2b3; font-size:12px; line-height:1.5; }

.bt-progress { display:flex; align-items:center; gap:10px; margin:8px 0; padding:6px 10px; background:#0e1217; border:1px solid #1f262e; border-radius:6px; }
.bt-progress-bar { flex:1; height:3px; background:#13181f; border-radius:2px; overflow:hidden; position:relative; }
.bt-progress-bar span { display:block; width:30%; height:100%; background:linear-gradient(90deg, transparent, #5eead4, transparent); animation:bt-prog 1.4s linear infinite; }
@keyframes bt-prog { 0% { transform:translateX(-100%); } 100% { transform:translateX(400%); } }

.bt-toggle-row { display:flex; gap:14px; align-items:center; margin:10px 0 6px; padding:6px 0; border-top:1px solid #1a2126; padding-top:10px; flex-wrap:wrap; }
.bt-toggle { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:#98a2b3; cursor:pointer; user-select:none; }
.bt-toggle input { width:14px; height:14px; cursor:pointer; accent-color:#5eead4; }
.bt-toggle span { padding:1px 0; }
.bt-spacer { flex:1; }
.btn-ghost.small { padding:4px 8px; font-size:11px; }

.bt-bench-panel { margin-top:14px; padding-top:14px; border-top:1px solid #1a2126; }
.bt-bench-panel .card-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.bt-bench-table { width:100%; border-collapse:collapse; font-size:12px; }
.bt-bench-table th { text-align:left; padding:6px 10px; font-size:10px; text-transform:uppercase; letter-spacing:0.5px; color:#5d6878; border-bottom:1px solid #1f262e; font-weight:500; }
.bt-bench-table td { padding:8px 10px; border-bottom:1px solid #131820; }
.bt-bench-table tr:hover td { background:rgba(94,234,212,0.03); }
.bt-rank { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%; font-size:10px; font-weight:600; }
.bt-rank.rank-1 { background:rgba(94,234,212,0.15); color:#5eead4; }
.bt-rank.rank-2 { background:rgba(245,158,11,0.12); color:#f59e0b; }
.bt-rank.rank-3 { background:rgba(148,163,184,0.12); color:#94a3b8; }
.bt-rank.rank-4 { background:rgba(100,116,139,0.10); color:#64748b; }


/* ===== Wave 17 — Overview Bot Status Card ===== */
.ov-bot-status-card {
  background: linear-gradient(135deg, rgba(94,234,212,0.04) 0%, transparent 50%), #0e1217;
  border: 1px solid #1f262e;
  margin-bottom: 14px;
  padding: 16px 20px;
}
.ov-bot-status-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.ov-bot-status-title {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ov-bot-status-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 1px;
  color: #5d6878; font-weight: 600;
}
.ov-regime-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 12px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.4px;
  background: #1a2128; color: #98a2b3; border: 1px solid #2a3340;
}
.ov-regime-pill.rg-hot   { background: rgba(239,68,68,0.12);  color: #ef4444; border-color: rgba(239,68,68,0.35); }
.ov-regime-pill.rg-up    { background: rgba(94,234,212,0.12); color: #5eead4; border-color: rgba(94,234,212,0.4); }
.ov-regime-pill.rg-down  { background: rgba(245,158,11,0.12); color: #f59e0b; border-color: rgba(245,158,11,0.4); }
.ov-regime-pill.rg-trend { background: rgba(94,234,212,0.08); color: #5eead4; border-color: rgba(94,234,212,0.3); }
.ov-regime-pill.rg-mr    { background: rgba(96,165,250,0.12); color: #60a5fa; border-color: rgba(96,165,250,0.35); }
.ov-regime-pill.rg-cool  { background: rgba(148,163,184,0.10); color: #94a3b8; border-color: rgba(148,163,184,0.3); }
.ov-regime-pill.rg-na    { background: #1a2128; color: #5d6878; border-color: #2a3340; }
.ov-regime-pill::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 6px currentColor;
}
.ov-cycle-pulse { font-family: "JetBrains Mono", monospace; font-size: 11px; }
.ov-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.ov-bot-status-grid {
  display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px;
}
@media (max-width: 1200px) { .ov-bot-status-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px)  { .ov-bot-status-grid { grid-template-columns: repeat(2, 1fr); } }

.ov-bs-tile {
  display: flex; flex-direction: column; gap: 4px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.015);
  border: 1px solid #1a2126;
  border-radius: 6px;
  transition: border-color 150ms;
}
.ov-bs-tile:hover { border-color: rgba(94,234,212,0.25); }
.ov-bs-k {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.7px;
  color: #5d6878; font-weight: 600;
}
.ov-bs-v {
  font-size: 18px; color: #e6e8eb; line-height: 1.1;
}
.ov-bs-v.up   { color: #5eead4; }
.ov-bs-v.down { color: #ef4444; }


/* === Wave 18 — Options Chain enhancements ================== */

/* Controls row: re-flow the existing .chain-controls children */
.chain-controls-row {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  width: 100%;
}
.chain-controls-row > label,
.chain-controls-row > .chain-views,
.chain-controls-row > #chain-spot-info {
  flex: 0 0 auto;
}
.chain-controls-row > #chain-spot-info { margin-left: auto; padding-bottom: 6px; }

/* View toggles — pill row */
.chain-views {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.chain-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 11px;
  color: var(--text-dim);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: border-color 120ms, color 120ms, background 120ms;
}
.chain-toggle:hover { color: var(--text); border-color: var(--border-strong); }
.chain-toggle input { accent-color: var(--accent); cursor: pointer; margin: 0; }
.chain-toggle:has(input:checked) {
  color: var(--text);
  border-color: rgba(94, 234, 212, 0.45);
  background: rgba(94, 234, 212, 0.06);
}

/* Expiration chip strip */
.chain-expiry-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  padding: 8px 0 4px 0;
  margin-top: 10px;
  border-top: 1px solid var(--border);
  scrollbar-width: thin;
}
.chain-expiry-strip:empty { display: none; }
.chain-expiry-strip::-webkit-scrollbar { height: 6px; }
.chain-expiry-strip::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.chain-exp-chip {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-width: 58px;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 120ms, color 120ms, background 120ms, transform 120ms;
}
.chain-exp-chip:hover { color: var(--text); border-color: var(--border-strong); transform: translateY(-1px); }
.chain-exp-chip .chain-exp-dte { font-size: 13px; font-weight: 700; color: var(--text); }
.chain-exp-chip .chain-exp-date { font-size: 10px; color: var(--text-faint); }
.chain-exp-chip.active {
  background: rgba(94, 234, 212, 0.10);
  border-color: rgba(94, 234, 212, 0.55);
  color: var(--accent);
  box-shadow: 0 0 0 1px rgba(94, 234, 212, 0.18) inset;
}
.chain-exp-chip.active .chain-exp-dte { color: var(--accent); }
.chain-exp-chip.zero-dte {
  border-color: rgba(239, 68, 68, 0.55);
  background: rgba(239, 68, 68, 0.08);
}
.chain-exp-chip.zero-dte .chain-exp-dte { color: #ff8b85; }
.chain-exp-chip.zero-dte.active {
  background: rgba(239, 68, 68, 0.14);
  box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.30) inset;
}

/* Chain summary bar */
.chain-summary-bar {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 8px;
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
}
@media (max-width: 1280px) {
  .chain-summary-bar { grid-template-columns: repeat(4, 1fr); }
}
.cs-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 2px 4px;
  border-right: 1px solid var(--border);
}
.cs-stat:last-child { border-right: none; }
.cs-k {
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
}
.cs-v {
  font-size: 15px;
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-v.up   { color: #5eea9a; }
.cs-v.down { color: #ff8b85; }

/* 0DTE badge inline in spot-info */
.zero-dte-badge {
  display: inline-block;
  padding: 1px 7px;
  margin-right: 6px;
  background: rgba(239, 68, 68, 0.14);
  color: #ff8b85;
  border: 1px solid rgba(239, 68, 68, 0.45);
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  vertical-align: middle;
}

/* IV heatmap — soft, readable on dark */
.iv-cool { color: #7dd3fc; }                            /* low IV — sky blue */
.iv-mid  { color: #5eead4; }                            /* teal */
.iv-warm { color: #facc15; }                            /* warm yellow */
.iv-hot  { color: #fb923c; }                            /* orange */
.iv-vhot { color: #f87171; font-weight: 700; }          /* very hot — red */
.iv-cool, .iv-mid, .iv-warm, .iv-hot, .iv-vhot {
  padding: 0 2px;
  border-radius: 3px;
}

/* OI cell — optional density bar via --oi-pct */
.oi-cell {
  display: inline-block;
  position: relative;
  padding: 0 4px;
  width: 100%;
  text-align: right;
  background-image: linear-gradient(
    to right,
    rgba(94, 234, 212, 0.18) 0%,
    rgba(94, 234, 212, 0.18) var(--oi-pct, 0%),
    transparent var(--oi-pct, 0%),
    transparent 100%
  );
  background-repeat: no-repeat;
  border-radius: 3px;
}
.chain-row .puts .oi-cell {
  /* Puts bar grows from the right edge inward */
  background-image: linear-gradient(
    to left,
    rgba(251, 146, 60, 0.18) 0%,
    rgba(251, 146, 60, 0.18) var(--oi-pct, 0%),
    transparent var(--oi-pct, 0%),
    transparent 100%
  );
}

/* Row click affordance */
.chain-row[data-strike] { cursor: pointer; }
.chain-row[data-strike]:hover {
  background: var(--surface-2);
  box-shadow: inset 2px 0 0 var(--accent);
}

/* Sticky header for the chain card */
.chain-card .chain-grid-head,
.chain-card .chain-cols-head {
  position: sticky;
  background: var(--surface);
  z-index: 2;
}
.chain-card .chain-grid-head { top: 0; }
.chain-card .chain-cols-head { top: 32px; border-bottom: 1px solid var(--border); }

/* No-greeks compaction: reduce calls/puts to 5 columns */
.chain-body.no-greeks .chain-row .calls,
.chain-body.no-greeks .chain-row .puts {
  grid-template-columns: repeat(5, 1fr);
}

/* === Wave 19 — Strategy Builder enhancements ============== */

.builder-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.builder-head h3 { margin: 0; }

.sentiment-chip {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 999px;
}
.sentiment-chip.sc-bullish { color: #5eea9a; border-color: rgba(94, 234, 154, 0.45); background: rgba(94, 234, 154, 0.08); }
.sentiment-chip.sc-bearish { color: #ff8b85; border-color: rgba(239, 68, 68, 0.45);  background: rgba(239, 68, 68, 0.08); }
.sentiment-chip.sc-neutral { color: var(--accent); border-color: rgba(94, 234, 212, 0.45); background: rgba(94, 234, 212, 0.08); }
.sentiment-chip.sc-volup   { color: #c4b5fd; border-color: rgba(196, 181, 253, 0.45); background: rgba(196, 181, 253, 0.08); }
.sentiment-chip.sc-voldown { color: #fbbf24; border-color: rgba(251, 191, 36, 0.45);  background: rgba(251, 191, 36, 0.08); }

/* Underlying row: spot input + Use Spot button */
.underlying-row .underlying-input {
  display: flex; gap: 8px; align-items: stretch; margin-top: 4px;
}
.underlying-row .underlying-input input {
  flex: 1;
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 5px;
  padding: 6px 10px;
}
.btn-mini {
  background: var(--surface-2); color: var(--text-dim);
  border: 1px solid var(--border-strong);
  padding: 6px 12px; font-size: 11px; font-weight: 600;
  border-radius: 5px; cursor: pointer;
  transition: color 120ms, border-color 120ms, background 120ms;
}
.btn-mini:hover { color: var(--text); border-color: var(--accent); background: rgba(94, 234, 212, 0.06); }

/* Preset row label + filter tabs */
.preset-row-label {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; margin-bottom: 6px;
  font-size: 11px; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.preset-filter { display: flex; gap: 4px; }
.preset-filter .preset-tab {
  background: none; border: 1px solid transparent;
  color: var(--text-faint);
  font-size: 10px; font-weight: 600;
  padding: 4px 8px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.04em;
  cursor: pointer;
}
.preset-filter .preset-tab:hover { color: var(--text-dim); }
.preset-filter .preset-tab.on {
  color: var(--accent);
  border-color: rgba(94, 234, 212, 0.40);
  background: rgba(94, 234, 212, 0.06);
}

/* Preset gallery — small cards in a responsive grid */
.preset-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}
.preset-card {
  display: flex; flex-direction: column; gap: 4px;
  text-align: left;
  padding: 9px 11px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text-dim);
  cursor: pointer;
  transition: border-color 120ms, color 120ms, background 120ms, transform 120ms;
}
.preset-card:hover {
  color: var(--text);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.preset-card.active {
  border-color: rgba(94, 234, 212, 0.55);
  background: rgba(94, 234, 212, 0.06);
  box-shadow: 0 0 0 1px rgba(94, 234, 212, 0.20) inset;
}
.pc-row { display: flex; align-items: center; gap: 8px; }
.pc-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 5px;
  background: var(--surface);
  color: var(--text-dim);
  font-size: 13px;
  border: 1px solid var(--border);
}
.pc-glyph.pc-bullish { color: #5eea9a; border-color: rgba(94, 234, 154, 0.40); }
.pc-glyph.pc-bearish { color: #ff8b85; border-color: rgba(239, 68, 68, 0.40); }
.pc-glyph.pc-neutral { color: var(--accent); border-color: rgba(94, 234, 212, 0.40); }
.pc-glyph.pc-vol     { color: #c4b5fd; border-color: rgba(196, 181, 253, 0.40); }
.pc-name {
  flex: 1; min-width: 0;
  font-size: 12px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-tag {
  font-size: 9px; font-weight: 700;
  padding: 2px 5px; border-radius: 3px;
  letter-spacing: 0.04em;
}
.pc-tag.cr { color: #5eea9a; background: rgba(94, 234, 154, 0.10); border: 1px solid rgba(94, 234, 154, 0.30); }
.pc-tag.db { color: #60a5fa; background: rgba(96, 165, 250, 0.10); border: 1px solid rgba(96, 165, 250, 0.30); }
.pc-desc {
  font-size: 10.5px; line-height: 1.35;
  color: var(--text-faint);
}

/* Builder action button row */
.builder-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0 14px 0; }

/* Risk hero panel */
.risk-hero {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 12px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
}
.rh-stat {
  display: flex; flex-direction: column; gap: 3px;
  padding: 2px 6px;
  border-right: 1px solid var(--border);
}
.rh-stat:nth-child(4) { border-right: none; }
.rh-k {
  font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-faint); font-weight: 700;
}
.rh-v { font-size: 16px; color: var(--text); font-weight: 600; }
.rh-stat.rh-profit .rh-v { color: #5eea9a; }
.rh-stat.rh-loss   .rh-v { color: #ff8b85; }

.rh-rr {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 6px;
}
.rh-rr-head {
  display: flex; justify-content: space-between; align-items: baseline;
}
.rh-rr-head .rh-v { font-size: 14px; }
.rh-rr-bar {
  position: relative;
  height: 8px;
  background: rgba(239, 68, 68, 0.18);
  border-radius: 4px;
  overflow: hidden;
}
.rh-rr-fill {
  height: 100%;
  width: 50%;
  background: linear-gradient(90deg, rgba(94, 234, 154, 0.6), rgba(94, 234, 212, 0.85));
  border-radius: 4px;
  transition: width 220ms cubic-bezier(.2, .9, .25, 1);
}
.rh-rr-sub {
  display: flex; justify-content: space-between; gap: 8px;
  flex-wrap: wrap;
}
.rh-rr-sub b { color: var(--text); font-weight: 600; }

/* Saved cards (replaces previous saved-strat-item list) */
.saved-strats-head {
  margin-top: 14px; margin-bottom: 8px;
  font-size: 11px; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
  display: flex; gap: 8px; align-items: baseline;
}
.saved-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px 10px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 6px;
}
.saved-card .sc-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.saved-card .sc-name {
  font-size: 12px; font-weight: 600; color: var(--text);
  cursor: pointer;
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.saved-card .sc-name:hover { color: var(--accent); }
.saved-card .sc-meta { font-size: 10px; color: var(--text-faint); }
.saved-card .sc-actions { display: flex; gap: 6px; }
.saved-card .sc-actions .btn-mini { font-size: 10px; padding: 4px 8px; }

/* What-if action row */
.whatif-actions { display: flex; gap: 6px; align-items: center; margin-left: auto; }

/* Responsive: collapse risk-hero to 2 cols on narrow */
@media (max-width: 1400px) {
  .risk-hero { grid-template-columns: repeat(2, 1fr); }
  .rh-stat { border-right: none; border-bottom: 1px solid var(--border); padding-bottom: 6px; }
  .rh-stat:last-of-type { border-bottom: none; }
}

/* ============================================================
   Wave 20 — Backtest tab enhancements
   ============================================================ */

/* Section heading */
.bt-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; font-weight: 600; }

/* Strategy gallery */
.bt-gallery-wrap { margin: 12px 0 8px; }
.bt-gallery-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.bt-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.bt-strat-card {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 10px;
  background: #161b22; border: 1px solid #232b35; color: #e6edf3;
  cursor: pointer; transition: transform 0.08s ease, border-color 0.12s ease, background 0.12s ease;
  text-align: left;
}
.bt-strat-card:hover { transform: translateY(-1px); border-color: #3b4654; background: #1b222b; }
.bt-strat-card.active { border-color: #5eead4; background: linear-gradient(180deg, rgba(94,234,212,0.08), transparent 70%); box-shadow: 0 0 0 1px rgba(94,234,212,0.25) inset; }
.bt-strat-glyph {
  width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px;
  font-size: 18px; font-weight: 700; color: #5eead4;
  background: #0e1318; border: 1px solid #232b35;
}
.bt-strat-card.active .bt-strat-glyph { color: #2dd4bf; border-color: rgba(94,234,212,0.4); }
.bt-strat-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bt-strat-title { font-size: 13px; font-weight: 600; color: #e6edf3; }
.bt-strat-sub { font-size: 11px; color: #94a3b8; }
.bt-strat-tag {
  font-size: 10px; padding: 2px 7px; border-radius: 999px;
  background: #1f2630; color: #94a3b8; border: 1px solid #2a323d;
  text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600;
}

/* Hero KPI grid */
.bt-hero { margin: 14px 0 4px; }
.bt-hero-grid {
  display: grid;
  grid-template-columns: 2fr repeat(9, 1fr);
  gap: 6px;
}
.bt-tile {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 10px; border-radius: 8px;
  background: #131820; border: 1px solid #1f2630;
  min-width: 0;
}
.bt-tile-lg { grid-row: span 1; background: linear-gradient(180deg, #161d28, #121821); }
.bt-tile-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: #7a8694; font-weight: 600; }
.bt-tile-val { font-size: 18px; font-weight: 700; line-height: 1.2; }
.bt-tile-lg .bt-tile-val { font-size: 24px; }
.bt-tile-sub { font-size: 11px; margin-top: 2px; }

/* B&H delta chip */
.bt-bh-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; font-family: ui-monospace, SFMono-Regular, monospace; border: 1px solid transparent; }
.bt-bh-up { color: #34d399; background: rgba(52,211,153,0.10); border-color: rgba(52,211,153,0.25); }
.bt-bh-down { color: #f87171; background: rgba(248,113,113,0.10); border-color: rgba(248,113,113,0.25); }

/* Toggle row tweaks for additional toggles */
.bt-toggle-row { flex-wrap: wrap; }
.bt-badge {
  display: inline-block; min-width: 16px; padding: 0 5px;
  background: #1f2630; color: #94a3b8; border: 1px solid #2a323d;
  border-radius: 999px; font-size: 10px; font-weight: 700; margin-left: 4px;
  font-family: ui-monospace, SFMono-Regular, monospace;
}

/* Analytics row: drawdown + distribution */
.bt-analytics {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px;
}
.bt-mini-panel {
  background: #131820; border: 1px solid #1f2630; border-radius: 8px;
  padding: 8px 10px 6px;
}
.bt-mini-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding-bottom: 4px; margin-bottom: 4px;
  border-bottom: 1px dashed #232b35;
  font-size: 12px; font-weight: 600; color: #c7d2dc;
}
.bt-mini-chart { width: 100%; height: 160px; }
.xsmall { font-size: 10px; }

/* Monthly heatmap */
.bt-heatmap-panel {
  margin-top: 10px;
  background: #131820; border: 1px solid #1f2630; border-radius: 8px;
  padding: 10px 12px;
}
.bt-heatmap {
  display: flex; flex-direction: column; gap: 3px;
  margin-top: 6px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
}
.bt-hm-row {
  display: grid;
  grid-template-columns: 56px repeat(12, 1fr) 64px;
  gap: 3px;
}
.bt-hm-head { color: #7a8694; font-weight: 600; }
.bt-hm-h { text-align: center; font-size: 10px; padding: 3px 0; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }
.bt-hm-yr { display: grid; place-items: center; font-weight: 700; color: #c7d2dc; font-size: 11px; }
.bt-hm-cell {
  text-align: center; padding: 4px 2px; border-radius: 3px;
  background: #1a212c; color: #c7d2dc;
}
.bt-hm-na { background: #15191f; color: transparent; }
.bt-hm-ytd { font-weight: 700; border-left: 2px solid #0f1115; }
/* Greens */
.bt-hm-g1 { background: rgba(52,211,153,0.10); color: #5eead4; }
.bt-hm-g2 { background: rgba(52,211,153,0.20); color: #6ee7b7; }
.bt-hm-g3 { background: rgba(52,211,153,0.32); color: #d1fae5; }
.bt-hm-g4 { background: rgba(34,197,94,0.50); color: #ecfdf5; }
.bt-hm-g5 { background: rgba(22,163,74,0.75); color: #ffffff; font-weight: 700; }
/* Reds */
.bt-hm-r1 { background: rgba(248,113,113,0.10); color: #fca5a5; }
.bt-hm-r2 { background: rgba(248,113,113,0.20); color: #fda4af; }
.bt-hm-r3 { background: rgba(248,113,113,0.32); color: #fecaca; }
.bt-hm-r4 { background: rgba(220,38,38,0.50); color: #fee2e2; }
.bt-hm-r5 { background: rgba(185,28,28,0.75); color: #ffffff; font-weight: 700; }

/* Run history drawer */
.bt-history-drawer {
  margin-top: 10px;
  background: #131820; border: 1px solid #1f2630; border-radius: 8px;
  padding: 8px 10px;
}
.bt-history-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; max-height: 280px; overflow-y: auto; }
.bt-history-item {
  display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center;
  padding: 6px 10px; border-radius: 6px;
  background: #161b22; border: 1px solid #1f2630;
}
.bt-history-item:hover { background: #1a212c; }
.bt-hi-main { display: flex; gap: 8px; align-items: baseline; min-width: 0; flex-wrap: wrap; }
.bt-hi-sym { font-weight: 700; color: #e6edf3; }
.bt-hi-strat { font-size: 12px; color: #c7d2dc; }
.bt-hi-per { font-size: 10px; }
.bt-hi-stats { display: flex; gap: 10px; align-items: baseline; font-size: 12px; }
.bt-hi-acts { display: flex; gap: 4px; }
.bt-hi-acts button { font-size: 12px; line-height: 1; padding: 2px 6px; border-radius: 4px; }

/* Compare select inherit base look */
#bt-compare { min-width: 160px; }

/* Responsive: collapse hero to 2 rows on narrow */
@media (max-width: 1100px) {
  .bt-hero-grid { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
  .bt-tile-lg { grid-column: span 2; }
}
@media (max-width: 720px) {
  .bt-hero-grid { grid-template-columns: 1fr 1fr 1fr; }
  .bt-tile-lg { grid-column: span 3; }
  .bt-analytics { grid-template-columns: 1fr; }
}

/* Force-hide legacy bt-metrics row (wave 20 hero replaces it) */
#bt-metrics[hidden] { display: none !important; }

/* ============================================================
   Wave 21 — Options Backtest tab enhancements
   ============================================================ */

/* Force-hide legacy metrics row */
#obt-metrics[hidden] { display: none !important; }

/* Top control row */
.obt-controls-row {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;
  margin-bottom: 12px;
}
.obt-controls-row label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.04em; }
.obt-controls-row input, .obt-controls-row select {
  background: #131820; border: 1px solid #232b35; color: #e6edf3;
  padding: 6px 10px; border-radius: 6px; font-size: 13px; min-width: 100px;
}

/* Section heads */
.obt-section { margin: 8px 0 10px; }
.obt-section-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }

/* Parameter cards grid */
.obt-params-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin: 6px 0 14px;
}
.obt-param {
  background: #131820; border: 1px solid #1f2630; border-radius: 8px;
  padding: 10px 12px;
}
.obt-param-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.obt-param-hint { font-size: 10px; color: #5eead4; font-family: ui-monospace, SFMono-Regular, monospace; }

/* Chip groups */
.chip-group { display: flex; gap: 4px; flex-wrap: wrap; }
.chip-group .chip {
  background: #0e1318; border: 1px solid #232b35; color: #c7d2dc;
  padding: 5px 11px; font-size: 12px; border-radius: 6px;
  cursor: pointer; transition: all 0.1s ease;
  font-family: ui-monospace, SFMono-Regular, monospace; font-weight: 600;
  flex: 1; min-width: 0; text-align: center;
}
.chip-group .chip:hover { border-color: #3b4654; background: #161d28; }
.chip-group .chip.active { background: rgba(94,234,212,0.10); border-color: #5eead4; color: #5eead4; }

/* Hero grid tweak for OBT (10 tiles) */
.obt-hero-grid { grid-template-columns: 2fr repeat(9, 1fr); }
@media (max-width: 1200px) {
  .obt-hero-grid { grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }
  .obt-hero-grid .bt-tile-lg { grid-column: span 2; }
}
@media (max-width: 720px) {
  .obt-hero-grid { grid-template-columns: 1fr 1fr 1fr; }
  .obt-hero-grid .bt-tile-lg { grid-column: span 3; }
  .obt-params-grid { grid-template-columns: 1fr 1fr; }
}

/* Analytics rows */
.obt-analytics-row {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 10px;
}
.obt-analytics-row:nth-of-type(2n+1) { grid-template-columns: 1fr 1fr 1fr; }
.obt-card { padding: 14px 16px; }
.obt-mini-card { padding: 10px 12px; }
.obt-mini-card .chart.sm { height: 200px; }
@media (max-width: 1100px) {
  .obt-analytics-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .obt-analytics-row { grid-template-columns: 1fr; }
}

/* Force second analytics row to 2-col (IV scatter + streaks) */
.obt-analytics-row + .obt-analytics-row { grid-template-columns: 1.4fr 1fr; }
@media (max-width: 1100px) {
  .obt-analytics-row + .obt-analytics-row { grid-template-columns: 1fr; }
}

/* Win/Loss streak bar */
.obt-streak-card { display: flex; flex-direction: column; }
.obt-streaks {
  display: flex; flex-wrap: wrap; gap: 2px;
  margin: 8px 0; padding: 8px;
  background: #0e1318; border: 1px solid #1a212c; border-radius: 6px;
  min-height: 90px;
  align-content: flex-start;
}
.sk-cell { display: inline-block; width: 14px; height: 14px; border-radius: 3px; cursor: pointer; }
.sk-cell.sk-win { background: #34d399; }
.sk-cell.sk-loss { background: #f87171; }
.sk-cell:hover { transform: scale(1.4); box-shadow: 0 0 0 2px rgba(94,234,212,0.4); z-index: 2; }
.obt-streak-summary {
  display: flex; gap: 10px; justify-content: space-around;
  padding: 8px 0 4px;
  border-top: 1px dashed #232b35;
  margin-top: auto;
}
.sk-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sk-stat-l { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: #94a3b8; font-weight: 600; }
.sk-stat-v { font-size: 18px; font-weight: 700; font-family: ui-monospace, SFMono-Regular, monospace; }

/* Filter pills */
.filter-pills { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.filter-pills .pill {
  background: #131820; border: 1px solid #232b35; color: #c7d2dc;
  padding: 4px 10px; font-size: 11px; border-radius: 999px; cursor: pointer;
  transition: all 0.1s ease; font-weight: 600;
}
.filter-pills .pill:hover { border-color: #3b4654; }
.filter-pills .pill.active { background: rgba(94,234,212,0.12); border-color: #5eead4; color: #5eead4; }
.obt-trade-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* Card head with actions row */
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }

/* Compact small util */
.small { font-size: 12px; }


/* ==================== WAVE 22 — System Tab Enhancements ==================== */

/* Sticky sub-nav strip */
.sys-subnav {
  position: sticky;
  top: 0;
  z-index: 40;
  margin: -8px -8px 14px;
  padding: 6px 8px;
  background: rgba(13, 17, 23, 0.78);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(120, 144, 165, 0.18);
  border-radius: 0;
}
.sys-subnav-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.sys-subnav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted, #8aa0b6);
  text-decoration: none;
  border-radius: 6px;
  transition: color 120ms ease, background 120ms ease;
  white-space: nowrap;
}
.sys-subnav-link:hover {
  color: var(--text, #e6edf3);
  background: rgba(255, 255, 255, 0.04);
}
.sys-subnav-link.active {
  color: var(--text, #e6edf3);
  background: rgba(56, 189, 178, 0.10);
}
.sys-subnav-link.active::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px; bottom: 1px;
  height: 2px;
  background: linear-gradient(90deg, #38bdb2, #5cd1c5);
  border-radius: 2px;
}
.sys-subnav-spacer { flex: 1; min-width: 8px; }
.sys-subnav-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted, #8aa0b6);
  border: 1px solid rgba(120, 144, 165, 0.18);
}
.sys-subnav-status .sn-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #6b7d91;
  box-shadow: 0 0 0 2px rgba(107, 125, 145, 0.15);
}
.sys-subnav-status[data-state="running"] { color: #6ee7d2; border-color: rgba(56,189,178,0.35); }
.sys-subnav-status[data-state="running"] .sn-dot { background: #38bdb2; box-shadow: 0 0 0 3px rgba(56,189,178,0.20); }
.sys-subnav-status[data-state="stale"] { color: #f5c777; border-color: rgba(245,199,119,0.35); }
.sys-subnav-status[data-state="stale"] .sn-dot { background: #f5c777; box-shadow: 0 0 0 3px rgba(245,199,119,0.20); }
.sys-subnav-status[data-state="killed"],
.sys-subnav-status[data-state="down"] { color: #ff8a8a; border-color: rgba(255,138,138,0.35); }
.sys-subnav-status[data-state="killed"] .sn-dot,
.sys-subnav-status[data-state="down"] .sn-dot { background: #ff6b6b; box-shadow: 0 0 0 3px rgba(255,107,107,0.22); }
.sys-subnav-status[data-state="warn"] { color: #f5c777; }

/* Anchor scroll offset */
.sys-anchor { scroll-margin-top: 96px; }

/* Hero band */
.sys-hero-band {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
  scroll-margin-top: 96px;
}
@media (max-width: 1280px) {
  .sys-hero-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sys-hero-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sys-hero-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.015) 70%);
  border: 1px solid rgba(120, 144, 165, 0.18);
  min-height: 78px;
  overflow: hidden;
}
.sys-hero-tile::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(56,189,178,0.6), transparent);
  opacity: 0.4;
}
.sys-hero-label {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #8aa0b6);
  font-weight: 600;
}
.sys-hero-val {
  font-size: 19px;
  font-weight: 600;
  color: var(--text, #e6edf3);
  line-height: 1.15;
  word-break: break-word;
}
.sys-hero-val.mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 17px;
  letter-spacing: -0.01em;
}
.sys-hero-sub {
  font-size: 11px;
  color: var(--muted, #8aa0b6);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Bot status tile coloring */
.sys-hero-status[data-state="running"] { border-color: rgba(56,189,178,0.40); background: linear-gradient(160deg, rgba(56,189,178,0.10), rgba(56,189,178,0.02)); }
.sys-hero-status[data-state="running"] .sys-hero-val { color: #6ee7d2; }
.sys-hero-status[data-state="stale"] { border-color: rgba(245,199,119,0.40); background: linear-gradient(160deg, rgba(245,199,119,0.10), rgba(245,199,119,0.02)); }
.sys-hero-status[data-state="stale"] .sys-hero-val { color: #f5c777; }
.sys-hero-status[data-state="killed"],
.sys-hero-status[data-state="down"] { border-color: rgba(255,107,107,0.45); background: linear-gradient(160deg, rgba(255,107,107,0.12), rgba(255,107,107,0.02)); }
.sys-hero-status[data-state="killed"] .sys-hero-val,
.sys-hero-status[data-state="down"] .sys-hero-val { color: #ff8a8a; }
.sys-hero-status[data-state="warn"] { border-color: rgba(245,199,119,0.35); }
.sys-hero-status[data-state="warn"] .sys-hero-val { color: #f5c777; }

/* Kill switch danger glow when engaged */
.sys-hero-kill[data-engaged="1"] {
  border-color: rgba(255,107,107,0.55);
  background: linear-gradient(160deg, rgba(255,107,107,0.18), rgba(255,107,107,0.04));
  box-shadow: 0 0 0 1px rgba(255,107,107,0.20), 0 0 24px -8px rgba(255,107,107,0.45);
  animation: w22-kill-pulse 2.2s ease-in-out infinite;
}
.sys-hero-kill[data-engaged="1"] .sys-hero-val {
  color: #ff8a8a;
  font-weight: 700;
  letter-spacing: 0.03em;
}
@keyframes w22-kill-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,107,107,0.20), 0 0 24px -8px rgba(255,107,107,0.45); }
  50% { box-shadow: 0 0 0 1px rgba(255,107,107,0.35), 0 0 32px -6px rgba(255,107,107,0.65); }
}

/* Ledger accept/reject ratio chip */
.sys-ratio-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(120,144,165,0.22);
  color: var(--muted, #8aa0b6);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  margin-right: 4px;
}
.sys-ratio-chip[data-state="good"] {
  color: #6ee7d2;
  border-color: rgba(56,189,178,0.40);
  background: rgba(56,189,178,0.08);
}
.sys-ratio-chip[data-state="mid"] {
  color: #f5c777;
  border-color: rgba(245,199,119,0.40);
  background: rgba(245,199,119,0.08);
}
.sys-ratio-chip[data-state="bad"] {
  color: #ff8a8a;
  border-color: rgba(255,107,107,0.42);
  background: rgba(255,107,107,0.09);
}

/* Collapsible bot controls */
.sys-collapse-btn {
  margin-left: 8px;
  background: transparent;
  border: 1px solid rgba(120,144,165,0.22);
  color: var(--muted, #8aa0b6);
  border-radius: 6px;
  width: 26px; height: 24px;
  font-size: 12px;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.sys-collapse-btn:hover {
  color: var(--text, #e6edf3);
  border-color: rgba(56,189,178,0.40);
  background: rgba(56,189,178,0.08);
}
.card.sys-collapsed > *:not(.card-header) { display: none !important; }
.card.sys-collapsed { padding-bottom: 12px; }


/* ============== WAVE 22b — Auto-Trade Strategy Priority Picker ============== */
.auto-strat-block { display: block; }
.auto-strat-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 8px; flex-wrap: wrap;
}
.auto-strat-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600; color: var(--text, #e6edf3);
  letter-spacing: 0.02em;
}
#auto-strat-status { font-weight: 400; }
#auto-strat-status[data-state="good"] { color: #6ee7d2; }
#auto-strat-status[data-state="warn"] { color: #f5c777; }
.auto-strat-toggle-wrap { display: inline-flex; align-items: center; gap: 8px; }
.auto-strat-toggle-label { font-size: 12px; color: var(--muted, #8aa0b6); min-width: 22px; }

.toggle-switch { position: relative; display: inline-block; width: 38px; height: 20px; cursor: pointer; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0;
  background: rgba(120,144,165,0.30);
  border-radius: 999px; transition: background 160ms ease;
}
.toggle-slider::before {
  content: ''; position: absolute; left: 2px; top: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: #e6edf3;
  transition: transform 160ms ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.30);
}
.toggle-switch input:checked + .toggle-slider {
  background: linear-gradient(90deg, #38bdb2, #5cd1c5);
}
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(18px); }

.auto-strat-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(120,144,165,0.18);
  border-radius: 8px;
  transition: opacity 160ms ease;
}
@media (max-width: 900px) {
  .auto-strat-picker { grid-template-columns: 1fr; }
}
.auto-strat-picker.is-disabled { opacity: 0.45; pointer-events: none; }
.auto-strat-col { display: flex; flex-direction: column; min-width: 0; }
.auto-strat-col-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10.5px; letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--muted, #8aa0b6); font-weight: 600;
  padding: 4px 6px 8px; border-bottom: 1px dashed rgba(120,144,165,0.18);
  margin-bottom: 8px;
}
.btn-link {
  background: none; border: none; color: #6ee7d2;
  font-size: 11px; cursor: pointer; padding: 2px 4px;
  font-weight: 500; letter-spacing: 0.02em;
}
.btn-link:hover { text-decoration: underline; }

.auto-strat-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 6px;
  min-height: 80px;
  max-height: 360px; overflow-y: auto;
}
.auto-strat-empty {
  padding: 18px 12px; text-align: center;
  border: 1px dashed rgba(120,144,165,0.20);
  border-radius: 6px;
}

.auto-strat-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(120,144,165,0.18);
  border-radius: 7px;
  font-size: 12.5px;
  transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.auto-strat-chip.selected { cursor: grab; }
.auto-strat-chip.selected:hover { background: rgba(56,189,178,0.08); border-color: rgba(56,189,178,0.35); }
.auto-strat-chip.available:hover { background: rgba(255,255,255,0.05); border-color: rgba(120,144,165,0.30); }
.auto-strat-chip.dragging { opacity: 0.5; cursor: grabbing; transform: scale(0.98); }

.auto-strat-rank {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 28px; padding: 2px 6px;
  font-size: 11px; font-weight: 700;
  background: rgba(56,189,178,0.15);
  color: #6ee7d2;
  border-radius: 999px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.auto-strat-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  font-size: 14px;
  color: #5cd1c5;
  background: rgba(56,189,178,0.10);
  border-radius: 5px;
  flex-shrink: 0;
}
.auto-strat-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.auto-strat-name { font-weight: 500; color: var(--text, #e6edf3); }
.auto-strat-meta { font-size: 10.5px; margin-top: 1px; }

.auto-strat-ctrls { display: inline-flex; gap: 3px; }
.auto-strat-btn {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid rgba(120,144,165,0.25);
  color: var(--muted, #8aa0b6);
  border-radius: 5px; cursor: pointer;
  font-size: 11px; padding: 0;
  transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}
.auto-strat-btn:hover { color: var(--text, #e6edf3); border-color: rgba(56,189,178,0.40); background: rgba(56,189,178,0.10); }
.auto-strat-btn.primary { color: #6ee7d2; border-color: rgba(56,189,178,0.40); font-size: 14px; font-weight: 700; }
.auto-strat-btn.primary:hover { background: rgba(56,189,178,0.18); color: #fff; }
.auto-strat-btn.danger:hover { color: #ff8a8a; border-color: rgba(255,107,107,0.45); background: rgba(255,107,107,0.08); }

/* Outlook-tinted left edge for variety */
.auto-strat-chip[data-outlook="bullish"] { border-left: 3px solid rgba(56,189,178,0.55); }
.auto-strat-chip[data-outlook="bearish"] { border-left: 3px solid rgba(255,138,138,0.55); }
.auto-strat-chip[data-outlook="neutral"] { border-left: 3px solid rgba(245,199,119,0.55); }
.auto-strat-chip[data-outlook="vol"]     { border-left: 3px solid rgba(166,138,255,0.55); }


/* ============== WAVE 22c — Picker upgrade: toolbar, baskets, weights, badges ============== */

/* Toolbar row: search + outlook tabs + filters */
.auto-strat-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 240px) 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(120,144,165,0.14);
  border-radius: 7px;
}
@media (max-width: 900px) {
  .auto-strat-toolbar { grid-template-columns: 1fr; }
}
.auto-strat-search {
  width: 100%;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(120,144,165,0.25);
  color: var(--text, #e6edf3);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  transition: border-color 120ms ease, background 120ms ease;
}
.auto-strat-search:focus {
  outline: none;
  border-color: rgba(56,189,178,0.50);
  background: rgba(0,0,0,0.35);
}
.auto-strat-search::placeholder { color: var(--muted, #8aa0b6); opacity: 0.7; }

.auto-strat-tabs {
  display: inline-flex;
  gap: 2px;
  background: rgba(0,0,0,0.20);
  padding: 3px;
  border-radius: 7px;
  border: 1px solid rgba(120,144,165,0.18);
  flex-wrap: wrap;
}
.auto-strat-tab {
  background: transparent;
  border: none;
  color: var(--muted, #8aa0b6);
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 5px;
  cursor: pointer;
  transition: color 120ms ease, background 120ms ease;
}
.auto-strat-tab:hover { color: var(--text, #e6edf3); }
.auto-strat-tab.active {
  background: rgba(56,189,178,0.18);
  color: #6ee7d2;
  font-weight: 600;
}

.auto-strat-filters { display: inline-flex; gap: 10px; }
.auto-strat-filter {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--muted, #8aa0b6); cursor: pointer;
}
.auto-strat-filter input { accent-color: #38bdb2; }
.auto-strat-filter:hover { color: var(--text, #e6edf3); }

/* Baskets + presets row */
.auto-strat-baskets {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  margin-bottom: 10px;
  background: rgba(255,255,255,0.015);
  border: 1px dashed rgba(120,144,165,0.18);
  border-radius: 7px;
}
.auto-strat-basket {
  background: rgba(56,189,178,0.06);
  border: 1px solid rgba(56,189,178,0.25);
  color: #6ee7d2;
  padding: 4px 10px;
  font-size: 11.5px;
  font-weight: 500;
  border-radius: 999px;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease;
}
.auto-strat-basket:hover {
  background: rgba(56,189,178,0.16);
  border-color: rgba(56,189,178,0.55);
}
.auto-strat-spacer { flex: 1; min-width: 8px; }
.auto-strat-preset-sel {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(120,144,165,0.25);
  color: var(--text, #e6edf3);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 11.5px;
  min-width: 120px;
}

/* Columns wrapper */
.auto-strat-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 900px) {
  .auto-strat-cols { grid-template-columns: 1fr; }
}

/* Column actions group */
.auto-strat-col-actions { display: inline-flex; gap: 10px; }

/* Top row inside chip (name + badges) */
.auto-strat-top-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* Pill badges */
.auto-strat-badge {
  display: inline-flex; align-items: center;
  padding: 1px 7px;
  font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid rgba(120,144,165,0.25);
  color: var(--muted, #8aa0b6);
  background: rgba(255,255,255,0.04);
  line-height: 1.4;
}
.auto-strat-badge.badge-legs { color: #cbd5e1; }
.auto-strat-badge.badge-credit { color: #6ee7d2; border-color: rgba(56,189,178,0.40); background: rgba(56,189,178,0.10); }
.auto-strat-badge.badge-debit { color: #a8b6c7; }
.auto-strat-badge.badge-defined { color: #b6e7c0; border-color: rgba(116,196,134,0.40); background: rgba(116,196,134,0.08); }
.auto-strat-badge.badge-unbounded { color: #ffb4b4; border-color: rgba(255,107,107,0.45); background: rgba(255,107,107,0.10); font-weight: 700; }

/* Weight slider on selected chips */
.auto-strat-weight {
  display: inline-flex; align-items: center;
  gap: 5px;
  margin-right: 4px;
  padding: 3px 8px;
  background: rgba(0,0,0,0.20);
  border-radius: 5px;
  border: 1px solid rgba(120,144,165,0.15);
}
.auto-strat-weight-label {
  font-size: 10px; color: var(--muted, #8aa0b6); font-weight: 600;
}
.auto-strat-weight-range {
  -webkit-appearance: none; appearance: none;
  width: 70px; height: 4px;
  background: rgba(120,144,165,0.25);
  border-radius: 999px;
  outline: none;
  margin: 0;
}
.auto-strat-weight-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 12px; height: 12px;
  background: #38bdb2;
  border-radius: 50%;
  border: 2px solid #0d1117;
  cursor: pointer;
}
.auto-strat-weight-range::-moz-range-thumb {
  width: 12px; height: 12px;
  background: #38bdb2;
  border-radius: 50%;
  border: 2px solid #0d1117;
  cursor: pointer;
}
.auto-strat-weight-val {
  font-size: 11px; color: #6ee7d2; font-weight: 600;
  min-width: 14px; text-align: center;
}

/* Available chip can be focused (keyboard) */
.auto-strat-chip.available:focus {
  outline: none;
  border-color: rgba(56,189,178,0.55);
  background: rgba(56,189,178,0.08);
  box-shadow: 0 0 0 2px rgba(56,189,178,0.15);
}

/* Lists scroll a bit taller now to fit weight slider rows */
.auto-strat-list.selected { max-height: 420px; }
.auto-strat-list.available { max-height: 420px; }

/* ============================================================
   Wave 23 — Interactivity Layer
   ============================================================ */

/* --- Number flip animation --- */
.w23-flip { position: relative; display: inline-block; transition: color 240ms ease; }
.w23-flip.up   { color: #5eea9a; animation: w23-flash-up 700ms ease-out; }
.w23-flip.down { color: #ff8b85; animation: w23-flash-dn 700ms ease-out; }
@keyframes w23-flash-up {
  0%   { background: rgba(94,234,154,0.30); }
  60%  { background: rgba(94,234,154,0.12); }
  100% { background: transparent; }
}
@keyframes w23-flash-dn {
  0%   { background: rgba(255,139,133,0.30); }
  60%  { background: rgba(255,139,133,0.12); }
  100% { background: transparent; }
}

/* --- Sparkline tiles --- */
.w23-spark {
  position: absolute; bottom: 4px; right: 6px;
  width: 64px; height: 18px; opacity: 0.55;
  pointer-events: none;
}
.sys-hero-tile { position: relative; }
.w23-spark path { fill: none; stroke: var(--accent, #6ee7d6); stroke-width: 1.4; }
.w23-spark path.up   { stroke: #5eea9a; }
.w23-spark path.down { stroke: #ff8b85; }

/* --- Rich tooltip --- */
.w23-tip {
  position: fixed; z-index: 99999;
  background: #0e1a1d; color: #e6f1ef;
  border: 1px solid rgba(110,231,214,0.25);
  border-radius: 8px;
  padding: 8px 10px; font-size: 12px; line-height: 1.45;
  max-width: 280px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  opacity: 0; transform: translateY(4px);
  transition: opacity 140ms ease, transform 140ms ease;
  pointer-events: none;
}
.w23-tip.show { opacity: 1; transform: translateY(0); }
.w23-tip .w23-tip-title { font-weight: 600; color: #fff; margin-bottom: 2px; }
.w23-tip .w23-tip-body  { color: #aab9b6; }
[data-tip] { cursor: help; }
[data-tip-static] { cursor: default; }

/* --- Watchlist drag-to-reorder + pin --- */
#watchlist li { transition: background 160ms ease, transform 160ms ease, opacity 160ms ease; cursor: grab; }
#watchlist li:active { cursor: grabbing; }
#watchlist li.w23-dragging { opacity: 0.55; transform: scale(0.98); }
#watchlist li.w23-drop-above { box-shadow: inset 0 2px 0 var(--accent, #6ee7d6); }
#watchlist li.w23-drop-below { box-shadow: inset 0 -2px 0 var(--accent, #6ee7d6); }
#watchlist li .w23-pin {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-right: 4px;
  color: #6ee7d6; opacity: 0; transition: opacity 140ms ease;
  font-size: 11px;
}
#watchlist li.w23-pinned .w23-pin { opacity: 0.9; }
#watchlist li:hover .w23-pin { opacity: 0.4; }

/* --- Cycle progress ring (Auto-Trade) --- */
.w23-ring-wrap {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: 12px;
  font-size: 12px; color: var(--muted, #98a8a4);
}
.w23-ring {
  width: 22px; height: 22px;
  transform: rotate(-90deg);
}
.w23-ring .bg { stroke: rgba(110,231,214,0.12); }
.w23-ring .fg {
  stroke: var(--accent, #6ee7d6);
  transition: stroke-dashoffset 900ms linear;
}

/* --- Activity pulse (ledger/fills tick indicator) --- */
.w23-pulse-dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted, #98a8a4);
  margin-right: 6px; vertical-align: middle;
  transition: background 200ms ease;
}
.w23-pulse-dot.live {
  background: #5eea9a;
  animation: w23-live-pulse 1.4s ease-in-out infinite;
}
@keyframes w23-live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(94,234,154,0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(94,234,154,0); }
}

/* --- Skeleton shimmer --- */
.w23-skel {
  display: inline-block; height: 1em; min-width: 60px;
  background: linear-gradient(90deg,
    rgba(110,231,214,0.06) 0%,
    rgba(110,231,214,0.16) 50%,
    rgba(110,231,214,0.06) 100%);
  background-size: 200% 100%;
  border-radius: 4px;
  animation: w23-shimmer 1.4s ease-in-out infinite;
  color: transparent;
}
@keyframes w23-shimmer {
  0%   { background-position:  200% 0; }
  100% { background-position: -200% 0; }
}

/* --- Toast with undo --- */
.toast .w23-undo {
  background: transparent; border: 1px solid rgba(110,231,214,0.3);
  color: var(--accent, #6ee7d6); border-radius: 4px;
  font-size: 11px; padding: 2px 8px; margin: 0 6px;
  cursor: pointer; transition: background 140ms ease;
}
.toast .w23-undo:hover { background: rgba(110,231,214,0.12); }

/* --- Section collapse animation --- */
.card.collapsible > .card-body { transition: max-height 300ms cubic-bezier(.4,.0,.2,1), opacity 200ms ease, padding 200ms ease; overflow: hidden; }
.card.collapsible.w23-collapsed > .card-body { max-height: 0 !important; opacity: 0; padding-top: 0; padding-bottom: 0; }
.card.collapsible .w23-chev { transition: transform 220ms cubic-bezier(.4,.0,.2,1); display: inline-block; margin-left: 6px; }
.card.collapsible.w23-collapsed .w23-chev { transform: rotate(-90deg); }

/* --- Command palette polish --- */
.cmdk-recent-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--muted, #98a8a4); padding: 6px 12px 2px;
}
.cmdk-item .cmdk-match { color: var(--accent, #6ee7d6); font-weight: 600; }

/* --- Hover glow on interactive cards --- */
.sys-hero-tile { transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; }
.sys-hero-tile:hover {
  transform: translateY(-1px);
  border-color: rgba(110,231,214,0.35);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}

/* --- Nav-item active indicator slide --- */
.sidebar { position: relative; }
.w23-nav-indicator {
  position: absolute;
  left: 0; width: 3px;
  background: var(--accent, #6ee7d6);
  border-radius: 0 2px 2px 0;
  transition: top 260ms cubic-bezier(.4,.0,.2,1), height 260ms cubic-bezier(.4,.0,.2,1), opacity 180ms ease;
  opacity: 0;
  pointer-events: none;
}

/* --- Subnav buttons polish --- */
[data-subnav] button, [data-subnav] a {
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
[data-subnav] button:hover, [data-subnav] a:hover {
  color: var(--accent, #6ee7d6);
}

/* ============================================================
   Wave 25: System tab group tabs (Status / Activity / Control)
   ============================================================ */
.sys-grouptabs .sys-subnav-inner { gap: 6px; padding: 4px 0; }

.sys-grouptab {
  appearance: none;
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted, #8aa0b6);
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0px;
  padding: 6px 14px;
  border-radius: 8px;
  text-align: left;
  font-family: inherit;
  transition: color 120ms ease, background 120ms ease, border-color 120ms ease;
  min-width: 0;
}
.sys-grouptab:hover {
  color: var(--text, #e6edf3);
  background: rgba(255, 255, 255, 0.04);
}
.sys-grouptab .sgt-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.25;
}
.sys-grouptab .sgt-sub {
  font-size: 11px;
  line-height: 1.15;
  margin-top: 2px;
}
.sys-grouptab.active {
  color: var(--text, #e6edf3);
  background: rgba(56, 189, 178, 0.12);
  border-color: rgba(56, 189, 178, 0.32);
  box-shadow: inset 0 -2px 0 0 #38bdb2;
}
.sys-grouptab.active .sgt-sub { color: rgba(110, 231, 210, 0.85); }

/* Hide cards whose group isn't currently active. The hero band has no
   data-sys-group attr, so it remains visible across all groups.
   IMPORTANT: exclude the tab buttons themselves (.sys-grouptab), which
   also carry data-sys-group but should always be visible. */
#tab-system [data-sys-group]:not(.sys-grouptab) { display: none; }
#tab-system[data-sys-active-group="status"]        [data-sys-group="status"]:not(.sys-grouptab)        { display: block; }
#tab-system[data-sys-active-group="activity"]      [data-sys-group="activity"]:not(.sys-grouptab)      { display: block; }
#tab-system[data-sys-active-group="control"]       [data-sys-group="control"]:not(.sys-grouptab)       { display: block; }
#tab-system[data-sys-active-group="observability"] [data-sys-group="observability"]:not(.sys-grouptab) { display: block; }
/* grid-2 needs its display preserved when active */
#tab-system[data-sys-active-group="status"]   div.grid-2[data-sys-group="status"]   { display: grid; }
#tab-system[data-sys-active-group="activity"] div.grid-2[data-sys-group="activity"] { display: grid; }
#tab-system[data-sys-active-group="control"]  div.grid-2[data-sys-group="control"]  { display: grid; }
/* kpi-row uses its own flex layout */
#tab-system[data-sys-active-group="status"]   #sys-kpis[data-sys-group="status"]    { display: flex; }

/* ============================================================
   Wave 31 — Observability card: sidebar layout + redesigned tabs
   ============================================================ */
.sys-obs-card .obs-layout {
  display: grid;
  grid-template-columns: 232px 1fr;
  gap: 18px;
  align-items: start;
}
.sys-obs-card .obs-sidebar {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 0;
  border-right: 1px solid rgba(255,255,255,0.06);
  padding-right: 14px;
  position: sticky;
  top: 10px;
  max-height: calc(100vh - 140px);
  overflow-y: auto;
}
.sys-obs-card .obs-section {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sys-obs-card .obs-section-head {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 2px 6px 4px;
  border-bottom: 1px dashed rgba(255,255,255,0.05);
  margin-bottom: 3px;
}
.sys-obs-card .obs-section-label {
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(110, 231, 210, 0.78);
  font-weight: 600;
}
.sys-obs-card .obs-section-caption {
  font-size: 10.5px;
  opacity: 0.55;
  line-height: 1.3;
}
.sys-obs-card .obs-section-tabs {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sys-obs-card .obs-tab-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 9px;
  background: transparent;
  border: 1px solid transparent;
  border-left: 2px solid transparent;
  border-radius: 4px;
  color: rgba(255,255,255,0.72);
  font-size: 12.5px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.sys-obs-card .obs-tab-row:hover {
  background: rgba(110, 231, 210, 0.06);
  color: rgba(255,255,255,0.95);
}
.sys-obs-card .obs-tab-row.active {
  background: rgba(110, 231, 210, 0.12);
  border-left-color: rgba(110, 231, 210, 0.95);
  color: rgba(110, 231, 210, 1);
  font-weight: 600;
}
.sys-obs-card .obs-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  opacity: 0.75;
  flex-shrink: 0;
}
.sys-obs-card .obs-tab-row.active .obs-tab-icon { opacity: 1; }
.sys-obs-card .obs-tab-label { line-height: 1.2; }
.sys-obs-card .obs-content { min-width: 0; }
.sys-obs-card .obs-content .bot-obs-panel { display: none; }
.sys-obs-card .obs-content .bot-obs-panel:not([hidden]) { display: block; }
/* The first panel (insights) has no `hidden` attr — keep it visible by default */
.sys-obs-card .obs-content #bot-obs-insights { display: block; }
.sys-obs-card .obs-content #bot-obs-insights[hidden] { display: none; }

/* Mobile: collapse sidebar above content */
@media (max-width: 900px) {
  .sys-obs-card .obs-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .sys-obs-card .obs-sidebar {
    position: static;
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    padding-right: 0;
    padding-bottom: 10px;
    max-height: none;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
  }
  .sys-obs-card .obs-section { flex: 1 1 160px; }
}

/* ============================================================
   Wave 26 — Strategy Finder (Builder tab)
   ============================================================ */
.strategy-finder { margin-bottom: 12px; padding: 14px 16px; }
.strategy-finder .sf-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; margin-bottom: 12px;
}
.strategy-finder .sf-head h3 { margin: 0 0 2px 0; font-size: 14px; letter-spacing: 0.02em; text-transform: uppercase; }
.strategy-finder .sf-sub { display: block; max-width: 720px; line-height: 1.4; }

.sf-bias-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 11px; border-radius: 999px;
  background: rgba(56, 189, 178, 0.08);
  border: 1px solid rgba(56, 189, 178, 0.25);
  font-size: 12px; font-weight: 600;
}
.sf-bias-pill[data-dir="bullish"] { background: rgba(34, 197, 94, 0.12); border-color: rgba(34, 197, 94, 0.32); color: #4ade80; }
.sf-bias-pill[data-dir="bearish"] { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.32); color: #f87171; }
.sf-bias-pill[data-dir="neutral"] { background: rgba(156, 163, 175, 0.10); border-color: rgba(156, 163, 175, 0.28); color: #cbd5e1; }
.sf-bias-pill .sfb-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sf-bias-pill .sfb-vol { font-weight: 500; opacity: 0.75; }

.sf-controls {
  display: grid;
  grid-template-columns: minmax(110px, 1fr) repeat(3, minmax(90px, 0.7fr)) auto auto auto;
  gap: 10px 12px;
  align-items: end;
}
.sf-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sf-field > span { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted, #8aa0b6); }
.sf-field > input {
  width: 100%; padding: 7px 10px; border-radius: 7px;
  background: var(--card-bg, rgba(255,255,255,0.03));
  border: 1px solid var(--border, rgba(255,255,255,0.08));
  color: var(--text, #e6edf3);
  font: inherit; font-variant-numeric: tabular-nums;
}
.sf-field > input:focus { outline: none; border-color: rgba(56,189,178,0.45); box-shadow: 0 0 0 2px rgba(56,189,178,0.18); }
.sf-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; user-select: none; padding-bottom: 6px; }
.sf-check input { accent-color: #38bdb2; }
.sf-find { white-space: nowrap; }

.sf-status { margin: 10px 0 0; }
.sf-status[data-state="error"] { color: #f87171; }
.sf-status[data-state="loading"] { color: var(--muted, #8aa0b6); }
.sf-status[data-state="ok"] { color: #4ade80; }

.sf-results {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.sf-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
  transition: border-color 120ms ease, transform 120ms ease;
  position: relative;
}
.sf-card:hover { border-color: rgba(56,189,178,0.32); transform: translateY(-1px); }
.sf-card[data-rank="0"] {
  border-color: rgba(56,189,178,0.45);
  box-shadow: 0 0 0 1px rgba(56,189,178,0.18), 0 8px 22px -12px rgba(56,189,178,0.5);
}
.sf-card[data-rank="0"]::before {
  content: "★ TOP PICK";
  position: absolute; top: -8px; left: 12px;
  background: linear-gradient(135deg, #38bdb2, #2a9b8f);
  color: #0a1929; font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; padding: 3px 8px; border-radius: 5px;
}
.sf-card-head { display: flex; justify-content: space-between; align-items: start; gap: 8px; }
.sf-card-name { font-weight: 600; font-size: 14px; line-height: 1.2; }
.sf-card-blurb { font-size: 11px; color: var(--muted, #8aa0b6); line-height: 1.4; margin-top: 3px; }
.sf-score-pill {
  display: inline-flex; flex-direction: column; align-items: center;
  background: rgba(56,189,178,0.10);
  border: 1px solid rgba(56,189,178,0.28);
  border-radius: 8px; padding: 4px 8px;
  min-width: 48px;
}
.sf-score-pill .sfsp-v { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; color: #6ee7d2; }
.sf-score-pill .sfsp-k { font-size: 9px; letter-spacing: 0.08em; color: var(--muted, #8aa0b6); }

.sf-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.sf-tag { font-size: 10px; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.03em; }
.sf-tag.bias-bullish { background: rgba(34, 197, 94, 0.14); color: #4ade80; }
.sf-tag.bias-bearish { background: rgba(239, 68, 68, 0.14); color: #f87171; }
.sf-tag.bias-neutral { background: rgba(156, 163, 175, 0.14); color: #cbd5e1; }
.sf-tag.bias-vol_up { background: rgba(245, 158, 11, 0.14); color: #fbbf24; }
.sf-tag.bias-vol_down { background: rgba(99, 102, 241, 0.14); color: #a5b4fc; }
.sf-tag.risk-defined { background: rgba(56,189,178,0.12); color: #6ee7d2; }
.sf-tag.risk-naked { background: rgba(239, 68, 68, 0.18); color: #fca5a5; font-weight: 600; }
.sf-tag.risk-shares_required { background: rgba(245, 158, 11, 0.12); color: #fbbf24; }
.sf-tag.align-match { background: rgba(56,189,178,0.18); color: #6ee7d2; font-weight: 600; }

.sf-econ { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 8px 0; border-top: 1px dashed rgba(255,255,255,0.06); border-bottom: 1px dashed rgba(255,255,255,0.06); }
.sf-econ-stat { display: flex; flex-direction: column; gap: 2px; }
.sf-econ-k { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted, #8aa0b6); }
.sf-econ-v { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sf-econ-v.pos { color: #4ade80; }
.sf-econ-v.neg { color: #f87171; }
.sf-econ-v.unbounded { color: #fbbf24; font-style: italic; }

.sf-legs { font-size: 11px; }
.sf-legs-h { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted, #8aa0b6); margin-bottom: 4px; }
.sf-leg-row {
  display: grid;
  grid-template-columns: 14px 1fr auto auto;
  gap: 6px; padding: 3px 0;
  font-variant-numeric: tabular-nums;
  align-items: center;
}
.sf-leg-side { font-size: 11px; font-weight: 700; }
.sf-leg-side.long { color: #4ade80; }
.sf-leg-side.short { color: #f87171; }
.sf-leg-desc { color: var(--text, #e6edf3); }
.sf-leg-strike { font-size: 11px; color: var(--muted, #8aa0b6); }
.sf-leg-prem { font-size: 11px; color: #6ee7d2; }

.sf-card-actions { display: flex; gap: 6px; margin-top: 4px; }
.sf-card-actions button { flex: 1; padding: 6px 10px; font-size: 12px; }
.sf-card-actions .sf-apply-btn { background: rgba(56,189,178,0.10); border: 1px solid rgba(56,189,178,0.32); color: #6ee7d2; }
.sf-card-actions .sf-apply-btn:hover { background: rgba(56,189,178,0.18); }
.sf-card-actions .sf-exec-btn { background: linear-gradient(135deg, #38bdb2, #2a9b8f); border: none; color: #061720; font-weight: 700; }
.sf-card-actions .sf-exec-btn:hover { filter: brightness(1.08); }

.sf-card.unbuilt {
  opacity: 0.5;
  background: rgba(239, 68, 68, 0.04);
  border-color: rgba(239, 68, 68, 0.15);
}
.sf-card.unbuilt .sf-card-name { color: #f87171; }

/* Wave 26 - mobile collapse */
@media (max-width: 880px) {
  .sf-controls { grid-template-columns: 1fr 1fr; }
  .sf-find { grid-column: 1 / -1; }
}

/* ============ Wave 26 — Telemetry cards (Phase, Concurrency, Knobs) ============ */
.v3846-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #5fd4ff;
  background: rgba(95, 212, 255, 0.08);
  border: 1px solid rgba(95, 212, 255, 0.22);
  border-radius: 4px;
  vertical-align: 2px;
  text-transform: uppercase;
}
.sys-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #aab2bd;
  white-space: nowrap;
}
.sys-pill.muted { color: #7a8290; }
.sys-pill.ok    { color: #59e6a0; background: rgba(89, 230, 160, 0.08); border-color: rgba(89, 230, 160, 0.22); }
.sys-pill.warn  { color: #ffd166; background: rgba(255, 209, 102, 0.08); border-color: rgba(255, 209, 102, 0.22); }
.sys-pill.bad   { color: #ff6b81; background: rgba(255, 107, 129, 0.08); border-color: rgba(255, 107, 129, 0.22); }

.btn-mini {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cfd5dd;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 13px;
  transition: background 0.15s, transform 0.15s;
}
.btn-mini:hover { background: rgba(95, 212, 255, 0.15); transform: rotate(60deg); }

/* Phase timings */
.sys-phase-card .sys-phase-meta,
.sys-concurrency-card .sys-conc-meta { display: flex; align-items: center; gap: 8px; }
.sys-phase-sub, .sys-conc-sub, .sys-knobs-sub, .sys-vitals-sub { margin: 4px 0 14px; line-height: 1.5; }

/* ---------- Cycle Health vitals card (Wave 30) ---------- */
.sys-vitals-card { border-left: 3px solid rgba(95,212,255,0.35); }
.sys-vitals-meta { display: inline-flex; align-items: center; gap: 8px; }
.sys-vitals-pill {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.06); color: #aab3bf;
  border: 1px solid rgba(255,255,255,0.10);
}
.sys-vitals-pill.ok    { background: rgba(89,230,160,0.14); color: #59e6a0; border-color: rgba(89,230,160,0.35); }
.sys-vitals-pill.warn  { background: rgba(255,180,90,0.14); color: #ffb45a; border-color: rgba(255,180,90,0.35); }
.sys-vitals-pill.bad   { background: rgba(255,107,129,0.14); color: #ff8a9b; border-color: rgba(255,107,129,0.35); }
.sys-vitals-pill.muted { background: rgba(255,255,255,0.05); color: #8a929a; }
.sys-vitals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin: 8px 0 10px;
}
.sys-vital {
  padding: 10px 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 8px;
}
.sv-l { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: #8a929a; margin-bottom: 4px; font-weight: 600; }
.sv-v { font-size: 18px; font-weight: 700; color: #e8ecf0; letter-spacing: -0.01em; }
.sv-v.ok  { color: #59e6a0; }
.sv-v.bad { color: #ff8a9b; }
.sv-sub { font-size: 11px; margin-top: 2px; }
.sv-bar {
  height: 4px; border-radius: 999px; background: rgba(255,255,255,0.05); margin-top: 6px; overflow: hidden;
}
.sv-bar-fill { height: 100%; border-radius: 999px; transition: width 0.4s ease, background 0.2s ease; background: #5fd4ff; }
.sv-bar-fill.ok   { background: linear-gradient(90deg, #59e6a0, #6cf0aa); }
.sv-bar-fill.warn { background: linear-gradient(90deg, #ffb45a, #ffd06a); }
.sv-bar-fill.bad  { background: linear-gradient(90deg, #ff6b81, #ff8a9b); }
.sv-bar-fill.muted{ background: rgba(255,255,255,0.12); }
.sv-spark { margin-top: 6px; min-height: 22px; }
.sys-vitals-issues { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.sv-issue {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 6px;
  font-size: 12px; color: #d5dbe2;
  background: rgba(255,255,255,0.03);
  border-left: 3px solid #aab3bf;
}
.sv-issue.bad  { background: rgba(255,107,129,0.08); border-left-color: #ff6b81; color: #ffc4cd; }
.sv-issue.warn { background: rgba(255,180,90,0.07); border-left-color: #ffb45a; color: #ffd9a8; }
.sv-issue-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; opacity: 0.7; }
.sys-phase-sub code, .sys-conc-sub code, .sys-knobs-sub code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  padding: 1px 5px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 3px;
  color: #d0d6dd;
}
.sys-phase-grid { display: flex; flex-direction: column; gap: 10px; }
.sys-phase-cell {
  display: grid;
  grid-template-columns: 140px auto 1fr;
  align-items: center;
  gap: 12px;
}
.phase-label {
  font-size: 12px;
  color: #aab2bd;
  font-weight: 500;
}
.phase-val {
  font-size: 13px;
  color: #e8ecf0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  min-width: 70px;
  text-align: right;
}
.phase-bar {
  height: 6px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  overflow: hidden;
}
.phase-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #5fd4ff, #59e6a0);
  border-radius: 3px;
  transition: width 0.3s ease;
}
.sys-phase-empty, .sys-conc-empty, .sys-knobs-empty {
  text-align: center;
  color: #7a8290;
  font-size: 12px;
  padding: 24px 12px;
  font-style: italic;
}

/* Adaptive concurrency */
.sys-conc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}
.sys-conc-stat {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 8px 10px;
}
.sct-l {
  font-size: 10px;
  color: #7a8290;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.sct-v {
  font-size: 16px;
  font-weight: 700;
  color: #e8ecf0;
  font-variant-numeric: tabular-nums;
}
.sys-conc-track {
  position: relative;
  height: 10px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 5px;
  overflow: visible;
  margin-bottom: 14px;
}
.sys-conc-fill {
  height: 100%;
  background: linear-gradient(90deg, #5fd4ff, #59e6a0);
  border-radius: 5px;
  transition: width 0.4s ease;
}
.sys-conc-ticks {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 2px;
  pointer-events: none;
}
.sys-conc-ticks span {
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.sys-conc-events {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 140px;
  overflow-y: auto;
  font-size: 11px;
}
.sys-conc-evt {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.02);
  align-items: center;
}
.sys-conc-evt .sce-t { color: #7a8290; font-variant-numeric: tabular-nums; }
.sys-conc-evt .sce-r { color: #aab2bd; }
.sys-conc-evt .sce-d {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sys-conc-evt.up   .sce-d { color: #59e6a0; }
.sys-conc-evt.down .sce-d { color: #ff6b81; }

/* Runtime knobs */
.sys-knobs-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sys-knobs-meta input[type="search"] {
  width: 180px;
  height: 26px;
  padding: 0 10px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: #e8ecf0;
}
.sys-knobs-tablewrap {
  overflow-x: auto;
  max-height: 380px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 8px;
}
.sys-knobs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.sys-knobs-table thead th {
  position: sticky;
  top: 0;
  background: rgba(20, 24, 30, 0.95);
  backdrop-filter: blur(6px);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #7a8290;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.sys-knobs-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  color: #cfd5dd;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  vertical-align: middle;
}
.sys-knobs-table tbody tr:last-child td { border-bottom: none; }
.sys-knobs-table tbody tr:hover { background: rgba(95, 212, 255, 0.04); }
.sys-knobs-table .al-r { text-align: right; }
.sys-knobs-table .kn-key { color: #e8ecf0; font-weight: 600; }
.sys-knobs-table .kn-cur-true  { color: #59e6a0; font-weight: 700; }
.sys-knobs-table .kn-cur-false { color: #ff6b81; }
.kn-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 6px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  color: #aab3bf;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
}
.kn-toggle .kn-toggle-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.06);
  transition: all 0.15s ease;
}
.kn-toggle.on  { background: rgba(89,230,160,0.12); border-color: rgba(89,230,160,0.35); color: #59e6a0; }
.kn-toggle.on  .kn-toggle-dot { box-shadow: 0 0 0 2px rgba(89,230,160,0.18), 0 0 8px rgba(89,230,160,0.6); }
.kn-toggle.off { background: rgba(255,107,129,0.08); border-color: rgba(255,107,129,0.28); color: #ff8a9b; }
.kn-toggle:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.1); }
.kn-toggle.busy, .kn-toggle:disabled { opacity: 0.55; cursor: wait; }
.sys-knobs-table .kn-coerce {
  display: inline-block;
  padding: 1px 6px;
  font-size: 10px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  color: #aab2bd;
  text-transform: lowercase;
  font-family: inherit;
}

@media (max-width: 980px) {
  .sys-conc-stats { grid-template-columns: repeat(2, 1fr); }
  .sys-knobs-meta input[type="search"] { width: 120px; }
}

/* ============ Wave 26 — System polish (density, shortcuts) ============ */
.sys-density-toggle, .sys-shortcuts-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  color: #aab2bd;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sys-density-toggle:hover, .sys-shortcuts-btn:hover {
  background: rgba(95, 212, 255, 0.08);
  border-color: rgba(95, 212, 255, 0.3);
  color: #e8ecf0;
}
.sys-density-toggle .sdt-icon { display: inline-flex; }
.sys-shortcuts-btn { padding: 0 8px; }
.sys-shortcuts-btn kbd {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  padding: 0;
  background: none;
  border: none;
  color: inherit;
}

/* Density: compact mode */
#tab-system[data-density="compact"] .card {
  padding: 12px 14px;
}
#tab-system[data-density="compact"] .card-header { margin-bottom: 8px; }
#tab-system[data-density="compact"] .card-header h3 { font-size: 13px; }
#tab-system[data-density="compact"] .sys-phase-cell { gap: 8px; }
#tab-system[data-density="compact"] .sys-conc-stats { gap: 6px; }
#tab-system[data-density="compact"] .sys-conc-stat { padding: 6px 8px; }
#tab-system[data-density="compact"] .sct-v { font-size: 14px; }
#tab-system[data-density="compact"] .sys-knobs-table tbody td { padding: 5px 10px; font-size: 11px; }
#tab-system[data-density="compact"] .sys-hero-band { gap: 8px; }
#tab-system[data-density="compact"] .sys-hero-tile { padding: 10px 12px; }
#tab-system[data-density="compact"] .grid-2 { gap: 10px; }

/* Shortcuts popover */
.sys-shortcuts-popover {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: 200;
  background: rgba(20, 24, 30, 0.96);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(95, 212, 255, 0.25);
  border-radius: 10px;
  padding: 14px 18px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(95, 212, 255, 0.08);
  min-width: 240px;
  animation: ssp-in 0.18s ease-out;
}
@keyframes ssp-in {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.sys-shortcuts-popover .ssp-head {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5fd4ff;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.sys-shortcuts-popover .ssp-table {
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
}
.sys-shortcuts-popover .ssp-table td {
  padding: 4px 0;
  color: #cfd5dd;
}
.sys-shortcuts-popover .ssp-table td:first-child {
  padding-right: 16px;
  white-space: nowrap;
}
.sys-shortcuts-popover kbd {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  color: #e8ecf0;
  margin: 0 2px;
  min-width: 14px;
  text-align: center;
}

/* Toast hint for shortcut activations */
.sys-shortcut-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 24, 30, 0.95);
  border: 1px solid rgba(95, 212, 255, 0.3);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 12px;
  color: #e8ecf0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  z-index: 300;
  animation: sst-in 0.15s ease-out, sst-out 0.3s ease-in 1.3s forwards;
  pointer-events: none;
}
@keyframes sst-in { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes sst-out { to { opacity: 0; transform: translate(-50%, -6px); } }

/* ============ Wave 26 — Overview hero (sparklines, health pill, phase hover) ============ */
.ov-bot-status-title { position: relative; }

.ov-health-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #aab2bd;
  margin-left: 4px;
}
.ov-health-pill .ovh-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #aab2bd;
  box-shadow: 0 0 0 3px rgba(170, 178, 189, 0.16);
}
.ov-health-pill[data-state="healthy"] { color: #59e6a0; border-color: rgba(89, 230, 160, 0.3); }
.ov-health-pill[data-state="healthy"] .ovh-dot { background: #59e6a0; box-shadow: 0 0 0 3px rgba(89, 230, 160, 0.22); animation: ovh-pulse 2.4s ease-in-out infinite; }
.ov-health-pill[data-state="degraded"] { color: #ffd166; border-color: rgba(255, 209, 102, 0.3); }
.ov-health-pill[data-state="degraded"] .ovh-dot { background: #ffd166; box-shadow: 0 0 0 3px rgba(255, 209, 102, 0.22); }
.ov-health-pill[data-state="down"] { color: #ff6b81; border-color: rgba(255, 107, 129, 0.3); }
.ov-health-pill[data-state="down"] .ovh-dot { background: #ff6b81; box-shadow: 0 0 0 3px rgba(255, 107, 129, 0.22); }
@keyframes ovh-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(89, 230, 160, 0.22); }
  50% { box-shadow: 0 0 0 6px rgba(89, 230, 160, 0.08); }
}

.ov-cycle-pulse { cursor: help; }
.ov-cycle-pulse:hover + .ov-phase-popover,
.ov-phase-popover:hover { display: flex !important; }

.ov-phase-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 50;
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  background: rgba(20, 24, 30, 0.96);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(95, 212, 255, 0.25);
  border-radius: 8px;
  padding: 10px 14px;
  min-width: 210px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  font-size: 12px;
}
.ov-phase-popover[hidden] { display: none !important; }
.ov-phase-popover .ovp-head {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #5fd4ff;
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ov-phase-popover .ovp-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.ov-phase-popover .ovp-l { color: #aab2bd; }
.ov-phase-popover .ovp-v { color: #e8ecf0; font-variant-numeric: tabular-nums; font-weight: 600; }
.ov-phase-popover .ovp-foot {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-style: italic;
}

.ov-bs-tile { position: relative; }
.ov-bs-spark {
  position: absolute;
  right: 10px;
  bottom: 8px;
  width: 60px;
  height: 14px;
  opacity: 0.85;
  pointer-events: none;
}
.ov-bs-spark path { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ov-bs-spark .sparkfill { stroke: none; opacity: 0.18; }
.ov-bs-spark[data-trend="up"] path.sparkline { stroke: #59e6a0; }
.ov-bs-spark[data-trend="up"] .sparkfill { fill: #59e6a0; }
.ov-bs-spark[data-trend="down"] path.sparkline { stroke: #ff6b81; }
.ov-bs-spark[data-trend="down"] .sparkfill { fill: #ff6b81; }
.ov-bs-spark[data-trend="flat"] path.sparkline { stroke: #aab2bd; }
.ov-bs-spark[data-trend="flat"] .sparkfill { fill: #aab2bd; }

/* Tighten value width so spark fits */
.ov-bs-tile .ov-bs-v { padding-right: 50px; }

/* ============ Wave 26 — Builder / Backtest / Alerts polish ============ */
/* Sticky header within main tabs (not System which has its own sub-nav) */
#tab-builder > .card:first-child .card-header,
#tab-backtest > .card:first-child .card-header,
#tab-alerts > .card:first-child .card-header,
#tab-opt-backtest > .card:first-child .card-header {
  position: sticky;
  top: 0;
  z-index: 12;
  background: rgba(13, 17, 23, 0.92);
  backdrop-filter: blur(6px);
  margin: -12px -14px 10px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Form grouping enhancements - thin section dividers */
#tab-builder .card .form-row + .form-row-section,
#tab-backtest .card .form-row + .form-row-section,
#tab-alerts .card .form-row + .form-row-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255, 255, 255, 0.06);
}

/* Strategy Finder → Builder link helper */
.sf-builder-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  font-size: 11px;
  color: #5fd4ff;
  text-decoration: none;
  border-bottom: 1px dotted rgba(95, 212, 255, 0.4);
  padding-bottom: 1px;
  transition: color 0.15s;
}
.sf-builder-link:hover { color: #8ee2ff; }

/* Focus states for inputs in Builder/Backtest/Alerts */
#tab-builder input:focus-visible,
#tab-backtest input:focus-visible,
#tab-alerts input:focus-visible,
#tab-builder select:focus-visible,
#tab-backtest select:focus-visible,
#tab-alerts select:focus-visible {
  outline: 2px solid rgba(95, 212, 255, 0.5);
  outline-offset: 1px;
  border-color: rgba(95, 212, 255, 0.6);
}

/* ============ Wave 26b — Strategy Finder: cost cell highlight ============ */
.sf-econ-stat.sf-econ-cost {
  grid-column: 1 / -1;
  background: rgba(95, 212, 255, 0.06);
  border: 1px solid rgba(95, 212, 255, 0.18);
  border-radius: 6px;
  padding: 8px 10px !important;
}
.sf-econ-stat.sf-econ-cost .sf-econ-k {
  font-size: 10px;
  color: #5fd4ff;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.sf-econ-stat.sf-econ-cost .sf-econ-v {
  font-size: 16px;
  font-weight: 700;
}

/* ============ Wave 27 — Danger button for destructive actions ============ */
.btn.btn-danger {
  background: rgba(244, 92, 92, 0.12);
  color: #ff8a8a;
  border: 1px solid rgba(244, 92, 92, 0.4);
}
.btn.btn-danger:hover:not(:disabled) {
  background: rgba(244, 92, 92, 0.22);
  border-color: rgba(244, 92, 92, 0.7);
  color: #ffb0b0;
}
.btn.btn-danger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ============ Wave 28 — Positions panel ============ */
.pos-summary {
  display: flex; gap: 18px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 10px;
  background: rgba(95,212,255,0.04);
  border: 1px solid rgba(95,212,255,0.14);
  border-radius: 8px;
}
.pos-summary-stat {
  display: flex; flex-direction: column; gap: 2px; min-width: 100px;
}
.pos-summary-k {
  font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--muted, #8a9aa8); font-weight: 600;
}
.pos-summary-v { font-size: 16px; font-weight: 700; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.pos-summary-v.ok { color: #4ade80; }
.pos-summary-v.bad { color: #ff8a8a; }
.pos-table .pos-row-tp td { background: rgba(74, 222, 128, 0.06); }
.pos-table .pos-row-tp:hover td { background: rgba(74, 222, 128, 0.12); }
.pos-table .pos-row-sl td { background: rgba(244, 92, 92, 0.06); }
.pos-table .pos-row-sl:hover td { background: rgba(244, 92, 92, 0.12); }
.pos-table .btn-tp {
  background: rgba(74, 222, 128, 0.12);
  color: #6ee7a0; border: 1px solid rgba(74, 222, 128, 0.4);
  margin-right: 4px;
}
.pos-table .btn-tp:hover:not(:disabled) {
  background: rgba(74, 222, 128, 0.24);
  border-color: rgba(74, 222, 128, 0.7); color: #b6f5cf;
}
.pos-table .btn-sl {
  background: rgba(244, 92, 92, 0.12);
  color: #ff8a8a; border: 1px solid rgba(244, 92, 92, 0.4);
  margin-right: 4px;
}
.pos-table .btn-sl:hover:not(:disabled) {
  background: rgba(244, 92, 92, 0.24);
  border-color: rgba(244, 92, 92, 0.7); color: #ffb0b0;
}
.pos-table td.r .btn { padding: 3px 8px; font-size: 11px; }
.badge-opt {
  display: inline-block; font-size: 9px; letter-spacing: 0.05em;
  padding: 1px 4px; border-radius: 3px; margin-left: 4px;
  background: rgba(95,212,255,0.16); color: #5fd4ff; font-weight: 700;
}

/* ===========================================================
   Wave 32 — Upload version warnings + interactive Status tab
   =========================================================== */

/* --- Upload warnings banner --- */
.sys-upload-warnings { margin: 0 0 12px 0; }
.sys-warn-banner {
  background: linear-gradient(180deg, rgba(250, 204, 21, 0.10), rgba(250, 204, 21, 0.04));
  border: 1px solid rgba(250, 204, 21, 0.45);
  border-left: 3px solid #facc15;
  border-radius: 8px;
  padding: 10px 14px 12px;
  color: #e6e8eb;
  font-size: 13px;
  line-height: 1.45;
}
.sys-warn-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.sys-warn-head strong { color: #facc15; font-weight: 600; }
.sys-warn-icon { color: #facc15; font-size: 16px; }
.sys-warn-head .muted { margin-left: 4px; }
.sys-warn-head code {
  background: rgba(0,0,0,0.25); padding: 1px 5px; border-radius: 3px;
  font-size: 12px;
}
.sys-warn-close {
  margin-left: auto; cursor: pointer;
  background: transparent; border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.6); padding: 2px 8px; border-radius: 4px;
}
.sys-warn-close:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
.sys-warn-sources {
  display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 8px;
}
.sys-warn-chip {
  background: rgba(0,0,0,0.25); border: 1px solid rgba(250, 204, 21, 0.2);
  padding: 2px 8px; border-radius: 999px; font-size: 11px;
  color: #cbd5e1;
}
.sys-warn-chip code { background: transparent; padding: 0; color: #facc15; }
.sys-warn-list {
  margin: 0; padding-left: 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.sys-warn-list li { color: #d4d4d8; }
.sys-warn-list code {
  background: rgba(0,0,0,0.3); padding: 1px 4px; border-radius: 3px;
  color: #facc15; font-size: 12px;
}

/* --- Status tab toolbar --- */
.sys-status-toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 8px 14px; margin: 0 0 12px 0;
  background: linear-gradient(180deg, rgba(94, 234, 212, 0.04), rgba(94, 234, 212, 0.01));
  border: 1px solid rgba(94, 234, 212, 0.15);
  border-radius: 8px;
  min-height: 36px;
}
.sst-left  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.sst-right { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; justify-self: end; }
@media (max-width: 720px) {
  .sys-status-toolbar { grid-template-columns: 1fr; row-gap: 8px; }
  .sst-right { justify-self: stretch; }
}
.sst-action { white-space: nowrap; }
.sst-label { color: #cbd5e1; font-size: 12px; font-weight: 500; }
.sst-sep { color: rgba(255,255,255,0.18); }
.sst-meta { color: rgba(255,255,255,0.5); font-size: 12px; }

.sst-live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #5eead4;
  box-shadow: 0 0 0 3px rgba(94, 234, 212, 0.18);
  animation: w32-pulse 2.2s ease-in-out infinite;
}
.sst-live-dot.paused {
  background: rgba(148,163,184,0.6);
  box-shadow: 0 0 0 3px rgba(148,163,184,0.15);
  animation: none;
}
@keyframes w32-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

.sst-toggle {
  background: rgba(94, 234, 212, 0.10);
  border: 1px solid rgba(94, 234, 212, 0.30);
  color: #5eead4;
  padding: 3px 10px; border-radius: 4px; font-size: 12px;
  cursor: pointer; transition: background .12s, border-color .12s;
}
.sst-toggle:hover { background: rgba(94, 234, 212, 0.18); border-color: rgba(94, 234, 212, 0.55); }
.sst-toggle[aria-pressed="false"] {
  background: rgba(148, 163, 184, 0.10);
  border-color: rgba(148, 163, 184, 0.30);
  color: #cbd5e1;
}

.sys-status-toolbar.paused {
  background: linear-gradient(180deg, rgba(148, 163, 184, 0.05), rgba(148, 163, 184, 0.02));
  border-color: rgba(148, 163, 184, 0.18);
}

/* Override .btn-mini's fixed 24x24 square so our action buttons fit their text. */
.sys-status-toolbar .sst-action.btn-mini,
button.sst-action {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: #e6e8eb;
  padding: 4px 10px; border-radius: 5px; font-size: 12px; line-height: 1.2;
  width: auto; height: auto; min-height: 26px;
  white-space: nowrap;
  cursor: pointer; transition: background .12s, border-color .12s, transform 0s;
}
.sys-status-toolbar .sst-action.btn-mini:hover,
button.sst-action:hover { background: rgba(255,255,255,0.08); border-color: rgba(94, 234, 212, 0.35); color: #5eead4; transform: none; }
.sst-action:disabled { opacity: 0.55; cursor: wait; }
.sst-action.spinning { animation: w32-spin .8s linear infinite; transform-origin: center; }
@keyframes w32-spin {
  to { transform: rotate(360deg); }
}

/* --- KPI drill affordance --- */
.kpi.w32-kpi-drillable {
  cursor: pointer;
  transition: transform .12s, border-color .12s, background .12s;
  position: relative;
}
.kpi.w32-kpi-drillable:hover {
  transform: translateY(-1px);
  border-color: rgba(94, 234, 212, 0.45);
  background: rgba(94, 234, 212, 0.05);
}
.kpi.w32-kpi-drillable:focus-visible {
  outline: 2px solid rgba(94, 234, 212, 0.6);
  outline-offset: 1px;
}
.kpi.w32-kpi-drillable::after {
  content: "↗";
  position: absolute;
  top: 6px; right: 8px;
  font-size: 10px;
  color: rgba(94, 234, 212, 0.0);
  transition: color .12s;
}
.kpi.w32-kpi-drillable:hover::after { color: rgba(94, 234, 212, 0.85); }

/* --- Drill flash on landing target --- */
.w32-flash {
  animation: w32-flash-anim 1.4s ease-out;
}
@keyframes w32-flash-anim {
  0%   { box-shadow: 0 0 0 0 rgba(94, 234, 212, 0.55), 0 0 0 0 rgba(94, 234, 212, 0.35); }
  30%  { box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.30), 0 0 24px 0 rgba(94, 234, 212, 0.18); }
  100% { box-shadow: 0 0 0 0 rgba(94, 234, 212, 0.0), 0 0 0 0 rgba(94, 234, 212, 0.0); }
}

/* ===================== WAVE 33 — Package Capabilities ===================== */
.sys-cap-statrow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.sys-cap-stat {
  background: rgba(20, 184, 166, 0.04);
  border: 1px solid rgba(20, 184, 166, 0.18);
  border-radius: 8px;
  padding: 10px 12px;
}
.sys-cap-stat-val {
  font-size: 18px;
  font-weight: 600;
  color: #5eead4;
  line-height: 1.1;
}
.sys-cap-stat-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  margin-top: 4px;
}
.sys-cap-stat-sub { margin-top: 2px; }

.sys-cap-changelog {
  background: linear-gradient(180deg, rgba(45, 212, 191, 0.07), rgba(20, 184, 166, 0.03));
  border: 1px solid rgba(45, 212, 191, 0.25);
  border-left: 3px solid #2dd4bf;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 8px 0 12px 0;
}
.sys-cap-cl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}
.sys-cap-cl-title { font-size: 13px; }
.sys-cap-cl-tag {
  display: inline-block;
  background: #2dd4bf;
  color: #0f172a;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-right: 4px;
}
.sys-cap-cl-pill {
  background: rgba(45, 212, 191, 0.12);
  color: #5eead4;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid rgba(45, 212, 191, 0.3);
}
.sys-cap-cl-theme {
  font-size: 12px;
  color: #cbd5e1;
  line-height: 1.45;
  margin-bottom: 6px;
}
.sys-cap-cl-sections {
  margin: 4px 0 0 18px;
  padding: 0;
  font-size: 11px;
  color: #94a3b8;
  columns: 2;
  column-gap: 14px;
}
.sys-cap-cl-sections li { margin-bottom: 2px; break-inside: avoid; }

.sys-cap-toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 8px 0;
}
.sys-cap-toolbar-spacer { flex: 1; }
.sys-cap-filter {
  flex: 0 1 260px;
  background: rgba(15, 23, 42, 0.5);
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 6px;
  padding: 6px 10px;
  color: #e2e8f0;
  font-size: 12px;
}
.sys-cap-filter:focus {
  outline: none;
  border-color: rgba(45, 212, 191, 0.5);
  box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.15);
}
.sys-cap-btn {
  background: rgba(45, 212, 191, 0.08);
  border: 1px solid rgba(45, 212, 191, 0.25);
  color: #5eead4;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 11px;
  cursor: pointer;
  width: auto;
  height: auto;
  min-height: 26px;
}
.sys-cap-btn:hover { background: rgba(45, 212, 191, 0.15); }

.sys-cap-families {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.sys-cap-family {
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.3);
  overflow: hidden;
}
.sys-cap-family.ok { border-color: rgba(34, 197, 94, 0.22); }
.sys-cap-family.partial { border-color: rgba(251, 191, 36, 0.3); }
.sys-cap-family.missing { border-color: rgba(239, 68, 68, 0.3); }
.sys-cap-family > summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}
.sys-cap-family > summary::-webkit-details-marker { display: none; }
.sys-cap-family > summary::before {
  content: "▸";
  font-size: 10px;
  color: #64748b;
  transition: transform 0.15s;
  flex: 0 0 8px;
}
.sys-cap-family[open] > summary::before { transform: rotate(90deg); }
.sys-cap-fam-icon { font-size: 14px; flex: 0 0 18px; text-align: center; }
.sys-cap-fam-label { font-weight: 600; color: #e2e8f0; flex: 0 0 auto; font-size: 13px; }
.sys-cap-fam-req {
  background: rgba(45, 212, 191, 0.12);
  color: #5eead4;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  border: 1px solid rgba(45, 212, 191, 0.25);
}
.sys-cap-fam-opt {
  background: rgba(148, 163, 184, 0.08);
  color: #94a3b8;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
}
.sys-cap-fam-counts {
  font-variant-numeric: tabular-nums;
  color: #cbd5e1;
  font-size: 12px;
  margin-left: auto;
  flex: 0 0 auto;
}
.sys-cap-fam-bar {
  flex: 0 0 70px;
  height: 5px;
  background: rgba(148, 163, 184, 0.15);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.sys-cap-fam-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2dd4bf, #14b8a6);
  border-radius: 999px;
}
.sys-cap-family.partial .sys-cap-fam-bar-fill {
  background: linear-gradient(90deg, #fbbf24, #f59e0b);
}
.sys-cap-family.missing .sys-cap-fam-bar-fill {
  background: linear-gradient(90deg, #f87171, #ef4444);
}
.sys-cap-fam-desc {
  padding: 0 12px 6px 36px;
}
.sys-cap-fam-chips {
  padding: 4px 12px 10px 36px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.sys-cap-section {
  margin-top: 10px;
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 7px;
  background: rgba(15, 23, 42, 0.25);
}
.sys-cap-section > summary {
  list-style: none;
  cursor: pointer;
  padding: 8px 12px;
  color: #cbd5e1;
  font-weight: 500;
  font-size: 13px;
  user-select: none;
}
.sys-cap-section > summary::-webkit-details-marker { display: none; }
.sys-cap-section > summary::before {
  content: "▸";
  font-size: 10px;
  color: #64748b;
  margin-right: 8px;
  display: inline-block;
  transition: transform 0.15s;
}
.sys-cap-section[open] > summary::before { transform: rotate(90deg); }
.sys-cap-section > div { padding: 0 12px 12px 12px; }

.sys-cap-knobs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 8px;
}
.sys-cap-knob {
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 6px;
  padding: 8px 10px;
  background: rgba(15, 23, 42, 0.4);
}
.sys-cap-knob.on { border-color: rgba(34, 197, 94, 0.3); background: rgba(34, 197, 94, 0.04); }
.sys-cap-knob.off { border-color: rgba(148, 163, 184, 0.15); opacity: 0.7; }
.sys-cap-knob-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.sys-cap-knob-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #64748b;
  flex: 0 0 8px;
}
.sys-cap-knob.on .sys-cap-knob-dot {
  background: #22c55e;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.6);
}
.sys-cap-knob-label {
  font-weight: 500;
  color: #e2e8f0;
  font-size: 12px;
}
.sys-cap-knob-attr {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px;
  color: #94a3b8;
  background: rgba(15, 23, 42, 0.6);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: auto;
}
.sys-cap-knob-desc { font-size: 11px; line-height: 1.4; }

.sys-cap-subhead {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  margin: 8px 0 6px 0;
}
.sys-cap-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 4px;
}
.sys-cap-suite-chip {
  background: rgba(99, 102, 241, 0.08);
  color: #c7d2fe;
  border: 1px solid rgba(99, 102, 241, 0.25);
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.sys-cap-script-chip {
  background: rgba(45, 212, 191, 0.06);
  color: #99f6e4;
  border: 1px solid rgba(45, 212, 191, 0.2);
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.sys-cap-script-chip.sh {
  background: rgba(251, 191, 36, 0.06);
  color: #fde68a;
  border-color: rgba(251, 191, 36, 0.25);
}

.sys-cap-history {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sys-cap-hist-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 4px 0;
  border-bottom: 1px dashed rgba(148, 163, 184, 0.12);
  font-size: 12px;
}
.sys-cap-hist-row:last-child { border-bottom: none; }
.sys-cap-hist-ver {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  color: #5eead4;
  font-weight: 600;
  flex: 0 0 90px;
}
.sys-cap-hist-title {
  color: #cbd5e1;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
  font-size: 11px;
}

@media (max-width: 720px) {
  .sys-cap-cl-sections { columns: 1; }
  .sys-cap-fam-chips, .sys-cap-fam-desc { padding-left: 12px; }
}

/* Wave 33: ensure [hidden] always hides even when set to display:flex */
[hidden] { display: none !important; }


/* ============================================================
   Wave 34 — Chain click-to-Builder popover
   ============================================================ */
.chain-row { cursor: pointer; transition: background-color 120ms ease; }
.chain-row:hover { background-color: rgba(94, 234, 212, 0.04); }
.chain-row .calls, .chain-row .puts { cursor: pointer; }
.chain-row .calls:hover { background-color: rgba(94, 234, 212, 0.08); }
.chain-row .puts:hover  { background-color: rgba(248, 113, 113, 0.06); }

.chain-add-pop {
  position: fixed;
  z-index: 9999;
  width: 304px;
  background: #11151c;
  border: 1px solid #2a3441;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55), 0 0 0 1px rgba(94,234,212,0.12);
  padding: 12px 12px 10px;
  font-size: 12px;
  color: #e6ebf2;
  animation: capPopIn 120ms ease;
}
@keyframes capPopIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.chain-add-pop .cap-head {
  display: flex; align-items: center; gap: 8px;
  border-bottom: 1px solid #1f2630;
  padding-bottom: 8px; margin-bottom: 10px;
}
.chain-add-pop .cap-strike {
  font-size: 16px; font-weight: 700; color: #5eead4;
  font-variant-numeric: tabular-nums;
}
.chain-add-pop .cap-dte { margin-left: auto; }
.chain-add-pop .cap-close {
  background: transparent; border: 0; color: #98a2b3;
  font-size: 18px; cursor: pointer; padding: 0 4px; line-height: 1;
}
.chain-add-pop .cap-close:hover { color: #e6ebf2; }
.chain-add-pop .cap-row {
  display: flex; gap: 8px; align-items: center; margin-bottom: 10px;
}
.chain-add-pop .cap-group {
  display: inline-flex; flex: 1;
  background: #0c1117; border: 1px solid #2a3441; border-radius: 8px;
  padding: 2px; gap: 2px;
}
.chain-add-pop .cap-group button {
  flex: 1; background: transparent; border: 0; color: #98a2b3;
  padding: 6px 8px; font-size: 12px; font-weight: 600;
  border-radius: 6px; cursor: pointer; transition: all 120ms;
}
.chain-add-pop .cap-group button:hover { color: #e6ebf2; background: #1f2630; }
.chain-add-pop .cap-group button.on {
  background: #1d2935; color: #5eead4; box-shadow: 0 0 0 1px rgba(94,234,212,0.25) inset;
}
.chain-add-pop .cap-meta {
  background: #0c1117; border: 1px solid #1f2630; border-radius: 8px;
  padding: 8px; gap: 12px;
}
.chain-add-pop .cap-qty {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; color: #98a2b3;
}
.chain-add-pop .cap-qty input {
  width: 56px; padding: 4px 6px; font-family: inherit;
  background: #11151c; border: 1px solid #2a3441; border-radius: 6px;
  color: #e6ebf2; font-variant-numeric: tabular-nums;
}
.chain-add-pop .cap-mid b, .chain-add-pop .cap-iv b { color: #e6ebf2; }
.chain-add-pop .cap-actions { display: flex; gap: 6px; }
.chain-add-pop .cap-actions button { flex: 1; padding: 8px 10px; font-size: 12px; }
.chain-add-pop .cap-actions button:disabled { opacity: 0.45; cursor: not-allowed; }

/* ============================================================
   Wave 34 — System Diagnostics group
   ============================================================ */
#tab-system[data-sys-active-group="diagnostics"] [data-sys-group="diagnostics"]:not(.sys-grouptab) { display: block; }

.sys-diag-card { display: flex; flex-direction: column; gap: 14px; }
.sys-diag-header { display: flex; align-items: flex-start; justify-content: space-between; }
.sys-diag-header h3 { margin: 0 0 2px 0; }
.sys-diag-controls { display: inline-flex; gap: 6px; }

.sys-diag-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}
.sys-diag-panel {
  background: #0c1117;
  border: 1px solid #1f2630;
  border-radius: 10px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
  min-height: 200px;
}
.sys-diag-panel h4 {
  margin: 0; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; color: #5eead4;
}
.sys-diag-panel > p { margin: 0 0 4px 0; line-height: 1.45; }

.sys-diag-check, .sys-diag-test, .sys-diag-script {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px;
  background: #11151c; border: 1px solid #1f2630; border-radius: 8px;
  cursor: pointer; transition: all 120ms;
  font-size: 12px;
}
.sys-diag-check:hover, .sys-diag-test:hover, .sys-diag-script:hover {
  border-color: rgba(94,234,212,0.35);
  background: #131922;
}
.sys-diag-check .sdc-l, .sys-diag-test .sdt-l, .sys-diag-script .sds-l {
  flex: 1; min-width: 0;
}
.sys-diag-check .sdc-name, .sys-diag-test .sdt-name, .sys-diag-script .sds-name {
  font-weight: 600; color: #e6ebf2;
}
.sys-diag-check .sdc-desc, .sys-diag-test .sdt-desc, .sys-diag-script .sds-desc {
  display: block; font-size: 11px; color: #98a2b3; margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sys-diag-check .sdc-status, .sys-diag-test .sdt-status {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: #1f2630; color: #98a2b3;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.sys-diag-check.is-running .sdc-status,
.sys-diag-test.is-running .sdt-status {
  background: #1d2935; color: #5eead4;
}
.sys-diag-check.is-ok .sdc-status,
.sys-diag-test.is-ok .sdt-status {
  background: rgba(34,197,94,0.15); color: #4ade80;
}
.sys-diag-check.is-fail .sdc-status,
.sys-diag-test.is-fail .sdt-status {
  background: rgba(248,113,113,0.15); color: #f87171;
}
.sys-diag-test .sdt-count {
  font-size: 11px; padding: 2px 8px; border-radius: 999px;
  background: rgba(94,234,212,0.10); color: #5eead4;
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.sys-diag-script .sds-kind {
  font-size: 10px; padding: 2px 6px; border-radius: 4px;
  background: #1f2630; color: #5eead4; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
}

.sys-diag-output {
  background: #0c1117; border: 1px solid #1f2630; border-radius: 10px;
  padding: 0; overflow: hidden;
}
.sys-diag-output-head {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: #131922; border-bottom: 1px solid #1f2630;
}
.sys-diag-output-title { font-weight: 600; font-size: 12px; color: #e6ebf2; }
.sys-diag-output-meta { margin-left: auto; }
.sys-diag-output-body {
  margin: 0; padding: 12px;
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 11.5px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word;
  color: #d6deea;
  max-height: 320px; overflow: auto;
}

/* ============================================================================
   Wave 35 — WebSocket status pill + Backtest Trades drawer
   ============================================================================ */

/* WS pill in header */
.ws-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  background: #11151c;
  border: 1px solid #2a3441;
  border-radius: 999px;
  font-size: 11px;
  color: #9ca3af;
  font-weight: 500;
  letter-spacing: 0.02em;
  user-select: none;
  cursor: default;
}
.ws-pill .ws-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #6b7280;
}
.ws-pill[data-state="connected"] {
  border-color: #1f5f4f;
  color: #5eead4;
  background: rgba(94, 234, 212, 0.06);
}
.ws-pill[data-state="connected"] .ws-dot {
  background: #5eead4;
  box-shadow: 0 0 6px rgba(94, 234, 212, 0.55);
  animation: wsPulse 2s ease-in-out infinite;
}
.ws-pill[data-state="reconnecting"] {
  border-color: #5a4a1f;
  color: #fbbf24;
}
.ws-pill[data-state="reconnecting"] .ws-dot {
  background: #fbbf24;
  animation: wsPulse 1s ease-in-out infinite;
}
.ws-pill[data-state="fallback"] {
  border-color: #4a4a4a;
  color: #9ca3af;
}
.ws-pill[data-state="fallback"] .ws-dot {
  background: #9ca3af;
}
@keyframes wsPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.88); }
}

/* Trades drawer */
.bt-trades-drawer {
  margin-top: 14px;
  padding: 14px 16px;
  background: linear-gradient(180deg, #11151c 0%, #0d1117 100%);
  border: 1px solid #2a3441;
  border-radius: 12px;
}
.bt-trades-drawer .bt-mini-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.bt-trades-actions {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.bt-trades-actions select.btn-ghost {
  padding: 4px 8px;
  font-size: 11px;
}

/* Summary pills */
.bt-trades-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 0 12px;
  border-bottom: 1px dashed #1f2630;
  margin-bottom: 10px;
}
.tr-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  background: #161b22;
  border: 1px solid #232b35;
  border-radius: 8px;
  font-size: 12px;
}
.tr-pill-lbl {
  color: #9ca3af;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.tr-pill-val {
  color: #e6ebf2;
  font-weight: 600;
  font-size: 13px;
}
.tr-pill-val.up { color: #16c79a; }
.tr-pill-val.down { color: #f87171; }

/* Histogram */
.bt-trades-hist {
  margin: 8px 0 12px;
  padding: 10px 12px;
  background: #0e1218;
  border: 1px solid #1f2630;
  border-radius: 8px;
}
.bt-trades-hist .bt-mini-head {
  margin-bottom: 4px;
}
.bt-trades-hist-svg {
  width: 100%;
  height: 140px;
  display: block;
}

/* Table */
.bt-trades-tablewrap {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid #1f2630;
  border-radius: 8px;
}
.bt-trades-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.bt-trades-table thead {
  position: sticky;
  top: 0;
  background: #161b22;
  z-index: 2;
}
.bt-trades-table th {
  padding: 8px 10px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #2a3441;
}
.bt-trades-table td {
  padding: 6px 10px;
  border-bottom: 1px solid #161b22;
}
.bt-trades-table tr.tr-row:hover td {
  background: rgba(94, 234, 212, 0.04);
}
.tr-cell-i {
  color: #6b7280;
  width: 30px;
}
.tr-tag-open {
  display: inline-block;
  padding: 1px 6px;
  font-size: 9px;
  border-radius: 3px;
  background: rgba(251, 191, 36, 0.18);
  color: #fbbf24;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-left: 4px;
}


/* Wave 35 — Alerts triggered-event action buttons */
.event-item-w35 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  column-gap: 14px;
  row-gap: 6px;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid #1f2630;
  border-radius: 8px;
  background: #0e1218;
  margin-bottom: 6px;
}
.event-item-w35 .event-msg {
  color: #d1d5db;
  font-size: 13px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.event-item-w35 time {
  color: #9ca3af;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.event-actions {
  display: inline-flex;
  gap: 6px;
  flex-wrap: nowrap;
  flex-shrink: 0;
  justify-self: end;
}
.event-actions .btn-mini {
  padding: 4px 9px;
  font-size: 11px;
  background: #161b22;
  border: 1px solid #2a3441;
  border-radius: 5px;
  color: #d1d5db;
  cursor: pointer;
  font-weight: 500;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.4;
  width: auto !important;
  height: auto !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.event-actions .btn-mini:hover {
  background: rgba(94, 234, 212, 0.08);
  border-color: #5eead4;
  color: #5eead4;
  transform: none !important;
}
.event-actions .ev-copy {
  padding: 4px 8px;
  font-size: 13px;
  font-weight: 400;
  min-width: 28px;
  text-align: center;
}
@media (max-width: 1100px) {
  .event-item-w35 {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .event-actions {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 2px;
  }
}

/* ================================================================ */
/* Wave 36 — Protective KPIs, grouped/flat tables, inline preview,  */
/*           Overview risk strip, activity feed, obs sidebar badges */
/* ================================================================ */

/* ---- Protective KPI strip ---- */
.prot-kpi-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
  margin-bottom: 6px;
}
.prot-kpi {
  background: var(--card-bg, #11171f);
  border: 1px solid var(--border, #2a3340);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.prot-kpi-k {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--muted, #8a96a8);
  text-transform: uppercase;
}
.prot-kpi-v {
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text, #e6edf6);
}
.prot-kpi-stops.active { border-color: #c7841a; background: rgba(199, 132, 26, 0.10); }
.prot-kpi-stops.active .prot-kpi-v { color: #f0a93e; }
.prot-kpi-tps.active   { border-color: #c7841a; background: rgba(199, 132, 26, 0.10); }
.prot-kpi-tps.active .prot-kpi-v   { color: #f0a93e; }
.prot-kpi-trig.active  { border-color: #c2353d; background: rgba(194, 53, 61, 0.12); }
.prot-kpi-trig.active .prot-kpi-v  { color: #ff6b73; }
.prot-kpi-unc.active   { border-color: #c2353d; background: rgba(194, 53, 61, 0.12); }
.prot-kpi-unc.active .prot-kpi-v   { color: #ff6b73; }

@media (max-width: 1100px){
  .prot-kpi-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- View toggle (grouped/flat) ---- */
.prot-view-toggle {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--border, #2a3340);
  border-radius: 6px;
  overflow: hidden;
  margin-left: 6px;
}
.prot-vt-btn {
  background: transparent;
  color: var(--muted, #8a96a8);
  border: none;
  padding: 5px 10px;
  font-size: 12px;
  cursor: pointer;
  transition: background 120ms, color 120ms;
}
.prot-vt-btn + .prot-vt-btn { border-left: 1px solid var(--border, #2a3340); }
.prot-vt-btn:hover { color: var(--text, #e6edf6); background: rgba(255,255,255,0.04); }
.prot-vt-btn.active {
  background: var(--accent, #2f80ed);
  color: #fff;
}

/* ---- Status pills (used in both grouped and flat) ---- */
.prot-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.prot-status-safe       { background: rgba(46, 160, 120, 0.18); color: #59c89a; border: 1px solid rgba(46, 160, 120, 0.35); }
.prot-status-near       { background: rgba(199, 132, 26, 0.18); color: #f0a93e; border: 1px solid rgba(199, 132, 26, 0.40); }
.prot-status-triggered  { background: rgba(194, 53, 61, 0.20); color: #ff6b73; border: 1px solid rgba(194, 53, 61, 0.45); }
.prot-status-no_mark    { background: rgba(138, 150, 168, 0.14); color: #b1bccd; border: 1px solid rgba(138, 150, 168, 0.30); }

/* ---- Sort header indicators ---- */
.prot-flat-table thead th[data-prot-sort] {
  cursor: pointer;
  user-select: none;
  position: relative;
}
.prot-flat-table thead th[data-prot-sort]:hover { color: var(--text, #e6edf6); }
.prot-flat-table thead th.sort-asc::after  { content: ' ▲'; font-size: 9px; opacity: 0.8; }
.prot-flat-table thead th.sort-desc::after { content: ' ▼'; font-size: 9px; opacity: 0.8; }

/* ---- Grouped table cosmetics ---- */
.prot-grouped-table td, .prot-flat-table td { vertical-align: middle; }

/* ---- Inline panic preview pane ---- */
.bot-prot-preview-pane {
  margin: 10px 0;
  border: 1px solid var(--border, #2a3340);
  border-radius: 8px;
  background: var(--card-bg, #0e1218);
  overflow: hidden;
}
.bot-prot-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(47, 128, 237, 0.08);
  border-bottom: 1px solid var(--border, #2a3340);
}
.bot-prot-preview-title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent, #2f80ed);
}
.bot-prot-preview-body { padding: 10px 12px; }
.prot-prev-stats {
  font-size: 13px;
  margin-bottom: 8px;
  color: var(--text, #e6edf6);
}

/* ---- Overview: Risk-at-a-glance strip ---- */
.ov-risk-strip-card {
  background: var(--card-bg, #11171f);
  border: 1px solid var(--border, #2a3340);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 10px 0;
}
.ov-risk-head {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #8a96a8);
  margin-bottom: 8px;
}
.ov-risk-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 1280px){ .ov-risk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px) { .ov-risk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ov-rs-tile {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border, #2a3340);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  position: relative;
}
.ov-rs-k {
  font-size: 9.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted, #8a96a8);
}
.ov-rs-v {
  font-size: 17px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text, #e6edf6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ov-rs-v.val-pos { color: #59c89a; }
.ov-rs-v.val-neg { color: #ff6b73; }

.ov-rs-bar {
  display: block;
  height: 4px;
  background: rgba(138, 150, 168, 0.15);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 4px;
}
.ov-rs-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--accent, #2f80ed);
  transition: width 250ms ease-out, background 200ms;
  border-radius: 2px;
}
.ov-rs-bar-fill.lvl-low  { background: #59c89a; }
.ov-rs-bar-fill.lvl-mid  { background: #f0a93e; }
.ov-rs-bar-fill.lvl-high { background: #ff6b73; }

.ov-rs-unc.active {
  border-color: #c2353d;
  background: rgba(194, 53, 61, 0.10);
}
.ov-rs-unc.active .ov-rs-v { color: #ff6b73; }

.ov-rs-jump {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 11px;
  padding: 1px 6px;
}

/* ---- Overview 3-col grid (bot status + bridge + activity) ---- */
.ov-bot-grid.ov-bot-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 1280px){ .ov-bot-grid.ov-bot-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .ov-bot-grid.ov-bot-grid-3 { grid-template-columns: 1fr; } }

/* ---- Activity feed ---- */
.ov-activity-card { display: flex; flex-direction: column; min-height: 0; }
.ov-activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 260px;
  overflow-y: auto;
}
.ov-act-item {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
  border: 1px solid transparent;
  font-size: 12.5px;
  min-width: 0;
}
.ov-act-item:hover { background: rgba(255,255,255,0.04); }
.ov-act-icon { font-size: 12px; line-height: 1; text-align: center; }
.ov-act-main {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ov-act-fill .ov-act-icon  { color: #59c89a; }
.ov-act-warn               { border-color: rgba(199, 132, 26, 0.35); background: rgba(199, 132, 26, 0.06); }
.ov-act-warn .ov-act-icon  { color: #f0a93e; }
.ov-act-error              { border-color: rgba(194, 53, 61, 0.40); background: rgba(194, 53, 61, 0.08); }
.ov-act-error .ov-act-icon { color: #ff6b73; }
.ov-act-side.side-buy  { color: #59c89a; font-weight: 600; font-size: 11px; }
.ov-act-side.side-sell { color: #ff6b73; font-weight: 600; font-size: 11px; }
.ov-act-sym { font-weight: 600; }
.ov-act-time { font-size: 11px; white-space: nowrap; }

/* ---- Observability sidebar badge ---- */
.obs-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 16px;
  padding: 0 5px;
  border-radius: 8px;
  background: #c2353d;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  margin-left: auto;
  line-height: 1;
}
.bot-obs-tab.obs-tab-row { display: flex; align-items: center; gap: 6px; }
.bot-obs-tab .obs-tab-label { flex: 1; }

/* =========================================================================
   Wave 37 — Strategy Builder + System interactivity
   ========================================================================= */

/* --- Strategy Finder active-symbol chip --- */
.sf-active-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(96, 165, 250, 0.10);
  border: 1px solid rgba(96, 165, 250, 0.35);
  font-size: 12px; color: var(--text-1, #e6e9ef);
  margin-left: 8px;
}
.sf-active-chip .sfa-k { color: var(--text-2, #97a0ad); font-size: 11px; text-transform: uppercase; letter-spacing: 0.4px; }
.sf-active-chip .sfa-sym { font-weight: 700; color: #cfe2ff; }
.sf-active-chip .sfa-price { color: #9ecbff; font-variant-numeric: tabular-nums; }
.sf-active-chip .sfa-use {
  margin-left: 4px; padding: 2px 8px; border-radius: 6px;
  background: rgba(96,165,250,0.22); border: 1px solid rgba(96,165,250,0.45);
  color: #dbeafe; font-size: 11px; cursor: pointer;
}
.sf-active-chip .sfa-use:hover { background: rgba(96,165,250,0.35); }

/* --- Preset search --- */
.preset-search {
  margin-left: 10px;
  padding: 4px 10px; border-radius: 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text-1, #e6e9ef);
  font-size: 12px;
  min-width: 160px;
}
.preset-search:focus { outline: none; border-color: rgba(96,165,250,0.55); background: rgba(96,165,250,0.06); }
.preset-pill.hidden-by-search { display: none !important; }

/* --- Builder quickbar --- */
.builder-quickbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 8px 0 10px 0;
  padding: 8px 10px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
}
.builder-quickbar .bq-label {
  font-size: 11px; color: var(--text-2, #97a0ad);
  text-transform: uppercase; letter-spacing: 0.5px;
}
.builder-quickbar .bq-sep { width: 1px; height: 16px; background: rgba(255,255,255,0.10); margin: 0 2px; }
.builder-quickbar .btn-mini {
  /* Override the global .btn-mini 24x24 square — these are text buttons. */
  width: auto !important;
  height: auto !important;
  padding: 4px 9px; border-radius: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-1, #e6e9ef);
  font-size: 12px; cursor: pointer;
  white-space: nowrap;
  line-height: 1.2;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s, border-color 0.12s;
}
.builder-quickbar .bq-label { white-space: nowrap; }
.builder-quickbar .bq-live span { white-space: nowrap; }
.builder-quickbar .btn-mini:hover { background: rgba(96,165,250,0.14); border-color: rgba(96,165,250,0.40); transform: none !important; }
.builder-quickbar .btn-mini:active { transform: translateY(1px); }
.builder-quickbar .bq-live {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-2, #97a0ad);
  margin-left: auto;
}
.builder-quickbar .bq-live input[type="checkbox"] { accent-color: #60a5fa; }
.builder-quickbar .bq-status {
  font-size: 11px; color: #59c89a; min-width: 80px; text-align: right;
  opacity: 0; transition: opacity 0.22s;
}
.builder-quickbar .bq-status.flash {
  animation: bqStatusFlash 1.1s ease-out;
}
@keyframes bqStatusFlash {
  0%   { opacity: 0; transform: translateY(-2px); }
  18%  { opacity: 1; transform: translateY(0); }
  78%  { opacity: 1; }
  100% { opacity: 0; }
}

/* --- Builder chart head --- */
.builder-chart-head {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px;
  margin: 4px 0 6px 0;
}
.builder-chart-head h3 { margin: 0; font-size: 14px; }
.chart-controls {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.cc-toggle {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; color: var(--text-2, #97a0ad);
  cursor: pointer; user-select: none;
}
.cc-toggle input[type="checkbox"] { accent-color: #60a5fa; }
.cc-toggle:hover { color: var(--text-1, #e6e9ef); }

/* --- Compare strip --- */
.compare-strip {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 6px 0;
  padding: 6px 10px;
  background: rgba(167,139,250,0.06);
  border: 1px solid rgba(167,139,250,0.22);
  border-radius: 8px;
}
.compare-strip[hidden] { display: none !important; }
.compare-strip .cs-label {
  font-size: 11px; color: #c4b5fd;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.cs-list { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex: 1; }
.cs-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 11px; color: var(--text-1, #e6e9ef);
}
.cs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cc, #a78bfa); }
.cs-name { max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-x {
  margin-left: 2px; padding: 0 4px; cursor: pointer;
  color: var(--text-2, #97a0ad); font-size: 14px; line-height: 1;
  background: transparent; border: none;
}
.cs-x:hover { color: #ff6b73; }
#cs-clear {
  padding: 3px 8px; border-radius: 6px;
  background: rgba(255,107,115,0.10); border: 1px solid rgba(255,107,115,0.30);
  color: #ffc4c8; font-size: 11px; cursor: pointer;
}
#cs-clear:hover { background: rgba(255,107,115,0.20); }

/* --- Payoff hover row --- */
.payoff-hover {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 4px 0 6px 0;
  padding: 4px 8px;
  font-size: 11px;
  border-radius: 6px;
  background: rgba(255,255,255,0.02);
}
.payoff-hover .ph-k {
  color: var(--text-2, #97a0ad);
  text-transform: uppercase; letter-spacing: 0.45px;
  margin-right: 4px;
}
.payoff-hover .ph-px,
.payoff-hover .ph-pnl,
.payoff-hover .ph-pct {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.payoff-hover .ph-pnl.pos,
.payoff-hover .ph-pct.pos { color: #59c89a; }
.payoff-hover .ph-pnl.neg,
.payoff-hover .ph-pct.neg { color: #ff6b73; }

/* --- Strategy Finder Compare button --- */
.sf-compare {
  margin-left: 6px;
  padding: 3px 8px; border-radius: 6px;
  background: rgba(167,139,250,0.15);
  border: 1px solid rgba(167,139,250,0.40);
  color: #ddd6fe; font-size: 11px; cursor: pointer;
}
.sf-compare:hover { background: rgba(167,139,250,0.28); }
.sf-compare:disabled { opacity: 0.45; cursor: not-allowed; }

/* --- System hero tile sparklines + hover/focus --- */
.sys-hero-heartbeat,
.sys-hero-cycle {
  position: relative;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.sys-hero-heartbeat:hover,
.sys-hero-cycle:hover,
.sys-hero-heartbeat:focus-visible,
.sys-hero-cycle:focus-visible {
  border-color: rgba(96,165,250,0.55);
  box-shadow: 0 0 0 2px rgba(96,165,250,0.18);
  outline: none;
}
.sys-hero-spark {
  position: absolute;
  left: 10px; right: 10px; bottom: 6px;
  width: calc(100% - 20px); height: 22px;
  pointer-events: none;
  opacity: 0.82;
}
.sys-hero-spark .shs-line {
  fill: none;
  stroke: #60a5fa;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.sys-hero-cycle .sys-hero-spark .shs-line { stroke: #a78bfa; }

/* --- Hero popover --- */
.sys-hero-popover {
  position: absolute;
  top: 100%;
  margin-top: 8px;
  z-index: 40;
  min-width: 320px; max-width: 440px;
  padding: 12px 14px;
  background: #161a22;
  border: 1px solid rgba(96,165,250,0.40);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.55);
  color: var(--text-1, #e6e9ef);
}
.sys-hero-popover[hidden] { display: none !important; }
.shp-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.shp-title { font-size: 13px; font-weight: 700; color: #cfe2ff; }
.shp-close {
  background: transparent; border: none; cursor: pointer;
  color: var(--text-2, #97a0ad); font-size: 18px; line-height: 1;
  padding: 0 4px;
}
.shp-close:hover { color: #ff6b73; }
.shp-body { font-size: 12px; }
.shp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  margin-bottom: 8px;
}
.shp-tile {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 6px;
}
.shp-k { font-size: 10px; color: var(--text-2, #97a0ad); text-transform: uppercase; letter-spacing: 0.4px; }
.shp-v { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.shp-v.pos { color: #59c89a; }
.shp-v.neg { color: #ff6b73; }
.shp-v.warn { color: #f0a93e; }
.shp-note {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 11px; color: var(--text-2, #97a0ad);
  line-height: 1.45;
}

/* --- Diagnostics summary pills + run-all --- */
.diag-summary-pills {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 10px;
}
.diag-summary-pills[hidden] { display: none !important; }
.diag-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-variant-numeric: tabular-nums;
  border: 1px solid transparent;
}
.diag-pill.ok   { background: rgba(89,200,154,0.13); border-color: rgba(89,200,154,0.35); color: #a7e9c8; }
.diag-pill.warn { background: rgba(240,169,62,0.13); border-color: rgba(240,169,62,0.35); color: #ffd9a3; }
.diag-pill.err  { background: rgba(255,107,115,0.13); border-color: rgba(255,107,115,0.35); color: #ffc4c8; }
.diag-pill .dp-k { opacity: 0.85; }
.diag-pill .dp-v { font-weight: 700; }
.diag-pill.dur { background: rgba(96,165,250,0.10); border-color: rgba(96,165,250,0.30); color: #cfe2ff; }

#sys-diag-run-all,
#sys-diag-copy {
  margin-left: 6px;
  padding: 4px 10px; border-radius: 6px;
  font-size: 12px; cursor: pointer;
}
#sys-diag-run-all {
  background: rgba(96,165,250,0.18);
  border: 1px solid rgba(96,165,250,0.40);
  color: #dbeafe;
}
#sys-diag-run-all:hover { background: rgba(96,165,250,0.30); }
#sys-diag-run-all:disabled { opacity: 0.5; cursor: progress; }
#sys-diag-copy {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--text-1, #e6e9ef);
}
#sys-diag-copy:hover { background: rgba(255,255,255,0.10); }

/* --- Diagnostics check row inline badges --- */
.diag-inline-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px; border-radius: 999px;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.4px;
  margin-left: 8px;
  border: 1px solid transparent;
  font-variant-numeric: tabular-nums;
}
.diag-inline-badge.ok   { background: rgba(89,200,154,0.15); border-color: rgba(89,200,154,0.40); color: #a7e9c8; }
.diag-inline-badge.warn { background: rgba(240,169,62,0.15); border-color: rgba(240,169,62,0.40); color: #ffd9a3; }
.diag-inline-badge.err  { background: rgba(255,107,115,0.15); border-color: rgba(255,107,115,0.40); color: #ffc4c8; }
.diag-inline-badge .dib-dur { opacity: 0.75; font-weight: 500; margin-left: 2px; }

.sys-diag-check-row.diag-pass,
.sys-diag-check.diag-pass {
  background: linear-gradient(90deg, rgba(89,200,154,0.06), transparent 75%);
}
.sys-diag-check-row.diag-warn,
.sys-diag-check.diag-warn {
  background: linear-gradient(90deg, rgba(240,169,62,0.08), transparent 75%);
}
.sys-diag-check-row.diag-fail,
.sys-diag-check.diag-fail {
  background: linear-gradient(90deg, rgba(255,107,115,0.09), transparent 75%);
}
.sys-diag-check { position: relative; }
.sys-diag-check .diag-inline-badge { position: absolute; right: 56px; top: 50%; transform: translateY(-50%); }

/* --- Runtime knob slider pair --- */
.knob-pair {
  display: flex; align-items: center; gap: 8px;
  flex: 1;
}
.knob-slider {
  flex: 1;
  min-width: 80px;
  height: 16px;
  accent-color: #60a5fa;
}
.knob-pair input[type="number"] {
  width: 78px;
  padding: 3px 6px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 5px;
  color: var(--text-1, #e6e9ef);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.knob-pair input[type="number"]:focus {
  outline: none; border-color: rgba(96,165,250,0.55);
  background: rgba(96,165,250,0.06);
}
.knob-pair.knob-dirty input[type="number"] {
  border-color: rgba(240,169,62,0.55);
  background: rgba(240,169,62,0.06);
}
.knob-pair.knob-saved input[type="number"] {
  border-color: rgba(89,200,154,0.55);
  background: rgba(89,200,154,0.06);
  transition: border-color 0.4s, background 0.4s;
}

/* end Wave 37 ============================================================ */

/* ========================================================================
   Wave 38 — Strategy Finder filterbar/summary/mini-payoff + System Control Center
   ======================================================================== */

/* --- Strategy Finder filterbar ----------------------------------------- */
.sf-filterbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
  margin: 8px 0 10px;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  background: rgba(255,255,255,0.018);
}
.sf-fb-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.sf-fb-k {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7d8a9e;
  font-weight: 600;
  padding-right: 4px;
}
.sf-fb-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  font-size: 11.5px;
  font-weight: 500;
  color: #c4cdd9;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  user-select: none;
}
.sf-fb-chip:hover {
  background: rgba(255,255,255,0.07);
  color: #e8ecf2;
}
.sf-fb-chip.active {
  background: rgba(76,144,255,0.18);
  border-color: rgba(76,144,255,0.55);
  color: #cfe0ff;
}
.sf-fb-sort {
  height: 26px;
  padding: 0 8px;
  font-size: 11.5px;
  color: #d3dae5;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  cursor: pointer;
}
.sf-fb-count {
  margin-left: auto;
  font-size: 11px;
  color: #8893a4;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
}
.sf-fb-reset {
  height: 24px;
  padding: 0 10px;
  font-size: 11px;
  font-weight: 600;
  color: #c4cdd9;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.sf-fb-reset:hover {
  background: rgba(255,80,90,0.10);
  border-color: rgba(255,80,90,0.45);
  color: #ffb7bd;
}

/* --- Strategy Finder summary tiles ------------------------------------- */
.sf-summary {
  display: flex;
  gap: 10px;
  margin: 0 0 12px;
  flex-wrap: wrap;
}
.sf-sum-tile {
  flex: 1 1 180px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.025), rgba(255,255,255,0.005));
  min-width: 0;
}
.sf-sum-k {
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #7d8a9e;
  font-weight: 600;
}
.sf-sum-v {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  font-weight: 600;
  color: #e6ecf4;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sf-sum-sub {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  color: #8893a4;
  font-variant-numeric: tabular-nums;
}

/* --- Strategy Finder card decoration ---------------------------------- */
.sf-card { position: relative; }
.sf-card.sf-hidden { display: none !important; }

.sf-rank-ribbon {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  min-width: 22px;
  padding: 0 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 4px;
  color: #1a1f29;
  background: rgba(255,255,255,0.5);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.25);
  z-index: 2;
}
.sf-rank-ribbon.r1 { background: linear-gradient(135deg,#f3cd5b,#d6a429); color: #2a1f00; }
.sf-rank-ribbon.r2 { background: linear-gradient(135deg,#d8dde4,#9ea7b2); color: #1d2128; }
.sf-rank-ribbon.r3 { background: linear-gradient(135deg,#d49566,#a06432); color: #21130a; }

.sf-card-mini {
  display: block;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed rgba(255,255,255,0.05);
}
.sf-mini-payoff {
  display: block;
  width: 100%;
  height: 32px;
  overflow: visible;
}
.sf-mini-payoff .smp-line {
  fill: none;
  stroke: #5ec6b0;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.sf-mini-payoff .smp-zero {
  stroke: rgba(255,255,255,0.16);
  stroke-width: 0.7;
  stroke-dasharray: 2 2;
}
.sf-mini-payoff .smp-spot {
  stroke: rgba(76,144,255,0.75);
  stroke-width: 0.9;
}
.sf-mini-payoff .smp-fill-pos { fill: rgba(94,198,176,0.10); }
.sf-mini-payoff .smp-fill-neg { fill: rgba(232,93,103,0.10); }

.sf-w38-compare {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  margin-left: 6px;
  font-size: 10.5px;
  font-weight: 600;
  color: #d7c8ff;
  background: rgba(140,107,224,0.16);
  border: 1px solid rgba(140,107,224,0.45);
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.sf-w38-compare:hover {
  background: rgba(140,107,224,0.28);
  color: #ece2ff;
}
.sf-w38-compare.added {
  background: rgba(89,200,154,0.18);
  border-color: rgba(89,200,154,0.55);
  color: #c1ecd5;
}

/* --- System Control Center -------------------------------------------- */
.sys-control-center {
  margin-bottom: 14px;
}
.scc-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -2px 0 12px;
  font-size: 11px;
  color: #8893a4;
  font-variant-numeric: tabular-nums;
}
.scc-meta-spacer { flex: 1; }
.scc-meta button {
  height: 22px;
  padding: 0 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #c4cdd9;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 5px;
  cursor: pointer;
}
.scc-meta button:hover { background: rgba(255,255,255,0.08); color: #e6ecf4; }

.scc-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 1280px) {
  .scc-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .scc-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .scc-grid { grid-template-columns: 1fr; }
}

.scc-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 12px 12px 10px;
  min-height: 132px;
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0.004));
  transition: border-color 0.18s, background 0.18s;
}
.scc-tile-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.scc-tile-k {
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #7d8a9e;
  font-weight: 600;
}
.scc-tile-state {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #d8dee8;
}
.scc-tile-sub {
  margin-top: 6px;
  font-size: 11px;
  color: #8893a4;
  font-variant-numeric: tabular-nums;
  min-height: 14px;
}
.scc-tile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  padding-top: 10px;
}
.scc-btn {
  flex: 1 1 auto;
  height: 24px;
  padding: 0 8px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #c4cdd9;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.scc-btn:hover:not(:disabled) {
  background: rgba(255,255,255,0.08);
  color: #e8ecf2;
}
.scc-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}
.scc-btn-go {
  background: rgba(89,200,154,0.14);
  border-color: rgba(89,200,154,0.45);
  color: #c1ecd5;
}
.scc-btn-go:hover:not(:disabled) {
  background: rgba(89,200,154,0.24);
  color: #d6f4e3;
}
.scc-btn-danger {
  background: rgba(232,93,103,0.14);
  border-color: rgba(232,93,103,0.45);
  color: #fbc4c9;
}
.scc-btn-danger:hover:not(:disabled) {
  background: rgba(232,93,103,0.26);
  color: #ffd7db;
}

/* State variants ------------------------------------------------------- */
.scc-tile.is-on .scc-tile-state { color: #6ecfb1; }
.scc-tile.is-off .scc-tile-state { color: #e85d67; }
.scc-tile.is-on { border-color: rgba(89,200,154,0.30); }
.scc-tile.is-off { border-color: rgba(232,93,103,0.22); }

.scc-tile.is-live { border-color: rgba(232,93,103,0.55); background: linear-gradient(180deg, rgba(232,93,103,0.05), rgba(255,255,255,0.005)); }
.scc-tile.is-paper { border-color: rgba(89,200,154,0.30); }
.scc-tile.is-live .scc-tile-state { color: #ff8a93; }
.scc-tile.is-paper .scc-tile-state { color: #6ecfb1; }

.scc-tile.is-dirty { border-color: rgba(240,169,62,0.55); background: linear-gradient(180deg, rgba(240,169,62,0.07), rgba(255,255,255,0.005)); }
.scc-tile.is-dirty .scc-tile-state { color: #f5b85a; }
.scc-tile.is-clean .scc-tile-state { color: #8893a4; }

/* Mode toggle ---------------------------------------------------------- */
.scc-mode-toggle {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.scc-mode-btn {
  flex: 1;
  height: 26px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #8893a4;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 5px;
  cursor: pointer;
  text-transform: uppercase;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.scc-mode-btn:hover { background: rgba(255,255,255,0.07); color: #c4cdd9; }
.scc-mode-btn.active[data-mode="paper"] {
  background: rgba(89,200,154,0.18);
  border-color: rgba(89,200,154,0.55);
  color: #c1ecd5;
}
.scc-mode-btn.active[data-mode="live"] {
  background: rgba(232,93,103,0.22);
  border-color: rgba(232,93,103,0.65);
  color: #ffc4c9;
}

/* Cooldown bar --------------------------------------------------------- */
.scc-cooldown {
  margin-top: 8px;
  font-size: 10.5px;
  color: #8893a4;
}
.scc-cd-label {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font-variant-numeric: tabular-nums;
}
.scc-cd-bar {
  position: relative;
  height: 4px;
  background: rgba(255,255,255,0.06);
  border-radius: 2px;
  overflow: hidden;
}
.scc-cd-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, #4c90ff, #5ec6b0);
  transition: width 0.6s linear;
}

/* Live warning banner -------------------------------------------------- */
.scc-live-warn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-top: 10px;
  background: rgba(240,169,62,0.10);
  border: 1px solid rgba(240,169,62,0.45);
  border-radius: 8px;
  color: #f5d49a;
  font-size: 11.5px;
}
.scc-live-warn[hidden] { display: none; }
.scc-warn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(240,169,62,0.25);
  color: #ffd98a;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
}
.scc-warn-text { flex: 1; line-height: 1.4; }
.scc-warn-text b { color: #ffe1a8; }
.scc-warn-close {
  height: 22px;
  width: 22px;
  padding: 0;
  font-size: 14px;
  color: #d4a44c;
  background: transparent;
  border: 1px solid rgba(240,169,62,0.35);
  border-radius: 4px;
  cursor: pointer;
}
.scc-warn-close:hover { background: rgba(240,169,62,0.15); color: #ffd98a; }

/* Recent events log ---------------------------------------------------- */
.scc-recent {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.scc-recent-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: #7d8a9e;
  font-weight: 600;
}
.scc-recent-clear {
  height: 20px;
  padding: 0 8px;
  font-size: 10px;
  color: #8893a4;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 4px;
  cursor: pointer;
}
.scc-recent-clear:hover { background: rgba(255,255,255,0.05); color: #c4cdd9; }
.scc-recent-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  max-height: 180px;
  overflow-y: auto;
}
.scc-recent-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  font-size: 11px;
  color: #c4cdd9;
  border-radius: 4px;
  background: rgba(255,255,255,0.018);
}
.scc-recent-item::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4c90ff;
  flex-shrink: 0;
}
.scc-recent-item.kind-action::before { background: #4c90ff; }
.scc-recent-item.kind-warn::before { background: #f0a93e; }
.scc-recent-item.kind-mode::before { background: #8c6be0; }
.scc-recent-item.kind-error::before { background: #e85d67; }
.scc-recent-t {
  margin-left: auto;
  font-size: 10px;
  color: #6c7689;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.scc-recent-empty {
  padding: 8px 6px;
  font-size: 11px;
  color: #6c7689;
  font-style: italic;
}

/* end Wave 38 ============================================================ */