/* ============ DESIGN TOKENS ============ */
:root{
  --ink:#070F17; --panel:#0E1B26; --surface:#122130; --surface-hi:#1A2E3E;
  --border:#20364A; --border-hi:#2C4863;
  --text:#EAF3F4; --text-dim:#93AAB6; --text-faint:#5C7484;

  --hydro:#17C9C0; --hydro-2:#0B8C86; --hydro-dim:#0E2B2C;
  --alert:#FF6A4D; --alert-dim:#3A1B14;
  --warn:#F5B94D; --warn-dim:#3A2C10;
  --safe:#3ED598; --safe-dim:#0F3327;
  --blue:#5B9CFF; --blue-dim:#122A44;
  --violet:#9B7BFF; --violet-dim:#221A3A;

  --r-lg:18px; --r-md:14px; --r-sm:10px;
  --glass: rgba(19,36,49,0.62);
  --shadow: 0 8px 30px rgba(0,0,0,0.35);
}
html[data-theme="light"]{
  --ink:#EEF3F5; --panel:#FFFFFF; --surface:#FFFFFF; --surface-hi:#F3F7F8;
  --border:#DCE6E9; --border-hi:#C7D5D9;
  --text:#122430; --text-dim:#54707C; --text-faint:#8AA0AA;
  --glass: rgba(255,255,255,0.72);
  --shadow: 0 8px 30px rgba(20,50,60,0.08);
}
*{box-sizing:border-box;}
body{margin:0;background:var(--ink);color:var(--text);font-family:'Inter',sans-serif;font-size:14px;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s;}
h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif;}
.mono{font-family:'IBM Plex Mono',monospace;}
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:var(--border-hi);border-radius:4px;}
button{font-family:inherit;}
a{color:inherit;}

/* ============ APP SHELL ============ */
.app{display:grid;grid-template-columns:240px 1fr;grid-template-rows:64px 1fr;height:100vh;transition:grid-template-columns .25s ease;}
.app.collapsed{grid-template-columns:76px 1fr;}

/* Topbar */
.topbar{grid-column:1/3;background:var(--glass);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 22px;gap:18px;z-index:20;}
.brand{display:flex;align-items:center;gap:11px;font-family:'Space Grotesk';font-weight:700;font-size:18px;letter-spacing:.9px;white-space:nowrap;}
.brand .mark{width:34px;height:34px;border-radius:10px;background:#0A1A1C;border:1px solid #1E4640;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(20,230,211,.08) inset, 0 4px 14px rgba(23,201,192,.18);}
.collapse-btn{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;}
.collapse-btn:hover{color:var(--hydro);border-color:var(--hydro);}

.searchbar{flex:1;max-width:380px;display:flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 12px;color:var(--text-faint);margin-left:8px;}
.searchbar input{background:transparent;border:none;outline:none;color:var(--text);font-size:12.5px;width:100%;}
.searchbar i{font-size:15px;}

.topbar-right{display:flex;align-items:center;gap:14px;margin-left:auto;}
.live-pill{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--text-dim);background:var(--surface);border:1px solid var(--border);padding:6px 12px;border-radius:20px;}
.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--alert);position:relative;flex-shrink:0;}
.pulse-dot::after{content:'';position:absolute;inset:-5px;border-radius:50%;border:1.5px solid var(--alert);animation:pulse 1.8s ease-out infinite;}
@keyframes pulse{0%{transform:scale(0.4);opacity:1;}100%{transform:scale(1.9);opacity:0;}}

.icon-btn{position:relative;width:38px;height:38px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px;transition:.15s;}
.icon-btn:hover{color:var(--hydro);border-color:var(--hydro);background:var(--hydro-dim);}
.icon-btn .dot{position:absolute;top:6px;right:7px;width:7px;height:7px;border-radius:50%;background:var(--alert);border:2px solid var(--panel);}

.theme-toggle{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:3px;gap:2px;}
.theme-toggle button{width:30px;height:26px;border-radius:16px;border:none;background:transparent;color:var(--text-faint);cursor:pointer;font-size:13px;display:flex;align-items:center;justify-content:center;}
.theme-toggle button.active{background:var(--hydro-dim);color:var(--hydro);}

.profile{display:flex;align-items:center;gap:10px;padding:5px 12px 5px 5px;border-radius:24px;background:var(--surface);border:1px solid var(--border);cursor:pointer;}
.avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(155deg,var(--violet),#5B3FC9);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;}
.profile .pname{font-size:12px;font-weight:600;line-height:1.1;}
.profile .prole{font-size:10.5px;color:var(--text-faint);}

/* Sidebar */
.rail{background:var(--panel);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:16px 12px;gap:2px;overflow-y:auto;}
.rail-section-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--text-faint);padding:14px 10px 6px;}
.app.collapsed .rail-section-lbl{opacity:0;height:6px;overflow:hidden;padding:6px 0 0;}
.rail button.nav-item{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border-radius:11px;border:none;background:transparent;color:var(--text-dim);cursor:pointer;font-size:13px;font-weight:500;text-align:left;white-space:nowrap;overflow:hidden;transition:.15s;}
.rail button.nav-item i{font-size:18px;flex-shrink:0;width:18px;text-align:center;}
.rail button.nav-item:hover{background:var(--surface);color:var(--text);}
.rail button.nav-item.active{background:linear-gradient(90deg,var(--hydro-dim),transparent);color:var(--hydro);box-shadow:inset 3px 0 0 var(--hydro);}
.app.collapsed .rail button.nav-item span{display:none;}
.app.collapsed .rail button.nav-item{justify-content:center;}

/* Main canvas */
.main{overflow:auto;padding:24px 28px 60px;}
.view{display:none;animation:fadeUp .35s ease;}
.view.active{display:block;}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.view-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px;}
.view-head h1{font-size:22px;font-weight:600;margin:0;letter-spacing:-.2px;}
.view-head p{color:var(--text-dim);font-size:12.5px;margin:5px 0 0;}
.eyebrow{font-size:10.5px;text-transform:uppercase;letter-spacing:1px;color:var(--hydro);font-weight:600;margin-bottom:4px;}

.btn{background:var(--surface);border:1px solid var(--border-hi);color:var(--text);padding:9px 15px;border-radius:10px;font-size:12.5px;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.15s;font-weight:500;}
.btn:hover{background:var(--surface-hi);transform:translateY(-1px);}
.btn.primary{background:linear-gradient(135deg,var(--hydro),var(--hydro-2));border-color:transparent;color:#04211f;font-weight:600;box-shadow:0 4px 16px rgba(23,201,192,.28);}
.btn.primary:hover{filter:brightness(1.08);}
.btn.danger{background:linear-gradient(135deg,var(--alert),#C8402A);border-color:transparent;color:#2b0d0a;font-weight:600;}
.btn.ghost{background:transparent;border-color:var(--border);}

/* Glass card base */
.card{background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px 20px;box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s,border-color .2s;}
.card.hoverable:hover{transform:translateY(-3px);border-color:var(--border-hi);}
.grid{display:grid;gap:16px;}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:1300px){.grid-4{grid-template-columns:repeat(2,1fr);}.grid-3{grid-template-columns:repeat(2,1fr);}}
@media(max-width:760px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr;}}

/* ============ COMMAND RING (signature element) ============ */
.hero{display:grid;grid-template-columns:230px 1fr;gap:24px;margin-bottom:22px;align-items:stretch;}
@media(max-width:900px){.hero{grid-template-columns:1fr;}}
.ring-card{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.ring-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 20%,rgba(23,201,192,.16),transparent 65%);}
.ring-wrap{position:relative;width:168px;height:168px;}
.ring-wrap svg{width:100%;height:100%;transform:rotate(-90deg);}
.ring-track{fill:none;stroke:var(--border);stroke-width:10;}
.ring-fill{fill:none;stroke:url(#ringGrad);stroke-width:10;stroke-linecap:round;stroke-dasharray:440;stroke-dashoffset:440;transition:stroke-dashoffset 1.4s cubic-bezier(.2,.8,.2,1);filter:drop-shadow(0 0 8px rgba(255,106,77,.45));}
.ring-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
.ring-center .num{font-family:'Space Grotesk';font-size:38px;font-weight:700;color:var(--alert);line-height:1;}
.ring-center .lbl{font-size:10px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.8px;margin-top:5px;}
.ring-foot{margin-top:14px;text-align:center;}
.ring-foot .t{font-size:12.5px;font-weight:600;}
.ring-foot .s{font-size:10.5px;color:var(--text-faint);margin-top:2px;}

.hero-kpis{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:14px;}
.kpi{position:relative;overflow:hidden;}
.kpi .ki-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.kpi .ki-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:16px;}
.kpi .ki-delta{font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:6px;}
.kpi .ki-delta.up{color:var(--alert);background:var(--alert-dim);}
.kpi .ki-delta.down{color:var(--safe);background:var(--safe-dim);}
.kpi .ki-val{font-family:'Space Grotesk';font-size:24px;font-weight:700;}
.kpi .ki-lbl{font-size:11px;color:var(--text-dim);margin-top:3px;}

/* Section label */
.section-lbl{display:flex;align-items:center;gap:10px;margin:28px 0 14px;}
.section-lbl .n{width:24px;height:24px;border-radius:7px;background:var(--hydro-dim);color:var(--hydro);font-family:'IBM Plex Mono';font-size:12px;display:flex;align-items:center;justify-content:center;font-weight:600;}
.section-lbl h3{margin:0;font-size:15px;}
.section-lbl p{margin:1px 0 0;font-size:11.5px;color:var(--text-faint);}

/* ============ LIVE MAP VIEW ============ */
.map-shell{display:grid;grid-template-columns:1fr 300px;gap:16px;}
.map-col{display:flex;flex-direction:column;gap:14px;}
#liveMap{height:520px;border-radius:var(--r-lg);border:1px solid var(--border);}
.layer-chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{display:flex;align-items:center;gap:7px;padding:7px 12px;border-radius:20px;border:1px solid var(--border);background:var(--surface);font-size:11.5px;color:var(--text-dim);cursor:pointer;user-select:none;transition:.15s;}
.chip .dotc{width:8px;height:8px;border-radius:50%;}
.chip.on{border-color:var(--hydro);color:var(--text);background:var(--hydro-dim);}
.chip:hover{border-color:var(--border-hi);}

/* Timeline */
.timeline{display:flex;align-items:center;position:relative;padding:22px 6px 6px;}
.tl-step{flex:1;text-align:center;position:relative;}
.tl-step::before{content:'';position:absolute;top:-16px;left:0;right:0;height:2px;background:var(--border);}
.tl-step:first-child::before{left:50%;}
.tl-step:last-child::before{right:50%;}
.tl-step.done::before{background:var(--hydro);}
.tl-dot{width:13px;height:13px;border-radius:50%;background:var(--border);border:2px solid var(--panel);position:absolute;top:-22px;left:50%;transform:translateX(-50%);}
.tl-step.done .tl-dot{background:var(--hydro);box-shadow:0 0 0 3px var(--hydro-dim);}
.tl-step.active .tl-dot{background:var(--alert);box-shadow:0 0 0 4px var(--alert-dim);}
.tl-label{font-size:11px;color:var(--text-dim);margin-top:4px;}
.tl-step.done .tl-label,.tl-step.active .tl-label{color:var(--text);font-weight:600;}
.tl-time{font-size:9.5px;color:var(--text-faint);font-family:'IBM Plex Mono';margin-top:2px;}

/* AI drawer */
.ai-panel{display:flex;flex-direction:column;gap:12px;}
.ai-head{display:flex;align-items:center;gap:10px;}
.ai-avatar{width:36px;height:36px;border-radius:10px;background:linear-gradient(155deg,var(--violet),#5B3FC9);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;}
.confidence-bar{height:6px;background:var(--surface-hi);border-radius:3px;overflow:hidden;margin-top:6px;}
.confidence-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--hydro),var(--safe));}
.ai-rec{display:flex;gap:9px;font-size:12px;color:var(--text-dim);padding:8px 0;border-bottom:1px solid var(--border);}
.ai-rec:last-child{border-bottom:none;}
.ai-rec i{color:var(--hydro);font-size:15px;margin-top:1px;flex-shrink:0;}

/* ============ RESOURCE / HOSPITAL / RESCUE cards ============ */
.res-card{}
.res-card .rc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.res-card .rc-icon{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;}
.progress{height:7px;background:var(--surface-hi);border-radius:4px;overflow:hidden;margin:10px 0 6px;}
.progress-fill{height:100%;border-radius:4px;}
.res-foot{display:flex;justify-content:space-between;font-size:11px;color:var(--text-faint);}
.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:5px;}

/* Tables */
table{width:100%;border-collapse:collapse;font-size:12.8px;}
th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;color:var(--text-faint);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--border);}
td{padding:12px;border-bottom:1px solid var(--border);vertical-align:middle;}
tr:hover td{background:var(--surface);}
.tag{font-size:10px;padding:3px 9px;border-radius:6px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;}
.tag.critical{background:var(--alert-dim);color:#ff9683;}
.tag.moderate{background:var(--warn-dim);color:#f2c363;}
.tag.ok{background:var(--safe-dim);color:#7fe0af;}
.mini-bar{width:90px;height:6px;background:var(--surface-hi);border-radius:3px;overflow:hidden;display:inline-block;vertical-align:middle;margin-right:8px;}
.mini-fill{height:100%;border-radius:3px;}

/* Alerts */
.alert-card{position:relative;border-left:4px solid var(--alert);}
.alert-card.warning{border-left-color:var(--warn);}
.alert-top{display:flex;justify-content:space-between;align-items:flex-start;}
.alert-title{font-size:14.5px;font-weight:600;}
.alert-meta{display:flex;gap:16px;margin-top:10px;font-size:11.5px;color:var(--text-dim);flex-wrap:wrap;}
.alert-meta b{color:var(--text);font-family:'IBM Plex Mono';}
.countdown{font-family:'IBM Plex Mono';font-size:15px;color:var(--alert);font-weight:600;background:var(--alert-dim);padding:5px 11px;border-radius:8px;}

/* Citizen reports */
.report-card{}
.report-media{height:140px;border-radius:12px;background:linear-gradient(135deg,var(--surface-hi),var(--surface));display:flex;align-items:center;justify-content:center;color:var(--text-faint);font-size:26px;margin-bottom:12px;position:relative;overflow:hidden;}
.verified-badge{position:absolute;top:8px;right:8px;background:var(--safe-dim);color:var(--safe);font-size:9.5px;font-weight:700;padding:3px 8px;border-radius:6px;display:flex;align-items:center;gap:4px;}
.report-user{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.report-user .ru-avatar{width:26px;height:26px;border-radius:50%;background:var(--surface-hi);display:flex;align-items:center;justify-content:center;font-size:12px;}

/* Analytics */
.chart-card canvas{max-height:220px;}

/* AI feature grid */
.feat-card{display:flex;flex-direction:column;gap:8px;}
.feat-icon{width:42px;height:42px;border-radius:11px;background:var(--hydro-dim);color:var(--hydro);display:flex;align-items:center;justify-content:center;font-size:20px;margin-bottom:4px;}
.feat-title{font-size:13.5px;font-weight:600;}
.feat-desc{font-size:11.5px;color:var(--text-dim);line-height:1.5;}

/* toast */
.toast-wrap{position:fixed;bottom:22px;right:22px;display:flex;flex-direction:column;gap:10px;z-index:100;}
.toast{background:var(--glass);backdrop-filter:blur(14px);border:1px solid var(--border);border-radius:12px;padding:12px 16px;display:flex;align-items:center;gap:10px;font-size:12.5px;box-shadow:var(--shadow);animation:toastIn .3s ease;min-width:260px;}
@keyframes toastIn{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);}}
.toast i{color:var(--hydro);font-size:17px;}

/* skeleton */
.skeleton{background:linear-gradient(90deg,var(--surface) 25%,var(--surface-hi) 50%,var(--surface) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:8px;}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* responsive */
@media(max-width:1100px){.map-shell{grid-template-columns:1fr;}.hero-kpis{grid-template-columns:repeat(2,1fr);}}
@media(max-width:900px){.app{grid-template-columns:1fr;grid-template-rows:64px 1fr;}.rail{position:fixed;left:-260px;top:64px;bottom:0;width:240px;z-index:30;transition:left .25s;}.app.mobile-open .rail{left:0;}}