:root {
  --bg: #fcfcfb;
  --panel: #ffffff;
  --ink: #1f2430;
  --ink-2: #5b6472;
  --line: #e3e5e8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1a1a19;
    --panel: #232323;
    --ink: #ececea;
    --ink-2: #a3a8b0;
    --line: #3a3a39;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  display: flex; flex-direction: column;
  background: var(--bg); color: var(--ink);
  font: 14px/1.45 system-ui, "Segoe UI", sans-serif;
}
.topbar {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 10px 16px; background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.topbar h1 { font-size: 17px; margin: 0; }
.topbar .sub { font-weight: 400; color: var(--ink-2); font-size: 13px; }
.filters { display: flex; align-items: center; gap: 16px; }
.filters label { display: flex; align-items: center; gap: 6px; color: var(--ink-2); }
.filters select {
  font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px;
}
.count { color: var(--ink-2); min-width: 130px; }
.filters-parcels { flex-basis: 100%; padding-top: 6px; border-top: 1px dashed var(--line); }
.note { color: var(--ink-2); font-size: 12px; }
#exportBtn {
  font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 12px;
  cursor: pointer;
}
#exportBtn:hover { border-color: var(--ink-2); }
#exportBtn:disabled { opacity: 0.5; cursor: default; }
.filters input[type="number"] {
  width: 64px; font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px;
}
#map { flex: 1; }
.legend {
  position: absolute; bottom: 24px; left: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 8px 12px; display: flex; flex-direction: column; gap: 4px;
  font-size: 13px;
}
.legend .row { display: flex; align-items: center; gap: 8px; }
.legend .dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  box-shadow: 0 0 0 2px var(--panel);
}
.maplibregl-popup-content {
  background: var(--panel); color: var(--ink);
  font: 13px/1.4 system-ui, "Segoe UI", sans-serif;
  border-radius: 8px; padding: 8px 12px;
}
.maplibregl-popup-content .b { font-weight: 600; }
.maplibregl-popup-content .m { color: var(--ink-2); }