html, body { margin: 0; padding: 0; height: 100%; }
#map { width: 100%; height: 100%; }
.controls { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.8); padding: 10px; z-index: 1000; font-family: sans-serif; }
#legend { position: absolute; bottom: 10px; left: 10px; background: rgba(255,255,255,0.8); padding: 5px; z-index: 1000; display: flex; gap: 5px; font-family: sans-serif; }
.legend-chip { width: 20px; height: 20px; border: 1px solid #ccc; cursor: pointer; }
#probe { position: absolute; display: none; background: rgba(50,50,50,.85); color: #fff; font-size: 11px; font-weight: bold; line-height: 14px; padding: 4px; pointer-events: none; z-index: 1001; }