:root{--bg:#070c16;--panel:#0d1525;--panel2:#111c31;--line:#223250;--text:#f5f7fb;--muted:#8997ad;--blue:#5b7cff;--green:#22c58b;--amber:#f5b84b;--red:#ef5b67;--cyan:#38c8ff;--shadow:0 18px 55px #0005}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 80% 0,#15284b33,transparent 35%),radial-gradient(circle at 0 100%,#1b3b7433,transparent 32%),var(--bg);color:var(--text);font:14px Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,input,select,textarea{font:inherit}button{cursor:pointer}
.shell{display:grid;grid-template-columns:240px 1fr;min-height:100vh}.side{position:sticky;top:0;height:100vh;border-right:1px solid var(--line);background:#060b14e8;backdrop-filter:blur(18px);padding:22px 14px;display:flex;flex-direction:column;overflow:hidden}.brand{display:flex;align-items:center;gap:11px;padding:4px 8px 18px;font-size:19px;font-weight:800;flex-shrink:0}.brandmark{width:34px;height:34px;border:1px solid #31517e;background:#12203a;border-radius:11px;display:grid;place-items:center;font-size:12px}.nav{display:flex;flex-direction:column;gap:4px;overflow:auto;flex:1;padding-right:2px;scrollbar-width:thin}.nav button{border:1px solid transparent;background:transparent;color:#8d9ab0;text-align:left;padding:10px 12px;border-radius:10px;display:flex;gap:10px;align-items:center;flex-shrink:0}.nav button:hover,.nav button.active{background:#172747;color:white;border-color:#29447a}.nav button b{width:18px;text-align:center;flex-shrink:0}.sidefoot{margin-top:10px;color:#718099;font-size:11px;padding:10px 8px;flex-shrink:0}.online{color:var(--green)}
.main{min-width:0}.topbar{height:68px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 34px;position:sticky;top:0;z-index:5;background:#070c16e8;backdrop-filter:blur(16px)}.crumb{color:#8c9bb1}.crumb b{color:#fff}.top-actions{display:flex;align-items:center;gap:10px}.live{border:1px solid #145c42;background:#0b2b21;color:#51e0ae;border-radius:999px;padding:7px 10px;font-size:11px;font-weight:800}
.content{padding:34px;max-width:1500px;margin:auto}.eyebrow{color:#7195ff;letter-spacing:2px;text-transform:uppercase;font-size:10px;font-weight:900}.title{font-size:31px;margin:6px 0}.sub{color:var(--muted);margin:0 0 24px}.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.grid2{display:grid;grid-template-columns:1.5fr 1fr;gap:12px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.card{background:linear-gradient(180deg,#111b2e,#0c1423);border:1px solid var(--line);border-radius:15px;box-shadow:var(--shadow);padding:18px}.metric .label{color:#8391a8;text-transform:uppercase;font-size:10px;letter-spacing:1px}.metric .value{font-size:31px;font-weight:850;margin:12px 0 3px}.metric .hint{font-size:11px;color:#8795ab}.good{color:var(--green)}.warn{color:var(--amber)}.danger{color:var(--red)}.muted{color:var(--muted)}
.toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:22px 0 12px}.toolbar .left,.toolbar .right{display:flex;gap:8px;align-items:center}.btn{border:1px solid #2b4166;background:#111d31;color:#dce5f5;border-radius:9px;padding:10px 13px}.btn:hover{border-color:#5475b5}.btn.primary{background:linear-gradient(135deg,#6584ff,#4966e9);border-color:#7390ff;color:white;box-shadow:0 8px 25px #4e6cff33}.btn.danger{border-color:#71313a;background:#30141a}.search{width:260px;background:#0c1525;border:1px solid var(--line);color:white;border-radius:9px;padding:10px 12px}.tablewrap{overflow:auto}.table{width:100%;border-collapse:collapse}.table th,.table td{padding:12px 10px;border-bottom:1px solid #1c2a42;text-align:left;white-space:nowrap}.table th{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:#71809a}.table tr:hover td{background:#101b2e}.pill{display:inline-flex;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:800;border:1px solid #29405f}.pill.green{color:#5de0ae;background:#0c2a21;border-color:#175e45}.pill.red{color:#ff8991;background:#32151a;border-color:#6a2931}.pill.amber{color:#ffd477;background:#302410;border-color:#634b1b}.pill.blue{color:#8fb0ff;background:#121f3c;border-color:#2b4680}
.list{display:flex;flex-direction:column;gap:8px}.row{display:flex;justify-content:space-between;gap:12px;align-items:center;border:1px solid #1e2c44;background:#0b1424;border-radius:10px;padding:12px}.row strong{display:block}.row small{color:#7f8da4}.empty{padding:40px;text-align:center;color:#718099}
.modal{position:fixed;inset:0;background:#0009;display:grid;place-items:center;z-index:20;padding:20px}.modalbox{width:min(760px,100%);max-height:90vh;overflow:auto;background:#0b1423;border:1px solid #2b4166;border-radius:16px;box-shadow:0 30px 100px #000b;padding:22px}.modalhead{display:flex;justify-content:space-between;align-items:center}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.field{display:flex;flex-direction:column;gap:6px}.field.full{grid-column:1/-1}.field label{color:#8795ac;font-size:11px}.field input,.field select,.field textarea{background:#08111f;border:1px solid #263a5b;color:white;border-radius:8px;padding:10px}.field textarea{min-height:100px;resize:vertical}.modalfoot{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}
.hero{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:20px}.hero-actions{display:flex;gap:8px}.dispatch{display:grid;grid-template-columns:1.3fr .9fr;gap:12px}.busrow{display:grid;grid-template-columns:1.3fr .8fr .8fr .7fr;align-items:center;gap:10px}.incident{border-left:3px solid var(--amber)}.incident.high{border-left-color:var(--red)}.timeline{position:relative;padding-left:22px}.timeline:before{content:"";position:absolute;left:7px;top:0;bottom:0;width:1px;background:#29405f}.eventline{position:relative;margin-bottom:17px}.eventline:before{content:"";position:absolute;left:-19px;top:5px;width:9px;height:9px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px #18284a}.kpi{font-size:12px;color:#9aa7bb}.progress{height:7px;border-radius:999px;background:#18243a;overflow:hidden}.progress>i{display:block;height:100%;background:linear-gradient(90deg,#4d72ff,#43c9ff);border-radius:inherit}
.login{min-height:100vh;display:grid;place-items:center;padding:20px}.loginbox{width:min(420px,100%);padding:30px}.loginbox h1{margin:0 0 8px}.loginbox p{color:var(--muted)}.loginbox .field{margin:12px 0}
.toast{position:fixed;right:20px;bottom:20px;z-index:50;background:#102039;border:1px solid #34537f;border-radius:10px;padding:12px 15px;box-shadow:var(--shadow);animation:toast-in .18s ease-out}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.btn:disabled{opacity:.55;cursor:not-allowed}
.modal{animation:fade-in .12s ease-out}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
.content{animation:page-in .16s ease-out}
@keyframes page-in{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}}
@media(max-width:1050px){.grid4{grid-template-columns:repeat(2,1fr)}.grid2,.dispatch{grid-template-columns:1fr}.shell{grid-template-columns:72px 1fr}.side .nav span,.sidefoot,.brand span{display:none}.brand{justify-content:center}.content{padding:22px}}
@media(max-width:700px){.topbar{padding:0 14px}.content{padding:16px}.grid4,.grid3{grid-template-columns:1fr}.formgrid{grid-template-columns:1fr}.field.full{grid-column:auto}.search{width:160px}.busrow{grid-template-columns:1fr 1fr}}
.table-actions,.row-actions{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.btn.mini{padding:6px 9px;font-size:11px}.loading{min-height:180px;display:grid;place-items:center}.fieldhelp{color:#6f809a}.export-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.modalbox.wide{width:min(980px,100%)}.modalbox.compact{width:min(520px,100%)}.toast.success{border-color:#1d6a4d;background:#0b2a21}.toast.error{border-color:#6d2932;background:#32151a}.toast.info{border-color:#34537f;background:#102039}.row p{margin:8px 0 0}.table td{vertical-align:middle}@media(max-width:800px){.export-grid{grid-template-columns:1fr}.hero{align-items:flex-start;flex-direction:column}.hero-actions{width:100%;flex-wrap:wrap}.hero-actions .btn{flex:1}.topbar{height:60px}.title{font-size:25px}}