:root {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: dark;
  --bg: #0b1220;
  --panel: #111a2b;
  --muted: #9fb0c7;
  --line: #26344a;
  --accent: #71c7ec;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; background: var(--bg); color: #eef5ff; }
body { display: flex; flex-direction: column; }
.topbar { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: #0e1728; }
.topbar h1 { margin: 0; font-size: 1.25rem; }
.topbar p { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }
input, select { font: inherit; }
.layout { min-height: 0; flex: 1; display: grid; grid-template-columns: 320px 1fr; }
.panel { overflow: auto; padding: 16px; background: var(--panel); border-right: 1px solid var(--line); }
.panel label { display: block; margin-bottom: 15px; font-size: .86rem; color: #d9e6f7; }
.panel input[type="search"], .panel select { width: 100%; margin-top: 6px; border: 1px solid #31445f; background: #0d1727; color: #fff; border-radius: 8px; padding: 9px 10px; }
.search-results { max-height: 320px; overflow: auto; margin: -2px 0 14px; border: 1px solid var(--line); border-radius: 9px; background: #0d1727; }
.search-results[hidden] { display: none; }
.search-results h2 { position: sticky; top: 0; z-index: 1; margin: 0; padding: 9px 10px; border-bottom: 1px solid var(--line); background: #101c30; font-size: .82rem; }
.search-results ol { margin: 0; padding: 0; list-style: none; }
.search-result { width: 100%; padding: 9px 10px; border: 0; border-bottom: 1px solid #1f2d42; background: transparent; color: #eef5ff; text-align: left; cursor: pointer; }
.search-result:hover, .search-result:focus-visible { background: #172741; outline: none; }
.search-result-name { display: block; font-size: .82rem; font-weight: 650; }
.search-result-meta { display: block; margin-top: 2px; color: var(--muted); font-size: .7rem; line-height: 1.3; }
.search-results-note { margin: 0; padding: 9px 10px; color: var(--muted); font-size: .72rem; }
.map-status { min-height: 2.8em; margin: -2px 0 12px; color: var(--accent); font-size: .78rem; line-height: 1.4; }
.legend { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 12px 0; margin-bottom: 12px; color: var(--muted); font-size: .86rem; }
.legend h2 { margin: 0 0 8px; color: #fff; font-size: .95rem; }
.data-note { margin: 0 0 12px; color: var(--muted); font-size: .75rem; line-height: 1.45; }
.data-note a { color: var(--accent); }
.dot { width: 11px; height: 11px; display: inline-block; border-radius: 50%; margin-right: 7px; }
.shallow { background: #48c774; } .recreational { background: #3e8ed0; } .deep { background: #ffb347; } .technical { background: #ff5c5c; } .shore { background: #c7c7c7; }
#map { width: 100%; height: 100%; min-height: 420px; }
.popup h3 { margin: 0 0 6px; font-size: 1rem; }
.popup p { margin: 3px 0; }
.popup code { font-size: .78rem; }
@media (max-width: 780px) {
  .topbar { align-items: flex-start; }
  .layout { grid-template-columns: 1fr; grid-template-rows: auto minmax(60vh, 1fr); }
  .panel { max-height: 36vh; border-right: none; border-bottom: 1px solid var(--line); }
}

/* Leaflet tiles must not inherit responsive image constraints. */
.leaflet-container { overflow: hidden; background: #d8e1e8; }
.leaflet-container img.leaflet-tile,
.leaflet-container .leaflet-tile-pane img {
  max-width: none !important;
  max-height: none !important;
}
.leaflet-tile { visibility: inherit; }
.leaflet-control-layers { font-size: 13px; }