:root { --background:#07131e; --line:#20394d; --text:#f4f8fb; --muted:#91a5b6; --danger:#f6c344; --detection:#ef4444; --safe:#35c98b; }
* { box-sizing:border-box; }
[hidden] { display:none !important; }
html,body { margin:0; min-height:100%; background:var(--background); color:var(--text); }
body { font-family:Inter,"Segoe UI",Arial,sans-serif; overflow:hidden; }
button,a { font:inherit; }
.dashboard-shell { min-height:100vh; display:grid; grid-template-columns:minmax(0,1fr) 410px; grid-template-rows:72px minmax(0,1fr); background:radial-gradient(circle at 18% 10%,#102b3d 0,transparent 34%),var(--background); }
.topbar { grid-column:1/-1; display:flex; align-items:center; gap:14px; padding:0 24px; border-bottom:1px solid var(--line); background:rgba(7,19,30,.92); backdrop-filter:blur(16px); z-index:1001; }
.brand-mark { display:grid; place-items:center; width:40px; height:40px; border-radius:12px; color:#9ed9ff; background:#102a3d; border:1px solid #24445d; box-shadow:inset 0 0 22px rgba(72,175,236,.08); }
.topbar h1 { margin:0; font-size:1.15rem; line-height:1.2; letter-spacing:-.02em; }
.topbar p { margin:4px 0 0; color:var(--muted); font-size:.82rem; }
.connection { margin-left:auto; display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:0 12px; border-radius:999px; border:1px solid #4c3740; color:#f2a9ae; background:#24171d; font-size:.84rem; font-weight:650; }
.connection--online { color:#9be8c7; background:#0e2a22; border-color:#235a47; }
.map-panel { position:relative; min-height:0; overflow:hidden; }
.map-canvas { position:absolute; inset:0; background:#0b1b28; }
.map-canvas::after { content:''; position:absolute; inset:0; pointer-events:none; z-index:500; box-shadow:inset -40px 0 70px rgba(7,19,30,.35); }
.map-canvas .ol-viewport { background:#0b1b28; }
.basemap-layer canvas { filter:saturate(.18) brightness(.45) contrast(1.25) hue-rotate(164deg); }
.ol-layer canvas { image-rendering:auto; }
.svg-map { position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:grab; user-select:none; }
.svg-map.is-dragging { cursor:grabbing; }
.map-region { stroke:#4b6375; stroke-width:1.2; vector-effect:non-scaling-stroke; transition:fill .25s ease; }
.map-region--danger { stroke:#ffe19a; }
.map-region--detection { stroke:#ff969a; }
.map-region-label,.map-city-label { fill:#f1f7fb; font-weight:700; paint-order:stroke; stroke:#07131e; stroke-width:4px; stroke-linejoin:round; pointer-events:none; }
.map-region-label { font-size:14px; }
.map-city-label { font-size:13px; }
.map-city-halo { fill:none; stroke:#8fa5b5; stroke-width:2; opacity:.6; vector-effect:non-scaling-stroke; }
.map-city--danger .map-city-halo { stroke:var(--danger); }
.map-city--detection .map-city-halo { stroke:var(--detection); }
.map-city-dot { stroke:#07131e; stroke-width:2; vector-effect:non-scaling-stroke; }
.map-controls { position:absolute; z-index:700; right:18px; bottom:22px; display:grid; overflow:hidden; border:1px solid #36536a; border-radius:10px; background:#0d1d2a; box-shadow:0 10px 25px rgba(0,0,0,.28); }
.map-controls button { width:38px; height:36px; padding:0; border:0; border-bottom:1px solid #294357; background:transparent; color:#dbe9f2; font-size:1.2rem; cursor:pointer; }
.map-controls button:last-child { border-bottom:0; font-size:1rem; }
.map-controls button:hover { background:#173247; }
.map-controls button:focus-visible,.back-button:focus-visible,.detail-heading button:focus-visible,.zone-card:focus-visible,.detail-actions a:focus-visible { outline:2px solid #8fd2ff; outline-offset:2px; }
.map-toolbar { position:absolute; z-index:700; top:18px; left:20px; display:flex; align-items:center; gap:10px; min-height:40px; padding:5px 12px; border:1px solid rgba(67,95,116,.75); border-radius:12px; color:#b8cad6; background:rgba(7,19,30,.9); backdrop-filter:blur(12px); box-shadow:0 10px 30px rgba(0,0,0,.22); font-size:.8rem; }
.back-button { min-height:30px; padding:0 10px; border:1px solid #35556c; border-radius:8px; color:#e9f4fa; background:#132b3c; cursor:pointer; font-weight:700; }
.back-button:hover { background:#1a3a50; }
.map-error { position:absolute; inset:0; display:grid; place-items:center; color:#ef9a9d; }
.legend { position:absolute; z-index:700; left:22px; bottom:22px; display:flex; flex-wrap:wrap; gap:14px; padding:12px 14px; border:1px solid rgba(67,95,116,.75); border-radius:12px; background:rgba(7,19,30,.88); backdrop-filter:blur(12px); box-shadow:0 14px 35px rgba(0,0,0,.24); }
.legend span { display:inline-flex; align-items:center; gap:7px; color:#cad7df; font-size:.78rem; }
.legend-dot { width:9px; height:9px; border-radius:50%; background:#3e5668; }
.legend-dot--danger { background:var(--danger); box-shadow:0 0 10px rgba(246,195,68,.45); }
.legend-dot--detection { background:var(--detection); box-shadow:0 0 10px rgba(239,68,68,.45); }
.status-panel { min-height:0; display:flex; flex-direction:column; border-left:1px solid var(--line); background:linear-gradient(180deg,#0d1d2a 0%,#091722 100%); padding:18px; }
.summary { display:flex; align-items:center; gap:13px; padding:16px; border:1px solid #235044; border-radius:16px; background:linear-gradient(135deg,rgba(53,201,139,.14),rgba(53,201,139,.04)); }
.summary--danger { border-color:#6f5a20; background:linear-gradient(135deg,rgba(246,195,68,.17),rgba(246,195,68,.04)); }
.summary--detection { border-color:#6f2c32; background:linear-gradient(135deg,rgba(239,68,68,.18),rgba(239,68,68,.04)); }
.summary-icon { display:grid; place-items:center; width:45px; height:45px; border-radius:13px; background:rgba(53,201,139,.12); color:var(--safe); }
.summary--danger .summary-icon { background:rgba(246,195,68,.12); color:var(--danger); }
.summary--detection .summary-icon { background:rgba(239,68,68,.12); color:#ff7a7f; }
.summary span { display:block; color:var(--muted); font-size:.78rem; }
.summary strong { display:block; margin-top:3px; font-size:1.16rem; }
.region-detail { margin-top:14px; padding:16px; border:1px solid #315168; border-radius:16px; background:linear-gradient(145deg,rgba(22,53,73,.96),rgba(10,27,40,.96)); box-shadow:0 16px 34px rgba(0,0,0,.2); }
.detail-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.detail-heading h2 { margin:3px 0 0; font-size:1.08rem; line-height:1.25; letter-spacing:-.015em; }
.eyebrow { color:#86a9bd; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.09em; }
.detail-heading button { flex:0 0 auto; display:grid; place-items:center; width:30px; height:30px; padding:0; border:1px solid #35546a; border-radius:9px; color:#adc2cf; background:#102638; cursor:pointer; font-size:1.3rem; line-height:1; }
.detail-heading button:hover { color:#fff; background:#19364a; }
.detail-status { display:flex; align-items:center; gap:9px; margin-top:14px; padding:10px 12px; border-radius:10px; background:rgba(5,16,25,.38); font-size:.9rem; }
#detail-status-dot { width:10px; height:10px; border-radius:50%; background:#60798c; box-shadow:0 0 0 4px rgba(96,121,140,.12); }
#detail-status-dot.detail-dot--danger { background:var(--danger); box-shadow:0 0 0 4px rgba(246,195,68,.12),0 0 12px rgba(246,195,68,.5); }
#detail-status-dot.detail-dot--detection { background:var(--detection); box-shadow:0 0 0 4px rgba(239,68,68,.13),0 0 12px rgba(239,68,68,.5); }
#detail-status-dot.detail-dot--cleared { background:var(--safe); box-shadow:0 0 0 4px rgba(53,201,139,.12); }
.time-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.time-grid>div { padding:10px 11px; border:1px solid rgba(57,86,106,.7); border-radius:10px; background:rgba(6,18,28,.35); }
.time-grid span { display:block; color:#829bab; font-size:.7rem; }
.time-grid strong { display:block; margin-top:4px; color:#e9f2f7; font-size:.82rem; }
.detail-message { margin:11px 0 0; color:#aec0cb; font-size:.8rem; line-height:1.45; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.detail-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:11px; }
.detail-actions a { padding:7px 9px; border:1px solid #31546c; border-radius:8px; color:#aadaf5; background:#102b3d; text-decoration:none; font-size:.74rem; font-weight:700; }
.detail-actions a:hover { color:#fff; border-color:#4d7895; }
.district-line { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; padding-top:11px; border-top:1px solid rgba(55,83,103,.7); color:#91a8b7; font-size:.76rem; }
.district-line strong { min-width:27px; padding:4px 7px; border-radius:7px; color:#d8e7ef; background:#18364a; text-align:center; font-size:.73rem; }
.selected-district { margin:9px 0 0; padding:9px 10px; border-radius:9px; color:#d9edf8; background:rgba(48,116,153,.18); font-size:.78rem; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; padding:24px 2px 13px; }
.panel-heading h2 { margin:0; font-size:1rem; }
.panel-heading p { margin:5px 0 0; color:var(--muted); font-size:.82rem; }
.count-badge { min-width:30px; height:30px; display:grid; place-items:center; border:1px solid #2b465a; border-radius:9px; color:#b7cad7; background:#102333; font-size:.82rem; font-weight:700; }
.zone-list { min-height:0; flex:1; overflow-y:auto; padding-right:3px; }
.empty-state { height:100%; min-height:220px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#60798c; }
.empty-state strong { margin-top:12px; color:#c8d6df; font-size:.95rem; }
.empty-state span { max-width:230px; margin-top:6px; line-height:1.45; font-size:.82rem; }
.zone-card { display:block; width:100%; margin-bottom:10px; padding:14px 15px; color:inherit; text-align:left; border:1px solid #2d4557; border-left-width:4px; border-radius:12px; background:rgba(15,36,51,.76); cursor:pointer; transition:transform .15s ease,background .15s ease; }
.zone-card:hover { transform:translateY(-1px); background:#122b3d; }
.zone-card--danger { border-left-color:var(--danger); }
.zone-card--detection { border-left-color:var(--detection); }
.zone-card__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:9px; }
.zone-status { color:#ffd768; font-size:.72rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.zone-card--detection .zone-status { color:#ff8589; }
.zone-card time { display:inline-flex; align-items:center; gap:5px; color:var(--muted); font-size:.73rem; }
.zone-card>strong { font-size:.96rem; }
.zone-card p { margin:7px 0 0; color:#9db0be; font-size:.8rem; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.status-panel footer { display:flex; justify-content:space-between; flex-wrap:wrap; gap:7px 10px; padding-top:15px; color:#6f8798; font-size:.72rem; }
@media (max-width:850px) {
  body { overflow:auto; }
  .dashboard-shell { min-height:100dvh; grid-template-columns:1fr; grid-template-rows:70px minmax(390px,58dvh) auto; }
  .topbar { padding:0 14px; }
  .topbar p { display:none; }
  .connection { font-size:0; padding:0; width:38px; justify-content:center; }
  .connection svg { width:17px; }
  .map-panel { min-height:390px; }
  .map-toolbar { top:10px; left:10px; max-width:calc(100% - 20px); }
  .map-canvas::after { display:none; }
  .legend { left:10px; right:10px; bottom:10px; gap:10px; justify-content:center; }
  .legend span { font-size:.7rem; }
  .map-controls { right:10px; bottom:72px; }
  .status-panel { border-left:0; border-top:1px solid var(--line); min-height:380px; padding:14px; }
  .region-detail { padding:14px; }
  .status-panel footer { padding-bottom:4px; }
}

@media (max-width:480px) {
  .dashboard-shell { grid-template-rows:66px minmax(340px,52dvh) auto; }
  .brand-mark { width:36px; height:36px; }
  .topbar h1 { font-size:1.02rem; }
  .map-panel { min-height:340px; }
  .map-toolbar { right:10px; justify-content:space-between; }
  .map-hint { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .legend { padding:9px 10px; }
  .legend span:last-child { display:none; }
  .time-grid { grid-template-columns:1fr; }
}