:root {
  --bg: #f5f7fb;
  --bg-panel: #ffffff;
  --text: #0a0a0a;
  --muted: #6b7280;
  --brand: #0A84FF;
  --good: #34C759;
  --bad: #FF3B30;
  --border: #e5e7eb;
  --ring: rgba(10,132,255,.35);
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#0b0c0f; --bg-panel:#111216; --text:#f0f3f5; --muted:#95a3b3; --border:#1f242b; }
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text)}
.app-header{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--border);backdrop-filter:blur(6px);position:sticky;top:0;background:color-mix(in oklab,var(--bg) 80%,transparent);z-index:5}
.brand{display:flex;align-items:center;gap:10px;font-weight:600}
.brand-logo{height:24px;width:auto;display:block} /* horizontal logo image */
a{color:var(--brand);text-decoration:none}a.muted{color:var(--muted)}

.panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:16px;padding:20px;box-shadow:0 8px 30px rgba(0,0,0,.04)}
.panel-title{margin:0 0 12px 0;font-size:20px}
.stack{display:grid;gap:14px}.grid2{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.input{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:transparent;color:var(--text);outline:none;transition:box-shadow .15s ease,border-color .15s ease}
.input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--ring)}
.hint{margin:6px 0 0 0;color:var(--muted);font-size:12px}
.actions{display:flex;gap:12px}
.btn{appearance:none;border:1px solid var(--border);background:var(--bg-panel);color:var(--text);padding:10px 16px;border-radius:12px;font-weight:600;cursor:pointer}
.btn.primary{background:var(--brand);color:#fff;border-color:color-mix(in oklab,var(--brand) 90%,black 5%)}
.btn.danger{background:var(--bad);color:#fff;border-color:transparent}
.btn:disabled{opacity:.5;cursor:not-allowed}

main.map-root{position:relative;height:calc(100vh - 56px)}
.map-wrap{position:relative;width:100%;height:100%;z-index:1}
.map{width:100%;height:100%;border:1px solid var(--border);border-radius:0;overflow:hidden;background:#eaeef5;position:static;z-index:auto}
.map-attrib{position:absolute;bottom:6px;right:10px;font-size:11px;color:var(--muted);background:color-mix(in oklab,var(--bg) 75%,transparent);padding:2px 6px;border-radius:6px}

/* Overlay card — larger and always on top of Leaflet layers */
.panel-overlay{position:absolute;top:24px;left:24px;max-width:520px;z-index:9999;pointer-events:auto}
@media (max-width:640px){.panel-overlay{left:12px;right:12px;max-width:none}}

/* Keep zoom controls below the panel */
.leaflet-left .leaflet-control { visibility: hidden; }

.status-card{margin-top:16px;border:1px solid var(--border);border-radius:14px;padding:14px;background:color-mix(in oklab,var(--bg-panel) 96%,transparent)}
.status-row{display:flex;align-items:center;gap:12px}
.status-headline{font-weight:600}.status-sub{font-size:13px}
.status-icon{width:28px;height:28px;border-radius:50%;flex-shrink:0;display:inline-block}
.status-icon.good{background:var(--good)}.status-icon.bad{background:var(--bad)}
.location-dot{width:14px;height:14px;border-radius:50%;background:var(--brand)}
.muted{color:var(--muted)}.divider{height:1px;background:var(--border);margin:12px 0}
.error{color:var(--bad)}

@media (max-width:980px){.map-wrap{height:calc(100vh - 56px)}}