:root {
  --bg: #fafaf8; --surface: #fff; --ink: #1d2327; --muted: #5f6b73; --line: #e3e5e6;
  --accent: #0b6e8a; --accent-soft: #e4f1f5; --warn: #b8213b;
  --r: 8px; --shadow: 0 1px 3px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.06);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 15px; line-height: 1.45; color: var(--ink); background: var(--bg);
}
* { box-sizing: border-box; }
body { margin: 0; height: 100vh; display: flex; flex-direction: column; }
a { color: var(--accent); }
h1 { font-size: 1.4rem; margin: 0; font-weight: 600; }
h2 { font-size: 1.1rem; margin: 1.6rem 0 .6rem; font-weight: 600; }
h3 { font-size: .95rem; margin: 1rem 0 .4rem; font-weight: 600; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

/* header */
.top { display: flex; align-items: center; gap: 1.2rem; padding: .55rem 1rem; background: var(--surface);
  border-bottom: 1px solid var(--line); flex-wrap: wrap; z-index: 3; }
.brand { font-weight: 650; color: var(--ink); text-decoration: none; letter-spacing: -.01em; }
.top nav { display: flex; gap: .2rem; flex-wrap: wrap; }
.top nav a { text-decoration: none; color: var(--muted); padding: .3rem .6rem; border-radius: 6px; }
.top nav a.active, .top nav a:hover { color: var(--ink); background: var(--accent-soft); }
.badge { margin-left: auto; font-size: .75rem; color: var(--muted); border: 1px solid var(--line); border-radius: 99px; padding: .1rem .55rem; }

main { flex: 1; position: relative; min-height: 0; }
.view { position: absolute; inset: 0; }
.view[hidden] { display: none; }
.page { overflow-y: auto; padding: 1.2rem clamp(1rem, 4vw, 3rem) 3rem; }
.page > * { max-width: 1050px; }
.page-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .6rem; }

/* cards & controls */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.controls { position: absolute; top: 12px; left: 12px; width: 270px; padding: .8rem; display: flex; flex-direction: column; gap: .55rem; z-index: 2; }
.controls label, .inline-controls label { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; color: var(--muted); }
.controls label.check, .inline-controls label.check { flex-direction: row; align-items: center; gap: .4rem; color: var(--ink); }
select, input[type=search] { font: inherit; font-size: .9rem; padding: .35rem .45rem; border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink); width: 100%; }
details summary { cursor: pointer; font-size: .85rem; color: var(--muted); }
details[open] { display: flex; flex-direction: column; gap: .4rem; }
.row { display: flex; flex-wrap: wrap; gap: 3px; }
.seg { font: inherit; font-size: .8rem; padding: .25rem .5rem; border: 1px solid var(--line); background: #fff; border-radius: 6px; cursor: pointer; color: var(--ink); }
.seg[aria-checked=true] { background: var(--accent); border-color: var(--accent); color: #fff; }
.hint { font-size: .78rem; color: var(--muted); margin: 0; }
.inline-controls { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: flex-end; padding: .8rem 1rem; margin-bottom: 1rem; }
.inline-controls label.range { flex-direction: row; align-items: center; gap: .5rem; color: var(--ink); }
.inline-controls input[type=range] { width: 200px; }
.inline-controls label.inline { flex-direction: row; align-items: center; gap: .4rem; color: var(--ink); }
.inline-controls select { width: auto; }

/* map */
#map { position: absolute; inset: 0; background: #eef0ee; }
.legend { position: absolute; left: 12px; bottom: 28px; padding: .6rem .75rem; font-size: .78rem; z-index: 2; max-width: 270px; }
.legend .title { font-weight: 600; margin-bottom: .35rem; font-size: .8rem; }
.legend .item { display: flex; align-items: center; gap: .45rem; line-height: 1.5; }
.legend .sw { width: 14px; height: 10px; border-radius: 2px; border: 1px solid rgba(0,0,0,.08); }
.panel { position: absolute; top: 12px; right: 12px; bottom: 28px; width: 340px; padding: 1rem 1rem 1.2rem; overflow-y: auto; z-index: 2; }
.panel .close { position: absolute; top: 6px; right: 8px; border: 0; background: none; font-size: 1.4rem; cursor: pointer; color: var(--muted); }
.panel h2 { margin: 0 0 .1rem; font-size: 1.05rem; }
.panel table { font-size: .78rem; } .panel th, .panel td { padding: .3rem .35rem; }
.kv { display: grid; grid-template-columns: 1fr auto; gap: .15rem .8rem; font-size: .86rem; margin: .6rem 0; }
.kv dt { color: var(--muted); } .kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.big { font-size: 1.6rem; font-weight: 650; letter-spacing: -.01em; }
.note { font-size: .78rem; color: var(--muted); border-left: 3px solid var(--line); padding-left: .6rem; margin: .8rem 0 0; }
.flag { display: inline-block; font-size: .72rem; padding: .05rem .4rem; border-radius: 99px; border: 1px solid var(--line); }
.flag.on { background: #fbe9ec; border-color: #f0c2ca; color: var(--warn); }

/* tables & charts */
.grid-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; }
.stat { padding: .8rem .9rem; }
.stat .label { font-size: .8rem; color: var(--muted); }
.stat .value { font-size: 1.35rem; font-weight: 650; margin-top: .15rem; font-variant-numeric: tabular-nums; }
.stat .sub { font-size: .78rem; color: var(--muted); margin-top: .2rem; }
table { border-collapse: collapse; width: 100%; font-size: .85rem; font-variant-numeric: tabular-nums; }
th, td { text-align: right; padding: .35rem .5rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
th { font-weight: 600; color: var(--muted); cursor: pointer; user-select: none; }
th[aria-sort] { color: var(--ink); }
tr.dim td { color: var(--muted); }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 1.2rem; }
svg.bars text { font-size: 11px; fill: var(--ink); font-family: inherit; }
svg.bars .val { fill: var(--muted); }
.btn-link { border: 0; background: none; color: var(--accent); cursor: pointer; font: inherit; font-size: .85rem; padding: 0; }
.prose { line-height: 1.6; }
.prose > * { max-width: 760px; }
.prose dl dt { font-weight: 600; margin-top: .6rem; }
.prose dl dd { margin: 0 0 .3rem 0; color: #333; }

@media (max-width: 720px) {
  .controls { width: auto; right: 12px; }
  .controls details, .controls .hint { display: none; }
  .legend { bottom: 12px; }
  .panel { top: auto; left: 0; right: 0; bottom: 0; width: auto; max-height: 55vh; border-radius: 12px 12px 0 0; }
}