:root{
  --paper:#F4F7F9; --panel:#FFFFFF; --ink:#152232; --ink-soft:#4A5A6C; --line:#DCE4EA;
  --spi:#152232; --bhn:#2D7DD2; --fow:#17A398; --opp:#E8A33D;
  --radius:14px;
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Inter', -apple-system, 'Segoe UI', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--paper); color:var(--ink); font-family:var(--font-body); font-size:15px; line-height:1.5;}
.wrap{max-width:1280px; margin:0 auto; padding:0 20px 60px;}
a{color:var(--bhn);}

/* ---------- Navigation ---------- */
nav{background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;}
.nav-inner{max-width:1280px; margin:0 auto; padding:0 20px; display:flex; align-items:center; gap:26px; height:58px;}
.nav-brand{font-family:var(--font-display); font-weight:700; font-size:17px; color:var(--ink); text-decoration:none; white-space:nowrap;}
.nav-brand em{font-style:normal; color:var(--bhn);}
.nav-links{display:flex; gap:4px; margin-left:auto; overflow-x:auto;}
.nav-links a{color:var(--ink-soft); text-decoration:none; font-weight:600; font-size:13.5px; padding:8px 12px; border-radius:9px; white-space:nowrap;}
.nav-links a:hover{background:#EFF4F8; color:var(--ink);}
.nav-links a.active{background:var(--ink); color:#fff;}
#navStatus{font-size:11.5px; color:var(--ink-soft); background:#EDF2F6; border-radius:8px; padding:4px 9px; white-space:nowrap;}
#navStatus.sample{background:#FBF3E2; color:#8A6414;}

/* ---------- Page header ---------- */
.page-head{padding:34px 0 22px;}
.page-head h1{font-family:var(--font-display); font-weight:600; font-size:32px; letter-spacing:-.01em; line-height:1.15;}
.page-head h1 em{font-style:normal; color:var(--bhn);}
.page-head p{color:var(--ink-soft); margin-top:6px; font-size:14.5px; max-width:760px;}

/* ---------- Panels & grids ---------- */
.panel{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px;}
.panel h2{font-family:var(--font-display); font-weight:600; font-size:18px; margin-bottom:2px;}
.panel .sub{font-size:12.5px; color:var(--ink-soft); margin-bottom:10px;}
.grid{display:grid; gap:16px; margin-bottom:16px;}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.g-21{grid-template-columns:minmax(0,2fr) minmax(0,1fr);}
.g-12{grid-template-columns:minmax(0,1fr) minmax(0,2fr);}
.g-32{grid-template-columns:minmax(0,3fr) minmax(0,2fr);}
@media (max-width:940px){ .g-2,.g-3,.g-21,.g-12,.g-32{grid-template-columns:1fr;} }

/* ---------- Stat cards ---------- */
.stat{padding:16px 18px;}
.stat .k{font-size:11.5px; text-transform:uppercase; letter-spacing:.07em; color:var(--ink-soft); font-weight:600;}
.stat .v{font-family:var(--font-display); font-weight:700; font-size:34px; letter-spacing:-.01em; margin-top:2px;}
.stat .d{font-size:12.5px; color:var(--ink-soft); margin-top:2px;}
.stat .v small{font-size:16px; color:var(--ink-soft); font-weight:500;}

/* ---------- Controls ---------- */
.btn{border:1px solid var(--line); background:var(--panel); color:var(--ink); border-radius:10px; padding:9px 14px; font:600 13px var(--font-body); cursor:pointer; transition:box-shadow .15s, border-color .15s;}
.btn:hover{border-color:var(--bhn); box-shadow:0 2px 10px rgba(45,125,210,.12);}
.btn:focus-visible{outline:2px solid var(--bhn); outline-offset:2px;}
.btn.primary{background:var(--ink); color:#fff; border-color:var(--ink);}
.btn.primary:hover{background:#22344a;}
input[type=text],input[type=password],input[type=search],select{border:1px solid var(--line); border-radius:10px; padding:9px 12px; font:14px var(--font-body); background:#FBFCFD; color:var(--ink);}
input:focus-visible,select:focus-visible{outline:2px solid var(--bhn); outline-offset:1px;}
input[type=range]{accent-color:var(--bhn); height:26px; cursor:pointer;}
datalist{display:none;}

/* ---------- Timeline scrubber ---------- */
.timeline{padding:16px 20px 8px;}
.timeline-head{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.year-display{font-family:var(--font-display); font-weight:700; font-size:34px; min-width:96px; font-variant-numeric:tabular-nums;}
.play-btn{width:38px; height:38px; border-radius:50%; border:none; background:var(--ink); color:#fff; font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.play-btn:hover{background:#22344a;}
.play-btn:focus-visible{outline:2px solid var(--bhn); outline-offset:2px;}
.timeline input[type=range]{flex:1; min-width:220px;}
.spark-caption{font-size:11.5px; color:var(--ink-soft); text-align:right;}

/* ---------- Dimension bars ---------- */
.dim-row{margin-bottom:12px;}
.dim-row .lbl{display:flex; justify-content:space-between; font-size:12.5px; font-weight:600; margin-bottom:4px;}
.dim-row .lbl span:last-child{font-variant-numeric:tabular-nums;}
.bar{height:8px; border-radius:99px; background:#EDF1F5; overflow:hidden;}
.bar i{display:block; height:100%; border-radius:99px; transition:width .5s cubic-bezier(.2,.8,.2,1);}
.b-bhn i{background:var(--bhn);} .b-fow i{background:var(--fow);} .b-opp i{background:var(--opp);}
.score-big{font-family:var(--font-display); font-weight:700; font-size:56px; line-height:1; letter-spacing:-.02em;}
.score-meta{color:var(--ink-soft); font-size:13px; margin:4px 0 16px;}

/* ---------- Chips ---------- */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 10px;}
.chip{display:inline-flex; align-items:center; gap:6px; padding:5px 8px 5px 12px; border-radius:99px; font-size:12.5px; font-weight:600; color:#fff; border:none; cursor:pointer;}
.chip .x{opacity:.75; font-weight:700;}
.chip:hover .x{opacity:1;}

/* ---------- Tables ---------- */
table{width:100%; border-collapse:collapse; font-size:13.5px;}
th{font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); text-align:left; padding:8px 10px; border-bottom:2px solid var(--line); cursor:pointer; user-select:none; white-space:nowrap;}
th.num, td.num{text-align:right; font-variant-numeric:tabular-nums;}
td{padding:8px 10px; border-bottom:1px solid #ECF0F4;}
tbody tr.rowlink{cursor:pointer;}
tbody tr.rowlink:hover{background:#F2F7FC;}
.delta-up{color:#177A45; font-weight:600;}
.delta-down{color:#B3391F; font-weight:600;}
.rank-cell{color:var(--ink-soft); width:40px;}

/* ---------- Framework grid (about) ---------- */
.fw{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px;}
@media (max-width:860px){ .fw{grid-template-columns:1fr;} }
.fw .col{border-top:4px solid; border-radius:var(--radius); background:var(--panel); border-left:1px solid var(--line); border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:16px 18px;}
.fw h3{font-family:var(--font-display); font-size:16px; margin-bottom:8px;}
.fw ul{list-style:none;}
.fw li{padding:7px 0; border-bottom:1px solid #EFF3F6; font-size:13.5px;}
.fw li:last-child{border-bottom:none;}

/* ---------- Admin ---------- */
.drop{border:2px dashed var(--line); border-radius:var(--radius); padding:40px 20px; text-align:center; color:var(--ink-soft); background:var(--panel); cursor:pointer; transition:border-color .15s, background .15s;}
.drop.hover,.drop:hover{border-color:var(--bhn); background:#F5FAFF;}
.field{margin-bottom:12px;}
.field label{display:block; font-size:12.5px; font-weight:600; margin-bottom:4px;}
.field input{width:100%;}
.log{font:12.5px ui-monospace,monospace; background:#0F1B29; color:#C9D7E4; border-radius:10px; padding:14px; white-space:pre-wrap; max-height:260px; overflow:auto;}
.ok{color:#5AD08F;} .err{color:#FF8A70;} .warn{color:#F2C879;}

footer{margin-top:28px; font-size:12.5px; color:var(--ink-soft); display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}
@media (prefers-reduced-motion: reduce){ *{transition:none !important;} html{scroll-behavior:auto;} }