:root{
  --bg:#0a0e14; --panel:#111721; --panel-2:#161d29; --line:#222c3b;
  --ink:#e6edf3; --ink-2:#9fb0c3; --ink-3:#657288;
  --accent:#2dd4bf; --accent-2:#0ea5e9;
  --p1:#ef4444; --p2:#f97316; --p3:#eab308; --p4:#38bdf8;
  --ok:#22c55e; --warn:#f59e0b; --crit:#ef4444;
  --pnp:#2563eb; --bfp:#dc2626; --ems:#16a34a; --drrmo:#f59e0b;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.muted{color:var(--ink-3)}

/* layout shell */
.shell{display:grid;grid-template-columns:230px 1fr;min-height:100vh}
.side{background:#0c1119;border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh}
.brand{padding:18px 18px 14px;border-bottom:1px solid var(--line)}
.brand .logo{font-weight:800;letter-spacing:.06em;font-size:15px}
.brand .logo b{color:var(--accent)}
.brand .sub{font-size:10.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.13em;margin-top:3px}
.nav{display:flex;flex-direction:column;padding:10px 8px;gap:2px;flex:1;overflow:auto}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:8px;color:var(--ink-2);font-weight:500}
.nav a:hover{background:var(--panel-2);color:var(--ink)}
.nav a.active{background:linear-gradient(90deg,rgba(45,212,191,.14),transparent);color:var(--ink);box-shadow:inset 2px 0 0 var(--accent)}
.nav .ico{width:18px;text-align:center;opacity:.9}
.side .who{padding:12px 16px;border-top:1px solid var(--line);font-size:12px;color:var(--ink-3)}
.side .who b{color:var(--ink-2);font-weight:600}
.main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 22px;border-bottom:1px solid var(--line);background:rgba(10,14,20,.7);backdrop-filter:blur(6px);position:sticky;top:0;z-index:5}
.topbar h1{font-size:17px}
.topbar .clock{font-family:var(--mono);color:var(--ink-2);font-size:13px}
.content{padding:22px;flex:1}

/* pills / badges */
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:650;font-family:var(--mono);letter-spacing:.02em;border:1px solid transparent;white-space:nowrap}
.pri-P1{background:rgba(239,68,68,.16);color:#fca5a5;border-color:rgba(239,68,68,.4)}
.pri-P2{background:rgba(249,115,22,.16);color:#fdba74;border-color:rgba(249,115,22,.4)}
.pri-P3{background:rgba(234,179,8,.15);color:#fde047;border-color:rgba(234,179,8,.4)}
.pri-P4{background:rgba(56,189,248,.15);color:#7dd3fc;border-color:rgba(56,189,248,.4)}
.st{padding:2px 9px;border-radius:999px;font-size:11px;font-weight:650;font-family:var(--mono);text-transform:uppercase;letter-spacing:.04em}
.st-pending{background:rgba(148,163,184,.18);color:#cbd5e1}
.st-dispatched{background:rgba(14,165,233,.18);color:#7dd3fc}
.st-active{background:rgba(239,68,68,.16);color:#fca5a5}
.st-resolved{background:rgba(34,197,94,.16);color:#86efac}
.st-closed{background:rgba(100,116,139,.16);color:#94a3b8}
.st-available{background:rgba(34,197,94,.15);color:#86efac}
.st-enroute{background:rgba(14,165,233,.16);color:#7dd3fc}
.st-onscene{background:rgba(245,158,11,.16);color:#fcd34d}
.st-outofservice{background:rgba(100,116,139,.16);color:#94a3b8}
.agtag{display:inline-block;padding:1px 7px;border-radius:6px;font-size:10.5px;font-weight:700;font-family:var(--mono);color:#fff}

/* cards / grid */
.grid{display:grid;gap:16px}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px}
.panel .ph{padding:12px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.panel .ph h2{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3)}
.panel .pb{padding:14px 16px}

/* tables */
table{width:100%;border-collapse:collapse}
th{font-size:10.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);font-weight:600}
td{padding:11px 12px;border-bottom:1px solid var(--panel-2);vertical-align:middle}
tr:hover td{background:var(--panel-2)}
tr:last-child td{border-bottom:none}

/* buttons / forms */
.btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:9px;border:1px solid var(--line);background:var(--panel-2);color:var(--ink);font-weight:600;font-size:13px;cursor:pointer;font-family:inherit}
.btn:hover{border-color:var(--accent);color:#fff}
.btn-primary{background:linear-gradient(180deg,#2dd4bf,#14b8a6);color:#04201c;border:none}
.btn-primary:hover{color:#04201c;filter:brightness(1.06)}
.btn-danger{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.4);color:#fca5a5}
.btn-sm{padding:5px 10px;font-size:12px}
input,select,textarea{width:100%;padding:9px 11px;background:#0c1119;border:1px solid var(--line);border-radius:8px;color:var(--ink);font-family:inherit;font-size:13px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent)}
label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);margin:0 0 5px}
.field{margin-bottom:13px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* COP dashboard */
.cop{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(0,auto);gap:14px;padding:18px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;position:relative;overflow:hidden}
.kpi .v{font-family:var(--mono);font-size:40px;font-weight:700;line-height:1;letter-spacing:-.02em}
.kpi .l{font-size:11px;text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);margin-top:8px}
.kpi.alert{border-color:rgba(239,68,68,.5)} .kpi.alert .v{color:#fca5a5}
.kpi .spark{position:absolute;right:-6px;top:-6px;font-size:52px;opacity:.06}
.cop .span2{grid-column:span 2} .cop .span4{grid-column:span 4} .cop .span3{grid-column:span 3}
#copmap{height:380px;border-radius:10px;overflow:hidden;border:1px solid var(--line)}
.feedlist{max-height:380px;overflow:auto;display:flex;flex-direction:column}
.feeditem{padding:9px 14px;border-bottom:1px solid var(--panel-2);font-size:12.5px;display:flex;gap:9px}
.feeditem .t{font-family:var(--mono);color:var(--ink-3);white-space:nowrap;font-size:11px}
.incrow{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--panel-2)}
.incrow:hover{background:var(--panel-2)}
.incrow .ti{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.statusbar{display:flex;gap:8px;flex-wrap:wrap}
.statusbar .chip{display:flex;align-items:baseline;gap:6px;padding:6px 11px;border:1px solid var(--line);border-radius:9px;background:var(--panel-2)}
.statusbar .chip b{font-family:var(--mono);font-size:17px}
.statusbar .chip span{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3)}

/* Operational Canvas */
.operational-canvas{padding:20px 22px 28px;background:radial-gradient(900px 480px at 70% -20%,rgba(37,99,235,.07),transparent),var(--bg);min-height:calc(100vh - 57px)}
.page-home .topbar{display:none}.page-home .operational-canvas{min-height:100vh}
.canvas-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:16px}.canvas-title{display:flex;align-items:center;gap:11px;min-width:220px}.canvas-mark{font-size:24px;color:#3b82f6}.canvas-title h1{font-size:19px}.canvas-title small{display:block;color:var(--ink-3);font-size:11px}.canvas-controls{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}.view-switch{display:flex;background:#111827;border:1px solid #172033;border-radius:7px;padding:2px}.view-switch button{border:0;background:none;color:var(--ink-3);font:500 11px var(--sans);padding:6px 10px;border-radius:5px;cursor:pointer}.view-switch button.active{color:#cce3ff;background:#2563eb}.canvas-layout,.canvas-live{font-size:11px;color:var(--ink-3);white-space:nowrap}.canvas-live{color:var(--ok)}.canvas-live i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:4px}.canvas-clock{font-size:14px;letter-spacing:.08em;white-space:nowrap}.canvas-btn{border:1px solid #64748b;background:transparent;color:var(--ink);border-radius:6px;padding:6px 10px;font:500 11px var(--sans);cursor:pointer;white-space:nowrap}
.canvas-grid{display:grid;grid-template-columns:minmax(245px,.9fr) minmax(245px,.9fr) minmax(430px,1.8fr);grid-template-rows:238px 255px 278px;grid-template-areas:"alerts weather map" "responders incidents map" "comms evacuation resources";gap:14px}.canvas-card{min-width:0;overflow:hidden;background:#0e1625;border:1px solid #1d2a3d;border-radius:11px;display:flex;flex-direction:column}.canvas-card-head{height:39px;flex:0 0 39px;padding:10px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px}.canvas-card-head h2{font-size:12px}.canvas-card-head>a,.canvas-card-head>span{font-size:9.5px;color:var(--ink-3)}.alerts-card{grid-area:alerts}.weather-card{grid-area:weather}.map-card{grid-area:map}.responder-card{grid-area:responders}.incidents-card{grid-area:incidents}.comms-card{grid-area:comms}.evacuation-card{grid-area:evacuation}.resources-card{grid-area:resources}
.canvas-list{overflow:auto;padding:0 11px 10px;display:flex;flex-direction:column;gap:7px;min-height:0}.canvas-empty{margin:auto;width:100%;padding:24px 14px;color:var(--ink-3);text-align:center;border:1px dashed #26354a;border-radius:7px;font-size:10.5px;display:flex;flex-direction:column;gap:3px}.canvas-empty b{color:var(--ink-2);font-size:11.5px}.canvas-empty.ok-empty b{color:#86efac}
.canvas-alert{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:7px;padding:9px;border-radius:5px;background:rgba(59,130,246,.13);color:#60a5fa;border-left:2px solid #3b82f6}.canvas-alert>div{display:flex;min-width:0;flex-direction:column}.canvas-alert b{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.canvas-alert small,.canvas-alert time{font-size:8.5px;color:var(--ink-3)}.canvas-alert.alert-warning{background:rgba(245,158,11,.15);color:#fbbf24;border-color:#f59e0b}.canvas-alert.alert-emergency,.canvas-alert.alert-critical{background:rgba(239,68,68,.15);color:#f87171;border-color:#ef4444}
.weather-main{display:grid;grid-template-columns:32px 1fr auto;align-items:center;padding:1px 13px 10px}.weather-icon{font-size:31px;color:#3b82f6}.weather-main>div{display:flex;flex-direction:column}.weather-main b{font:700 25px var(--mono)}.weather-main small{color:var(--ink-3);font-size:10px}.weather-source{align-self:end;color:var(--ink-3);font-size:8.5px;text-align:right}.weather-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;padding:0 11px 11px}.weather-metrics>div{background:#131e30;border-radius:5px;padding:9px 4px;text-align:center;display:flex;flex-direction:column}.weather-metrics span{color:#38bdf8;font-size:15px}.weather-metrics b{font:600 11px var(--mono);margin-top:2px}.weather-metrics small{color:var(--ink-3);font-size:8px}
.map-card #copmap{height:auto;min-height:0;flex:1;border:0;border-radius:0;margin:0 10px}.map-legend{font-size:8.5px;color:var(--ink-3);display:flex;align-items:center;gap:5px}.incident-dot{width:8px;height:8px;border-radius:50%;background:var(--p1)}.unit-square{width:8px;height:8px;background:var(--ok);margin-left:5px}.map-status{height:28px;padding:6px 11px;display:flex;justify-content:space-between;font:500 8.5px var(--mono);color:var(--ink-3)}.map-status a{color:#60a5fa}.canvas-map-pin{width:25px;height:25px;border-radius:50%;background:var(--pin);border:3px solid #fff;box-shadow:0 0 0 3px color-mix(in srgb,var(--pin) 45%,transparent),0 3px 10px #0008;display:grid;place-items:center;color:#fff;font:700 8px var(--mono)}.canvas-unit-pin{width:14px;height:14px;border-radius:3px;background:var(--unit);border:2px solid #fff;box-shadow:0 2px 8px #000}
.responder-total{display:flex;justify-content:space-between;align-items:center;padding:3px 12px}.responder-total span{font-size:11px}.responder-total b{color:var(--ok);font:700 12px var(--mono)}.responder-total i{font-style:normal}.capacity-track{height:7px;margin:2px 12px 8px;background:#17243a;border-radius:99px;overflow:hidden}.capacity-track i{display:block;height:100%;width:0;background:var(--ok);border-radius:inherit;transition:width .3s}.unit-agencies{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:0 12px 9px}.unit-agencies span{border-radius:4px;background:color-mix(in srgb,var(--agency) 22%,transparent);color:color-mix(in srgb,var(--agency) 70%,white);text-align:center;padding:5px 2px;font-size:8.5px}.unit-agencies b{font:600 10px var(--mono)}.unit-states{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;padding:0 12px 10px;overflow:auto}.unit-states span{background:#131e30;border-radius:4px;padding:5px 7px;color:var(--ink-3);font-size:8px;text-transform:uppercase}.unit-states b{font:600 10px var(--mono);color:var(--ink);margin-right:5px}
.incident-canvas-list{padding-bottom:6px}.canvas-incident{display:grid;grid-template-columns:18px 1fr auto;align-items:center;gap:7px;padding:8px;background:#131e30;border-radius:5px;color:var(--ink)}.incident-glyph{color:#64748b}.canvas-incident>div{display:flex;flex-direction:column;min-width:0}.canvas-incident b{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.canvas-incident small{font-size:8px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.canvas-incident .st{font-size:7px;padding:2px 5px}.priority-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:0 11px 10px}.priority-strip span{border-top:2px solid var(--priority);background:#131e30;border-radius:3px;padding:3px;text-align:center;color:var(--ink-3);font-size:8px}.priority-strip b{font:600 9px var(--mono);color:var(--ink);margin-right:3px}
.comm-row{display:grid;grid-template-columns:7px 20px 1fr auto;align-items:center;gap:6px;padding:8px;background:#131e30;border-radius:5px}.comm-row>i{width:6px;height:6px;border-radius:50%;background:#64748b}.comm-row>i.comm-online{background:var(--ok);box-shadow:0 0 7px var(--ok)}.comm-row>i.comm-degraded{background:var(--warn)}.comm-row>span{color:#64748b}.comm-row>div{display:flex;flex-direction:column;min-width:0}.comm-row b{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.comm-row small{font-size:8px;color:var(--ink-3)}.comm-row em{font:500 8px var(--mono);font-style:normal;color:var(--ink-3)}
.evac-row{padding:8px;background:#131e30;border-radius:5px}.evac-row>div{display:flex;justify-content:space-between;gap:5px}.evac-row b{font-size:10.5px}.evac-row .st{font-size:7px;padding:2px 5px}.evac-row>i,.resource-row>i{display:block;height:5px;background:#1d2a3d;border-radius:99px;overflow:hidden;margin:6px 0 4px}.evac-row>i em{display:block;height:100%;background:var(--ok)}.evac-row small{font-size:8px;color:var(--ink-3)}
.resource-list{padding:0 12px;display:flex;flex-direction:column;gap:6px;overflow:auto;min-height:0;flex:1}.resource-row>div{display:flex;justify-content:space-between}.resource-row b{font-size:9.5px}.resource-row span,.resource-row small{font-size:8px;color:var(--ink-3)}.resource-row>i{margin:3px 0}.resource-row>i em{display:block;height:100%;background:var(--ok)}.resource-row>i em.low{background:var(--crit)}.activity-ticker{height:62px;margin-top:8px;border-top:1px solid #1d2a3d;padding:7px 12px;display:grid;grid-template-columns:78px 1fr;gap:8px;overflow:hidden}.activity-ticker>span{text-transform:uppercase;color:var(--ink-3);font-size:8px;letter-spacing:.06em}.activity-ticker>div{display:flex;flex-direction:column;gap:2px;min-width:0}.activity-ticker>div span{font-size:8.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.activity-ticker time{color:var(--ink-3);font-family:var(--mono)}
.operational-canvas.view-map .canvas-grid{display:block;height:calc(100vh - 150px)}.operational-canvas.view-map .canvas-card:not(.map-card){display:none}.operational-canvas.view-map .map-card{height:100%}.operational-canvas.view-split .canvas-grid{grid-template-columns:1.7fr 1fr;grid-template-rows:350px 260px;grid-template-areas:"map incidents" "map responders"}.operational-canvas.view-split .alerts-card,.operational-canvas.view-split .weather-card,.operational-canvas.view-split .comms-card,.operational-canvas.view-split .evacuation-card,.operational-canvas.view-split .resources-card{display:none}

/* video-wall mode */
body.wall .side,body.wall .topbar{display:none}
body.wall .shell{display:block}body.wall .operational-canvas{min-height:100vh;padding:14px}body.wall .canvas-grid{grid-template-rows:calc(29vh - 20px) calc(32vh - 20px) calc(31vh - 20px)}body.wall .canvas-head{margin-bottom:10px}
body.wall .cop{grid-template-columns:repeat(4,1fr);padding:22px;gap:18px;height:100vh}
body.wall .kpi .v{font-size:56px}
body.wall #copmap{height:46vh}
body.wall .feedlist{max-height:46vh}
.walltop{display:none}
body.wall .walltop{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid var(--line)}
body.wall .walltop .t{font-weight:800;letter-spacing:.08em}
body.wall .walltop .t b{color:var(--accent)}
body.wall .walltop .clk{font-family:var(--mono);font-size:20px;color:var(--ink-2)}

/* login */
.loginwrap{min-height:100vh;display:grid;place-items:center;background:radial-gradient(1200px 600px at 50% -10%,rgba(45,212,191,.08),transparent),var(--bg)}
.logincard{width:360px;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:30px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.logincard .logo{font-weight:800;letter-spacing:.06em;font-size:20px;text-align:center}
.logincard .logo b{color:var(--accent)}
.logincard .sub{text-align:center;color:var(--ink-3);font-size:11px;text-transform:uppercase;letter-spacing:.14em;margin:6px 0 22px}
.err{background:rgba(239,68,68,.12);border:1px solid rgba(239,68,68,.4);color:#fca5a5;padding:9px 12px;border-radius:8px;font-size:13px;margin-bottom:14px}
.hint{margin-top:16px;font-size:11px;color:var(--ink-3);text-align:center;line-height:1.7}

/* misc */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.integration-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.analytics-grid{grid-template-columns:1fr 1fr}
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.metric-row{display:flex;align-items:center;justify-content:space-between;margin:14px 0 8px;padding-top:10px;border-top:1px solid var(--line);color:var(--ink-3);font-size:12px}
.metric-row b{font-size:22px;color:var(--ink)}
.health{font:600 11px var(--mono);text-transform:uppercase}.health-online{color:var(--ok)}.health-degraded{color:var(--warn)}.health-offline{color:var(--ink-3)}
.report-note{font-size:12px;color:var(--ink-2);line-height:1.7}.skeleton{min-height:110px;opacity:.5}

/* city early-warning and barangay operations */
.city-page{padding:22px;max-width:1600px;width:100%;margin:0 auto}
.city-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:18px}.city-hero h1{font-size:24px;margin:4px 0}.eyebrow{font:600 11px var(--mono);color:var(--ok);letter-spacing:.04em}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok);margin-right:5px}.city-live{display:flex;align-items:center;gap:10px}.city-live>span{padding:7px 11px;border:1px solid var(--line);border-radius:8px;font:600 13px var(--mono);color:var(--ink-2)}
.module-tabs{display:grid;grid-template-columns:repeat(6,1fr);background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:4px;margin-bottom:14px}.module-tabs a{padding:8px 10px;text-align:center;color:var(--ink-3);font-size:12px;border-radius:7px}.module-tabs a:hover,.module-tabs a.active{background:#0c1119;color:var(--ink)}.module-tabs a.active{box-shadow:inset 0 -2px 0 var(--accent)}
.weather-head{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;border:1px solid var(--line);background:linear-gradient(90deg,rgba(45,212,191,.06),transparent);border-radius:12px 12px 0 0}.weather-head>div{display:grid;grid-template-columns:auto 1fr;column-gap:9px}.weather-head .module-icon{grid-row:span 2;color:var(--accent);font-size:20px}.weather-head .muted{font-size:11px}
.city-kpis{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;margin-bottom:16px}.city-kpi{padding:17px 18px;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column}.city-kpi:last-child{border-right:0}.city-kpi>span{text-transform:uppercase;letter-spacing:.08em;color:var(--ink-3);font-size:10px}.city-kpi>b{font:700 28px var(--mono);margin:5px 0 3px}.city-kpi b i{font-style:normal}.city-kpi small{color:var(--ink-3);font-size:10.5px}
.city-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px}.city-layout main{display:grid;gap:16px;align-content:start}.city-layout aside{display:grid;gap:16px;align-content:start}.ops-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}.ops-title{padding:13px 16px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:12px}.ops-title>div{display:flex;flex-direction:column}.ops-title small{color:var(--ink-3);font-size:10.5px;margin-top:2px}.source-badge{font:600 9px var(--mono);color:var(--accent);border:1px solid rgba(45,212,191,.3);background:rgba(45,212,191,.08);padding:3px 7px;border-radius:5px}
.station-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:14px}.station-card{display:block;border:1px solid var(--line);border-radius:9px;padding:12px;color:var(--ink);background:#0d131c}.station-card:hover{border-color:rgba(45,212,191,.45)}.station-name{display:flex;align-items:center;justify-content:space-between;gap:8px}.station-time{font-size:9px;color:var(--ink-3);margin:3px 0 10px}.reading-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.reading-grid div{padding:7px;border:1px solid rgba(34,44,59,.75);border-radius:6px}.reading-grid span{display:block;font-size:8px;color:var(--ink-3);text-transform:uppercase}.reading-grid b{font:600 12px var(--mono)}.empty-telemetry{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:35px 20px;color:var(--ink-3);border:1px dashed var(--line);border-radius:8px}.empty-telemetry b{color:var(--ink-2);margin-bottom:5px}
.rain-list{padding:10px 14px;max-height:430px;overflow:auto}.rain-row{display:grid;grid-template-columns:150px 1fr 68px;align-items:center;gap:10px;color:var(--ink-2);padding:4px 0;font-size:10.5px}.rain-row i,.readiness-grid i,.table-progress i{height:7px;border-radius:999px;background:#1a2331;overflow:hidden}.rain-row em{display:block;height:100%;background:linear-gradient(90deg,#38bdf8,#2563eb);border-radius:inherit}.rain-row>b{text-align:right;font:500 10px var(--mono)}
.readiness-total{font-size:22px;color:var(--accent)}.readiness-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px 18px;padding:12px 16px}.readiness-grid a{display:grid;grid-template-columns:120px 1fr 36px;align-items:center;gap:8px;color:var(--ink-2);font-size:10.5px;padding:4px}.readiness-grid em,.table-progress em{display:block;height:100%;background:linear-gradient(90deg,var(--accent-2),var(--accent));border-radius:inherit}.readiness-grid b{font:500 10px var(--mono);text-align:right}
.alert-stream{padding:8px;display:grid;gap:7px}.city-alert{display:flex;flex-direction:column;gap:2px;padding:10px;border-left:3px solid var(--accent-2);background:#0d131c;border-radius:6px}.city-alert>span{font:600 9px var(--mono);text-transform:uppercase;color:var(--ink-3)}.city-alert>b{font-size:12px}.city-alert small{font-size:9px;color:var(--ink-3)}.city-alert.sev-warning{border-color:var(--warn)}.city-alert.sev-emergency,.city-alert.sev-critical{border-color:var(--crit)}.empty-side{padding:24px;text-align:center;color:var(--ink-3);font-size:11px}
.quick-modules{padding-bottom:6px}.quick-modules>a{display:flex;align-items:center;gap:10px;padding:10px 13px;border-bottom:1px solid var(--panel-2);color:var(--ink)}.quick-modules>a:last-child{border:0}.quick-modules>a>span{width:26px;height:26px;display:grid;place-items:center;border:1px solid var(--line);border-radius:7px;color:var(--accent)}.quick-modules>a div{display:flex;flex-direction:column}.quick-modules>a b{font-size:11.5px}.quick-modules>a small{color:var(--ink-3);font-size:9.5px}
.barangay-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}.barangay-summary>div{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:13px}.barangay-summary span{display:block;color:var(--ink-3);font-size:10px;text-transform:uppercase;letter-spacing:.08em}.barangay-summary b{display:block;font:700 24px var(--mono);margin-top:4px}.table-progress{display:grid;grid-template-columns:minmax(60px,120px) 36px;align-items:center;gap:7px}.table-progress b{font:500 10px var(--mono)}
.leaflet-container{background:#0c1119}
/* dark basemap from keyless OSM tiles (no API key / no provider watermark) */
.leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) brightness(.92) contrast(.9) saturate(.85)}
.leaflet-control-attribution{background:rgba(10,14,20,.7)!important;color:var(--ink-3)!important;font-size:10px}
.leaflet-control-attribution a{color:var(--ink-2)!important}
.blink{animation:bl 1.4s ease-in-out infinite}@keyframes bl{50%{opacity:.35}}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;place-items:center;z-index:50;padding:20px}
.modal.open{display:grid}
.modal .box{width:520px;max-width:100%;max-height:90vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:14px}
.checklist{list-style:none;margin:0;padding:0}
.checklist li{display:flex;gap:10px;align-items:flex-start;padding:9px 4px;border-bottom:1px solid var(--panel-2)}
.checklist li.done label{color:var(--ink-3);text-decoration:line-through}
.checklist input{width:auto;margin-top:3px}
.checklist label{text-transform:none;letter-spacing:0;color:var(--ink);font-size:13px;margin:0;flex:1}
@media (max-width:900px){.shell{grid-template-columns:1fr}.side{display:none}.cop{grid-template-columns:1fr 1fr}.cop .span2,.cop .span3,.cop .span4{grid-column:span 2}.row{grid-template-columns:1fr}.kpi-grid,.analytics-grid{grid-template-columns:1fr 1fr}}
@media (max-width:1250px){.canvas-grid{grid-template-columns:1fr 1fr;grid-template-rows:420px 235px 250px 270px;grid-template-areas:"map map" "alerts weather" "responders incidents" "comms evacuation"}.resources-card{grid-column:1/-1;min-height:240px}.canvas-head{align-items:flex-start}.canvas-controls{flex-wrap:wrap}.canvas-layout{display:none}}
@media (max-width:760px){.operational-canvas{padding:12px}.canvas-head{align-items:stretch;flex-direction:column}.canvas-controls{justify-content:flex-start}.view-switch{order:5;width:100%}.view-switch button{flex:1}.canvas-layout{display:none}.canvas-grid{display:flex;flex-direction:column}.canvas-card{min-height:220px}.map-card{height:420px;order:-1}.resources-card{min-height:260px}.operational-canvas.view-split .canvas-grid{display:flex}.operational-canvas.view-split .map-card,.operational-canvas.view-split .incidents-card,.operational-canvas.view-split .responder-card{display:flex}.canvas-clock{margin-left:auto}}
@media (max-width:1100px){.city-layout{grid-template-columns:1fr}.city-layout aside{grid-template-columns:1fr 1fr}.module-tabs{grid-template-columns:repeat(3,1fr)}}
@media (max-width:700px){.city-page{padding:12px}.city-hero{align-items:flex-start;flex-direction:column}.city-kpis,.barangay-summary{grid-template-columns:1fr 1fr}.city-kpi:nth-child(2){border-right:0}.city-kpi{border-bottom:1px solid var(--line)}.station-grid,.readiness-grid,.city-layout aside{grid-template-columns:1fr}.reading-grid{grid-template-columns:1fr 1fr}.rain-row{grid-template-columns:100px 1fr 55px}.module-tabs{grid-template-columns:1fr 1fr}.topbar{padding:11px 12px}.content{padding:12px}}
@media print{.side,.topbar,.toolbar .btn{display:none!important}.shell{display:block}.content{padding:10px}.panel,.kpi{break-inside:avoid;background:#fff;color:#111;border-color:#ccc}.muted{color:#555}.main{display:block}}