/* PaperTrade - trading terminal design system.
   Dark-first, information-dense, deliberately restrained. Colour carries
   meaning only: green up, red down, amber warning, blue interactive. Anything
   decorative stays greyscale, so a screen full of numbers reads at a glance. */

:root {
  /* Surfaces, darkest to lightest. Three levels build depth without shadows,
     which read as noise at this density. */
  --bg: #080B10;
  --panel: #10151C;
  --panel-2: #141A22;
  --panel-3: #1A222C;
  --border: #202833;
  --border-strong: #2B3644;

  --text: #F2F5F8;
  --muted: #8B96A5;
  --faint: #5C6675;

  --green: #22C55E;
  --red: #EF4444;
  --accent: #4EA1FF;
  --warning: #F59E0B;
  --green-dim: #22C55E1F;
  --red-dim: #EF44441F;
  --accent-dim: #4EA1FF1F;
  --warning-dim: #F59E0B1F;

  /* One spacing scale, used everywhere. */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px;

  --r-sm: 4px; --r-md: 6px; --r-lg: 8px;

  --header-h: 56px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "SF Mono", ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.45;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Every figure in a column has to line up, or scanning a table costs a
   double-take. Applied broadly rather than per-component for that reason. */
.value, td, th, input[type="number"], .num,
.quote-price, .kpi-v, .metric-v, .stat .value {
  font-variant-numeric: tabular-nums;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-strong); }

/* ---------- Header ---------- */

.topbar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--s5);
  height: var(--header-h);
  padding: 0 var(--s4);
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  position: sticky;
  top: 0;
  z-index: 40;
}

.brand {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand .tag {
  font-size: 10px;
  font-weight: 500;
  color: var(--faint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 0;
}

/* Global search sits in the centre column so it reads as the terminal's
   command bar rather than as one form among many. */
.global-search { justify-self: center; width: 100%; max-width: 460px; position: relative; }
.global-search .search-icon {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--faint); pointer-events: none; font-size: 12px; line-height: 1;
}
.global-search .kbd-hint {
  position: absolute; right: 78px; top: 50%; transform: translateY(-50%);
  color: var(--faint); font-size: 10px; font-family: var(--mono);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 1px 5px; pointer-events: none; background: var(--bg);
}
.global-search .kbd-hint.hidden { display: none; }

.account-summary { display: flex; align-items: center; gap: var(--s4); }

/* Header metrics: small caps label over a bright figure. The label is
   navigation, the number is the content. */
.stat { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.stat .label {
  font-size: 9px; color: var(--faint); text-transform: uppercase;
  letter-spacing: 0.07em; font-weight: 600;
}
.stat .value { font-size: 13px; font-weight: 600; white-space: nowrap; }
.stat-sep { width: 1px; height: 26px; background: var(--border); }

/* ---------- Layout ---------- */

main {
  max-width: 1720px;
  margin: 0 auto;
  padding: var(--s4) var(--s4) var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
}

.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s4);
}

/* A panel shows only when BOTH hold: its tab is active, and it has not hidden
   itself. The :not([hidden]) keeps the two independent - the chart stays away
   until a symbol loads, and switching tabs must not override that. */
main > section[data-tab] { display: none; }
main > section[data-tab].tab-visible:not([hidden]) { display: block; }

/* ---------- Navigation ---------- */

.tabs {
  display: flex;
  gap: 2px;
  flex-wrap: wrap;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s1);
  position: sticky;
  top: var(--header-h);
  z-index: 30;
}
.tabs .tab {
  position: relative;
  background: transparent;
  border: none;
  color: var(--muted);
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  border-radius: var(--r-md);
  transition: background 0.12s, color 0.12s;
}
.tabs .tab:hover { color: var(--text); background: var(--panel-2); }
.tabs .tab.active { background: var(--panel-3); color: var(--text); font-weight: 600; }
/* The accent is a 2px underline, not a filled tab: enough to locate yourself,
   not enough to compete with the data. */
.tabs .tab.active::after {
  content: "";
  position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px;
  background: var(--accent); border-radius: 1px;
}
.tabs .tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* ---------- Panel chrome ---------- */

.panel h2 {
  margin: 0 0 var(--s3);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.panel-header {
  display: flex; align-items: center; gap: var(--s2);
  margin-bottom: var(--s3); flex-wrap: wrap;
}
.panel-header h2 { margin: 0; margin-right: auto; }
.chart-toggle { flex-wrap: wrap; display: flex; gap: 2px; }

/* ---------- Forms ---------- */

#symbol-form { display: flex; gap: var(--s2); width: 100%; }
#symbol-input {
  flex: 1;
  width: 100%;
  max-width: none;
  padding: 7px 12px 7px 30px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 12.5px;
  font-family: inherit;
  text-transform: uppercase;
}
#symbol-input::placeholder { color: var(--faint); text-transform: none; }
#symbol-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }

input, select, textarea { font-family: inherit; }
input[type="number"], input[type="text"], input[type="password"], select {
  padding: 6px 9px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font-size: 12.5px;
}
input:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-dim); }

/* ---------- Buttons ---------- */

.btn {
  border: none;
  border-radius: var(--r-md);
  padding: 7px 13px;
  font-size: 12.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: filter 0.12s, background 0.12s;
}
.btn:hover { filter: brightness(1.12); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.btn-primary { background: var(--accent); color: #05131F; }
.btn-ghost { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); }
.btn-ghost:hover { color: var(--text); background: var(--panel-3); }
.btn-buy { background: var(--green); color: #04220A; }
.btn-sell { background: var(--red); color: #2B0705; }
.btn-small { padding: 4px 9px; font-size: 11.5px; border-radius: var(--r-sm); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; filter: none; }

.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}
.login-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 28px;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login-brand { font-size: 1.4rem; font-weight: 700; }
.login-sub { margin: 0; color: var(--muted); font-size: 0.85rem; }
.login-card input {
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #0d1117;
  color: var(--text);
  font-size: 1rem;
}
.login-card input:focus { outline: none; border-color: var(--accent); }
.login-error { color: var(--red); font-size: 0.85rem; }
.login-error.hidden { display: none; }

.symbol-help {
  margin-top: 12px;
  font-size: 0.85rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.symbol-help.hidden { display: none; }
.symbol-help .suggest-btn {
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.symbol-help .suggest-btn:hover { opacity: 0.85; }

.quote-card { margin-top: 16px; }
.quote-card.hidden { display: none; }
.quote-main { display: flex; align-items: baseline; gap: 10px; }
.quote-symbol { font-size: 1.4rem; font-weight: 700; }
.quote-name { color: var(--muted); font-size: 0.9rem; }
.quote-price { display: flex; align-items: center; gap: 10px; font-size: 1.6rem; font-weight: 700; margin: 6px 0 14px; }
.quote-price span#quote-change { font-size: 1rem; font-weight: 600; }
.up { color: var(--green); }
.down { color: var(--red); }

.badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 3px 7px;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--accent-dim);
  color: var(--accent);
}
.badge.simulated { background: #a3710922; color: #d29922; }

.trade-inline { display: flex; gap: 8px; align-items: center; }
.trade-inline input {
  width: 90px;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: #0d1117;
  color: var(--text);
}

.chart-toggle { display: flex; gap: 6px; }
.chart-mode-btn { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.chart-mode-btn.active { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }

.indicator-bar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.indicator-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.indicator-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  min-width: 72px;
}
.ind-btn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ind-btn:hover { color: var(--text); border-color: var(--muted); }
.ind-btn.active {
  background: var(--accent-dim);
  color: var(--accent);
  border-color: var(--accent);
}

.chart-wrap {
  width: 100%;
  height: 320px;
  position: relative;
}

/* Drag bar under the chart, like the pane splitters in Dhan / TradingView.
   Its own hit area is deliberately taller than the visible grip so it's
   grabbable on a touchscreen without the grip looking heavy. */
.chart-resize {
  height: 14px;
  margin-top: 2px;
  cursor: ns-resize;
  position: relative;
  touch-action: none;
}
.chart-resize::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 46px;
  height: 3px;
  margin-left: -23px;
  margin-top: -1.5px;
  border-radius: 2px;
  background: var(--border);
  transition: background 0.15s, width 0.15s;
}
.chart-resize:hover::after { background: var(--muted); width: 64px; }
.chart-resize.dragging::after { background: var(--accent); width: 64px; }
#chart-canvas {
  width: 100%;
  height: 100%;
  display: block;
  cursor: crosshair;
  touch-action: none; /* let the chart handle drags rather than scrolling the page */
}

#expiration-select {
  padding: 8px 10px;
  border-radius: 8px;
  background: #0d1117;
  color: var(--text);
  border: 1px solid var(--border);
}

.chain-scroll,
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; min-width: 600px; }
th, td { padding: 8px 10px; text-align: right; white-space: nowrap; }
th { color: var(--muted); font-weight: 600; font-size: 0.75rem; border-bottom: 1px solid var(--border); }
td:first-child, th:first-child { text-align: left; }

.chain-table td:nth-child(6), .chain-table th:nth-child(6) { text-align: center; font-weight: 700; background: #1c2530; }
.side-header { text-align: center; font-size: 0.75rem; letter-spacing: 0.05em; }
.call-side { color: var(--green); }
.put-side { color: var(--red); }
.chain-table tbody tr:hover { background: #1c2530; }
.itm { color: var(--text); background: #1a2b1a55; }

.positions-table tbody tr:nth-child(even),
.history-table tbody tr:nth-child(even),
.screener-table tbody tr:nth-child(even) { background: #10151c; }

.screener-note { color: var(--muted); font-size: 0.8rem; margin: -4px 0 12px; }
.screener-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 700px) { .screener-cols { grid-template-columns: 1fr; } }
.screener-col h3 { margin: 0 0 8px; font-size: 0.85rem; }

/* The shared `table { min-width: 600px }` rule (sized for the wide
   positions/history tables) forced this 4-column table into a two-up grid
   cell far narrower than that, which pushed the last column's extra space
   into one huge gap before "Nearest Level". Fixed layout + explicit column
   widths keep it sane at any panel width. */
/* FIVE columns since OH/OL was added. The widths below were still written for
   four, so the last column had none left, the table overflowed its grid cell
   and the symbol scrolled out of view behind a horizontal scrollbar - the
   column you most need in order to read the row. */
.screener-table { table-layout: fixed; min-width: 0; width: 100%; }
.screener-table th, .screener-table td { white-space: normal; }
.screener-table th:nth-child(1), .screener-table td:nth-child(1) { width: 26%; }
.screener-table th:nth-child(2), .screener-table td:nth-child(2) { width: 15%; }
.screener-table th:nth-child(3), .screener-table td:nth-child(3) { width: 19%; }
.screener-table th:nth-child(4), .screener-table td:nth-child(4) { width: 12%; text-align: center; }
.screener-table th:nth-child(5), .screener-table td:nth-child(5) {
  width: 28%; text-align: left; word-break: break-word;
}
/* Two tables side by side leaves each about 600px at 1366. Below that the pair
   stacks so neither has to be scrolled sideways to read a symbol. */
@media (max-width: 1200px) {
  .screener-cols { grid-template-columns: 1fr; }
}
.screener-table tbody tr.screener-row { cursor: pointer; }
.screener-table tbody tr.screener-row:hover { background: #1c2530; }
#screener-mingap { width: 64px; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border); background: #0d1117; color: var(--text); }
.screener-hint { color: var(--muted); font-size: 0.78rem; }
.badge.near-pivot { background: #1a2b1a; color: var(--green); margin-left: 4px; }

.breakout-toast {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%);
  z-index: 999; background: #0d1117; border: 1px solid var(--accent);
  color: var(--text); padding: 12px 20px; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4); font-size: 0.9rem; font-weight: 600;
  max-width: 90vw; text-align: center;
}
.breakout-toast.hidden { display: none; }

tr.screener-row.breakout-bullish { background: #10250f; }
tr.screener-row.breakout-bearish { background: #2a1010; }
.badge.breakout-badge { margin-left: 6px; }
.badge.breakout-badge.bullish { background: #1a2b1a; color: var(--green); }
.badge.breakout-badge.bearish { background: #2b1a1a; color: var(--red); }

.empty-row { text-align: center; color: var(--muted); padding: 18px; }

.pl-positive { color: var(--green); }
.pl-negative { color: var(--red); }

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: #1c2530;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 0.9rem;
  box-shadow: 0 4px 18px rgba(0,0,0,0.4);
  z-index: 50;
  transition: opacity 0.25s, transform 0.25s;
}
.toast.error { border-color: var(--red); color: #ffb4ae; }
.toast.hidden { opacity: 0; pointer-events: none; transform: translate(-50%, 10px); }

@media (max-width: 640px) {
  .topbar { flex-direction: column; align-items: flex-start; }
  .account-summary { width: 100%; justify-content: space-between; }
}

/* ---- Pre-trade check modal ---- */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 100;
}
.modal.hidden { display: none; }
.modal-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  width: 100%;
  max-width: 460px;
  max-height: 88vh;
  overflow-y: auto;
}
.modal-card h3 { margin: 0 0 4px; font-size: 1.05rem; }
.tm-sub { margin: 0 0 14px; color: var(--muted); font-size: 0.85rem; }
.tm-qty-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 0.9rem; }
.tm-qty-row input {
  width: 90px; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--border); background: #0d1117; color: var(--text);
}
.tm-check { font-size: 0.85rem; }
.tm-grid { display: grid; grid-template-columns: 1fr auto; gap: 6px 14px; margin-bottom: 12px; }
.tm-grid dt { color: var(--muted); }
.tm-grid dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.tm-note {
  border-left: 2px solid #d29922;
  background: #a3710918;
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
  margin-bottom: 8px;
  color: var(--text);
  line-height: 1.45;
}
.tm-disclaimer { color: var(--muted); font-size: 0.78rem; margin-top: 10px; line-height: 1.45; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
.tm-loading { color: var(--muted); padding: 10px 0; }

/* ---- Trade review ---- */
.review-sub { color: var(--muted); font-size: 0.82rem; }
.review-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.review-card:last-child { margin-bottom: 0; }
.review-card.win { border-left: 3px solid var(--green); }
.review-card.loss { border-left: 3px solid var(--red); }
.review-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.review-title { font-weight: 650; font-size: 0.95rem; }
.review-total { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.review-bars { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
.review-bar { display: grid; grid-template-columns: 92px 1fr 92px; gap: 10px; align-items: center; font-size: 0.8rem; }
.review-bar .lbl { color: var(--muted); }
.review-bar .amt { text-align: right; font-variant-numeric: tabular-nums; }
.review-bar .track { height: 6px; background: #ffffff0f; border-radius: 3px; position: relative; overflow: hidden; }
.review-bar .fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.review-lessons { font-size: 0.85rem; color: var(--text); line-height: 1.5; }
.review-lessons li { margin-bottom: 6px; }
.review-lessons ul { margin: 0; padding-left: 18px; }

.chain-why {
  margin: 0 0 12px;
  padding: 9px 13px;
  border-left: 3px solid #d29922;
  background: #a3710918;
  border-radius: 0 6px 6px 0;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* The broker's raw error, kept visually secondary to the explanation above it. */
.chain-why-detail {
  margin: 6px 0 2px;
  padding: 5px 8px;
  background: #00000033;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.75rem;
  color: #b9a06a;
  word-break: break-word;
}

.quote-asof { font-size: 0.72rem; color: var(--muted); font-weight: 400; }

/* Resting order book. Sized to read as a footnote to the price, not as a
   headline: it is context, and the caveat under it is part of the reading. */
.quote-book { margin-top: 10px; max-width: 520px; }
.book-idle { font-size: 0.72rem; color: var(--muted); }
.book-label { font-size: 0.74rem; color: var(--muted); margin-bottom: 4px; }
.book-bar {
  display: flex;
  height: 6px;
  border-radius: 3px;
  overflow: hidden;
  background: var(--border);
}
.book-bid { background: var(--green); }
.book-ask { background: var(--red); }
.book-note { font-size: 0.68rem; color: var(--muted); margin-top: 4px; line-height: 1.4; }

/* Shown in place of nothing when orders are refused, so a greyed-out Buy
   button has a stated reason next to it rather than looking broken. */
.market-closed {
  margin: 10px 0 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: #a3710922;
  color: #d29922;
  font-size: 0.76rem;
  line-height: 1.45;
  max-width: 640px;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Open = High / Open = Low, live. Deliberately a small tag rather than a
   headline: it is a fact about the session so far, not a recommendation, and
   it is worth least in the first half hour when it is most often true. */
.quote-openstatus { margin-top: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.or-tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.or-tag-low { background: #1a2b1a; color: var(--green); }
.or-tag-high { background: #2b1a1a; color: var(--red); }
.or-tag-none { background: #21262d; color: var(--muted); }
.or-detail { font-size: 0.72rem; color: var(--muted); }
.muted-cell { color: var(--muted); }

.broker-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 12px 0 8px; }
.broker-form input {
  flex: 1 1 380px;
  min-width: 240px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
}

.flow-summary { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 14px; }
.flow-stat { display: flex; flex-direction: column; gap: 2px; }
.flow-stat .label { font-size: 0.7rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.flow-stat .value { font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.diag-btn {
  margin-left: 10px;
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 6px;
  padding: 3px 10px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
}
.diag-btn:disabled { opacity: 0.6; cursor: default; }
.diag-out {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 0.78rem;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.diag-row { display: grid; grid-template-columns: 130px 118px 1fr; gap: 10px; align-items: baseline; }
.diag-name { font-weight: 600; color: var(--text); }
.diag-status.ok { color: var(--green); font-weight: 600; }
.diag-status.bad { color: var(--red); font-weight: 600; }
.diag-detail { color: var(--muted); word-break: break-word; }
@media (max-width: 620px) {
  .diag-row { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- Signals panel ---------- */

.signals-note {
  margin: 0 0 14px;
  padding: 10px 13px;
  background: #1c2128;
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.6;
}
.signals-note strong { color: var(--text); }
.sig-warn { color: #d29922 !important; }

/* Matches the chart timeframe toggle so the two rows of buttons read the same. */
.sig-filter { background: transparent; color: var(--muted); border: 1px solid var(--border); }
.sig-filter.active { background: var(--accent-dim); color: var(--accent); border-color: var(--accent); }

.signals-list { display: flex; flex-direction: column; gap: 8px; }

.sig-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: #161b22;
  border-left-width: 3px;
}
.sig-bullish { border-left-color: #3fb950; }
.sig-bearish { border-left-color: #f85149; }
.sig-neutral { border-left-color: #8b949e; }

.sig-item summary {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 13px;
  cursor: pointer;
  list-style: none;
}
.sig-item summary::-webkit-details-marker { display: none; }
.sig-item summary::before {
  content: '▸';
  color: var(--muted);
  font-size: 0.8rem;
  transition: transform 0.15s;
}
.sig-item[open] summary::before { transform: rotate(90deg); }

.sig-name { font-weight: 600; font-size: 0.9rem; }

.sig-bias {
  font-size: 0.7rem;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 600;
}
.sig-bias-bullish { background: #3fb95022; color: #3fb950; }
.sig-bias-bearish { background: #f8514922; color: #f85149; }
.sig-bias-neutral { background: #8b949e22; color: #8b949e; }

.sig-now {
  font-size: 0.66rem;
  padding: 2px 7px;
  border-radius: 10px;
  background: #58a6ff22;
  color: #58a6ff;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sig-stat {
  margin-left: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.76rem;
}

/* Tone is about evidence quality, deliberately NOT about bullish/bearish -
   a green "good" here means the measurement is solid, not that price will rise. */
.sig-tone-good { color: #3fb950; }
.sig-tone-bad { color: #f85149; }
.sig-tone-flat { color: #8b949e; }
.sig-tone-thin { color: #6e7681; }

.sig-body {
  padding: 2px 13px 13px 30px;
  font-size: 0.83rem;
  line-height: 1.6;
  color: var(--muted);
}
.sig-body p { margin: 0 0 8px; }
.sig-body strong { color: var(--text); }

.sig-verdict {
  padding: 8px 11px;
  background: #0d1117;
  border-radius: 5px;
  margin-top: 10px !important;
}

.sig-empty {
  padding: 16px;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

@media (max-width: 560px) {
  .sig-stat { margin-left: 0; width: 100%; }
  .sig-body { padding-left: 16px; }
}

.pivot-note {
  margin: 0 0 10px;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--muted);
}
.pivot-note:empty { display: none; }

.site-footer {
  max-width: 1400px;
  margin: 28px auto 0;
  padding: 18px 24px 28px;
  border-top: 1px solid var(--border);
  font-size: 0.76rem;
  line-height: 1.7;
  color: #6e7681;
}

.session-user {
  font-size: 0.8rem;
  color: var(--muted);
  align-self: center;
  margin-right: 4px;
}

.users-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.users-form input,
.users-form select {
  background: #0d1117;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 7px 10px;
  font-size: 0.85rem;
}
.users-form input { min-width: 190px; }


/* ---------- Forecast panel ---------- */

.forecast-note {
  margin: 0 0 14px;
  padding: 10px 13px;
  background: #1c2128;
  border-radius: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.6;
}
.forecast-note strong { color: var(--text); }

.fc-vol {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 12px 14px;
  background: #161b22;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 12px;
}
/* Deliberately not `.fc-vol > div` — that also matched .fc-gap and turned its
   inline <strong> into a column flex item, breaking the sentence across lines. */
.fc-vol > div:not(.fc-gap) { display: flex; flex-direction: column; gap: 3px; }
.fc-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.fc-val { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.fc-gap {
  flex-basis: 100%;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--muted);
  border-top: 1px solid var(--border);
  padding-top: 9px;
}
.fc-gap strong { color: var(--accent); }

.fc-move {
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #161b22;
  margin-bottom: 8px;
}
.fc-move-head {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 8px;
}
.fc-band {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  padding: 4px 0;
}
.fc-prob {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-dim);
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.fc-band-wide .fc-prob { color: var(--muted); background: #8b949e22; }
.fc-range { font-size: 0.95rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.fc-band-wide .fc-range { font-size: 0.85rem; color: var(--muted); font-weight: 500; }
.fc-pm { font-size: 0.78rem; color: var(--muted); }

.fc-hist {
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #161b22;
  margin-top: 8px;
}
.fc-hist p { margin: 0 0 8px; font-size: 0.83rem; line-height: 1.65; color: var(--muted); }
.fc-hist p:last-child { margin-bottom: 0; }
.fc-hist strong { color: var(--text); }

.fc-caveat {
  margin: 12px 0 0;
  font-size: 0.78rem;
  line-height: 1.6;
  color: #6e7681;
  font-style: italic;
}

/* ---------- Replay ---------- */

.replay-controls {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.replay-transport { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.replay-transport select,
.replay-trade input {
  background: #0d1117;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 5px 8px;
  font-size: 0.8rem;
}
.replay-trade input { width: 84px; }
.replay-clock {
  font-size: 0.82rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}
.replay-scrub { width: 100%; accent-color: var(--accent); }
.replay-trade { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.replay-pnl {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 0.82rem;
  color: var(--muted);
  padding: 9px 12px;
  background: #0d1117;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.replay-pnl strong { color: var(--text); font-variant-numeric: tabular-nums; }
.replay-sessions, .replay-log-table { min-width: 520px; }

#replay-tf {
  background: #0d1117;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  padding: 4px 8px;
  font-size: 0.78rem;
}

.subhead {
  margin: 26px 0 6px;
  font-size: 0.95rem;
  font-weight: 600;
}
.keycode {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.85em;
  letter-spacing: 0.04em;
  background: #0d1117;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 6px;
  user-select: all;
}
.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.82rem;
  cursor: pointer;
  padding: 4px;
  text-decoration: underline;
}
.login-card.hidden { display: none; }

.speed-summary {
  font-size: 0.75rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
#speed-panel td { font-variant-numeric: tabular-nums; }

/* =====================================================================
   Terminal components. Appended last so these win over the older rules
   they replace, without deleting anything the app still depends on.
   ===================================================================== */

/* ---------- Tables ----------
   Dense by default. Sticky headers because these lists get long and a column
   you cannot name is a column you cannot read. Numerics right-aligned so the
   decimal points form a line. */

.table-scroll { overflow-x: auto; overflow-y: visible; }
table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 0; }
th, td { padding: 6px 10px; text-align: right; white-space: nowrap; }
th {
  color: var(--faint);
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 1;
}
td { border-bottom: 1px solid var(--border); color: var(--text); }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.1s; }
tbody tr:hover td { background: var(--panel-2); }
td:first-child, th:first-child { text-align: left; font-weight: 500; }
.empty-row { text-align: center; color: var(--faint); padding: var(--s6) var(--s3); font-size: 12px; }
.empty-row:hover { background: none !important; }

/* ---------- Badges ---------- */

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px; border-radius: var(--r-sm);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--green-dim); color: var(--green);
  border: 1px solid transparent;
}
.badge.simulated { background: var(--warning-dim); color: var(--warning); }

/* ---------- Empty and loading states ----------
   An empty region should look decided rather than broken, so it states what is
   missing and why instead of leaving a hole. */

.empty-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s2); padding: var(--s7) var(--s4); text-align: center;
  color: var(--faint); min-height: 120px;
}
.empty-state .es-title { font-size: 13px; font-weight: 600; color: var(--muted); }
.empty-state .es-body { font-size: 12px; max-width: 420px; line-height: 1.5; }

.skeleton {
  background: linear-gradient(90deg, var(--panel-2) 25%, var(--panel-3) 50%, var(--panel-2) 75%);
  background-size: 200% 100%;
  animation: sk 1.3s ease-in-out infinite;
  border-radius: var(--r-sm);
  height: 12px;
}
@keyframes sk { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

/* ---------- Trade workspace ----------
   Chart left, order entry right. The order panel is a fixed column because a
   ticket that changes width as the chart resizes is unusable. */

/* The tab-visibility rule sets `display: block` on a visible section, which
   silently beat this element's own `display: grid` and collapsed the whole
   two-column workspace into one column. Matching that rule's specificity is
   what keeps the grid. */
.trade-layout,
main > section.trade-layout.tab-visible:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 292px;
  gap: var(--s4);
  align-items: start;
}
.trade-main { display: flex; flex-direction: column; gap: var(--s4); min-width: 0; }
.trade-side { display: flex; flex-direction: column; gap: var(--s4); position: sticky; top: calc(var(--header-h) + 56px); }

/* Symbol header above the chart: the one place price is allowed to be large. */
.sym-head { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3); }
.sym-id { display: flex; flex-direction: column; line-height: 1.2; }
.sym-ticker { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.sym-name { font-size: 11px; color: var(--faint); }
.sym-px { display: flex; align-items: baseline; gap: var(--s2); margin-left: var(--s2); }
.sym-last { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.sym-chg { font-size: 13px; font-weight: 600; }
.sym-meta { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }

/* ---------- Compact metric grid ----------
   For day high / low / open / prev close and friends. A grid of small figures
   rather than a row of cards - cards would triple the height for the same
   eight numbers. */

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
}
.metric {
  background: var(--panel);
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.metric-k { font-size: 9px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; }
.metric-v { font-size: 13px; font-weight: 600; }
.metric-v.na { color: var(--faint); font-weight: 500; }

/* ---------- Order ticket ---------- */

.ticket { padding: 0; overflow: hidden; }
.ticket-side { display: grid; grid-template-columns: 1fr 1fr; }
.ticket-side button {
  border: none; background: var(--panel-2); color: var(--muted);
  padding: 10px; font-size: 12.5px; font-weight: 700; font-family: inherit;
  cursor: pointer; letter-spacing: 0.04em; border-bottom: 2px solid transparent;
}
.ticket-side button:hover { color: var(--text); }
.ticket-side button.active[data-side="buy"] { color: var(--green); background: var(--green-dim); border-bottom-color: var(--green); }
.ticket-side button.active[data-side="sell"] { color: var(--red); background: var(--red-dim); border-bottom-color: var(--red); }

.ticket-body { padding: var(--s3); display: flex; flex-direction: column; gap: var(--s3); }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.field input, .field select { width: 100%; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }

/* Segmented control for order type / product. */
.seg { display: flex; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.seg button {
  flex: 1; background: var(--bg); border: none; color: var(--muted);
  padding: 5px 8px; font-size: 11.5px; font-family: inherit; cursor: pointer; font-weight: 500;
  /* A two-word label used to wrap inside .seg-inline's fixed 24px height, and
     .seg clips its overflow - so "High volume (RVOL)" rendered as "High volume"
     with the "(RVOL)" sliced off. The header these sit in already wraps, so
     letting the button keep its full width costs nothing. */
  white-space: nowrap;
}
.seg button.active { background: var(--panel-3); color: var(--text); font-weight: 600; }
.seg button:disabled { color: var(--faint); cursor: not-allowed; }

/* Fields the engine cannot honour yet are dimmed and captioned rather than
   removed. Showing a live-looking stop-loss box that silently does nothing
   would teach exactly the habit this simulator exists to prevent. */
.field.inert { opacity: 0.55; }
.field.inert input, .field.inert select { pointer-events: none; }
.inert-note {
  font-size: 10px; color: var(--warning); display: flex; align-items: center; gap: 4px;
}

.ticket-summary { border-top: 1px solid var(--border); padding: var(--s3); display: flex; flex-direction: column; gap: 6px; }
.ts-row { display: flex; justify-content: space-between; font-size: 11.5px; }
.ts-row span:first-child { color: var(--faint); }
.ts-row span:last-child { font-variant-numeric: tabular-nums; font-weight: 600; }
.ts-row.total span:last-child { font-size: 13px; }

/* ---------- KPI row (portfolio) ---------- */

.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden; margin-bottom: var(--s4);
}
.kpi { background: var(--panel); padding: var(--s3); display: flex; flex-direction: column; gap: 3px; }
.kpi-k { font-size: 9.5px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; }
.kpi-v { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.kpi-sub { font-size: 11px; color: var(--muted); }

/* ---------- Market overview ---------- */

.index-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s3); }
.index-card {
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--s3);
  display: flex; flex-direction: column; gap: 6px;
}
.index-name { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); text-transform: uppercase; }
.index-px { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.index-chg { font-size: 12px; font-weight: 600; }
.index-hl { display: flex; gap: var(--s3); font-size: 10.5px; color: var(--faint); }

/* ---------- Section splitting inside a panel ---------- */

.sub-head {
  display: flex; align-items: center; gap: var(--s2);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); margin: var(--s4) 0 var(--s2);
}
.sub-head:first-child { margin-top: 0; }
.sub-head .rule { flex: 1; height: 1px; background: var(--border); }

/* ---------- Options chain ----------
   Calls left, strikes centred, puts right - the layout every Indian trading
   screen uses, so it needs no explaining. */

.chain-wrap { overflow-x: auto; }
.chain-side-head { display: grid; grid-template-columns: 1fr auto 1fr; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin-bottom: 4px; }
.chain-side-head .calls { color: var(--green); }
.chain-side-head .puts { color: var(--red); text-align: right; }
.chain-side-head .strike-lbl { color: var(--faint); padding: 0 var(--s4); }
table.chain-table td.strike-col { text-align: center; font-weight: 700; background: var(--panel-2); }
table.chain-table tr.atm td { background: var(--accent-dim); }
table.chain-table tr.atm td.strike-col { color: var(--accent); }
table.chain-table td.itm { background: #ffffff05; }
.oi-bar { display: block; height: 3px; border-radius: 2px; margin-top: 3px; }
.oi-bar.call { background: var(--green); }
.oi-bar.put { background: var(--red); }

/* ---------- Replay workspace ---------- */

.replay-bar {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  background: var(--panel-2); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--s2) var(--s3); margin-bottom: var(--s3);
}
.replay-bar .rb-k { font-size: 9.5px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; }
.replay-bar .rb-v { font-size: 12.5px; font-weight: 600; }
.replay-mode-tag { background: var(--accent-dim); color: var(--accent); border-radius: var(--r-sm); padding: 3px 8px; font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

/* ---------- Utility ---------- */

.up { color: var(--green); }
.down { color: var(--red); }
.muted-cell, .muted { color: var(--faint); }
.hidden { display: none !important; }
.mono { font-family: var(--mono); }
.footer-note {
  font-size: 10.5px; color: var(--faint); text-align: center;
  padding: var(--s3) var(--s4) 0; line-height: 1.5; max-width: 900px; margin: 0 auto;
}

/* ---------- Responsive ----------
   1366 is the floor that has to stay usable: the order ticket narrows before
   it drops below the chart, because losing the two-column workspace is worse
   than a slightly tighter ticket. */

/* These have to match the specificity of the base .trade-layout rule above,
   which was raised to beat the tab-visibility rule. Written at the plain
   selector alone they lose and the layout stops responding. */
@media (max-width: 1500px) {
  .trade-layout,
  main > section.trade-layout.tab-visible:not([hidden]) { grid-template-columns: minmax(0, 1fr) 264px; }
  main { padding-left: var(--s3); padding-right: var(--s3); }
}
@media (max-width: 1100px) {
  .trade-layout,
  main > section.trade-layout.tab-visible:not([hidden]) { grid-template-columns: 1fr; }
  .trade-side { position: static; }
}
@media (max-width: 860px) {
  .topbar { grid-template-columns: 1fr auto; height: auto; padding: var(--s2) var(--s3); gap: var(--s2); row-gap: var(--s2); }
  .global-search { grid-column: 1 / -1; order: 3; max-width: none; }
  .account-summary { gap: var(--s3); }
  .tabs { top: 0; position: static; }
  .stat-sep { display: none; }
}

/* =====================================================================
   Polish pass. Appended last so it wins over earlier rules without
   deleting anything the app still depends on.
   ===================================================================== */

/* ---------- Status badges ----------
   One vocabulary, used everywhere. Blue for simulated rather than amber:
   simulated is a STATE, not a fault, and reserving amber for things that
   actually need attention - a closed market, a stale feed - is what keeps
   amber meaning something. */

.badge {
  padding: 2px 7px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 3px;
  border: 1px solid transparent;
  background: var(--green-dim);
  color: var(--green);
  white-space: nowrap;
}
.badge.simulated { background: var(--accent-dim); color: var(--accent); }
.badge.delayed   { background: var(--warning-dim); color: var(--warning); }
.badge.closed    { background: #8B96A51F; color: var(--muted); }
.badge.error     { background: var(--red-dim); color: var(--red); }

/* ---------- Empty states ----------
   One component, four slots: what is empty, why, and what to do about it.
   Compact by design - an empty region that fills the viewport reads as a
   broken page, which is the problem this is meant to solve. */

.es {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding: var(--s5) var(--s4);
  text-align: center;
}
.es-status {
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--muted); background: #8B96A51F;
  padding: 2px 8px; border-radius: 3px;
}
.es-title { font-size: 13px; font-weight: 600; color: var(--text); }
.es-desc { font-size: 11.5px; color: var(--muted); max-width: 420px; line-height: 1.5; }
.es-actions { display: flex; gap: var(--s2); margin-top: var(--s1); flex-wrap: wrap; justify-content: center; }
/* Inside a table the component has to sit in a cell without inheriting the
   right-alignment every other cell has. */
td .es { padding: var(--s4) var(--s3); }
td:has(.es) { text-align: center; }

/* ---------- Stat strip ----------
   Compact key/value cards for status dashboards. Same grid as .metric-grid
   but allowed to carry a coloured value. */

.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--r-md);
  overflow: hidden;
}
.stat-strip .cell { background: var(--panel); padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.stat-strip .cell-k { font-size: 9.5px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; }
.stat-strip .cell-v { font-size: 15px; font-weight: 700; }
.stat-strip .cell-sub { font-size: 10.5px; color: var(--faint); }

/* ---------- Allocation bar ---------- */

.alloc { display: flex; flex-direction: column; gap: 6px; }
.alloc-bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--border); }
.alloc-cash { background: var(--accent); }
.alloc-inv { background: var(--green); }
.alloc-legend { display: flex; gap: var(--s4); font-size: 11px; color: var(--muted); }
.alloc-legend .dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }

/* ---------- Chart chrome ----------
   Shorter controls so the candles get the height. The indicator rows were
   the biggest single consumer of vertical space above the fold. */

.indicator-bar { gap: 6px !important; margin-bottom: 8px !important; }
.indicator-group { gap: 4px !important; }
.indicator-label {
  font-size: 9px !important; letter-spacing: 0.07em; font-weight: 600;
  color: var(--faint) !important; text-transform: uppercase;
}
.ind-btn {
  padding: 3px 8px !important;
  font-size: 10.5px !important;
  border-radius: var(--r-sm) !important;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--muted);
}
.ind-btn:hover { color: var(--text); border-color: var(--border-strong); }
.ind-btn.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
#chart-panel .panel-header { margin-bottom: 8px; }
.chart-mode-btn { min-width: 34px; }
/* The chart is the point of the page - it gets the room. */
.chart-wrap { border: none !important; }

/* ---------- Options chain ---------- */

.chain-filters {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  padding-bottom: var(--s2); margin-bottom: var(--s2);
  border-bottom: 1px solid var(--border);
}
.chain-filters .fl { font-size: 9.5px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; }
table.chain-table th { font-size: 9px; }
table.chain-table td, table.chain-table th { padding: 4px 7px; }

/* ---------- Replay ---------- */

.replay-transport { gap: 6px !important; }
.replay-scrub { accent-color: var(--accent); }
.replay-clock { font-variant-numeric: tabular-nums; font-weight: 600; }

/* ---------- Density ----------
   Trim vertical padding everywhere without touching the horizontal rhythm.
   This is where the extra rows on a 1080p screen come from. */

.panel { padding: var(--s3) var(--s4); }
.panel h2 { margin-bottom: var(--s2); }
main { gap: var(--s3); }
.pivot-note, .signals-note, .screener-note { font-size: 11.5px; line-height: 1.5; margin: 0 0 var(--s2); }

/* ---------- Footer ---------- */

.site-footer, .footer-note {
  max-width: 960px; margin: var(--s4) auto 0;
  font-size: 10px; line-height: 1.5; color: var(--faint);
  text-align: center; padding: var(--s3) var(--s4) 0;
  border-top: 1px solid var(--border);
}

/* ---------- Skeletons ---------- */

.sk-line { height: 11px; border-radius: 3px; margin: 4px 0; }
.sk-lg { height: 22px; width: 140px; }
.sk-row td { padding: 7px 10px; }

/* A shut market is a state, not a fault: the ticket keeps its structure and
   says so on the action, rather than looking like a panel that failed. */
.ticket-closed .ticket-side button { opacity: 0.5; }
.ticket-closed .ticket-body { opacity: 0.75; }
.ticket-closed .btn-buy, .ticket-closed .btn-sell {
  background: var(--panel-3);
  color: var(--muted);
  letter-spacing: 0.06em;
  font-size: 11px;
}

/* Which side of a pivot price sits on. "near" alone read the same whether a
   level had been broken through or was still ahead - opposite signals. */
.badge.lvl-above { background: var(--green-dim); color: var(--green); }
.badge.lvl-below { background: var(--red-dim); color: var(--red); }
.sk-row td { border-bottom: 1px solid var(--border); }
.sk-row .skeleton { display: block; width: 100%; }

/* ---------- Collapsible sections ---------- */
.collapse-btn {
  background: none; border: none; cursor: pointer; padding: 0 2px;
  color: var(--faint); font-size: 11px; line-height: 1;
  transition: color 0.12s;
}
.collapse-btn:hover { color: var(--text); }
.collapse-btn .chev { display: inline-block; transition: transform 0.15s; }
.collapsible.collapsed .collapse-btn .chev { transform: rotate(-90deg); }
.collapsible.collapsed .panel-body,
.collapsible.collapsed .chain-scroll { display: none; }
.collapsible.collapsed .panel-header { margin-bottom: 0; }

/* ---------- Option chain: ATM window ---------- */
.seg-inline { display: inline-flex; height: 24px; }
.seg-inline button { padding: 0 10px; font-size: 11px; }
.chain-count { font-size: 10.5px; color: var(--faint); }
/* Subtle enough to stay readable - the row still has to be scanned, not just
   spotted. */
tr.atm-row td { background: var(--accent-dim); }
tr.atm-row td.strike-col { color: var(--accent); font-weight: 700; }
.atm-tag {
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--accent); border: 1px solid var(--accent);
  border-radius: 3px; padding: 0 3px; margin-left: 4px; vertical-align: middle;
}
.chain-table td.strike-col { text-align: center; font-weight: 600; background: var(--panel-2); }

/* ---------- Order ticket: live order types ----------
   These fields were dimmed and inert, with a warning saying the engine ignored
   them. They reach the engine now, so they get the same weight as the quantity
   box - a control that looks secondary teaches that its value is optional. */

.ticket-note {
  margin: var(--s2) 0 var(--s3);
  font-size: 11px;
  line-height: 1.5;
  color: var(--muted);
  border-left: 2px solid var(--border-strong);
  padding-left: var(--s2);
}

#order-type { display: flex; }
#order-type button { flex: 1; font-size: 10.5px; padding: 5px 2px; }

#order-price-row .field { min-width: 0; }

/* ---------- Order book ---------- */

.orders-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.orders-table th {
  text-align: left; padding: 6px 8px; font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint);
  border-bottom: 1px solid var(--border);
}
.orders-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.orders-table tr:last-child td { border-bottom: none; }

/* Status carries the colour, because it is the only column whose value changes
   what you would do next. */
.ord-working   { color: var(--accent); font-weight: 600; }
.ord-pending   { color: var(--muted); }
.ord-filled    { color: var(--green); font-weight: 600; }
.ord-cancelled { color: var(--faint); }
.ord-rejected  { color: var(--red); font-weight: 600; cursor: help; }

.ord-leg {
  font-size: 8.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--warning); border: 1px solid var(--warning); border-radius: 3px;
  padding: 0 3px; margin-left: 4px; vertical-align: middle;
}

.badge.neutral { background: #8B96A514; color: var(--faint); }

/* ---------- F&O movers ---------- */

.movers-table { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.movers-table th:nth-child(1), .movers-table td:nth-child(1) { width: 32%; }
.movers-table th:nth-child(2), .movers-table td:nth-child(2) { width: 17%; }
.movers-table th:nth-child(3), .movers-table td:nth-child(3) { width: 16%; }
.movers-table th:nth-child(4), .movers-table td:nth-child(4) { width: 18%; }
.movers-table th:nth-child(5), .movers-table td:nth-child(5) { width: 17%; }
.movers-table th {
  text-align: left; padding: 6px 8px; font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint);
  border-bottom: 1px solid var(--border);
}
.movers-table td {
  padding: 7px 8px; border-bottom: 1px solid var(--border);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.movers-table tr:last-child td { border-bottom: none; }
.movers-table .mover-sym { font-weight: 600; }

/* RVOL is the whole point of the second ranking, so it is the one number on the
   row that changes colour - and only above its own normal, never below. A quiet
   stock is not a warning. */
.rvol { font-variant-numeric: tabular-nums; font-weight: 600; }
.rvol-normal   { color: var(--muted); }
.rvol-elevated { color: var(--accent); }
.rvol-high     { color: var(--warning); }
.rvol-extreme  { color: var(--red); }
/* Not measured. Deliberately a dash in the faintest colour available: an
   unmeasured RVOL must never be mistaken for a low one. */
.rvol-none { color: var(--faint); cursor: help; }

.movers-table tr.mover-strong { background: var(--accent-dim); }
.movers-table tr.mover-strong .mover-sym { color: var(--text); }

#movers-minmove { width: 66px; }

/* A projection that cannot currently be drawn: lit, because the setting is on,
   but dimmed, because nothing is on screen. The button's tooltip says why. */
.ind-btn.ind-stale { opacity: 0.55; border-style: dashed; }

/* ---------- Licence terms ----------
   Monospaced and scrollable: this is a legal document shown verbatim, and
   reflowing it into the app's prose style would invite the reader to skim
   something they are agreeing to. */
.terms-text {
  margin: var(--s3) 0 0;
  padding: var(--s3);
  max-height: 420px;
  overflow: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.6;
  color: var(--muted);
  white-space: pre-wrap;
  word-break: break-word;
}
.site-footer a { color: var(--muted); text-decoration: underline; }
.site-footer a:hover { color: var(--text); }

/* ---------- Licences (admin) ----------
   Denser than a table would be, because each licence carries a variable number
   of activations and each activation carries seven facts that only matter when
   somebody is actually looking. */

.lic-card {
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--s3); margin-bottom: var(--s3); background: var(--panel-2);
}
.lic-card-revoked { opacity: 0.62; border-style: dashed; }
.lic-head { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
.lic-name { font-weight: 600; }
.lic-actions { margin-left: auto; display: flex; gap: var(--s1); }
.lic-meta { margin-top: var(--s2); color: var(--muted); font-size: 11px; }

.lic-tag {
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px; background: #8B96A51F; color: var(--muted);
}
.lic-tag-live { background: var(--green-dim); color: var(--green); }
.lic-tag-revoked { background: var(--red-dim); color: var(--red); }
.lic-tag-released { background: var(--warning-dim); color: var(--warning); }

.lic-act {
  margin-top: var(--s3); padding: var(--s3);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-sm);
}
.lic-act-released { opacity: 0.6; }
.lic-act-empty { color: var(--faint); font-size: 11.5px; }
.lic-act-head { display: flex; gap: var(--s2); align-items: center; margin-bottom: var(--s2); }
.lic-machine { font-weight: 600; font-size: 12px; }
.lic-act-head .btn { margin-left: auto; }

/* Two columns of label/value. The machine id and terms hash are the two things
   somebody would read out to a lawyer, so they get a monospace face. */
.lic-grid {
  display: grid; grid-template-columns: minmax(110px, auto) 1fr;
  gap: 3px var(--s3); margin: 0; font-size: 11.5px;
}
.lic-grid dt { color: var(--faint); }
.lic-grid dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.lic-hash { font-family: var(--mono); font-size: 10.5px; color: var(--muted); }

@media (max-width: 700px) {
  .lic-grid { grid-template-columns: 1fr; gap: 0 0; }
  .lic-grid dt { margin-top: var(--s2); }
}

/* The hosted-tools switch. Small and low-contrast on purpose: it is a rarely
   used preference sitting under the admin lock, not an action. */
.hosted-toggle { display: flex; gap: var(--s2); align-items: flex-start; cursor: pointer; }
.hosted-toggle input { margin-top: 2px; accent-color: var(--accent); flex: none; }
.hosted-toggle span { color: var(--faint); }
.hosted-toggle:hover span { color: var(--muted); }

/* The risk warning above the licence text. Amber, because this is the one
   thing on the Settings tab that warns rather than informs - the same colour
   the market-closed banner uses, so the vocabulary stays consistent. */
.terms-risk {
  margin: var(--s3) 0 0;
  padding: var(--s3);
  background: var(--warning-dim);
  border: 1px solid var(--warning);
  border-left-width: 3px;
  border-radius: var(--r-md);
  font-size: 12px;
  line-height: 1.6;
  color: var(--text);
}
.terms-risk strong { color: var(--warning); }