:root {
  --bg: #0a0d12;
  --bg-1: #10141b;
  --bg-2: #161c25;
  --bg-3: #1d2530;
  --fg: #d7dde6;
  --fg-dim: #8a94a3;
  --fg-mute: #566072;
  --accent: #36f0c1;
  --accent-2: #7aa8ff;
  --warn: #f5b042;
  --danger: #ef5b5b;
  --bull: #3dd68c;
  --bear: #ff6363;
  --neutral: #b0b6c0;
  --border: #242c38;
  --mono: ui-monospace, "JetBrains Mono", "Menlo", "Consolas", monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font: 13px/1.4 var(--mono);
  overflow: hidden;
}
button {
  background: var(--bg-2);
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 6px 12px;
  font: inherit;
  cursor: pointer;
  border-radius: 3px;
}
button:hover { background: var(--bg-3); border-color: var(--accent); }
button.danger { color: var(--danger); border-color: #3b2429; }
button.danger:hover { border-color: var(--danger); }
input, select {
  background: var(--bg-1);
  color: var(--fg);
  border: 1px solid var(--border);
  padding: 6px 10px;
  font: inherit;
  border-radius: 3px;
}
input:focus, select:focus { outline: none; border-color: var(--accent); }

#topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 16px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border);
  height: 46px;
}
.brand {
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--fg);
}
.brand .dot { color: var(--accent); }
#tabs { display: flex; gap: 4px; flex: 1; }
.tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--fg-dim);
  padding: 4px 12px;
  border-radius: 3px;
}
.tab:hover { color: var(--fg); }
.tab.active {
  color: var(--accent);
  border-color: var(--border);
  background: var(--bg-2);
}
.stats { display: flex; gap: 12px; color: var(--fg-dim); font-size: 12px; }
.stats span { padding: 3px 8px; background: var(--bg-2); border-radius: 3px; border: 1px solid var(--border); }
#stat-status.idle { color: var(--fg-dim); }
#stat-status.working { color: var(--accent); border-color: var(--accent); }
#stat-status.error { color: var(--danger); border-color: var(--danger); }

main {
  position: relative;
  height: calc(100% - 46px);
  overflow: hidden;
}
.view {
  display: none;
  position: absolute;
  inset: 0;
  overflow: auto;
  padding: 16px;
}
.view.active { display: block; }

/* INGEST */
#dropzone {
  border: 2px dashed var(--border);
  border-radius: 6px;
  padding: 36px;
  text-align: center;
  background: var(--bg-1);
  transition: border-color 120ms, background 120ms;
}
#dropzone.drag { border-color: var(--accent); background: #0d1a19; }
.dz-title { font-size: 22px; letter-spacing: 3px; color: var(--accent); }
.dz-sub { color: var(--fg-dim); margin-top: 6px; margin-bottom: 14px; font-size: 12px; }
#dropzone button { margin: 0 4px; }

#queue-panel, .panel {
  margin-top: 14px;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
}
.panel-title {
  color: var(--fg-dim);
  letter-spacing: 2px;
  font-size: 11px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
#queue { display: flex; flex-direction: column; gap: 6px; }
.qrow {
  display: grid;
  grid-template-columns: 26px 1fr 120px 100px 100px 100px 90px 70px;
  gap: 8px;
  align-items: center;
  padding: 6px 8px;
  background: var(--bg-2);
  border-radius: 3px;
  border-left: 3px solid var(--border);
  font-size: 12px;
}
.qrow.queued   { border-left-color: var(--fg-mute); }
.qrow.streaming{ border-left-color: var(--accent-2); }
.qrow.parsed   { border-left-color: var(--warn); }
.qrow.indexed  { border-left-color: var(--bull); }
.qrow.error    { border-left-color: var(--danger); }
.qrow.aborted  { border-left-color: var(--warn); opacity: .7; }
.qrow .fname { color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qrow .meta  { color: var(--fg-dim); }
.qrow .bar {
  position: relative;
  background: var(--bg-3);
  height: 10px;
  border-radius: 2px;
  overflow: hidden;
  grid-column: 2 / -1;
}
.qrow .bar > div {
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  height: 100%;
  width: 0%;
  transition: width 150ms;
}
.qrow .ic { font-size: 12px; color: var(--fg-mute); }
.agg { margin-top: 10px; }
.agg-bar { background: var(--bg-3); height: 8px; border-radius: 2px; overflow: hidden; }
.agg-bar > div { background: var(--accent); height: 100%; width: 0%; transition: width 150ms; }
.agg-meta { display: flex; gap: 14px; margin-top: 6px; color: var(--fg-dim); font-size: 12px; align-items: center; }
.agg-meta button { margin-left: auto; }

/* TAPE */
.toolbar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}
.toolbar .muted { color: var(--fg-dim); }
.toolbar input { min-width: 320px; }

.virt {
  position: relative;
  height: calc(100% - 44px);
  overflow: auto;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 3px;
}
#tape-spacer { width: 1px; position: absolute; top: 0; left: 0; }
#tape-viewport { position: absolute; top: 0; left: 0; right: 0; }

.tape-row {
  display: grid;
  grid-template-columns: 160px 70px 80px 50px 70px 100px 110px 90px 90px 80px 1fr;
  gap: 8px;
  padding: 5px 10px;
  border-bottom: 1px solid #151b24;
  align-items: center;
  font-size: 12px;
  height: 28px;
  white-space: nowrap;
  overflow: hidden;
}
.tape-row:hover { background: var(--bg-2); }
.tape-row .ts   { color: var(--fg-dim); }
.tape-row .tk   { color: var(--fg); font-weight: 600; }
.tape-row .tp.C { color: var(--bull); }
.tape-row .tp.P { color: var(--bear); }
.tape-row .sd.ASK { color: var(--bull); }
.tape-row .sd.BID { color: var(--bear); }
.tape-row .sd.MID, .tape-row .sd.NO { color: var(--fg-mute); }
.tape-row .sc {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 2px;
  font-weight: 700;
  text-align: center;
}
.tape-row .sc.hi { background: #103325; color: var(--bull); }
.tape-row .sc.md { background: #3a2f12; color: var(--warn); }
.tape-row .sc.lo { background: #2a1515; color: var(--bear); }
.tape-row .in   { color: var(--accent-2); overflow: hidden; text-overflow: ellipsis; }
.tape-row .sf   { color: var(--fg-mute); font-size: 11px; overflow: hidden; text-overflow: ellipsis; }
.tape-row .rat  { color: var(--fg-dim); font-size: 11px; overflow: hidden; text-overflow: ellipsis; }

/* HEATMAP */
#heatmap {
  overflow: auto;
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 10px;
  height: calc(100% - 44px);
}
.hm-table { border-collapse: collapse; font-size: 11px; }
.hm-table th, .hm-table td {
  padding: 4px 6px;
  border: 1px solid var(--border);
  text-align: right;
  min-width: 80px;
}
.hm-table th { color: var(--fg-dim); position: sticky; top: 0; background: var(--bg-1); }
.hm-table td.tk { text-align: left; color: var(--fg); font-weight: 600; position: sticky; left: 0; background: var(--bg-1); }

/* CONVICTION */
#conviction-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(440px, 1fr));
  gap: 10px;
}
.card {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 10px 12px;
}
.card .ch {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.card .ch .ti { font-size: 14px; font-weight: 700; }
.card .ch .score { font-size: 18px; font-weight: 800; color: var(--accent); }
.card .row { display: flex; gap: 10px; font-size: 12px; color: var(--fg-dim); flex-wrap: wrap; }
.card .row b { color: var(--fg); font-weight: 600; }
.card .rat { margin-top: 8px; border-top: 1px solid var(--border); padding-top: 6px; }
.card .rat ol { margin: 0; padding-left: 18px; color: var(--fg-dim); font-size: 12px; }
.card .intent { padding: 2px 8px; border-radius: 2px; font-size: 11px; font-weight: 700; }
.intent.bull { background: #103325; color: var(--bull); }
.intent.bear { background: #2a1515; color: var(--bear); }
.intent.neut { background: #1e2430; color: var(--neutral); }

/* SESSIONS */
#sessions-table, #wl-live {
  background: var(--bg-1);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0;
  overflow: auto;
  height: calc(100% - 44px);
}
.st-table { border-collapse: collapse; width: 100%; font-size: 12px; }
.st-table th, .st-table td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  white-space: nowrap;
}
.st-table th { color: var(--fg-dim); font-weight: 600; position: sticky; top: 0; background: var(--bg-2); }
.st-table tr:hover td { background: var(--bg-2); }
.st-table .num { text-align: right; }

/* WATCHLIST */
#wl-pins {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 10px;
}
.pin {
  background: var(--bg-2);
  border: 1px solid var(--border);
  padding: 3px 10px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg);
}
.pin button {
  background: transparent;
  border: none;
  color: var(--fg-mute);
  padding: 0;
  margin: 0;
  cursor: pointer;
}
.pin button:hover { color: var(--danger); }
#wl-live { height: calc(100% - 100px); }

/* TOASTS */
#toasts {
  position: fixed;
  right: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 1000;
}
.toast {
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 3px;
  padding: 8px 12px;
  min-width: 260px;
  max-width: 420px;
  font-size: 12px;
  color: var(--fg);
  animation: slide 160ms ease-out;
}
.toast.err { border-left-color: var(--danger); }
.toast.warn { border-left-color: var(--warn); }
.toast.ok { border-left-color: var(--bull); }
@keyframes slide {
  from { transform: translateX(40px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

.hidden { display: none !important; }
.muted { color: var(--fg-dim); }