/* =========================================================================
   Small-Cap Deck — styles
   Color rules (locked):
     neutral = white   (#ffffff)
     bull    = green   (#7fd97f)
     bear    = red     (#ff7878)
   Dark surface, calm, fast to scan at a glance.
   ========================================================================= */

:root {
  --bg: #0c0f14;
  --surface: #131821;
  --surface-2: #1b2230;
  --border: #232b3a;
  --text: #ffffff;
  --text-dim: #8a93a6;
  --bull: #7fd97f;
  --bear: #ff7878;
  --neutral: #ffffff;
  --accent: #5fa8ff;
  --critical: #ff4d4d;
  --high: #ffae3a;
  --medium: #5fa8ff;
  --low: #8a93a6;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 13px;
  line-height: 1.4;
}

/* ---------- top bar ---------- */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 600; font-size: 14px;
}
.brand-name { letter-spacing: 0.4px; }
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bear); transition: background 0.3s;
}
.dot.connected { background: var(--bull); }
.session {
  font-size: 11px; color: var(--text-dim);
  padding: 2px 8px; border: 1px solid var(--border); border-radius: 10px;
}
.meta {
  display: flex; gap: 14px; font-size: 11px; color: var(--text-dim);
  font-family: var(--mono);
}

/* ---------- grid layout ---------- */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-rows: minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  margin-right: 320px;
}
@media (max-width: 1200px) {
  .grid { grid-template-columns: 1fr 1fr; margin-right: 0; }
  .rail { display: none; }
}
@media (max-width: 700px) {
  .grid { grid-template-columns: 1fr; }
}

/* ---------- panels ---------- */
.panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
  display: flex; flex-direction: column; min-height: 280px; overflow: hidden;
}
/* Per-panel min-height sized so each panel's full capacity is visible without scrolling.
   Row height is ~51px, header ~33px. On Deck capped at 10 rows visible; internal scroll for #11-20. */
.panel[data-panel="active_holding"]   { min-height: 390px; }  /* 6 rows */
.panel[data-panel="my_watch"]         { min-height: 590px; }  /* 10 rows */
.panel[data-panel="discord"]          { min-height: 590px; }  /* 10 rows */
.panel[data-panel="on_deck"]          { min-height: 590px; }  /* 10 rows visible, scroll for the rest */
.panel[data-panel="previous_movers"]  { min-height: 490px; }  /* 8 rows */
.panel[data-panel="reverse_splits"]   { min-height: 490px; }  /* directly under previous movers */
.panel[data-panel="alerts"]           { min-height: 490px; }  /* live alerts firehose */
.panel[data-panel="congress_calls"]   { min-height: 490px; }  /* right of reverse splits, under alerts */

/* Explicit grid placement for row 2 / row 3:
   row 2: [On Deck]      [Previous Movers]  [Alerts]
   row 3: [SEC Filings]   [Reverse Splits]   .             */
.panel[data-panel="on_deck"]         { grid-column: 1; grid-row: 2; }
.panel[data-panel="previous_movers"] { grid-column: 2; grid-row: 2; }
.panel[data-panel="alerts"]          { grid-column: 3; grid-row: 2; }
.panel[data-panel="reverse_splits"]  { grid-column: 2; grid-row: 3; }
.panel[data-panel="filings"]         { grid-column: 1; grid-row: 3; min-height: 490px; }
.panel[data-panel="congress_calls"]  { grid-column: 3; grid-row: 3; }
@media (max-width: 1200px) {
  /* let the 2-col layout auto-flow on smaller screens */
  .panel[data-panel="on_deck"],
  .panel[data-panel="previous_movers"],
  .panel[data-panel="alerts"],
  .panel[data-panel="reverse_splits"],
  .panel[data-panel="filings"],
  .panel[data-panel="congress_calls"] { grid-column: auto; grid-row: auto; }
}

/* ---------- Congress Conviction panel ---------- */
.congress-list {
  list-style: none; margin: 0; padding: 4px 0;
  overflow-y: auto; max-height: 440px;
}
.congress-list li.congress-row {
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  display: grid; grid-template-columns: 38px 56px 1fr auto; gap: 8px;
  align-items: center; cursor: pointer;
  font-size: 12px;
  transition: background 0.12s;
}
.congress-list li.congress-row:hover { background: var(--surface-2); }
.congress-list li.congress-row.expanded { background: var(--surface-2); }
.congress-badge {
  font-size: 10px; font-weight: 600; letter-spacing: 0.3px;
  padding: 2px 6px; border-radius: 4px; text-align: center;
  display: inline-block; min-width: 30px;
}
.congress-badge.tag-OPTION  { background: rgba(232,121,169,0.22); color: #e879a9; }
.congress-badge.tag-NEW     { background: rgba(127,217,127,0.18); color: #7fd97f; }
.congress-badge.tag-CLUSTER { background: rgba(255,200,120,0.18); color: #ffc878; }
.congress-sym {
  font-weight: 700; color: var(--text); font-size: 13px;
}
.congress-line2 {
  font-size: 11px; color: var(--text-dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.congress-line2 .member { color: var(--text); }
.congress-line2 .amt    { color: var(--text-dim); margin-left: 6px; }
.congress-verdict {
  font-size: 16px; line-height: 1; text-align: right;
}
.congress-details {
  grid-column: 1 / -1; padding: 8px 12px 4px 56px;
  font-size: 11px; color: var(--text-dim);
  border-top: 1px dashed var(--border); margin-top: 6px;
  white-space: normal;
}
.congress-details .label { color: var(--text); font-weight: 600; }
.congress-details .notes { font-style: italic; opacity: 0.85; margin-top: 4px; }
.congress-details .inst-note { margin-top: 6px; }
.panel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.panel-head h2 {
  margin: 0; font-size: 12px; font-weight: 600;
  letter-spacing: 0.5px; text-transform: uppercase;
  color: var(--text-dim);
}
.cap {
  font-family: var(--mono); font-size: 10px;
  color: var(--text-dim);
  padding: 2px 6px; background: var(--bg); border-radius: 8px;
}
.ticker-list {
  list-style: none; margin: 0; padding: 0; overflow-y: auto;
  flex: 1;
}
.empty {
  display: none;
  padding: 16px 12px; text-align: center;
  color: var(--text-dim); font-size: 11px; font-style: italic;
}
.panel.is-empty .ticker-list { display: none; }
.panel.is-empty .empty { display: block; }

/* ---------- Panel add forms (Discord + Active&Holding) ---------- */
.discord-add, .holding-add, .mywatch-add {
  display: flex; gap: 6px; padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.discord-add input, .holding-add input, .mywatch-add input {
  flex: 1; min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--text);
  text-transform: uppercase;
}
.discord-add input:focus, .holding-add input:focus, .mywatch-add input:focus {
  outline: none;
  border-color: var(--accent);
}
.discord-add button, .holding-add button, .mywatch-add button {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  white-space: nowrap;
}
.discord-add button:hover, .holding-add button:hover, .mywatch-add button:hover {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
/* Holding form: tighter inputs since there are 4 of them */
.holding-add { flex-wrap: wrap; }
.holding-add #holding-add-symbol { flex: 0 0 70px; text-align: center; }
.holding-add #holding-add-entry,
.holding-add #holding-add-stop,
.holding-add #holding-add-qty { flex: 1 1 70px; text-transform: none; }
.holding-add button { flex: 0 0 auto; }

/* ---------- Row add (+) and delete (×) buttons — always visible ---------- */
.row-add, .row-add-held {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 4px;
  font-family: var(--mono);
  font-size: 16px; font-weight: 700; line-height: 1;
  padding: 0;
  background: transparent;
  border: 1px solid var(--bull);
  color: var(--bull);
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.row-add:hover { background: var(--bull); color: var(--bg); }
.row-add-held {
  border: none;
  background: transparent;
  cursor: default;
  font-size: 12px;
}
.row-del-spacer { display: inline-block; width: 20px; height: 20px; }
.row-del {
  background: transparent;
  border: 1px solid var(--bear);
  color: var(--bear);
  cursor: pointer;
  padding: 0;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 16px; font-weight: 700; line-height: 1;
  border-radius: 4px;
  transition: background 0.1s, color 0.1s;
}
.row-del:hover { background: var(--bear); color: var(--bg); }

/* ---------- Dismissed pill ---------- */
#dismissed-pill {
  font-family: var(--mono); font-size: 11px;
  color: var(--text-dim);
  padding: 2px 8px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.1s, background 0.1s;
}
#dismissed-pill:hover {
  color: var(--text);
  background: var(--surface);
}
#dismissed-pill.hidden { display: none; }

/* ---------- ticker rows ---------- */
.ticker-row {
  padding: 8px 8px; border-bottom: 1px solid var(--border);
  display: grid;
  /* [X] [sym] [mid] [score/vol] [+] [➜]   — X left, + and arrow right */
  grid-template-columns: 22px minmax(64px, max-content) 1fr auto 22px 22px;
  gap: 8px; align-items: center;
  cursor: pointer; transition: background 0.1s;
}

.row-pin {
  width: 20px; height: 20px; border-radius: 4px;
  border: 1px solid #e879a9;          /* pink outline (matches user request) */
  background: transparent; color: #e879a9;
  font-size: 13px; line-height: 18px; font-weight: 700;
  cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  transition: background 0.12s, color 0.12s, transform 0.1s;
}
.row-pin:hover { background: #e879a9; color: var(--bg); transform: translateX(2px); }
.row-pin-spacer { display: inline-block; width: 20px; height: 20px; }
.row-pin.is-pinned {
  background: #e879a9; color: var(--bg);
  box-shadow: 0 0 6px rgba(232, 121, 169, 0.5);
}
.ticker-row:hover { background: var(--surface-2); }
.ticker-row:last-child { border-bottom: none; }

.ticker-row.composite-in_motion {
  border-left: 3px solid var(--bull); padding-left: 9px;
}
.ticker-row.composite-live_setup {
  border-left: 3px solid var(--accent); padding-left: 9px;
}
.ticker-row.composite-building {
  border-left: 3px solid var(--text-dim); padding-left: 9px;
}

.sym {
  font-family: var(--mono); font-weight: 600; font-size: 13px;
  letter-spacing: 0.3px;
  display: inline-flex; align-items: center; gap: 4px;
  overflow: visible;
}
.sym .trend-dot { flex-shrink: 0; }

/* Rank chip on top-3 Discord rows — auto-ranked by trend_health */
.rank-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 16px; padding: 0 4px;
  border-radius: 8px;
  font-family: var(--mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.4px;
  flex-shrink: 0;
  border: 1px solid transparent;
}
.rank-chip.rank-1 {
  background: rgba(127, 217, 127, 0.18);
  color: #7fd97f;
  border-color: rgba(127, 217, 127, 0.4);
}
.rank-chip.rank-2 {
  background: rgba(127, 217, 127, 0.10);
  color: #7fd97f;
  border-color: rgba(127, 217, 127, 0.25);
}
.rank-chip.rank-3 {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.18);
}
.row-mid {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
.row-price-line {
  display: flex; gap: 8px; align-items: baseline;
}
.row-price {
  font-family: var(--mono); font-weight: 500;
}
.row-change {
  font-family: var(--mono); font-size: 11px;
}
.row-change.bull { color: var(--bull); }
.row-change.bear { color: var(--bear); }

.row-tags {
  display: flex; gap: 4px; flex-wrap: wrap;
}
.tag {
  font-size: 9px; padding: 1px 5px; border-radius: 3px;
  font-family: var(--mono); letter-spacing: 0.3px;
  background: var(--surface-2); color: var(--text-dim);
  text-transform: uppercase; white-space: nowrap;
}
.tag.bull { background: rgba(127, 217, 127, 0.15); color: var(--bull); }
.tag.bear { background: rgba(255, 120, 120, 0.15); color: var(--bear); }
.tag.warn { background: rgba(255, 174, 58, 0.15); color: var(--high); }
.tag.holding {
  background: rgba(95, 168, 255, 0.2); color: var(--accent);
  font-weight: 600;
}

.row-right {
  text-align: right; display: flex; flex-direction: column; gap: 2px;
}
.row-score {
  font-family: var(--mono); font-weight: 600; font-size: 13px;
}
.row-score.s-high { color: var(--bull); }
.row-score.s-mid { color: var(--neutral); }
.row-score.s-low { color: var(--text-dim); }
.row-sub {
  font-family: var(--mono); font-size: 10px; color: var(--text-dim);
}

/* ---------- reverse splits ---------- */
.rsplit-cols {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
  background: var(--border); flex: 1; min-height: 0;
}
.rsplit-col {
  background: var(--surface); overflow-y: auto;
  display: flex; flex-direction: column;
}
.rsplit-head {
  padding: 6px 10px; font-size: 10px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.4px;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}
.rsplit-list {
  list-style: none; margin: 0; padding: 0;
}
.rsplit-list li {
  padding: 5px 10px; display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 11px;
  border-bottom: 1px solid var(--border);
}
.rsplit-list li:last-child { border-bottom: none; }
.rsplit-list .sym { font-weight: 600; }
.rsplit-list .date { color: var(--text-dim); font-size: 10px; }
.rsplit-list .ratio { color: var(--high); }

/* ---------- Right rail (open trades + monitoring) ---------- */
.rail {
  position: fixed; top: 0; right: 0; bottom: 0; width: 320px;
  background: var(--surface); border-left: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow-y: auto;       /* whole rail scrolls when sections combined are tall */
  overflow-x: hidden;
}
.rail-section {
  display: flex; flex-direction: column;
  border-bottom: 1px solid var(--border);
  min-height: 0;
  flex: 0 0 auto;          /* each section sized by its content; rail scrolls */
}
.rail-section .rail-head {
  position: sticky; top: 0;
  z-index: 2;
}
/* Open Trades section header gets one sticky position; Monitoring gets stacked below.
   Sticky offsets handled by section order — the rail itself is the scroll container. */
.monitoring-section .rail-head { top: 0; }
.pinned-list, .monitoring-list {
  display: flex; flex-direction: column;
}
.rail-head {
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  display: flex; justify-content: space-between; align-items: center;
}
.rail-head h3 {
  margin: 0; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.8px;
  color: #e879a9;   /* pink accent so Monitoring label stands out */
}
/* Bulletproof: monitoring section + header always visible, even when empty */
.monitoring-section { min-height: 120px; background: var(--surface); }
.monitoring-section .rail-head { background: var(--surface-2); border-bottom: 1px solid var(--border); }
.monitoring-section.is-empty .empty { display: block; }
.monitoring-section.is-empty .monitoring-list { display: none; }

/* Trend health dot — 4-input score visualization on card headers */
.trend-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%;
  margin: 0 4px 0 2px; vertical-align: middle;
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  transition: transform 0.1s ease;
}
.trend-dot:hover { transform: scale(1.3); }
.trend-dot-healthy   { background: #7fd97f; box-shadow: 0 0 6px rgba(127,217,127,0.6); }
.trend-dot-neutral   { background: #e8e8e8; }
.trend-dot-unhealthy { background: #ff7878; box-shadow: 0 0 6px rgba(255,120,120,0.6); }
.trend-dot-unknown   { background: #3a4250; }

/* Trend-health popover — opens on dot click */
.th-popover {
  position: fixed; z-index: 10000;
  width: 280px;
  background: #14181f;
  border: 1px solid #2a3140;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6);
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text);
  animation: th-pop-in 120ms ease-out;
}
@keyframes th-pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.th-popover-healthy   { border-left: 3px solid #7fd97f; }
.th-popover-neutral   { border-left: 3px solid #e8e8e8; }
.th-popover-unhealthy { border-left: 3px solid #ff7878; }
.th-popover-unknown   { border-left: 3px solid #3a4250; }

.th-head {
  display: flex; align-items: baseline; gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #2a3140;
  margin-bottom: 8px;
}
.th-head-state { font-weight: 700; font-size: 13px; letter-spacing: 0.3px; }
.th-state-healthy   { color: #7fd97f; }
.th-state-neutral   { color: #e8e8e8; }
.th-state-unhealthy { color: #ff7878; }
.th-state-unknown   { color: var(--text-dim); }
.th-head-score { font-family: var(--font-mono, monospace); font-size: 14px; font-weight: 600; }
.th-head-hint  { color: var(--text-dim); font-size: 11px; margin-left: auto; }

.th-rows { display: flex; flex-direction: column; gap: 4px; }
.th-row {
  display: grid;
  grid-template-columns: 10px 1fr auto auto;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
}
.th-row-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #3a4250;
}
.th-row.th-ok  .th-row-dot { background: #7fd97f; }
.th-row.th-off .th-row-dot { background: #ff7878; }
.th-row.th-neu .th-row-dot { background: #e8e8e8; }
.th-row-lbl { color: var(--text); font-size: 12px; }
.th-row-val { color: var(--text-dim); font-size: 11px; font-style: italic; }
.th-row-score {
  font-family: var(--font-mono, monospace);
  font-size: 12px; font-weight: 600;
  min-width: 22px; text-align: right;
}
.th-row.th-ok  .th-row-score { color: #7fd97f; }
.th-row.th-off .th-row-score { color: #ff7878; }
.th-row.th-neu .th-row-score { color: var(--text-dim); }

.th-foot {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #2a3140;
  color: var(--text-dim);
  font-size: 10.5px;
  line-height: 1.4;
}

/* Sorted vertical price ladder — stacks TPs / entry / stop / named levels around YOU */
.sorted-ladder {
  display: flex; flex-direction: column; gap: 1px;
  margin: 6px 0 4px; padding: 4px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-family: var(--mono); font-size: 10.5px; line-height: 1.5;
}
.sl-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1px 8px;
}
.sl-name { color: var(--text); flex: 1; }
.sl-px   { color: var(--text); font-variant-numeric: tabular-nums; }
/* Above price = red tint */
.sl-above { background: rgba(255,120,120,0.06); }
.sl-above .sl-name, .sl-above .sl-px { color: #ff9999; }
/* Below price = green tint */
.sl-below { background: rgba(127,217,127,0.06); }
.sl-below .sl-name, .sl-below .sl-px { color: #9be39b; }
/* TPs = cyan */
.sl-tp { background: rgba(120,200,230,0.10); }
.sl-tp .sl-name, .sl-tp .sl-px { color: #7ed4ee; font-weight: 600; }
/* Entry = white line */
.sl-entry { background: rgba(255,255,255,0.08); border-top: 1px dashed rgba(255,255,255,0.3); border-bottom: 1px dashed rgba(255,255,255,0.3); }
.sl-entry .sl-name, .sl-entry .sl-px { color: #e8e8e8; font-weight: 700; }
/* Stop = red line */
.sl-stop { background: rgba(255,120,120,0.15); border-top: 1px dashed rgba(255,120,120,0.4); }
.sl-stop .sl-name, .sl-stop .sl-px { color: #ff7878; font-weight: 700; }
/* YOU marker */
.sl-you {
  background: #e879a9;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  margin: 1px 0;
}
.sl-you .sl-name, .sl-you .sl-px {
  color: #0c0f14; font-weight: 700; letter-spacing: 0.3px;
}
.sl-check { color: #7fd97f; font-weight: 700; }
.sl-x     { color: #ff7878; font-weight: 700; }

/* L2 strip on trade cards — BID ×sz | imbalance bar | ×sz ASK | TOB% */
.l2-strip {
  display: flex; align-items: center; gap: 6px;
  margin: 4px 0 2px; padding: 4px 8px;
  font-family: var(--mono); font-size: 10px;
  background: rgba(255,255,255,0.02);
  border-radius: 3px;
}
.l2-side { display: flex; align-items: center; gap: 3px; }
.l2-bid  { color: #7fd97f; }
.l2-ask  { color: #ff7878; }
.l2-lbl  { font-weight: 700; letter-spacing: 0.5px; opacity: 0.8; }
.l2-px   { font-weight: 700; }
.l2-sz   { opacity: 0.7; font-size: 9.5px; }
.l2-bar  { display: flex; flex: 1; height: 4px; min-width: 30px; border-radius: 2px; overflow: hidden; }
.l2-bar-bid { background: #7fd97f; height: 100%; transition: width 0.3s ease; }
.l2-bar-ask { background: #ff7878; height: 100%; transition: width 0.3s ease; }
.l2-tob  { font-size: 9.5px; font-weight: 700; padding: 1px 4px; border-radius: 2px; }
.l2-tob-bid     { color: #7fd97f; background: rgba(127,217,127,0.10); }
.l2-tob-ask     { color: #ff7878; background: rgba(255,120,120,0.10); }
.l2-tob-neutral { color: var(--text-dim); background: rgba(255,255,255,0.04); }

/* WATCH-style verdict pill (monitoring cards, no position) */
.watch-verdict {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 12px;
  font-size: 11px; font-weight: 700;
  border: 1px solid transparent; cursor: help;
}
.watch-verdict .watch-score { font-family: var(--mono); opacity: 0.7; font-size: 10px; }
.watch-buysetup {
  background: rgba(127,217,127,0.14);
  color: #7fd97f;
  border-color: rgba(127,217,127,0.35);
}
.watch-wait {
  background: rgba(255,255,255,0.06);
  color: #d8d8d8;
  border-color: rgba(255,255,255,0.15);
}
.watch-avoid {
  background: rgba(255,120,120,0.14);
  color: #ff7878;
  border-color: rgba(255,120,120,0.35);
}
.rail-count {
  font-family: var(--mono); font-size: 11px; color: var(--text-dim);
  padding: 2px 6px; background: var(--bg); border-radius: 8px;
}
.alerts-list {
  list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1;
}
.alerts-section .empty,
.pinned-section .empty { font-size: 11px; padding: 16px 14px; }

/* ---------- Pinned trade cards ---------- */
.pinned-list {
  overflow-y: auto; flex: 1;
  padding: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.pinned-section.is-empty .pinned-list { display: none; }
.pinned-section:not(.is-empty) .empty { display: none; }
.pinned-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 3px solid var(--text-dim);
  border-radius: 5px;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 6px;
  cursor: pointer;
  transition: background 0.1s;
}
.pinned-card:hover { background: var(--surface-2); }
.pinned-card.trend-up   { border-left-color: var(--bull); }
.pinned-card.trend-down { border-left-color: var(--bear); }
.pinned-card.trend-chop { border-left-color: var(--text-dim); }
.pinned-card.monitoring-card { border-left-color: #e879a9; }
.mon-unpin {
  margin-left: auto;
  width: 22px; height: 22px; border-radius: 4px;
  border: 1px solid #e879a9; background: #e879a9; color: var(--bg);
  font-weight: 700; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.mon-unpin:hover { transform: translateX(2px); }
.mon-open {
  padding: 4px 10px; border-radius: 4px;
  border: 1px solid var(--bull); background: transparent; color: var(--bull);
  font-weight: 700; font-size: 11px; cursor: pointer;
}
.mon-open:hover { background: var(--bull); color: var(--bg); }
.pinned-head {
  display: flex; align-items: baseline; gap: 8px;
}
.pinned-sym {
  font-family: var(--mono); font-weight: 700; font-size: 14px;
}
.pinned-price { font-family: var(--mono); font-size: 12px; }
.pinned-change { font-family: var(--mono); font-size: 11px; margin-left: auto; }
.pinned-x {
  background: transparent; border: 1px solid var(--border);
  color: var(--text-dim); cursor: pointer;
  width: 18px; height: 18px; border-radius: 3px;
  font-size: 13px; font-weight: 700; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
}
.pinned-x:hover { background: var(--bear); color: var(--bg); border-color: var(--bear); }
.pinned-row {
  display: flex; gap: 8px; font-size: 11px; font-family: var(--mono);
}
.pinned-row .lbl { color: var(--text-dim); }
.pinned-trend-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 10px;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
}
.pinned-trend-pill.up   { background: rgba(127, 217, 127, 0.15); color: var(--bull); }
.pinned-trend-pill.down { background: rgba(255, 120, 120, 0.15); color: var(--bear); }
.pinned-trend-pill.chop { background: var(--surface-2); color: var(--text); }
.pinned-coach {
  font-size: 11px; color: var(--text); font-style: italic;
  border-top: 1px solid var(--border); padding-top: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pinned-levels {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 10px; font-family: var(--mono);
  border-top: 1px solid var(--border); padding-top: 5px;
}
.pinned-levels .lvl { display: flex; justify-content: space-between; gap: 6px; }
.pinned-levels .lvl-name { color: var(--text-dim); }
.pinned-levels .lvl-up  { color: var(--bull); }
.pinned-levels .lvl-dn  { color: var(--bear); }
.pinned-rr {
  font-family: var(--mono); font-size: 11px;
}
.pinned-rr.bull { color: var(--bull); }
.pinned-rr.bear { color: var(--bear); }
.alert-row {
  padding: 8px 12px; border-bottom: 1px solid var(--border);
  display: flex; gap: 8px; align-items: flex-start;
  font-size: 11px;
}
.alert-sev {
  width: 4px; align-self: stretch; border-radius: 2px;
  flex-shrink: 0;
}
.alert-sev.critical { background: var(--critical); }
.alert-sev.high { background: var(--high); }
.alert-sev.medium { background: var(--medium); }
.alert-sev.low { background: var(--low); }
.alert-body { flex: 1; min-width: 0; }
.alert-msg { color: var(--text); }
.alert-meta {
  font-family: var(--mono); font-size: 9px; color: var(--text-dim);
  margin-top: 2px; letter-spacing: 0.3px;
}

/* ---------- modal ---------- */
.modal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 100; padding: 20px;
}
.modal.hidden { display: none; }
.modal-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  max-width: 600px; width: 100%; max-height: 80vh; overflow-y: auto;
  position: relative; padding: 20px;
}
.modal-close {
  position: absolute; top: 8px; right: 12px;
  background: none; border: none; color: var(--text-dim);
  font-size: 24px; cursor: pointer; padding: 0; line-height: 1;
}
.modal-close:hover { color: var(--text); }

.modal-sym {
  font-family: var(--mono); font-size: 22px; font-weight: 600;
  margin-bottom: 8px;
}
.modal-row {
  display: grid; grid-template-columns: 130px 1fr;
  padding: 4px 0; font-size: 12px; border-bottom: 1px dotted var(--border);
}
.modal-row:last-child { border-bottom: none; }
.modal-label { color: var(--text-dim); }
.modal-value { font-family: var(--mono); }
.modal-section { margin-top: 16px; }
.modal-section h4 {
  margin: 0 0 6px 0; font-size: 11px; text-transform: uppercase;
  color: var(--text-dim); letter-spacing: 0.5px;
}

.modal-actions {
  display: flex; gap: 8px; margin-top: 14px;
}
.btn {
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  padding: 6px 12px; border-radius: 4px; cursor: pointer;
  font-size: 12px; font-family: inherit;
}
.btn:hover { background: var(--border); }
.btn.bull { background: rgba(127, 217, 127, 0.15); border-color: var(--bull); color: var(--bull); }
.btn.bear { background: rgba(255, 120, 120, 0.15); border-color: var(--bear); color: var(--bear); }

/* ---------- subtle pulse for in_motion rows ---------- */
@keyframes pulse-bull {
  0%, 100% { box-shadow: inset 3px 0 0 var(--bull); }
  50% { box-shadow: inset 3px 0 0 rgba(127, 217, 127, 0.4); }
}
.ticker-row.composite-in_motion {
  animation: pulse-bull 2s ease-in-out infinite;
}

/* ---------- in-trade advisor (open/close form, position block) ---------- */
.position-block {
  border-left: 3px solid var(--accent, #5a9eff);
  padding-left: 10px;
  background: rgba(90, 158, 255, 0.04);
}
.open-trade-form {
  display: flex; flex-direction: column; gap: 8px; width: 100%;
}
.open-trade-row {
  display: flex; gap: 10px; flex-wrap: wrap;
}
.open-trade-row label {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 11px; color: var(--text-dim); text-transform: uppercase;
  letter-spacing: 0.04em;
}
.open-trade-row input {
  background: var(--surface-2); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 6px 8px; font-family: inherit; font-size: 13px;
  width: 90px;
}
.open-trade-row input:focus {
  outline: none; border-color: var(--bull);
}
.modal-value.warn { color: #f0c060; }

/* ---------- Size Calculator modal ---------- */
.calc-card {
  width: 380px; max-width: 100%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 18px 14px;
  position: relative;
  max-height: 90vh; overflow-y: auto;
}
.calc-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
}
.calc-sym { font-family: var(--mono); font-weight: 700; font-size: 18px; }
.calc-price { font-family: var(--mono); font-size: 12px; color: var(--text-dim); }
.calc-section { margin-bottom: 10px; }
.calc-label {
  display: block; font-size: 10px; color: var(--text-dim);
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 5px;
}
.calc-card input[type="number"] {
  width: 100%; box-sizing: border-box;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: 4px;
  padding: 7px 9px; font-family: var(--mono); font-size: 13px;
}
.calc-card input[type="number"]:focus {
  outline: none; border-color: var(--bull);
}
.calc-stops {
  display: flex; flex-direction: column; gap: 5px;
}
.calc-stop-btn {
  text-align: left;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--mono); font-size: 11px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px;
  transition: border 0.1s, background 0.1s;
}
.calc-stop-btn:hover:not(:disabled) {
  border-color: var(--bull);
  background: var(--surface-2);
}
.calc-stop-btn.selected {
  border-color: var(--bull);
  background: rgba(127, 217, 127, 0.06);
  color: var(--bull);
}
.calc-stop-btn:disabled {
  opacity: 0.4; cursor: not-allowed;
}
.calc-stop-btn .stop-name { font-weight: 600; }
.calc-stop-btn .stop-price { font-family: var(--mono); }
.calc-stop-btn .stop-reason { color: var(--text-dim); font-size: 10px; }
.calc-stop-btn.recommended { position: relative; }
.calc-stop-btn.recommended::after {
  content: 'TIGHTEST';
  position: absolute;
  top: -7px; right: 8px;
  background: var(--surface);
  color: var(--bull);
  font-size: 8px; font-weight: 700;
  padding: 1px 5px;
  border-radius: 6px;
  border: 1px solid var(--bull);
  letter-spacing: 0.5px;
}
.calc-stop-basis {
  font-size: 10px; color: var(--text-dim);
  margin-top: 4px; font-family: var(--mono);
}
.calc-risk-row {
  display: flex; align-items: center; gap: 6px;
}
.calc-risk-prefix {
  font-family: var(--mono); color: var(--text-dim); font-size: 13px;
}
.calc-risk-row input { flex: 1; }
.calc-mini-btn {
  background: var(--surface-2); color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 4px;
  font-size: 10px; padding: 6px 8px; cursor: pointer;
  text-transform: uppercase; letter-spacing: 0.5px;
  white-space: nowrap;
}
.calc-mini-btn:hover { background: var(--surface); color: var(--text); }
.calc-result {
  background: var(--bg);
  border: 1px solid var(--border); border-radius: 5px;
  padding: 8px 12px; margin: 12px 0 10px;
}
.calc-result-line {
  display: flex; justify-content: space-between;
  font-size: 12px; font-family: var(--mono);
  padding: 3px 0;
}
.calc-result-line:not(:last-child) {
  border-bottom: 1px dashed var(--border);
}
.calc-result-line span:first-child { color: var(--text-dim); }
.calc-shares-val { font-weight: 700; color: var(--bull); font-size: 14px; }
.calc-err {
  color: var(--bear); font-size: 11px; margin-bottom: 8px;
  min-height: 14px; font-family: var(--mono);
}
.calc-submit {
  width: 100%;
  background: var(--bull); color: var(--bg);
  border: none; border-radius: 5px;
  padding: 10px; font-weight: 700;
  font-size: 13px; text-transform: uppercase;
  letter-spacing: 0.6px; cursor: pointer;
  transition: background 0.1s;
}
.calc-submit:hover { background: #6cd06c; }
.calc-submit:disabled { background: var(--surface-2); color: var(--text-dim); cursor: not-allowed; }

/* ===== SEC Filings panel ===== */
.filings-controls { display: flex; align-items: center; gap: 8px; }
.filings-filter {
  background: var(--surface-2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  font-family: var(--mono);
}
.filings-list {
  list-style: none; padding: 0; margin: 0;
  max-height: 240px; overflow-y: auto;
}
.filings-list li {
  display: grid;
  grid-template-columns: 14px 56px 54px 1fr 44px;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  font-size: 11px;
  transition: background 0.1s;
}
.filings-list li:hover { background: var(--surface-2); }
.filings-list li:last-child { border-bottom: none; }
.filings-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--text-dim);
}
.filings-dot.red    { background: var(--bear); box-shadow: 0 0 4px rgba(255,120,120,0.5); }
.filings-dot.yellow { background: #ffd166; }
.filings-dot.green  { background: var(--bull); }
.filings-dot.neutral { background: var(--text-dim); }
.filings-list .f-sym { font-weight: 700; color: var(--text); }
.filings-list .f-type { color: var(--text-dim); font-family: var(--mono); font-size: 10px; }
.filings-list .f-line { color: var(--text); font-size: 11px; }
.filings-list .f-line.red { color: var(--bear); }
.filings-list .f-line.yellow { color: #ffd166; }
.filings-list .f-line.green { color: var(--bull); }
.filings-list .f-age { color: var(--text-dim); font-size: 10px; text-align: right; font-family: var(--mono); }

/* ===== Filing detail modal ===== */
.filing-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
}
.filing-backdrop[hidden] { display: none; }
.filing-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 18px;
  width: 480px; max-width: 92vw;
  position: relative;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
}
.filing-close {
  position: absolute; top: 8px; right: 8px;
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--border); border-radius: 4px;
  width: 24px; height: 24px;
  font-size: 14px; cursor: pointer; line-height: 1;
}
.filing-close:hover { color: var(--bear); border-color: var(--bear); }
.filing-modal-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.filing-modal-sym { font-size: 18px; font-weight: 800; color: var(--text); }
.filing-modal-type {
  font-family: var(--mono); font-size: 12px;
  color: var(--text-dim);
  background: var(--surface-2);
  border-radius: 4px; padding: 2px 6px;
}
.filing-modal-sev {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: 0.8px; padding: 2px 8px;
  border-radius: 10px;
}
.filing-modal-sev.red    { background: rgba(255,120,120,0.15); color: var(--bear); border: 1px solid var(--bear); }
.filing-modal-sev.yellow { background: rgba(255,209,102,0.15); color: #ffd166;     border: 1px solid #ffd166; }
.filing-modal-sev.green  { background: rgba(127,217,127,0.15); color: var(--bull); border: 1px solid var(--bull); }
.filing-modal-sev.neutral{ background: var(--surface-2); color: var(--text-dim); border: 1px solid var(--border); }
.filing-modal-line {
  font-size: 14px; color: var(--text);
  padding: 10px 12px; background: var(--surface-2);
  border-radius: 6px; margin-bottom: 12px;
  line-height: 1.4;
}
.filing-modal-meta {
  display: flex; gap: 24px;
  font-size: 11px; color: var(--text);
  margin-bottom: 14px;
}
.filing-modal-meta .k { color: var(--text-dim); margin-right: 4px; }
.filing-modal-actions {
  display: flex; flex-direction: column; gap: 8px;
}
.filing-link {
  display: block;
  background: var(--surface-2);
  color: var(--text);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 5px;
  border: 1px solid var(--border);
  font-size: 12px;
  transition: background 0.1s;
}
.filing-link:hover { background: var(--border); border-color: var(--text-dim); }

/* ---------- R-Ladder strip on pinned cards ---------- */
.r-ladder {
  margin: 8px 0 4px;
  padding: 18px 8px 26px;
}
.ladder-track {
  position: relative;
  height: 6px;
  background: var(--surface-2);
  border-radius: 3px;
}
.ladder-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: linear-gradient(90deg, var(--bear) 0%, var(--text-dim) 20%, var(--bull) 100%);
  border-radius: 3px;
  opacity: 0.4;
}
.ladder-entry {
  position: absolute;
  top: -3px; bottom: -3px;
  width: 2px;
  background: var(--text);
  transform: translateX(-1px);
}
.ladder-marker {
  position: absolute;
  top: -6px;
  width: 12px;
  height: 18px;
  transform: translateX(-6px);
  border-radius: 2px;
  border: 2px solid var(--bg);
  z-index: 3;
}
.ladder-marker.bull { background: var(--bull); }
.ladder-marker.bear { background: var(--bear); }
.tick {
  position: absolute;
  top: -16px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}
.tick-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--text-dim);
  margin-top: 14px;
  border: 2px solid var(--bg);
}
.tick-stop .tick-dot { background: var(--bear); }
.tick-hit  .tick-dot { background: var(--bull); }
.tick-pending .tick-dot { background: var(--text-dim); }
.tick-label {
  font-size: 9px;
  color: var(--text-dim);
  margin-top: 2px;
  white-space: nowrap;
}
.tick-stop .tick-label { color: var(--bear); }
.tick-hit  .tick-label { color: var(--bull); }
.tick-px {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--text-dim);
  white-space: nowrap;
}

/* ---------- Confluence Verdict Pill ---------- */
.verdict-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin: 8px 0 6px;
  border-radius: 8px;
  border-left: 3px solid var(--text-dim);
  background: var(--surface-2);
  font-size: 11px;
  cursor: pointer;
  transition: filter 0.12s ease;
}
.verdict-pill:hover { filter: brightness(1.15); }
.verdict-pill.verdict-hold    { border-left-color: var(--bull); background: rgba(127, 217, 127, 0.10); }
.verdict-pill.verdict-trim    { border-left-color: #ffd166;    background: rgba(255, 209, 102, 0.10); }
.verdict-pill.verdict-tighten { border-left-color: #ff9f43;    background: rgba(255, 159, 67, 0.12); }
.verdict-pill.verdict-exit    { border-left-color: var(--bear); background: rgba(255, 120, 120, 0.12); }
.verdict-emoji { font-size: 14px; }
.verdict-label { font-weight: 700; letter-spacing: 0.5px; font-size: 11px; }
.verdict-dots {
  display: flex;
  gap: 8px;
  margin-left: 6px;
  flex: 1;
}
.pill-pillar {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: var(--text-dim);
  font-size: 10px;
}
.pill-dot {
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-dim);
}
.pill-dot.ok  { background: var(--bull); }
.pill-dot.off { background: var(--bear); opacity: 0.65; }
.verdict-why {
  font-size: 10px;
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ---------- Verdict modal ---------- */
.verdict-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}
.verdict-backdrop[hidden] { display: none; }
.verdict-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 22px;
  max-width: 520px;
  width: 100%;
  position: relative;
  box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
.verdict-close {
  position: absolute;
  top: 10px; right: 10px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}
.verdict-close:hover { color: var(--text); }
.verdict-modal-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: 0.3px;
}
.verdict-modal-title.verdict-hold    { color: var(--bull); }
.verdict-modal-title.verdict-trim    { color: #ffd166; }
.verdict-modal-title.verdict-tighten { color: #ff9f43; }
.verdict-modal-title.verdict-exit    { color: var(--bear); }
.verdict-modal-title.verdict-watch-buysetup { color: var(--bull); }
.verdict-modal-title.verdict-watch-wait     { color: #fff; }
.verdict-modal-title.verdict-watch-avoid    { color: var(--bear); }
.verdict-modal-pillars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.verdict-row {
  display: grid;
  grid-template-columns: 14px 130px 1fr 1fr;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}
.verdict-row-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--bear);
  opacity: 0.7;
}
.verdict-row.ok .verdict-row-dot { background: var(--bull); opacity: 1; }
.verdict-row-lbl { color: var(--text-dim); }
.verdict-row-val { font-weight: 600; }
.verdict-row.ok .verdict-row-val { color: var(--bull); }
.verdict-row.off .verdict-row-val { color: var(--bear); }
.verdict-row-det { color: var(--text-dim); font-size: 11px; font-family: var(--mono); }
.verdict-modal-why-head {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
}
.verdict-modal-why {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text);
  min-height: 40px;
}
.verdict-why-text { white-space: pre-wrap; }
.verdict-modal-foot {
  margin-top: 14px;
  font-size: 10px;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
  padding-top: 8px;
}

/* ===== Premarket routine ===== */
/* Topbar toggle button */
.routine-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: rgba(127, 217, 127, 0.06);
  border: 1px solid rgba(127, 217, 127, 0.25);
  border-radius: 999px;
  color: var(--text);
  font-size: 11px;
  font-family: inherit;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.routine-toggle:hover {
  background: rgba(127, 217, 127, 0.12);
  border-color: rgba(127, 217, 127, 0.45);
}
.routine-toggle-icon { font-size: 11px; opacity: 0.7; }
.routine-toggle-lbl { font-weight: 500; }
.routine-toggle-progress {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-dim);
}
.routine-toggle.routine-toggle-progress-pill .routine-toggle-progress {
  background: rgba(255, 209, 102, 0.18);
  color: #ffd166;
}
.routine-toggle.routine-toggle-done {
  background: rgba(127, 217, 127, 0.18);
  border-color: rgba(127, 217, 127, 0.5);
}
.routine-toggle.routine-toggle-done .routine-toggle-progress {
  background: rgba(127, 217, 127, 0.3);
  color: #7fd97f;
}

/* The panel itself */
.routine-panel {
  background: #0f1218;
  border-bottom: 1px solid #2a3140;
  border-top: 1px solid rgba(127, 217, 127, 0.15);
  padding: 10px 16px 12px;
  font-size: 12px;
  animation: routine-slide-in 200ms ease-out;
}
@keyframes routine-slide-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.routine-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.routine-title { display: inline-flex; align-items: center; gap: 8px; }
.routine-emoji { font-size: 16px; }
.routine-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
}
.routine-window {
  font-size: 11px;
  color: var(--text-dim);
  padding: 2px 8px;
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
  font-family: var(--font-mono, monospace);
}
.routine-actions { display: inline-flex; gap: 6px; }
.routine-mini-btn {
  background: rgba(255,255,255,0.04);
  border: 1px solid #2a3140;
  border-radius: 4px;
  color: var(--text-dim);
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.routine-mini-btn:hover { color: var(--text); border-color: #3a4250; }

.routine-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
@media (max-width: 1200px) { .routine-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .routine-steps { grid-template-columns: 1fr; } }

.routine-step {
  background: rgba(255,255,255,0.025);
  border: 1px solid #232932;
  border-radius: 6px;
  padding: 8px 10px;
  transition: background 120ms ease, border-color 120ms ease;
}
.routine-step.checked {
  background: rgba(127, 217, 127, 0.05);
  border-color: rgba(127, 217, 127, 0.3);
}
.routine-step-head {
  display: grid;
  grid-template-columns: auto auto 1fr auto auto;
  gap: 8px;
  align-items: center;
  cursor: pointer;
}
.routine-step-num {
  font-family: var(--font-mono, monospace);
  font-size: 10px;
  color: var(--text-dim);
  width: 14px; text-align: center;
}
.routine-step-check {
  width: 14px; height: 14px;
  border: 1.5px solid #3a4250;
  border-radius: 3px;
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: all 120ms ease;
}
.routine-step-check:hover { border-color: #5a6878; }
.routine-step.checked .routine-step-check {
  background: #7fd97f;
  border-color: #7fd97f;
}
.routine-step.checked .routine-step-check::after {
  content: '\2713';
  position: absolute;
  top: -2px; left: 1px;
  color: #0f1218;
  font-size: 11px;
  font-weight: 700;
}
.routine-step-title {
  color: var(--text);
  font-size: 12px;
  line-height: 1.4;
}
.routine-step.checked .routine-step-title {
  color: var(--text-dim);
  text-decoration: line-through;
  text-decoration-color: rgba(127, 217, 127, 0.5);
}
.routine-step-tool {
  font-size: 10px;
  color: var(--text-dim);
  padding: 1px 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 3px;
  white-space: nowrap;
}
.routine-step-caret {
  font-size: 10px;
  color: var(--text-dim);
  transition: transform 150ms ease;
}
.routine-step.expanded .routine-step-caret { transform: rotate(180deg); }

.routine-step-why {
  display: none;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #2a3140;
  font-size: 11px;
  line-height: 1.5;
  color: var(--text-dim);
}
.routine-step.expanded .routine-step-why { display: block; }
.routine-step-why-lbl {
  display: inline-block;
  font-weight: 600;
  color: #ffd166;
  margin-right: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 10px;
}
.routine-step-why-text { color: var(--text); }

.routine-foot {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #232932;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--text-dim);
}
.routine-foot-progress {
  font-family: var(--font-mono, monospace);
  font-weight: 600;
  color: var(--text);
}

/* ---------- Verdict modal: Open trade CTA (only shown for BUY-SETUP) ---------- */
.verdict-open-trade {
  display: block;
  width: 100%;
  margin: 14px 0 6px;
  padding: 10px 14px;
  background: rgba(127, 217, 127, 0.15);
  color: #7fd97f;
  border: 1px solid rgba(127, 217, 127, 0.45);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  text-align: center;
  transition: background 0.12s, transform 0.08s, border-color 0.12s;
}
.verdict-open-trade:hover {
  background: rgba(127, 217, 127, 0.24);
  border-color: rgba(127, 217, 127, 0.7);
}
.verdict-open-trade:active { transform: scale(0.99); }
.verdict-open-trade[hidden] { display: none; }

/* ---------- Size calc: rationale banner (when pre-filled from verdict) ---------- */
.calc-rationale {
  margin: 10px 0 14px;
  padding: 10px 12px;
  background: rgba(127, 217, 127, 0.08);
  border: 1px solid rgba(127, 217, 127, 0.3);
  border-radius: 6px;
}
.calc-rationale[hidden] { display: none; }
.calc-rationale-head {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.calc-rationale-head .verdict-watch-buysetup {
  color: #7fd97f;
  font-weight: 700;
}
.calc-rationale-body {
  font-size: 12px;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 4px;
}
.calc-rationale-foot {
  font-size: 10px;
  color: var(--text-dim);
  font-style: italic;
}

/* ============================================================
   Theme heat strip + Sympathy panel
   ============================================================ */

/* Global color classes — green up / red down / white flat */
.pct-up   { color: #7fd97f; }
.pct-down { color: #ff7878; }
.pct-flat { color: #ffffff; }

/* Heat strip container */
.theme-strip {
  margin: 8px 16px 12px 16px;
  padding: 10px 12px;
  background: #1a1d24;
  border: 1px solid #2a2f3a;
  border-radius: 8px;
}
.theme-strip-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.theme-strip-title {
  font-weight: 600;
  font-size: 13px;
  color: #fff;
}
.theme-strip-sub {
  font-size: 11px;
  color: #8a92a6;
  flex: 1;
}
.theme-mini-btn {
  background: #252a35;
  color: #cbd2e0;
  border: 1px solid #353b48;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.theme-mini-btn:hover:not(:disabled) {
  background: #2e3441;
  color: #fff;
}
.theme-mini-btn:disabled { opacity: 0.6; cursor: wait; }

/* Heat tile row — horizontal scroll on narrow screens */
.theme-strip-row {
  display: grid;
  /* auto-fit + minmax lets the strip wrap onto 2-3 rows depending on viewport
     so all 23 themes are always visible. */
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 6px;
  row-gap: 6px;
}
.theme-tile {
  background: #20242c;
  border: 1px solid #2a2f3a;
  border-radius: 6px;
  padding: 8px 10px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
  min-width: 0;
}
.theme-tile:hover {
  border-color: #e879a9;
  transform: translateY(-1px);
}
.theme-tile.theme-empty {
  text-align: center;
  color: #8a92a6;
  cursor: default;
}
.theme-tile-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}
.theme-icon { font-size: 14px; }
.theme-label {
  font-size: 11px;
  color: #cbd2e0;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.theme-tile-pct {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 4px;
}
.theme-tile-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  gap: 4px;
}
.theme-tm {
  display: flex;
  gap: 4px;
  align-items: center;
}
.theme-tm-sym {
  font-weight: 600;
  color: #cbd2e0;
  font-size: 10px;
}
.theme-tm-pct { font-size: 10px; font-weight: 600; }
.theme-tm-empty { font-size: 10px; color: #6a7184; font-style: italic; }
.theme-counts { font-size: 10px; color: #8a92a6; }

/* Sympathy panel */
.sympathy-panel {
  margin: 0 336px 12px 16px; /* 320px rail + 16px gutter */
  background: #1a1d24;
  border: 1px solid #2a2f3a;
  border-radius: 8px;
}
@media (max-width: 1200px) {
  .sympathy-panel { margin: 0 16px 12px 16px; } /* rail hidden at this width */
}
.sympathy-panel .panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid #2a2f3a;
  flex-wrap: wrap;
}
.sympathy-panel .panel-head h2 {
  font-size: 13px;
  margin: 0;
  color: #fff;
  font-weight: 600;
}
.sym-anchor {
  font-size: 12px;
  color: #cbd2e0;
  font-weight: 400;
}
.sym-anchor-sym {
  font-weight: 700;
  color: #e879a9;
}
.sym-themes {
  display: flex;
  gap: 6px;
  flex: 1;
  flex-wrap: wrap;
}
.sym-theme-chip {
  background: #252a35;
  color: #cbd2e0;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
}
.sympathy-body { padding: 8px 12px; }
.sympathy-empty {
  color: #8a92a6;
  font-size: 12px;
  text-align: center;
  padding: 16px;
}
.sympathy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.sympathy-table th {
  text-align: left;
  color: #8a92a6;
  font-weight: 500;
  font-size: 10px;
  text-transform: uppercase;
  padding: 4px 6px;
  border-bottom: 1px solid #2a2f3a;
}
.sympathy-table td {
  padding: 6px;
  border-bottom: 1px solid #20242c;
}
.sympathy-table tr:hover { background: #20242c; }
.sym-rank { color: #8a92a6; font-size: 10px; width: 18px; }
.sym-row-sym { font-weight: 700; color: #fff; font-size: 12px; }
.sym-row-pct { font-weight: 600; }
.sym-row-px { color: #cbd2e0; font-size: 11px; }
.sym-trend-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 4px;
}
.sym-trend-score {
  font-size: 11px;
  color: #cbd2e0;
  font-weight: 600;
}
.sym-row-theme {
  display: inline-block;
  background: #252a35;
  color: #8a92a6;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 9px;
  margin-right: 3px;
  text-transform: capitalize;
}
.sym-track-btn {
  background: #1f3a1f;
  color: #7fd97f;
  border: 1px solid #2e5a2e;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  font-family: inherit;
}
.sym-track-btn:hover:not(:disabled) {
  background: #2a4d2a;
  border-color: #7fd97f;
}
.sym-track-btn:disabled { opacity: 0.7; cursor: default; }
.sym-track-btn.sym-tracked {
  background: #1f3a1f;
  color: #cbd2e0;
  border-color: #2e5a2e;
  cursor: default;
}

/* ============================================================ */
/* All-day Pre-Open Watch System                                 */
/* Sympathy panel split 50/50 with Igniting strip on the right   */
/* ============================================================ */

.sympathy-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}
.sympathy-split > .sympathy-body {
  border-right: 1px solid #2a2e36;
}
.igniting-strip {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  min-height: 80px;
}
.igniting-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid #2a2e36;
}
.igniting-title {
  font-size: 13px;
  font-weight: 600;
  color: #e879a9;
  letter-spacing: 0.02em;
}
.igniting-session {
  font-size: 11px;
  color: #8a8f99;
}
.igniting-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.igniting-row {
  display: grid;
  grid-template-columns: 14px auto auto 1fr auto;
  align-items: center;
  gap: 8px;
  padding: 6px 4px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}
.igniting-row:hover { background: #1d2027; }
.igniting-row .ig-arrow {
  color: #7fd97f;
  font-size: 11px;
  width: 12px;
}
.igniting-row .ig-arrow.down { color: #ff7878; }
.igniting-row .ig-sym {
  font-weight: 700;
  color: #fff;
  font-size: 13px;
}
.igniting-row .ig-pct {
  font-weight: 700;
  font-size: 13px;
  min-width: 55px;
  text-align: right;
}
.igniting-row .ig-pct.pos { color: #7fd97f; }
.igniting-row .ig-pct.neg { color: #ff7878; }
.igniting-row .ig-vol {
  font-size: 11px;
  color: #8a8f99;
  white-space: nowrap;
}
.igniting-row .ig-accel {
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  text-align: left;
  padding-left: 4px;
}
.igniting-row .ig-accel.pos  { color: #7fd97f; }
.igniting-row .ig-accel.neg  { color: #ff7878; }
.igniting-row .ig-accel.flat { color: #8a8f99; }
.igniting-row .ig-rvol {
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
  margin-left: 3px;
}
.igniting-row .ig-rvol.hot  { background: #3a1f3a; color: #e879a9; }
.igniting-row .ig-rvol.warm { background: #3a321f; color: #ddc678; }
.igniting-row .ig-rvol.cold { background: #2a2e36; color: #8a8f99; }
.igniting-empty {
  font-size: 12px;
  color: #6a6f78;
  padding: 12px 4px;
  font-style: italic;
  text-align: center;
}

/* ----- My Watch rebuilt ----- */
.my-watch-panel { display: flex; flex-direction: column; }
.my-watch-session {
  font-size: 11px;
  color: #8a8f99;
  font-weight: 400;
  margin-left: 6px;
}
.my-watch-pinned, .my-watch-list {
  list-style: none;
  margin: 0;
  padding: 0 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.my-watch-pinned:empty { display: none; }
.my-watch-pinned { border-bottom: 1px dashed #3a3f48; padding-bottom: 4px; margin-bottom: 4px; }

.mw-row {
  display: grid;
  grid-template-columns: 14px 1fr auto 18px 18px;
  align-items: center;
  gap: 6px;
  padding: 5px 4px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid transparent;
}
.mw-row:hover { background: #1d2027; }
.mw-row.expanded { background: #1d2027; border-color: #3a3f48; }
.mw-row .mw-arrow {
  font-size: 11px;
  color: #7fd97f;
  text-align: center;
}
.mw-row .mw-arrow.down { color: #ff7878; }
.mw-main {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  overflow: hidden;
}
.mw-line1 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
}
.mw-sym {
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  letter-spacing: 0.01em;
}
.mw-pct {
  font-weight: 700;
  font-size: 14px;
}
.mw-pct.pos { color: #7fd97f; }
.mw-pct.neg { color: #ff7878; }
.mw-from-peak {
  font-size: 11px;
  color: #8a8f99;
  font-weight: 400;
}
.mw-reason {
  font-size: 11px;
  color: #b0b5be;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mw-vol { font-size: 11px; color: #8a8f99; white-space: nowrap; }
.mw-stage {
  font-size: 10px;
  color: #8a8f99;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1px 5px;
  border-radius: 3px;
  background: #2a2e36;
}
.mw-stage.watching { background: #1f3a1f; color: #7fd97f; }
.mw-stage.on_deck  { background: #3a321f; color: #ddc678; }
.mw-stage.phoenix  { background: #3a1f3a; color: #e879a9; }
.mw-btn {
  width: 18px; height: 18px;
  border: 1px solid #3a3f48;
  background: #1d2027;
  color: #b0b5be;
  font-size: 12px;
  line-height: 1;
  border-radius: 3px;
  cursor: pointer;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.mw-btn:hover { background: #2a2e36; color: #fff; }
.mw-btn.pin.active { background: #e879a9; border-color: #e879a9; color: #fff; }
.mw-detail {
  grid-column: 1 / -1;
  padding: 8px 6px 4px 24px;
  font-size: 11px;
  color: #b0b5be;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px dashed #3a3f48;
  margin-top: 4px;
}
.mw-detail-row { display: flex; gap: 12px; flex-wrap: wrap; }
.mw-detail-row span strong { color: #d8dbe0; }

/* Dead Today (collapsed by default) */
.dead-today {
  margin-top: 6px;
  border-top: 1px dashed #3a3f48;
  padding: 6px 0 0 0;
}
.dead-today-toggle {
  width: 100%;
  background: transparent;
  border: none;
  color: #8a8f99;
  font-size: 11px;
  padding: 4px 8px;
  cursor: pointer;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dead-today-toggle:hover { color: #d8dbe0; }
.dead-today-label { font-weight: 600; }
.dead-today-count {
  background: #2a2e36;
  color: #b0b5be;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
}
.dead-today-chev { margin-left: auto; transition: transform 0.15s; }
.dead-today.open .dead-today-chev { transform: rotate(90deg); }
.dead-today-list {
  list-style: none;
  margin: 4px 0 0 0;
  padding: 0 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.dead-today-list[hidden] { display: none; }
.dead-today-row {
  display: grid;
  grid-template-columns: 18px 1fr auto auto;
  align-items: center;
  gap: 6px;
  padding: 4px 4px;
  font-size: 11px;
  color: #8a8f99;
  border-radius: 3px;
}
.dead-today-row:hover { background: #1d2027; color: #b0b5be; }
.dead-today-row .dt-icon { font-size: 13px; }
.dead-today-row .dt-sym { font-weight: 700; color: #b0b5be; font-size: 12px; }
.dead-today-row .dt-peak { color: #6a6f78; font-size: 11px; }
.dead-today-row .dt-pct { color: #ff7878; font-weight: 700; font-size: 12px; }

/* ===================================================================
 * Top 5 right rail (cross-panel composite ranker) — 2026-06-20
 * Fixed 320px column on the right, mirrors the .grid margin-right reserve.
 * =================================================================== */
.top5-rail {
  position: fixed;
  top: 64px;                  /* below the topbar */
  right: 0;
  bottom: 0;
  width: 320px;
  background: var(--surface);
  border-left: 1px solid var(--border);
  padding: 12px 14px 16px 14px;
  overflow-y: auto;
  z-index: 50;
  display: flex;
  flex-direction: column;
}
@media (max-width: 1200px) {
  .top5-rail { display: none; }
}

.top5-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.top5-head h2 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.top5-sub {
  font-size: 10px;
  color: var(--text-dim);
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.top5-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}
.top5-list:empty + .top5-empty { display: block; }
.top5-list:not(:empty) + .top5-empty { display: none; }

.top5-empty {
  display: none;
  font-size: 11px;
  color: var(--text-dim);
  text-align: center;
  padding: 20px 8px;
  font-style: italic;
}

.top5-tile {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 120ms ease, transform 120ms ease;
  position: relative;
}
.top5-tile:hover {
  border-color: var(--accent, #e879a9);
  transform: translateX(-2px);
}
.top5-tile.rank-1 { border-left: 3px solid #ffd84d; }
.top5-tile.rank-2 { border-left: 3px solid #c0c0c0; }
.top5-tile.rank-3 { border-left: 3px solid #cd7f32; }
.top5-tile.rank-4,
.top5-tile.rank-5 { border-left: 3px solid var(--border); }

.top5-tile-row1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 4px;
}
.top5-rank {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  font-weight: 700;
  min-width: 18px;
}
.top5-sym {
  font-weight: 700;
  font-size: 14px;
  color: var(--text);
  flex: 1;
}
.top5-pct {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
}
.top5-pct.bull { color: #7fd97f; }
.top5-pct.bear { color: #ff7878; }
.top5-pct.neutral { color: #ffffff; }

.top5-tile-row2 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  color: var(--text-dim);
  font-family: var(--mono);
}
.top5-stage {
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 9px;
}
.top5-stage.watching  { background: rgba(127,217,127,0.18); color: #7fd97f; }
.top5-stage.igniting  { background: rgba(232,121,169,0.18); color: #e879a9; }
.top5-stage.phoenix   { background: rgba(255,184,77,0.20); color: #ffb84d; }
.top5-stage.on_deck   { background: rgba(255,255,255,0.08); color: #ffffff; }
.top5-stage.raw       { background: rgba(255,255,255,0.04); color: #888888; }

.top5-rvol, .top5-hits {
  font-size: 10px;
}
.top5-score {
  margin-left: auto;
  font-size: 10px;
  color: var(--text-dim);
  opacity: 0.7;
}

.top5-formula {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
  font-size: 9px;
  color: var(--text-dim);
  font-family: var(--mono);
  text-align: center;
  letter-spacing: 0.3px;
}

/* Phoenix re-fire glow on Previous Movers + Top 5 */
.ticker-row.phoenix-fired,
.top5-tile.phoenix-fired {
  border-color: #ffb84d;
  box-shadow: 0 0 0 1px rgba(255, 184, 77, 0.4), 0 0 12px rgba(255, 184, 77, 0.25);
  animation: phoenix-pulse 2.5s ease-in-out infinite;
}
@keyframes phoenix-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255, 184, 77, 0.4), 0 0 12px rgba(255, 184, 77, 0.25); }
  50%      { box-shadow: 0 0 0 1px rgba(255, 184, 77, 0.7), 0 0 20px rgba(255, 184, 77, 0.5); }
}
.phoenix-badge {
  display: inline-block;
  background: rgba(255, 184, 77, 0.2);
  color: #ffb84d;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 6px;
  font-family: var(--mono);
}

.prev-mover-sub {
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 400;
  font-family: var(--mono);
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}