:root{
  --bg:#0b0d10; --fg:#e9eef5; --muted:#9aa4b2; --card:#12161b; --border:#1f2937;
  --brand:#5b9cff; --ok:#22c55e; --warn:#f59e0b; --err:#ef4444;
  --police:#2563eb; --ambulance:#eab308; --fire:#dc2626; --other:#6b7280;
}
:root.light{
  --bg:#f6f8fb; --fg:#0b1220; --muted:#4b5563; --card:#ffffff; --border:#e5e7eb;
  --brand:#2563eb; --ok:#16a34a; --warn:#d97706; --err:#dc2626;
}
html,body{height:100%} body{margin:0;background:var(--bg);color:var(--fg);font:14px/1.45 system-ui,Segoe UI,Roboto,Arial}
a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
a.btn,.nav-item{color:inherit;text-decoration:none}
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  border-color:var(--brand);
}

.sidebar{position:fixed;inset:0 auto 0 0;width:240px;background:var(--card);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:10;transform:translateX(0);transition:transform .2s}
.sidebar .logo{font-weight:700;padding:16px}
.nav{display:flex;flex-direction:column;gap:4px;padding:0 8px}
.nav-item{padding:10px 12px;border-radius:8px;color:var(--fg)}
.nav-item:hover{background:var(--border)}
.nav-item.active{background:var(--brand);color:#fff}
.nav-toggle{margin:8px;border:1px solid var(--border);background:transparent;color:var(--fg);border-radius:8px;padding:6px 10px}
.sidebar:not(.open){transform:translateX(-100%)}

.main{margin-left:240px;padding:16px;min-height:100vh}
@media (max-width:900px){.main{margin-left:0}.sidebar{transform:translateX(-100%)}.sidebar.open{transform:translateX(0)}}

.topbar{display:flex;gap:10px;align-items:center;margin-bottom:12px}
.topbar input[type=search]{flex:1;min-width:160px;border:1px solid var(--border);background:var(--card);color:var(--fg);padding:10px;border-radius:10px}
.spacer{flex:1}

.btn{border:1px solid var(--border);background:var(--card);color:var(--fg);padding:8px 12px;border-radius:999px;cursor:pointer;min-height:44px;min-width:44px}
.btn:hover{border-color:var(--brand)}
.btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.btn.ghost{background:transparent}
.btn-on{background:var(--brand);border-color:var(--brand);color:#fff}

.quick{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.region-wrap{margin:8px 0 4px}
.section-title{margin:0 0 6px 0;font-size:13px;color:var(--muted)}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chips-mini{display:flex;gap:6px;flex-wrap:wrap;color:var(--muted);font-size:12px}

.filter-summary{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0}
.pill{background:var(--card);border:1px solid var(--border);padding:4px 8px;border-radius:999px;display:inline-flex;gap:8px;align-items:center}
.pill-x{border:0;background:transparent;color:var(--muted);cursor:pointer}

.overlay{position:fixed;inset:0;background:#0009;opacity:0;pointer-events:none;transition:.2s}
.panel{position:fixed;top:0;right:-380px;height:100%;width:360px;background:var(--card);border-left:1px solid var(--border);display:flex;flex-direction:column;transition:right .2s}
.overlay.open{opacity:1;pointer-events:auto}
.panel.open{right:0}
.panel-head,.panel-foot{display:flex;gap:8px;align-items:center;padding:12px;border-bottom:1px solid var(--border)}
.panel-foot{border-top:1px solid var(--border);border-bottom:0;margin-top:auto}
.panel-body{padding:12px;display:flex;flex-direction:column;gap:12px}
.fld{display:flex;flex-direction:column;gap:6px}
.fld input{border:1px solid var(--border);background:var(--bg);color:var(--fg);padding:8px;border-radius:8px;min-height:44px}

.feed{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.card-item{display:flex;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--card)}
.leftbar{width:6px}
.leftbar.fire{background:var(--fire)}
.leftbar.ambulance{background:var(--ambulance)}
.leftbar.police{background:var(--police)}
.leftbar.other{background:var(--other)}
.card-body{padding:10px 12px;flex:1}
.title{font-weight:600;margin-bottom:4px}
.meta{color:var(--muted);display:flex;align-items:center;gap:6px;font-size:12px}
.dot::before{content:"•"}
.caps{margin-top:8px;display:flex;flex-direction:column;gap:4px}
.caprow{display:flex;gap:6px;align-items:center}
.badge.prio{border:1px solid var(--border);padding:2px 6px;border-radius:999px;font-size:12px}
code{background:transparent;border:1px dashed var(--border);padding:1px 6px;border-radius:8px;color:var(--muted)}



body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial}
body.auth{
  background:
    radial-gradient(900px 500px at 10% -10%, #223047 0%, transparent 60%),
    radial-gradient(700px 400px at 90% 0%, #18202b 0%, transparent 55%),
    var(--bg);
  min-height: 100dvh;
}
.auth-wrap{
  width: min(920px, 100%);
  box-sizing: border-box;
  max-width:920px;
  margin:0 auto;
  min-height:100dvh;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:28px;
  padding:
    max(28px, calc(env(safe-area-inset-top) + 16px))
    16px
    max(24px, calc(env(safe-area-inset-bottom) + 16px));
  align-items:center;
}
.auth-hero h1{margin:6px 0 8px 0;font-size:36px;line-height:1.1}
.auth-hero p{color:var(--muted);font-size:15px}
.brand{font-weight:700;letter-spacing:.4px;color:var(--brand)}
.auth-card{
  width: 100%;
  box-sizing: border-box;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px;
  display:flex;
  flex-direction:column;
  gap:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.auth-card label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:13px;
  color:var(--muted);
  width:100%;
  min-width:0;
}
.auth-card input{
  width:100%;
  box-sizing:border-box;
  border:1px solid var(--border);
  background:#0f141a;
  color:var(--fg);
  padding:10px 12px;
  min-height:44px;
  border-radius:10px;
}
.btn.full{width:100%}
.grid-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.subtle{color:var(--muted);font-size:13px}
.req-mark{ color: var(--warn); font-weight:700 }
.pass-rules{
  margin: -4px 0 4px;
  padding-left: 18px;
  color: var(--muted);
  font-size: 12px;
}
.pass-rules li{ margin: 2px 0 }
.pass-rules li.ok{
  color: var(--ok);
}

/* sw update banner */
.sw-update{
  position:fixed; right:16px; bottom:16px;
  background:var(--card); border:1px solid var(--border); color:var(--fg);
  padding:10px 12px; border-radius:10px; z-index:9999;
  display:flex; align-items:center; gap:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}

/* consent banner */
.consent-banner{
  position:fixed; left:16px; right:16px; bottom:16px;
  background:var(--card); border:1px solid var(--border); color:var(--fg);
  border-radius:12px; padding:14px; z-index:9999; box-shadow:0 10px 30px rgba(0,0,0,.25);
  display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap;
}
.consent-banner a{ color:var(--brand); text-decoration:none }
.consent-text{ font-size:14px; color:var(--fg); flex:1 1 320px }
.consent-actions{ display:flex; gap:8px; flex-wrap:wrap }
.consent-modal{ position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:center; justify-content:center; z-index:10000 }
.consent-modal.show{ display:flex }
.consent-modal-card{
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  padding:16px; width:min(520px, 92vw); color:var(--fg); box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.consent-row{ display:flex; align-items:center; gap:10px; margin:10px 0; font-size:14px }
@media (max-width:900px){
  .auth-wrap{
    grid-template-columns:1fr;
    gap:16px;
    align-items:start;
  }
  .auth-hero h1{font-size:30px}
}
@media (max-width:640px){
  .auth-wrap{
    padding:
      max(18px, calc(env(safe-area-inset-top) + 10px))
      12px
      max(14px, calc(env(safe-area-inset-bottom) + 10px));
  }
  .grid-2{grid-template-columns:1fr}
  .auth-card{padding:14px}
  .auth-hero p{font-size:14px}
}