/* =====================================================================
   BACKTEST V3 — IMPLEMENTAÇÃO REAL (substitui pageBacktest)
   Namespace: .pv-* (Performance V3) — não vaza pra resto da plataforma
   Plugado em: /backtest/report?limit=1000
===================================================================== */

:root {
  --pv-bg-deep: #050715;
  --pv-bg-darker: #08091e;
  --pv-bg-card: rgba(15,18,48,0.55);
  --pv-bg-card-strong: rgba(20,24,58,0.78);
  --pv-glass: rgba(255,255,255,0.08);
  --pv-glass-bright: rgba(255,255,255,0.16);
  --pv-primary: #a78bfa;
  --pv-primary-bright: #c4b5fd;
  --pv-primary-deep: #7c3aed;
  --pv-accent: #22d3ee;
  --pv-accent-bright: #67e8f9;
  --pv-green: #34d399;
  --pv-green-bright: #6ee7b7;
  --pv-green-glow: #10b981;
  --pv-amber: #fbbf24;
  --pv-amber-bright: #fcd34d;
  --pv-gold: #f59e0b;
  --pv-red: #f87171;
  --pv-red-deep: #dc2626;
  --pv-red-glow: #ef4444;
  --pv-blue: #60a5fa;
  --pv-blue-bright: #93c5fd;
  --pv-pink: #ec4899;
  --pv-t1: #f1f5f9;
  --pv-t2: #cbd5e1;
  --pv-t3: #94a3b8;
  --pv-t4: #64748b;
  --pv-t5: #475569;
  --pv-r-md: 12px;
  --pv-r-lg: 18px;
  --pv-r-xl: 22px;
  --pv-r-2xl: 28px;
  --pv-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --pv-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

.pv-page {
  color: var(--pv-t1);
  -webkit-font-smoothing: antialiased;
}
.pv-page * { box-sizing: border-box; }
/* Animação só na PRIMEIRA aparição (one-shot) — evita piscada nos rerenders */
.pv-page.pv-first-paint { animation: pvFadeIn 0.22s ease-out; }
@keyframes pvFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── HEADER PREMIUM ─── */
.pv-hdr {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 22px; padding: 18px 24px; gap: 18px; flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(124,58,237,0.10), rgba(34,211,238,0.06));
  border: 1px solid var(--pv-glass-bright); border-radius: var(--pv-r-xl);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  position: relative; overflow: hidden;
}
.pv-hdr::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle 320px at 100% 0%, rgba(167,139,250,0.16), transparent 70%);
  pointer-events: none;
}
.pv-hdr-left { display: flex; align-items: center; gap: 16px; position: relative; min-width: 0; }
.pv-hdr-ic {
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 14px;
  background: linear-gradient(135deg, var(--pv-primary-deep), var(--pv-primary));
  color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(124,58,237,0.45), inset 0 1px 0 rgba(255,255,255,0.2);
}
.pv-hdr-text { min-width: 0; }
.pv-hdr-title { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--pv-t1); }
.pv-hdr-title span {
  background: linear-gradient(135deg, var(--pv-primary-bright), var(--pv-accent-bright));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pv-hdr-sub { font-size: 0.7rem; color: var(--pv-t3); margin-top: 4px; }
.pv-hdr-right { display: flex; align-items: center; gap: 10px; position: relative; flex-wrap: wrap; }
.pv-hdr-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: 999px;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(52,211,153,0.16); color: var(--pv-green-bright);
  border: 1px solid rgba(52,211,153,0.32);
}
.pv-hdr-pill.off { background: rgba(248,113,113,0.16); color: var(--pv-red); border-color: rgba(248,113,113,0.32); }
.pv-hdr-pill .pd { width: 8px; height: 8px; border-radius: 50%; background: currentColor;
  box-shadow: 0 0 10px currentColor; animation: pvPulse 1.6s infinite; }
@keyframes pvPulse {
  0%,100% { box-shadow: 0 0 4px currentColor; }
  50% { box-shadow: 0 0 14px currentColor; }
}
.pv-share-btn {
  padding: 9px 18px; border-radius: 11px; border: 1px solid rgba(167,139,250,0.32);
  background: rgba(167,139,250,0.10); color: var(--pv-primary-bright);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; font-family: inherit;
  transition: all 0.2s var(--pv-smooth);
}
.pv-share-btn:hover { background: rgba(167,139,250,0.20); transform: translateY(-1px); }

/* ═════════════════ HERO BENTO ═════════════════ */
.pv-hero { display: grid; grid-template-columns: 1.3fr 1fr; gap: 18px; margin-bottom: 18px; }

/* ─── MEGA GAUGE ─── */
.pv-gauge-card {
  position: relative; padding: 36px 32px;
  background: linear-gradient(135deg, rgba(52,211,153,0.10), rgba(34,211,238,0.06));
  border: 1px solid rgba(52,211,153,0.28);
  border-radius: var(--pv-r-2xl);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  overflow: hidden;
}
.pv-gauge-card.warn { background: linear-gradient(135deg, rgba(245,158,11,0.10), rgba(251,191,36,0.06)); border-color: rgba(245,158,11,0.28); }
.pv-gauge-card.bad { background: linear-gradient(135deg, rgba(248,113,113,0.10), rgba(220,38,38,0.06)); border-color: rgba(248,113,113,0.28); }
.pv-gauge-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle 500px at 50% 50%, rgba(52,211,153,0.18), transparent 70%);
  pointer-events: none;
}
.pv-gauge-card.warn::before { background: radial-gradient(circle 500px at 50% 50%, rgba(245,158,11,0.18), transparent 70%); }
.pv-gauge-card.bad::before { background: radial-gradient(circle 500px at 50% 50%, rgba(248,113,113,0.18), transparent 70%); }

.pv-gauge-row { position: relative; display: flex; align-items: center; gap: 32px; justify-content: center; flex-wrap: wrap; }
.pv-gauge { position: relative; width: 240px; height: 240px; flex-shrink: 0; }
.pv-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pv-gauge .bg { stroke: rgba(255,255,255,0.06); }
.pv-gauge .fg {
  stroke: url(#pvGradGreen); stroke-linecap: round;
  filter: drop-shadow(0 0 12px rgba(110,231,183,0.6));
  transition: stroke-dashoffset 1.5s var(--pv-spring);
}
.pv-gauge-card.warn .pv-gauge .fg { stroke: url(#pvGradAmber); filter: drop-shadow(0 0 12px rgba(252,211,77,0.6)); }
.pv-gauge-card.bad .pv-gauge .fg { stroke: url(#pvGradRed); filter: drop-shadow(0 0 12px rgba(248,113,113,0.6)); }

.pv-gauge-inner {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.pv-gauge-inner .pct {
  font-size: 3.6rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1;
  color: var(--pv-green-bright);
  text-shadow: 0 0 30px rgba(110,231,183,0.5);
  font-feature-settings: "tnum";
}
.pv-gauge-card.warn .pv-gauge-inner .pct { color: var(--pv-amber-bright); text-shadow: 0 0 30px rgba(252,211,77,0.5); }
.pv-gauge-card.bad .pv-gauge-inner .pct { color: var(--pv-red); text-shadow: 0 0 30px rgba(248,113,113,0.5); }
.pv-gauge-inner .lbl {
  font-size: 0.55rem; letter-spacing: 0.22em; color: var(--pv-t4);
  text-transform: uppercase; font-weight: 700; margin-top: 6px;
}
.pv-gauge-inner .sub { font-size: 0.66rem; color: var(--pv-t3); margin-top: 4px; font-weight: 600; }

.pv-gauge-stats { display: flex; flex-direction: column; gap: 14px; min-width: 160px; }
.pv-gauge-stat {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  background: rgba(8,9,30,0.55); border: 1px solid var(--pv-glass);
  border-radius: 14px;
}
.pv-gauge-stat .ic { font-size: 1.4rem; flex-shrink: 0; }
.pv-gauge-stat .v { font-size: 1.5rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-feature-settings: "tnum"; }
.pv-gauge-stat.win .v { color: var(--pv-green-bright); }
.pv-gauge-stat.loss .v { color: var(--pv-red); }
.pv-gauge-stat.draw .v { color: var(--pv-amber-bright); }
.pv-gauge-stat .l { font-size: 0.5rem; letter-spacing: 0.18em; color: var(--pv-t4); font-weight: 700; text-transform: uppercase; margin-top: 3px; }

/* ─── 6 KPIs ─── */
.pv-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pv-kpi {
  position: relative; padding: 18px 20px;
  background: var(--pv-bg-card); border: 1px solid var(--pv-glass);
  border-radius: var(--pv-r-lg); overflow: hidden;
  transition: all 0.2s var(--pv-smooth);
}
.pv-kpi:hover { transform: translateY(-3px); border-color: var(--pv-glass-bright); box-shadow: 0 12px 28px rgba(0,0,0,0.3); }
.pv-kpi::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ac), transparent);
}
.pv-kpi.violet { --ac: var(--pv-primary-bright); }
.pv-kpi.green { --ac: var(--pv-green-bright); }
.pv-kpi.amber { --ac: var(--pv-amber-bright); }
.pv-kpi.red { --ac: var(--pv-red); }
.pv-kpi.cyan { --ac: var(--pv-accent-bright); }
.pv-kpi.blue { --ac: var(--pv-blue-bright); }
.pv-kpi-row1 { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.pv-kpi-row1 .ic {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; flex-shrink: 0;
}
.pv-kpi.violet .ic { background: rgba(167,139,250,0.16); color: var(--pv-primary-bright); }
.pv-kpi.green .ic { background: rgba(52,211,153,0.14); color: var(--pv-green-bright); }
.pv-kpi.amber .ic { background: rgba(245,158,11,0.14); color: var(--pv-amber-bright); }
.pv-kpi.red .ic { background: rgba(248,113,113,0.14); color: var(--pv-red); }
.pv-kpi.cyan .ic { background: rgba(34,211,238,0.14); color: var(--pv-accent-bright); }
.pv-kpi.blue .ic { background: rgba(96,165,250,0.14); color: var(--pv-blue-bright); }
.pv-kpi-row1 .trend {
  font-size: 0.54rem; font-weight: 700; padding: 3px 8px; border-radius: 5px;
  background: rgba(52,211,153,0.16); color: var(--pv-green-bright);
  letter-spacing: 0.04em;
}
.pv-kpi-row1 .trend.dn { background: rgba(248,113,113,0.16); color: var(--pv-red); }
.pv-kpi-row1 .trend.am { background: rgba(245,158,11,0.16); color: var(--pv-amber-bright); }
.pv-kpi .v { font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--pv-t1); font-feature-settings: "tnum"; }
.pv-kpi .v.gr { color: var(--pv-green-bright); }
.pv-kpi .v.rd { color: var(--pv-red); }
.pv-kpi .v.am { color: var(--pv-amber-bright); }
.pv-kpi .v.vt { color: var(--pv-primary-bright); }
.pv-kpi .l { font-size: 0.5rem; letter-spacing: 0.18em; color: var(--pv-t4); font-weight: 700; text-transform: uppercase; margin-top: 5px; }
.pv-kpi .s { font-size: 0.6rem; color: var(--pv-t3); margin-top: 4px; }

/* ═════════════════ CARD GENÉRICO ═════════════════ */
.pv-card {
  background: var(--pv-bg-card); border: 1px solid var(--pv-glass);
  border-radius: var(--pv-r-xl); padding: 22px; margin-bottom: 18px;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.pv-card-h {
  display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap;
  font-size: 0.7rem; letter-spacing: 0.16em; color: var(--pv-t2);
  font-weight: 700; text-transform: uppercase;
}
.pv-card-h .ic {
  width: 30px; height: 30px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pv-card-h .meta { margin-left: auto; font-size: 0.58rem; color: var(--pv-t4); letter-spacing: 0.14em; font-weight: 600; }

/* ═════════════════ EVOLUTION CHART ═════════════════ */
.pv-evo-wrap { position: relative; height: 280px; margin-top: 8px; }
.pv-evo-wrap svg { width: 100%; height: 100%; }
.pv-evo-grid { stroke: rgba(255,255,255,0.05); stroke-width: 1; }
.pv-evo-50 { stroke: rgba(248,113,113,0.4); stroke-width: 1; stroke-dasharray: 4 4; }
.pv-evo-area { fill: url(#pvAreaGrad); }
.pv-evo-line {
  fill: none; stroke: url(#pvLineGrad); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(167,139,250,0.5));
}
.pv-evo-dot { fill: #fff; stroke-width: 3; filter: drop-shadow(0 0 8px currentColor); }
.pv-evo-lbl { font-family: "SF Mono", monospace; font-size: 9px; fill: var(--pv-t4); }
.pv-evo-stamp { font-family: -apple-system, sans-serif; font-size: 11px; font-weight: 800; }

.pv-evo-foot {
  display: flex; align-items: center; gap: 18px; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--pv-glass);
  font-size: 0.64rem; color: var(--pv-t3); flex-wrap: wrap;
}
.pv-evo-foot .it { display: flex; align-items: center; gap: 8px; }
.pv-evo-foot .dot { width: 10px; height: 10px; border-radius: 50%; }
.pv-evo-foot .dot.start { background: var(--pv-primary); }
.pv-evo-foot .dot.end { background: var(--pv-green-bright); box-shadow: 0 0 8px var(--pv-green-bright); }
.pv-evo-foot .delta { margin-left: auto; font-weight: 700; color: var(--pv-green-bright); }

/* ═════════════════ DIRECTION SPLIT ═════════════════ */
.pv-dir { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.pv-dir-card {
  position: relative; padding: 24px;
  background: var(--pv-bg-card); border: 1px solid var(--pv-glass);
  border-left-width: 4px; border-radius: var(--pv-r-xl);
  display: flex; align-items: center; gap: 24px; overflow: hidden;
}
.pv-dir-card.call { border-left-color: var(--pv-green-bright); background: linear-gradient(135deg, rgba(52,211,153,0.06), var(--pv-bg-card)); }
.pv-dir-card.put { border-left-color: var(--pv-red); background: linear-gradient(135deg, rgba(248,113,113,0.06), var(--pv-bg-card)); }

.pv-dir-donut { position: relative; width: 110px; height: 110px; flex-shrink: 0; }
.pv-dir-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pv-dir-donut .bg { stroke: rgba(255,255,255,0.06); }
.pv-dir-donut .call-fg { stroke: var(--pv-green-bright); stroke-linecap: round; filter: drop-shadow(0 0 6px var(--pv-green-bright)); }
.pv-dir-donut .put-fg { stroke: var(--pv-red); stroke-linecap: round; filter: drop-shadow(0 0 6px var(--pv-red)); }
.pv-dir-donut-inner {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.pv-dir-donut-inner .v { font-size: 1.5rem; font-weight: 800; line-height: 1; font-feature-settings: "tnum"; }
.pv-dir-donut-inner .v.gr { color: var(--pv-green-bright); }
.pv-dir-donut-inner .v.rd { color: var(--pv-red); }
.pv-dir-donut-inner .l { font-size: 0.46rem; color: var(--pv-t4); letter-spacing: 0.14em; font-weight: 700; margin-top: 2px; text-transform: uppercase; }

.pv-dir-body { flex: 1; min-width: 0; }
.pv-dir-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.62rem; font-weight: 800; padding: 4px 12px; border-radius: 6px;
  letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px;
}
.pv-dir-tag.call { background: rgba(52,211,153,0.18); color: var(--pv-green-bright); border: 1px solid rgba(52,211,153,0.32); }
.pv-dir-tag.put { background: rgba(248,113,113,0.16); color: var(--pv-red); border: 1px solid rgba(248,113,113,0.32); }
.pv-dir-vals { display: flex; gap: 18px; margin-top: 8px; }
.pv-dir-vals .it { display: flex; flex-direction: column; }
.pv-dir-vals .v { font-size: 1.05rem; font-weight: 800; font-feature-settings: "tnum"; }
.pv-dir-vals .v.gr { color: var(--pv-green-bright); }
.pv-dir-vals .v.rd { color: var(--pv-red); }
.pv-dir-vals .v.t1 { color: var(--pv-t1); }
.pv-dir-vals .l { font-size: 0.5rem; color: var(--pv-t4); letter-spacing: 0.14em; font-weight: 700; margin-top: 3px; text-transform: uppercase; }
.pv-dir-pf { margin-top: 10px; font-size: 0.66rem; color: var(--pv-t3); }
.pv-dir-pf b { color: var(--pv-amber-bright); font-weight: 800; }

/* ═════════════════ MARKETS ═════════════════ */
.pv-mk-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pv-mk {
  position: relative; padding: 16px; border-radius: var(--pv-r-lg);
  background: var(--pv-bg-card); border: 1px solid var(--pv-glass);
  transition: all 0.2s var(--pv-smooth); overflow: hidden;
}
.pv-mk:hover { transform: translateY(-3px); border-color: var(--pv-glass-bright); }
.pv-mk-h { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.pv-mk-ic {
  font-size: 1.4rem; width: 36px; height: 36px; border-radius: 10px;
  background: rgba(167,139,250,0.12); color: var(--pv-primary-bright);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.pv-mk-name { font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pv-t1); }
.pv-mk-wr { font-size: 1.7rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-feature-settings: "tnum"; }
.pv-mk-wr.h { color: var(--pv-green-bright); }
.pv-mk-wr.m { color: var(--pv-amber-bright); }
.pv-mk-wr.l { color: var(--pv-red); }
.pv-mk-bar { margin-top: 10px; height: 5px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.pv-mk-bar .fill { height: 100%; border-radius: 3px; animation: pvBarGrow 1s var(--pv-spring); }
@keyframes pvBarGrow { from { width: 0; } }
.pv-mk-bar .fill.h { background: linear-gradient(90deg, var(--pv-green), var(--pv-green-bright)); }
.pv-mk-bar .fill.m { background: linear-gradient(90deg, var(--pv-amber), var(--pv-amber-bright)); }
.pv-mk-bar .fill.l { background: linear-gradient(90deg, var(--pv-red-deep), var(--pv-red)); }
.pv-mk-foot { display: flex; justify-content: space-between; margin-top: 10px; font-size: 0.58rem; color: var(--pv-t4); }
.pv-mk-foot b { color: var(--pv-t2); font-weight: 700; font-feature-settings: "tnum"; }

/* ═════════════════ TOP/WORST ASSETS ═════════════════ */
.pv-tw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pv-asset {
  display: grid; grid-template-columns: 32px 1fr 60px 80px; gap: 12px;
  align-items: center; padding: 11px 14px;
  background: rgba(8,9,30,0.4); border: 1px solid var(--pv-glass);
  border-radius: 11px; margin-bottom: 8px;
  transition: all 0.2s var(--pv-smooth);
}
.pv-asset:hover { transform: translateX(3px); border-color: rgba(167,139,250,0.22); }
.pv-rank {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(167,139,250,0.14); color: var(--pv-primary-bright);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.66rem; font-weight: 800; font-family: "SF Mono", monospace;
}
.pv-asset:nth-child(2) .pv-rank { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #fff; box-shadow: 0 0 12px rgba(245,158,11,0.5); }
.pv-asset:nth-child(3) .pv-rank { background: linear-gradient(135deg, #cbd5e1, #94a3b8); color: #1e293b; }
.pv-asset:nth-child(4) .pv-rank { background: linear-gradient(135deg, #f97316, #c2410c); color: #fff; }
.pv-asset.bad:nth-child(2) .pv-rank { background: linear-gradient(135deg, #dc2626, #7f1d1d); color: #fff; box-shadow: 0 0 12px rgba(220,38,38,0.5); }
.pv-asset.bad:nth-child(3) .pv-rank { background: linear-gradient(135deg, #f87171, #dc2626); color: #fff; }
.pv-asset.bad:nth-child(4) .pv-rank { background: linear-gradient(135deg, #fca5a5, #f87171); color: #fff; }
.pv-sym { font-size: 0.86rem; font-weight: 800; color: var(--pv-t1); letter-spacing: -0.01em; }
.pv-sym .meta { display: block; font-size: 0.54rem; color: var(--pv-t4); font-weight: 500; margin-top: 2px; letter-spacing: 0.08em; }
.pv-wr { font-size: 0.95rem; font-weight: 800; text-align: right; font-family: "SF Mono", monospace; font-feature-settings: "tnum"; }
.pv-wr.h { color: var(--pv-green-bright); }
.pv-wr.m { color: var(--pv-amber-bright); }
.pv-wr.l { color: var(--pv-red); }
.pv-asset-bar { height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.pv-asset-bar .fill { height: 100%; border-radius: 3px; animation: pvBarGrow 1.2s var(--pv-spring); }

/* ═════════════════ HEATMAP ═════════════════ */
.pv-heat-wrap { overflow-x: auto; padding-bottom: 8px; }
.pv-heat { display: grid; grid-template-columns: 90px repeat(24, 1fr); gap: 2px; min-width: 700px; }
.pv-heat-h { font-size: 0.5rem; color: var(--pv-t5); text-align: center; letter-spacing: 0.06em; padding: 4px 0; }
.pv-heat-sym { font-size: 0.62rem; color: var(--pv-t2); font-weight: 700; display: flex; align-items: center; padding-right: 10px; justify-content: flex-end; letter-spacing: -0.01em; }
.pv-heat-cell {
  aspect-ratio: 1; min-height: 24px; border-radius: 3px; cursor: help;
  border: 1px solid rgba(255,255,255,0.04);
  font-size: 0.5rem; color: #fff; text-align: center;
  display: flex; align-items: center; justify-content: center; font-weight: 700;
  transition: transform 0.15s, filter 0.15s;
}
.pv-heat-cell:hover { transform: scale(1.4); filter: brightness(1.4); z-index: 5; position: relative; }
.pv-heat-cell.empty { background: rgba(255,255,255,0.04); color: transparent; }
.pv-heat-cell.l { background: rgba(248,113,113,0.65); color: #fff; }
.pv-heat-cell.m { background: rgba(245,158,11,0.65); color: #1e293b; }
.pv-heat-cell.h { background: rgba(52,211,153,0.65); color: #fff; }
.pv-heat-cell.x { background: rgba(6,214,160,0.85); color: #fff; }
.pv-heat-legend {
  display: flex; align-items: center; gap: 10px; justify-content: center; margin-top: 14px;
  font-size: 0.56rem; color: var(--pv-t4); letter-spacing: 0.08em; flex-wrap: wrap;
}
.pv-heat-legend .scale { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pv-heat-legend .scale span { display: inline-flex; align-items: center; gap: 5px; }
.pv-heat-legend .scale i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.pv-heat-legend .star { margin-left: auto; color: var(--pv-green-bright); font-weight: 700; }

/* ═════════════════ TIMEFRAME GRID ═════════════════ */
.pv-tf-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.pv-tf {
  padding: 14px 12px; border-radius: var(--pv-r-md); text-align: center;
  background: var(--pv-bg-card); border: 1px solid var(--pv-glass);
  transition: all 0.2s var(--pv-smooth);
}
.pv-tf:hover { transform: translateY(-3px); border-color: var(--pv-glass-bright); }
.pv-tf .name { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.16em; color: var(--pv-primary-bright); text-transform: uppercase; }
.pv-tf .wr { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.02em; margin-top: 6px; font-feature-settings: "tnum"; }
.pv-tf .wr.h { color: var(--pv-green-bright); }
.pv-tf .wr.m { color: var(--pv-amber-bright); }
.pv-tf .wr.l { color: var(--pv-red); }
.pv-tf .ct { font-size: 0.55rem; color: var(--pv-t4); margin-top: 3px; }

/* ═════════════════ CONFIDENCE BARS ═════════════════ */
.pv-conf-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.pv-conf {
  padding: 14px; border-radius: var(--pv-r-md);
  background: var(--pv-bg-card); border: 1px solid var(--pv-glass);
}
.pv-conf .range { font-size: 0.58rem; font-weight: 700; letter-spacing: 0.12em; color: var(--pv-t4); text-transform: uppercase; margin-bottom: 6px; }
.pv-conf-row { display: flex; align-items: baseline; gap: 8px; }
.pv-conf-wr { font-size: 1.4rem; font-weight: 800; letter-spacing: -0.02em; font-feature-settings: "tnum"; }
.pv-conf-wr.h { color: var(--pv-green-bright); }
.pv-conf-wr.m { color: var(--pv-amber-bright); }
.pv-conf-wr.l { color: var(--pv-red); }
.pv-conf-ct { font-size: 0.56rem; color: var(--pv-t4); }
.pv-conf-bar { margin-top: 8px; height: 5px; background: rgba(255,255,255,0.06); border-radius: 3px; overflow: hidden; }
.pv-conf-bar .fill { height: 100%; border-radius: 3px; animation: pvBarGrow 1.2s var(--pv-spring); }

/* ═════════════════ HOUR BARS ═════════════════ */
.pv-hour-wrap { display: flex; gap: 5px; align-items: flex-end; flex-wrap: wrap; padding: 14px 0 4px; }
.pv-hour { flex: 1; min-width: 34px; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.pv-hour .pct { font-size: 0.5rem; font-weight: 700; font-feature-settings: "tnum"; }
.pv-hour .pct.h { color: var(--pv-green-bright); }
.pv-hour .pct.m { color: var(--pv-amber-bright); }
.pv-hour .pct.l { color: var(--pv-red); }
.pv-hour .bar {
  width: 100%; border-radius: 4px 4px 0 0;
  animation: pvBarRise 1s var(--pv-spring); transform-origin: bottom;
}
@keyframes pvBarRise { from { transform: scaleY(0); } }
.pv-hour .bar.h { background: linear-gradient(180deg, var(--pv-green-bright), var(--pv-green)); }
.pv-hour .bar.m { background: linear-gradient(180deg, var(--pv-amber-bright), var(--pv-amber)); }
.pv-hour .bar.l { background: linear-gradient(180deg, var(--pv-red), var(--pv-red-deep)); }
.pv-hour .lbl { font-size: 0.48rem; color: var(--pv-t4); font-family: "SF Mono", monospace; }

/* ═════════════════ ALL ASSETS TABLE ═════════════════ */
.pv-tbl-wrap { max-height: 420px; overflow-y: auto; padding-right: 6px; }
.pv-tbl-wrap::-webkit-scrollbar { width: 6px; }
.pv-tbl-wrap::-webkit-scrollbar-thumb { background: rgba(167,139,250,0.3); border-radius: 3px; }
.pv-tbl { width: 100%; border-collapse: collapse; }
.pv-tbl thead { position: sticky; top: 0; background: var(--pv-bg-card-strong); backdrop-filter: blur(12px); z-index: 2; }
.pv-tbl th {
  padding: 12px 14px; font-size: 0.56rem; font-weight: 800;
  letter-spacing: 0.16em; color: var(--pv-t4); text-transform: uppercase; text-align: left;
  border-bottom: 1px solid var(--pv-glass);
}
.pv-tbl th.right { text-align: right; }
.pv-tbl td {
  padding: 11px 14px; font-size: 0.74rem; border-bottom: 1px solid rgba(255,255,255,0.04);
  color: var(--pv-t2);
}
.pv-tbl tr:hover td { background: rgba(167,139,250,0.04); }
.pv-tbl td.sym { font-weight: 800; color: var(--pv-t1); letter-spacing: -0.01em; }
.pv-tbl td.right { text-align: right; font-feature-settings: "tnum"; font-family: "SF Mono", monospace; font-weight: 600; }
.pv-tbl td .wr { font-weight: 800; }
.pv-tbl td .wr.h { color: var(--pv-green-bright); }
.pv-tbl td .wr.m { color: var(--pv-amber-bright); }
.pv-tbl td .wr.l { color: var(--pv-red); }
.pv-tbl td .pill { font-size: 0.5rem; padding: 2px 7px; border-radius: 5px; background: rgba(167,139,250,0.10); color: var(--pv-primary-bright); font-weight: 700; letter-spacing: 0.06em; }
.pv-tbl td .wl { font-size: 0.7rem; }
.pv-tbl td .wl .w { color: var(--pv-green-bright); font-weight: 700; }
.pv-tbl td .wl .l { color: var(--pv-red); font-weight: 700; }

/* ═════════════════ RECENT TRADES ═════════════════ */
.pv-recent { display: flex; flex-direction: column; gap: 6px; max-height: 480px; overflow-y: auto; padding-right: 6px; }
.pv-recent::-webkit-scrollbar { width: 6px; }
.pv-recent::-webkit-scrollbar-thumb { background: rgba(34,211,238,0.3); border-radius: 3px; }
.pv-trade {
  display: grid; grid-template-columns: 90px 56px 60px 60px 1fr 80px; gap: 10px;
  align-items: center; padding: 10px 14px;
  background: rgba(8,9,30,0.4); border: 1px solid var(--pv-glass);
  border-left-width: 3px; border-radius: 10px;
  transition: all 0.2s var(--pv-smooth);
}
.pv-trade.win { border-left-color: var(--pv-green-bright); }
.pv-trade.loss { border-left-color: var(--pv-red); }
.pv-trade.draw { border-left-color: var(--pv-amber-bright); }
.pv-trade:hover { transform: translateX(3px); border-color: rgba(167,139,250,0.22); }
.pv-trade .sym { font-size: 0.78rem; font-weight: 800; color: var(--pv-t1); letter-spacing: -0.01em; }
.pv-trade .dir { font-size: 0.6rem; font-weight: 800; padding: 3px 0; text-align: center; border-radius: 5px; letter-spacing: 0.06em; }
.pv-trade .dir.call { background: rgba(52,211,153,0.16); color: var(--pv-green-bright); }
.pv-trade .dir.put { background: rgba(248,113,113,0.16); color: var(--pv-red); }
.pv-trade .tf { font-size: 0.6rem; color: var(--pv-t4); font-weight: 700; letter-spacing: 0.08em; font-family: "SF Mono", monospace; text-align: center; }
.pv-trade .conf { font-size: 0.66rem; color: var(--pv-primary-bright); font-weight: 700; text-align: center; font-family: "SF Mono", monospace; }
.pv-trade .meta { font-size: 0.6rem; color: var(--pv-t4); font-family: "SF Mono", monospace; }
.pv-trade .res {
  font-size: 0.62rem; font-weight: 800; padding: 4px 12px; border-radius: 6px; text-align: center;
  letter-spacing: 0.08em;
}
.pv-trade .res.win { background: rgba(52,211,153,0.18); color: var(--pv-green-bright); border: 1px solid rgba(52,211,153,0.32); }
.pv-trade .res.loss { background: rgba(248,113,113,0.16); color: var(--pv-red); border: 1px solid rgba(248,113,113,0.32); }
.pv-trade .res.draw { background: rgba(245,158,11,0.16); color: var(--pv-amber-bright); border: 1px solid rgba(245,158,11,0.32); }

/* ═════════════════ FOOTER + EMPTY ═════════════════ */
.pv-foot {
  margin-top: 20px; padding: 14px 22px; text-align: center;
  background: var(--pv-bg-card); border: 1px solid var(--pv-glass);
  border-radius: var(--pv-r-md);
  font-size: 0.6rem; color: var(--pv-t4); letter-spacing: 0.06em;
}
.pv-foot b { color: var(--pv-primary-bright); font-weight: 700; }
.pv-foot code { font-family: "SF Mono", monospace; color: var(--pv-accent-bright); padding: 1px 6px; background: rgba(34,211,238,0.10); border-radius: 4px; }

.pv-empty {
  text-align: center; padding: 60px 24px; color: var(--pv-t4);
}
.pv-empty .ic { font-size: 2.4rem; margin-bottom: 12px; opacity: 0.4; }
.pv-empty .t { font-size: 0.86rem; font-weight: 700; color: var(--pv-t2); margin-bottom: 6px; letter-spacing: -0.01em; }
.pv-empty .s { font-size: 0.7rem; color: var(--pv-t4); line-height: 1.5; max-width: 460px; margin: 0 auto; }
.pv-empty .btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 14px; padding: 8px 16px; border-radius: 9px;
  background: rgba(167,139,250,0.14); color: var(--pv-primary-bright);
  border: 1px solid rgba(167,139,250,0.3); font-size: 0.66rem; font-weight: 700;
  cursor: pointer; letter-spacing: 0.04em; font-family: inherit;
  transition: all 0.2s;
}
.pv-empty .btn:hover { background: rgba(167,139,250,0.22); }

@media (max-width: 1100px) {
  .pv-hero { grid-template-columns: 1fr; }
  .pv-mk-grid { grid-template-columns: repeat(2, 1fr); }
  .pv-tw-grid { grid-template-columns: 1fr; }
  .pv-tf-grid { grid-template-columns: repeat(4, 1fr); }
  .pv-conf-grid { grid-template-columns: repeat(2, 1fr); }
  .pv-dir { grid-template-columns: 1fr; }
  .pv-trade { grid-template-columns: 1fr; gap: 6px; text-align: left; }
}