/* PULSE v2 — Sidebar CSS (CSP-safe: zero inline style="") */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600&display=swap');

*  { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }

body {
  background: #0d0f14;
  font-family: 'Space Grotesk', sans-serif;
  color: #E6EDF7;
  font-size: 13px;
  width: 100%;
  min-width: 450px;
}

/* ── UTILITY ──────────────────────────────────────────────── */
.hidden { display: none !important; }
.dp { color: #10d98e; font-size: 11px; }
.dn { color: #f56565; font-size: 11px; }

/* ── SIDEBAR OUTER ────────────────────────────────────────── */
.ext {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #0d0f14;
  overflow: hidden;
  position: relative;
}

/* ── HEADER ───────────────────────────────────────────────── */
.ext-hdr {
  flex-shrink: 0;
  background: #111420;
  border-bottom: 1px solid rgba(148,163,184,0.12);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  z-index: 20;
}
.logo-icon {
  width: 22px; height: 22px;
  border-radius: 4px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
}
.logo-name {
  font-size: 14px; font-weight: 600; letter-spacing: .04em;
  color: #f0f4ff; margin-right: 4px; white-space: nowrap;
}
.nav-tabs { display: flex; gap: 2px; flex: 1; }
.ntab {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 500; padding: 4px 9px;
  border-radius: 5px; border: 1px solid transparent;
  color: #52627A; background: transparent; cursor: pointer;
  white-space: nowrap; transition: all .15s;
  user-select: none;
}
.ntab:hover { color: #8FA0B8; }
.ntab.active { background: #1e2330; color: #E6EDF7; border-color: #2a3040; }
.ntab.mkt.active { background: #1e2330; color: #7f77dd; border-color: #2a3040; }

.iBtn {
  width: 26px; height: 26px; border-radius: 6px;
  background: transparent; border: 1px solid #1e2330;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; transition: border-color .15s;
}
.iBtn:hover { border-color: #2a3040; }
.iBtn.spinning svg { animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ── LOADING / ERROR ──────────────────────────────────────── */
.state-wrap {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #52627A;
}
.spinner {
  width: 20px; height: 20px; border: 2px solid #1e2330;
  border-top-color: #f0b429; border-radius: 50%;
  animation: spin .8s linear infinite;
}
.retry-btn {
  background: #1e2330; border: 1px solid #2a3040;
  color: #8FA0B8; border-radius: 5px; padding: 4px 14px;
  font-size: 11px; font-family: 'JetBrains Mono', monospace; cursor: pointer;
}
.retry-btn:hover { background: #2a3040; }

/* ── SCROLL AREA ──────────────────────────────────────────── */
#mainContent {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #1e2330 transparent;
}
#mainContent::-webkit-scrollbar { width: 4px; }
#mainContent::-webkit-scrollbar-track { background: transparent; }
#mainContent::-webkit-scrollbar-thumb { background: #1e2330; border-radius: 2px; }

/* ── PANELS ───────────────────────────────────────────────── */
.panel { display: block; }
.panel.hidden { display: none; }

/* ── PRICE BAR ────────────────────────────────────────────── */
.price-bar {
  background: #0a0c10; padding: 8px 14px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid rgba(148,163,184,0.12);
}
.price-left { display: flex; align-items: baseline; gap: 6px; }
.pv { font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 600; color: #f0f4ff; }
.cp { font-family: 'JetBrains Mono', monospace; font-size: 12px; padding: 2px 6px; border-radius: 4px; }
.cp.pos { color: #10d98e; background: rgba(16,217,142,.1); }
.cp.neg { color: #f56565; background: rgba(245,101,101,.1); }
/* Price range — amber for axis/price values only */
.pm { font-size: 11px; color: #8FA0B8; font-family: 'JetBrains Mono', monospace; }

/* ── METRICS GRID ─────────────────────────────────────────── */
.mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(148,163,184,0.08); border-bottom: 1px solid rgba(148,163,184,0.12); }
.mcell { background: #0d0f14; padding: 10px 12px; transition: background .3s; position: relative; overflow: hidden; }
/* Data-state tinting — sigma signal bleeds into cell background */
.mcell.state-bull  { background: #0a0f0d; }
.mcell.state-bear  { background: #0f0a0a; }
.mcell.state-hot   { background: #0f0d09; }
.mcell.state-bull::after, .mcell.state-bear::after, .mcell.state-hot::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
}
.mcell.state-bull::after  { background: rgba(16,217,142,0.04); }
.mcell.state-bear::after  { background: rgba(245,101,101,0.04); }
.mcell.state-hot::after   { background: rgba(240,180,41,0.04); }
/* Left accent rule on tinted cells */
.mcell.state-bull { border-left: 2px solid rgba(16,217,142,0.25); }
.mcell.state-bear { border-left: 2px solid rgba(245,101,101,0.25); }
.mcell.state-hot  { border-left: 2px solid rgba(240,180,41,0.25); }
.mlbl { font-size: 11px; color: #52627A; text-transform: uppercase; letter-spacing: .04em; font-family: 'JetBrains Mono', monospace; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mval { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 500; color: #E6EDF7; }

/* ── SECTIONS ─────────────────────────────────────────────── */
.sec { border-bottom: 1px solid rgba(148,163,184,0.12); }
.sec-h { padding: 11px 14px 6px; display: flex; align-items: center; justify-content: space-between; }
.sec-t { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: #8FA0B8; font-family: 'JetBrains Mono', monospace; display: flex; align-items: center; gap: 7px; }
/* Accent dot before section title — color set per-section via modifier */
.sec-t::before { content: ''; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #2a3550; flex-shrink: 0; transition: background .2s; }
.sec-t.dot-amber::before  { background: #f0b429; box-shadow: 0 0 6px rgba(240,180,41,0.4); }
.sec-t.dot-blue::before   { background: #3b82f6; box-shadow: 0 0 6px rgba(59,130,246,0.4); }
.sec-t.dot-purple::before { background: #7f77dd; box-shadow: 0 0 6px rgba(127,119,221,0.3); }
.sec-t.dot-grey::before   { background: #52627A; }
.sec-b { font-size: 11px; font-family: 'JetBrains Mono', monospace; color: #8FA0B8; background: #1e2330; padding: 2px 6px; border-radius: 4px; }
.sec-tabs { display: flex; gap: 2px; }
.stab { font-family: 'JetBrains Mono', monospace; font-size: 11px; padding: 2px 6px; border-radius: 3px; border: 1px solid rgba(148,163,184,0.12); color: #52627A; cursor: pointer; transition: all .15s; }
.stab.active { background: #1e2330; color: #E6EDF7; border-color: #2a3040; }

/* ── LIQ HEATMAP ──────────────────────────────────────────── */
.hm-wrap { position: relative; padding: 0 14px 8px; background: #090b10; border-radius: 6px; box-shadow: 0 0 24px rgba(45,106,255,0.08); }
#hmCanvas { width: 100%; display: block; border-radius: 4px; background: #060810; }
.hm-tooltip { position: absolute; pointer-events: none; background: #0c0f18; border: 1px solid rgba(148,163,184,0.15); border-radius: 6px; padding: 6px 10px; display: flex; flex-direction: column; gap: 3px; z-index: 20; min-width: 120px; box-shadow: 0 4px 16px rgba(0,0,0,.6); }
.hm-tip-liq   { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: #e8b84b; }
.hm-tip-price { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #8FA0B8; }
.hm-tip-time  { font-family: 'JetBrains Mono', monospace; font-size: 11px;  color: #52627A; }
.hm-lbls { display: flex; justify-content: space-between; padding: 3px 14px 4px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #52627A; }
.hm-cur { color: #f0b429; }
.hm-legend { display: flex; gap: 10px; padding: 2px 14px 10px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #52627A; }
.hm-leg-item { display: flex; align-items: center; gap: 4px; }
.hm-swatch { width: 8px; height: 8px; border-radius: 1px; flex-shrink: 0; }
.hm-swatch.liq-long  { background: rgba(16,217,142,.7); }
.hm-swatch.liq-short { background: rgba(245,101,101,.7); }
.hm-swatch.cur-price { background: #f0b429; }

/* ── OI ───────────────────────────────────────────────────── */
.oi-body { padding: 0 14px 10px; }
.oi-long  { color: #10d98e; }
.oi-short { color: #f56565; }
.liq-long-val  { color: #f56565; }
.liq-short-val { color: #10d98e; }
.oi-ratio-wrap { position: relative; margin-bottom: 10px; }
.oi-ratio-bar { height: 16px; border-radius: 4px; overflow: hidden; display: flex; cursor: pointer; }
.oi-ratio-long  { background: #10d98e; transition: width .4s; }
.oi-ratio-short { background: #f56565; transition: width .4s; }
.oi-ratio-labels { display: flex; justify-content: space-between; margin-top: 4px; font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.oi-ratio-tooltip { position: absolute; top: -28px; left: 50%; transform: translateX(-50%); background: #0c0f18; border: 1px solid rgba(148,163,184,0.15); border-radius: 6px; padding: 3px 10px; font-size: 11px; font-family: 'JetBrains Mono', monospace; color: #8FA0B8; white-space: nowrap; pointer-events: none; z-index: 10; box-shadow: 0 4px 16px rgba(0,0,0,.6); }
.oi-ls-note { font-size: 11px; color: #334155; margin-top: 3px; font-family: 'JetBrains Mono', monospace; }
.oi-ex-table { display: flex; flex-direction: column; }
.oi-tbl-row { display: grid; grid-template-columns: 1fr 90px 64px 64px; align-items: center; gap: 0 12px; padding: 3px 0; }
.oi-tbl-hdr { margin-bottom: 3px; border-bottom: 1px solid rgba(148,163,184,0.08); padding-bottom: 4px; }
.oi-th { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #52627A; text-align: right; white-space: nowrap; user-select: none; }
.oi-th:first-child { text-align: left; }
.oi-th-sortable { cursor: pointer; }
.oi-th-sortable:hover { color: #8FA0B8; }
.oi-th-sorted { color: #8FA0B8; }
.oi-arrow { color: #2d3f55; font-size: 8px; }
.oi-arrow-active { color: #10d98e; }
.oi-tc-name { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #8FA0B8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oi-tc-oi   { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #8FA0B8; text-align: right; }
.oi-tc-chg  { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-align: right; border-radius: 3px; padding: 1px 3px; }
.oi-tc-chg.pos  { color: #10d98e; background: rgba(16,217,142,.1); }
.oi-tc-chg.neg  { color: #f87171; background: rgba(248,113,113,.1); }
.oi-tc-chg.none { color: #334155; }
/* Collapsible sections */
.sec-toggle { background: none; border: none; cursor: pointer; padding: 0; color: #52627A; font-size: 12px; line-height: 1; transition: transform .2s; display: flex; align-items: center; flex-shrink: 0; }
.sec-toggle:hover { color: #8FA0B8; }
.sec-body { overflow: hidden; }

/* ── LIQUIDATIONS ─────────────────────────────────────────── */
.liq-rects { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; padding: 0 14px 10px; }
.lrect { background: #111420; border: 1px solid rgba(148,163,184,0.10); border-radius: 6px; padding: 7px 8px; transition: border-color .2s, background .2s; cursor: default; }
.lrect:hover { background: #161b28; border-color: rgba(148,163,184,0.25); }
/* Amber: elevated — clearly visible tint + left accent */
.lrect.lrect-hot  {
  background: #16120a;
  border-color: rgba(240,180,41,0.55);
  border-left: 2px solid #f0b429;
}
/* Red: high — strong signal */
.lrect.lrect-high {
  background: #160a0a;
  border-color: rgba(245,101,101,0.55);
  border-left: 2px solid #f56565;
}
.lrect-lbl { font-size: 11px; color: #52627A; font-family: 'JetBrains Mono', monospace; text-transform: uppercase; margin-bottom: 4px; }
.lrect-val { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 500; color: #E6EDF7; }
.lrect.lrect-hot  .lrect-val { color: #f0b429; }
.lrect.lrect-high .lrect-val { color: #f87171; }
.lrect-sub { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #52627A; margin-top: 2px; }
.lbl-btc   { color: #f0b429 !important; font-weight: 600; }
.lbl-eth   { color: #7f77dd !important; font-weight: 600; }
.lbl-sol   { color: #10d98e !important; font-weight: 600; }
.lbl-other { color: #52627A !important; font-weight: 600; }

.liq-split { padding: 0 14px 8px; display: flex; gap: 10px; }
.ls-item { flex: 1; }
.ls-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; color: #52627A; margin-bottom: 3px; }
.ls-val { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 500; }
.ls-bar { height: 4px; background: #1e2330; border-radius: 2px; overflow: hidden; margin-top: 3px; }
.ls-fill-long  { height: 100%; border-radius: 2px; background: rgba(16,217,142,.6); }
.ls-fill-short { height: 100%; border-radius: 2px; background: rgba(245,101,101,.6); }

/* ── TIMEFRAME TABS ───────────────────────────────────────── */
.tabs-sm { display: flex; gap: 2px; padding: 0 14px 8px; }
#liqTabs.tabs-sm { padding-top: 14px; }
#liqTabs.tabs-sm { padding-top: 14px; }
.tsm { font-family: 'JetBrains Mono', monospace; font-size: 11px; padding: 3px 8px; border-radius: 4px; border: 1px solid rgba(148,163,184,0.12); color: #52627A; cursor: pointer; background: transparent; transition: all .15s; user-select: none; }
.tsm:hover { color: #8FA0B8; }
.tsm.active { background: #1e2330; color: #E6EDF7; border-color: #2a3040; }

/* ── MIRROR CHART ─────────────────────────────────────────── */
.mirror-chart { padding: 0 14px 4px; position: relative; }
.mc-cols { display: flex; gap: 3px; align-items: stretch; height: 89px; }
.mc-col { flex: 1; display: flex; flex-direction: column; cursor: pointer; border-radius: 2px; transition: background .1s; }
.mc-col:hover { background: rgba(255,255,255,0.04); }
.mc-top-bar { flex: 1; display: flex; align-items: flex-end; }
.mc-bot-bar { flex: 1; display: flex; align-items: flex-start; }
.mc-zero-line { height: 1px; background: #2a3040; flex-shrink: 0; }
.fh-empty { height: 89px; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #52627A; }
.mb { width: 100%; min-height: 3px; border-radius: 1px; }
/* ── UNIFIED TOOLTIP TOKEN ────────────────────────────────── */
.mc-tip {
  position: absolute; background: #0c0f18; border: 1px solid rgba(148,163,184,0.15);
  border-radius: 6px; padding: 7px 10px; font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: #8FA0B8; pointer-events: none; white-space: nowrap;
  z-index: 100; display: none; box-shadow: 0 4px 16px rgba(0,0,0,.6);
}
.mc-tip-row { display: flex; justify-content: space-between; gap: 16px; line-height: 1.6; }
.mc-tip-lbl { color: #52627A; }
.mc-tip-val { color: #e2e8f0; font-weight: 500; }
.mc-tip-val.green { color: #10d98e; }
.mc-tip-val.red   { color: #f56565; }.mc-lbl { display: flex; justify-content: space-between; padding: 3px 14px 6px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #52627A; }
.mb { flex: 1; min-height: 3px; border-radius: 1px; }
.liq-legend { display: flex; gap: 10px; padding: 0 14px 6px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #52627A; }
.ll-item { display: flex; align-items: center; gap: 4px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 1px; }
.dot.green { background: rgba(16,217,142,.7); }
.dot.red   { background: rgba(245,101,101,.7); }

/* ── FUNDING RATES ────────────────────────────────────────── */
.fr-list { padding: 0 14px 8px; }
.fr-row { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; font-family: 'JetBrains Mono', monospace; font-size: 12px; }

.fr-ex { color: #8FA0B8; width: 100px; flex-shrink: 0; white-space: nowrap; overflow: visible; }
.fr-bw { flex: 1; height: 5px; background: #1e2330; border-radius: 4px; overflow: hidden; }
.fr-bp { height: 100%; border-radius: 4px; }
.fvp { color: #10d98e; min-width: 60px; text-align: right; font-size: 12px; }
.fvn { color: #f56565; min-width: 60px; text-align: right; font-size: 12px; }
.show-more-btn { margin: 0 14px 10px; background: #111420; border: 1px solid rgba(148,163,184,0.12); border-radius: 6px; padding: 5px; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #52627A; cursor: pointer; }
.show-more-btn:hover { background: #1a1f2e; }
.fr-sort-bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px 8px; border-top: 1px solid rgba(148,163,184,0.08); margin-top: 4px; }
.fr-sort-lbl { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #52627A; }
.fr-sort-btn { font-family: 'JetBrains Mono', monospace; font-size: 11px; padding: 2px 8px; border-radius: 4px; border: 1px solid rgba(148,163,184,0.12); color: #52627A; cursor: pointer; background: transparent; transition: all .15s; }
.fr-sort-btn:hover { color: #8FA0B8; }
.fr-sort-btn.active { background: #1e2330; color: #E6EDF7; border-color: #2a3040; }
.fr-map-lbl { padding: 2px 14px 4px; font-size: 11px; font-family: 'JetBrains Mono', monospace; color: #52627A; }
.fr-map { padding: 0 14px 10px; display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; }
.fmc { height: 44px; border-radius: 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 0 4px; }
.fmc-e { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; text-align: center; }
.fmc-v { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; }

/* ── VOLUME BARS ──────────────────────────────────────────── */
.vol-bars { padding: 0 14px 6px; display: flex; gap: 3px; align-items: flex-end; height: 104px; }
.vbw { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; cursor: default; }
.vb  { width: 100%; border-radius: 2px 2px 0 0; min-height: 4px; transition: background .15s; }
.vbw:hover .vb { filter: brightness(1.3); }
.vb-tip { position: fixed; transform: translateX(-50%); background: #0c0f18; color: #E6EDF7; font-family: 'JetBrains Mono', monospace; font-size: 11px; padding: 4px 8px; border-radius: 6px; border: 1px solid rgba(148,163,184,0.15); white-space: nowrap; pointer-events: none; z-index: 9999; opacity: 0; transition: opacity .1s; box-shadow: 0 4px 16px rgba(0,0,0,.6); }
.vb-tip.show { opacity: 1; }
.vol-ex { padding: 0 14px 10px; }
.vex-row { display: grid; grid-template-columns: 1fr 72px 58px 58px 58px; align-items: center; gap: 0 10px; padding: 3px 0; }
.vex-hdr { margin-bottom: 3px; border-bottom: 1px solid rgba(148,163,184,0.08); padding-bottom: 4px; }
.vex-name { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #8FA0B8; }

/* ── REFERRAL LINKS ───────────────────────────────────────────── */
a.ex-referral {
  text-decoration: none;
  cursor: pointer;
  transition: color .15s;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
a.ex-referral:hover { color: #E6EDF7; }
.ex-ref-icon {
  font-size: 11px;
  color: #8FA0B8;
  opacity: 0;
  transition: opacity .15s;
  line-height: 1;
  flex-shrink: 0;
}
a.ex-referral:hover .ex-ref-icon { opacity: 1; color: #E6EDF7; }
.vex-h    { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #52627A; text-align: right; white-space: nowrap; user-select: none; }
.vex-h:first-child { text-align: left; }
.vex-sortable { cursor: pointer; }
.vex-sortable:hover { color: #8FA0B8; }
.vex-sorted { color: #8FA0B8; }
.vex-arrow        { color: #2d3f55; font-size: 8px; }
.vex-arrow-active { color: #10d98e; }
.vex-vol  { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #8FA0B8; text-align: right; }
.vex-chg  { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-align: right; border-radius: 3px; padding: 1px 3px; }
.vex-chg.pos  { color: #10d98e; background: rgba(16,217,142,.1); }
.vex-chg.neg  { color: #f87171; background: rgba(248,113,113,.1); }
.vex-chg.none { color: #334155; }
.vol-ex-tag { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #52627A; background: #111420; border: 1px solid #1e2330; border-radius: 3px; padding: 1px 5px; }
.tsm-row { display: flex; gap: 4px; padding: 0 14px 6px; }

/* ── NEWS ─────────────────────────────────────────────────── */
.news-filter { display: flex; flex-direction: column; gap: 6px; padding: 6px 14px 10px; }
.news-filter-row { display: flex; align-items: center; gap: 8px; }
.news-filter-lbl { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #52627A; text-transform: uppercase; letter-spacing: .06em; width: 68px; flex-shrink: 0; }
.news-slider-wrap { display: flex; align-items: center; gap: 6px; flex: 1; }
.news-slider { flex: 1; -webkit-appearance: none; appearance: none; height: 3px; background: #1e2330; border-radius: 2px; outline: none; cursor: pointer; }
.news-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; border-radius: 50%; background: #f0b429; cursor: pointer; border: none; }
.news-slider::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #f0b429; cursor: pointer; border: none; }
.news-slider-val { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #f0b429; font-weight: 600; min-width: 14px; text-align: right; }
.news-sentiment-btns { display: flex; gap: 3px; }
.nsb { font-family: 'JetBrains Mono', monospace; font-size: 11px; padding: 3px 7px; border-radius: 4px; border: 1px solid rgba(148,163,184,0.12); color: #52627A; cursor: pointer; background: transparent; transition: all .15s; }
.nsb:hover { color: #8FA0B8; }
.nsb.active { background: #1e2330; color: #E6EDF7; border-color: #2a3040; }
.nsb[data-sent="bullish"].active { background: rgba(16,217,142,.12); color: #10d98e; border-color: rgba(16,217,142,.3); }
.nsb[data-sent="bearish"].active { background: rgba(245,101,101,.12); color: #f56565; border-color: rgba(245,101,101,.3); }
.nsb[data-sent="neutral"].active { background: rgba(148,163,184,.12); color: #8FA0B8; border-color: rgba(148,163,184,.3); }
.nfp { font-family: 'JetBrains Mono', monospace; font-size: 11px; padding: 3px 8px; border-radius: 4px; border: 1px solid rgba(148,163,184,0.12); color: #52627A; cursor: pointer; background: transparent; transition: all .15s; }
.nfp:hover { color: #8FA0B8; }
.nfp.active { background: #1e2330; color: #E6EDF7; border-color: #2a3040; }
/* .news-list moved to bottom */
.news-state { padding: 14px; text-align: center; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #52627A; }
/* .ni defined below */
.nm { display: flex; align-items: center; gap: 5px; margin-bottom: 4px; flex-wrap: wrap; }
.ns   { font-size: 11px; font-family: 'JetBrains Mono', monospace; color: #f0b429; text-transform: uppercase; }
.nt2  { font-size: 11px; color: #52627A; font-family: 'JetBrains Mono', monospace; }
.nb   { font-size: 11px; color: #10d98e; background: rgba(16,217,142,.1); padding: 1px 5px; border-radius: 3px; margin-left: auto; }
.nbe  { font-size: 11px; color: #f56565; background: rgba(245,101,101,.1); padding: 1px 5px; border-radius: 3px; margin-left: auto; }
.nbn  { font-size: 11px; color: #8FA0B8; background: rgba(148,163,184,.1); padding: 1px 5px; border-radius: 3px; margin-left: auto; }
.nscore-bar { display: inline-flex; align-items: center; gap: 2px; }
.nsq { display: inline-block; width: 4px; height: 8px; border-radius: 1px; flex-shrink: 0; }
.nsq-off { background: #1e2330; }
.nsq-on { /* color set inline */ }
.nm-sep { width: 3px; height: 3px; background: #1e2330; border-radius: 50%; display: inline-block; }
/* News headline — Space Grotesk SemiBold, high contrast */
.nh { font-size: 14px; font-family: 'Space Grotesk', sans-serif; font-weight: 600; color: #E6EDF7; line-height: 1.45; }
.nh a { color: #E6EDF7; text-decoration: none; }
.nh a:hover { color: #f0f4ff; }
/* News reason — JetBrains Mono, clearly secondary to headline */
.nreason { font-size: 12px; color: rgba(143,160,184,0.80); font-family: 'JetBrains Mono', monospace; margin-top: 5px; margin-bottom: 3px; font-style: normal; line-height: 1.5; }

/* ── MARKET CAP BAR ───────────────────────────────────────── */
.mkt-cap-bar {
  background: #0a0c10; padding: 8px 14px;
  border-bottom: 1px solid rgba(148,163,184,0.12);
  display: flex; align-items: center; justify-content: space-between;
}
.mkt-cap-lbl { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #8FA0B8; }
.mkt-cap-val { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #f0f4ff; font-weight: 500; }

/* ── FEAR & GREED GAUGE ───────────────────────────────────── */
.fg-block {
  display: flex; align-items: center; justify-content: center;
  padding: 10px 14px 12px; gap: 0;
  background: #0d0f14;
}
.fg-gauge-canvas { display: block; flex-shrink: 0; }
.fg-gauge-wrap {
  background: #0a0c10;
  border: 1px solid rgba(148,163,184,0.14);
  border-radius: 8px;
  padding: 8px 12px 4px;
  flex-shrink: 0;
}
.fg-right { display: flex; flex-direction: column; justify-content: center; gap: 3px; flex-shrink: 0; padding-left: 12px; }
.fg-chg-row { display: grid; grid-template-columns: 24px 1fr; align-items: baseline; column-gap: 4px; }
.fg-chg-lbl { font-size: 11px; color: #52627A; font-family: 'JetBrains Mono',monospace; text-align: right; }
.fg-chg-val { font-family: 'JetBrains Mono',monospace; font-size: 12px; font-weight: 500; color: #8FA0B8; }
.fg-chg-val.pos { color: #10d98e; }
.fg-chg-val.neg { color: #f56565; }

/* ── DOMINANCE ────────────────────────────────────────────── */
.dom-stack { display: flex; flex-direction: column; gap: 6px; padding: 6px 14px 10px; }
.dom-stack-item { display: flex; align-items: center; gap: 8px; }
.dom-stack-lbl  { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #8FA0B8; width: 34px; flex-shrink: 0; }
.dom-stack-bar  { flex: 1; height: 5px; background: #1e2330; border-radius: 2px; overflow: hidden; }
.dom-stack-fill { height: 100%; border-radius: 2px; transition: width .4s; }
.dom-stack-pct  { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; min-width: 38px; text-align: right; }
.dom-stacked-bar { height: 5px; background: #1e2330; border-radius: 2px; overflow: hidden; display: flex; gap: 1px; margin: 2px 14px 0; }
.dom-stacked-seg { height: 100%; }

/* Interactive multi-line chart */
.dom-chart-wrap { position: relative; padding: 6px 14px 2px; }
#domLineCanvas  { width: 100%; height: 166px; display: block; cursor: crosshair; }
.dom-chart-tip  {
  position: absolute; top: 10px; right: 18px;
  background: #0c0f18; border: 1px solid rgba(148,163,184,0.15);
  border-radius: 6px; padding: 7px 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  color: #8FA0B8; pointer-events: none; white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,.6);
  min-width: 110px;
}
.dom-chart-tip.hidden { display: none; }
.dom-tip-date  { font-size: 11px; color: #52627A; margin-bottom: 5px; }
.dom-tip-row   { display: flex; justify-content: space-between; gap: 12px; margin: 2px 0; }
.dom-tip-val   { font-weight: 500; }

/* Legend row below chart */
.dom-chart-legend { display: flex; gap: 14px; padding: 4px 14px 10px; flex-wrap: wrap; }
.dom-leg-item  { display: flex; align-items: center; gap: 5px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #52627A; }
.dom-leg-swatch{ width: 20px; height: 2px; border-radius: 1px; flex-shrink: 0; }

/* ── MKT OI BY ASSET ──────────────────────────────────────── */
.mkt-oi-body { padding: 0 14px 10px; display: flex; flex-direction: column; gap: 5px; }
.mkt-oi-row { display: flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; }
.mkt-oi-sym { font-size: 12px; width: 40px; }
.mkt-oi-bar { flex: 1; height: 5px; background: #1e2330; border-radius: 2px; overflow: hidden; }
.mkt-oi-fill { height: 100%; border-radius: 2px; }
.mkt-oi-val { color: #8FA0B8; font-size: 12px; min-width: 44px; text-align: right; }

/* ── AFT TABLE (10 assets × 10 exchanges) ─────────────────── */
.aft-ex-name { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #52627A; }
.aft-asset { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; color: #8FA0B8; width: 38px; flex-shrink: 0; }
.aft-cell { height: 32px; border-radius: 2px; display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', monospace; font-size: 9px; font-weight: 600; flex-shrink: 0; }

/* ── SETTINGS BUTTON ACTIVE STATE ────────────────────────── */
.iBtn.settings-active { border-color: #3b82f6; }
.iBtn.settings-active svg path, .iBtn.settings-active svg circle { stroke: #3b82f6; }

/* ── SETTINGS PANEL ───────────────────────────────────────── */
.settings-panel {
  position: absolute;
  top: 42px; right: 8px;
  width: 230px;
  background: #0d0f14;
  border: 1px solid #1e2330;
  border-radius: 8px;
  padding: 10px 14px;
  z-index: 9998;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.settings-panel.hidden { display: none; }
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.settings-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #52627A;
  flex: 1;
}
.settings-updated {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #334155;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(148,163,184,0.08);
}

/* ── FOOTER (legacy — kept for pulse animation keyframe) ─── */
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }


/* ── NEWS SCROLL (3 items visible, rest scrollable) ────────── */
/* ── NEWS LIST ───────────────────────────────────────────── */
.news-list {
  padding: 0 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #1e2330 transparent;
}
.news-list::-webkit-scrollbar { width: 3px; }
.news-list::-webkit-scrollbar-thumb { background: #1e2330; border-radius: 2px; }

.ni {
  padding: 10px 0;
  border-bottom: 1px solid rgba(148,163,184,0.08);
  flex-shrink: 0;
}
.ni:last-child { border-bottom: none; }

/* ── METRIC SUB ─────────────────────────────────────────────── */
.metric-sub { font-size: 11px; color: #52627A; font-family: 'JetBrains Mono', monospace; }
.fg-lbl     { font-size: 12px; color: #52627A; }
.nm-sep     { width: 3px; height: 3px; background: #1e2330; border-radius: 50%; display: inline-block; }
.ni-last    { border-bottom: none !important; }
.dom-btc-pct { color: #f0b429; }

/* ── % CHANGE CHIPS ─────────────────────────────────────────── */
.mchg {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  padding: 1px 4px;
  border-radius: 3px;
  margin-left: 5px;
}
.mchg.pos { color: #10d98e; background: rgba(16,217,142,.12); }
.mchg.neg { color: #f56565; background: rgba(245,101,101,.12); }

/* funding rate colour inside mval */
.rate-pos { color: #10d98e; }
.rate-neg { color: #f56565; }

/* ls-val-row for liq split */
.ls-val-row { display: flex; align-items: center; margin-bottom: 2px; }

/* ── OVERLAY-SPECIFIC OVERRIDES ──────────────────────────────── */
/* Panel fills the iframe 100% with no scrollbar on html/body */
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0d0f14;
}

/* Close button — slightly more prominent than refresh */
.close-btn { margin-left: 2px; }
.close-btn:hover { border-color: #f56565; }
.close-btn:hover svg path { stroke: #f56565; }
.close-btn svg path { transition: stroke .15s; }

/* ── SETTINGS TOGGLE IN FOOTER ──────────────────────────────── */
.ftr-setting {
  margin: 6px 0 4px;
  padding: 5px 0;
  border-top: 1px solid #1a1f2e;
}
.ftr-toggle-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #52627A;
  cursor: pointer;
  user-select: none;
}
.ftr-toggle { position: relative; display: inline-block; width: 28px; height: 15px; flex-shrink: 0; }
.ftr-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.ftr-toggle-track {
  position: absolute; inset: 0;
  background: #1e2330; border-radius: 8px;
  transition: background .2s;
}
.ftr-toggle-track::after {
  content: '';
  position: absolute;
  left: 2px; top: 2px;
  width: 11px; height: 11px;
  background: #52627A;
  border-radius: 50%;
  transition: transform .2s, background .2s;
}
.ftr-toggle input:checked + .ftr-toggle-track { background: rgba(240,180,41,.25); }
.ftr-toggle input:checked + .ftr-toggle-track::after {
  transform: translateX(13px);
  background: #f0b429;
}

/* ── HEATMAP EXPAND BUTTON ───────────────────────────────── */
.hm-expand-btn {
  width: 22px; height: 22px; border-radius: 4px;
  background: transparent; border: 1px solid rgba(148,163,184,0.12);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0; transition: border-color .15s;
}
.hm-expand-btn:hover { border-color: #2a3040; }
.hm-expand-btn:hover svg path { stroke: #8FA0B8; }

.hm-fullscreen-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: .06em;
  padding: 3px 10px; border-radius: 4px;
  border: 1px solid rgba(240,180,41,0.45);
  background: rgba(240,180,41,0.08);
  color: #f0b429;
  cursor: pointer; flex-shrink: 0;
  transition: all .15s;
}
.hm-fullscreen-btn:hover {
  background: rgba(240,180,41,0.16);
  border-color: rgba(240,180,41,0.7);
  color: #f5c842;
}
.sec.sec-heatmap { border-top: 2px solid rgba(45,106,255,0.35); background: #090b10; }
.sec.sec-heatmap .sec-t { color: #E6EDF7; font-size: 14px; letter-spacing: .04em; }

/* ── HEATMAP POPUP ───────────────────────────────────────── */
.hm-popup {
  position: fixed; inset: 0;
  background: rgba(5,6,12,0.92);
  z-index: 9999;
  display: flex; align-items: flex-start;
  padding: 10px;
  overflow-y: auto;
}
.hm-popup.hidden { display: none !important; }
.hm-popup-inner {
  background: #0d0f14; border: 1px solid #1e2330;
  border-radius: 10px; width: 100%;
  padding: 10px 12px 14px;
}
.hm-popup-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.hm-popup-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em; color: #52627A;
}
.hm-popup-close {
  width: 24px; height: 24px; border-radius: 5px;
  background: transparent; border: 1px solid #1e2330;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.hm-popup-close:hover { border-color: #f56565; }
#hmCanvasPopup { display: block; width: 100%; border-radius: 4px; background: #060810; }

/* ── NEWS SCOPE TOGGLE ─────────────────────────────────────── */
.nfp-scope {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid rgba(148,163,184,0.12);
  color: #52627A;
  cursor: pointer;
  background: transparent;
  transition: all .15s;
  margin-left: auto;
}
.nfp-scope:hover { color: #8FA0B8; border-color: #2a3040; }
.nfp-scope.active { background: rgba(240,180,41,.08); color: #f0b429; border-color: #f0b42940; }

/* ── NEWS ASSET TAGS ───────────────────────────────────────── */
.nassets {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(230,237,247,0.50);
  margin-left: 4px;
  letter-spacing: 0.02em;
}
/* News metadata row (source + timestamp) — low emphasis */
.nmeta {
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: rgba(230,237,247,0.50);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* ── NEWS INFINITE SCROLL ──────────────────────────────────── */
.news-sentinel {
  height: 1px;
  width: 100%;
}

/* ── MARKET STATE REVIEW ROW ──────────────────────────────── */
.msr-row {
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: #0e0f14;
  border-bottom: 1px solid rgba(148,163,184,0.12);
  border-left: 3px solid rgba(240,180,41,0.8);
  min-height: 36px;
  cursor: pointer;
  transition: background .15s;
  box-shadow: inset 3px 0 16px rgba(240,180,41,0.06);
}
.msr-row:hover {
  background: #141208;
  box-shadow: inset 3px 0 20px rgba(240,180,41,0.10);
}
.msr-trigger {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-family: 'JetBrains Mono', monospace;
  color: #f0b429;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color .15s;
}
.msr-row:hover .msr-trigger { color: #f5c842; }

/* Bookmark icon */
.msr-bookmark {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

/* Pulse dot — right side */
.msr-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: #f0b429;
  margin-left: auto;
  flex-shrink: 0;
  animation: msrPulse 2.4s ease-in-out infinite;
}
@keyframes msrPulse {
  0%, 100% { opacity: 0.25; transform: scale(0.8); }
  50%       { opacity: 1;    transform: scale(1.1); box-shadow: 0 0 6px rgba(240,180,41,0.6); }
}
/* Stop pulse after user has opened MSR */
.msr-row.msr-seen .msr-pulse { animation: none; opacity: 0.3; }

.msr-active-label {
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  color: #f0b429;
  letter-spacing: .06em;
  font-weight: 500;
  opacity: 0.7;
}

/* ── INTERPRET POPUP ──────────────────────────────────────── */
.itp-popup {
  position: absolute;
  left: 12px; right: 12px;
  top: 57px;
  z-index: 10000;
  background: #0d0f14;
  border: 1px solid rgba(240,180,41,0.2);
  border-top: 2px solid #f0b429;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.7), 0 0 24px rgba(240,180,41,0.04);
}
.itp-popup.hidden { display: none !important; }

.itp-inner {
  background: #0d0f14;
  padding: 10px 12px 20px;
}

/* Header — tabs left, symbol centre, close right */
.itp-hdr {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid #1e2330;
  padding-bottom: 8px;
}
.itp-symbol {
  flex: 1;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: #52627A;
}
.itp-close {
  width: 24px; height: 24px; border-radius: 5px;
  background: transparent; border: 1px solid rgba(148,163,184,0.12);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #52627A; font-size: 11px; line-height: 1;
  transition: border-color .15s, color .15s;
}
.itp-close:hover { border-color: #f56565; color: #f56565; }

/* Tabs */
.itp-tabs {
  display: flex; gap: 4px;
}
.itp-tab {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  padding: 3px 10px; border-radius: 4px;
  border: 1px solid rgba(148,163,184,0.12);
  background: transparent; color: #52627A;
  cursor: pointer; transition: all .15s;
}
.itp-tab:hover { color: #8FA0B8; border-color: #334155; }
.itp-tab.active { background: #1e2330; border-color: #2a3040; color: #E6EDF7; }

/* Loading */
.itp-loading {
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: #52627A;
  padding: 20px 0;
}
.itp-loading-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #f0b429;
  animation: itpPulse 1s ease-in-out infinite;
}
@keyframes itpPulse {
  0%, 100% { opacity: .3; transform: scale(.8); }
  50%       { opacity: 1;  transform: scale(1.2); }
}

/* Error */
.itp-error {
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: #f87171;
}
.itp-retry {
  align-self: flex-start;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; padding: 3px 10px;
  border-radius: 4px; border: 1px solid #f87171;
  background: transparent; color: #f87171; cursor: pointer;
}
.itp-retry:hover { background: rgba(248,113,113,.1); }

/* Content — Phase 9 row layout */

/* CSS vars for bar colors — single source of truth for dark theme */
.itp-popup {
  --itp-bar-red:     #d46060;
  --itp-bar-green:   #4a9a4a;
  --itp-bar-amber:   #b89030;
  --itp-bar-neutral: rgba(255,255,255,0.15);
}

/* ── Metric rows ──────────────────────────────────────────── */
.itp-rows {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 0 -12px 4px;  /* bleed to popup edges, cancels itp-inner padding */
}

.itp-row {
  display: flex;
  align-items: stretch;
  border-radius: 0;
  overflow: hidden;
  min-height: 26px;
}

/* Left accent bar */
.itp-row-bar {
  width: 2.5px;
  flex-shrink: 0;
}

/* Row content — 4-column grid: label | current | change | sigma */
.itp-row-content {
  flex: 1;
  display: grid;
  grid-template-columns: 145px 1fr 68px 60px;
  align-items: center;
  padding: 4px 6px;
  font-family: 'JetBrains Mono', monospace;
  gap: 0 4px;
}

/* Col 1: label */
.itp-row-lbl {
  color: #52627A;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Col 2: current absolute */
.itp-row-current {
  color: #E6EDF7;
  white-space: nowrap;
  text-align: right;
}

/* Col 3: change */
.itp-row-change {
  color: #8FA0B8;
  white-space: nowrap;
  text-align: right;
  font-size: 0.85em;
}

/* Col 4: sigma cell — right-aligned, stacks two lines for liq */
.itp-row-sigma-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 1px;
}

/* σ pills */
.itp-sigma {
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 3px;
  white-space: nowrap;
}
.itp-sigma.sigma-neutral { color: #52627A; background: rgba(255,255,255,0.04); }
.itp-sigma.sigma-amber   { color: #b89030; background: rgba(184,144,48,0.12); }
.itp-sigma.sigma-green   { color: #4a9a4a; background: rgba(74,154,74,0.12); }
.itp-sigma.sigma-red     { color: #d46060; background: rgba(212,96,96,0.12); }

/* Liq bucket label — second line in sigma col, only for event/cascade */
.itp-liq-bucket {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #52627A;
  text-align: right;
}

/* ── Liq bands ────────────────────────────────────────────── */
.itp-bands-divider {
  height: 1px;
  background: #1e2330;
  margin: 8px 0 6px;
}

.itp-bands-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #334155;
  margin-bottom: 5px;
}

.itp-bands {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.itp-band {
  display: grid;
  grid-template-columns: 88px 38px 1fr 62px 44px;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 1px 0;
}

.itp-band-price { font-weight: 600; }
.itp-band-above { color: #4a9a4a; }
.itp-band-below { color: #d46060; }

.itp-band-dist  { color: #52627A; font-size: 11px; }

.itp-band-bar-wrap {
  height: 4px;
  background: #1e2330;
  border-radius: 2px;
  overflow: hidden;
}
.itp-band-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .3s;
}

.itp-band-usd  { color: #8FA0B8; text-align: right; font-size: 11px; }
.itp-band-side { color: #334155; font-size: 11px; text-align: right; }

/* Updated timestamp */
.itp-divider {
  height: 1px; background: #1e2330;
  margin: 6px 0 4px;
}
.itp-updated {
  display: none; /* "updated Xs ago" text removed */
}
.itp-updated.stale { display: none; }

/* ── Share button in popup ────────────────────────────────── */
.itp-share-row {
  display: flex;
  justify-content: center;
  padding: 4px 0 2px;
}
.itp-share-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  padding: 6px 24px;
  border-radius: 6px;
  border: 1px solid rgba(148,163,184,0.2);
  background: #1a1f2e;
  color: #E6EDF7;
  cursor: pointer;
  letter-spacing: .05em;
  transition: all .15s;
  width: 100%;
}
.itp-share-btn:hover { background: #232a3a; border-color: rgba(148,163,184,0.35); }

/* ── Share preview overlay ────────────────────────────────── */
.share-overlay {
  position: absolute;
  inset: 0;
  background: rgba(5,6,12,0.98);
  z-index: 20000;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 12px 12px 12px;
}
.share-overlay.hidden { display: none !important; }

.share-overlay-inner {
  width: 100%;
  max-width: 680px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sov-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.sov-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: #52627A;
}
.sov-close {
  width: 28px; height: 28px;
  border-radius: 6px;
  background: transparent; border: 1px solid #1e2330;
  color: #52627A; font-size: 12px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.sov-close:hover { border-color: #f56565; color: #f56565; }

/* Controls — single row */
.sov-controls {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  background: #0a0c10;
  border: 1px solid #1e2330;
  border-radius: 8px;
  padding: 8px 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.sov-ctrl-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sov-ctrl-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  color: #334155;
  white-space: nowrap;
}
.sov-btns { display: flex; gap: 3px; }
.sov-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; padding: 3px 8px;
  border-radius: 4px; border: 1px solid #1e2330;
  background: transparent; color: #52627A;
  cursor: pointer; transition: all .15s;
}
.sov-btn:hover { color: #8FA0B8; }
.sov-btn.active { background: #1e2330; border-color: #2a3040; color: #E6EDF7; }

.sov-swatches { display: flex; gap: 6px; align-items: center; }
.sov-swatch {
  width: 16px; height: 16px; border-radius: 50%;
  cursor: pointer; flex-shrink: 0;
  border: 2px solid transparent;
  transition: border-color .15s;
}
.sov-swatch.active { border-color: #fff; }

/* Preview — sizes to content, overlay scrolls if needed */
.sov-preview {
  background: #060810;
  border: 1px solid #1e2330;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sov-preview-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.sov-live-card-outer {
  border-radius: 6px;
  overflow: hidden;
}
.sov-preview-loading {
  display: flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: #52627A;
}
.sov-preview-img {
  width: 100%;
  border-radius: 6px;
  display: block;
}

/* Actions */
.sov-actions {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  background: rgba(5,6,12,0.98);
  padding: 8px 0 4px;
  margin-top: 4px;
}
.sov-action-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid #2a3040;
  background: #111420; color: #8FA0B8;
  cursor: pointer; transition: all .15s;
  white-space: nowrap;
}
.sov-action-btn:hover { background: #1e2330; color: #e2e8f0; }
.sov-action-btn.done { color: #4a9a4a; border-color: #4a9a4a; }

.sov-share-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.sov-share-main { width: 100%; }

.sov-share-platforms {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #0a0c10;
  border: 1px solid #1e2330;
  border-radius: 6px;
  padding: 8px;
}
.sov-platform-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: #334155;
  margin-bottom: 4px;
  display: block;
}
.sov-platform-btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  padding: 6px 10px;
  border-radius: 4px; border: 1px solid #1e2330;
  background: transparent; color: #52627A;
  cursor: pointer; text-align: left;
  transition: all .15s;
}
.sov-platform-btn:hover { background: #1e2330; color: #8FA0B8; }
.sov-platform-btn.done  { color: #4a9a4a; border-color: #4a9a4a; }


/* ── Share card (offscreen, rendered by html2canvas) ─────── */
.sc-wrap {
  font-family: 'JetBrains Mono', monospace;
  padding: 20px;
  border-radius: 16px;
}
.sc-card {
  border-radius: 12px;
  overflow: hidden;
}
.sc-card.dark  { background: #0e1016; color: #e2e8f0; }
.sc-card.light { background: #ffffff; color: #0e1016; }

.sc-hdr {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 16px 20px 10px;
}
.sc-hdr-sym  { font-size: 18px; font-weight: 700; }
.sc-hdr-tf   { font-size: 12px; opacity: .5; }
.sc-hdr-time { font-size: 11px; opacity: .35; margin-left: auto; }

/* Horizontal layout */
.sc-horiz {
  display: flex;
  width: 1080px;
  min-height: 580px;
}
.sc-horiz .sc-left  { flex: 1; display: flex; flex-direction: column; padding: 0 20px 20px; }
.sc-horiz .sc-vdiv  { width: 1px; background: rgba(255,255,255,.08); flex-shrink: 0; }
.sc-horiz.light .sc-vdiv { background: rgba(0,0,0,.1); }
.sc-horiz .sc-right { width: 525px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; padding: 12px; }

/* Vertical layout */
.sc-vert {
  display: flex;
  flex-direction: column;
  width: 1080px;
}
.sc-vert .sc-top    { padding: 0 40px 20px; }
.sc-vert .sc-hdiv   { height: 1px; background: rgba(255,255,255,.08); margin: 0 40px; }
.sc-vert.light .sc-hdiv { background: rgba(0,0,0,.1); }
.sc-vert .sc-bottom { padding: 20px 40px 40px; }

/* Share card rows */
.sc-rows { display: flex; flex-direction: column; gap: 2px; }
.sc-row  {
  display: grid;
  grid-template-columns: 200px 1fr 120px 100px;
  align-items: center;
  gap: 0 8px;
  padding: 5px 8px;
  border-left: 3.5px solid transparent;
}
.sc-row-lbl     { opacity: .45; font-size: 14px; }
.sc-row-current { font-size: 14px; text-align: right; }
.sc-row-change  { font-size: 14px; text-align: right; }
.sc-row-sigma   { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.sc-sigma-pill  { font-size: 11px; padding: 1px 6px; border-radius: 3px; }
.sc-liq-bucket  { font-size: 10px; opacity: .45; }

/* Share card bands */
.sc-bands-lbl { font-size: 11px; opacity: .3; text-transform: uppercase; letter-spacing: .1em; margin: 12px 0 6px; }
.sc-bands     { display: flex; flex-direction: column; gap: 5px; }
.sc-band      {
  display: grid;
  grid-template-columns: 140px 60px 1fr 90px 70px;
  align-items: center;
  gap: 0 8px;
  font-size: 13px;
}
.sc-band-above { color: #4a9a4a; font-weight: 600; }
.sc-band-below { color: #d46060; font-weight: 600; }
.sc-band-dist  { opacity: .5; font-size: 12px; }
.sc-band-bar-wrap { height: 4px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.sc-band-bar-fill { height: 100%; border-radius: 2px; }
.sc-band-usd   { text-align: right; opacity: .7; font-size: 12px; }
.sc-band-side  { text-align: right; opacity: .3; font-size: 11px; }

.sc-ftr {
  padding: 10px 20px;
  font-size: 10px;
  opacity: .25;
  text-align: right;
}


/* ── HEATMAP LIQ BANDS ────────────────────────────────────── */
#hmBands { padding: 4px 14px 8px; }
.hm-bands-lbl {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .1em;
  color: #52627A;
  margin-bottom: 6px;
}
#hmBands .itp-bands { gap: 3px; }
.hm-band-row {
  display: grid;
  grid-template-columns: 10px 80px 40px 1fr 60px;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}
.hm-band-arrow { font-size: 9px; text-align: center; }
.hm-band-price { font-weight: 500; }
.hm-band-dist  { color: #52627A; text-align: right; }
.hm-band-bar-wrap { height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; }
.hm-band-bar-fill { height: 100%; border-radius: 2px; opacity: 0.7; }
.hm-band-mag   { color: #52627A; text-align: right; }