
:root{
  --bg:#0e1220;
  --panel:#161d31;
  --panel-2:#1b2440;
  --text:#ecf1ff;
  --muted:#aeb9da;
  --accent:#7cc7ff;
  --accent-2:#86efac;
  --warn:#fbbf24;
  --soft:#24304f;
  --line:#2c395d;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:linear-gradient(180deg,#09101c 0%, #0e1220 100%);
  color:var(--text);
}
.page-shell{max-width:1200px;margin:0 auto;padding:32px 20px 56px}
.hero{
  display:flex;justify-content:space-between;gap:24px;align-items:end;
  margin-bottom:22px;padding:28px;border:1px solid var(--line);border-radius:24px;
  background:radial-gradient(circle at top right, rgba(124,199,255,.16), transparent 30%), var(--panel);
}
.eyebrow{margin:0 0 8px;color:var(--accent);text-transform:uppercase;letter-spacing:.12em;font-size:.76rem;font-weight:700}
h1,h2,h3,p{margin:0}
h1{font-size:2.2rem;line-height:1.05;margin-bottom:10px}
h2{font-size:1.15rem;margin-bottom:4px}
.lede{max-width:760px;color:var(--muted);line-height:1.5}
.hero-stat{
  min-width:240px;background:var(--panel-2);border:1px solid var(--line);border-radius:18px;
  padding:18px 20px;
}
.hero-stat-label,.hero-stat-sub{color:var(--muted)}
.hero-stat-value{font-size:2rem;font-weight:800;margin:6px 0}
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:18px}
.kpi-card,.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:20px;
}
.kpi-card{padding:18px}
.kpi-label{color:var(--muted);font-size:.92rem;margin-bottom:8px}
.kpi-value{font-size:1.85rem;font-weight:800;line-height:1.1}
.kpi-sub{margin-top:8px;color:var(--muted);font-size:.92rem}
.panel{padding:20px;margin-bottom:18px}
.panel-header{display:flex;justify-content:space-between;gap:12px;margin-bottom:14px}
.panel-header p{color:var(--muted)}
.chart-wrap{width:100%;overflow:auto}
.chart-wrap svg{width:100%;height:auto;display:block}
.chart-wrap.compact svg{min-height:240px}
.two-col{display:grid;grid-template-columns:1.2fr .8fr;gap:18px;align-items:start}
.metric-stack{display:flex;flex-direction:column;gap:20px}
.big-metric{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.big-metric-value{font-size:3rem;font-weight:900}
.big-metric-label{font-size:1.05rem;color:var(--accent-2);font-weight:700}
.progress-ladder{display:flex;flex-direction:column;gap:10px}
.ladder-row{display:grid;grid-template-columns:120px 1fr 90px;gap:12px;align-items:center}
.bar-track{height:14px;background:var(--soft);border-radius:999px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--accent),#75e0b0)}
.ladder-label,.ladder-remaining{font-size:.94rem}
.target-list{display:flex;flex-direction:column;gap:14px}
.target-card{padding:14px;border-radius:16px;background:var(--panel-2);border:1px solid var(--line)}
.target-card h3{font-size:1rem;margin-bottom:4px}
.target-card p{color:var(--muted);line-height:1.45}
.notes{display:flex;flex-direction:column;gap:12px}
.note{padding:12px 14px;background:var(--panel-2);border-radius:14px;border:1px solid var(--line);color:var(--muted);line-height:1.45}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
thead th{color:var(--muted);font-size:.88rem;font-weight:700}
tbody tr:hover{background:rgba(124,199,255,.05)}
.positive{color:var(--accent-2)}
.negative{color:#fca5a5}
.neutral{color:var(--muted)}
svg text{font-family:inherit;fill:var(--muted)}
.axis-line{stroke:#42537f;stroke-width:1}
.grid-line{stroke:#2a3456;stroke-width:1}
.weight-line{fill:none;stroke:var(--accent);stroke-width:3}
.avg-line{fill:none;stroke:var(--accent-2);stroke-width:2.5;stroke-dasharray:7 7}
.dot{fill:var(--accent)}
.dose-area{fill:rgba(124,199,255,.16)}
.dose-line{fill:none;stroke:var(--warn);stroke-width:3}
.annotation{fill:#f0f6ff;font-weight:700}
@media (max-width: 980px){
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .two-col{grid-template-columns:1fr}
  .hero{flex-direction:column;align-items:start}
}
@media (max-width: 620px){
  .kpi-grid{grid-template-columns:1fr}
  .page-shell{padding:18px 14px 40px}
  h1{font-size:1.8rem}
}


.kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi-value-compact{font-size:1.35rem}
.pill{display:inline-block;margin-left:8px;padding:3px 8px;border-radius:999px;background:rgba(134,239,172,.15);color:var(--accent-2);font-size:.78rem;font-weight:700;vertical-align:middle}
.target-card.achieved{border-color:rgba(134,239,172,.4);background:linear-gradient(180deg, rgba(134,239,172,.08), rgba(134,239,172,.03)), var(--panel-2)}
@media (max-width: 980px){
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.panel-footnote{margin-top:12px;color:var(--muted);font-size:.88rem;line-height:1.45}
.chart-wrap.compact{min-height:280px}
.chart-wrap.compact svg{height:280px;min-height:280px}

.insight-panel{padding:18px 20px;margin-bottom:18px;background:linear-gradient(180deg, rgba(124,199,255,.06), rgba(124,199,255,.02)), var(--panel)}
.insight-body{color:var(--text);font-size:1.05rem;line-height:1.55;max-width:900px}
