html, body { height: 100%; margin: 0; font-family: system-ui, Arial, sans-serif; }
#map { position: absolute; top: 0; right: 0; bottom: 0; left: 300px; }
#sidebar { position: absolute; top: 0; left: 0; bottom: 0; width: 300px; overflow: auto; padding: 12px; background: #f7f7f7; border-right: 1px solid #ddd; }
#filters { display: flex; gap: 6px; flex-direction: column; margin-bottom: 10px; }
.marker-circle { border-radius: 50%; opacity: 0.85; border: 2px solid rgba(0,0,0,0.25); }
.legend-item { display:flex; align-items:center; gap:8px; margin:4px 0; }
.legend-color { width:14px; height:14px; border-radius:50%; border:1px solid #999; }