/* ==========================================================================
   Performance page — extends assets/css/style.css design tokens.
   Adds two categorical accents (--violet, --blue) used only for
   multi-series data-viz (dominance donut, sector/treemap colouring)
   where teal/beam/red alone can't distinguish 4+ categories.
   ========================================================================== */
:root{
  --violet: #9B8AFB;
  --blue: #5B9DD9;
}

.perf-live-tag{
  display:inline-flex; align-items:center; gap:8px; margin-top:18px;
}
.perf-live-tag .pulse{ background:var(--teal); box-shadow:0 0 8px var(--teal); }

/* ---------- HERO DASHBOARD ---------- */
.perf-hero-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;
}
@media(max-width:980px){ .perf-hero-grid{grid-template-columns:repeat(2,1fr);} }
@media(max-width:520px){ .perf-hero-grid{grid-template-columns:1fr 1fr;} }

.perf-card{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:22px 20px; transition:border-color 0.3s, transform 0.2s;
  display:flex; flex-direction:column; gap:10px; min-height:132px;
}
.perf-card:hover{ border-color:rgba(255,194,75,0.35); transform:translateY(-2px); }
.pc-label{
  font-family:'JetBrains Mono'; font-size:10.5px; color:var(--muted);
  text-transform:uppercase; letter-spacing:0.5px; display:flex; justify-content:space-between; align-items:center;
}
.pc-range{ color:var(--beam); }
.pc-value{ font-family:'JetBrains Mono'; font-size:24px; font-weight:600; line-height:1; }
.pc-value.up{ color:var(--teal); } .pc-value.down{ color:var(--red); }
.pc-sub{ font-family:'JetBrains Mono'; font-size:11px; color:var(--muted); margin-top:auto; }
.pc-spark{ margin-top:auto; opacity:0.9; }
.pc-bar{ width:100%; height:5px; border-radius:4px; background:var(--panel-2); overflow:hidden; margin-top:auto; }
.pc-bar .fill{ height:100%; border-radius:4px; background:var(--beam); transition:width 0.6s ease; }
.pc-bar.dual{ display:flex; }
.pc-bar.dual .fill.g{ background:var(--teal); border-radius:4px 0 0 4px; }
.pc-bar.dual .fill.r{ background:var(--red); border-radius:0 4px 4px 0; }
.pc-chip{
  align-self:flex-start; font-family:'JetBrains Mono'; font-size:10.5px; padding:3px 9px; border-radius:20px;
  border:1px solid var(--line); color:var(--muted);
}
.pc-chip.greed{ color:var(--teal); border-color:rgba(79,209,197,0.35); background:rgba(79,209,197,0.08); }
.pc-chip.fear{ color:var(--red); border-color:rgba(255,107,107,0.35); background:rgba(255,107,107,0.08); }
.pc-chip.neutral{ color:var(--beam); border-color:rgba(255,194,75,0.35); background:rgba(255,194,75,0.08); }

/* ---------- TABS / SEGMENTED CONTROL ---------- */
.perf-tabs{ display:inline-flex; gap:2px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:4px; margin-bottom:26px; }
.perf-tab{
  font-family:'JetBrains Mono'; font-size:12.5px; color:var(--muted); background:none; border:none; cursor:pointer;
  padding:8px 16px; border-radius:7px; transition:background 0.2s, color 0.2s;
}
.perf-tab:hover{ color:var(--text); }
.perf-tab.active{ background:var(--beam); color:#181205; font-weight:600; }

/* ---------- TREND PANEL ---------- */
.trend-panel{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:28px; }
.trend-head{ display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:16px; margin-bottom:8px; }
.trend-title{ font-family:'Space Grotesk'; font-size:15px; font-weight:600; color:var(--muted); }
.trend-value{ font-family:'JetBrains Mono'; font-size:28px; font-weight:600; margin-top:6px; }
.trend-delta{ font-size:15px; margin-left:10px; }
.trend-delta.up{ color:var(--teal); } .trend-delta.down{ color:var(--red); }
#marketTrendCanvas{ width:100%; height:280px; display:block; border-radius:8px; background:var(--panel-2); margin-top:14px; }
.trend-mini-stats{ display:flex; gap:34px; margin-top:20px; flex-wrap:wrap; }
.trend-mini-stats div .n{ font-family:'JetBrains Mono'; font-size:15px; font-weight:600; }
.trend-mini-stats div .l{ font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:0.4px; margin-top:3px; }

/* ---------- MOVERS TABLES ---------- */
.movers-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media(max-width:980px){ .movers-grid{grid-template-columns:1fr;} }
.mover-panel{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:24px; overflow-x:auto; }
.mover-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.mover-head h3{ font-family:'Space Grotesk'; font-size:16px; font-weight:600; }
.mover-count{ font-family:'JetBrains Mono'; font-size:11px; color:var(--muted); }
table.mover-table{ width:100%; border-collapse:collapse; min-width:560px; }
.mover-table thead th{
  text-align:left; font-family:'JetBrains Mono'; font-size:10.5px; color:var(--muted); text-transform:uppercase;
  letter-spacing:0.4px; padding:0 10px 10px; border-bottom:1px solid var(--line); cursor:pointer; user-select:none;
  white-space:nowrap;
}
.mover-table thead th:hover{ color:var(--text); }
.mover-table thead th.sorted{ color:var(--beam); }
.mover-table thead th .arrow{ font-size:9px; margin-left:3px; }
.mover-table tbody td{ padding:12px 10px; border-bottom:1px solid var(--line); font-size:13.5px; white-space:nowrap; }
.mover-table tbody tr:last-child td{ border-bottom:none; }
.mover-table tbody tr{ transition:background 0.2s; }
.mover-table tbody tr:hover{ background:var(--panel-2); }
.mt-coin{ display:flex; align-items:center; gap:8px; font-family:'Space Grotesk'; font-weight:600; }
.mt-coin .sym-dot{ width:7px; height:7px; border-radius:50%; }
.mt-coin .cname{ color:var(--muted); font-weight:400; font-size:12px; }
.mt-num{ font-family:'JetBrains Mono'; }
.mt-num.up{ color:var(--teal); } .mt-num.down{ color:var(--red); }
.mt-rank{ font-family:'JetBrains Mono'; color:var(--muted); }

/* ---------- SECTOR PERFORMANCE ---------- */
.sector-grid{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:1px; background:var(--line);
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
}
@media(max-width:980px){ .sector-grid{grid-template-columns:repeat(3,1fr);} }
@media(max-width:620px){ .sector-grid{grid-template-columns:repeat(2,1fr);} }
.sector-card{ background:var(--panel); padding:22px 20px; transition:background 0.3s; }
.sector-card:hover{ background:var(--panel-2); }
.sector-top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.sector-name{ font-family:'Space Grotesk'; font-size:14px; font-weight:600; }
.sector-trend-icon svg{ width:14px; height:14px; }
.sector-trend-icon.up svg{ color:var(--teal); } .sector-trend-icon.down svg{ color:var(--red); }
.sector-share-bar{ height:4px; border-radius:4px; background:var(--panel-2); overflow:hidden; margin-bottom:14px; }
.sector-share-bar .fill{ height:100%; background:var(--beam); border-radius:4px; transition:width 0.6s ease; }
.sector-stats{ display:flex; justify-content:space-between; gap:6px; }
.sector-stats > div{ display:flex; flex-direction:column; gap:3px; }
.sector-stats .lbl{ font-family:'JetBrains Mono'; font-size:9.5px; color:var(--muted); text-transform:uppercase; }
.sector-stats .val{ font-family:'JetBrains Mono'; font-size:12.5px; font-weight:600; }
.sector-stats .val.up{ color:var(--teal); } .sector-stats .val.down{ color:var(--red); }

/* ---------- HEATMAP ---------- */
.heatmap-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(110px, 1fr)); gap:6px; position:relative;
}
.heat-tile{
  border-radius:8px; padding:12px 10px; cursor:default; transition:transform 0.15s ease, filter 0.15s ease;
  display:flex; flex-direction:column; justify-content:space-between; min-height:70px; border:1px solid rgba(255,255,255,0.04);
}
.heat-tile:hover{ transform:translateY(-3px) scale(1.03); filter:brightness(1.12); z-index:2; }
.heat-tile .ht-sym{ font-family:'Space Grotesk'; font-weight:700; font-size:13px; }
.heat-tile .ht-chg{ font-family:'JetBrains Mono'; font-size:12px; margin-top:8px; }
.heat-tooltip{
  position:fixed; pointer-events:none; background:var(--panel-2); border:1px solid var(--line); border-radius:8px;
  padding:9px 12px; font-family:'JetBrains Mono'; font-size:12px; z-index:500; opacity:0; transition:opacity 0.12s ease;
  box-shadow:0 12px 30px -10px rgba(0,0,0,0.6); white-space:nowrap;
}
.heat-tooltip.show{ opacity:1; }
.heat-tooltip .htt-name{ color:var(--muted); margin-right:8px; }

/* ---------- MARKET DISTRIBUTION (treemap-lite) ---------- */
.treemap{ display:flex; flex-wrap:wrap; gap:3px; height:220px; border-radius:12px; overflow:hidden; }
.treemap-seg{
  display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:14px 16px;
  min-width:70px; transition:filter 0.15s ease; font-family:'Space Grotesk';
}
.treemap-seg:hover{ filter:brightness(1.15); }
.treemap-seg .ts-name{ font-size:13px; font-weight:600; color:#0E1116; }
.treemap-seg .ts-pct{ font-family:'JetBrains Mono'; font-size:12px; color:#0E1116; opacity:0.75; margin-top:4px; }
.treemap-legend{ display:flex; flex-wrap:wrap; gap:16px; margin-top:20px; }
.tl-item{ display:flex; align-items:center; gap:8px; font-family:'JetBrains Mono'; font-size:12px; color:var(--muted); }
.tl-swatch{ width:10px; height:10px; border-radius:3px; flex-shrink:0; }

/* ---------- DOMINANCE + VOLATILITY (shared two-col layout) ---------- */
.viz-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media(max-width:900px){ .viz-grid{grid-template-columns:1fr;} }
.viz-panel{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:30px; }
.viz-panel h3{ font-family:'Space Grotesk'; font-size:15px; font-weight:600; margin-bottom:22px; }

.dominance-body{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; justify-content:center; }
#dominanceDonut{ width:190px; height:190px; }
.dominance-legend{ display:flex; flex-direction:column; gap:14px; min-width:180px; }
.dl-item{ display:flex; align-items:center; gap:10px; }
.dl-swatch{ width:11px; height:11px; border-radius:3px; flex-shrink:0; }
.dl-name{ font-size:13.5px; flex:1; }
.dl-val{ font-family:'JetBrains Mono'; font-weight:600; font-size:13.5px; }

.volatility-body{ display:flex; flex-direction:column; align-items:center; text-align:center; }
#volGauge{ width:100%; max-width:280px; height:150px; }
.volatility-score{ font-family:'JetBrains Mono'; font-size:38px; font-weight:600; margin-top:-30px; }
.volatility-label{ font-family:'JetBrains Mono'; font-size:13px; margin-top:4px; letter-spacing:0.3px; }
.volatility-trend{ color:var(--muted); font-size:12.5px; margin-top:10px; }

/* ---------- MARKET PULSE (ambient premium section) ---------- */
.market-pulse{
  position:relative; overflow:hidden; border-radius:20px; margin:0 6vw;
  padding:90px 6vw; text-align:center; background:var(--panel);
  border:1px solid var(--line);
}
@media(max-width:820px){ .market-pulse{ margin:0 4vw; padding:70px 5vw; } }
.mp-glow{
  position:absolute; inset:-20%; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse 500px 380px at 20% 30%, rgba(255,194,75,0.14), transparent 60%),
    radial-gradient(ellipse 460px 380px at 80% 70%, rgba(79,209,197,0.12), transparent 60%);
  animation: mp-pan 18s ease-in-out infinite alternate;
}
@keyframes mp-pan{
  0%{ transform:translate(0,0) scale(1); }
  100%{ transform:translate(3%, -2%) scale(1.08); }
}
.mp-particle{
  position:absolute; border-radius:50%; filter:blur(1px); pointer-events:none; z-index:0;
  background:radial-gradient(circle, rgba(255,223,160,0.55), transparent 70%);
  animation: mp-float 14s ease-in-out infinite;
}
@keyframes mp-float{
  0%, 100%{ transform:translate(0,0); opacity:0.5; }
  50%{ transform:translate(14px,-22px); opacity:0.9; }
}
.mp-content{ position:relative; z-index:2; max-width:640px; margin:0 auto; }
.market-pulse h2{ font-family:'Space Grotesk'; font-weight:600; font-size:clamp(26px,3.4vw,38px); margin-top:14px; letter-spacing:-0.4px; }
.market-pulse .kicker{ justify-content:center; }
.market-pulse > .mp-content > p{ color:var(--muted); margin-top:14px; font-size:15px; line-height:1.6; }
.mp-stats{ display:flex; justify-content:center; gap:36px; margin-top:32px; flex-wrap:wrap; }
.mp-stats div .n{ font-family:'JetBrains Mono'; font-size:20px; font-weight:600; }
.mp-stats div .l{ font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:0.4px; margin-top:4px; }

@media (prefers-reduced-motion: reduce){
  .mp-glow, .mp-particle{ animation:none; }
}

/* ---------- misc ---------- */
.perf-section-gap{ margin-top:60px; }
.pc-updated{ display:inline-block; margin-left:6px; font-family:'JetBrains Mono'; font-size:12.5px; color:var(--muted); opacity:0.75; }