:root {
  --bg: #0d1117;
  --panel: #161b22;
  --panel-2: #1c2230;
  --border: #2d333b;
  --text: #e6edf3;
  --muted: #8b949e;
  --accent: #1f6feb;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
#map { position: absolute; inset: 0; background: var(--bg); }

/* ---------------- Panel ---------------- */
#panel {
  position: absolute;
  top: 12px; left: 12px; bottom: 12px;
  width: 320px;
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 30px rgba(0,0,0,.45);
  overflow: hidden;
  z-index: 5;
}
#panel.hidden { display: none; }

#panel-head { padding: 16px 16px 10px; border-bottom: 1px solid var(--border); }
#panel-head h1 { margin: 0; font-size: 18px; font-weight: 700; }
#panel-head h1 span { color: var(--accent); }
#panel-head .sub { margin: 4px 0 0; font-size: 12px; color: var(--muted); }

.control { padding: 10px 16px 0; }
.control label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 5px; }
#region {
  width: 100%; padding: 8px 10px; border-radius: 8px;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  font-size: 14px;
}
.basemap-toggle { display: flex; gap: 6px; }
.basemap-toggle button {
  flex: 1; padding: 6px; font-size: 12px; cursor: pointer;
  background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--border); border-radius: 7px;
}
.basemap-toggle button.active { color: #fff; border-color: var(--accent); background: #18233a; }

#layers { flex: 1; overflow-y: auto; padding: 12px 10px; }
.group { margin-bottom: 6px; }
.group-title {
  font-size: 12px; font-weight: 600; color: var(--text);
  padding: 8px 8px 6px; display: flex; align-items: center; gap: 6px;
  cursor: pointer; user-select: none;
}
.group-title .caret { color: var(--muted); transition: transform .15s; font-size: 10px; }
.group.collapsed .caret { transform: rotate(-90deg); }
.group.collapsed .group-body { display: none; }

.layer-row {
  display: flex; align-items: flex-start; gap: 8px;
  padding: 6px 8px; border-radius: 7px; font-size: 13px;
}
.layer-row:hover { background: var(--panel-2); }
.layer-row input { margin-top: 2px; cursor: pointer; }
.layer-row .lbl { flex: 1; cursor: pointer; }
.layer-row .swatch { width: 12px; height: 12px; border-radius: 3px; margin-top: 2px; flex: none; }
.layer-row .note { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.layer-row.disabled { opacity: .45; }

#panel-foot { padding: 10px 16px; border-top: 1px solid var(--border); }
#panel-foot #collapse {
  width: 100%; padding: 7px; font-size: 12px; cursor: pointer;
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 7px;
}
#panel-foot .credit { margin: 8px 0 0; font-size: 10px; color: var(--muted); text-align: center; }

#show-panel {
  position: absolute; top: 12px; left: 12px; z-index: 6;
  padding: 10px 14px; cursor: pointer;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px; font-size: 14px;
}

/* ---------------- Legend ---------------- */
#legend {
  position: absolute; bottom: 22px; right: 12px; z-index: 5;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; max-width: 240px; font-size: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
}
#legend h4 { margin: 0 0 8px; font-size: 12px; }
#legend .row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
#legend .box { width: 14px; height: 14px; border-radius: 3px; flex: none; }
#legend .ramp { height: 10px; border-radius: 3px; margin: 4px 0; }

/* ---------------- Popups / info ---------------- */
.maplibregl-popup-content {
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; font-size: 13px;
}
.maplibregl-popup-content b { color: var(--accent); }
.maplibregl-popup-tip { border-top-color: var(--panel) !important; border-bottom-color: var(--panel) !important; }

#info-box {
  position: absolute; bottom: 22px; left: 344px; z-index: 5;
  background: var(--panel); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  padding: 12px 14px; max-width: 320px; font-size: 12px;
}

@media (max-width: 640px) {
  #panel { width: auto; left: 8px; right: 8px; top: 8px; bottom: auto; max-height: 70vh; }
  #info-box { left: 8px; right: 8px; max-width: none; }
}