:root{
  --bg:#0f172a; --card:#1e293b; --text:#e2e8f0; --muted:#94a3b8;
  --border:#334155; --accent:#7c3aed; --accent2:#a78bfa;
  --good:#10b981; --good2:#34d399; --bad:#ef4444; --bad2:#f87171;
  --warn:#f59e0b; --warn2:#fbbf24; --info:#0891b2;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg); color:var(--text); line-height:1.55;
  padding-bottom:40px;
}
a{color:var(--accent2);text-decoration:none}
a:hover{text-decoration:underline}
code{background:#0f172a;padding:1px 6px;border-radius:3px;font-size:12px;color:var(--warn2)}

/* Sticky nav */
.nav{
  position:sticky; top:0; z-index:50;
  background:rgba(15,23,42,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  padding:10px 24px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.nav .brand{font-weight:700; font-size:15px; color:var(--accent2); margin-right:8px}
.nav a{
  color:var(--muted); padding:6px 12px; border-radius:6px; font-size:13px;
}
.nav a.active{ background:var(--accent); color:#fff }
.nav a:hover{ color:var(--text); text-decoration:none; background:rgba(124,58,237,.15) }
.nav .spacer{flex:1}
.nav .meta{font-size:11px; color:var(--muted); font-family:monospace}

/* Sticky filter bar */
.filterbar{
  position:sticky; top:48px; z-index:40;
  background:rgba(30,41,59,.94); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  padding:10px 24px; display:flex; flex-wrap:wrap; gap:10px; align-items:center;
}
.filterbar label{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px; margin-right:4px}
select, button.btn, input[type="text"]{
  background:#0f172a; border:1px solid var(--border); color:var(--text);
  padding:6px 12px; border-radius:6px; font-size:13px; cursor:pointer;
  font-family:inherit;
}
button.btn:hover, select:hover{ border-color:var(--accent) }
button.btn.active{ background:var(--accent); border-color:var(--accent) }
.checkboxes{display:flex; flex-wrap:wrap; gap:6px}
.checkboxes label{
  background:#0f172a; border:1px solid var(--border); padding:4px 10px; border-radius:14px;
  cursor:pointer; font-size:12px; color:var(--text); text-transform:none; letter-spacing:0;
}
.checkboxes label.on{ background:var(--accent); border-color:var(--accent) }
.checkboxes input{display:none}

/* Layout */
.container{max-width:1400px; margin:0 auto; padding:24px}
h1{font-size:24px; margin:0 0 4px}
.sub{color:var(--muted); font-size:13px; margin-bottom:18px}

.section{
  background:var(--card); border:1px solid var(--border);
  border-radius:10px; padding:18px; margin-bottom:18px;
}
.section h2{margin:0 0 10px; font-size:16px; color:var(--accent2)}
.section h3{margin:14px 0 6px; font-size:14px; color:#cbd5e1}

.note{
  font-size:12px; color:#cbd5e1;
  border-left:3px solid var(--accent);
  padding:10px 14px; background:rgba(124,58,237,.07);
  margin:8px 0; border-radius:4px;
}
.note b{color:var(--accent2)}

.grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
@media(max-width:900px){.grid,.grid-3{grid-template-columns:1fr}}

table{width:100%; border-collapse:collapse; font-size:13px}
th,td{text-align:right; padding:7px 10px; border-bottom:1px solid var(--border)}
th{color:var(--muted); font-weight:500; text-transform:uppercase; font-size:11px; letter-spacing:.4px; cursor:pointer; user-select:none}
th:first-child, td:first-child{text-align:left}
tr:hover td{background:rgba(124,58,237,.07)}

.pill{display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:500}
.pill.good{background:rgba(16,185,129,.18); color:var(--good2)}
.pill.bad{background:rgba(239,68,68,.18); color:var(--bad2)}
.pill.warn{background:rgba(245,158,11,.18); color:var(--warn2)}
.pill.info{background:rgba(8,145,178,.18); color:#67e8f9}

.opp{display:inline-block; padding:2px 9px; border-radius:4px; font-weight:600; font-family:monospace}
.opp.hi{background:rgba(16,185,129,.2); color:var(--good2)}
.opp.mid{background:rgba(245,158,11,.2); color:var(--warn2)}
.opp.lo{background:rgba(239,68,68,.2); color:var(--bad2)}

.delta-pos{color:var(--good2)}
.delta-neg{color:var(--bad2)}

.chart{width:100%; height:480px; margin-top:8px}
.chart-sm{width:100%; height:300px}

.stat{
  background:#0f172a; border:1px solid var(--border); border-radius:8px;
  padding:14px;
}
.stat .lbl{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.4px}
.stat .num{font-size:22px; font-weight:600; color:var(--accent2)}
.stat .sub{font-size:11px; color:var(--muted); margin:0}

.legend-mini{display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--muted)}
.legend-mini .dot{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px; vertical-align:middle}

footer{
  text-align:center; color:var(--muted); font-size:12px; margin-top:30px;
}
footer a{color:var(--accent2)}

/* Candidate cards — mobile-first */
.candidates-page{max-width:1180px}
.brief-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.brief-grid>div{background:#0f172a;border:1px solid var(--border);border-radius:10px;padding:12px}
.brief-grid b{display:block;color:var(--accent2);font-size:16px}
.brief-grid span{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;padding:12px}
.candidate-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:18px}
.candidate-card{background:var(--card);border:1px solid var(--border);border-radius:14px;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.18)}
.candidate-img{display:block;width:100%;height:220px;object-fit:cover;background:#0f172a;color:var(--muted);text-align:center;padding-top:80px;font-size:13px}
.candidate-img.placeholder span{color:var(--accent2)}
.candidate-body{padding:14px}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}
.score{font-family:monospace;color:var(--accent2);font-weight:700;background:rgba(124,58,237,.12);border:1px solid rgba(167,139,250,.25);border-radius:999px;padding:3px 9px;font-size:12px}
.candidate-card h2{font-size:17px;margin:0 0 4px;color:var(--text);line-height:1.25}
.candidate-meta{color:var(--muted);font-size:12px;margin:4px 0}
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:12px 0}
.facts span{background:#0f172a;border:1px solid var(--border);border-radius:8px;padding:7px 4px;text-align:center;font-size:12px;color:#cbd5e1}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.tags span{font-size:11px;color:#c4b5fd;background:rgba(124,58,237,.12);border:1px solid rgba(167,139,250,.2);border-radius:999px;padding:3px 8px}
details{font-size:12px;color:#cbd5e1;margin-top:8px} details summary{cursor:pointer;color:var(--warn2)}
.actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.btn-link{display:inline-block;background:#0f172a;border:1px solid var(--border);border-radius:8px;padding:8px 12px;font-size:13px;color:var(--text)}.btn-link.primary{background:var(--accent);border-color:var(--accent);color:white}.btn-link:hover{text-decoration:none;filter:brightness(1.1)}
.compact-list{font-size:13px;color:#cbd5e1;margin:8px 0 0;padding-left:18px}
@media(max-width:760px){.nav{padding:8px 12px;gap:6px}.nav .brand{width:100%;margin-bottom:2px}.nav a{padding:5px 8px;font-size:12px}.container{padding:14px}.candidate-grid{grid-template-columns:1fr;gap:12px}.candidate-img{height:190px}.brief-grid{grid-template-columns:1fr 1fr}.facts{grid-template-columns:repeat(2,1fr)}.section{padding:14px}h1{font-size:21px}.toolbar{position:sticky;top:82px;z-index:30;background:rgba(30,41,59,.96)}}
@media(max-width:420px){.brief-grid{grid-template-columns:1fr}.candidate-img{height:170px}.card-top{align-items:flex-start}.score{font-size:11px}.candidate-card h2{font-size:16px}}