:root { color-scheme: dark; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: #121713; color: #f7f3e9; }
#map { position: fixed; inset: 0; }
.panel { position: fixed; z-index: 2; top: 16px; left: 16px; width: min(350px, calc(100vw - 32px)); padding: 18px; border-radius: 14px; background: rgba(19, 27, 20, .92); box-shadow: 0 10px 30px rgba(0,0,0,.35); backdrop-filter: blur(8px); }
h1 { margin: 0 0 5px; font-size: 1.1rem; }
p { margin: 0; color: #d5dfd0; font-size: .9rem; line-height: 1.45; }
#panel-content { margin-top: 12px; }
.controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
button { appearance: none; border: 1px solid #65745f; border-radius: 8px; padding: 8px 10px; color: #f7f3e9; background: #293327; font: inherit; font-size: .85rem; cursor: pointer; }
button:hover, button[aria-pressed="true"] { background: #4e713b; }
.maplibregl-ctrl-attrib { font-size: 10px; }
.maplibregl-popup-content { color: #172018; font: 14px/1.45 system-ui, sans-serif; }
.maplibregl-popup-content img { display: block; width: 100%; max-height: 180px; margin: 8px 0; object-fit: cover; }
@media (max-width: 560px) { .panel { top: 8px; left: 8px; width: calc(100vw - 16px); padding: 14px; } }