/* prediction-pro-v2.css · v5.4.12 — Cockpit redesign
 *
 * Visually distinct from /adaptive.html (table-heavy) and /5mins.html
 * (timeline-heavy). Cockpit feel: pulse strip across the top, chart +
 * anatomy side-by-side, equity curve below, then stats + history.
 *
 * Goals:
 *   - At-a-glance: pulse strip answers "what's BTC now, what does the
 *     engine want to do, how confident am I really, how am I doing today"
 *     in one row.
 *   - Signal anatomy: shows WHY the signal is what it is — top contributors,
 *     IC scores, calibration multiplier.
 *   - Equity curve: cumulative PnL trajectory at a glance.
 *   - Multi-TF chart: 1m → 1d via tab switcher.
 */

/* v5.4.12 — Cockpit sections live INSIDE the canonical 1360px main grid
 * so /prediction.html shares font/spacing/width/colours with /index.html
 * and /polymarket.html. Each top-level section (.pulse-strip, .cockpit-grid,
 * .pred-equity, .cockpit-bottom) is registered as a full-row in style.css
 * so it spans both columns at ≥980px. */

/* ───────────── 1. Pulse strip ───────────── */
.pulse-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-2) 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  position: relative;
}
.pulse-strip::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(180deg, rgba(212,175,55,0.30), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.pulse-cell {
  background: linear-gradient(180deg, rgba(18,18,42,0.55) 0%, rgba(11,11,22,0.55) 100%);
  padding: 14px 18px 16px;
  display: flex; flex-direction: column;
  justify-content: center;
  gap: 4px;
  position: relative;
}
/* v5.4.12.1 — match Polymarket .panel h2 (Inter uppercase + gold) instead of
 * Cinzel so prediction.html reads as the same family of pages, not its own. */
.pulse-k {
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  color: var(--gold);
  text-transform: uppercase;
}
.pulse-v {
  font-family: 'JetBrains Mono', monospace;
  font-size: 26px; font-weight: 700;
  color: var(--text);
  letter-spacing: 0.5px;
}
.pulse-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.3px;
}
.pulse-sub.up   { color: var(--up); }
.pulse-sub.down { color: var(--down); }

/* signal cell — accent with side glow */
.pulse-signal-badge {
  font-family: inherit;
  font-size: 18px; font-weight: 700;
  letter-spacing: 2.4px;
  padding: 4px 14px;
  border-radius: 6px;
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid currentColor;
  align-self: flex-start;
  text-transform: uppercase;
  text-shadow: 0 0 12px currentColor;
}
.pulse-signal-badge.long  { color: var(--up); background: rgba(95,211,154,0.10); }
.pulse-signal-badge.short { color: var(--down); background: rgba(224,107,107,0.10); }
.pulse-signal-badge.flat  { color: var(--muted); background: rgba(154,146,194,0.06); border-style: dashed; }

/* calibration cell — show raw → calibrated arrow */
.pulse-calib-row {
  display: flex; align-items: center; gap: 10px;
  font-size: 22px; font-weight: 700;
}
.pulse-conf-raw { color: var(--muted); text-decoration: line-through; opacity: 0.7; }
.pulse-arrow { color: var(--gold-2); font-size: 18px; }
.pulse-conf-cal { color: var(--text); }

.pulse-today-row {
  display: flex; align-items: baseline; gap: 14px;
  font-size: 14px; flex-wrap: wrap;
}
.pulse-today-row b { color: var(--text); font-weight: 700; font-family: 'JetBrains Mono', monospace; font-size: 18px; }
.pulse-today-row i { color: var(--muted); font-style: normal; font-size: 11px; margin-left: 3px; }
.pulse-today-row .mono { font-size: 16px; color: var(--text); }
.pulse-today-row .mono.up { color: var(--up); }
.pulse-today-row .mono.down { color: var(--down); }

/* ───────────── 2. Cockpit grid ─────────────
 * v5.4.12.1 — Re-shape: left column gets chart + active position stacked
 * vertically; right column is signal anatomy filling the full height of
 * the left stack. Eliminates the empty space below chart that appeared
 * when anatomy table was longer than chart panel alone. */
.cockpit-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 1100px) {
  .cockpit-grid { grid-template-columns: 1fr; }
  .pulse-strip { grid-template-columns: repeat(2, 1fr); }
}
.cockpit-left-col {
  display: flex; flex-direction: column; gap: 16px;
  min-width: 0;
}
.cockpit-left-col > .panel { margin: 0; }
/* Right-column anatomy uses flex so contributors table can scroll inside
 * if it overflows the matched height, instead of pushing the panel taller. */
.pred-anatomy { display: flex; flex-direction: column; min-height: 0; }
.pred-anatomy-tbl-wrap { flex: 1; min-height: 0; overflow: auto; }

/* ───────────── Chart panel ───────────── */
.pred-chart-panel { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.pred-chart-head {
  display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap;
}
.pred-chart-symbol { display: inline-flex; align-items: baseline; gap: 6px; }
.pred-chart-pair {
  font-family: inherit; font-weight: 600;
  font-size: 14px; letter-spacing: 1.4px; color: var(--gold); text-transform: uppercase;
}
.pred-chart-tf-label { color: var(--muted); font-size: 12px; font-family: 'JetBrains Mono', monospace; }

.pred-tf-tabs { display: inline-flex; gap: 2px; padding: 2px; border-radius: 6px; background: rgba(11,11,22,0.6); border: 1px solid var(--line); }
.pred-tf-tab {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.5px;
  padding: 5px 10px;
  border-radius: 4px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all 120ms ease;
}
.pred-tf-tab:hover { color: var(--text); background: rgba(212,175,55,0.06); }
.pred-tf-tab.active {
  color: #0B0B14;
  background: linear-gradient(180deg, var(--gold-2), var(--gold-dim));
  box-shadow: 0 0 8px rgba(212,175,55,0.3);
}
.pred-chart-legend {
  margin-left: auto;
  display: inline-flex; gap: 12px;
  font-size: 11px; font-family: 'JetBrains Mono', monospace;
  color: var(--muted);
}
.pred-leg-long  { color: var(--up); }
.pred-leg-short { color: var(--down); }
.pred-leg-win   { color: var(--up); }
.pred-leg-loss  { color: var(--down); }

.pred-tv-chart-host {
  position: relative; width: 100%; min-height: 460px;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: #0B0B14;
}
.pred-chart-loading {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
}

/* ───────────── Active position — live PnL bar ───────────── */
.pred-active-pro { padding: 14px 16px; }
.pred-card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.pred-card-title {
  font-family: inherit; font-weight: 600;
  font-size: 14px; letter-spacing: 1.4px; color: var(--gold);
  text-transform: uppercase;
}
.pred-card-sub { font-size: 11px; font-family: 'JetBrains Mono', monospace; }
.pred-card-sub-head {
  font-family: inherit; font-size: 10px; letter-spacing: 1.2px;
  color: var(--muted); text-transform: uppercase; margin: 12px 0 6px;
  font-weight: 600;
}
.pred-empty { padding: 20px 8px; text-align: center; }

.pred-active-block { display: flex; flex-direction: column; gap: 10px; }
.pred-active-block + .pred-active-block { border-top: 1px solid var(--line); padding-top: 10px; }
.pred-active-row { display: flex; justify-content: space-between; align-items: center; }

/* v5.4.13.1 — "engine direction has changed" notice on active position.
 * Subtle gold left-border + faint background so user notices but isn't alarmed
 * (this is normal predictionEngine hold-to-TP/SL behaviour). */
.pred-active-stale {
  display: inline-block;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--gold);
  padding: 4px 8px;
  background: rgba(244,213,110,0.06);
  border-left: 2px solid var(--gold);
  border-radius: 2px;
  letter-spacing: 0.3px;
  cursor: help;
}
.pred-side-badge {
  font-family: inherit; font-weight: 700;
  font-size: 12px; letter-spacing: 1.6px;
  padding: 4px 10px; border-radius: 4px;
  border: 1px solid currentColor;
  display: inline-flex; align-items: center; gap: 6px;
  text-transform: uppercase;
}
.pred-side-badge.long  { color: var(--up); background: rgba(95,211,154,0.08); }
.pred-side-badge.short { color: var(--down); background: rgba(224,107,107,0.08); }
.pred-side-badge.flat  { color: var(--muted); background: rgba(154,146,194,0.06); border-style: dashed; }
.pred-side-badge.sm { font-size: 10px; letter-spacing: 1.5px; padding: 2px 7px; }

.pred-now-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px 14px; }
.pred-kv { display: flex; flex-direction: column; gap: 2px; }
.pred-kv b { font-size: 14px; color: var(--text); font-family: 'JetBrains Mono', monospace; }
.pred-kv b.ok { color: var(--up); }
.pred-kv b.err { color: var(--down); }
.pred-kv .muted, .pred-kv span { font-size: 10px; letter-spacing: 0.5px; color: var(--muted); }
.pred-kv .ok { color: var(--up); }
.pred-kv .err { color: var(--down); }

/* PnL bar — visualizes how far between SL and TP we are */
.pred-pnl-bar-wrap {
  position: relative; height: 24px;
  background: rgba(11,11,22,0.5);
  border-radius: 4px;
  border: 1px solid var(--line);
  overflow: hidden;
  margin-top: 4px;
}
.pred-pnl-bar-track {
  position: absolute; top: 0; bottom: 0;
  width: 100%;
  background: linear-gradient(90deg,
    rgba(224,107,107,0.20) 0%,
    rgba(224,107,107,0.10) 35%,
    rgba(154,146,194,0.10) 50%,
    rgba(95,211,154,0.10) 65%,
    rgba(95,211,154,0.25) 100%);
}
.pred-pnl-bar-mid { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(244,213,110,0.4); }
.pred-pnl-marker {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold-2);
  box-shadow: 0 0 8px var(--gold-2);
  transition: left 200ms ease;
}
.pred-pnl-bar-labels {
  display: flex; justify-content: space-between;
  font-family: 'JetBrains Mono', monospace; font-size: 10px;
  color: var(--muted); margin-top: 3px;
}

/* ───────────── Signal anatomy ───────────── */
.pred-anatomy { padding: 14px 16px; }
.pred-anatomy-bands {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px; margin-top: 4px;
}
.pred-anat-band {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex; flex-direction: column; gap: 2px;
  background: rgba(18,18,42,0.4);
}
.pred-anat-band-k { font-size: 10px; letter-spacing: 1.2px; color: var(--muted); text-transform: uppercase; font-family: inherit; font-weight: 600; }
.pred-anat-band-v { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600; color: var(--text); }
.pred-anat-band-v.up   { color: var(--up); }
.pred-anat-band-v.down { color: var(--down); }
.pred-anat-band-v.muted { color: var(--muted); }
.pred-anat-band-sub { font-size: 10px; color: var(--muted); font-family: 'JetBrains Mono', monospace; }

.pred-anatomy-table {
  width: 100%; border-collapse: collapse; margin-top: 4px;
  font-size: 12px;
}
.pred-anatomy-table thead th {
  text-align: left;
  font-family: inherit;
  font-size: 10px; font-weight: 600; letter-spacing: 1.2px;
  color: var(--gold); text-transform: uppercase;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
}
.pred-anatomy-table tbody td {
  padding: 5px 8px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-dim);
  border-bottom: 1px solid rgba(42,38,88,0.3);
}
.pred-anatomy-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.pred-anatomy-table .up   { color: var(--up); }
.pred-anatomy-table .down { color: var(--down); }
.pred-anatomy-table .muted { color: var(--muted); }
.pred-anatomy-table .strat-name {
  font-family: 'Inter', sans-serif; color: var(--text); font-size: 12px;
}
.pred-anatomy-table .strat-id { font-size: 10px; color: var(--muted); }

/* ───────────── Equity curve ───────────── */
.pred-equity { padding: 14px 18px; }
.pred-equity-wrap { position: relative; }
.pred-equity-svg {
  width: 100%; height: 180px; display: block;
  background: linear-gradient(180deg, rgba(11,11,22,0.5) 0%, rgba(18,18,42,0.2) 100%);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.pred-equity-axis {
  display: flex; justify-content: space-between;
  margin-top: 4px; font-size: 11px;
}

/* ───────────── Bottom row: stats + history ───────────── */
.cockpit-bottom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 16px;
}
@media (max-width: 1100px) {
  .cockpit-bottom { grid-template-columns: 1fr; }
}

.pred-stats-pro { padding: 14px 16px; }
.pred-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 14px;
}
.pred-stat {
  display: flex; flex-direction: column; gap: 2px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(18,18,42,0.35);
}
.pred-stat-k { font-size: 10px; letter-spacing: 1.2px; color: var(--muted); text-transform: uppercase; font-family: inherit; font-weight: 600; }
.pred-stat-v { font-family: 'JetBrains Mono', monospace; font-size: 16px; font-weight: 600; color: var(--text); }
.pred-stat-v.ok  { color: var(--up); }
.pred-stat-v.err { color: var(--down); }

.pred-history-pro { padding: 14px 16px; display: flex; flex-direction: column; min-height: 0; }
.pred-history-wrap { overflow: auto; max-height: 520px; border-top: 1px solid var(--line); }
.pred-history-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pred-history-table thead th {
  position: sticky; top: 0;
  text-align: left;
  font-family: inherit;
  font-size: 10px; font-weight: 600; letter-spacing: 1.4px;
  color: var(--gold); text-transform: uppercase;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: rgba(11,11,22,0.95);
  backdrop-filter: blur(4px);
}
.pred-history-table tbody td {
  padding: 6px 10px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-dim);
  border-bottom: 1px solid rgba(42,38,88,0.3);
}
.pred-history-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.pred-history-table .ok  { color: var(--up); }
.pred-history-table .err { color: var(--down); }
.pred-history-table .muted { color: var(--muted); }