@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root{
  color-scheme:dark;--bg:#08111f;--sidebar:#0b1727;--panel:#101e30;--panel-2:#14253a;
  --line:#24374e;--line-soft:#1b2c41;--text:#edf3fb;--muted:#91a4bb;--muted-2:#647b96;
  --red:#f0525f;--red-soft:#4b202b;--green:#2dd4a0;--green-soft:#153b37;
  --blue:#6aa9ff;--blue-soft:#1a3555;--amber:#f5b84d;--violet:#b49aff;
  --shadow:0 18px 48px #02081255;
}
*{box-sizing:border-box}
html{min-width:320px;background:var(--bg)}
body{margin:0;background:radial-gradient(ellipse at 75% -15%,#142945 0,transparent 40%),var(--bg);color:var(--text);font-family:'DM Sans',Inter,system-ui,sans-serif;min-height:100vh}
button,input,textarea,select{font:inherit}
button{color:inherit}
.app-shell{min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:252px;background:linear-gradient(180deg,#0d1b2d,#091523);border-right:1px solid var(--line);padding:25px 16px 18px;display:flex;flex-direction:column;z-index:100}
.brand{display:flex;align-items:center;gap:12px;padding:0 9px 35px}
.brand-mark{width:43px;height:43px;border-radius:13px;background:linear-gradient(145deg,#ff6570,#a51f37);display:grid;place-items:center;font:700 18px 'Space Grotesk';box-shadow:0 8px 24px #ef444433}
.brand b{display:block;font:700 17px 'Space Grotesk';letter-spacing:.3px}
.brand small{font-size:9px;letter-spacing:1.7px;color:var(--muted)}
.side-label,.eyebrow{font-size:10px;letter-spacing:1.8px;color:#7890ac;font-weight:700}
.side-label{padding:0 11px 12px}
.sidebar nav{display:grid;gap:5px}
.nav-item{border:1px solid transparent;background:transparent;color:#9aacc1;text-align:left;padding:12px 12px;border-radius:10px;cursor:pointer;display:flex;gap:12px;align-items:center;font-size:13px;transition:.16s ease}
.nav-item>span:nth-child(2){font-weight:600}
.nav-icon{width:20px;text-align:center;font-size:17px;color:#7d94ad}
.nav-item:hover,.nav-item.active{background:#182a40;color:#fff;border-color:#253b54}
.nav-item.active{box-shadow:inset 3px 0 var(--red)}
.nav-item.active .nav-icon{color:#ff7c85}
.nav-count{margin-left:auto;background:#49212b;color:#ff9aa1;padding:2px 7px;border-radius:20px;font-size:10px}
.sidebar-bottom{margin-top:auto;border:1px solid var(--line);background:#0e1d2e;border-radius:11px;padding:13px 11px;font-size:10px;color:var(--muted);display:grid;grid-template-columns:10px 1fr;align-items:center;gap:7px}
.sidebar-bottom b{grid-column:2;color:#f7c96b;font-size:9px;letter-spacing:1.2px}
.sidebar-bottom small{grid-column:2;color:#647d98;font-size:9px}
.pulse-dot,.live-chip i{width:7px;height:7px;border-radius:50%;background:var(--green);display:inline-block;box-shadow:0 0 10px #2dd4a0aa}
.main{margin-left:252px;min-height:100vh;padding:0 32px;max-width:1800px}
.topbar{height:88px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:15px}
.topbar-title h1{font:600 20px 'Space Grotesk';margin:5px 0 0;letter-spacing:.2px}
.top-actions{margin-left:auto;display:flex;align-items:center;gap:18px;color:var(--muted);font-size:11px}
.live-chip{font-size:9px;letter-spacing:1.3px;color:#9be5c9;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.operator{border:1px solid #30445d;border-radius:8px;background:#14263b;color:#dce8f6;padding:9px 12px;font-size:9px;font-weight:700;letter-spacing:1.2px;cursor:pointer}
.menu-btn{display:none}
.page{display:none;padding:28px 0 40px}
.page.active{display:block;animation:pageIn .18s ease}
@keyframes pageIn{from{opacity:.65;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
.welcome,.section-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:23px}
.welcome h2,.section-head h2{font:600 23px 'Space Grotesk';margin:7px 0}
.welcome p,.section-head p{color:var(--muted);font-size:12px;margin:0;line-height:1.6}
.section-head h2{margin-top:0}
.btn{border:1px solid transparent;border-radius:8px;padding:11px 15px;font-weight:700;font-size:10px;letter-spacing:.45px;cursor:pointer;transition:filter .15s,transform .15s,background .15s;white-space:nowrap}
.btn:hover{filter:brightness(1.13);transform:translateY(-1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn.danger{background:#c83749;color:white;box-shadow:0 7px 20px #c8374928}
.btn.primary{background:#2868bb;color:white}
.btn.secondary{background:#172a40;color:#d8e4f2;border-color:#2b415b}
.full{width:100%}
.section-actions{display:flex;gap:8px;flex-wrap:wrap}
.stats-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-bottom:17px}
.stat,.panel{background:linear-gradient(145deg,#122239,#0e1b2c);border:1px solid var(--line);border-radius:13px;box-shadow:0 6px 24px #02081216}
.stat{padding:16px 17px;position:relative;min-height:119px;overflow:hidden}
.stat:after{content:"";position:absolute;width:88px;height:88px;border-radius:50%;right:-34px;bottom:-46px;background:#ffffff06}
.stat span{font-size:9px;letter-spacing:1.1px;color:#9bb0c8;font-weight:700}
.stat strong{display:block;font:700 29px 'Space Grotesk';margin:9px 0 2px}
.stat small{font-size:10px;color:var(--muted)}
.stat-icon{float:right;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:16px}
.stat-icon.blue{background:#1b3655;color:#7eb9ff}.stat-icon.green{background:#173d37;color:#54e0b4}
.stat-icon.slate{background:#29384a;color:#aebdd0}.stat-icon.red{background:#4a222c;color:#ff818b}
.stat-icon.violet{background:#302a4d;color:#c1aaff}.stat-icon.amber{background:#49381f;color:#f7c66c}
.green{color:var(--green)}.red{color:#ff6974}
.content-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.overview-grid{align-items:stretch}
.panel{padding:18px;margin-bottom:14px}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.panel-head h3{margin:0;font:600 14px 'Space Grotesk'}
.panel-head p{margin:5px 0 0;color:var(--muted);font-size:10px;line-height:1.5}
.text-btn{border:0;background:none;color:#83b8ff;font-size:10px;font-weight:700;cursor:pointer}
.device-list,.activity-feed,.message-list{display:grid;gap:8px}
.device-row,.activity-row,.message-card,.audio-card,.location-row,.simulation-row{padding:11px;background:#14253a;border:1px solid #243951;border-radius:9px;display:flex;align-items:center;gap:11px;min-width:0}
.device-icon{width:33px;height:33px;flex:0 0 33px;border-radius:9px;background:#203b58;display:grid;place-items:center;color:#8fc3ff}
.device-info{flex:1;min-width:0}
.device-info b{display:block;font-size:11px;overflow-wrap:anywhere}
.device-info small,.activity-row small{display:block;color:var(--muted);font-size:9px;margin-top:3px;overflow-wrap:anywhere}
.device-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:5px;color:#8fa5bd;font-size:9px}
.status{font-size:8px;font-weight:800;letter-spacing:.7px;white-space:nowrap}
.status.online{color:var(--green)}.status.offline{color:#91a0b3}
.activity-row{align-items:flex-start}
.activity-mark{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#60a5fa;margin-top:4px}
.activity-mark.red{background:#ef5966}.activity-mark.green{background:#2dd4a0}.activity-row b{font-size:10px}
.empty{color:var(--muted);font-size:11px;padding:21px;text-align:center;line-height:1.6}
.priority-note{margin-top:1px}
.priority-note>p{font-size:11px;color:#a9bbcf;line-height:1.7;margin:0}
.rule-chip,.demo-label{border:1px solid #35527a;background:#162d4b;color:#9bc4ff;border-radius:30px;padding:5px 9px;font-size:8px;font-weight:800;letter-spacing:1px;white-space:nowrap}
.section-head{margin-bottom:17px}
.map-legend{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin:0 0 10px;color:#9aacc1;font-size:9px}
.map-legend>span{display:inline-flex;align-items:center;gap:6px}
.legend-dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.legend-dot.real{background:#5aa5ff}.legend-dot.online{background:#2dd4a0}.legend-dot.offline{background:#8a97a8}
.map-disclaimer{margin-left:auto;color:#7189a4}
.map-wrap{position:relative;border:1px solid #2a4058;border-radius:13px;overflow:hidden;background:#101e30;box-shadow:var(--shadow)}
#map{height:490px;width:100%;background:#15263a}
.map-status{position:absolute;z-index:500;left:12px;bottom:12px;max-width:min(480px,calc(100% - 24px));padding:8px 11px;background:#0a1726e8;border:1px solid #38516b;border-radius:8px;color:#d0deed;font-size:9px;line-height:1.5;pointer-events:none}
.map-status.hidden{display:none}
.leaflet-container{font-family:'DM Sans',sans-serif;background-color:#14243a;background-image:linear-gradient(#263d55 1px,transparent 1px),linear-gradient(90deg,#263d55 1px,transparent 1px);background-size:48px 48px}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#122239;color:#eaf1f9}
.leaflet-popup-content{font-size:11px;line-height:1.6;min-width:190px}
.leaflet-popup-content b{color:#fff}
.leaflet-popup-content .popup-muted{color:#a4b7cb;font-size:10px}
.leaflet-control-zoom a{background:#13263b!important;color:#eaf2fb!important;border-color:#38516b!important}
.map-devices-panel{margin-top:14px}
.subtle-count{font-size:9px;color:#8da5bf}
.location-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.location-row{display:grid;grid-template-columns:1fr auto;gap:5px 10px;align-items:start}
.location-row b{font-size:10px;overflow-wrap:anywhere}
.location-row small{grid-column:1/-1;color:var(--muted);font-size:9px}
.location-coords{font-size:9px;color:#b5c8dc;text-align:right}
.location-details{display:flex;gap:8px;flex-wrap:wrap;color:#8fa5bd;font-size:9px}
.simulation-panel{margin-top:14px;border-color:#514329;background:linear-gradient(145deg,#211f1a,#121d2b)}
.simulation-controls{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.demo-label{background:#49361c;border-color:#745729;color:#ffcf76}
.simulation-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.simulation-row{border-color:#514329;background:#262a2c}
.sim-icon{font-size:20px;width:30px;text-align:center}
.sim-info{min-width:0;flex:1}
.sim-info b{display:block;font-size:10px}
.sim-info small{display:block;color:#c2b38f;font-size:9px;margin-top:3px}
.sim-status{font-size:8px;color:#ffcf76;font-weight:800;letter-spacing:.6px}
.vehicle-marker{background:#302719;border:2px solid #ffca6a;border-radius:50%;width:32px;height:32px;display:grid;place-items:center;font-size:17px;box-shadow:0 2px 10px #0008}
.real-device-marker{background:#133b5f;border:2px solid #8cc5ff;border-radius:50%;width:30px;height:30px;display:grid;place-items:center;color:#fff;font-size:14px;box-shadow:0 2px 10px #0008}
.sos-key{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:13px}
.sos-key-note{margin-left:auto;color:var(--muted);font-size:9px}
.sos-list{display:grid;gap:10px}
.sos-card{background:linear-gradient(145deg,#14243a,#101d2e);border:1px solid var(--line);border-radius:12px;padding:15px}
.sos-card[data-level="CRITICAL"]{border-left:3px solid #f0525f}
.sos-card[data-level="HIGH"]{border-left:3px solid #f5a64d}
.sos-card[data-level="MEDIUM"]{border-left:3px solid #e7c65a}
.sos-card[data-level="LOW"]{border-left:3px solid #5b9fe7}
.sos-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.sos-title{font-size:12px;font-weight:700}
.sos-sub{font-size:9px;color:var(--muted);margin-top:4px;line-height:1.5}
.sos-message{font-size:12px;line-height:1.6;margin:11px 0;color:#e8eff8;white-space:pre-wrap;overflow-wrap:anywhere}
.priority-pill{display:inline-flex;align-items:center;justify-content:center;padding:5px 8px;border-radius:5px;font-size:8px;font-weight:800;letter-spacing:.8px;white-space:nowrap}
.priority-pill.critical{background:#55232c;color:#ff9ba3}.priority-pill.high{background:#50331d;color:#ffd08b}
.priority-pill.medium{background:#4b4420;color:#f3df8a}.priority-pill.low{background:#1c3b5c;color:#a8d1ff}
.sos-facts{display:flex;gap:8px 15px;flex-wrap:wrap;color:#a6bad0;font-size:9px;margin:9px 0}
.sos-reasons{margin:10px 0 0;padding:10px 12px;background:#0c1928;border:1px solid #24364b;border-radius:8px}
.sos-reasons summary{font-size:9px;color:#9fc6f4;cursor:pointer;font-weight:700}
.sos-reasons ul{margin:8px 0 0;padding-left:17px;color:#9eafc4;font-size:9px;line-height:1.7}
.sos-actions{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.sos-actions .btn{padding:8px 11px;font-size:9px}
.sos-state{font-size:8px;font-weight:800;letter-spacing:.7px;color:#a5bad0}
.sos-state.resolved{color:#7bd9b4}.sos-state.acknowledged{color:#a5caff}
.compose{display:flex;gap:9px;margin-bottom:15px}
.compose input,.modal-card input,.modal-card textarea,.modal-card select{min-width:0;background:#0b1828;border:1px solid #2a4058;color:var(--text);border-radius:8px;padding:11px 12px;outline:none}
.compose input:focus,.modal-card input:focus,.modal-card textarea:focus,.modal-card select:focus{border-color:#5e9ce5;box-shadow:0 0 0 3px #5e9ce522}
.compose input:first-child{width:170px}.compose input:nth-child(2){flex:1}
.message-card{display:block}
.message-meta{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:9px;margin-bottom:8px}
.message-card p{font-size:11px;line-height:1.6;margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.message-tag{display:inline-block;margin-left:6px;padding:3px 6px;border-radius:4px;background:#48252d;color:#ffabb1;font-size:8px;font-weight:800}
.audio-card{display:block}
.audio-card b{font-size:11px;overflow-wrap:anywhere}
.audio-card audio{width:100%;margin-top:10px}
.audio-card a{display:inline-block;color:#86b7ff;font-size:10px;margin-top:7px}
.call-panel{text-align:center;padding:35px}
.call-orb{width:78px;height:78px;border-radius:50%;background:#193c36;border:1px solid #286d58;color:#56d69b;font-size:31px;display:grid;place-items:center;margin:0 auto 17px}
.call-panel h2{font:600 20px 'Space Grotesk'}
.call-panel p{color:var(--muted);font-size:11px;line-height:1.6}
.call-controls{display:flex;justify-content:center;gap:9px;margin:23px 0}
.notice{max-width:690px;margin:20px auto 0;padding:12px;background:#172a40;border:1px solid #29425d;border-radius:8px;line-height:1.7}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;min-width:800px;font-size:10px}
th{text-align:left;color:#91a6be;font-size:8px;letter-spacing:1px;padding:11px;border-bottom:1px solid #2a4058}
td{padding:12px 11px;border-bottom:1px solid #20344b;color:#d7e2ee;vertical-align:middle}
td b{display:block;font-size:10px}
td small{display:block;color:var(--muted);font-size:9px;margin-top:4px}
.table-actions{display:flex;gap:8px;flex-wrap:wrap}
.modal{position:fixed;inset:0;background:#020812d9;display:none;align-items:center;justify-content:center;padding:18px;z-index:1000;backdrop-filter:blur(5px)}
.modal.show{display:flex}
.modal-card{width:min(470px,100%);background:#122239;border:1px solid #354b64;border-radius:15px;padding:24px;box-shadow:0 25px 90px #000b}
.modal-card h2{font:600 20px 'Space Grotesk';margin:9px 0}
.modal-card p{color:var(--muted);font-size:11px;line-height:1.6}
.modal-card label{display:grid;gap:7px;font-size:10px;color:#a9bad0;margin:14px 0}
.modal-card input,.modal-card textarea,.modal-card select{width:100%}
.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:16px}
.modal-alert{color:#ff7e88;font-size:9px;letter-spacing:1.5px;font-weight:800}
.modal-card small{display:block;color:#ff9da5;margin-top:10px;font-size:10px}
.toast{position:fixed;right:20px;bottom:20px;z-index:2000;background:#18314c;border:1px solid #42617e;color:#edf5ff;padding:12px 15px;border-radius:9px;box-shadow:var(--shadow);font-size:11px;max-width:min(420px,calc(100vw - 40px))}
footer{padding:20px 0;color:#617993;font-size:9px;border-top:1px solid var(--line);margin-top:8px}
@media(max-width:1100px){.main{padding:0 22px}.sidebar{width:225px}.main{margin-left:225px}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:780px){.sidebar{transform:translateX(-100%);transition:transform .2s;width:260px;box-shadow:var(--shadow)}.sidebar.open{transform:translateX(0)}.main{margin:0;padding:0 16px}.menu-btn{display:block;background:#15273b;border:1px solid #2a4058;color:#fff;border-radius:8px;width:36px;height:36px;cursor:pointer}.topbar{height:74px}.top-actions{gap:9px}.top-actions #clock{display:none}.content-grid{grid-template-columns:1fr}.section-head,.welcome{align-items:flex-start;flex-direction:column}.section-actions{width:100%}.map-disclaimer{margin-left:0}.location-list,.simulation-list{grid-template-columns:1fr}.sos-key-note{margin-left:0;width:100%}}
@media(max-width:520px){.main{padding:0 12px}.topbar{gap:9px}.topbar-title h1{font-size:17px}.eyebrow{font-size:8px}.top-actions .live-chip{display:none}.operator{padding:8px 9px;font-size:8px}.stats-grid{grid-template-columns:1fr 1fr;gap:8px}.stat{padding:13px;min-height:108px}.stat strong{font-size:24px}.stat span{font-size:8px;letter-spacing:.6px}.stat small{font-size:9px}.stat-icon{width:27px;height:27px}.panel{padding:14px}.compose{flex-wrap:wrap}.compose input:first-child{width:100%}.compose input:nth-child(2){flex:1 1 100%}.compose .btn{width:100%}.call-controls{flex-wrap:wrap}#map{height:390px}.map-legend{gap:9px}.map-status{font-size:8px}.simulation-controls{width:100%;justify-content:space-between}.sos-top{flex-direction:column}.sos-facts{gap:7px 11px}}