:root{
  --bg: #0f0f1a;
  --card: #1a1a2e;
  --border: #2a2a4a;
  --border-soft: #22223a;
  --text: #e0e0f0;
  --text-dim: #a0a0c0;
  --text-faint: #6a6a8a;
  --brand: #5a8aff;
  --brand-soft: rgba(90,138,255,0.15);
  --ing-green: #4ade80;
  --ing-green-soft: rgba(74,222,128,0.15);
  --ing-gold: #fbbf24;
  --ing-gold-soft: rgba(251,191,36,0.15);
  --ing-red: #f87171;
  --ing-red-soft: rgba(248,113,113,0.15);
  --radius: 14px;
  --font-display: 'Manrope', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  line-height:1.5;
}

.wrap{max-width:1140px;margin:0 auto;padding:0 20px;}

/* TOP NAV */
.topnav{
  background:var(--card);
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  z-index:20;
}
.topnav-inner{
  max-width:1140px;margin:0 auto;padding:10px 20px;
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;
}
.brand{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--text);
  font-family:var(--font-display);
  font-weight:800;
  font-size:18px;
}
.brand .mark{
  width:32px;height:32px;border-radius:9px;
  background:linear-gradient(135deg, var(--brand), #6a8fff);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-family:var(--font-display);font-weight:800;font-size:15px;
}
.brand .sep{color:var(--text-faint);font-weight:500;font-size:14px;margin-left:2px;}
.topnav-right{display:flex;align-items:center;gap:18px;font-size:13.5px;}
.back-link{
  color:var(--text-dim);text-decoration:none;font-weight:600;
  display:flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:8px;
  border:1px solid var(--border);
  transition:all .15s;
}
.back-link:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft);}

/* HERO */
header.hero{padding:44px 0 30px;}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:0.04em;
  color:var(--ing-green);
  background:var(--ing-green-soft);
  padding:6px 12px;border-radius:20px;
  margin-bottom:16px;
}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--ing-green);animation:pulse 2.2s ease-in-out infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.3;}}
h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(28px,4vw,42px);
  margin:0 0 12px;
  letter-spacing:-0.02em;
  max-width:680px;
}
h1 span{color:var(--brand);}
.sub{color:var(--text-dim);font-size:16px;max-width:600px;margin:0;}
.meta-row{
  margin-top:22px;display:flex;gap:24px;flex-wrap:wrap;
  font-size:13px;color:var(--text-faint);
}
.meta-row b{color:var(--text-dim);font-weight:600;}


/* SECTIONS */
.section-title{
  font-family:var(--font-display);
  font-weight:800;
  font-size:20px;
  margin:0 0 4px;
}
.section-sub{color:var(--text-faint);font-size:13px;margin-bottom:18px;}
section{margin-bottom:46px;}

/* STAT GRID */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
@media(max-width:900px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
.stat-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  transition:box-shadow .15s, transform .15s;
}
.stat-card:hover{box-shadow:0 6px 20px rgba(20,30,60,0.07);transform:translateY(-1px);}
.stat-card .label{
  font-size:11.5px;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--text-faint);font-weight:600;margin-bottom:8px;
}
.stat-card .value{
  font-family:var(--font-display);font-weight:800;font-size:26px;color:var(--text);line-height:1.1;
}
.stat-card .value small{font-size:14px;color:var(--text-dim);font-weight:600;}
.stat-card .delta{margin-top:8px;font-size:12px;font-weight:600;}
.delta.up{color:var(--ing-green);}
.delta.down{color:var(--ing-red);}
.delta.flat{color:var(--text-faint);}

/* CHART PANELS */
.chart-row{display:grid;grid-template-columns:1.3fr 1fr;gap:14px;margin-bottom:14px;}
@media(max-width:900px){.chart-row{grid-template-columns:1fr;}}
.chart-row.thirds{grid-template-columns:1fr 1fr 1fr;}
@media(max-width:900px){.chart-row.thirds{grid-template-columns:1fr;}}
.panel{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:20px 20px 12px;
}
.panel h3{font-family:var(--font-display);font-weight:700;font-size:15.5px;margin:0 0 2px;}
.panel .panel-sub{font-size:12px;color:var(--text-faint);margin-bottom:14px;}
.panel canvas{max-height:260px;}
.badge{
  display:inline-block;font-size:11px;font-weight:700;padding:3px 9px;border-radius:20px;margin-left:6px;
}
.badge.green{background:var(--ing-green-soft);color:var(--ing-green);}
.badge.gold{background:var(--ing-gold-soft);color:var(--ing-gold);}

footer{
  margin-top:50px;padding:24px 0 50px;border-top:1px solid var(--border);
  font-size:12.5px;color:var(--text-faint);
}
footer a{color:var(--brand);text-decoration:none;font-weight:600;}