*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; font-family: 'Manrope', system-ui, -apple-system, sans-serif; background: #07111f; }

/* ── Layout ──────────────────────────── */
#app { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }

/* ── Header ──────────────────────────── */
#header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: calc(1rem + env(safe-area-inset-top)) 1.1rem 1rem;
  background: #07111f;
  flex-shrink: 0;
  z-index: 10;
  position: relative;
}
#header-logo { height: 1.4rem; flex-shrink: 0; }
#header-divider { width: 1px; height: 1.2rem; background: rgba(255,255,255,.2); flex-shrink: 0; }
#header-company {
  flex: 1;
  font-size: .82rem;
  font-weight: 800;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Language picker ─────────────────── */
#lang-picker {
  display: flex;
  gap: .35rem;
  align-items: center;
  flex-shrink: 0;
}
#lang-select {
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.85);
  font-family: inherit;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .25rem .65rem .25rem .45rem;
  border-radius: .45rem;
  cursor: pointer;
  outline: none;
  transition: background .15s, border-color .15s;
}
#lang-select:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.35); }
#lang-select option { background: #07111f; color: #fff; font-weight: 700; }

/* ── Map ─────────────────────────────── */
#map-wrap { flex: 1; position: relative; }
#map { width: 100%; height: 100%; }

/* ── Locate button ───────────────────── */
#locate-btn {
  position: absolute;
  bottom: 1.5rem;
  left: .85rem;
  z-index: 1000;
  width: 2.5rem;
  height: 2.5rem;
  background: #fff;
  border: none;
  border-radius: .6rem;
  box-shadow: 0 2px 10px rgba(15,23,42,.16);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #334155;
  transition: background .15s, color .15s;
}
#locate-btn:hover { background: #f8fafc; color: #c1272d; }
#locate-btn .material-symbols-rounded { font-size: 1.25rem; font-variation-settings: 'FILL' 1; }
#locate-btn.is-active { color: #c1272d; background: #fff7f7; }

/* ── Footer ──────────────────────────── */
#map-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .55rem 1rem calc(.55rem + env(safe-area-inset-bottom));
  background: #07111f;
  flex-shrink: 0;
}
#map-footer span {
  font-size: .65rem;
  font-weight: 600;
  color: rgba(255,255,255,.45);
  letter-spacing: .03em;
}
#map-footer a {
  color: rgba(255,255,255,.7);
  text-decoration: none;
  font-weight: 700;
}
#map-footer a:hover { color: #fff; }

/* ── Zone count badge ────────────────── */
#zone-badge {
  position: absolute;
  bottom: .85rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  background: rgba(15,23,42,.75);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  padding: .35rem .85rem;
  border-radius: 2rem;
  white-space: nowrap;
  pointer-events: none;
}

/* ── Loading / Error screens ─────────── */
#loading-screen, #error-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  background: #07111f;
  text-align: center;
  padding: 2rem;
}
#loading-screen img, #error-screen img { height: 1.8rem; filter: brightness(0) invert(1); }
.loading-spinner {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid rgba(255,255,255,.15);
  border-top-color: #c1272d;
  border-radius: 50%;
  animation: spin .75s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
#error-screen p { color: rgba(255,255,255,.7); font-size: .9rem; font-weight: 600; margin: 0; }

/* ── Zone popup ──────────────────────── */
.zone-popup .leaflet-popup-content-wrapper {
  border-radius: .75rem;
  box-shadow: 0 8px 30px rgba(15,23,42,.18);
  border: 1px solid #e2e8f0;
  padding: 0;
  overflow: hidden;
  min-width: 13rem;
  max-width: 18rem;
}
.zone-popup .leaflet-popup-content { margin: 0; }
.zone-popup .leaflet-popup-tip-container { display: none; }
.zone-popup-inner { padding: .9rem 1rem .85rem; }
.zone-popup-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .55rem;
}
.zone-popup-badge {
  padding: .18rem .55rem;
  border-radius: 2rem;
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  flex-shrink: 0;
}
.zone-popup-badge.is-nogo    { background: #fee2e2; color: #dc2626; }
.zone-popup-badge.is-allowed { background: #dcfce7; color: #16a34a; }
.zone-popup-badge.is-speed   { background: #ffedd5; color: #ea580c; }
.zone-popup-name {
  font-size: .88rem;
  font-weight: 900;
  color: #0f172a;
  line-height: 1.2;
}
.zone-popup-desc {
  font-size: .78rem;
  color: #64748b;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
}
.zone-popup-nogo-warn {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .7rem;
  background: #fef2f2;
  border-top: 1px solid #fecaca;
  font-size: .75rem;
  font-weight: 700;
  color: #dc2626;
}
.zone-popup-nogo-warn .material-symbols-rounded { font-size: .95rem; font-variation-settings: 'FILL' 1; }

/* ── No-go zone stripe pattern ───────── */
.nogo-stripe-pattern {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(220,38,38,.18) 0px,
    rgba(220,38,38,.18) 4px,
    transparent 4px,
    transparent 10px
  );
}