:root{
 --navy:#071b3f;--navy2:#0c3675;--gold:#d7b33e;--bg:#edf2f8;--surface:#fff;--ink:#10213d;--muted:#73819a;
 --line:#dce5ef;--green:#0e8b58;--red:#c8373d;--orange:#d67a18;--shadow:0 12px 32px rgba(7,27,63,.08);
}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#dfe7f1;color:var(--ink)}
button,input,select,textarea{font:inherit}button{cursor:pointer}.app{max-width:1180px;min-height:100vh;margin:auto;background:var(--bg);position:relative}
.topbar{position:sticky;top:0;z-index:30;background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;border-bottom:4px solid var(--gold);padding:13px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px}.brand img{width:42px;height:42px}.brand b{font-size:17px}.brand small{display:block;color:#d8e4f3;font-size:9px;margin-top:2px}.top-actions{display:flex;gap:7px;align-items:center}
.content{padding:14px 14px 88px}.hero{background:linear-gradient(135deg,#071b3f,#14488e);color:#fff;border-radius:22px;padding:21px;box-shadow:var(--shadow);position:relative;overflow:hidden}.hero:after{content:"";position:absolute;width:190px;height:190px;border:32px solid rgba(215,179,62,.12);border-radius:50%;right:-65px;top:-65px}.hero h1{margin:0 0 7px;font-size:28px}.hero p{margin:0;color:#dce7f6;font-size:12px;max-width:700px}.hero-row{display:flex;gap:10px;align-items:center;justify-content:space-between;position:relative;z-index:2}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.section{margin-top:12px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px;box-shadow:0 3px 14px rgba(7,27,63,.04)}.title{font-size:17px;font-weight:1000;color:var(--navy);margin:0 0 10px}.subtitle{font-size:11px;color:var(--muted)}.muted{font-size:10px;color:var(--muted)}
.btn{border:0;border-radius:11px;padding:10px 13px;background:var(--navy);color:#fff;font-weight:900}.btn.green{background:var(--green)}.btn.red{background:var(--red)}.btn.gold{background:var(--gold);color:var(--navy)}.btn.soft{background:#eef3f8;color:var(--navy)}.btn.small{padding:7px 9px;font-size:9px}.wide{width:100%;margin-top:8px}
.input{width:100%;border:1px solid var(--line);background:#fff;border-radius:12px;padding:11px 12px;margin-top:8px;color:var(--ink);outline:none}.input:focus{border-color:#90aacf;box-shadow:0 0 0 3px rgba(13,50,111,.08)}
.row{display:flex;align-items:center;gap:9px;padding:10px;border:1px solid #edf1f6;border-radius:13px;margin-top:7px;background:#fff}.ico{width:40px;height:40px;border-radius:11px;background:#eef3fa;display:grid;place-items:center;flex:none;font-size:18px}.grow{flex:1;min-width:0}.row b{display:block;color:var(--navy);font-size:13px}.row small{display:block;color:var(--muted);font-size:9px;line-height:1.4}
.badge{display:inline-flex;align-items:center;justify-content:center;font-size:8px;font-weight:1000;padding:5px 8px;border-radius:999px;white-space:nowrap}.greenb{background:#e6f6ef;color:var(--green)}.redb{background:#fde9ea;color:var(--red)}.goldb{background:#fff4cf;color:#806611}.orangeb{background:#fff0df;color:#9d570d}.blueb{background:#e8f0fb;color:#31598f}
.stat{padding:12px;background:#fbfcfe;border:1px solid var(--line);border-radius:14px}.stat small{display:block;font-size:8px;color:var(--muted);font-weight:900}.stat b{font-size:19px;color:var(--navy);display:block;margin-top:3px}
.notice{border-left:5px solid var(--gold);background:#fff8df;padding:10px;border-radius:10px;font-size:10px}.notice.safe{border-left-color:var(--green);background:#eefaf4}.notice.danger{border-left-color:var(--red);background:#fff0f0}
.mapbox{height:180px;border-radius:18px;background:
 radial-gradient(circle at 65% 35%,rgba(215,179,62,.28) 0 5px,transparent 6px),
 linear-gradient(35deg,transparent 44%,rgba(255,255,255,.6) 45% 48%,transparent 49%),
 linear-gradient(110deg,transparent 37%,rgba(255,255,255,.5) 38% 42%,transparent 43%),
 linear-gradient(150deg,#c8d8e8,#e9eff6);position:relative;overflow:hidden;border:1px solid #cad6e4}
.mapbox:before{content:"ABUJA";position:absolute;left:16px;top:14px;font-size:11px;font-weight:1000;color:#526a8d}.map-pin{position:absolute;left:55%;top:46%;width:24px;height:24px;background:var(--navy);border:4px solid #fff;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 4px 12px rgba(0,0,0,.2)}
.service-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.service-tab{border:1px solid var(--line);border-radius:14px;padding:11px;background:#fff;text-align:center;font-weight:900;color:var(--navy);font-size:10px}.service-tab.active{border-color:var(--gold);background:#fff8dd}.service-tab span{font-size:23px;display:block;margin-bottom:5px}
.bottomnav{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(1180px,100%);height:70px;background:#fff;border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(5,1fr);z-index:40;padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -8px 22px rgba(7,27,63,.07)}
.bottomnav button{border:0;background:transparent;color:#728099;font-size:8px;font-weight:900}.bottomnav button span{display:block;font-size:20px;margin-bottom:3px}.bottomnav button.active{color:var(--navy)}.view{display:none}.view.active{display:block}.hidden{display:none!important}
.login-wrap{max-width:520px;margin:28px auto}.login-card{background:#fff;border-radius:22px;padding:19px;border:1px solid var(--line);box-shadow:var(--shadow)}.login-logo{text-align:center}.login-logo img{width:78px}.login-logo h1{font-size:22px;color:var(--navy);margin:8px 0 4px}.login-logo p{font-size:10px;color:var(--muted);margin:0}
.profile-chip{display:flex;align-items:center;gap:8px}.avatar{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--navy);font-weight:1000}
.install-banner{display:none;background:#fff6d5;border:1px solid #ead48b;border-radius:13px;padding:10px;margin-bottom:10px;align-items:center;gap:9px}.install-banner.show{display:flex}
.loading{padding:18px;text-align:center;color:var(--muted);font-size:10px}.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);animation:pulse 1s infinite alternate;margin-right:3px}@keyframes pulse{to{opacity:.25}}
.table-wrap{overflow:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:9px;border-bottom:1px solid #edf1f6;text-align:left;font-size:9px}.table th{font-size:8px;color:var(--muted)}
@media(max-width:820px){.grid4,.grid3,.grid2{grid-template-columns:1fr 1fr}.hero h1{font-size:24px}}
@media(max-width:560px){.content{padding:10px 10px 86px}.grid4,.grid3,.grid2{grid-template-columns:1fr}.topbar{padding:11px}.brand b{font-size:14px}.hero{padding:16px}.hero h1{font-size:21px}.service-tabs{grid-template-columns:repeat(3,1fr)}.row{align-items:flex-start;flex-wrap:wrap}.top-actions .badge{display:none}}