:root{
  --bg:#0b1020;
  --fg:#e8eef7;
  --muted:#8aa1c1;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif}
header{display:flex;align-items:center;gap:1rem;padding:.8rem 1rem;border-bottom:1px solid #223}
h1{font-size:1.1rem;margin:0;color:var(--fg)}
.controls{margin-left:auto;display:flex;align-items:center;gap:.8rem;color:var(--muted)}
label{font-size:.9rem}
select{background:#162036;color:var(--fg);border:1px solid #2a3b63;border-radius:.5rem;padding:.35rem .6rem}
#map{height:calc(100% - 56px)}

/* Leaflet popups dark theme */
.leaflet-popup-content-wrapper, .leaflet-popup-tip{
  background:#0f1730;color:var(--fg);border:1px solid #2a3b63
}
.leaflet-control-zoom a{background:#162036;color:var(--fg);border:1px solid #2a3b63}
/* Cluster colors */
.marker-cluster-small{background:rgba(74,144,226,.2)}
.marker-cluster-small div{background:rgba(74,144,226,.7)}
.marker-cluster-medium{background:rgba(245,166,35,.2)}
.marker-cluster-medium div{background:rgba(245,166,35,.7)}
.marker-cluster-large{background:rgba(67,217,124,.2)}
.marker-cluster-large div{background:rgba(67,217,124,.7)}
.legend{position:absolute;bottom:12px;right:12px;background:#0f1730;border:1px solid #2a3b63;border-radius:.75rem;padding:.5rem .75rem;font-size:.85rem}
.legend .row{display:flex;align-items:center;gap:.5rem;margin:.2rem 0}
.badge{display:inline-block;width:10px;height:10px;border-radius:50%}
.badge.completed{background:#43d97c}
.badge.ongoing{background:#f5a623}
.badge.other{background:#8aa1c1}
a{color:#8ab4ff}