html, body, #map { height: 100%; margin: 0; padding: 0; }

#controls {
  position: absolute; top: 10px; left: 10px; z-index: 1000;
  background: #fff; padding: 12px; border-radius: 10px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px; line-height: 1.35;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
  max-height: 92%; overflow: auto; width: 360px;
}
#controls.hidden { display:none; }

#toggle-panel, #fullscreen-btn{
  position:absolute; z-index:1001; background:#fff; padding:6px 10px;
  border-radius:8px; box-shadow:0 4px 16px rgba(0,0,0,.15);
  font-family:system-ui; cursor:pointer; user-select:none;
}
#toggle-panel{ top:10px; left:380px; }
#fullscreen-btn{ top:10px; right:10px; }

.row{ margin:6px 0; display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.row label{ display:flex; align-items:center; gap:8px; }
.swatch{ width:46px; height:26px; border:1px solid #aaa; border-radius:6px; }
.section{ margin:12px 0 8px; font-weight:700; }
.hint{ color:#666; font-size:13px; }

.map-label{
  position:absolute; background:#fff; padding:2px 4px; border-radius:3px;
  font-size:13px; box-shadow:0 1px 4px rgba(0,0,0,.1);
  white-space:nowrap; pointer-events:none; transform: translate(-50%, -120%);
}