/* ── Chart Layout ────────────────────────────────────────────────────────── */
#panel-chart  { height: 100%; overflow: hidden; }
#chart-layout {
  display: grid; grid-template-columns: 1fr 280px 160px;
  height: calc(100vh - 148px); min-height: 500px; overflow: hidden;
  border: 1px solid var(--border);
}
#chart-left {
  background: var(--surface); overflow: hidden; height: 100%;
  position: relative; border-right: 1px solid var(--border);
}
#tv-widget { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 100% !important; height: 100% !important; }

/* ── Order Book ──────────────────────────────────────────────────────────── */
#chart-right {
  background: var(--surface); display: flex; flex-direction: column;
  font-family: var(--mono); font-size: 11px; overflow: hidden;
  height: 100%; border-right: 1px solid var(--border);
}
#ob-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 8px 10px; background: var(--bg2); border-bottom: 2px solid var(--green);
  color: var(--white); flex-shrink: 0;
}
#ob-symbol { font-size: 12px; font-weight: 700; letter-spacing: .05em; color: var(--white); }
.ob-sub    { font-size: 9px; letter-spacing: .1em; color: var(--dim); margin-top: 2px; }
.ob-key    { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ob-val    { font-size: 11px; font-weight: 600; color: var(--white); }
#ob-stats  { display: flex; gap: 10px; }
.ob-stat   { text-align: right; }

/* Tick size buttons */
#ob-tick-bar {
  display: flex; align-items: center; gap: 4px; padding: 5px 8px;
  background: var(--bg1); border-bottom: 1px solid var(--border); flex-shrink: 0;
}
#ob-tick-bar .ob-key { color: var(--dim); margin-right: 4px; }
.tick-btn {
  padding: 2px 6px; font-family: var(--mono); font-size: 10px; font-weight: 500;
  border: 1px solid var(--border2); background: var(--surface); color: var(--dim);
  cursor: pointer; transition: all .15s;
}
.tick-btn:hover  { border-color: var(--green); color: var(--green); }
.tick-btn.active { background: var(--green); color: #fff; border-color: var(--green); }

/* Depth curve */
#ob-depth-wrap {
  height: 80px; background: var(--bg1); border-bottom: 1px solid var(--border);
  flex-shrink: 0; overflow: hidden; position: relative;
}
#ob-depth-canvas { display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* Spoof alert */
#ob-spoof {
  background: var(--amber-bg); border-bottom: 1px solid var(--amber); color: var(--amber);
  font-size: 9px; font-weight: 600; padding: 3px 8px; letter-spacing: .03em;
  flex-shrink: 0; animation: flash .5s ease infinite alternate; display: none;
}
@keyframes flash { from{opacity:1}to{opacity:.5} }

/* Column headers */
.ob-cols-hdr {
  display: grid; grid-template-columns: 80px 1fr 1fr;
  padding: 3px 8px; font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--dim); background: var(--bg1);
  border-bottom: 1px solid var(--border); flex-shrink: 0;
}

/* Ask/bid panels */
#ob-asks-wrap { flex: 1; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; }
#ob-bids-wrap { flex: 1; overflow: hidden; }
#ob-asks, #ob-bids { width: 100%; }

/* Order rows */
.ob-row {
  display: grid; grid-template-columns: 80px 1fr 1fr;
  align-items: center; padding: 2px 8px; position: relative;
  transition: background .1s; cursor: default;
}
.ob-row:hover { background: var(--bg1); }
.ob-wall     { background: rgba(255,200,0,.07) !important; }
.ob-wall-val { color: #b8860b !important; font-weight: 700 !important; }
.ob-bg-bar   { position: absolute; top: 0; bottom: 0; right: 0; pointer-events: none; transition: width .12s ease, opacity .12s ease; }
.ask-bg  { background: #c0392b; }
.ask-cum { background: rgba(192,57,43,.08); width: 100% !important; }
.bid-bg  { background: var(--green); }
.bid-cum { background: rgba(0, 180, 90, .06); width: 100% !important; }
.ob-price   { font-weight: 600; font-size: 11px; position: relative; z-index: 1; letter-spacing: -.01em; }
.ob-usd     { text-align: right; font-size: 10px; font-weight: 500; position: relative; z-index: 1; color: var(--white); }
.ob-cum-val { text-align: right; font-size: 10px; color: var(--dimmer); position: relative; z-index: 1; }

/* Mid price + WS dot */
#ob-mid {
  display: flex; align-items: center; justify-content: space-between;
  padding: 5px 8px; background: var(--bg1);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); flex-shrink: 0;
}
#ob-mid-inner { display: flex; align-items: center; gap: 8px; }
#ob-mid-price { font-size: 14px; font-weight: 700; transition: color .3s; }
#ob-mid-dir   { font-size: 12px; font-weight: 700; }
#ob-spread, #ob-spread-pct, #ob-imbal-num { font-size: 10px; color: var(--dimmer); }
.ws-dot         { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; transition: background .3s; }
.ws-on          { background: #7fff9a; box-shadow: 0 0 4px #00ff55; }
.ws-connecting  { background: #ffd700; animation: pulse 1s infinite; }
.ws-off         { background: #ff6060; }

/* Footer */
#ob-footer { padding: 6px 8px; background: var(--bg1); border-top: 1px solid var(--border); flex-shrink: 0; }
.ob-imbal-bar-wrap { display: flex; height: 5px; border-radius: 3px; overflow: hidden; margin-bottom: 5px; }
.ob-imbal-seg      { height: 100%; transition: width .3s ease; }
.ob-imbal-seg.bid  { background: var(--green); }
.ob-imbal-seg.ask  { background: var(--red); }
#ob-imbal-labels   { display: flex; justify-content: space-between; font-size: 10px; color: var(--dim); }

/* ── Trades Tape ─────────────────────────────────────────────────────────── */
#chart-tape {
  background: var(--surface); display: flex; flex-direction: column;
  font-family: var(--mono); font-size: 10px; overflow: hidden; height: 100%;
}
#tape-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px; background: var(--bg2); border-bottom: 2px solid var(--green);
  color: var(--white); font-size: 11px;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase; flex-shrink: 0;
}
#tape-cols {
  display: grid; grid-template-columns: 1fr 44px 52px;
  padding: 3px 6px; font-size: 9px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dim); background: var(--bg1); border-bottom: 1px solid var(--border); flex-shrink: 0;
}
#tape-rows    { flex: 1; overflow: hidden; }
.tape-row {
  display: grid; grid-template-columns: 1fr 44px 52px;
  padding: 2px 6px; position: relative; transition: background .1s; align-items: center;
}
.tape-bar   { position: absolute; top: 0; bottom: 0; left: 0; pointer-events: none; transition: width .1s; }
.tape-large { font-weight: 700; }
.tape-price { font-size: 10px; font-weight: 600; position: relative; z-index: 1; }
.tape-qty   { text-align: right; color: var(--dim); font-size: 9px; position: relative; z-index: 1; }
.tape-time  { text-align: right; color: var(--dimmer); font-size: 9px; position: relative; z-index: 1; }

/* ═══════════════════════════════════════════════════════════════════════
   Phase 5: chart.js & funding.js inline style replacements
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Chart sub-tab bar ───────────────────────────────────────────────── */
#chart-subtabs { display: flex; background: var(--bg1); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.ctab-btn {
  padding: 7px 16px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: transparent;
  color: var(--dim);
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .15s, background .15s, border-color .15s;
}
.ctab-btn:hover         { color: var(--white); }
.ctab-btn.active-ctab   { background: var(--green); color: #fff; border-bottom: 2px solid var(--green); }

/* ── Chart sub-tab panels (hide-by-default, toggled by JS class) ────── */
#ctab-panel-0, #ctab-panel-1, #ctab-panel-2 {
  display: none;
  flex: 1;
  overflow: hidden;
  height: calc(100% - 35px); /* subtract subtab bar height */
}
/* JS adds .active-ctab to reveal the active panel */
#ctab-panel-0.active-ctab,
#ctab-panel-1.active-ctab,
#ctab-panel-2.active-ctab { display: flex; }

/* ── Funding panel (fp-*) ────────────────────────────────────────────── */
#funding-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  background: var(--bg1);
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
}
.fp-header-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--dim);
}
#funding-updated { font-size: 9px; color: var(--dimmer); }
#funding-body    { padding: 0; }
.fp-no-data      { padding: 12px; font-size: 11px; color: var(--dim); }

.fp-table  { width: 100%; border-collapse: collapse; font-family: var(--mono); }
.fp-thead-row { border-bottom: 2px solid var(--border); }
.fp-th {
  padding: 5px 14px;
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--dimmer);
  font-weight: 600;
  text-align: left;
}
.fp-row        { border-bottom: 1px solid var(--border); }
.fp-td-ex      { padding: 8px 14px; font-size: 11px; font-weight: 700; color: var(--white); white-space: nowrap; }
.fp-td-err     { padding: 7px 14px; font-size: 10px; color: #555; } /* error cell */
.fp-td-ex-err  { padding: 7px 14px; font-size: 11px; font-weight: 600; color: var(--dim); }
.fp-td-rate    { padding: 8px 14px; font-size: 12px; font-weight: 700; font-family: var(--mono); /* color inline */ }
.fp-td-annual  { padding: 8px 14px; font-size: 10px; font-family: var(--mono); /* color inline */ }
.fp-td-basis   { padding: 8px 14px; font-size: 10px; font-family: var(--mono); /* color inline */ }
.fp-td-mark    { padding: 8px 14px; font-size: 10px; color: var(--dim); font-family: var(--mono); }
.fp-td-next    { padding: 8px 14px; font-size: 10px; color: var(--dimmer); font-family: var(--mono); }

.fp-divergence {
  margin: 10px 14px;
  padding: 8px 12px;
  border: 1px solid #f59e0b;
  background: rgba(245,158,11,0.08);
  font-family: var(--mono);
}
.fp-div-label  { font-size: 9px; font-weight: 700; letter-spacing: .12em; color: #f59e0b; }
.fp-div-detail { font-size: 10px; color: var(--dim); margin-left: 10px; }

.fp-signal      { margin: 8px 14px 10px; padding: 6px 10px; background: var(--bg1); border-left: 3px solid; /* color inline */ }
.fp-signal-text { font-size: 10px; font-weight: 700; font-family: var(--mono); /* color inline */ }

/* ── Phase 7: Chart panel toolbar (shared by VPVR + CVD panels) ─────── */
.chart-panel-tb {
  height: 28px; display: flex; align-items: center; gap: 6px;
  padding: 0 10px; background: #0f0f0f;
  border-bottom: 1px solid #1e1e1e; flex-shrink: 0;
}
.chart-panel-title {
  font: 700 10px 'IBM Plex Mono', monospace;
  letter-spacing: .1em; color: #888; margin-right: 4px;
}
.chart-tb-btns { display: flex; gap: 3px; }
.chart-tb-sep  { width: 1px; height: 14px; background: #2a2a2a; margin: 0 4px; flex-shrink: 0; }
.chart-tb-sep-inline { width: 1px; height: 14px; background: #2a2a2a; margin: 0 6px; display: inline-block; flex-shrink: 0; }
.chart-tb-btn {
  padding: 1px 7px; font: 700 9px 'IBM Plex Mono', monospace;
  border: 1px solid #2a2a2a; cursor: pointer; letter-spacing: .06em;
  background: transparent; color: #555;
}
.chart-tb-btn.active { background: #01411C; color: #fff; }

/* VPVR stats bar */
.vpvr-stats-bar {
  height: 22px; display: flex; align-items: center; gap: 16px; padding: 0 10px;
  background: #0d0d0d; border-bottom: 1px solid #1a1a1a; flex-shrink: 0;
  font: 400 9px 'IBM Plex Mono', monospace;
}
.vpvr-stats-loading { color: #444; }
.vpvr-stats-poc     { color: #fbbf24; }
.vpvr-stats-sep     { color: #555; }
.vpvr-stats-va      { color: #4ade80; }
.vpvr-canvas        { display: block; flex: 1; }

/* CVD header stats (initial color; JS overrides dynamically via style.color) */
.cvd-trend-stat { font: 700 10px 'IBM Plex Mono', monospace; letter-spacing: .08em; color: #555; }
.cvd-delta-stat { font: 400 9px 'IBM Plex Mono', monospace; color: #555; }
.cvd-buy-stat   { font: 400 9px 'IBM Plex Mono', monospace; color: #4ade80; }
.cvd-sell-stat  { font: 400 9px 'IBM Plex Mono', monospace; color: #f87171; }
.cvd-div-stat   { font: 700 9px 'IBM Plex Mono', monospace; margin-left: 4px; }
.cvd-bar-count  { margin-left: auto; font: 400 9px 'IBM Plex Mono', monospace; color: #333; }