:root {
  --orange: #ff7a1a;
  --orange-dim: #c85a0c;
  --bg: #161412;
  --panel: rgba(28, 25, 23, .94);
  --line: #3a342f;
  --text: #ece7e2;
  --muted: #9a918a;
}
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 14px/1.4 system-ui, sans-serif; }
#map { position: absolute; inset: 0; }
#panel {
  position: absolute; top: 12px; left: 12px; width: 300px; max-height: calc(100% - 24px); overflow: auto;
  background: var(--panel); padding: 12px 14px 10px; border-radius: 6px;
  border: 1px solid var(--line); border-top: 3px solid var(--orange); box-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.brand { color: var(--orange); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
#panel h1 { font-size: 17px; margin: 2px 0 0; }
.sub, .note { color: var(--muted); font-size: 12px; margin: 4px 0 10px; }
label { display: block; margin: 8px 0; font-weight: 600; font-size: 12px; color: var(--muted); }
label.check { font-weight: 400; font-size: 13px; margin: 4px 0; color: var(--text); }
input[type=checkbox] { accent-color: var(--orange); }
select {
  width: 100%; margin-top: 3px; padding: 4px; background: #231f1c; color: var(--text);
  border: 1px solid var(--line); border-radius: 3px;
}
select:focus { outline: 1px solid var(--orange); }
#summary { margin: 10px 0 6px; font-size: 13px; }
#summary b { color: var(--orange); }
.legend { font-size: 12px; margin-bottom: 8px; }
.legend span { display: inline-block; width: 22px; height: 12px; vertical-align: middle; margin-right: 4px; }
.desc { color: var(--muted); font-size: 11.5px; margin: 2px 0 8px; }
.legend .lt.sm { font-weight: 400; font-size: 11px; margin-top: 3px; }
.legend .lt { color: var(--muted); font-weight: 600; margin: 6px 0 3px; }
.legend span.none { background: none; border: 1px solid var(--line); box-sizing: border-box; }
.legend .dot { width: 10px; height: 10px; border-radius: 50%; margin: 0 7px 0 6px; }
.maplibregl-popup-content { background: #231f1c; color: var(--text); font-size: 13px; border: 1px solid var(--line); border-top: 2px solid var(--orange); }
.maplibregl-popup-close-button { color: var(--muted); }
.maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: #231f1c; }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: #231f1c; }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: #231f1c; }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: #231f1c; }
.maplibregl-ctrl-group { background: #231f1c; }
.maplibregl-ctrl-group button + button { border-top-color: var(--line); }
.maplibregl-ctrl-group .maplibregl-ctrl-icon { filter: invert(.9); }
@media (max-width: 600px) {
  #panel { width: auto; right: 12px; max-height: 40%; }
}