:root {
  --bg: #f4f7fb;
  --panel: #ffffff;
  --ink: #14213d;
  --muted: #6b7280;
  --line: #dde5f0;
  --soft: #eef3fb;
  --blue: #2f6fed;
  --blue-dark: #214eaf;
  --s: #7c3aed;
  --a: #0ea5e9;
  --b: #22c55e;
  --c: #f59e0b;
  --d: #ef4444;
  --shadow: 0 18px 55px rgba(15, 23, 42, .14);
  --radius: 18px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }
button, input { font: inherit; }
.app-shell { display: grid; grid-template-columns: 380px 1fr; height: 100vh; overflow: hidden; }
.panel { background: var(--panel); border-right: 1px solid var(--line); padding: 22px; overflow-y: auto; box-shadow: 8px 0 30px rgba(15,23,42,.05); z-index: 5; }
.brand { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.eyebrow { margin: 0 0 4px; color: var(--muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; }
h1 { margin: 0; font-size: 28px; line-height: 1.05; letter-spacing: -.04em; }
h2 { margin: 0; font-size: 18px; }
.pill { border-radius: 999px; padding: 7px 11px; background: #111827; color: #fff; font-weight: 800; font-size: 13px; white-space: nowrap; }
.pill.pale { background: var(--soft); color: var(--muted); }
.status-row { display:flex; align-items:center; justify-content:space-between; gap:12px; margin: 8px 0 18px; }
.status-dot { color: var(--muted); font-size: 13px; display:flex; align-items:center; gap:8px; }
.status-dot::before { content:""; width:9px; height:9px; border-radius:99px; background:#f59e0b; display:inline-block; box-shadow: 0 0 0 5px rgba(245,158,11,.13); }
.status-dot.ok::before { background:#22c55e; box-shadow: 0 0 0 5px rgba(34,197,94,.14); }
.status-dot.warn::before { background:#ef4444; box-shadow: 0 0 0 5px rgba(239,68,68,.13); }
.ghost, .mini-link { border:0; background:transparent; color:var(--blue); cursor:pointer; font-weight:800; font-size:12px; padding:4px; }
.search-box { display:block; margin-bottom: 18px; }
.search-box span, .block-title { display:block; font-weight:900; font-size:13px; margin-bottom: 9px; }
.search-box input { width:100%; border:1px solid var(--line); border-radius:14px; padding:13px 14px; outline:none; background:#f9fbff; }
.search-box input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(47,111,237,.10); }
.control-block { border-top:1px solid var(--line); padding:16px 0; }
.block-head { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.segmented { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:8px; }
.segmented.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.segmented.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.segmented button { border:1px solid var(--line); background:#fff; color:#334155; padding:9px 8px; border-radius:12px; cursor:pointer; font-weight:800; font-size:12px; transition:.12s ease; }
.segmented button.active { background:var(--blue); color:white; border-color:var(--blue); box-shadow:0 8px 18px rgba(47,111,237,.22); }
.hint { margin: 9px 0 0; color: var(--muted); font-size: 12px; line-height: 1.35; }
.hint.tight { margin-top:0; }
code { background:#eef2ff; padding:1px 4px; border-radius:4px; }
.chips { display:flex; flex-wrap:wrap; gap:9px; }
.chips label { cursor:pointer; }
.chips input { display:none; }
.chips input:not(:checked) + span { opacity:.38; filter:grayscale(.3); }
.tier-badge { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:6px 10px; color:white; font-weight:900; font-size:12px; min-width: 52px; }
.tier-S { background: var(--s); }
.tier-A { background: var(--a); }
.tier-B { background: var(--b); }
.tier-C { background: var(--c); }
.tier-D { background: var(--d); }
.stats { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:10px; padding:16px 0; border-top:1px solid var(--line); }
.stats article, .median-card { background:linear-gradient(180deg, #fff, #f7faff); border:1px solid var(--line); border-radius:16px; padding:13px; }
.stats article.accent { border-color:rgba(47,111,237,.25); box-shadow: inset 0 0 0 1px rgba(47,111,237,.08); }
.stats strong { display:block; font-size:24px; letter-spacing:-.04em; }
.stats span, .median-grid span { color: var(--muted); font-size:12px; font-weight:700; }
.median-card { margin-bottom: 2px; }
.median-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:8px; margin-top:10px; }
.median-grid div { background:#fff; border:1px solid var(--line); border-radius:13px; padding:10px 8px; }
.median-grid strong { display:block; margin-top:4px; font-size:20px; letter-spacing:-.04em; }
.import-block { display:grid; gap:9px; }
.primary, .file-button { display:flex; align-items:center; justify-content:center; border:0; border-radius:14px; padding:12px 13px; background:var(--blue); color:#fff; font-weight:900; cursor:pointer; box-shadow:0 12px 22px rgba(47,111,237,.22); text-align:center; }
.file-button { background:#111827; box-shadow:none; }
.legend { border-top:1px solid var(--line); padding-top:14px; display:flex; flex-wrap:wrap; gap:10px; color:var(--muted); font-size:12px; font-weight:800; }
.legend span { display:flex; align-items:center; gap:6px; }
.legend i { width:12px; height:12px; border-radius:999px; display:inline-block; }
.map-area { position:relative; min-width:0; }
#map { position:absolute; inset:0 0 250px 0; background:#dbeafe; }
.table-card { position:absolute; left:18px; right:18px; bottom:18px; height:215px; background:rgba(255,255,255,.96); border:1px solid rgba(226,232,240,.9); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; backdrop-filter: blur(8px); }
.table-top { display:flex; align-items:center; justify-content:space-between; padding:14px 16px 10px; border-bottom:1px solid var(--line); gap:14px; }
.small-note { color:var(--muted); font-size:12px; line-height:1.35; }
.table-wrap { height: calc(100% - 52px); overflow:auto; }
table { width:100%; border-collapse:collapse; font-size:13px; }
th, td { padding:9px 12px; border-bottom:1px solid #eef2f7; text-align:left; vertical-align:middle; }
th { position:sticky; top:0; background:#f8fafc; z-index:2; color:#475569; font-size:11px; text-transform:uppercase; letter-spacing:.05em; }
tbody tr { cursor:pointer; }
tbody tr:hover { background:#f8fbff; }
.num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; font-weight:800; }
.delta-up { color:#059669; }
.delta-down { color:#dc2626; }
.muted { color: var(--muted); font-size: 12px; }
.school-dot { width:18px !important; height:18px !important; border-radius:999px; border:3px solid #fff; box-shadow:0 4px 14px rgba(15,23,42,.32); }
.drawer { position:fixed; top:0; right:0; height:100vh; width: 390px; max-width: 90vw; background:#fff; z-index:50; transform: translateX(110%); transition:.22s ease; box-shadow:-22px 0 70px rgba(15,23,42,.24); padding:26px; overflow-y:auto; }
.drawer.open { transform:translateX(0); }
.drawer-close { position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:999px; border:1px solid var(--line); background:#fff; cursor:pointer; font-size:24px; line-height:1; }
.drawer h2 { font-size:25px; letter-spacing:-.04em; margin: 24px 0 8px; }
.meta { color:var(--muted); margin:0 0 12px; line-height:1.45; }
.score-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin:18px 0; }
.score-grid div { border:1px solid var(--line); border-radius:16px; padding:14px 10px; background:#f8fafc; }
.score-grid strong { display:block; font-size:24px; letter-spacing:-.05em; }
.score-grid span { color:var(--muted); font-size:12px; font-weight:800; }
.compare-box { background:#f8fafc; border:1px solid var(--line); border-radius:16px; padding:14px; margin-top:14px; }
.compare-box h3 { margin:0 0 10px; font-size:14px; }
.compare-row { display:flex; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px dashed #dbe3ee; font-size:13px; }
.compare-row:last-child { border-bottom:0; }
@media (max-width: 950px) {
  .app-shell { grid-template-columns:1fr; height:auto; min-height:100vh; overflow:auto; }
  .panel { position:relative; max-height:none; border-right:0; border-bottom:1px solid var(--line); }
  .map-area { height: 760px; }
  #map { inset:0 0 260px 0; }
  .table-card { left:10px; right:10px; bottom:10px; }
}
@media (max-width: 560px) {
  .panel { padding:16px; }
  .segmented, .segmented.three { grid-template-columns:1fr 1fr; }
  .stats, .median-grid { grid-template-columns:1fr 1fr; }
  .table-card { height:250px; }
  #map { inset:0 0 285px 0; }
}