/<script>).
     For production, split into separate files to remove 'unsafe-inline' entirely.
     See proxy/worker.js for the server-side API key solution. -->
<meta http-equiv="Content-Security-Policy"
      content="default-src 'self';
               script-src 'self' 'unsafe-inline';
               style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
               font-src https://fonts.gstatic.com;
               connect-src https://api.coingecko.com;
               img-src 'self' data:;
               frame-ancestors 'none';
               base-uri 'self';
               form-action 'none';">
<meta http-equiv="X-Content-Type-Options" content="nosniff">
<meta http-equiv="X-Frame-Options" content="DENY">
<meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin">
<meta http-equiv="Permissions-Policy" content="camera=(), microphone=(), geolocation=()">

<!-- Open Graph / Social — DEPLOY: replace YOUR-DOMAIN.com with your production URL -->
<meta property="og:type" content="website">
<meta property="og:title" content="Pi Network · Analytics Dashboard 2026">
<meta property="og:description" content="Comprehensive Pi Network analytics dashboard: real-time KPIs, 2026–2036 forecasts, risk assessment and decision tool.">
<meta property="og:image" content="https://YOUR-DOMAIN.com/assets/og-preview.png">
<meta property="og:url" content="https://YOUR-DOMAIN.com">
<meta property="og:locale" content="en_US">
<meta property="og:site_name" content="Pi Dashboard">

<!-- Twitter Card — DEPLOY: replace YOUR-DOMAIN.com -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Pi Network · Analytics Dashboard 2026">
<meta name="twitter:description" content="Comprehensive Pi Network analytics dashboard: KPIs, forecasts and risk assessment.">
<meta name="twitter:image" content="https://YOUR-DOMAIN.com/assets/og-preview.png">

<title>Pi Network · Analytics Dashboard 2026</title>

<!-- Favicon -->
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='15' fill='%237C4DFF'/%3E%3Ctext x='16' y='22' font-family='system-ui' font-size='20' font-weight='800' fill='white' text-anchor='middle'%3E%CF%80%3C/text%3E%3C/svg%3E">

<!-- Google Fonts — preconnect + link -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Mono:wght@400;500&display=swap"
      crossorigin>

<style>
/* ────────────────────────────────────────
   DESIGN SYSTEM
──────────────────────────────────────── */
:root {
  --c-bg:       #09090f;
  --c-surface:  #111119;
  --c-surface2: #18182a;
  --c-border:   rgba(120, 80, 220, 0.20);
  --c-border-h: rgba(160, 120, 255, 0.45);

  --c-pi:       #7C4DFF;
  --c-pi-soft:  #A57EFF;
  --c-pi-dim:   rgba(124, 77, 255, 0.12);

  --c-gold:     #F0B429;
  --c-red:      #F45B69;
  --c-green:    #00D68F;
  --c-blue:     #4DA6FF;

  --c-text:     #EEEAF8;
  --c-text-2:   #9898C0;
  --c-text-3:   #8888B0;

  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  20px;
  --radius-xl:  28px;

  --shadow: 0 2px 20px rgba(0,0,0,0.4);

  --font-display: 'Syne', system-ui, sans-serif;
  --font-mono:    'DM Mono', 'Courier New', monospace;
  --font-body:    'Syne', system-ui, sans-serif;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
button, a { cursor: pointer; }
[hidden] { display: none !important; }

/* ── ACCESSIBILITY ── */
:focus-visible {
  outline: 2px solid var(--c-pi-soft);
  outline-offset: 3px;
  border-radius: 4px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── AMBIENT BACKGROUND ── */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 800px 600px at -10% -5%,  rgba(124,77,255,.10) 0%, transparent 60%),
    radial-gradient(ellipse 600px 500px at 110% 110%, rgba(165,126,255,.06) 0%, transparent 60%);
}

/* ── LAYOUT ── */
.page { position: relative; z-index: 1; }
.container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── SKIP LINK ── */
.skip-link {
  position: absolute; top: -100px; left: 16px;
  background: var(--c-pi); color: #fff;
  padding: 8px 16px; border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 700;
  text-decoration: none; z-index: 9999;
  transition: top 0.2s;
}
.skip-link:focus { top: 16px; }

/* ────────────────────────────────────────
   NAV
──────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(9, 9, 15, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--c-border);
}
.nav__inner {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 24px; height: 58px;
}
.nav__logo {
  font-size: 18px; font-weight: 800;
  letter-spacing: -0.03em; text-decoration: none;
  background: linear-gradient(130deg, #fff 30%, var(--c-pi-soft));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  flex-shrink: 0;
}
.nav__links {
  display: flex; align-items: center; gap: 4px;
  list-style: none;
}
.nav__links a {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--c-text-2); text-decoration: none;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 6px 12px; border-radius: var(--radius-sm);
  transition: color 0.2s, background 0.2s;
}
.nav__links a:hover,
.nav__links a:focus-visible {
  color: var(--c-pi-soft);
  background: var(--c-pi-dim);
}
.nav__badge {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-green); flex-shrink: 0;
}
.nav__badge::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--c-green);
  animation: pulse-dot 2.5s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse-dot {
  0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(0,214,143,.4); }
  50%      { opacity: 0.6; box-shadow: 0 0 0 5px rgba(0,214,143,0); }
}

/* ── API KEY PANEL ── */
.api-btn {
  display: flex; align-items: center; gap: 6px;
  background: var(--c-pi-dim); border: 1px solid var(--c-border);
  color: var(--c-pi-soft); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 11px;
  padding: 5px 10px; cursor: pointer; flex-shrink: 0;
  transition: border-color 0.2s, background 0.2s;
  letter-spacing: 0.05em;
}
.api-btn:hover { border-color: var(--c-border-h); background: rgba(124,77,255,.2); }
.api-btn__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-text-3); flex-shrink: 0;
  transition: background 0.3s;
}
.api-btn__dot--active { background: var(--c-green); box-shadow: 0 0 6px rgba(0,214,143,.5); }

/* Overlay */
.api-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.65);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: flex-start; justify-content: flex-end;
  padding: 72px 24px 0;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s;
}
.api-overlay.is-open {
  opacity: 1; pointer-events: all;
}
.api-panel {
  background: var(--c-surface);
  border: 1px solid var(--c-border-h);
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 340px; max-width: calc(100vw - 48px);
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
  transform: translateY(-8px);
  transition: transform 0.25s;
}
.api-overlay.is-open .api-panel { transform: translateY(0); }
.api-panel__title {
  font-size: 15px; font-weight: 800; margin-bottom: 4px;
}
.api-panel__sub {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-text-3); margin-bottom: 18px; line-height: 1.6;
}
.api-panel__label {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-text-2); text-transform: uppercase;
  letter-spacing: 0.1em; margin-bottom: 8px;
}
.api-input-row {
  display: flex; gap: 8px; margin-bottom: 12px;
}
.api-input {
  flex: 1; background: rgba(255,255,255,.04);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  color: var(--c-text); font-family: var(--font-mono); font-size: 12px;
  padding: 9px 12px; outline: none;
  transition: border-color 0.2s;
}
.api-input:focus { border-color: var(--c-pi-soft); }
.api-input::placeholder { color: var(--c-text-3); }
.api-save-btn {
  background: var(--c-pi); border: none;
  color: #fff; font-family: var(--font-mono); font-size: 12px;
  font-weight: 700; padding: 9px 16px;
  border-radius: var(--radius-sm); cursor: pointer;
  transition: opacity 0.2s;
}
.api-save-btn:hover { opacity: 0.85; }
.api-clear-btn {
  width: 100%; background: none;
  border: 1px solid rgba(244,91,105,.25);
  color: var(--c-red); font-family: var(--font-mono); font-size: 11px;
  padding: 7px; border-radius: var(--radius-sm); cursor: pointer;
  transition: background 0.2s; margin-top: 4px;
}
.api-clear-btn:hover { background: rgba(244,91,105,.08); }
.api-status {
  font-family: var(--font-mono); font-size: 11px;
  margin-top: 10px; padding: 8px 12px;
  border-radius: var(--radius-sm); display: none;
}
.api-status--ok  { background: rgba(0,214,143,.08); color: var(--c-green); border: 1px solid rgba(0,214,143,.2); display: block; }
.api-status--err { background: rgba(244,91,105,.08); color: var(--c-red);   border: 1px solid rgba(244,91,105,.2); display: block; }
.api-panel__tip {
  margin-top: 16px; padding: 12px;
  background: var(--c-pi-dim); border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-text-3); line-height: 1.6;
}
.api-panel__tip a { color: var(--c-pi-soft); text-decoration: none; }
.api-panel__tip a:hover { text-decoration: underline; }

/* ── NAV MOBILE HAMBURGER ── */
.nav__hamburger {
  display: none;
  background: none; border: none;
  padding: 6px; cursor: pointer;
  flex-shrink: 0;
}
.nav__hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--c-text); border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
  margin: 5px 0;
}
.nav__hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}
.nav__hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav__hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

/* ────────────────────────────────────────
   HERO
──────────────────────────────────────── */
.hero {
  padding: 60px 0 52px;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 56px;
}
.hero__inner {
  display: grid;
  grid-template-columns: 1fr minmax(360px, 440px);
  gap: 40px; align-items: center;
}
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--c-pi-dim); border: 1px solid var(--c-border);
  border-radius: 99px; padding: 5px 14px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-pi-soft); letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: 16px;
}
/* Title — single line to save vertical space */
.hero__title {
  font-size: clamp(36px, 5.5vw, 64px);
  font-weight: 800; line-height: 1;
  letter-spacing: -0.04em;
  background: linear-gradient(135deg, #fff 25%, var(--c-pi-soft) 80%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; margin-bottom: 14px;
}
.hero__sub {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--c-text-2); letter-spacing: 0.05em;
  line-height: 1.7;
}

/* ── Price box ── */
.price-box {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-xl);
  padding: 28px 24px 22px;
  text-align: center;
  position: relative;
  /* overflow: visible — the gradient ::before is transparent at edges,
     no clipping needed; let the price breathe */
  overflow: visible;
  /* Prevent box from growing beyond grid column */
  min-width: 0;
}
/* Decorative gradient: confined with border-radius, no overflow:hidden needed */
.price-box::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 0%, rgba(124,77,255,.18), transparent 65%);
  pointer-events: none;
  z-index: 0;
}
/* All children above the gradient */
.price-box > * { position: relative; z-index: 1; }

.price-box__label {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-text-2); text-transform: uppercase;
  letter-spacing: 0.12em; margin-bottom: 10px;
}
/* Price: conservative font + lateral padding to avoid clipping
   from background-clip:text at box edges */
.price-box__value {
  font-size: clamp(26px, 2.9vw, 44px);
  font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.15;
  white-space: nowrap;
  /* lateral padding: the gradient uses the box as canvas;
     without margin the last character gets clipped */
  padding: 0 6px;
  display: block;
  background: linear-gradient(135deg, #fff, var(--c-pi-soft));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; margin-bottom: 10px;
}
.price-box__change {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--c-text); margin-bottom: 10px;
}
/* Riga ATH / ATL / range: griglia 3 colonne, sempre su una riga */
.price-box__meta {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px 12px;
  padding: 12px 0 0;
  border-top: 1px solid rgba(255,255,255,.06);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-text-3); line-height: 1.5;
  text-align: left;
}
.price-box__meta-item strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--c-text);
}
.price-box__ath {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--c-text-3); line-height: 1;
}

/* ────────────────────────────────────────
   STAT STRIP
──────────────────────────────────────── */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px; margin-bottom: 56px;
}
.stat-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 20px 16px;
  text-align: center;
  position: relative; overflow: hidden;
  transition: border-color 0.25s, transform 0.25s;
}
.stat-card:hover {
  border-color: var(--c-border-h);
  transform: translateY(-2px);
}
.stat-card::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--c-pi), transparent);
  opacity: 0.6;
}
.stat-card__val {
  font-size: clamp(16px, 2.2vw, 24px); font-weight: 800;
  background: linear-gradient(135deg, #fff, var(--c-pi-soft));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; line-height: 1.15; margin-bottom: 6px;
  word-break: break-all; overflow-wrap: break-word;
}
.stat-card__lbl {
  font-family: var(--font-body); font-size: 11px;
  color: var(--c-text-2); text-transform: uppercase;
  letter-spacing: 0.06em; margin-bottom: 5px;
}
.stat-card__chg {
  font-family: var(--font-mono); font-size: 10px;
  word-break: break-word; overflow-wrap: anywhere; line-height: 1.3;
}
.chg-pos { color: var(--c-green); }
.chg-neg { color: var(--c-red); }
.chg-neu { color: var(--c-gold); }

/* ────────────────────────────────────────
   SECTION HEADER
──────────────────────────────────────── */
.section { margin-bottom: 80px; }
.section__eyebrow {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-pi-soft); text-transform: uppercase;
  letter-spacing: 0.18em; margin-bottom: 6px;
}
.section__title {
  font-size: clamp(26px, 4.5vw, 42px);
  font-weight: 800; letter-spacing: -0.03em;
  margin-bottom: 28px; line-height: 1.05;
}

/* ────────────────────────────────────────
   CARD BASE
──────────────────────────────────────── */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.card__title {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--c-pi-soft); text-transform: uppercase;
  letter-spacing: 0.1em; margin-bottom: 20px;
}

/* ────────────────────────────────────────
   TWO-COLUMN GRID
──────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

/* ────────────────────────────────────────
   DONUT CHART
──────────────────────────────────────── */
.donut-layout {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
}
.donut-legend { flex: 1; min-width: 180px; }
.donut-legend__row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.donut-legend__row:last-of-type { border-bottom: none; }
.donut-legend__dot {
  width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0;
}
.donut-legend__name { font-size: 14px; font-weight: 600; flex: 1; }
.donut-legend__pct {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--c-text-2);
}
.donut-note {
  margin-top: 16px; padding: 14px 16px;
  background: rgba(240,180,41,.07);
  border: 1px solid rgba(240,180,41,.2);
  border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 13px;
  color: var(--c-text-2); line-height: 1.6;
}

/* Donut SVG animation */
.donut-seg {
  stroke-dashoffset: 0;
  animation: donut-reveal 1.2s cubic-bezier(.16,1,.3,1) both;
}
.donut-seg:nth-child(2) { animation-delay: 0.1s; }
.donut-seg:nth-child(3) { animation-delay: 0.2s; }
.donut-seg:nth-child(4) { animation-delay: 0.3s; }
@keyframes donut-reveal {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ────────────────────────────────────────
   HORIZONTAL BAR CHART
──────────────────────────────────────── */
.hbar-group { display: flex; flex-direction: column; gap: 0; }
.hbar-section-title {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-text-3); text-transform: uppercase;
  letter-spacing: 0.12em; margin-bottom: 12px; margin-top: 20px;
}
.hbar-section-title:first-child { margin-top: 0; }
.hbar-row {
  display: flex; align-items: center; gap: 14px; margin-bottom: 12px;
}
.hbar-label {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--c-text-2); width: 140px; flex-shrink: 0;
}
.hbar-track {
  flex: 1; background: rgba(255,255,255,.05);
  border-radius: 4px; height: 12px; overflow: hidden;
}
.hbar-fill {
  height: 100%; border-radius: 4px;
  animation: bar-grow 1.2s cubic-bezier(.16,1,.3,1) both;
  transform-origin: left;
}
@keyframes bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hbar-val {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--c-text); width: 64px; text-align: right; flex-shrink: 0;
}

/* ────────────────────────────────────────
   RADAR CHART
──────────────────────────────────────── */
.radar-layout {
  display: flex; align-items: center; gap: 36px; flex-wrap: wrap;
}
.radar-legend { flex: 1; min-width: 180px; }
.radar-legend__row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.04);
}
.radar-legend__row:last-child { border-bottom: none; }
.radar-legend__dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.radar-legend__name { font-size: 14px; flex: 1; }
.radar-legend__score {
  font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--c-text);
}
.radar-note {
  margin-top: 16px; padding: 14px 16px;
  background: var(--c-pi-dim); border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 13px;
  color: var(--c-text-2); line-height: 1.6;
}

/* ────────────────────────────────────────
   GAUGE CARDS
──────────────────────────────────────── */
.gauges-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: 14px; margin-bottom: 20px;
}
.gauge-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 24px 20px; text-align: center;
  transition: border-color 0.25s;
}
.gauge-card:hover { border-color: var(--c-border-h); }
.gauge-label {
  font-size: 13px; font-weight: 700;
  margin-bottom: 4px; margin-top: 10px;
}
.gauge-value {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-text-2); line-height: 1.5;
}

/* ────────────────────────────────────────
   KPI PROGRESS CARDS
──────────────────────────────────────── */
.kpi-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.kpi-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 24px; position: relative; overflow: hidden;
}
.kpi-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
}
.kpi-card--t1::before { background: linear-gradient(90deg, #FFB800, #FFE060); }
.kpi-card--t2::before { background: linear-gradient(90deg, #9B6DFF, #C9A8FF); }
.kpi-card--t3::before { background: linear-gradient(90deg, #00F0A0, #80FFD4); }

.kpi-card__head {
  display: flex; justify-content: space-between;
  align-items: flex-start; margin-bottom: 12px;
}
.kpi-card__num {
  font-family: var(--font-mono); font-size: 11px; color: var(--c-text-2);
  background: rgba(255,255,255,.06); border-radius: 4px; padding: 3px 8px;
}
.kpi-badge {
  font-family: var(--font-mono); font-size: 11px;
  padding: 2px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.07em;
}
.kpi-badge--warn  { background: rgba(255,60,80,.18); color: #FF5C6E; }
.kpi-badge--watch { background: rgba(255,200,50,.15);  color: #FFD036; }
.kpi-badge--ok    { background: rgba(0,240,160,.15);   color: #00F0A0; }

.kpi-card__name { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.kpi-card__big {
  font-size: 38px; font-weight: 800; letter-spacing: -0.04em;
  line-height: 1; margin-bottom: 5px;
}
.kpi-card__sub {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-text-2); line-height: 1.7; margin-bottom: 14px;
}

/* Progress bar with marker */
.threshold-bar { margin-top: auto; }
.threshold-bar__labels {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono); font-size: 10px;
  color: var(--c-text-3); margin-bottom: 6px;
  gap: 4px; flex-wrap: nowrap;
}
.threshold-bar__labels span {
  white-space: nowrap;
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.threshold-bar__track {
  height: 10px; border-radius: 99px; position: relative;
  overflow: visible;
}
.threshold-bar__marker {
  position: absolute; top: -3px;
  width: 5px; height: 16px;
  background: #fff; border-radius: 2px;
  box-shadow: 0 0 8px rgba(255,255,255,.6), 0 0 3px rgba(255,255,255,.9);
  transform: translateX(-50%);
  transition: left 0.5s ease;
}

/* ────────────────────────────────────────
   PRICE PREDICTION CHART
──────────────────────────────────────── */
.chart-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 28px; margin-bottom: 20px;
  overflow-x: auto;
}
.chart-legend {
  display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 20px;
}
.chart-legend__item {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px; color: var(--c-text-2);
}
.chart-legend__line { width: 18px; height: 3px; border-radius: 2px; }
.chart-legend__line--dashed {
  border-top: 2px dashed var(--c-red); background: none !important;
}

/* ────────────────────────────────────────
   PREDICTION TABLE
──────────────────────────────────────── */
.pred-table-wrap {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow: hidden; overflow-x: auto;
}
.pred-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.pred-table thead tr { background: var(--c-pi-dim); }
.pred-table th {
  padding: 13px 16px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-pi-soft); text-transform: uppercase;
  letter-spacing: 0.1em; text-align: left;
  border-bottom: 1px solid var(--c-border); white-space: nowrap;
}
.pred-table td {
  padding: 12px 16px;
  font-family: var(--font-mono); font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  vertical-align: middle;
}
.pred-table tr:last-child td { border-bottom: none; }
.pred-table tbody tr:hover td { background: rgba(124,77,255,.04); }
.pred-table .yr { font-weight: 700; font-size: 13px; color: var(--c-text); }
.pred-table .bear { color: var(--c-red); }
.pred-table .base { color: var(--c-gold); }
.pred-table .bull { color: var(--c-green); }
.pred-table .drivers { color: var(--c-text-2); line-height: 1.6; font-size: 11px; font-family: var(--font-body); }

/* Tags */
.tag {
  display: inline-block; padding: 3px 9px; border-radius: 4px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  white-space: nowrap;
}
.tag--red  { background: rgba(244,91,105,.12); color: var(--c-red); }
.tag--gold { background: rgba(240,180,41,.12);  color: var(--c-gold); }
.tag--grn  { background: rgba(0,214,143,.12);   color: var(--c-green); }
.tag--pi   { background: var(--c-pi-dim);        color: var(--c-pi-soft); }

/* ────────────────────────────────────────
   RED FLAGS
──────────────────────────────────────── */
.flags-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 12px;
}
.flag-card {
  background: rgba(244,91,105,.06);
  border: 1px solid rgba(244,91,105,.18);
  border-radius: var(--radius-md);
  padding: 20px; display: flex; gap: 14px;
}
.flag-card__icon { font-size: 20px; flex-shrink: 0; line-height: 1.2; }
.flag-card__name {
  font-size: 13px; font-weight: 700;
  color: var(--c-red); margin-bottom: 4px;
}
.flag-card__desc {
  font-family: var(--font-body); font-size: 13px;
  color: var(--c-text-2); line-height: 1.6;
}

/* ────────────────────────────────────────
   VERDICT BOX
──────────────────────────────────────── */
.verdict {
  background: linear-gradient(135deg, rgba(124,77,255,.10), rgba(165,126,255,.05));
  border: 1px solid rgba(124,77,255,.35);
  border-radius: var(--radius-xl); padding: 40px;
  display: flex; gap: 40px; align-items: center;
  position: relative; overflow: hidden;
}
.verdict::after {
  content: 'π';
  position: absolute; right: 36px; top: 8px;
  font-size: 150px; font-weight: 800;
  opacity: 0.035; color: var(--c-pi-soft);
  pointer-events: none; user-select: none;
  line-height: 1;
}
.verdict__score { flex-shrink: 0; text-align: center; }
.verdict__num {
  font-size: 72px; font-weight: 800; letter-spacing: -0.05em;
  background: linear-gradient(135deg, var(--c-gold), var(--c-pi-soft));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; line-height: 1;
}
.verdict__lbl {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-text-2); text-transform: uppercase; letter-spacing: 0.1em;
  margin-top: 4px;
}
.verdict__content h3 {
  font-size: 19px; font-weight: 700;
  color: var(--c-gold); margin-bottom: 12px;
}
.verdict__content p {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-text-2); line-height: 2;
}

/* ────────────────────────────────────────
   DISCLAIMER
──────────────────────────────────────── */
.disclaimer {
  border-top: 1px solid var(--c-border);
  padding: 28px 0 48px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-text-3); line-height: 2; text-align: center;
}

/* ────────────────────────────────────────
   RESPONSIVE
──────────────────────────────────────── */
@media (max-width: 960px) {
  .hero__inner { grid-template-columns: 1fr; gap: 28px; }
  .stat-strip { grid-template-columns: repeat(3,1fr); }
  .gauges-grid { grid-template-columns: repeat(2,1fr); }
  .flags-grid  { grid-template-columns: repeat(2,1fr); }
  .verdict { flex-direction: column; gap: 28px; }
  .perf-strip { grid-template-columns: repeat(3,1fr); }

  /* Mobile nav */
  .nav__hamburger { display: block; }
  .nav__links {
    display: none;
    position: absolute; top: 58px; left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: rgba(9, 9, 15, 0.96);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--c-border);
    padding: 8px 0;
  }
  .nav__links.is-open { display: flex; }
  .nav__links a {
    padding: 12px 24px;
    border-radius: 0;
    font-size: 13px;
  }
  .nav__links a:hover { background: var(--c-pi-dim); }
}
@media (max-width: 680px) {
  .hero__inner { grid-template-columns: 1fr; }
  .price-box__meta { grid-template-columns: 1fr 1fr; }
  .grid-2, .kpi-grid { grid-template-columns: 1fr; }
  .stat-strip { grid-template-columns: repeat(2,1fr); }
  .flags-grid { grid-template-columns: 1fr; }
  .donut-layout, .radar-layout { flex-direction: column; }
  .perf-strip { grid-template-columns: repeat(2,1fr); }
  .unlock-grid { grid-template-columns: repeat(2,1fr); }
  .gauges-grid { grid-template-columns: repeat(2,1fr); gap: 10px; }
  .gauge-card { padding: 16px 12px; }
  .gauge-label { font-size: 12px; }
  .threshold-bar__labels { font-size: 9px; gap: 2px; }
  .kpi-card { padding: 18px; }
  .kpi-card__big { font-size: 30px; }
}

/* ────────────────────────────────────────
   HISTORICAL — Price History Section
──────────────────────────────────────── */
.hist-header {
  display: flex; align-items: flex-start;
  justify-content: space-between; flex-wrap: wrap; gap: 16px;
  margin-bottom: 20px;
}
.hist-meta { font-family: var(--font-mono); font-size: 11px; color: var(--c-text-2); margin-top: 4px; }
.hist-kpis { display: flex; gap: 24px; flex-wrap: wrap; }
.hist-kpi { text-align: center; }
.hist-kpi__val { font-size: 20px; font-weight: 800; line-height: 1; }
.hist-kpi__lbl { font-family: var(--font-mono); font-size: 11px; color: var(--c-text-3); margin-top: 3px; text-transform: uppercase; letter-spacing: .08em; }


/* Nav update for history link */


/* ────────────────────────────────────────
   BREAKING NEWS BANNER
──────────────────────────────────────── */
.news-banner {
  background: linear-gradient(135deg, rgba(0,214,143,.08), rgba(124,77,255,.08));
  border: 1px solid rgba(0,214,143,.25);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  margin-bottom: 56px;
  position: relative;
  overflow: hidden;
}
.news-banner::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--c-green), var(--c-pi), var(--c-gold));
}
.news-banner__header {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.news-banner__badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0,214,143,.15); border: 1px solid rgba(0,240,160,.45);
  border-radius: 99px; padding: 4px 12px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-green); letter-spacing: 0.1em;
  text-transform: uppercase;
}
.news-banner__badge::before {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--c-green);
  animation: pulse-dot 2s ease-in-out infinite;
}
.news-banner__title {
  font-size: 18px; font-weight: 800;
  letter-spacing: -0.02em;
}
.news-items {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 14px;
}
.news-item {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-md);
  padding: 20px; position: relative;
}
.news-item__date {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-text-2); text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 6px;
}
.news-item__title {
  font-size: 15px; font-weight: 700; margin-bottom: 6px;
}
.news-item__desc {
  font-family: var(--font-body); font-size: 13px;
  color: var(--c-text-2); line-height: 1.65;
}
.news-item__tag {
  display: inline-block; padding: 2px 8px; border-radius: 4px;
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.08em;
  margin-top: 8px;
}
.news-item__tag--bull { background: rgba(0,214,143,.12); color: var(--c-green); }
.news-item__tag--bear { background: rgba(244,91,105,.12); color: var(--c-red); }
.news-item__tag--neu  { background: rgba(240,180,41,.12); color: var(--c-gold); }

/* ────────────────────────────────────────
   TOKEN UNLOCK TRACKER
──────────────────────────────────────── */
.unlock-grid {
  display: grid; grid-template-columns: repeat(4,1fr); gap: 14px;
  margin-bottom: 20px;
}
.unlock-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 24px 20px; text-align: center;
  position: relative; overflow: hidden;
}
.unlock-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--c-red), var(--c-gold));
}
.unlock-card__big {
  font-size: 28px; font-weight: 800;
  letter-spacing: -0.04em; line-height: 1;
  margin-bottom: 6px;
}
.unlock-card__label {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-text-2); text-transform: uppercase;
  letter-spacing: 0.1em; margin-bottom: 4px;
}
.unlock-card__sub {
  font-family: var(--font-body); font-size: 12px;
  color: var(--c-text-3); line-height: 1.5;
}
.unlock-bar-wrap {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 24px;
}
.unlock-month-row {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px;
}
.unlock-month-row:last-child { margin-bottom: 0; }
.unlock-month-label {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--c-text-2); width: 70px; flex-shrink: 0;
}
.unlock-month-track {
  flex: 1; background: rgba(255,255,255,.05);
  border-radius: 4px; height: 14px; overflow: hidden;
}
.unlock-month-fill {
  height: 100%; border-radius: 4px;
  animation: bar-grow 1.2s cubic-bezier(.16,1,.3,1) both;
  transform-origin: left;
}
.unlock-month-val {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-text); width: 80px; text-align: right; flex-shrink: 0;
}

/* ────────────────────────────────────────
   CONTROVERSIES SECTION
──────────────────────────────────────── */
.controversy-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}


/* ────────────────────────────────────────
   EXCHANGE PRICE TABLE
──────────────────────────────────────── */


/* ────────────────────────────────────────
   VISUAL REBUILD — compact data cards
──────────────────────────────────────── */
.v-grid { display: grid; gap: 16px; }
.v-grid--2 { grid-template-columns: 1fr 1fr; }
.v-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.v-grid--4 { grid-template-columns: 1fr 1fr 1fr 1fr; }

.v-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 24px; position: relative; overflow: hidden;
}
.v-card--accent::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.v-metric {
  display: flex; align-items: baseline; gap: 8px;
  margin-bottom: 4px;
}
.v-metric__val {
  font-size: 28px; font-weight: 800;
  letter-spacing: -0.04em; line-height: 1;
}
.v-metric__unit {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-text-2); text-transform: uppercase;
}
.v-label {
  font-family: var(--font-body); font-size: 12px;
  color: var(--c-pi-soft); text-transform: uppercase;
  letter-spacing: 0.08em; margin-bottom: 12px;
  font-weight: 600;
}
.v-sub {
  font-family: var(--font-body); font-size: 12px;
  color: var(--c-text-2); line-height: 1.5;
  margin-top: 6px;
}
.v-source {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-text-2); margin-top: 10px;
  opacity: 0.7; line-height: 1.5;
}
/* Sparkline bar */
.spark-bar {
  display: flex; align-items: flex-end; gap: 3px;
  height: 36px; margin-top: 12px;
}
.spark-bar__col {
  flex: 1; border-radius: 2px 2px 0 0;
  min-width: 4px; transition: height 0.3s ease;
}
/* Flow indicator */
.flow-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
}
.flow-row:last-child { border-bottom: none; }
.flow-row__label {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--c-text-2); width: 90px; flex-shrink: 0;
}
.flow-row__bar-wrap {
  flex: 1; display: flex; gap: 3px; height: 24px;
}
.flow-row__in {
  background: linear-gradient(90deg,rgba(244,91,105,.6),rgba(255,60,80,.5));
  border-radius: 4px 0 0 4px; height: 100%;
}
.flow-row__out {
  background: linear-gradient(90deg,rgba(0,240,160,.45),rgba(0,214,143,.6));
  border-radius: 0 4px 4px 0; height: 100%;
}
.flow-row__val {
  font-family: var(--font-mono); font-size: 11px;
  width: 70px; text-align: right; flex-shrink: 0;
}
/* Risk pill */
.risk-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 99px;
  font-family: var(--font-mono); font-size: 11px;
  font-weight: 700;
}
.risk-pill--high { background: rgba(244,91,105,.12); color: var(--c-red); }
.risk-pill--med { background: rgba(240,180,41,.12); color: var(--c-gold); }
.risk-pill--low { background: rgba(0,214,143,.12); color: var(--c-green); }
.risk-pill__dot {
  width: 6px; height: 6px; border-radius: 50%;
}
/* Compact funnel — legacy (kept for safety) */
.funnel-step { display:none; }

/* ── Funnel v2 ── */
.funnel2 { display: flex; flex-direction: column; gap: 16px; }

/* 5-step grid */
.funnel2__steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.funnel2__card {
  background: var(--c-surface2);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  padding: 16px 14px 14px;
  position: relative;
  transition: border-color 0.2s, transform 0.2s;
}
.funnel2__card:hover {
  border-color: var(--c-border-h);
  transform: translateY(-2px);
}
/* colored top accent */
.funnel2__card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.funnel2__card--pi  ::before,
.funnel2__card--pi::before  { background: var(--c-pi); }
.funnel2__card--grn::before { background: var(--c-green); }
.funnel2__card--gld::before { background: var(--c-gold); }
.funnel2__card--red::before { background: var(--c-red); }

/* Step number badge */
.funnel2__step-n {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--c-text-3); letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: 6px;
}
/* Step name */
.funnel2__name {
  font-size: 13px; font-weight: 700;
  color: var(--c-text); margin-bottom: 10px;
  line-height: 1.2;
}
/* Big number */
.funnel2__num {
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1;
  margin-bottom: 4px;
}
/* % badge */
.funnel2__pct {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 11px;
  font-weight: 700; padding: 2px 7px;
  border-radius: 4px; margin-bottom: 10px;
}
/* Mini bar within card */
.funnel2__mini-bar {
  height: 4px; background: rgba(255,255,255,.06);
  border-radius: 2px; overflow: hidden;
}
.funnel2__mini-bar-fill {
  height: 100%; border-radius: 2px;
  animation: bar-grow 1.2s cubic-bezier(.16,1,.3,1) both;
  transform-origin: left;
}
/* Drop arrow connector */
.funnel2__drop {
  font-family: var(--font-mono); font-size: 10px;
  color: var(--c-text-3); margin-top: 6px;
  display: flex; align-items: center; gap: 4px;
}
.funnel2__drop span { color: var(--c-red); font-weight: 700; }

/* Scale bar (full-width proportional visualization) */
.funnel2__scale {
  display: flex; flex-direction: column; gap: 6px;
}
.funnel2__scale-row {
  display: grid;
  grid-template-columns: 80px 1fr 52px;
  align-items: center; gap: 12px;
}
.funnel2__scale-lbl {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-text-2); text-align: right;
}
.funnel2__scale-track {
  height: 10px; background: rgba(255,255,255,.05);
  border-radius: 5px; overflow: hidden;
}
.funnel2__scale-fill {
  height: 100%; border-radius: 5px;
  animation: bar-grow 1.3s cubic-bezier(.16,1,.3,1) both;
  transform-origin: left;
}
.funnel2__scale-val {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-text-3); text-align: right;
}

/* Responsive */
@media (max-width: 960px) {
  .funnel2__steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .funnel2__steps { grid-template-columns: repeat(2, 1fr); }
  .funnel2__scale-row { grid-template-columns: 64px 1fr 44px; }
}
/* Timeline */
.timeline {
  position: relative;
  padding-left: 24px;
}
.timeline::before {
  content: '';
  position: absolute; left: 6px; top: 4px; bottom: 4px;
  width: 2px; background: var(--c-border);
}
.timeline__item {
  position: relative;
  padding: 10px 0 18px 18px;
}
.timeline__dot {
  position: absolute; left: -21px; top: 10px;
  width: 10px; height: 10px; border-radius: 50%;
  border: 2px solid var(--c-bg);
}
.timeline__date {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c-text-3); text-transform: uppercase;
  letter-spacing: 0.1em;
}
.timeline__text {
  font-size: 14px; font-weight: 700; margin-top: 3px;
}
.timeline__sub {
  font-family: var(--font-body); font-size: 12px;
  color: var(--c-text-2); margin-top: 3px;
}
@media (max-width: 768px) {
  .v-grid--3, .v-grid--4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .v-grid--2, .v-grid--3, .v-grid--4 { grid-template-columns: 1fr; }
}


/* ────────────────────────────────────────
   PERFORMANCE HEATMAP + EXCHANGE VISUAL
──────────────────────────────────────── */


/* Exchange visual bars */
.ex-visual { display: flex; flex-direction: column; gap: 12px; }
.ex-row {
  display: flex; align-items: center; gap: 10px;
}
.ex-row__name {
  font-family: var(--font-body); font-size: 13px;
  font-weight: 700; width: 82px; flex-shrink: 0;
}
.ex-row__bar-wrap {
  flex: 1; position: relative; height: 36px;
  background: rgba(255,255,255,.03);
  border-radius: var(--radius-sm); overflow: hidden;
}
.ex-row__bar {
  height: 100%; border-radius: var(--radius-sm);
  display: flex; align-items: center; padding: 0 10px;
  justify-content: space-between;
  font-family: var(--font-mono); font-size: 11px;
  color: #fff; font-weight: 700;
  animation: bar-grow 1s cubic-bezier(.16,1,.3,1) both;
  transform-origin: left; white-space: nowrap; overflow: visible;
}
.ex-row__bar span:last-child {
  position: absolute; right: 8px; font-size: 10px;
}
.ex-row__chg {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  width: 60px; text-align: right; flex-shrink: 0;
}
/* Price ladder SVG */
.ladder-wrap {
  position: relative; padding: 8px 0;
}
/* Metric mini cards */
.metric-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 8px;
}
.metric-mini {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-sm);
  padding: 14px 12px; text-align: center;
}
.metric-mini__val {
  font-size: 18px; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1;
  margin-bottom: 3px;
}
.metric-mini__label {
  font-family: var(--font-body); font-size: 11px;
  color: var(--c-text-2); text-transform: uppercase;
  letter-spacing: 0.04em;
}
@media (max-width: 640px) {
  
  .metric-grid { grid-template-columns: repeat(2,1fr); }
  .perf-strip  { grid-template-columns: repeat(3,1fr); }
  .perf-pill__range { display: none; }
}


/* ────────────────────────────────────────
   PERFORMANCE STRIP (full-width)
──────────────────────────────────────── */
.perf-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px; margin-bottom: 20px;
}
.perf-pill {
  border-radius: var(--radius-md);
  padding: 14px 10px; text-align: center;
  position: relative; overflow: hidden;
  transition: transform 0.2s, border-color 0.2s;
}
.perf-pill:hover { transform: translateY(-2px); }
.perf-pill__period {
  font-family: var(--font-body); font-size: 11px;
  color: rgba(255,255,255,.7); text-transform: uppercase;
  letter-spacing: 0.05em; margin-bottom: 6px;
}
.perf-pill__val {
  font-size: 18px; font-weight: 800;
  letter-spacing: -0.03em; line-height: 1;
  color: #fff; margin-bottom: 5px;
}
.perf-pill__range {
  font-family: var(--font-mono); font-size: 10px;
  color: rgba(255,255,255,.45); margin-top: 2px;
  white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.perf-pill--up {
  background: linear-gradient(145deg, rgba(0,214,143,.18), rgba(0,214,143,.04));
  border: 1px solid rgba(0,214,143,.2);
}
.perf-pill--up-strong {
  background: linear-gradient(145deg, rgba(0,214,143,.28), rgba(0,214,143,.06));
  border: 1px solid rgba(0,240,160,.45);
}
.perf-pill--down {
  background: linear-gradient(145deg, rgba(244,91,105,.18), rgba(244,91,105,.04));
  border: 1px solid rgba(244,91,105,.2);
}
.perf-pill--down-strong {
  background: linear-gradient(145deg, rgba(255,60,80,.5), rgba(244,91,105,.06));
  border: 1px solid rgba(255,60,80,.5);
}
/* Position bar */
.pos-bar-wrap {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding: 20px 24px; margin-bottom: 20px;
}
/* Exchange + Metrics full-width layout */
.data-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: stretch;
}
/* Right column card: stretch content vertically to fill height */
.data-panel > .card--stretch {
  display: flex;
  flex-direction: column;
}
.data-panel > .card--stretch .card__title { flex-shrink: 0; }
.data-panel > .card--stretch .metric-grid {
  flex: 1;
  align-content: stretch;
  grid-auto-rows: 1fr;
}
.data-panel > .card--stretch .metric-grid .metric-mini {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px 12px;
}
.data-panel > .card--stretch .metric-mini__val {
  font-size: 20px;
  margin-bottom: 4px;
}
.data-panel > .card--stretch .metric-mini__label {
  font-size: 11px;
}
.data-panel > .card--stretch > *:last-child { margin-top: auto; flex-shrink: 0; }
@media (max-width: 768px) {
  .perf-strip { grid-template-columns: repeat(3, 1fr); }
  .data-panel { grid-template-columns: 1fr; }
  .data-panel > .card--stretch .metric-grid { grid-template-columns: repeat(3,1fr); }
  .data-panel > .card--stretch .metric-mini__val { font-size: 18px; }
  .data-panel > .card--stretch .metric-grid .metric-mini { padding: 12px 10px; }
}
@media (max-width: 480px) {
  .perf-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ── EXCHANGE TABLE (redesigned) ── */
.ex-header { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:14px; }
.ex-updated { font-family:var(--font-mono); font-size:10px; color:var(--c-text-3); }
.ex-thead {
  display:grid; grid-template-columns: 90px 1fr 1fr 60px;
  gap:6px; padding:0 4px 8px;
  border-bottom:1px solid var(--c-border);
  font-family:var(--font-mono); font-size:10px; color:var(--c-text-3);
  text-transform:uppercase; letter-spacing:.06em;
}
.ex-thead span:not(:first-child) { text-align:right; }
.ex-trow {
  display:grid; grid-template-columns: 90px 1fr 1fr 60px;
  gap:6px; align-items:center; padding:9px 4px;
  border-bottom:1px solid rgba(255,255,255,.04);
  transition: background .15s;
}
.ex-trow:hover { background: rgba(255,255,255,.02); border-radius:6px; }
.ex-trow:last-child { border-bottom:none; }
.ex-trow__name { font-weight:700; font-size:13px; }
.ex-trow__price { font-family:var(--font-mono); font-size:13px; font-weight:700; text-align:right; }
.ex-trow__vol { font-family:var(--font-mono); font-size:12px; color:var(--c-text-2); text-align:right; }
.ex-trow__chg { font-family:var(--font-mono); font-size:12px; font-weight:700; text-align:right; }
.ex-vol-dist { margin-top:14px; }
.ex-vol-dist__label { font-family:var(--font-mono); font-size:10px; color:var(--c-text-3); text-transform:uppercase; letter-spacing:.06em; margin-bottom:6px; }
.ex-vol-bar { display:flex; height:22px; border-radius:6px; overflow:hidden; gap:1px; }
.ex-vol-seg { display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:10px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; padding:0 6px; min-width:0; }
.ex-footer { display:flex; justify-content:space-between; align-items:center; margin-top:12px; font-family:var(--font-mono); font-size:11px; color:var(--c-text-3); flex-wrap:wrap; gap:6px; }
.ex-footer strong { color:var(--c-text-2); }

/* ── EMA LADDER (redesigned vertical) ── */
.ema-ladder { display:flex; flex-direction:column; gap:0; margin-top:4px; }
.ema-row {
  display:grid; grid-template-columns:44px 56px 1fr 52px;
  align-items:center; gap:8px; padding:8px 4px;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.ema-row:last-child { border-bottom:none; }
.ema-row--current { background:rgba(124,77,255,.08); border-radius:8px; margin:2px 0; padding:10px 8px; border:1px solid rgba(124,77,255,.2); }
.ema-row__badge {
  width:28px; height:28px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; flex-shrink:0;
}
.ema-row__badge--above { background:rgba(0,214,143,.15); color:var(--c-green); }
.ema-row__badge--current { background:var(--c-pi); color:#fff; font-size:14px; }
.ema-row__period { font-family:var(--font-mono); font-size:11px; color:var(--c-text-3); }
.ema-row__val { font-family:var(--font-mono); font-size:12px; color:var(--c-text-2); }
.ema-row__dist-wrap { position:relative; height:6px; background:rgba(255,255,255,.06); border-radius:3px; overflow:hidden; }
.ema-row__dist-fill { position:absolute; left:0; top:0; height:100%; border-radius:3px; background:linear-gradient(90deg,var(--c-green),rgba(0,214,143,.4)); }
.ema-row__pct { font-family:var(--font-mono); font-size:11px; font-weight:700; text-align:right; color:var(--c-green); }

/* ── RESPONSIVE ADDITIONS ── */
@media (max-width: 768px) {
  .news-items { grid-template-columns: 1fr; }
  .unlock-grid { grid-template-columns: 1fr 1fr; }
  .controversy-grid { grid-template-columns: 1fr; }
}