/* widgets.css: charts, popovers, panel-specific helpers — split out of rally.css. */
/* ------------------------------------------------------------
   Traffic-light signal dots (screener)
   ------------------------------------------------------------ */
.sig-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--text-4);
  box-shadow: 0 0 0 1px var(--line);
}
.sig-dot.up   { background: var(--pos); box-shadow: 0 0 6px oklch(0.7 0.18 var(--hue-pos) / 0.7); }
.sig-dot.down { background: var(--neg); box-shadow: 0 0 6px oklch(0.6 0.2 var(--hue-neg) / 0.7); }
.sig-dot.flat { background: oklch(0.55 0.04 70); box-shadow: 0 0 4px oklch(0.55 0.04 70 / 0.5); }

.tps-hot  { color: var(--pos) !important; font-weight: 600; text-shadow: 0 0 6px oklch(0.7 0.18 var(--hue-pos) / 0.6); }
.rvol-hot { color: oklch(0.8 0.15 70) !important; font-weight: 600; }

/* ------------------------------------------------------------
   Depth ladder (horizontal — bids left / asks right)
   ------------------------------------------------------------ */
.depth-h-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  height: 18px;
  font-family: var(--font-mono);
  font-size: 10px;
}
.depth-h-cell {
  position: relative;
  display: grid;
  align-items: center;
  height: 100%;
  padding: 0 6px;
  overflow: hidden;
}
.depth-h-cell.bid { grid-template-columns: 1fr auto; text-align: left; }
.depth-h-cell.ask { grid-template-columns: auto 1fr; text-align: right; }
.depth-h-cell .bar { position: absolute; top: 1px; bottom: 1px; border-radius: 2px; z-index: 0; transition: width 0.2s ease-out; }
.depth-h-cell.bid .bar { right: 0; background: oklch(0.4 0.10 var(--hue-pos) / 0.28); }
.depth-h-cell.ask .bar { left:  0; background: oklch(0.4 0.12 var(--hue-neg) / 0.24); }
.depth-h-cell .px, .depth-h-cell .sz { position: relative; z-index: 1; }
.depth-h-cell.bid .px { color: var(--pos); font-weight: 500; text-align: right; padding-right: 2px; }
.depth-h-cell.bid .sz { color: var(--text-3); text-align: left; }
.depth-h-cell.ask .px { color: var(--neg); font-weight: 500; text-align: left; padding-left: 2px; }
.depth-h-cell.ask .sz { color: var(--text-3); text-align: right; }
/* Large-size highlight (>= 5000 shares at this level, threshold in
 * screener.js renderD4 BIG constant). Brighter bar + size text in the
 * side accent color (green for bids, red for asks) + bold weight so
 * institutional-sized orders stand out at a glance across 15 levels. */
.depth-h-cell.bid.big .bar { background: oklch(0.55 0.18 var(--hue-pos) / 0.55); }
.depth-h-cell.ask.big .bar { background: oklch(0.55 0.20 var(--hue-neg) / 0.50); }
.depth-h-cell.bid.big .sz { color: var(--pos); font-weight: 700; }
.depth-h-cell.ask.big .sz { color: var(--neg); font-weight: 700; }
.depth-h-cell.big .px { font-weight: 700; }
.depth-h-mid {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: oklch(0.12 var(--bg-chroma) var(--bg-hue) / 0.5);
}
.depth-h-mid .px { color: var(--text-1); font-weight: 600; text-align: center; }

/* ------------------------------------------------------------
   Chart drawing toolbar (vertical, left side of chart)
   ------------------------------------------------------------ */
.ch-sb {
  position: absolute;
  left: 6px; top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
}
.ch-sb button {
  width: 24px; height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: oklch(0.14 var(--bg-chroma) var(--bg-hue) / 0.7);
  border: 1px solid var(--line);
  color: var(--text-2);
  border-radius: 4px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
}
.ch-sb button:hover { color: var(--text-1); }
.ch-sb button.on   { color: var(--info); border-color: oklch(0.55 0.14 var(--hue-info) / 0.55); background: var(--info-bg); }

/* ------------------------------------------------------------
   Section helpers
   ------------------------------------------------------------ */
.section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.section-label::before, .section-label::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.field .flbl {
  font-size: 9px;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ------------------------------------------------------------
   Loading overlay
   ------------------------------------------------------------ */
#loading {
  position: fixed;
  inset: 0;
  background: var(--bg-0);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.3em;
}
#loading > span { animation: lp 1.4s ease-in-out infinite; }
@keyframes lp { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ------------------------------------------------------------
   Hidden-panels restore strip
   ------------------------------------------------------------ */
.hidden-strip {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 6px 12px;
  border-bottom: 1px solid var(--line);
  background: oklch(0.14 var(--bg-chroma) var(--bg-hue) / 0.6);
}
.hidden-strip .label {
  font-size: 9px;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hidden-strip .chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 10px;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text-2);
  cursor: pointer;
}
.hidden-strip .chip:hover { color: var(--text-1); border-color: var(--line-strong); }
.hidden-strip .chip .plus { color: var(--text-4); }

/* ------------------------------------------------------------
   Columns picker popover
   ------------------------------------------------------------ */
.col-popover {
  position: absolute;
  right: 0; top: 28px;
  z-index: 50;
  background: var(--bg-1);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  padding: 8px;
  min-width: 140px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.col-popover[hidden] { display: none; }
.col-popover .title {
  font-size: 9px;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.col-popover label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--text-2);
  padding: 2px 0;
  cursor: pointer;
}
.col-popover label.disabled { opacity: 0.5; cursor: not-allowed; }

/* ------------------------------------------------------------
   Indicators dropdown (chart)
   ------------------------------------------------------------ */
.cind-dd {
  position: fixed;
  background: oklch(0.12 var(--bg-chroma) var(--bg-hue) / 0.98);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: 11px;
  white-space: nowrap;
  min-width: 200px;
  max-height: 360px;
  overflow: auto;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(12px);
}
.cind-dd[hidden] { display: none; }
.cind-dd .hdr {
  padding: 4px 12px 2px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-4);
  font-weight: 700;
}
.cind-dd .itm {
  cursor: pointer;
  color: var(--text-3);
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 5px 12px;
  user-select: none;
}
.cind-dd .itm:hover { background: oklch(1 0 0 / 0.04); color: var(--text-1); }
.cind-dd .itm.on { color: var(--text-1); }
.cind-dd .itm.on .lbl { font-weight: 600; }
.cind-dd .box {
  width: 13px; height: 13px;
  border: 1px solid var(--line-strong);
  background: transparent;
  border-radius: 2px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cind-dd .itm.on .box::after {
  content: "";
  width: 8px; height: 4px;
  border: 1.6px solid var(--bg-0);
  border-top: 0; border-right: 0;
  transform: rotate(-45deg) translate(1px, -1px);
}
.cind-dd .div { height: 1px; background: var(--line); margin: 6px 0; }
.cind-dd .actions { display: flex; gap: 6px; padding: 2px 8px 4px; }
.cind-dd .actions button {
  flex: 1; font-size: 10px; padding: 5px 8px;
  background: transparent; border: 1px solid var(--line);
  color: var(--text-3); border-radius: 4px; cursor: pointer;
  font-family: inherit; font-weight: 600; letter-spacing: 0.03em;
  transition: all 0.12s;
}
.cind-dd .actions button:hover { color: var(--text-1); border-color: var(--line-strong); }

/* ------------------------------------------------------------
   Price-range filter block
   ------------------------------------------------------------ */
.price-filter {
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: oklch(0.14 var(--bg-chroma) var(--bg-hue) / 0.5);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.price-filter .head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.price-filter .head .lbl {
  font-size: 9px;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.price-filter .head .val {
  font-size: 10px;
  color: var(--text-1);
  font-family: var(--font-mono);
}
.price-filter .head .val .dash { color: var(--text-4); }
.price-filter .row {
  display: flex;
  gap: 4px;
  align-items: center;
}
.price-filter .input { width: 52px; height: 22px; font-size: 10px; padding: 0 6px; }
.price-filter .segmented { flex: 1; height: 22px; }
.price-filter .segmented button { flex: 1; font-size: 9px; padding: 0 6px; }

/* ------------------------------------------------------------
   Signal legend row (under gainers price-filter)
   ------------------------------------------------------------ */
.active-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  min-height: 20px;
}
.active-row .lbl {
  font-size: 9px;
  color: var(--text-4);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.active-row .pill { font-size: 9px; height: 18px; padding: 0 6px; }

/* ------------------------------------------------------------
   News list
   ------------------------------------------------------------ */
.news-item {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 8px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  font-size: 11px;
  align-items: baseline;
}
.news-item:hover { background: oklch(0.22 var(--bg-chroma) var(--bg-hue) / 0.6); }
.news-item .time { color: var(--text-4); font-family: var(--font-mono); font-size: 10px; }
.news-item .hdl  { color: var(--text-1); line-height: 1.35; overflow-wrap: anywhere; }
.news-item .hdl.pos { color: var(--pos); }
.news-item .hdl.neg { color: var(--neg); }
#scr-news-body .nx .h.pos { color: var(--pos); }
#scr-news-body .nx .h.neg { color: var(--neg); }

/* ------------------------------------------------------------
   Small utilities
   ------------------------------------------------------------ */
.row  { display: flex; align-items: center; }
.stack{ display: flex; flex-direction: column; }
.g-2 { gap: 8px; } .g-3 { gap: 12px; } .g-4 { gap: 16px; }

/* Stream pane resizable grid. Splitter rows/cols (6px) replace the old gap;
   sizes are CSS vars persisted to localStorage by the drag handlers in app.js. */
.grid-stream {
  display: grid;
  grid-template-columns: var(--str-cl, 1fr) 6px var(--str-cr, 1fr);
  grid-template-rows:
    var(--str-chart, 2fr) 6px
    var(--str-data1, 1fr) 6px
    var(--str-data2, 1fr) 6px
    var(--str-log, 140px);
  gap: 0;
  height: 100%;
  padding: 8px;
  min-height: 0;
}
.grid-stream > .panel { min-height: 0; overflow: hidden; }
.grid-stream .panel.chart { grid-column: 1 / -1; grid-row: 1; overflow: hidden; }
.grid-stream .panel.chart canvas { flex: 1; width: 100%; display: block; min-height: 0; }
.grid-stream .p-d3 { grid-column: 1; grid-row: 3; }
.grid-stream .p-d1 { grid-column: 3; grid-row: 3; }
.grid-stream .p-d2 { grid-column: 1; grid-row: 5; }
.grid-stream .p-d4 { grid-column: 3; grid-row: 5; }
.grid-stream .panel.log { grid-column: 1 / -1; grid-row: 7; min-height: 0; }
.grid-stream .panel.log .panel-body { min-height: 0; flex: 1; overflow: auto; }
.grid-stream .str-row-split[data-r=chart] { grid-column: 1 / -1; grid-row: 2; }
.grid-stream .str-row-split[data-r=data1] { grid-column: 1 / -1; grid-row: 4; }
.grid-stream .str-row-split[data-r=data2] { grid-column: 1 / -1; grid-row: 6; }
.grid-stream .str-col-split[data-c=top] { grid-column: 2; grid-row: 3; }
.grid-stream .str-col-split[data-c=bot] { grid-column: 2; grid-row: 5; }

.str-col-split { cursor: col-resize; background: oklch(0.22 0.015 250 / 0.35); transition: background .12s; position: relative; }
.str-col-split::after { content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:2px; height:30px; background:var(--text-4); border-radius:1px; opacity:.6; }
.str-col-split:hover, .str-col-split.dragging { background: oklch(0.55 0.12 var(--hue-info) / 0.55); }
.str-row-split { cursor: row-resize; background: oklch(0.22 0.015 250 / 0.35); transition: background .12s; position: relative; }
.str-row-split::after { content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:30px; height:2px; background:var(--text-4); border-radius:1px; opacity:.6; }
.str-row-split:hover, .str-row-split.dragging { background: oklch(0.55 0.12 var(--hue-info) / 0.55); }

.log-body > div { padding: 2px 6px; font-size: 10px; font-family: var(--font-mono); }
.log-body .l { color: var(--text-4); }
.log-body .e { color: var(--neg); }

/* Status pill for connection */
.st {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 10px;
  white-space: nowrap;
  background: oklch(0.18 var(--bg-chroma) var(--bg-hue) / 0.8);
  text-transform: capitalize;
}
.st::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.st.ok   { color: var(--pos); border-color: oklch(0.55 0.12 var(--hue-pos) / 0.5); }
.st.ok::before   { background: var(--pos); box-shadow: 0 0 8px var(--pos); }
.st.warn { color: var(--warn); border-color: oklch(0.55 0.12 85 / 0.5); }
.st.warn::before { background: var(--warn); }
.st.bad  { color: var(--neg); border-color: oklch(0.55 0.14 var(--hue-neg) / 0.5); }
.st.bad::before  { background: var(--neg); }

/* semantic row tints in simple tables */
table .buy  { color: var(--pos); }
table .sell { color: var(--neg); }
table .neu  { color: var(--text-3); }

/* News heat badges (used in gainers) */
.nb { font-size: 9px; padding: 1px 4px; border-radius: 3px; margin-left: 4px; letter-spacing: 0.04em; }
.nb.h { background: oklch(0.30 0.12 var(--hue-neg) / 0.35); color: var(--neg); }
.nb.w { background: oklch(0.30 0.10 70 / 0.35); color: var(--warn); }
.nb.c { background: oklch(0.30 0.10 var(--hue-info) / 0.35); color: var(--info); }
/* News heat toggle chips inside a sound-rule condition (reuse .nb h/w/c colors) */
.snd-news-cats { display: flex; gap: 4px; align-items: center; flex: 1; flex-wrap: wrap; }
.snd-news-cat { margin-left: 0; height: 24px; padding: 0 9px; display: inline-flex; align-items: center; border: 1px solid transparent; border-radius: var(--r-sm); font-size: 10px; line-height: 1; letter-spacing: 0.04em; font-weight: 600; cursor: pointer; transition: opacity .12s, filter .12s, box-shadow .12s; }
/* off = greyed out so it's unmistakable the level is ignored; on = full colour + ring */
.snd-news-cat.off { opacity: .4; filter: grayscale(1); }
.snd-news-cat.on { box-shadow: inset 0 0 0 1.5px currentColor; }
.snd-news-cat:hover { opacity: 1; filter: none; }

/* AI investor-interest badges — prefixed to news headlines, sized to match .nb */
.ai-badge { font-size: 9px; padding: 1px 5px; border-radius: 3px; margin-right: 6px;
  font-weight: 600; letter-spacing: 0.04em; white-space: nowrap; vertical-align: baseline; }
.ai-badge.hi { background: oklch(0.55 0.20 var(--hue-pos)); color: #fff;
  box-shadow: 0 0 6px oklch(0.65 0.22 var(--hue-pos) / 0.35); }
.ai-badge.md { background: oklch(0.30 0.10 70 / 0.55); color: var(--warn); }
.ai-badge.lo { background: oklch(0.28 0.04 260 / 0.50); color: var(--text-3); }
.ai-badge.pending { background: oklch(0.24 0.02 var(--bg-hue) / 0.7); color: var(--text-3);
  letter-spacing: 0.12em; animation: aiPulse 1.2s infinite ease-in-out; }
@keyframes aiPulse { 0%,100%{opacity:0.45} 50%{opacity:1} }

/* ============================================================
   D3 TRADES — row color coding (bullish / bearish)
   ============================================================ */
table.t3 tr.buy  td { color: var(--pos); background: oklch(0.5 0.14 var(--hue-pos) / 0.06); }
table.t3 tr.sell td { color: var(--neg); background: oklch(0.5 0.16 var(--hue-neg) / 0.06); }
table.t3 tr.neu  td { color: var(--text-3); }

/* D4 order book — strong highlight on large (>=10k) resting orders, both sides */
table.t4 tr.big.buy  td { background: oklch(0.5 0.20 var(--hue-pos) / 0.28); font-weight: 600; color: var(--pos); box-shadow: inset 3px 0 0 var(--pos); }
table.t4 tr.big.sell td { background: oklch(0.5 0.22 var(--hue-neg) / 0.28); font-weight: 600; color: var(--neg); box-shadow: inset 3px 0 0 var(--neg); }

/* ============================================================
   BIG-TRADES aggression slider — appears when B (bigTrades) is on
   ============================================================ */
.bubble-thresh {
  display: inline-flex; align-items: center; gap: 6px;
  height: 22px; padding: 0 8px;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); font-family: var(--font-mono);
}
.bubble-thresh-lbl { font-size: 9px; letter-spacing: 0.08em; color: var(--text-4); font-weight: 600; }
.bubble-thresh-val { font-size: 10px; color: var(--text-1); font-weight: 600; min-width: 32px; text-align: right; }
.bubble-thresh-slider {
  -webkit-appearance: none; appearance: none;
  width: 80px; height: 3px; background: oklch(0.3 0.01 240);
  border-radius: 2px; outline: none; cursor: pointer;
}
.bubble-thresh-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 10px; height: 10px; border-radius: 50%;
  background: oklch(0.72 0.14 var(--hue-info));
  border: 1px solid oklch(0.85 0.14 var(--hue-info));
  cursor: pointer; box-shadow: 0 0 4px oklch(0.72 0.14 var(--hue-info) / 0.6);
}
.bubble-thresh-slider::-moz-range-thumb {
  width: 10px; height: 10px; border-radius: 50%;
  background: oklch(0.72 0.14 var(--hue-info));
  border: 1px solid oklch(0.85 0.14 var(--hue-info)); cursor: pointer;
}

/* ============================================================
   SIGNALS — right-side drawer + alert toasts + bell badge
   ============================================================ */
.sig-backdrop { position: fixed; inset: 0; z-index: 80; background: oklch(0.06 0.01 250 / 0.38); backdrop-filter: blur(2px); }
.sig-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 380px; z-index: 90;
  background: var(--bg-1); border-left: 1px solid var(--line);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 200ms cubic-bezier(.2,.7,.2,1);
  box-shadow: -20px 0 40px oklch(0.04 0.01 250 / 0.6);
}
.sig-drawer.open { transform: translateX(0); }
.sig-drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--bg-0);
}
.sig-drawer-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-1); font-weight: 600; }
.sig-tabs { display: flex; border-bottom: 1px solid var(--line); background: var(--bg-0); }
.sig-tab {
  flex: 1; height: 34px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-3); background: transparent; border: none; border-bottom: 2px solid transparent;
  cursor: pointer; transition: color 120ms, border-color 120ms, background 120ms;
}
.sig-tab:hover { color: var(--text-1); background: oklch(0.2 var(--bg-chroma) var(--bg-hue) / 0.4); }
.sig-tab.on {
  color: var(--text-1); border-bottom-color: oklch(0.6 0.14 var(--hue-info));
  background: linear-gradient(180deg, transparent, oklch(0.3 0.08 var(--hue-info) / 0.1));
}
.sig-tab-count {
  font-family: var(--font-mono); font-size: 9.5px;
  padding: 1px 5px; border-radius: 999px;
  background: oklch(0.22 var(--bg-chroma) var(--bg-hue) / 0.6);
  border: 1px solid var(--line); color: var(--text-4);
}
.sig-tab.on .sig-tab-count { color: var(--info); border-color: oklch(0.55 0.12 var(--hue-info) / 0.5); background: var(--info-bg); }

.sig-list-wrap, .sig-feed-wrap, .sig-edit { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.sig-list-actions { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.sig-list-actions .btn { width: 100%; justify-content: center; height: 30px; font-size: 11px; }
.sig-list { list-style: none; padding: 4px 0; overflow: auto; flex: 1; }
.sig-empty { padding: 24px 12px; text-align: center; color: var(--text-4); font-size: 11px; }
.sig-row {
  display: grid; grid-template-columns: 24px 1fr auto;
  gap: 8px; align-items: center; padding: 9px 12px;
  border-bottom: 1px solid oklch(0.2 var(--bg-chroma) var(--bg-hue) / 0.3);
  cursor: pointer; transition: background 120ms;
}
.sig-row:hover { background: oklch(0.2 var(--bg-chroma) var(--bg-hue) / 0.4); }
.sig-row.off { opacity: 0.52; }
.sig-row-body { min-width: 0; }
.sig-row-title { display: flex; align-items: center; gap: 6px; color: var(--text-1); font-size: 12px; font-weight: 500; }
.sig-dir { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.sig-dir.up   { background: var(--pos); box-shadow: 0 0 6px oklch(0.7 0.18 var(--hue-pos) / 0.6); }
.sig-dir.down { background: var(--neg); box-shadow: 0 0 6px oklch(0.6 0.2 var(--hue-neg) / 0.6); }
.sig-dir.both { background: oklch(0.7 0.12 var(--hue-info)); }
.sig-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sig-row-meta {
  font-family: var(--font-mono); font-size: 9.5px; color: var(--text-4);
  margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sig-row-right { display: flex; align-items: center; gap: 6px; }
.sig-count { font-size: 10px; color: var(--text-3); min-width: 22px; text-align: right; font-family: var(--font-mono); }

.sig-edit-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 8px; border-bottom: 1px solid var(--line); background: var(--bg-0);
}
.sig-form { overflow: auto; padding: 12px; flex: 1; }
.sig-section { margin-bottom: 18px; }
.sig-section-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-4); font-weight: 600; margin-bottom: 8px; }
.sig-section-body { display: flex; flex-direction: column; gap: 8px; }
.sig-fr { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 10px; }
.sig-fr-label { font-size: 11px; color: var(--text-3); }
.sig-fr-ctl { min-width: 0; }
.sig-fr-ctl .input { width: 100%; font-size: 11px; height: 24px; }
.sig-range { display: flex; align-items: center; gap: 6px; }
.sig-range .input { flex: 1; min-width: 0; }
.sig-range-sep, .sig-unit { font-size: 10px; color: var(--text-4); }
.sig-unit { font-family: var(--font-mono); }
.sig-chip {
  height: var(--ctrl); padding: 0 10px;
  background: oklch(0.2 var(--bg-chroma) var(--bg-hue) / 0.6);
  border: 1px solid var(--line); border-radius: var(--r-sm);
  font-size: 11px; color: var(--text-2); cursor: pointer;
  transition: all 120ms; letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 5px;
}
.sig-chip:hover { border-color: var(--line-strong); color: var(--text-1); background: var(--bg-2); }
.sig-chip.on { background: linear-gradient(180deg, var(--info-bg), transparent); border-color: oklch(0.55 0.12 var(--hue-info) / 0.6); color: var(--info); }
.sig-chip-count {
  font-family: var(--font-mono); font-size: 9px;
  padding: 1px 5px; border-radius: 999px;
  background: oklch(0.14 var(--bg-chroma) var(--bg-hue) / 0.8); color: var(--text-4);
  border: 1px solid oklch(0.25 var(--bg-chroma) var(--bg-hue) / 0.5);
  min-width: 14px; text-align: center; line-height: 1;
}
.sig-chip.on .sig-chip-count { color: var(--info); background: oklch(0.14 var(--bg-chroma) var(--bg-hue)); }

.sig-switch {
  width: 28px; height: 16px; border-radius: 999px;
  background: oklch(0.24 0.005 var(--bg-hue)); border: 1px solid var(--line);
  padding: 0; position: relative; cursor: pointer;
  transition: background 140ms, border-color 140ms, box-shadow 140ms;
  flex-shrink: 0;
}
.sig-switch:hover { border-color: var(--line-strong); }
.sig-switch.on { background: oklch(0.3 0.08 var(--hue-info) / 0.7); border-color: oklch(0.55 0.12 var(--hue-info) / 0.6); box-shadow: var(--glow-info); }
.sig-switch-dot {
  position: absolute; top: 1px; left: 1px;
  width: 12px; height: 12px; background: var(--text-3);
  border-radius: 50%; transition: transform 140ms, background 140ms;
}
.sig-switch.on .sig-switch-dot { transform: translateX(12px); background: var(--info); box-shadow: 0 0 6px oklch(0.65 0.15 var(--hue-info) / 0.7); }
.sig-switch.sm { width: 22px; height: 14px; }
.sig-switch.sm .sig-switch-dot { width: 10px; height: 10px; }
.sig-switch.sm.on .sig-switch-dot { transform: translateX(8px); }

.sig-feed-filters {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
  max-height: 130px; overflow-y: auto;
}
.sig-feed-filters .sig-chip { height: 22px; padding: 0 8px; font-size: 10px; }
.sig-feed-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; gap: 6px; }
.sig-feed-empty-title { font-size: 12px; color: var(--text-2); letter-spacing: 0.08em; text-transform: uppercase; }
.sig-feed-empty-sub { font-size: 11px; color: var(--text-4); text-align: center; }
.sig-feed-list { flex: 1; overflow-y: auto; font-family: var(--font-mono); }
.sig-feed-row {
  width: 100%; display: grid;
  grid-template-columns: 34px 60px 56px 58px 44px 1fr;
  align-items: center; gap: 6px; padding: 7px 12px;
  background: transparent; border: none;
  border-bottom: 1px solid oklch(0.2 var(--bg-chroma) var(--bg-hue) / 0.3);
  color: var(--text-2); font-size: 11px; text-align: left; cursor: pointer;
  transition: background 120ms;
}
.sig-feed-row:hover { background: oklch(0.23 var(--bg-chroma) var(--bg-hue) / 0.5); color: var(--text-1); }
.sig-feed-time { color: var(--text-4); font-size: 10px; }
.sig-feed-sym { color: var(--text-1); font-weight: 600; font-family: var(--font-sans); letter-spacing: 0.02em; }
.sig-feed-pct { font-weight: 600; text-align: right; }
.sig-feed-price { color: var(--text-2); text-align: right; }
.sig-feed-vol { color: var(--text-4); text-align: right; font-size: 10px; }
.sig-feed-rule {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--font-sans); font-size: 10px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-left: 4px;
}
.sig-feed-foot { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-top: 1px solid var(--line); background: var(--bg-0); }
.sig-feed-foot-note { font-family: var(--font-mono); font-size: 10px; color: var(--text-4); }

.sig-alert-stack {
  position: fixed; right: 16px; bottom: 60px; z-index: 70;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none; max-width: 320px;
}
.sig-alert {
  pointer-events: auto; position: relative;
  background: linear-gradient(180deg, var(--bg-1), var(--bg-0));
  border: 1px solid var(--line-strong); border-radius: var(--r);
  padding: 12px 12px 12px 18px;
  display: grid; grid-template-columns: 1fr auto; gap: 10px;
  animation: sigSlideIn 260ms cubic-bezier(.2,.7,.2,1); overflow: hidden;
}
/* Stack container has pointer-events: none so it doesn't block the chart; each
   interactive child (individual alert + the dismiss-all wrapper) must re-enable it. */
.sig-alert-clear { pointer-events: auto; display: flex; justify-content: flex-end; }
@keyframes sigSlideIn { from { opacity: 0; transform: translateX(16px) scale(0.96); } to { opacity: 1; transform: translateX(0) scale(1); } }
.sig-alert.up   { border-color: oklch(0.55 0.12 var(--hue-pos) / 0.7); box-shadow: 0 0 0 1px oklch(0.55 0.12 var(--hue-pos) / 0.25), 0 12px 32px oklch(0.04 0.01 250 / 0.55), 0 0 28px oklch(0.55 0.18 var(--hue-pos) / 0.18); }
.sig-alert.down { border-color: oklch(0.55 0.14 var(--hue-neg) / 0.7); box-shadow: 0 0 0 1px oklch(0.55 0.14 var(--hue-neg) / 0.25), 0 12px 32px oklch(0.04 0.01 250 / 0.55), 0 0 28px oklch(0.55 0.2 var(--hue-neg) / 0.18); }
.sig-alert-accent { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: var(--r) 0 0 var(--r); }
.sig-alert.up   .sig-alert-accent { background: linear-gradient(180deg, oklch(0.82 0.16 var(--hue-pos)), var(--pos)); box-shadow: 0 0 16px oklch(0.75 0.18 var(--hue-pos) / 0.8); }
.sig-alert.down .sig-alert-accent { background: linear-gradient(180deg, oklch(0.78 0.2 var(--hue-neg)), var(--neg)); box-shadow: 0 0 16px oklch(0.65 0.22 var(--hue-neg) / 0.8); }
.sig-alert-body { min-width: 0; position: relative; z-index: 1; }
.sig-alert-row1 { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.sig-alert-sig { font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.14em; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sig-alert.up   .sig-alert-sig { color: var(--pos); }
.sig-alert.down .sig-alert-sig { color: var(--neg); }
.sig-alert-time { font-size: 9px; color: var(--text-3); font-family: var(--font-mono); letter-spacing: 0.05em; }
.sig-alert-row2 { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; gap: 8px; }
.sig-alert-sym { font-size: 18px; font-weight: 700; color: var(--text-1); letter-spacing: 0.03em; }
.sig-alert-pct { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.sig-alert-row3 { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--text-3); }
.sig-alert-actions { display: flex; flex-direction: column; gap: 4px; align-items: stretch; justify-content: center; position: relative; z-index: 1; }
.sig-alert-actions .btn.sm { height: 26px; padding: 0 12px; font-size: 11px; font-weight: 600; }
.sig-alert-actions .btn.icon.sm { width: 24px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }

/* Bell badge on the topbar bell */
.topbar-bell-wrap { position: relative; display: inline-flex; }
.topbar-bell-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 13px; height: 13px; padding: 0 3px;
  border-radius: 7px;
  background: oklch(0.58 0.22 var(--hue-neg));
  color: #fff; font-size: 8.5px; font-weight: 700; font-family: var(--font-mono);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 6px oklch(0.58 0.22 var(--hue-neg) / 0.7);
  border: 1px solid var(--bg-0); pointer-events: none;
}

/* ============================================================
   LIGHT THEME — paper surfaces, deeper blue, softer market colors
   ============================================================ */
[data-theme="light"] {
  --hue-info: 235;
  --bg-0: oklch(0.955 0.008 75);
  --bg-1: oklch(1 0 0);
  --bg-2: oklch(0.94 0.008 75);
  --bg-3: oklch(0.88 0.01 75);
  --surf: oklch(1 0 0);
  --surf-hi: oklch(0.97 0.006 75);
  --line: oklch(0.45 0.01 75 / 0.18);
  --line-strong: oklch(0.35 0.012 75 / 0.3);
  --text-1: oklch(0.22 0.01 70);
  --text-2: oklch(0.38 0.012 70);
  --text-3: oklch(0.52 0.012 70);
  --text-4: oklch(0.64 0.01 70);
  --pos: oklch(0.5 0.14 155);
  --pos-dim: oklch(0.68 0.08 155);
  --pos-bg: oklch(0.88 0.08 155 / 0.45);
  --neg: oklch(0.5 0.19 25);
  --neg-dim: oklch(0.7 0.1 25);
  --neg-bg: oklch(0.88 0.08 25 / 0.45);
  --info: oklch(0.46 0.17 235);
  --info-dim: oklch(0.7 0.08 235);
  --info-bg: oklch(0.9 0.05 235 / 0.55);
  --warn: oklch(0.58 0.15 70);
}
[data-theme="light"] body { background: var(--bg-0); }
[data-theme="light"] .panel { background: oklch(1 0 0); border-color: oklch(0.4 0.015 75 / 0.14); box-shadow: 0 1px 2px oklch(0.2 0.02 75 / 0.06), 0 4px 12px -2px oklch(0.2 0.02 75 / 0.08); }
[data-theme="light"] .panel-head { background: oklch(0.985 0.005 75 / 0.6); border-bottom-color: oklch(0.4 0.015 75 / 0.1); }
[data-theme="light"] .topbar, [data-theme="light"] .footer, [data-theme="light"] .ticker-bar { background: oklch(0.97 0.006 75); border-color: oklch(0.4 0.015 75 / 0.15); }
[data-theme="light"] .nav { background: var(--bg-1); border-color: var(--line); }
[data-theme="light"] .nav button.on { color: #fff; background: linear-gradient(180deg, oklch(0.55 0.16 235), oklch(0.45 0.17 235)); box-shadow: inset 0 0 0 1px oklch(0.35 0.16 235 / 0.7), 0 2px 8px oklch(0.5 0.14 235 / 0.3); }
[data-theme="light"] .user-wrap { background: oklch(0.98 0.005 70); border-color: var(--line); }
[data-theme="light"] .btn { background: oklch(0.98 0.004 70); border-color: var(--line); color: var(--text-2); }
[data-theme="light"] .btn:hover { background: oklch(0.94 0.008 70); border-color: var(--line-strong); color: var(--text-1); }
[data-theme="light"] .btn.ghost { background: transparent; }
[data-theme="light"] .btn.ghost:hover { background: oklch(0.94 0.008 70 / 0.7); }
[data-theme="light"] .input, [data-theme="light"] .select { background: oklch(1 0 0); border-color: var(--line); color: var(--text-1); }
[data-theme="light"] .pill { background: oklch(0.98 0.005 70); border-color: var(--line); color: var(--text-2); }
[data-theme="light"] .kbd { background: oklch(0.97 0.006 70); border-color: var(--line); }
[data-theme="light"] table.data th { background: oklch(0.96 0.008 70); border-bottom-color: var(--line-strong); color: var(--text-3); }
[data-theme="light"] table.data td { border-bottom-color: oklch(0.9 0.006 70 / 0.5); }
[data-theme="light"] table.data tr:hover td { background: oklch(0.94 0.008 70 / 0.7); }
[data-theme="light"] .segmented { background: oklch(0.96 0.006 70); border-color: var(--line); }
[data-theme="light"] .segmented button.on { color: var(--text-1); background: oklch(1 0 0); box-shadow: inset 0 0 0 1px var(--line-strong); }
[data-theme="light"] .sig-drawer { background: var(--bg-0); box-shadow: -20px 0 40px oklch(0.3 0.02 70 / 0.15); }
[data-theme="light"] .sig-drawer-head, [data-theme="light"] .sig-tabs, [data-theme="light"] .sig-feed-foot, [data-theme="light"] .sig-edit-head { background: oklch(0.96 0.008 70); }
[data-theme="light"] .sig-tab:hover { background: oklch(0.92 0.008 70); }
[data-theme="light"] .sig-tab.on { background: linear-gradient(180deg, transparent, oklch(0.9 0.06 235 / 0.35)); border-bottom-color: oklch(0.5 0.14 235); }
[data-theme="light"] .sig-backdrop { background: oklch(0.3 0.02 70 / 0.25); }
[data-theme="light"] .sig-row, [data-theme="light"] .sig-feed-row { border-bottom-color: oklch(0.9 0.006 70 / 0.6); }
[data-theme="light"] .sig-row:hover, [data-theme="light"] .sig-feed-row:hover { background: oklch(0.94 0.008 70); }
[data-theme="light"] .sig-alert { background: linear-gradient(180deg, oklch(1 0 0), var(--bg-1)); }
/* Chart floating controls — transparent so the panel bg shows through in light mode */
[data-theme="light"] .ch-sb button { background: oklch(1 0 0 / 0.9); border-color: var(--line); color: var(--text-1); box-shadow: 0 1px 2px oklch(0.2 0.02 75 / 0.08); }
[data-theme="light"] .ch-sb button:hover { background: oklch(0.96 0.008 70); }
[data-theme="light"] .ch-sb button.on { background: var(--info-bg); color: var(--info); }
[data-theme="light"] .chart-loading { background: oklch(1 0 0 / 0.9); color: var(--text-2); border-color: var(--line); }
[data-theme="light"] .chart-zoom button { background: oklch(1 0 0 / 0.9); border-color: var(--line); color: var(--text-1); box-shadow: 0 1px 2px oklch(0.2 0.02 75 / 0.08); }
[data-theme="light"] .chart-zoom button:hover { background: oklch(0.96 0.008 70); }
[data-theme="light"] .nx-head { background: oklch(0.96 0.008 70); color: var(--text-3); }
[data-theme="light"] .st { background: oklch(0.98 0.005 70); }
[data-theme="light"] .search-pill, [data-theme="light"] .st, [data-theme="light"] .kbd { background: oklch(0.98 0.005 70); }
[data-theme="light"] .hidden-strip { background: oklch(0.96 0.008 70); color: var(--text-3); }
[data-theme="light"] .depth-h-mid { background: oklch(0.96 0.008 70 / 0.8); }
[data-theme="light"] .cind-dd { background: oklch(1 0 0); box-shadow: 0 8px 24px oklch(0.2 0.02 75 / 0.15); }
[data-theme="light"] .price-filter { background: oklch(0.96 0.008 70); }
[data-theme="light"] .sig-chip-count { background: oklch(0.95 0.006 70); color: var(--text-3); border-color: var(--line); }
[data-theme="light"] .sig-tab-count { background: oklch(0.94 0.008 70); color: var(--text-2); border-color: var(--line); }
[data-theme="light"] .sig-tab.on .sig-tab-count { background: oklch(1 0 0); color: var(--info); border-color: oklch(0.55 0.12 235 / 0.4); }
[data-theme="light"] .sig-chip { background: oklch(0.96 0.008 70); color: var(--text-2); border-color: var(--line); }
[data-theme="light"] .sig-chip:hover { background: oklch(0.92 0.01 70); color: var(--text-1); }
[data-theme="light"] .sig-chip.on { background: var(--info-bg); color: var(--info); border-color: oklch(0.55 0.12 var(--hue-info) / 0.5); }
[data-theme="light"] .sig-chip.on .sig-chip-count { background: oklch(1 0 0); color: var(--info); border-color: oklch(0.55 0.12 var(--hue-info) / 0.4); }
[data-theme="light"] .sig-switch:not(.on) { background: oklch(0.88 0.008 70); border-color: var(--line); }
[data-theme="light"] .sig-switch:not(.on) .sig-switch-dot { background: oklch(0.55 0.01 70); }
[data-theme="light"] .sig-switch.on { background: oklch(0.68 0.15 235); border-color: oklch(0.55 0.16 235 / 0.7); box-shadow: 0 0 0 1px oklch(0.55 0.16 235 / 0.25); }
[data-theme="light"] .sig-switch.on .sig-switch-dot { background: #fff; box-shadow: 0 1px 2px oklch(0.3 0.05 235 / 0.35); }
[data-theme="light"] .nb.h { background: oklch(0.55 0.18 25 / 0.85); color: #fff; font-weight: 600; }
[data-theme="light"] .nb.w { background: oklch(0.58 0.17 70 / 0.85); color: #fff; font-weight: 600; }
[data-theme="light"] .nb.c { background: oklch(0.5 0.14 235 / 0.85); color: #fff; font-weight: 600; }
[data-theme="light"] .sig-row-meta { color: var(--text-4); }
[data-theme="light"] .bubble-thresh { background: oklch(0.98 0.005 70); }
[data-theme="light"] .bubble-thresh-slider { background: oklch(0.82 0.01 75); }
[data-theme="light"] table.t3 tr.buy  td { background: oklch(0.88 0.08 155 / 0.25); color: var(--pos); }
[data-theme="light"] table.t3 tr.sell td { background: oklch(0.88 0.08 25 / 0.25); color: var(--neg); }

/* Source mark in the unified Live feed (📋 next to composer fires) */
.sig-feed-source {
  margin-right: 4px;
  font-size: 10px;
  opacity: 0.85;
}