/* --- Base layout --- */
:root{
  --bg: #0b0d12;
  --panel: #121620;
  --muted: #9aa4b2;
  --text: #e7ecf3;
  --accent: #4da3ff;
  --accent-2:#6bdcff;
  --danger:#ff6b6b;
  --ok:#7ee081;
  --border:#1f2533;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}

* { box-sizing: border-box; }
html, body, #map { height: 100%; width: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; }

/* --- App bar --- */
.appbar{
  position: fixed; top: 0; left: 0; right: 0;
  height: 52px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; background: linear-gradient(180deg, #0c0f16 0%, #0b0d12 100%);
  border-bottom: 1px solid var(--border); z-index: 1001;
}
.brand{ font-weight: 700; letter-spacing:.2px; display:flex; align-items:center; gap:10px; }
.brand .dot{ width:10px; height:10px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:inline-block; }
.appbar-right{ color: var(--muted); }

/* Map below the bar */
#map { position: absolute; top: 52px; left: 0; right: 0; bottom: 0; }

/* --- Control panel --- */
.panel{
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 16px; display: flex; align-items: center; gap: 10px;
  background: rgba(18,22,32,.9); padding: 10px 12px; border:1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow); z-index: 1001;
  backdrop-filter: blur(4px);
}
.btn{
  appearance: none; border:1px solid var(--border); background:#0f1320; color:var(--text);
  padding:7px 10px; border-radius:10px; cursor:pointer;
}
.btn:hover{ border-color:#2a3346; background:#12182a; }
.btn.primary{ background: linear-gradient(135deg, var(--accent), var(--accent-2)); color:#081019; border-color: transparent; font-weight: 600; }
.btn.primary:hover{ filter: brightness(1.05); }

.slider{
  width: 300px; accent-color: var(--accent);
  background: transparent;
}
.label{ color: var(--muted); min-width: 90px; text-align:center; }

/* --- Status toast --- */
.status{
  position: absolute; left:50%; transform: translateX(-50%);
  top: 64px; padding: 8px 12px; border-radius: 10px; color:#fff; background: rgba(0,0,0,.55);
  z-index:1001; display:none; box-shadow: var(--shadow);
}

/* --- Legend --- */
.leaflet-control.legend{
  background: rgba(18,22,32,.92); color: var(--text);
  border:1px solid var(--border); border-radius: 10px; padding: 10px; box-shadow: var(--shadow);
}
.legend h4{ margin:0 0 6px; font-size: 13px; color:#cbd5e1; }
.legend .row{ display:flex; align-items:center; gap:8px; margin:4px 0; }
.legend .swatch{ width:18px; height:10px; border-radius:2px; }
.legend .muted{ color: var(--muted); font-size:12px; }

/* --- Leaflet tweaks for dark UI --- */
.leaflet-control-zoom a,
.leaflet-bar a { background:#0f1320; color:#e7ecf3; border-color: var(--border); }
.leaflet-control-zoom a:hover,
.leaflet-bar a:hover{ background:#12182a; }
.leaflet-popup-content{ color:#e7ecf3; }
.leaflet-container a{ color: var(--accent); }