/* CPE Live — Binance/Bitget-quality dashboard. */

:root {
  /* Surfaces */
  --bg:           #0b0e13;
  --panel:        #141821;
  --panel-2:      #1a1f2a;
  --panel-3:      #222836;
  --border:       #1f2530;
  --border-strong:#2c3445;

  /* Type */
  --text:         #e8edf2;
  --text-dim:     #a0a8b4;
  --muted:        #6b7280;

  /* Accents — Binance-inspired */
  --green:        #16c784;
  --green-soft:   rgba(22, 199, 132, 0.14);
  --red:          #ea3943;
  --red-soft:     rgba(234, 57, 67, 0.14);
  --yellow:       #f0b90b;
  --yellow-soft:  rgba(240, 185, 11, 0.12);
  --blue:         #4a8fe8;
  --blue-soft:    rgba(74, 143, 232, 0.12);
  --purple:       #b478f7;
  --purple-soft:  rgba(180, 120, 247, 0.14);
  --orange:       #f0941c;
  --orange-soft:  rgba(240, 148, 28, 0.14);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  font-size: 12px;
  font-feature-settings: 'tnum' 1, 'cv01' 1;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
.hidden { display: none !important; }
.muted { color: var(--muted); }
.pos { color: var(--green); }
.neg { color: var(--red); }
.tabular { font-variant-numeric: tabular-nums; }

/* ===== LOGIN ===== */
.login-screen {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at top, #14233a, var(--bg) 60%);
}
.login-form {
  background: var(--panel); padding: 36px 40px; border: 1px solid var(--border);
  border-radius: 6px; width: 380px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.login-form h1 { margin: 0; font-size: 18px; letter-spacing: 0.3px; }
.login-form p { margin: 0; }
.login-form input {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  padding: 10px 12px; border-radius: 4px; font-size: 13px; outline: none;
  transition: border-color 0.15s;
}
.login-form input:focus { border-color: var(--yellow); }
.login-form button {
  background: var(--yellow); color: #1a1a1a; border: 0; padding: 11px;
  border-radius: 4px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: filter 0.15s;
}
.login-form button:hover { filter: brightness(1.1); }
.login-form .error { color: var(--red); min-height: 1em; margin: 0; font-size: 12px; }

/* ===== TOPBAR ===== */
.topbar {
  display: flex; align-items: center; gap: 14px;
  padding: 0 14px; height: 44px;
  background: var(--panel); border-bottom: 1px solid var(--border-strong);
  flex-shrink: 0;
}
.brand { font-weight: 700; letter-spacing: 0.3px; font-size: 13px; }
.brand-tag {
  font-size: 9px; font-weight: 600; color: var(--yellow);
  background: var(--yellow-soft); padding: 2px 6px; border-radius: 3px;
  margin-left: 6px; letter-spacing: 0.6px;
}
.ws-status { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); }
.dot.ok { background: var(--green); box-shadow: 0 0 6px rgba(22,199,132,0.6); }
.dot.err { background: var(--red); }
.config-summary { flex: 1; color: var(--text-dim); font-size: 11px; font-feature-settings: 'tnum' 1; }
.selected-symbol { color: var(--text); font-weight: 600; font-size: 12px; }
.logout {
  background: transparent; border: 1px solid var(--border-strong); color: var(--muted);
  padding: 4px 10px; border-radius: 3px; cursor: pointer; font-size: 11px;
  transition: all 0.15s;
}
.logout:hover { color: var(--text); border-color: var(--text-dim); }

.mobile-toggle {
  display: none;
  background: transparent; border: 1px solid var(--border-strong);
  color: var(--text-dim); padding: 4px 9px; border-radius: 3px;
  font-size: 14px; cursor: pointer; line-height: 1;
}
.mobile-toggle:hover { color: var(--text); border-color: var(--text); }

/* Primary top-bar nav (Dashboard / Strategies / …). */
.topnav {
  display: flex; gap: 2px; align-items: center;
  margin-left: 8px;
}
.topnav-btn {
  background: transparent; border: 0; color: var(--text-dim);
  padding: 6px 14px; font-size: 12px; font-weight: 600;
  letter-spacing: 0.4px; cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.12s, border-color 0.12s;
  margin-bottom: -1px;
  border-radius: 0;
}
.topnav-btn:hover { color: var(--text); }
.topnav-btn.active {
  color: var(--yellow);
  border-bottom-color: var(--yellow);
}

/* ===== STRATEGY BAR (top-level strategy tabs) ===== */
.strategy-bar {
  display: flex; align-items: center; gap: 4px;
  padding: 4px 12px; min-height: 38px;
  background: var(--panel); border-bottom: 1px solid var(--border-strong);
  overflow-x: auto;
  scrollbar-width: thin;
  flex-shrink: 0;
}
.strategy-bar::-webkit-scrollbar { height: 4px; }
.strategy-bar::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 2px;
}
.strat-tab {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-dim);
  padding: 5px 12px; font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.3px; cursor: pointer;
  border-radius: 3px;
  white-space: nowrap; flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 6px;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.strat-tab:hover { color: var(--text); border-color: var(--text-dim); }
.strat-tab.active {
  background: var(--yellow-soft); border-color: var(--yellow);
  color: var(--yellow);
}
.strat-count {
  font-size: 9.5px; padding: 1px 5px; border-radius: 8px;
  background: var(--panel-3); color: var(--muted); font-weight: 700;
}
.strat-tab.active .strat-count {
  background: rgba(240, 185, 11, 0.2); color: var(--yellow);
}
.strat-tab.strat-new {
  border-style: dashed; color: var(--green);
  border-color: rgba(22, 199, 132, 0.4);
}
.strat-tab.strat-new:hover {
  background: var(--green-soft); border-color: var(--green);
}
.strat-tab.strat-compare {
  border-style: dashed; color: var(--blue);
  border-color: rgba(74, 143, 232, 0.4);
}
.strat-tab.strat-compare:hover,
.strat-tab.strat-compare.active {
  background: var(--blue-soft); border-color: var(--blue); color: var(--blue);
}

/* Strategy A/B comparison table (the ⊞ Compare overview). */
.cmp-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 4px; }
.cmp-table th, .cmp-table td {
  padding: 6px 10px; border-bottom: 1px solid var(--border); text-align: left;
}
.cmp-table th {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); font-weight: 600;
}
.cmp-table td.num, .cmp-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.cmp-table tbody tr:hover { background: var(--panel-2); }
.cmp-table tr.cmp-active { background: rgba(240, 185, 11, 0.07); }
.cmp-note { font-size: 10px; color: var(--muted); margin-top: 8px; line-height: 1.4; }
.vbadge {
  display: inline-block; padding: 1px 7px; border-radius: 10px; font-size: 10px;
  font-weight: 600; white-space: nowrap; cursor: help;
}
.vbadge.vb-ok { color: var(--green); background: var(--green-soft); }
.vbadge.vb-warn { color: var(--yellow); background: var(--yellow-soft); }
.vbadge.vb-bad { color: var(--red); background: var(--red-soft); }
.vbadge.vb-muted { color: var(--muted); background: var(--panel-2); }

/* ===== STRATEGIES FULL-PAGE VIEW ===== */
.strategies-view {
  flex: 1; min-height: 0;
  padding: 16px 20px 20px 20px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 14px;
}
.strategies-view::-webkit-scrollbar { width: 8px; }
.strategies-view::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 4px;
}
.sv-header {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 20px; padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.sv-title {
  margin: 0 0 4px 0; font-size: 17px; font-weight: 700;
  letter-spacing: -0.2px; color: var(--text);
}
.sv-sub {
  margin: 0; font-size: 12px; color: var(--text-dim);
  max-width: 760px; line-height: 1.5;
}
.sv-actions { flex-shrink: 0; }
.sv-new-btn {
  background: var(--yellow); color: #1a1a1a; border: 0;
  padding: 8px 16px; font-size: 12px; font-weight: 700;
  letter-spacing: 0.4px; border-radius: 3px;
  cursor: pointer; transition: filter 0.12s;
}
.sv-new-btn:hover { filter: brightness(1.1); }

/* Strategies grid — list of class cards in the full-page view. */
.strategies-box {
  display: flex; flex-direction: column; gap: 10px;
}
.strategies-box::-webkit-scrollbar { width: 8px; }
.strategies-box::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 4px;
}
.strat-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 4px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.strat-card-head {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px;
}
.strat-card-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  margin-bottom: 2px;
}
.strat-card-desc {
  font-size: 11px; color: var(--text-dim); line-height: 1.45;
  margin-bottom: 4px;
}
.strat-card-indis { display: flex; flex-wrap: wrap; gap: 4px; }
.ind-pill {
  font-size: 9.5px; color: var(--blue); background: var(--blue-soft);
  padding: 2px 7px; border-radius: 10px; font-weight: 600;
}
.strat-card-stats {
  display: flex; gap: 18px; text-align: right;
  font-variant-numeric: tabular-nums; font-size: 11px;
}
.strat-card-stats > div > div:last-child {
  font-size: 13px; font-weight: 700; margin-top: 1px;
}
.strat-empty { font-style: italic; padding: 8px 0; }
.strat-instances-table { width: 100%; font-size: 10.5px; }
.strat-row-actions {
  display: flex; gap: 3px; justify-content: flex-end;
  white-space: nowrap;
}
.btn-row {
  background: transparent; border: 1px solid var(--border-strong);
  color: var(--text-dim);
  padding: 2px 7px; font-size: 9px; font-weight: 700;
  letter-spacing: 0.4px; text-transform: uppercase;
  border-radius: 3px; cursor: pointer;
  transition: all 0.12s;
}
.btn-row:hover { color: var(--text); border-color: var(--text-dim); }
.btn-edit:hover { color: var(--yellow); border-color: var(--yellow); background: var(--yellow-soft); }
.btn-dup:hover { color: var(--blue); border-color: var(--blue); background: var(--blue-soft); }
.btn-toggle:hover { color: var(--green); border-color: var(--green); background: var(--green-soft); }
.btn-del:hover { color: var(--red); border-color: var(--red); background: var(--red-soft); }

/* Wide modal for the param-edit form. */
.modal-dialog.modal-wide { max-width: 620px; }
.param-form {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 60vh; overflow-y: auto;
  padding-right: 4px;
}
.param-form::-webkit-scrollbar { width: 6px; }
.param-form::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 3px;
}
.param-row {
  display: grid; grid-template-columns: 1fr 220px;
  gap: 14px; align-items: center;
  padding: 6px 4px; border-bottom: 1px solid var(--border);
}
.param-row:last-child { border-bottom: 0; }
.param-label > div:first-child {
  font-size: 11.5px; font-weight: 600; color: var(--text);
}
.param-desc { font-size: 10px; color: var(--muted); margin-top: 2px; }
.param-input-wrap {
  display: flex; align-items: center; gap: 6px; justify-content: flex-end;
}
.param-input-wrap input {
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text); border-radius: 3px;
  padding: 5px 8px; font-size: 12px;
  font-variant-numeric: tabular-nums; outline: none;
  width: 90px;
}
.param-input-wrap input:focus { border-color: var(--yellow); }
.param-badge {
  font-size: 8.5px; padding: 2px 6px; border-radius: 2px;
  font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase;
  white-space: nowrap;
}
.param-badge.instant { background: var(--green-soft); color: var(--green); }
.param-badge.rebuild { background: var(--yellow-soft); color: var(--yellow); }

.modal-label.inline {
  display: flex; align-items: center; gap: 6px;
  cursor: pointer; font-size: 11.5px;
}

/* ===== CREATE-INSTANCE WIZARD ===== */
.create-dialog { max-width: 720px; }
.stepper {
  display: flex; gap: 6px; margin: 0 0 12px 0;
  border-bottom: 1px solid var(--border); padding-bottom: 10px;
}
.step {
  flex: 1; text-align: center;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--muted);
  padding: 6px 8px; border-radius: 3px;
  background: var(--bg);
}
.step.active { color: var(--yellow); background: var(--yellow-soft); }
.step.done { color: var(--green); background: var(--green-soft); }

.create-body { min-height: 240px; max-height: 60vh; overflow-y: auto; padding: 4px; }
.create-strat-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.create-strat-card {
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 4px; padding: 10px 12px; cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.create-strat-card:hover { border-color: var(--text-dim); }
.create-strat-card.selected {
  border-color: var(--yellow); background: var(--yellow-soft);
}

.form-row { margin-bottom: 12px; }
.form-row > .modal-label { display: block; margin-bottom: 4px; }
.form-row input[type="search"], .form-row input[type="text"] {
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text); border-radius: 3px;
  padding: 7px 10px; font-size: 12px;
  width: 100%; outline: none;
}
.form-row input[type="search"]:focus { border-color: var(--yellow); }
.sym-results {
  max-height: 220px; overflow-y: auto;
  margin-top: 6px; border: 1px solid var(--border); border-radius: 3px;
  display: flex; flex-direction: column;
}
.sym-results::-webkit-scrollbar { width: 6px; }
.sym-results::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: 3px;
}
.sym-row {
  padding: 6px 10px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11.5px;
  border-bottom: 1px solid var(--border);
}
.sym-row:last-child { border-bottom: 0; }
.sym-row:hover { background: var(--panel-2); }
.sym-row.selected { background: var(--yellow-soft); color: var(--yellow); }

.sym-chosen { margin: 6px 0 0 0; min-height: 22px; }
.sym-chosen-tag {
  display: inline-block;
  font-size: 11px; font-weight: 600;
  color: var(--green); background: var(--green-soft);
  border: 1px solid rgba(22, 199, 132, 0.4);
  padding: 3px 9px; border-radius: 3px;
  letter-spacing: 0.3px;
}
.sym-empty {
  padding: 14px; text-align: center;
  font-size: 11px; color: var(--muted); font-style: italic;
}

.tf-picker { display: flex; gap: 4px; flex-wrap: wrap; }
.tf-btn {
  background: var(--bg); border: 1px solid var(--border); color: var(--text-dim);
  padding: 6px 14px; font-size: 11px; font-weight: 600;
  border-radius: 3px; cursor: pointer;
  transition: all 0.12s;
}
.tf-btn:hover { color: var(--text); border-color: var(--text-dim); }
.tf-btn.selected {
  background: var(--yellow-soft); border-color: var(--yellow); color: var(--yellow);
}

/* ===== TOAST ===== */
.toast-host {
  position: fixed; right: 14px; bottom: 14px; z-index: 300;
  display: flex; flex-direction: column-reverse; gap: 6px;
  pointer-events: none;
}
.toast {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border-strong); border-left: 3px solid var(--green);
  padding: 9px 14px; font-size: 11.5px; border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  min-width: 200px; max-width: 380px;
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.toast.visible { opacity: 1; transform: translateY(0); }
.toast-err { border-left-color: var(--red); }
.toast-warn { border-left-color: var(--yellow); }

/* ===== LAYOUT ===== */
.app { display: flex; flex-direction: column; height: 100vh; background: var(--bg); }
.layout {
  display: grid;
  grid-template-columns: 280px 1fr 460px;
  gap: 8px;
  padding: 8px;
  flex: 1;
  min-height: 0;
}
@media (max-width: 1500px) { .layout { grid-template-columns: 260px 1fr 420px; } }
@media (max-width: 1280px) { .layout { grid-template-columns: 240px 1fr 380px; gap: 6px; padding: 6px; } }

.col-left { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.col-chart { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow: hidden; }
.col-right { display: flex; flex-direction: column; gap: 8px; min-height: 0; overflow-y: auto; }
.col-right::-webkit-scrollbar { width: 6px; }
.col-right::-webkit-scrollbar-track { background: var(--bg); }
.col-right::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.col-right > .card:last-child { margin-bottom: 0; }

/* ===== CARDS ===== */
.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 4px;
  padding: 9px 12px;
}
.card h2 {
  margin: 0 0 8px 0; font-size: 10px; color: var(--muted); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.8px;
  display: flex; align-items: center; justify-content: space-between;
}

/* ===== SELECTED-INSTANCE CONFIG STRIP (above chart) ===== */
.instance-strip {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 6px 8px;
  padding: 6px 10px;
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 11px; font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.instance-strip:empty { display: none; }
.is-pair {
  font-weight: 700; color: var(--text); font-size: 12px;
  letter-spacing: 0.2px;
}
.is-strat {
  font-size: 10px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; color: var(--yellow);
  background: var(--yellow-soft); padding: 2px 7px; border-radius: 3px;
}
.is-chip {
  display: inline-flex; gap: 4px; align-items: baseline;
  padding: 2px 6px; border-radius: 3px;
  background: var(--bg);
  border: 1px solid var(--border);
}
.is-k {
  font-size: 9px; font-weight: 700; letter-spacing: 0.4px;
  color: var(--muted); text-transform: uppercase;
}
.is-v { color: var(--text); font-weight: 600; }
.is-v.pos { color: var(--green); }
.is-v.neg { color: var(--red); }
.is-v.warn { color: var(--orange); }

/* Replay + Backtest action buttons on the instance strip. */
.is-btn {
  margin-left: 4px;
  padding: 3px 9px;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.3px;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 3px;
  cursor: pointer;
}
.is-btn:hover { background: var(--panel-hover, #1a2027); }
.is-btn-active {
  background: var(--yellow-soft); color: var(--yellow);
  border-color: var(--yellow);
}
.is-btn-secondary { border-color: var(--border); color: var(--muted); }
.is-btn-secondary:hover { color: var(--text); }

/* Universe-rotator status bar — shows today's top-N gainers/losers chosen by
   the daily anchor job. Empty (display:none) when rotator is disabled. */
.universe-bar {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 12px;
  padding: 6px 12px;
  background: linear-gradient(90deg, rgba(255, 200, 0, 0.06), rgba(0,0,0,0));
  border-bottom: 1px solid var(--border);
  font-size: 11px; font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  overflow: hidden;
}
.universe-bar:empty { display: none; }
.uni-title {
  font-weight: 700; color: var(--yellow);
  text-transform: uppercase; letter-spacing: 0.4px; font-size: 10.5px;
  flex-shrink: 0;
}
.uni-sub { color: var(--muted); flex-shrink: 0; white-space: nowrap; }
.uni-empty { font-style: italic; }
.uni-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 2px 7px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  flex-shrink: 0;
  white-space: nowrap;
}
.uni-base { font-weight: 700; color: var(--text); }
.uni-pct { font-weight: 600; }
.uni-pct.uni-up { color: var(--green); }
.uni-pct.uni-down { color: var(--red); }
.uni-oot { font-style: italic; }

/* Section labels inside the marquee — ▲ TOP-5 GAINERS / ▼ TOP-5 LOSERS */
.uni-section-label {
  font-weight: 700; font-size: 10px;
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 2px 6px; border-radius: 3px;
  flex-shrink: 0; white-space: nowrap;
}
.uni-section-label.uni-up {
  color: var(--green);
  background: rgba(22, 199, 132, 0.08);
}
.uni-section-label.uni-down {
  color: var(--red);
  background: rgba(234, 57, 67, 0.08);
}

/* Marquee wrap + track — scrolls right-to-left, loops via 2× duplicate */
.uni-marquee-wrap {
  flex: 1;
  overflow: hidden;
  position: relative;
  min-width: 0;
  /* Edge fade so chips fade in/out instead of hard-cutting at the edges */
  mask-image: linear-gradient(to right,
    transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
  -webkit-mask-image: linear-gradient(to right,
    transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
}
.uni-marquee-track {
  display: inline-flex; align-items: center; gap: 8px;
  animation: uni-marquee-scroll 60s linear infinite;
  white-space: nowrap;
  /* Pause on hover so the user can read chips that catch their eye. */
}
.uni-marquee-track:hover { animation-play-state: paused; }
.uni-marquee-dup {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: 8px;
}
@keyframes uni-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .uni-marquee-track { animation: none; }
}

/* Plain-English strategy description shown below the instance strip, so the
   user always sees which strategy the active engine is running and what it
   does — no need to remember strategy keys. */
.strategy-note {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 10px; margin-top: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--yellow);
  border-radius: 3px;
  font-size: 11px; line-height: 1.4;
}
.strategy-note:empty { display: none; }
.strat-note-title {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px;
  color: var(--yellow); text-transform: uppercase;
}
.strat-note-desc {
  color: var(--muted);
}

/* Replay summary banner sandwiched between instance-strip and price chart. */
.replay-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px;
  padding: 6px 10px; margin-top: 4px;
  background: rgba(74, 143, 232, 0.07);
  border: 1px solid rgba(74, 143, 232, 0.3);
  border-radius: 4px;
  font-size: 11px; font-variant-numeric: tabular-nums;
  color: var(--text);
}
.replay-banner.hidden { display: none; }
.replay-banner .rb-label { color: var(--muted); font-weight: 600; }
.replay-banner .rb-stat { color: var(--text); }
.replay-banner .rb-stat.pos { color: var(--green); font-weight: 700; }
.replay-banner .rb-stat.neg { color: var(--red); font-weight: 700; }
.replay-banner .rb-hint {
  color: var(--muted); font-style: italic; font-weight: 400;
  flex: 1; min-width: 0;
}
.replay-banner .rb-close {
  margin-left: auto;
  background: transparent; border: none; color: var(--muted);
  font-size: 16px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.replay-banner .rb-close:hover { color: var(--text); }

/* Backtest modal. */
.backtest-card { width: min(720px, 92vw); }
.backtest-card .bt-strategy {
  color: var(--muted); font-size: 12px; margin-bottom: 12px;
}
.backtest-card .bt-strategy b { color: var(--yellow); }
.backtest-card .bt-controls {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.backtest-card .bt-controls label {
  display: flex; align-items: center; gap: 6px;
  color: var(--muted); font-size: 12px;
}
.backtest-card .bt-controls select {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 3px; padding: 3px 6px; font-size: 12px;
}
.backtest-card .bt-results { font-size: 12px; }
.backtest-card .bt-hint { color: var(--muted); padding: 16px 0; }
.backtest-card .bt-hint.err { color: var(--red); }
.backtest-card .bt-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin: 8px 0 12px;
}
.backtest-card .bt-stat {
  background: var(--bg); border: 1px solid var(--border); border-radius: 3px;
  padding: 6px 9px;
}
.backtest-card .bt-stat label {
  display: block; font-size: 9.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px;
}
.backtest-card .bt-stat b { font-size: 14px; color: var(--text); }
.backtest-card .bt-stat.pos b { color: var(--green); }
.backtest-card .bt-stat.neg b { color: var(--red); }
.backtest-card .bt-stat .bt-sub {
  display: block; font-size: 10px; color: var(--muted); margin-top: 1px;
}
.backtest-card .bt-section {
  margin: 14px 0 6px; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.backtest-card .bt-trades {
  width: 100%; border-collapse: collapse; font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.backtest-card .bt-trades th {
  text-align: left; color: var(--muted); font-weight: 600;
  padding: 4px 6px; border-bottom: 1px solid var(--border);
  text-transform: uppercase; letter-spacing: 0.3px; font-size: 10px;
}
.backtest-card .bt-trades td {
  padding: 4px 6px; border-bottom: 1px solid var(--border);
}
.backtest-card .bt-trades td.pos { color: var(--green); }
.backtest-card .bt-trades td.neg { color: var(--red); }
.backtest-card .bt-trades tbody tr:hover { background: var(--bg); }

/* ===== CHARTS ===== */
.chart-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 4px;
  padding: 6px 8px; display: flex; flex-direction: column; min-height: 0;
}
.chart-card.price-card { flex: none; height: 380px; }
.chart-card.indicator-card { flex: none; height: 170px; padding-bottom: 4px; }
@media (max-height: 1080px) {
  .chart-card.price-card { height: 340px; }
  .chart-card.indicator-card { height: 155px; }
}
@media (max-height: 900px) {
  .chart-card.price-card { height: 280px; }
  .chart-card.indicator-card { height: 140px; }
}
@media (max-height: 720px) {
  .chart-card.price-card { height: 230px; }
  .chart-card.indicator-card { height: 120px; }
}

/* Tabbed indicator pane (MACD / RSI / KDJ / ADX share one slot) */
.indicator-header {
  display: flex; justify-content: space-between; align-items: center;
  height: 22px; flex-shrink: 0; margin-bottom: 4px;
}
.indicator-tabs { display: flex; gap: 0; align-items: center; }
.ind-tab {
  background: transparent; border: 0; color: var(--muted);
  padding: 4px 11px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.7px; cursor: pointer;
  border-bottom: 2px solid transparent; transition: all 0.12s;
  margin-bottom: -1px;
}
.ind-tab:hover { color: var(--text-dim); }
.ind-tab.active { color: var(--yellow); border-bottom-color: var(--yellow); }
.indicator-canvases { flex: 1; min-height: 0; position: relative; }
.ind-chart {
  position: absolute; inset: 0;
}
.ind-chart.hidden { display: none !important; }
.swatch-vol { background: rgba(160, 168, 180, 0.55); height: 7px; }

/* ===== ACTIVITY PANEL (tabbed, fills remaining height) ===== */
.activity-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 4px;
  display: flex; flex-direction: column;
  flex: 1; min-height: 220px; overflow: hidden;
}
.tabs {
  display: flex; gap: 2px; padding: 0 8px; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
}
.tab {
  background: transparent; border: 0; color: var(--muted);
  padding: 10px 14px; font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer;
  border-bottom: 2px solid transparent; transition: all 0.15s;
  display: flex; align-items: center; gap: 6px;
  margin-bottom: -1px;
}
.tab:hover { color: var(--text-dim); }
.tab.active {
  color: var(--yellow);
  border-bottom-color: var(--yellow);
}
.tab-count {
  font-size: 9px; padding: 1px 5px; border-radius: 8px;
  background: var(--panel-3); color: var(--muted); font-weight: 600;
}
.tab.active .tab-count {
  background: var(--yellow-soft); color: var(--yellow);
}
.tab-content {
  flex: 1; min-height: 0; overflow: hidden; position: relative;
}
.tab-pane { display: flex; flex-direction: column; height: 100%;
  padding: 8px 12px; overflow: hidden; }
.tab-pane.hidden { display: none; }

/* Decision log inside activity panel: longer, denser, two-column on wide */
.activity-card #decisionList {
  list-style: none; padding: 0; margin: 0;
  overflow-y: auto; flex: 1; min-height: 0; font-size: 11px;
}
.activity-card #decisionList::-webkit-scrollbar { width: 8px; }
.activity-card #decisionList::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }

/* Open positions inside activity panel: wide, all columns visible */
.activity-card #openPositionsBox { max-height: none; overflow: auto; flex: 1; min-height: 0; }
.activity-card #openPositionsBox.empty { padding: 24px; text-align: center; }
.activity-card .openpos-table { font-size: 11px; }
.activity-card .openpos-table th { font-size: 9.5px; padding-top: 2px; }

/* Recent trades full-width within tab */
.table-scroll-full { flex: 1; overflow-y: auto; min-height: 0; }
.table-scroll-full::-webkit-scrollbar { width: 8px; }
.table-scroll-full::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.activity-card #tradesTable { font-size: 11px; }
.activity-card #tradesTable th { font-size: 9.5px; padding-top: 2px; }

.chart-header {
  display: flex; justify-content: space-between; align-items: center; padding: 0 2px;
  /* FIXED height, single line. height:auto let the hover OHLC readout wrap
     the row, growing the header and shoving/resizing the chart canvas on
     every crosshair move (the "chart jumps when hovering" bug). 22px clears
     the TF pills' borders, so the original clipping stays fixed too. */
  height: 22px; min-height: 22px; flex-wrap: nowrap; overflow: hidden;
  flex-shrink: 0; margin-bottom: 2px;
}
.chart-header h2 {
  margin: 0; font-size: 10px; color: var(--muted); font-weight: 600;
  letter-spacing: 0.6px; text-transform: uppercase;
}
.chart-legend {
  display: flex; gap: 10px; font-size: 10px; color: var(--muted);
  flex-wrap: nowrap; white-space: nowrap; overflow: hidden; min-width: 0;
}

/* Chart timeframe switcher pills */
.tf-pills {
  display: flex; gap: 2px; margin-left: 10px; margin-right: auto;
  align-items: center; flex-shrink: 0;
}
.tf-pill {
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  font-size: 9px; font-weight: 600; padding: 1px 6px; border-radius: 3px;
  cursor: pointer; line-height: 1.2; letter-spacing: 0.3px;
  white-space: nowrap; flex-shrink: 0;
}
.tf-pill:hover { background: var(--panel-2); color: var(--text); }
.tf-pill.active {
  background: var(--blue-soft); border-color: var(--blue); color: var(--blue);
}
/* Native (instance) TF gets a small dot — no extra text, no wrapping. */
.tf-pill.native::after { content: "•"; margin-left: 3px; font-size: 8px; }
.legend-item { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.legend-toggle { cursor: pointer; user-select: none; transition: opacity .12s; }
.legend-toggle:hover { color: var(--text); }
/* Hidden indicator: dimmed label + greyed swatch. */
.legend-toggle.legend-off { opacity: 0.4; text-decoration: line-through; }
.legend-toggle.legend-off .swatch { background: var(--muted) !important; }
.legend-price {
  color: var(--text); font-variant-numeric: tabular-nums;
  /* The hover OHLC readout may not push layout — truncate, never wrap. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0; flex-shrink: 1;
}
.swatch { display: inline-block; width: 10px; height: 2px; border-radius: 1px; }
.swatch-sma     { background: var(--orange); }
.swatch-ema5    { background: #16c784; }
.swatch-ema9    { background: #3498db; }
.swatch-ema21   { background: #e74c3c; }
.swatch-bb      { background: rgba(74, 143, 232, 0.4); height: 6px; }
.swatch-macd    { background: var(--blue); }
.swatch-signal  { background: var(--orange); }
.swatch-hist    { background: var(--purple); height: 7px; }
.swatch-rsi7    { background: #16c784; }
.swatch-rsi     { background: #d68df0; }
.swatch-rsi50   { background: #f0941c; }
.swatch-k       { background: #4a8fe8; }
.swatch-d       { background: #f0941c; }
.swatch-j       { background: #d68df0; }
.swatch-adx     { background: var(--purple); }
.swatch-thresh  { background: var(--muted); }
.chart-canvas { flex: 1; min-height: 0; position: relative; }

/* Marker tooltip */
.marker-tooltip {
  position: absolute;
  background: rgba(20, 24, 33, 0.98);
  border: 1px solid var(--border-strong);
  border-radius: 5px; padding: 8px 10px;
  font-size: 11px; line-height: 1.55;
  z-index: 10; pointer-events: none;
  max-width: 290px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.55);
}
.marker-tooltip.hidden { display: none; }
.marker-tooltip .mt-title {
  font-weight: 700; font-size: 11px; margin-bottom: 4px;
  padding-bottom: 4px; border-bottom: 1px solid var(--border);
  color: var(--text);
}
.marker-tooltip .mt-row { display: flex; justify-content: space-between; gap: 12px; padding: 1px 0; }
.marker-tooltip .mt-key { color: var(--muted); }

/* ===== SCANNER (LEFT) ===== */
.scanner-card { display: flex; flex-direction: column; min-height: 0; max-height: 100%; }
.scanner-header { display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px; flex-shrink: 0; }
.scanner-header h2 { margin: 0; }
.scanner-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 10px; }
.scn-count { color: var(--text); font-weight: 600; font-size: 11px; }
.scn-status { font-size: 9px; color: var(--muted); }
.scn-allpos {
  margin-top: 2px; padding: 1px 8px; font-size: 9px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer;
  color: var(--muted); background: transparent;
  border: 1px solid var(--border); border-radius: 4px;
}
.scn-allpos:hover { color: var(--text); border-color: var(--muted); }
.scn-allpos.active {
  color: var(--bg); background: var(--yellow); border-color: var(--yellow);
}
.openpos-scope {
  font-size: 10px; color: var(--muted); margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.scanner-controls {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-bottom: 6px; flex-shrink: 0; align-items: center;
}
.scanner-controls input[type="search"], .scanner-controls select {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  padding: 4px 6px; border-radius: 3px; font-size: 11px; flex: 1; outline: none;
}
.scanner-controls input[type="search"]:focus,
.scanner-controls select:focus { border-color: var(--blue); }
.scanner-controls select { max-width: 95px; }
.scanner-toggle {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; color: var(--muted); cursor: pointer;
  width: 100%;
}
.scanner-toggle input[type="checkbox"] {
  accent-color: var(--yellow); cursor: pointer; margin: 0;
}

.scanner-list { display: flex; flex-direction: column; gap: 2px;
  overflow-y: auto; flex: 1; min-height: 0;
  padding-right: 2px;
}
.scanner-list::-webkit-scrollbar { width: 6px; }
.scanner-list::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.scanner-row {
  display: flex; flex-direction: column; gap: 1px;
  padding: 5px 7px; border-radius: 3px; cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.1s, border-color 0.1s;
}
.scanner-row:hover { background: var(--panel-2); }
.scanner-row.active { background: var(--panel-2); border-color: var(--blue); }
.scanner-row.disabled { opacity: 0.45; }
.scanner-row.in-position { border-left: 2px solid var(--yellow); padding-left: 5px; }
.scanner-row-top, .scanner-row-mid, .scanner-row-bot {
  display: flex; align-items: center; gap: 5px;
}
.scanner-row-bot { justify-content: space-between; font-size: 10px; }
.sym-name { font-weight: 600; font-size: 11px; color: var(--text); }
.sym-tf { color: var(--muted); font-size: 10px; flex: 1; }
.sym-status { font-size: 9px; padding: 1px 4px; border-radius: 2px;
  text-transform: uppercase; font-weight: 600; letter-spacing: 0.3px; }
.status-enabled { background: var(--green-soft); color: var(--green); }
.status-in-pos  { background: var(--yellow-soft); color: var(--yellow); }
.status-disabled { background: rgba(107, 114, 128, 0.15); color: var(--muted); }
.state-live     { background: var(--green-soft); color: var(--green); }
.state-in-pos   { background: var(--yellow-soft); color: var(--yellow); }
.state-off      { background: rgba(107, 114, 128, 0.15); color: var(--muted); }
.scn-strat { font-size: 9px; color: var(--muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: 0.2px;
}
.scn-pnl { font-variant-numeric: tabular-nums; font-weight: 500; }

/* Tier dividers in the scanner list */
.tier-divider {
  font-size: 9px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--muted);
  padding: 6px 4px 3px 4px; margin-top: 2px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 5px;
}
.tier-divider::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--muted); flex-shrink: 0;
}
.tier-divider.tier-0 { color: var(--yellow); }
.tier-divider.tier-0::before { background: var(--yellow); box-shadow: 0 0 5px var(--yellow-soft); }
.tier-divider.tier-1 { color: var(--green); }
.tier-divider.tier-1::before { background: var(--green); }
.tier-divider.tier-2 { color: var(--text-dim); }
.tier-divider.tier-2::before { background: var(--text-dim); }
.tier-divider.tier-3 { color: var(--muted); opacity: 0.6; }

/* Strategy group headers in the scanner list */
.scn-group-head {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  padding: 7px 6px 5px 4px; margin-top: 3px;
  border-bottom: 1px solid var(--border);
  user-select: none;
}
.scn-group-head:hover { background: var(--panel-2); border-radius: 3px; }
/* Accordion arrow: ▸ when collapsed, rotates to ▾ (90°) when open — smooth. */
.scn-group-chev {
  font-size: 10px; color: var(--muted); width: 12px; flex-shrink: 0;
  display: inline-block; text-align: center;
  transition: transform 0.2s ease, color 0.2s ease;
}
.scn-group-head.open .scn-group-chev { transform: rotate(90deg); color: var(--text-dim); }
.scn-group-name {
  font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text);
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.scn-group-count { font-size: 9px; color: var(--muted); flex-shrink: 0; }
.scn-group-pnl {
  font-size: 10px; font-variant-numeric: tabular-nums; font-weight: 500;
  flex-shrink: 0;
}
/* Small dedicated button for the full strategy summary (was the whole header). */
.scn-group-summary-btn {
  flex-shrink: 0; background: transparent; border: none; cursor: pointer;
  color: var(--muted); font-size: 12px; line-height: 1; padding: 2px 3px;
  border-radius: 3px; opacity: 0.55; transition: opacity 0.15s, color 0.15s;
}
.scn-group-head:hover .scn-group-summary-btn { opacity: 1; }
.scn-group-summary-btn:hover { color: var(--blue); background: var(--panel); }

/* Animatable collapse body — grid 1fr→0fr animates height at any row count. */
.scn-group-body {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows 0.2s ease;
}
.scn-group-body.collapsed { grid-template-rows: 0fr; }
.scn-group-inner { overflow: hidden; min-height: 0; }
.scanner-row.scn-grouped { margin-left: 8px; }
.scanner-row.scn-grouped.in-position { padding-left: 5px; }

/* Recent-trades rows from other instances/eras of the same pair */
.trade-foreign td { opacity: 0.6; }

/* Open Positions tab: selected-instance pin + show-all toggle */
.openpos-row.openpos-selected { background: var(--panel-2); }
.openpos-row.openpos-selected td:first-child { border-left: 2px solid var(--blue); }
.openpos-toggle {
  display: block; width: 100%; margin-top: 4px; padding: 4px 6px;
  background: transparent; border: 1px dashed var(--border); border-radius: 3px;
  color: var(--muted); font-size: 10px; cursor: pointer; text-align: center;
}
.openpos-toggle:hover { background: var(--panel-2); color: var(--text); }

/* ===== Strategy summary view (scanner group-header click) ===== */
/* While open, it replaces every other main-column element (chart panes,
   instance strip, tabs) until the user picks an instance or closes it. */
.col-chart.summary-mode > *:not(#strategySummary) { display: none !important; }
.strategy-summary {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: 6px; padding: 14px 16px;
}
.ss-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ss-title {
  font-size: 14px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.6px; color: var(--text);
}
.ss-sub { color: var(--muted); font-size: 11px; flex: 1; }
.ss-close {
  background: transparent; border: 1px solid var(--border); border-radius: 3px;
  color: var(--muted); font-size: 10px; padding: 3px 8px; cursor: pointer;
}
.ss-close:hover { background: var(--panel-2); color: var(--text); }
.ss-desc { color: var(--text-dim); font-size: 11px; line-height: 1.55; margin-bottom: 12px; }
.ss-cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px; margin-bottom: 14px;
}
.ss-card { background: var(--panel-2); border-radius: 4px; padding: 8px 10px; }
.ss-card .label {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.5px;
  color: var(--muted); margin-bottom: 3px;
}
.ss-card .value { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ss-card .sub { font-size: 9px; color: var(--muted); margin-top: 2px; }
.ss-table { width: 100%; }
.ss-table .openpos-row { cursor: pointer; }
/* Rotated-out instances: realized P&L stays in the pool, shown muted. */
.ss-table .ss-retired td { opacity: 0.6; }
.ss-table .ss-retired:hover td { opacity: 0.85; }
.scn-group-head.active { background: var(--panel-2); border-radius: 3px; }
.scn-group-head.active .scn-group-name { color: var(--blue); }
/* Group whose instances the bottom activity tabs (Decision Log / Open Positions
   / Recent Trades) are currently scoped to — distinct yellow accent vs the blue
   summary-active state above. */
.scn-group-head.panel-scoped {
  box-shadow: inset 2px 0 0 var(--yellow);
  background: rgba(234, 179, 8, 0.06); border-radius: 3px;
}
.scn-group-head.panel-scoped .scn-group-name { color: var(--yellow); }
.trade-strat { font-size: 10px; color: var(--text-dim);
  font-family: ui-monospace, "SF Mono", Menlo, monospace; }

/* ===== PORTFOLIO ===== */
.portfolio-card {
  background: linear-gradient(180deg, var(--blue-soft), var(--panel) 30%);
}
.portfolio-header { display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px; }
.portfolio-header h2 { margin: 0; }
.portfolio-sub { font-size: 10px; color: var(--muted); }
.portfolio-single { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px 14px;
  font-variant-numeric: tabular-nums; }
.portfolio-single .stat-main {
  grid-column: span 3; display: flex;
  justify-content: space-between; align-items: baseline; padding: 4px 0 8px 0;
  border-bottom: 1px solid var(--border); margin-bottom: 4px;
}
.portfolio-single .stat-main .label { font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.6px; }
.portfolio-single .stat-main .value-block { display: flex; align-items: baseline; gap: 8px; }
.portfolio-single .stat-main .value { font-size: 22px; font-weight: 700; letter-spacing: -0.3px; }
.portfolio-single .stat-main .sub { font-size: 11px; color: var(--muted); font-weight: 500; }
.portfolio-single .stat { display: flex; flex-direction: column; gap: 1px; }
.portfolio-single .stat .label { font-size: 9px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.5px; }
.portfolio-single .stat .value { font-size: 13px; font-weight: 600; }
.portfolio-single .stat .sub { font-size: 9px; color: var(--muted); }

/* ===== OPEN POSITIONS TABLE ===== */
#openPositionsBox { max-height: 220px; overflow: auto; }
#openPositionsBox.empty { padding: 6px 0; color: var(--muted); font-style: italic; font-size: 11px; }
#openPositionsBox::-webkit-scrollbar { width: 6px; height: 6px; }
#openPositionsBox::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.openpos-table { border-collapse: collapse; font-size: 10px;
  font-variant-numeric: tabular-nums; min-width: 100%; }
.openpos-table th, .openpos-table td {
  padding: 4px 6px; text-align: right; border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.openpos-table th { font-weight: 500; color: var(--muted); font-size: 8.5px;
  text-transform: uppercase; position: sticky; top: 0; background: var(--panel);
  letter-spacing: 0.4px; padding-top: 0; padding-bottom: 4px;
}
.openpos-table th:first-child, .openpos-table td:first-child {
  text-align: left; padding-left: 0;
}
.openpos-row { cursor: pointer; transition: background 0.1s; }
.openpos-row:hover { background: var(--panel-2); }
.openpos-inst { font-weight: 600; color: var(--text); display: block; font-size: 10.5px; }
.openpos-inst-strat { color: var(--muted); font-size: 9px; display: block; margin-top: 1px; }
.side-long  { color: var(--green); font-weight: 600; }
.side-short { color: var(--red); font-weight: 600; }

/* Manual close button inside the open-positions row */
.openpos-actions { text-align: right; padding-right: 0; }
.btn-close-manual {
  background: var(--red-soft); color: var(--red);
  border: 1px solid rgba(234, 57, 67, 0.3);
  padding: 3px 9px; font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.5px; text-transform: uppercase;
  border-radius: 3px; cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.btn-close-manual:hover {
  background: rgba(234, 57, 67, 0.22); border-color: var(--red);
}

/* ============================================================
   MODAL — manual close override
   ============================================================ */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0, 0, 0, 0.62);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-dialog {
  background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: 6px; padding: 18px 20px;
  width: 100%; max-width: 460px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.65);
}
.modal-title {
  margin: 0; font-size: 13px; font-weight: 700;
  letter-spacing: 0.3px; color: var(--text);
  padding-bottom: 10px; border-bottom: 1px solid var(--border);
}
.modal-summary {
  display: flex; flex-direction: column; gap: 4px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 4px; padding: 10px 12px;
  font-variant-numeric: tabular-nums; font-size: 11.5px;
}
.ms-row { display: flex; justify-content: space-between; gap: 12px; }
.ms-key { color: var(--muted); }
.modal-label {
  font-size: 11px; color: var(--text-dim);
  margin-top: 2px;
}
.modal-textarea {
  background: var(--bg); border: 1px solid var(--border);
  color: var(--text); border-radius: 4px;
  padding: 9px 11px; font-size: 12px; resize: vertical;
  min-height: 90px; font-family: inherit; outline: none;
  transition: border-color 0.15s;
}
.modal-textarea:focus { border-color: var(--yellow); }
.modal-error {
  color: var(--red); font-size: 11px; min-height: 1em;
}
.modal-buttons {
  display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px;
}
.modal-btn {
  border: 0; padding: 8px 16px; border-radius: 4px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: filter 0.12s;
}
.modal-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.modal-cancel {
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--border-strong);
}
.modal-cancel:hover { color: var(--text); border-color: var(--text-dim); }
.modal-confirm {
  background: var(--red); color: #fff;
}
.modal-confirm:hover:not(:disabled) { filter: brightness(1.1); }

/* ===== POSITION CARD ===== */
.position-box { font-size: 12px; line-height: 1.6; }
.position-box.long  { border-left: 3px solid var(--green); padding-left: 9px; }
.position-box.short { border-left: 3px solid var(--red);   padding-left: 9px; }
.position-box .row { display: flex; justify-content: space-between; gap: 12px; padding: 1px 0; }
.position-box .key { color: var(--muted); font-size: 11px; }
.empty { color: var(--muted); font-style: italic; font-size: 11px; }

/* ===== STATS ===== */
#statsBox { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; font-variant-numeric: tabular-nums; }
.stat .label { font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.stat .value { font-size: 15px; font-weight: 600; }
.stat .sub { font-size: 9px; color: var(--muted); margin-top: 1px; line-height: 1.2; }

/* ===== TRADES TABLE ===== */
.table-scroll { max-height: 220px; overflow-y: auto; min-height: 0; }
.table-scroll::-webkit-scrollbar { width: 6px; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
table { width: 100%; border-collapse: collapse; font-size: 10.5px; font-variant-numeric: tabular-nums; }
th, td { padding: 4px 4px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; }
th { color: var(--muted); text-transform: uppercase; font-weight: 500; font-size: 8.5px;
  position: sticky; top: 0; background: var(--panel); letter-spacing: 0.4px;
}
th:first-child, td:first-child { text-align: left; }
tbody tr:hover td { background: var(--panel-2); }

/* ===== DECISION LOG ===== */
.decision-card { display: flex; flex-direction: column; position: relative;
  max-height: 360px; }
#decisionList { list-style: none; padding: 0; margin: 0;
  overflow-y: auto; flex: 1; min-height: 0; font-size: 11px;
}
#decisionList::-webkit-scrollbar { width: 6px; }
#decisionList::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.dec-row {
  padding: 4px 6px; border-bottom: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 1px;
  transition: background 0.1s;
}
.dec-row.has-narrative { cursor: help; }
.dec-row.has-narrative:hover { background: var(--panel-2); }
.dec-row-head { display: flex; gap: 6px; align-items: baseline; }
.dec-detail {
  font-size: 9px; color: var(--muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  padding-left: 2px; line-height: 1.3; word-break: break-word;
}
.dec-time { color: var(--muted); font-variant-numeric: tabular-nums;
  white-space: nowrap; font-size: 9.5px; min-width: 78px;
}
.dec-tag {
  font-size: 8.5px; padding: 1px 5px; border-radius: 2px;
  text-transform: uppercase; font-weight: 600; white-space: nowrap;
  letter-spacing: 0.4px;
}
.dec-text { flex: 1; color: var(--text-dim); }
.dec-count {
  font-size: 9px; padding: 1px 5px; border-radius: 2px;
  background: var(--panel-3); color: var(--muted); font-weight: 600;
  margin-left: auto; white-space: nowrap;
}
/* Symbol chip prefixed to each row when the Decision Log is in group scope. */
.dec-sym {
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.3px;
  color: var(--yellow); white-space: nowrap; min-width: 40px;
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
/* Header line above a group-scoped activity tab (mirrors .openpos-scope). */
.activity-scope {
  list-style: none; font-size: 10px; color: var(--muted);
  letter-spacing: 0.02em; padding: 2px 2px 6px; margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}

.tag-entered { background: var(--green-soft); color: var(--green); }
.tag-exited  { background: var(--red-soft); color: var(--red); }
.tag-blocked { background: rgba(107, 114, 128, 0.18); color: var(--text-dim); }
.tag-no_op   { background: rgba(107, 114, 128, 0.1); color: var(--muted); }
.tag-scan    { background: var(--blue-soft); color: var(--blue); }
.tag-holding { background: var(--yellow-soft); color: var(--yellow); }

/* Decision tooltip */
.dec-tooltip {
  position: fixed; max-width: 400px;
  background: rgba(20, 24, 33, 0.98);
  border: 1px solid var(--border-strong); border-radius: 5px;
  padding: 10px 12px; z-index: 100;
  font-size: 11px; line-height: 1.6;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  pointer-events: none;
}
.dec-tooltip.hidden { display: none; }
.dec-tooltip .tt-title { font-weight: 700; font-size: 12px; margin-bottom: 6px;
  padding-bottom: 5px; border-bottom: 1px solid var(--border); color: var(--text); }
.dec-tooltip .tt-line { padding: 2px 0; }
.dec-tooltip .tt-bullet { color: var(--blue); margin-right: 5px; }
.dec-tooltip .tt-key { color: var(--muted); }

/* ============================================================
   RESPONSIVE — TABLET / MOBILE
   ============================================================ */

/* Tablet: tighten right column, keep three columns until ~1100px */
@media (max-width: 1100px) {
  .layout { grid-template-columns: 220px 1fr 340px; gap: 5px; padding: 5px; }
  .chart-card.price-card { height: 320px; }
  .col-right .card { padding: 7px 9px; }
  .portfolio-single .stat-main .value { font-size: 18px; }
  .config-summary { display: none; }
}

/* Mobile: single-column stack. Scanner & right column become slide-in drawers. */
@media (max-width: 900px) {
  body { overflow: auto; }
  .app { height: auto; min-height: 100vh; }

  .mobile-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .topbar { gap: 8px; padding: 0 8px; height: 42px; }
  .brand-tag { display: none; }
  .config-summary { display: none; }
  .selected-symbol {
    font-size: 11px; flex: 1; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .logout { font-size: 10px; padding: 3px 7px; }

  .layout {
    display: flex; flex-direction: column;
    padding: 6px; gap: 6px;
    height: auto;
  }

  /* Scanner drawer: slides in from left when toggled */
  .col-left {
    position: fixed; top: 42px; left: 0; bottom: 0;
    width: 86vw; max-width: 320px;
    background: var(--bg);
    z-index: 50;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 6px 0 20px rgba(0,0,0,0.5);
    border-right: 1px solid var(--border-strong);
    padding: 6px;
  }
  .col-left.open { transform: translateX(0); }
  .col-left .scanner-card { height: 100%; }

  /* Right column drawer: slides in from right */
  .col-right {
    position: fixed; top: 42px; right: 0; bottom: 0;
    width: 92vw; max-width: 380px;
    background: var(--bg);
    z-index: 50;
    transform: translateX(100%);
    transition: transform 0.22s ease;
    box-shadow: -6px 0 20px rgba(0,0,0,0.5);
    border-left: 1px solid var(--border-strong);
    padding: 6px;
    overflow-y: auto;
  }
  .col-right.open { transform: translateX(0); }

  /* Backdrop for drawers */
  .drawer-backdrop {
    position: fixed; inset: 42px 0 0 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 40;
  }
  .drawer-backdrop.hidden { display: none; }

  /* Charts stack full-width, with sensible mobile heights */
  .col-chart { gap: 5px; }
  .chart-card.price-card { height: 60vh; min-height: 280px; max-height: 480px; }
  .chart-card.indicator-card { height: 28vh; min-height: 150px; max-height: 220px; }

  /* Activity panel: keep tabs but cap height */
  .activity-card { min-height: 280px; flex: none; height: 50vh; max-height: 460px; }
  .tabs { padding: 0 4px; }
  .tab { padding: 8px 9px; font-size: 10.5px; }
  .tab-count { font-size: 8.5px; }

  /* Chart legend trims aggressively on mobile to fit */
  .chart-legend { gap: 6px; font-size: 9px; }
  .chart-legend .legend-item:nth-child(n+4) { display: none; }
  .indicator-header .chart-legend .legend-item:nth-child(n+4) { display: inline-flex; }
  .legend-price { display: none !important; }

  /* Portfolio more compact in drawer */
  .portfolio-single { grid-template-columns: 1fr 1fr; }
  .portfolio-single .stat-main { grid-column: span 2; }
  .portfolio-single .stat-main .value { font-size: 20px; }
}

/* Very small phones */
@media (max-width: 480px) {
  .chart-card.price-card { height: 56vh; }
  .ind-tab { padding: 4px 7px; font-size: 9.5px; }
  .indicator-tabs { gap: 1px; }
}

/* ===== STRATEGY LAB ===== */
.lab-view {
  padding: 12px 16px 20px;
  overflow-y: auto;
  height: calc(100vh - 50px);
}
.lab-grid {
  display: grid;
  grid-template-columns: minmax(480px, 560px) 1fr;
  gap: 12px;
  height: 100%;
}
@media (max-width: 1280px) { .lab-grid { grid-template-columns: minmax(420px, 480px) 1fr; } }
@media (max-width: 1100px) { .lab-grid { grid-template-columns: 1fr; } }

.lab-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 5px;
  padding: 10px 12px; margin-bottom: 12px;
  display: flex; flex-direction: column;
}
.lab-card-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.lab-card-head h2 {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--text);
}
.lab-mode-tabs {
  display: flex; gap: 2px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 3px;
  padding: 2px;
}
.lab-mode-btn {
  background: transparent; color: var(--muted); border: none;
  padding: 3px 8px; font-size: 10.5px; font-weight: 600;
  border-radius: 2px; cursor: pointer;
}
.lab-mode-btn.active {
  background: var(--yellow-soft); color: var(--yellow);
}
.lab-body { font-size: 12px; }

/* Builder */
.builder-row {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px dashed var(--border);
}
.builder-row label {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 10px; color: var(--muted); flex: 1; min-width: 80px;
}
.builder-row input {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 3px; padding: 3px 6px; font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.builder-side { margin-bottom: 10px; }
.builder-side h4 {
  margin: 0 0 6px; font-size: 11px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.builder-warn {
  color: var(--yellow); background: var(--yellow-soft);
  padding: 6px 8px; border-radius: 3px; font-size: 11px;
}

/* Builder meta rows: name (full-width) + sizing knobs (4 columns) */
.builder-meta {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px;
}
.builder-meta label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--muted);
  flex: 1; min-width: 0;
}
.builder-meta label span { font-weight: 600; }
.builder-meta input {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 3px;
  padding: 4px 8px; font-size: 12px;
  font-variant-numeric: tabular-nums; min-width: 0;
}
.builder-meta input:focus {
  outline: none; border-color: var(--yellow);
  box-shadow: 0 0 0 2px rgba(240,176,11,0.15);
}
.builder-meta-name { width: 100%; }
.builder-meta-name input { font-size: 13px; padding: 5px 10px; }
.builder-meta-numeric {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}
/* 2-column variant (Built-in mode: only Capital + Leverage, TP/SL lives
   in the strategy's own params form below) */
.builder-meta-numeric.builder-meta-2col {
  grid-template-columns: repeat(2, 1fr);
}
/* On narrower sub-panels the 4-column row collapses to 2x2 */
@media (max-width: 600px) {
  .builder-meta-numeric { grid-template-columns: repeat(2, 1fr); }
}
/* Distinct visual treatment for preset chips (different from quick rules) */
.builder-preset-chips .builder-quick-chip {
  background: rgba(74,143,232,0.08);
  border-color: rgba(74,143,232,0.4);
  color: var(--accent, #4a8fe8);
}
.builder-preset-chips .builder-quick-chip:hover {
  background: rgba(74,143,232,0.2);
  border-color: var(--accent, #4a8fe8);
  color: var(--text);
}

/* Stale-leverage warning chip shown next to the Leverage input label
   when Lab.leverage has changed since the last backtest run. */
.leverage-stale {
  display: inline-block;
  background: rgba(234,57,67,0.15);
  color: var(--red, #ea3943);
  border: 1px solid rgba(234,57,67,0.5);
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  padding: 1px 5px;
  margin-left: 6px;
  text-transform: none;
  letter-spacing: 0;
  cursor: help;
}

/* Liquidation visual treatment in the trades table */
.bt-trades tr.row-liq {
  background: rgba(234,57,67,0.08);
}
.bt-trades tr.row-liq td {
  font-weight: 600;
}
.bt-trades .liq-badge {
  display: inline-block;
  background: var(--red, #ea3943);
  color: #fff;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* Headline "Liquidations" card variant when N > 0 */
.bt-stat.liq-warn {
  border-color: var(--red, #ea3943);
}
.bt-stat.liq-warn b {
  color: var(--red, #ea3943);
}

/* Trade-table pagination footer */
.bt-trades-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 10px 6px 4px;
  flex-wrap: wrap;
  font-size: 11px;
}
.bt-trades-nav .btn-sm {
  min-width: 48px; padding: 4px 10px;
}
.bt-trades-nav .btn-sm:disabled {
  opacity: 0.35; cursor: not-allowed;
}
.bt-trades-page-label {
  display: inline-flex; align-items: baseline; gap: 6px;
  color: var(--text);
  padding: 0 6px;
  font-variant-numeric: tabular-nums;
}
.bt-trades-page-label .bt-trades-range {
  color: var(--muted); font-size: 10px;
}

/* Exit-mode row sits below the numeric grid; dropdown spans full width
   because the option labels are descriptive ("Reverse on opposite signal"
   etc.) and don't fit in a narrow column.                              */
.builder-meta-exit {
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--border);
}
.builder-meta-exit label { width: 100%; }
.builder-meta-exit select {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 3px;
  padding: 5px 8px; font-size: 12px; width: 100%;
}
.builder-meta-exit select:focus {
  outline: none; border-color: var(--yellow);
  box-shadow: 0 0 0 2px rgba(240,176,11,0.15);
}

/* Quick-start template chips (Change 4) */
.builder-quick-chips {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0 0 10px; padding: 6px 0 8px;
  border-bottom: 1px dashed var(--border);
}
.builder-quick-label {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px;
  color: var(--muted); margin-right: 4px;
}
.builder-quick-chip {
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 12px;
  padding: 3px 10px; font-size: 11px; cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.builder-quick-chip:hover {
  background: var(--yellow-soft); color: var(--yellow);
  border-color: var(--yellow);
}

/* Live preview line (Change 1) — syntax-highlighted, click-to-scroll */
.builder-preview {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; line-height: 1.5;
  color: var(--text-dim);
  background: var(--bg);
  border: 1px solid var(--border); border-radius: 3px;
  padding: 5px 8px; margin-bottom: 6px;
  word-break: break-word;
}
.builder-preview-empty { color: var(--muted); font-style: italic; }
.builder-preview .bp-cond {
  cursor: pointer; padding: 1px 3px; border-radius: 2px;
  transition: background 0.12s ease;
}
.builder-preview .bp-cond:hover { background: rgba(74,143,232,0.15); }
.builder-preview .bp-op {
  color: var(--yellow); font-weight: 700; padding: 0 2px;
}
.builder-preview .bp-ind   { color: #6cb6ff; }   /* indicators: cool blue */
.builder-preview .bp-num   { color: #f0b90b; }   /* numbers: amber */
.builder-preview .bp-field { color: #b394f5; }   /* bar fields: violet */
.builder-preview .bp-fn    { color: #5dd2a8; }   /* rolling fns: teal-green */
.builder-preview .bp-pattern { color: #ffa657; } /* candle patterns: orange */
.builder-preview .bp-and   { color: var(--muted); padding: 0 2px; }
.builder-preview .bp-flat  { color: var(--text); }

/* ---- Rule-setup popup (click the custom-rule badge) ---- */
.is-strat-link { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.is-strat-link:hover { color: var(--text); }
.rule-card { max-width: 560px; gap: 8px; }
.rule-sec { display: flex; flex-direction: column; gap: 4px; }
.rule-sec-h {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--muted); font-weight: 700;
}
.rule-expr {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px; line-height: 1.6;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 4px; padding: 8px 10px;
}
.rule-kv { font-size: 12.5px; color: var(--text); }
.rule-dim { color: var(--muted); font-size: 11.5px; }
.rule-actions { margin-top: 6px; text-align: right; }
/* Token highlight inside the popup (mirrors .builder-preview). */
.rule-expr .bp-op   { color: var(--yellow); font-weight: 700; padding: 0 2px; }
.rule-expr .bp-ind  { color: #6cb6ff; }
.rule-expr .bp-num  { color: #f0b90b; }
.rule-expr .bp-field { color: #b394f5; }
.rule-expr .bp-fn   { color: #5dd2a8; }
.rule-expr .bp-pattern { color: #ffa657; }
.rule-expr .bp-and  { color: var(--muted); padding: 0 2px; }

.btn-sm {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 3px; padding: 3px 8px; font-size: 11px;
  cursor: pointer; margin-right: 4px;
}
.btn-sm:hover { background: var(--panel-hover, #1a2027); }
.btn-sm.danger { color: var(--red); border-color: var(--red); }

/* Formula mode */
.formula-help {
  background: var(--bg); border: 1px solid var(--border); border-radius: 3px;
  padding: 6px 8px; margin-bottom: 8px; font-size: 10.5px; color: var(--muted);
}
.formula-help code {
  display: inline-block; background: rgba(74,143,232,0.1);
  padding: 1px 4px; border-radius: 2px; color: var(--text);
  font-size: 11px;
}
.lab-body textarea {
  width: 100%; min-height: 50px; background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 3px; padding: 6px;
  font-family: monospace; font-size: 12px; resize: vertical;
}
.lab-body label {
  display: block; font-size: 10px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.4px;
  margin-top: 6px; margin-bottom: 2px;
}
.formula-err {
  color: var(--red); font-size: 11px; min-height: 14px; margin-top: 2px;
}

/* ===================================================================== */
/* Sentence builder (Pillar A) + Rule Doctor panel (Pillar B)            */
/* ===================================================================== */

/* Side card: green LONG / red SHORT, "when ALL are true" header. */
.sb-card {
  border-radius: 8px; padding: 11px 12px; margin-bottom: 12px;
  border: 1px solid var(--border-strong);
}
.sb-long  { background: linear-gradient(180deg, rgba(22,199,132,0.07), rgba(22,199,132,0.02)); border-color: rgba(22,199,132,0.40); }
.sb-short { background: linear-gradient(180deg, rgba(234,57,67,0.07), rgba(234,57,67,0.02)); border-color: rgba(234,57,67,0.40); }
.sb-exit  { background: linear-gradient(180deg, rgba(240,148,28,0.06), rgba(240,148,28,0.02)); border-color: rgba(240,148,28,0.38); }
.sb-exit-toggle {
  font-size: 12px; font-weight: 600; color: var(--text-dim); cursor: pointer;
  padding: 7px 2px; margin-top: 2px; user-select: none;
}
.sb-exit-toggle:hover { color: var(--orange); }
.sb-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
.sb-ttl { font-size: 13px; font-weight: 700; color: var(--text); }
.sb-all {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid var(--border-strong); border-radius: 10px;
  padding: 1px 7px; margin-left: 4px;
}

/* OR-of-AND grouping. */
.sb-group {
  border-left: 2px solid var(--border-strong);
  padding-left: 9px; margin: 2px 0;
}
.sb-ordiv {
  display: flex; align-items: center; gap: 8px; margin: 9px 0 5px;
  color: var(--purple); font-size: 9.5px; font-weight: 700; letter-spacing: 0.8px;
}
.sb-ordiv::before, .sb-ordiv::after {
  content: ""; flex: 1; height: 1px; background: var(--purple-soft);
}

/* Condition row = a sentence of chips + an optional Doctor badge + delete. */
.sb-row {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 7px 9px; margin: 5px 0;
}
.sb-row-open { border-color: var(--blue); }
.sb-sentence { flex: 1; font-size: 13.5px; line-height: 1.9; }
.sb-lead { color: var(--muted); font-size: 12px; margin-right: 2px; }
.sb-del {
  color: var(--muted); cursor: pointer; font-size: 13px; padding: 0 2px;
  flex-shrink: 0;
}
.sb-del:hover { color: var(--red); }
.sb-add {
  font-size: 11.5px; color: var(--text-dim); padding: 4px 2px;
}
.sb-add span { cursor: pointer; }
.sb-add span:hover { color: var(--blue); }
.sb-add-or span { color: var(--purple); }

/* Chips — color-coded by role, click to edit inline. */
.sb-chipwrap { cursor: pointer; }
.sb-chip {
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 5px; padding: 2px 8px; margin: 0 1px;
  font-weight: 600; font-size: 12.5px; cursor: pointer;
  border: 1px solid transparent; transition: filter 0.12s ease;
}
.sb-chipwrap:hover .sb-chip, .sb-chip:hover { filter: brightness(1.22); }
.sb-c-ind  { background: var(--blue-soft);   color: #9ecbff; }
.sb-c-op   { background: var(--yellow-soft);  color: #e8c878; }
.sb-c-val  { background: var(--green-soft);   color: #9ed7a0; }
.sb-c-tf   { background: var(--purple-soft);  color: #d6a8ee; }
.sb-c-fn   { background: var(--green-soft);   color: #7fd9c0; }
.sb-c-pattern { background: var(--orange-soft); color: #ffb673; }
.sb-c-latch { background: rgba(180,120,247,0.18); color: #d6a8ee; font-weight: 700; }
.sb-info {
  font-size: 10.5px; opacity: 0.65; cursor: help; padding-left: 1px;
}
.sb-info:hover { opacity: 1; }
.sb-dim { color: var(--muted); }

/* Per-condition + per-side Doctor badges. */
.sb-badge {
  font-size: 11px; font-weight: 700; white-space: nowrap; flex-shrink: 0;
}
.sb-badge.sb-ok  { color: var(--green); }
.sb-badge.sb-bad { color: var(--red); }
.sb-badge.sb-badge-warn { color: var(--orange); }
.sb-badge.sb-lint { color: var(--orange); cursor: help; }
/* Build-time lint message under a condition row (e.g. "did you mean ema(9)?"). */
.sb-lint-msg {
  font-size: 11px; color: var(--orange);
  margin: 2px 0 6px 2px; padding-left: 4px;
  border-left: 2px solid var(--orange);
}

/* Inline chip editor. */
.sb-editor {
  background: var(--panel); border: 1px dashed var(--border-strong);
  border-radius: 6px; padding: 9px 10px; margin: -1px 0 7px;
}
.sb-erow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 4px 0;
}
.sb-elbl { font-size: 10.5px; color: var(--muted); min-width: 86px; }
.sb-editor select, .sb-editor input {
  background: var(--panel-2); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 4px;
  padding: 4px 7px; font-size: 12px;
}
.sb-editor input[type="number"] { width: 70px; }
.sb-arg { display: inline-flex; align-items: center; gap: 4px; }
.sb-arglbl {
  font-size: 9.5px; text-transform: lowercase; color: var(--muted);
  white-space: nowrap;
}
.sb-hint {
  font-size: 11px; color: var(--text-dim); line-height: 1.5;
  margin: 3px 0; padding-left: 2px;
}
.sb-hint .sb-ok { color: var(--green); }
.sb-hint .sb-warn { color: var(--orange); }

/* DSL preview — the "you never type this" trust line. */
.sb-dsl { line-height: 1.7; }
.sb-dsl-cap { margin-bottom: 3px; }

/* Rule Doctor panel. */
.sb-doctor {
  background: var(--panel); border: 1px solid var(--border-strong);
  border-radius: 8px; padding: 11px 12px; margin-top: 12px;
}
.sb-doc-ttl { font-size: 12.5px; font-weight: 700; margin-bottom: 6px; }
.sb-doc-scope { font-size: 11px; margin-bottom: 6px; }
.sb-doc-line {
  display: flex; gap: 7px; align-items: flex-start;
  font-size: 12px; line-height: 1.5; margin: 5px 0;
}
.sb-doc-line.sb-ok  { color: var(--green); }
.sb-doc-line.sb-bad { color: var(--red); }
.sb-doc-line.sb-warn { color: var(--orange); }
.sb-doc-line b { color: var(--text); }
.sb-doc-sub { margin-top: -3px; padding-left: 22px; }
.sb-doc-actions { margin-top: 9px; gap: 8px; }

/* "Describe in plain English" — the AI-draft entry surface. */
.sb-describe {
  background: linear-gradient(180deg, rgba(74,143,232,0.07), rgba(74,143,232,0.02));
  border: 1px solid var(--blue); border-radius: 8px; padding: 11px 12px; margin-bottom: 12px;
}
.sb-describe-head { font-size: 12.5px; font-weight: 700; margin-bottom: 7px; }
.sb-describe-input {
  width: 100%; background: var(--bg); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 8px 10px; font-size: 13px; font-family: inherit; line-height: 1.5;
  resize: vertical; box-sizing: border-box;
}
.sb-describe-input:focus { border-color: var(--blue); outline: none; }
.sb-describe-input::placeholder { color: var(--muted); }
.sb-describe-actions { display: flex; align-items: center; gap: 10px; margin-top: 7px; }
.sb-describe-result {
  margin-top: 9px; border-top: 1px dashed var(--border); padding-top: 8px;
  font-size: 12px; line-height: 1.5; display: flex; flex-direction: column; gap: 4px;
}
.sb-describe-assume { color: var(--text-dim); }
.sb-describe-assume b { color: var(--blue); }
.sb-describe-unsup, .sb-describe-unsup b { color: var(--orange); }
.sb-describe-model { font-size: 10.5px; opacity: 0.7; }

/* Sandbox list */
.lab-sandbox-list { display: flex; flex-direction: column; gap: 4px; }
.sandbox-item {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; background: var(--bg); border: 1px solid var(--border);
  border-radius: 3px; font-size: 11px;
}
.sandbox-load {
  flex: 1; background: transparent; border: none; color: var(--text);
  cursor: pointer; text-align: left; font-weight: 600;
}
.sandbox-load:hover { color: var(--yellow); }
.sandbox-del {
  background: transparent; border: none; color: var(--muted);
  cursor: pointer; font-size: 14px;
}
.sandbox-del:hover { color: var(--red); }
.bt-mini { color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.bt-mini.muted { font-style: italic; }
.status-badge {
  padding: 1px 6px; border-radius: 8px;
  font-size: 9px; font-weight: 700; text-transform: uppercase;
}
.status-draft { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }
.status-promoted { background: rgba(22, 199, 132, 0.15); color: var(--green); }
.status-archived { background: var(--bg); color: var(--text-dim); }

/* Filter tabs above the sandbox list */
.lab-list-filter {
  display: flex; gap: 2px; margin-bottom: 8px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 3px; padding: 2px;
}
.lab-filter-tab {
  flex: 1; background: transparent; color: var(--muted);
  border: none; padding: 4px 6px; font-size: 10.5px; font-weight: 600;
  border-radius: 2px; cursor: pointer; display: flex;
  align-items: center; justify-content: center; gap: 4px;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.lab-filter-tab.active {
  background: var(--yellow-soft); color: var(--yellow);
}
.lab-filter-tab .filter-count {
  font-size: 9.5px; padding: 1px 5px; border-radius: 8px;
  background: var(--panel); color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.lab-filter-tab.active .filter-count {
  background: var(--yellow); color: #000;
}

/* Expandable sandbox row */
.sandbox-item {
  margin-bottom: 4px; border: 1px solid var(--border);
  border-radius: 3px; background: var(--bg);
}
.sandbox-item-head {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 8px; cursor: pointer;
}
.sandbox-item-head:hover { background: var(--panel); }
.sandbox-item.expanded .sandbox-item-head {
  border-bottom: 1px solid var(--border);
}
.sandbox-item-toggle {
  font-size: 10px; color: var(--muted); width: 10px;
}
.sandbox-item.expanded .sandbox-item-toggle::before { content: "▾"; }
.sandbox-item:not(.expanded) .sandbox-item-toggle::before { content: "▸"; }
.sandbox-load {
  background: transparent; border: none; color: var(--text);
  font-size: 12px; font-weight: 600; cursor: pointer;
  text-align: left; flex: 1; padding: 0;
}
.sandbox-del {
  background: transparent; border: none; color: var(--muted);
  font-size: 14px; cursor: pointer; padding: 0 4px;
}
.sandbox-del:hover { color: var(--red); }

.sandbox-runs {
  padding: 4px 6px 6px; font-size: 11px;
  overflow-x: auto;
}
.sandbox-runs table {
  /* min-width so the columns don't get squeezed below readability when
     the sandbox card is narrow — the wrapper's overflow-x lets the user
     scroll horizontally if needed. */
  min-width: 360px; width: 100%; border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.sandbox-runs th, .sandbox-runs td { white-space: nowrap; }
.sandbox-runs th, .sandbox-runs td {
  text-align: left; padding: 3px 4px;
  border-bottom: 1px solid var(--border);
}
.sandbox-runs th {
  font-size: 9.5px; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.sandbox-runs tr.run-row { cursor: pointer; }
.sandbox-runs tr.run-row:hover { background: var(--panel); }
.sandbox-runs .run-actions { display: flex; gap: 2px; justify-content: flex-end; }
.sandbox-runs .run-action {
  background: transparent; border: none; color: var(--muted);
  cursor: pointer; font-size: 12px; padding: 1px 3px;
}
.sandbox-runs .run-action:hover { color: var(--text); }
.sandbox-runs .run-action.starred { color: var(--yellow); }
.sandbox-runs .run-no { color: var(--muted); padding: 8px; text-align: center; }

/* Preview */
.lab-preview-controls {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.lab-preview-controls label {
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.3px;
}
.lab-preview-controls select,
.lab-preview-controls input[type="date"] {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 3px; padding: 2px 5px; font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.lab-custom-range {
  display: flex; align-items: center; gap: 4px;
}
.lab-range-sep {
  font-size: 10px; color: var(--muted); text-transform: uppercase;
}
.lab-data-freshness {
  font-size: 10.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
  padding: 2px 6px; border-radius: 3px;
  background: var(--bg); border: 1px solid var(--border);
}
.lab-data-freshness.stale { color: var(--yellow); border-color: var(--yellow); }
.lab-data-freshness.fresh { color: var(--green); }
.lab-preview-controls .hidden { display: none; }
#labBtMode { margin-bottom: 6px; }
#labUniverseMinVol { width: 110px; }
.lab-chart-wrap { margin: 8px 0; position: relative; }
.lab-chart {
  background: var(--bg); border-radius: 3px;
  min-height: 320px; width: 100%;
}
.chart-err {
  margin-top: 6px; padding: 6px 8px;
  background: rgba(234, 57, 67, 0.12);
  border: 1px solid rgba(234, 57, 67, 0.4);
  border-radius: 3px; color: var(--red);
  font-size: 11px; line-height: 1.4;
}
.lab-summary { padding: 4px 0; }

/* Re-use the .bt-stats grid styling inside the Lab card too (existing
   rules are scoped to .backtest-card; the Lab needs them too). */
.lab-summary .bt-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px; margin: 8px 0 12px;
}
.lab-summary .bt-stat {
  background: var(--bg); border: 1px solid var(--border); border-radius: 3px;
  padding: 6px 9px;
}
.lab-summary .bt-stat label {
  display: block; font-size: 9.5px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px;
}
.lab-summary .bt-stat b { font-size: 14px; color: var(--text); }
.lab-summary .bt-stat.pos b { color: var(--green); }
.lab-summary .bt-stat.neg b { color: var(--red); }
.lab-summary .bt-stat .bt-sub {
  display: block; font-size: 10px; color: var(--muted); margin-top: 1px;
}

/* Headline metrics row: bigger numbers, 5-column grid for the primary KPIs
   (Total P&L, Max DD, Total trades, Profitable, Profit factor). */
.lab-summary .bt-stats-headline {
  grid-template-columns: repeat(5, 1fr);
  gap: 10px; margin-bottom: 10px;
}
.lab-summary .bt-stats-headline .bt-stat {
  padding: 10px 12px;
}
.lab-summary .bt-stats-headline .bt-stat b { font-size: 18px; font-weight: 700; }
.lab-summary .bt-stats-headline .bt-stat label { font-size: 10px; }

/* Equity / drawdown chart container (Phase 3.3). Hidden until the first
   backtest completes; shown via JS toggling `hidden`. */
.lab-equity-wrap {
  margin: 12px 0 4px;
}
.lab-equity-chart {
  width: 100%; height: 200px; min-height: 200px;
  background: #0b0e13; border-radius: 3px;
}

/* Long / Short returns table (Phase 3.4). */
.lab-card .bt-ls-table {
  width: 100%; border-collapse: collapse; font-size: 11px;
  font-variant-numeric: tabular-nums; margin-bottom: 8px;
}
.lab-card .bt-ls-table th {
  text-align: left; color: var(--muted); font-weight: 600;
  padding: 4px 6px; border-bottom: 1px solid var(--border);
  text-transform: uppercase; letter-spacing: 0.3px; font-size: 10px;
}
.lab-card .bt-ls-table td {
  padding: 4px 6px; border-bottom: 1px solid var(--border);
}
.lab-card .bt-ls-table td.pos b { color: var(--green); }
.lab-card .bt-ls-table td.neg b { color: var(--red); }

/* Same trades-table styling as .backtest-card for the recent-trades view. */
.lab-card .bt-section {
  margin: 14px 0 6px; font-size: 11px; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.4px;
}
.lab-card .bt-trades {
  width: 100%; border-collapse: collapse; font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.lab-card .bt-trades th {
  text-align: left; color: var(--muted); font-weight: 600;
  padding: 4px 6px; border-bottom: 1px solid var(--border);
  text-transform: uppercase; letter-spacing: 0.3px; font-size: 10px;
}
.lab-card .bt-trades td {
  padding: 4px 6px; border-bottom: 1px solid var(--border);
}
.lab-card .bt-trades td.pos { color: var(--green); }
.lab-card .bt-trades td.neg { color: var(--red); }
.lab-actions { display: flex; gap: 8px; margin: 8px 0; }
.lab-trades { margin-top: 8px; }

/* ============================================================
   Admin / Cache view
   ============================================================ */
.admin-view {
  padding: 18px 20px;
  max-width: 1400px;
  margin: 0 auto;
}
.admin-view.hidden { display: none; }
.admin-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.admin-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.admin-refresh-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--muted);
}
.admin-refresh-meta .btn-sm {
  padding: 4px 10px;
  font-size: 11px;
}
.admin-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 900px) {
  .admin-grid { grid-template-columns: 1fr; }
}
.admin-card {
  padding: 12px 14px;
  background: var(--bg-card, #1a1a1a);
  border: 1px solid var(--border, #2a2a2a);
  border-radius: 6px;
}
.admin-card.hidden { display: none; }

/* ====== Admin → Instances panel ====== */
.admin-instances-card { margin-bottom: 14px; }
.admin-instances-head {
  display: flex; flex-direction: column; gap: 10px;
}
.admin-instances-toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.admin-instances-toolbar select,
.admin-instances-toolbar input[type="search"] {
  background: var(--bg); color: var(--text); border: 1px solid var(--border);
  border-radius: 3px; padding: 3px 6px; font-size: 11px;
}
.status-chips { display: flex; gap: 2px; background: var(--bg);
  border: 1px solid var(--border); border-radius: 3px; padding: 2px;
}
.chip {
  background: transparent; color: var(--muted); border: none;
  padding: 3px 8px; font-size: 10.5px; font-weight: 600;
  border-radius: 2px; cursor: pointer; display: flex;
  align-items: center; gap: 4px; text-transform: uppercase;
  letter-spacing: 0.3px;
}
.chip.active { background: var(--yellow-soft); color: var(--yellow); }
.chip-count {
  font-size: 9.5px; padding: 1px 5px; border-radius: 8px;
  background: var(--panel); color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.chip.active .chip-count { background: var(--yellow); color: #000; }

/* Cap the instance-table height so the cache section below stays
   reachable.  Wraps vertically when content exceeds, horizontally for
   narrow viewports.  Pagination (next selector) also bounds the row
   count per page so the wrap rarely needs to scroll internally. */
.admin-instances-tablewrap {
  overflow-x: auto;
  max-height: 50vh;
  overflow-y: auto;
}

/* Pagination footer for the admin-instances table — rendered only when
   total rows > pageSize.  Centered, compact, sticky-feeling next to the
   table for fast navigation. */
.admin-instances-pager {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; padding: 10px 6px 4px;
  flex-wrap: wrap;
  font-size: 11px;
}
.admin-instances-pager .btn-sm { min-width: 56px; padding: 4px 10px; }
.admin-instances-pager .btn-sm:disabled { opacity: 0.35; cursor: not-allowed; }
.admin-instances-page-label {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 0 8px;
  font-variant-numeric: tabular-nums;
}
.admin-instances-table {
  width: 100%; border-collapse: collapse; font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.admin-instances-table th, .admin-instances-table td {
  text-align: left; padding: 4px 6px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.admin-instances-table th {
  font-size: 9.5px; color: var(--muted); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.3px;
  position: sticky; top: 0; background: var(--bg-card, #1a1a1a);
}
.admin-instances-table .col-sel { width: 24px; }
.admin-instances-table tr.stale-paused td:first-child {
  border-left: 2px dashed var(--yellow);
}
.admin-instances-table tr.rotator-row {
  background: rgba(255, 255, 255, 0.02);
}
.admin-instances-table tr.rotator-row td {
  color: var(--muted);
}

.status-badge { display: inline-block; padding: 1px 7px;
  border-radius: 9px; font-size: 9.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.3px;
}
.status-badge.status-live     { background: rgba(22, 199, 132, 0.15); color: #16c784; }
.status-badge.status-paused   { background: rgba(240, 185, 11, 0.15); color: #f0b90b; }
.status-badge.status-disabled { background: var(--bg); color: var(--text-dim);
                                 border: 1px solid var(--border); }

.row-actions { display: flex; gap: 4px; }
.row-actions button {
  background: transparent; border: 1px solid var(--border);
  color: var(--text); padding: 2px 6px; font-size: 10.5px;
  border-radius: 3px; cursor: pointer;
}
.row-actions button:hover:not(:disabled) { background: var(--panel); }
.row-actions button:disabled {
  color: var(--text-dim); cursor: not-allowed; opacity: 0.5;
}
.row-actions .danger { color: #ea3943; border-color: rgba(234, 57, 67, 0.3); }
.row-actions .danger:hover:not(:disabled) {
  background: rgba(234, 57, 67, 0.1);
}

.pnl-pos { color: #16c784; }
.pnl-neg { color: #ea3943; }
.upnl { font-size: 10px; }

@media (max-width: 900px) {
  .admin-instances-toolbar { gap: 4px; }
  .admin-instances-table { font-size: 10px; }
}
.admin-card .card-header {
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border, #2a2a2a);
  padding-bottom: 6px;
}
.admin-card .card-header h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

/* Key-value table inside admin cards */
.kv-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.kv-table th {
  text-align: left;
  color: var(--muted);
  font-weight: 500;
  padding: 4px 8px 4px 0;
  vertical-align: top;
  white-space: nowrap;
}
.kv-table td {
  padding: 4px 0;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.kv-row {
  font-size: 12px;
  padding: 3px 0;
}
.warn { color: #f7a35c; }
.muted { color: var(--muted); }
.muted.small, .small { font-size: 11px; }

/* Compact ordered list for universe / log entries */
ol.compact, ol.compact.dense {
  padding-left: 22px;
  margin: 4px 0 8px;
  font-size: 12px;
  line-height: 1.5;
}
ol.compact.dense {
  font-size: 11px;
  columns: 2;
  column-gap: 20px;
}
ol.compact li { padding: 1px 0; }
.admin-card h4 {
  margin: 8px 0 4px;
  font-size: 12px;
  color: var(--text);
}

/* Universe / changes chips */
.chip-up, .chip-dn, .chip-warn {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  margin: 1px 2px;
  font-weight: 600;
}
.chip-up { background: #1e3320; color: #6dcf6e; }
.chip-dn { background: #3a1f1f; color: #e57878; }
.chip-warn { background: #3a2a18; color: #f7a35c; }

/* Refresh-log list */
.log-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 11px;
  max-height: 320px;
  overflow-y: auto;
}
.log-list li {
  padding: 4px 0;
  border-bottom: 1px solid var(--border, #232323);
  display: grid;
  grid-template-columns: 130px 60px 1fr;
  gap: 6px;
  align-items: baseline;
}
.log-when { color: var(--muted); font-variant-numeric: tabular-nums; }
.log-stream {
  color: var(--accent, #7090b0);
  font-size: 10px;
  text-transform: uppercase;
}
.log-detail { color: var(--muted); font-size: 10px; word-break: break-word; }

/* Backfill progress bar */
.progress {
  height: 6px;
  background: var(--border, #2a2a2a);
  border-radius: 3px;
  overflow: hidden;
  margin: 6px 0;
}
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #4a9eff, #6dcf6e);
  transition: width 0.4s ease-out;
}