:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body, #app, #map { width: 100%; height: 100%; margin: 0; }
html, body { overflow: hidden; overscroll-behavior: none; }
body { background: #e9ecef; }
#app { position: fixed; inset: 0; }
#map { position: absolute; inset: 0; }

#map-status,
#map-error {
  position: absolute;
  z-index: 10;
  left: 50%;
  top: max(14px, env(safe-area-inset-top));
  transform: translateX(-50%);
  max-width: min(92vw, 560px);
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  color: #27313a;
  font-size: 13px;
  line-height: 1.2;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: none;
}

#map-status.ready { opacity: 0; transition: opacity .35s ease .45s; }
#map-error { border-radius: 12px; color: #7f1d1d; background: rgba(254,242,242,.96); }
.maplibregl-ctrl-top-right { top: max(8px, env(safe-area-inset-top)); right: max(8px, env(safe-area-inset-right)); }
.maplibregl-ctrl-bottom-right { right: max(8px, env(safe-area-inset-right)); bottom: max(8px, env(safe-area-inset-bottom)); }
.maplibregl-ctrl-bottom-left { left: max(8px, env(safe-area-inset-left)); bottom: max(8px, env(safe-area-inset-bottom)); }

@media (max-width: 720px) {
  #map-status, #map-error { font-size: 12px; }
  .maplibregl-ctrl-group button { width: 36px; height: 36px; }
}