:root { color-scheme: dark; font-family: Inter, ui-sans-serif, system-ui, -apple-system, sans-serif; }
* { box-sizing: border-box; }
html, body, main, #map { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; background: #081a27; color: #f7fbff; }
.topbar { position: fixed; z-index: 3; top: max(12px, env(safe-area-inset-top)); left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: end; gap: 12px; padding: 13px 14px; border: 1px solid rgba(158,213,227,.26); border-radius: 16px; background: rgba(7,26,39,.9); backdrop-filter: blur(14px); box-shadow: 0 12px 32px rgba(0,0,0,.26); }
.eyebrow { display: block; color: #78d6c4; font-size: 9px; letter-spacing: .13em; }
h1 { margin: 4px 0 0; font-size: 18px; line-height: 1.1; }
label { color: #b9ccd4; font-size: 11px; }
select { display: block; margin-top: 3px; max-width: 132px; border: 1px solid #365766; border-radius: 9px; padding: 7px 9px; background: #102c3b; color: #fff; }
.details { position: fixed; z-index: 3; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); min-height: 64px; padding: 13px 15px; border: 1px solid rgba(158,213,227,.26); border-radius: 16px; background: rgba(7,26,39,.92); backdrop-filter: blur(14px); }
.details dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin: 0; font-size: 13px; }
.details dt { color: #86aab8; }.details dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.hint { margin: 8px 0; color: #9ab2bd; text-align: center; font-size: 13px; }
.status { position: fixed; z-index: 4; top: 100px; left: 50%; transform: translateX(-50%); padding: 7px 11px; border-radius: 20px; background: rgba(3,16,25,.82); color: #bcd6df; font-size: 11px; white-space: nowrap; }
.maplibregl-ctrl-bottom-right { bottom: 92px; }
@media (min-width: 720px) { .topbar { left: 20px; right: auto; width: 430px; }.details { left: 20px; right: auto; width: 360px; }.status { top: 20px; } }