html, body { height: 100%; margin: 0; font-family: system-ui, Segoe UI, Arial, sans-serif; }
.topbar{ height: 52px; display:flex; align-items:center; justify-content:space-between; padding: 0 12px;
  border-bottom: 1px solid #222; background: #0b0f14; color: #e8eefc; }
.title{ font-weight: 700; letter-spacing: 0.3px; }
.status{ display:flex; gap: 8px; align-items:center; }
.badge{ padding: 4px 8px; border-radius: 999px; background: #1b2431; border: 1px solid #2a3a52; font-size: 12px; }
.select{ height: 30px; border-radius: 10px; border: 1px solid #2a3a52; background: #111826; color: #e8eefc; padding: 0 10px; }
button{ padding: 6px 10px; border-radius: 10px; border: 1px solid #2a3a52; background: #111826; color: #e8eefc; cursor: pointer; }
button:hover{ filter: brightness(1.1); }
#map{ height: calc(100% - 52px); width: 100%; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: #0b0f14; color: #e8eefc; border: 1px solid #2a3a52; }