html,body {height:100%; margin:0; font-family:system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}
header {padding:8px 12px; display:flex; flex-wrap:wrap; gap:12px; align-items:center; border-bottom:1px solid #eee; background:#fff;}
h1 {font-size:18px; margin:0;}
#controls {display:flex; align-items:center; gap:8px;}
#controls input[type=range]{width:260px;}
.toggle-cumulative{display:flex; align-items:center; gap:6px; font-size:13px; color:#444; margin-left:8px;}
#map {height: calc(100vh - 120px);}
#legends {margin-left:auto; display:flex; gap:16px; align-items:center;}
.legend {display:flex; flex-direction:column; gap:6px; font-size:14px}
.legend .ramp {display:flex; gap:2px}
.legend .ramp i {width:18px; height:12px; display:inline-block}
.legend-labels {display:flex; justify-content:space-between; gap:24px; font-size:12px; color:#555}
aside#panel {position:fixed; right:12px; top:120px; width:320px; max-height:70vh; overflow:auto; background:#fff; border:1px solid #ddd; border-radius:8px; box-shadow:0 6px 24px rgba(0,0,0,.1); padding:12px;}
#panel[hidden]{display:none}
#panelClose{float:right; border:0; background:transparent; font-size:20px; cursor:pointer}
.leaflet-tooltip{font-size:12px;}