:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #17231d;
  background: #eef1ec;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; }

.topbar {
  min-height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 15px 24px 14px;
  color: #f6f4ea;
  background: #17231d;
  border-bottom: 4px solid #d5a637;
}

.eyebrow { color: #d5a637; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
h1 { margin: 4px 0 0; font-family: Georgia, serif; font-size: clamp(22px, 3vw, 34px); font-weight: 500; }
.status { white-space: nowrap; font-size: 13px; color: #dfe6df; }
.status span { display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; background: #efb64a; }

main { height: calc(100vh - 88px); display: grid; grid-template-columns: 330px 1fr; }
.panel { z-index: 500; padding: 22px; background: #f8f7f1; border-right: 1px solid #d9ddd5; overflow-y: auto; }
.summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 24px; }
.summary div { min-height: 78px; padding: 12px; background: white; border: 1px solid #e2e4de; border-radius: 8px; }
.summary div:first-child { grid-column: 1 / -1; background: #e7eee8; }
.summary strong { display: block; font: 600 25px Georgia, serif; }
.summary span { display: block; margin-top: 5px; color: #657068; font-size: 12px; }
label { display: block; margin: 18px 0 7px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.search-row { display: flex; gap: 7px; }
input, select, button { height: 39px; border-radius: 6px; border: 1px solid #bdc5bd; font: inherit; }
input, select { width: 100%; padding: 0 10px; background: white; }
button { padding: 0 13px; color: white; background: #355c46; border-color: #355c46; cursor: pointer; }
button:hover { background: #294b38; }
.legend { margin-top: 22px; display: grid; gap: 8px; font-size: 12px; }
.legend-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.legend-label { display: flex; align-items: center; gap: 8px; }
.swatch { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(0,0,0,.25); }
.legend-count { color: #6b746d; font-variant-numeric: tabular-nums; }
.note { margin-top: 24px; padding-top: 16px; border-top: 1px solid #d9ddd5; color: #727b74; font-size: 12px; line-height: 1.5; }
.map-wrap, #map { position: relative; width: 100%; height: 100%; }
#loading { position: absolute; z-index: 900; left: 50%; top: 22px; transform: translateX(-50%); padding: 10px 14px; border-radius: 20px; background: rgba(23,35,29,.92); color: white; font-size: 13px; }
#loading span { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; background: #d5a637; animation: pulse 1s infinite alternate; }
@keyframes pulse { to { opacity: .25; } }
.leaflet-popup-content { min-width: 220px; line-height: 1.45; }
.popup-title { margin-bottom: 8px; font: 600 18px Georgia, serif; }
.popup-row { display: flex; justify-content: space-between; gap: 14px; padding: 3px 0; border-bottom: 1px solid #edf0eb; }
.popup-row span:first-child { color: #69726b; }

@media (max-width: 760px) {
  .topbar { min-height: 76px; padding: 12px 15px; }
  .status { display: none; }
  main { height: calc(100vh - 76px); display: block; }
  .panel { position: absolute; z-index: 700; left: 10px; right: 10px; bottom: 10px; max-height: 43vh; border: 0; border-radius: 10px; box-shadow: 0 8px 30px rgba(0,0,0,.2); }
  .map-wrap { height: 100%; }
}