:root {
  --ink: #10233b;
  --muted: #607086;
  --paper: #f6f4ee;
  --anncsu-n: #2563eb;
  --anncsu-c: #7c3aed;
  --openfiber: #f97316;
  --piano: #16a34a;
  --anomaly: #dc2626;
}

* { box-sizing: border-box; }
html, body, main { width: 100%; height: 100%; margin: 0; }
body { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: var(--ink); background: var(--paper); }
main { display: grid; grid-template-rows: auto auto 1fr; }
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.4rem .8rem; background: #fff; border-bottom: 1px solid #dce3eb; }
.eyebrow { margin: 0 0 .2rem; color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
h1 { margin: 0; font-family: Georgia, serif; font-size: clamp(1.35rem, 2.7vw, 2.15rem); font-weight: 500; }
.status { padding: .55rem .8rem; border-radius: 999px; color: var(--muted); background: #eef2f6; font-size: .8rem; white-space: nowrap; }
.toolbar { display: flex; align-items: center; gap: .7rem; padding: .65rem 1.4rem; overflow-x: auto; background: rgba(255,255,255,.95); border-bottom: 1px solid #dce3eb; }
.source { display: inline-flex; align-items: center; gap: .42rem; min-width: max-content; padding: .5rem .7rem; border: 1px solid #dce3eb; border-radius: .65rem; background: #fff; font-size: .82rem; cursor: pointer; }
.extra-only { display: none; }
.extra-mode .extra-only { display: inline-flex; }
.source input { accent-color: currentColor; }
.source span { width: .65rem; height: .65rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 16%, transparent); }
.source strong { color: var(--muted); font-variant-numeric: tabular-nums; }
.source-anncsu-n { color: var(--anncsu-n); }
.source-anncsu-c { color: var(--anncsu-c); }
.source-openfiber { color: var(--openfiber); }
.source-piano { color: var(--piano); }
.source-anomaly { color: var(--anomaly); }
.source-anomaly strong { color: #991b1b; }
.anomaly-jump { display: inline-flex; align-items: center; gap: .42rem; min-width: max-content; color: var(--muted); font-size: .78rem; }
.anomaly-jump select { padding: .45rem .55rem; border: 1px solid #dce3eb; border-radius: .55rem; color: var(--ink); background: #fff; font: inherit; }
.hint { margin-left: auto; min-width: max-content; color: var(--muted); font-size: .78rem; }
#map { min-height: 360px; background: #dbe6ef; }
.leaflet-popup-content { min-width: 220px; line-height: 1.45; }
.popup-source { display: inline-block; margin-bottom: .45rem; padding: .2rem .45rem; border-radius: 999px; color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .05em; }
.popup-title { margin: 0 0 .25rem; font-size: 1rem; }
.popup-detail { color: var(--muted); font-size: .78rem; }
.aggregate-marker { display: grid; place-items: center; width: 34px; height: 34px; border: 3px solid rgba(255,255,255,.92); border-radius: 50%; color: #fff; font-size: 10px; font-weight: 900; box-shadow: 0 2px 10px rgba(15,23,42,.28); }
.anomaly-civic-tooltip { padding: 1px 4px; border: 1px solid #fff; color: #fff; background: #334155; font-size: 10px; font-weight: 800; box-shadow: 0 1px 4px rgba(15,23,42,.35); }
.anomaly-civic-tooltip::before { display: none; }
.anomaly-civic-suspect { background: #b91c1c; }
.anomaly-civic-neighbor { background: #b45309; }
.anomaly-marker { display: grid; place-items: center; background: transparent; }
.anomaly-marker span { width: 16px; height: 16px; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 2px 7px rgba(15,23,42,.42); }
.anomaly-marker-confirmed span { background: #dc2626; }
.anomaly-marker-ambiguous span { background: #f59e0b; }
.anomaly-marker-rejected span { background: #16a34a; }
.anomaly-marker-unrated span { background: #64748b; }
.marker-cluster div { color: #fff; font-weight: 800; }
.marker-cluster-anncsu_n div { background: color-mix(in srgb, var(--anncsu-n) 88%, white); }
.marker-cluster-anncsu_c div { background: color-mix(in srgb, var(--anncsu-c) 88%, white); }
.marker-cluster-openfiber div { background: color-mix(in srgb, var(--openfiber) 88%, white); }
.marker-cluster-piano div { background: color-mix(in srgb, var(--piano) 88%, white); }
.marker-cluster-anomaly { filter: drop-shadow(0 2px 5px rgba(15,23,42,.3)); }
.marker-cluster-anomaly-confirmed div { background: color-mix(in srgb, var(--anomaly) 90%, white); }
.marker-cluster-anomaly-ambiguous div { background: color-mix(in srgb, #f59e0b 90%, white); }
.marker-cluster-anomaly-rejected div { background: color-mix(in srgb, #16a34a 90%, white); }
.marker-cluster-anomaly-unrated div { background: color-mix(in srgb, #64748b 90%, white); }
.marker-cluster-anomaly-mixed div { background: #9f1239; }
@media (max-width: 680px) {
  .topbar { padding: .75rem .85rem; }
  .toolbar { padding: .55rem .75rem; }
  .hint { display: none; }
  .status { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; }
}