:root { --sidebar-w: 420px; }
html, body { height: 100%; margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
#map { position: absolute; top: 0; right: 0; bottom: 0; left: var(--sidebar-w); }
#sidebar { position: absolute; left: 0; top: 0; bottom: 0; width: var(--sidebar-w); color: #111827; padding: 20px; overflow: auto; border-right: 1px solid #e5e7eb; background: #ffffff; }
#sidebar h1 { margin: 0 0 14px 0; font-size: 18px; font-weight: 700; letter-spacing: 0.2px; color: #111827; }
.control { margin: 18px 0; }
.control label { display: block; font-size: 11px; opacity: 0.95; margin-bottom: 8px; color: #4214b7; text-transform: uppercase; letter-spacing: .08em; }
select { width: 100%; padding: 12px 14px; background: #ffffff; color: #111827; border: 1px solid #d1d5db; border-radius: 10px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
select:hover { border-color: #4214b7; }
select:focus { border-color: #4214b7; box-shadow: 0 0 0 3px rgba(66,20,183,0.18); }
.checkbox { display: flex; align-items: center; gap: 10px; font-size: 14px; margin: 8px 0; color: #111827; }
.checkbox input[type="checkbox"] { width: 16px; height: 16px; accent-color: #4214b7; }
#legend { background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; margin-top: 14px; color: #111827; }
#legend h4 { margin: 0 0 8px 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: #4214b7; }
.scale { display: flex; gap: 2px; height: 12px; }
.scale span { flex: 1; border-radius: 2px; }
#info { margin-top: 14px; background: #ffffff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 14px; color: #111827; }
#selection { font-size: 13px; line-height: 1.6; color: #111827; }
.mapboxgl-popup { max-width: 300px !important; }
.mapboxgl-popup-content { font: 12px/1.45 sans-serif; padding: 10px 12px; }

@media (max-width: 960px) {
  :root { --sidebar-w: 320px; }
}