*{box-sizing:border-box}html,body{height:100%;margin:0}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:#020711;color:#eef7ff;overflow:hidden}button,input{font:inherit}button{cursor:pointer}.svg-defs{position:absolute}.ui-icon,.square-btn svg,.icon-btn svg,.nav-item svg,.map-controls svg,.vehicle-popup svg,.device-icon svg,.more-icon,.chevron-icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.app-shell{height:100vh;display:grid;grid-template-columns:330px 1fr;grid-template-rows:82px 1fr}.topbar{grid-column:1/3;display:flex;align-items:center;justify-content:space-between;padding:0 26px;background:linear-gradient(180deg,#05101c,#030a12);border-bottom:1px solid rgba(68,145,208,.14);z-index:20}.brand{display:flex;align-items:center;gap:20px}.brand-logo{width:155px;max-height:56px;object-fit:contain}.tagline{font-size:10px;letter-spacing:.30em;color:#86b9e4;white-space:nowrap}.top-actions{display:flex;align-items:center;gap:12px}.search{width:410px;height:48px;border:1px solid rgba(47,145,221,.5);border-radius:12px;background:#061522;display:grid;grid-template-columns:42px 1fr 42px;align-items:center;padding-left:12px}.search input{border:0;outline:0;background:transparent;color:#fff}.search input::placeholder{color:#91a9bb}.icon-btn,.square-btn{border:1px solid rgba(59,145,211,.26);background:#061522;color:#dbeaf5;border-radius:11px;display:grid;place-items:center}.icon-btn{width:36px;height:36px}.square-btn{width:48px;height:48px}.profile{display:flex;align-items:center;gap:9px}.avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#102a41;border:1px solid rgba(86,153,207,.25);font-weight:700}.chevron-icon{width:16px;height:16px;color:#93acc0}.sidebar{grid-column:1;grid-row:2;display:flex;flex-direction:column;background:linear-gradient(180deg,#071421,#030b13);border-right:1px solid rgba(57,139,203,.13);z-index:10}.device-list{padding:18px 13px}.device-card{width:100%;min-height:72px;border-radius:14px;border:1px solid transparent;background:transparent;color:#eef7ff;display:grid;grid-template-columns:52px 1fr 24px;align-items:center;padding:0 12px;text-align:left;margin-bottom:8px}.device-card.active{border-color:rgba(242,138,42,.9);background:linear-gradient(135deg,rgba(23,40,57,.96),rgba(7,20,31,.95));box-shadow:0 0 18px rgba(242,138,42,.16)}.device-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#12283b;border:1px solid rgba(86,154,209,.16);color:#d8e8f4}.device-icon svg{width:24px;height:24px}.device-name{font-size:15px;font-weight:700}.device-status{font-size:13px;margin-top:2px}.stale{color:#f28a2a}.offline{color:#ff5151}.more-icon{color:#91a9bc}.side-nav{margin-top:auto;padding:8px 13px;border-top:1px solid rgba(59,135,193,.1)}.nav-item{width:100%;height:50px;border:0;border-radius:11px;background:transparent;color:#9db4c6;display:grid;grid-template-columns:40px 1fr;align-items:center;text-align:left;padding:0 14px}.nav-item.active{color:#fff;border:1px solid rgba(242,138,42,.55);background:linear-gradient(90deg,rgba(95,48,20,.55),rgba(8,20,31,.8))}.nav-item.active svg{color:#f28a2a}.sidebar-footer{height:72px;padding:10px 24px;position:relative;display:flex;align-items:flex-start;gap:12px}.sidebar-footer img{width:85px}.sidebar-footer span{font-size:8px;letter-spacing:.24em;color:#73afe2;margin-top:15px}.accent-line{position:absolute;left:26px;bottom:8px;width:250px;height:2px;background:linear-gradient(90deg,transparent,#2f93ff 28%,#f28a2a 92%,transparent);transform:rotate(-7deg);transform-origin:left}.map-area{grid-column:2;grid-row:2;position:relative;overflow:hidden}.map-area #map{position:absolute;inset:0}.maplibregl-map{background:#07111b}.maplibregl-canvas{outline:none}.maplibregl-ctrl-logo,.maplibregl-ctrl-attrib{opacity:.45}.map-controls{position:absolute;top:28px;right:24px;width:50px;background:rgba(4,15,26,.94);border:1px solid rgba(54,145,214,.45);border-radius:12px;overflow:hidden;z-index:5;box-shadow:0 16px 36px rgba(0,0,0,.3)}.map-controls button{width:100%;height:50px;border:0;border-bottom:1px solid rgba(57,139,199,.16);background:transparent;color:#d9e9f5;display:grid;place-items:center}.map-controls button:last-child{border-bottom:0}.vehicle-popup{position:absolute;right:11%;bottom:11%;width:330px;padding:17px 20px 15px;border-radius:14px;background:linear-gradient(150deg,rgba(7,25,42,.98),rgba(3,13,23,.98));border:1px solid rgba(47,139,211,.48);box-shadow:0 24px 70px rgba(0,0,0,.42);z-index:6}.close{position:absolute;top:13px;right:14px;border:0;background:transparent;color:#c7d9e7;display:grid;place-items:center}.popup-title{display:flex;gap:12px;align-items:center;margin-bottom:14px}.popup-title h2{margin:0;font-size:18px}.popup-sub{font-size:12px;color:#7594aa;margin-top:2px}.popup-car-badge{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:#0b2237;color:#7dc0ff;border:1px solid rgba(57,149,220,.22)}.popup-car-badge svg{width:24px;height:24px}.metric-row{display:grid;grid-template-columns:20px 96px 1fr;gap:7px;align-items:center;margin:9px 0;font-size:13px}.metric-row svg{width:17px;height:17px;color:#8fb1ca}.metric-row label{color:#90a8bb}.metric-row strong{font-weight:500}.link{color:#3da7ff!important}.details{border:0;background:transparent;color:#3da7ff;padding:6px 0;display:flex;align-items:center;gap:4px;font-weight:600}.details svg{width:15px;height:15px}.popup-actions{display:flex;gap:10px;margin-top:8px}.popup-actions button{width:42px;height:42px;border-radius:50%;border:1px solid rgba(61,143,205,.22);background:#071a2b;color:#cfe1ef;display:grid;place-items:center}.popup-actions button svg{width:18px;height:18px}.popup-actions .danger{color:#ff4a4a}.vehicle-marker{width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,rgba(57,160,255,.45),rgba(10,48,81,.7));box-shadow:0 0 24px rgba(51,155,255,.95);border:1px solid rgba(132,202,255,.55);color:#e8f5ff}.vehicle-marker svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.vehicle-marker-wrap{width:54px;height:54px;display:grid;place-items:center}.maplibregl-popup-content{background:#061727;color:#fff;border:1px solid rgba(55,145,214,.38);border-radius:10px}.maplibregl-popup-tip{border-top-color:#061727!important}.maplibregl-popup-close-button{color:#fff}.map-style-chip{position:absolute;right:86px;top:28px;background:rgba(4,15,26,.95);border:1px solid rgba(54,145,214,.35);border-radius:10px;padding:9px 12px;font-size:12px;color:#a9c0d2;z-index:5;display:none}@media(max-width:1200px){.app-shell{grid-template-columns:290px 1fr}.search{width:340px}.tagline{display:none}.vehicle-popup{right:8%;width:310px}}
.connection-badge{position:fixed;right:18px;bottom:18px;z-index:50;padding:8px 12px;border-radius:999px;font-size:12px;background:rgba(4,15,26,.94);border:1px solid rgba(65,145,209,.35);color:#a9c0d2}
.connection-badge.ok{color:#7cf2b0;border-color:rgba(62,210,130,.35)}
.connection-badge.err{color:#ff8d8d;border-color:rgba(255,90,90,.38)}
.login-overlay{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:rgba(1,5,10,.82);backdrop-filter:blur(12px)}
.login-overlay.hidden{display:none}
.login-card{width:min(420px,calc(100vw - 36px));padding:30px;border-radius:18px;background:linear-gradient(160deg,rgba(8,27,44,.99),rgba(3,13,23,.99));border:1px solid rgba(55,145,214,.42);box-shadow:0 30px 90px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:10px}
.login-logo{width:150px;margin-bottom:4px}.login-card h2{margin:4px 0 0;font-size:22px}.login-card p{margin:0 0 12px;color:#8facbf;font-size:14px}
.login-card label{font-size:12px;color:#a9c0d2}.login-card input{height:46px;border-radius:10px;border:1px solid rgba(61,148,216,.32);background:#061522;color:#fff;padding:0 13px;outline:none}
.login-submit{margin-top:10px;height:48px;border:0;border-radius:10px;color:#fff;font-weight:800;background:linear-gradient(90deg,#e77b1e,#ff9d3e)}
.login-error{min-height:18px;color:#ff7777;font-size:13px}.device-card.filtered-out{display:none}.device-status.online{color:#65dfa1}.device-status.moving{color:#58b7ff}

.module-panel{position:absolute;inset:0;z-index:8;background:linear-gradient(145deg,rgba(3,12,21,.985),rgba(4,18,31,.985));padding:28px 30px 32px;overflow:auto}
.module-panel.hidden,.module-view.hidden{display:none}
.module-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.module-kicker{font-size:10px;letter-spacing:.35em;color:#f28a2a;font-weight:800}
.module-head h1{margin:4px 0 0;font-size:28px}
.module-close{width:44px;height:44px;border-radius:11px;border:1px solid rgba(58,145,211,.28);background:#071929;color:#dbeaf5;display:grid;place-items:center}
.module-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8}
.report-toolbar{display:grid;grid-template-columns:1.2fr 1fr 1fr auto;gap:12px;align-items:end;margin-bottom:18px}
.report-toolbar label{display:flex;flex-direction:column;gap:6px;color:#8fa9bc;font-size:12px}
.report-toolbar select,.report-toolbar input,.setting-card select{height:44px;border-radius:10px;border:1px solid rgba(57,145,212,.28);background:#061522;color:#fff;padding:0 12px}
.primary-btn{height:44px;border:0;border-radius:10px;padding:0 18px;font-weight:800;color:#fff;background:linear-gradient(90deg,#e87e20,#ff9e3d)}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.stat-card,.table-card,.setting-card,.account-card{background:linear-gradient(150deg,rgba(7,25,42,.96),rgba(4,14,24,.96));border:1px solid rgba(52,137,203,.24);border-radius:14px}
.stat-card{padding:18px}.stat-card span{display:block;color:#829eb3;font-size:12px;margin-bottom:7px}.stat-card strong{font-size:22px}
.table-card{overflow:hidden}.table-title{padding:16px 18px;border-bottom:1px solid rgba(56,139,202,.17);font-weight:700}.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse;font-size:13px}th,td{padding:13px 16px;text-align:left;border-bottom:1px solid rgba(58,137,197,.11)}th{color:#7fa2bb;font-size:11px;text-transform:uppercase;letter-spacing:.06em}td{color:#e2edf5}.empty-cell{text-align:center;color:#7892a6;padding:28px}
.settings-grid{display:grid;gap:12px;max-width:850px}.setting-card{padding:18px;display:flex;justify-content:space-between;gap:24px;align-items:center}.setting-card h3{margin:0 0 5px}.setting-card p{margin:0;color:#809caf;font-size:13px}
.switch input{display:none}.switch span{display:block;width:50px;height:28px;border-radius:99px;background:#102536;position:relative;border:1px solid rgba(60,142,204,.22)}.switch span:after{content:"";position:absolute;width:22px;height:22px;border-radius:50%;left:3px;top:2px;background:#91a8b8;transition:.2s}.switch input:checked+span{background:#3b6d25;border-color:#69d59a}.switch input:checked+span:after{left:24px;background:#75e6a8}
.account-card{max-width:650px;padding:24px;display:flex;gap:16px;align-items:center}.account-avatar{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:#102b42;border:1px solid rgba(76,153,210,.26);font-size:22px;font-weight:800}.account-card h2{margin:0 0 5px}.account-card p{margin:0;color:#829fb4}.account-actions{margin-top:16px}.danger-btn{height:44px;border-radius:10px;border:1px solid rgba(255,77,77,.4);background:rgba(94,19,19,.3);color:#ff8585;padding:0 18px;font-weight:800}
@media(max-width:1100px){.report-toolbar{grid-template-columns:1fr 1fr}.stats-grid{grid-template-columns:1fr 1fr}}
/* top-down vehicle marker */
.vehicle-marker{border-radius:18px!important;width:48px!important;height:58px!important;background:radial-gradient(circle at 50% 45%,rgba(58,160,255,.32),rgba(5,32,57,.82))!important}
.vehicle-marker .top-car-svg{width:30px!important;height:44px!important}

/* ===== V5 layout correction: modules live INSIDE the map workspace ===== */
.module-panel{
  position:absolute!important;
  inset:0!important;
  z-index:12!important;
  padding:26px 28px 30px!important;
  overflow:auto!important;
  background:linear-gradient(145deg,rgba(3,12,21,.995),rgba(4,18,31,.995))!important;
}
.module-head{margin-bottom:22px!important}
.report-toolbar{grid-template-columns:minmax(180px,1.1fr) minmax(220px,1fr) minmax(220px,1fr) auto!important}
.stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.settings-grid{width:100%!important;max-width:980px!important}
.setting-card{width:100%!important}
.account-card{max-width:760px!important}

/* Layer chooser */
.layer-menu{
  position:absolute;top:28px;right:86px;z-index:20;width:390px;
  border-radius:16px;padding:14px;
  background:linear-gradient(155deg,rgba(5,23,39,.985),rgba(3,13,23,.985));
  border:1px solid rgba(62,151,218,.42);
  box-shadow:0 24px 70px rgba(0,0,0,.45)
}
.layer-menu.hidden{display:none}
.layer-menu-head{display:flex;justify-content:space-between;align-items:center;padding:4px 4px 12px}
.layer-menu-head span{display:block;color:#f28a2a;font-size:9px;letter-spacing:.26em;font-weight:800}
.layer-menu-head strong{display:block;margin-top:3px;font-size:16px}
.layer-menu-head button{width:34px;height:34px;border-radius:9px;border:1px solid rgba(64,146,208,.24);background:#071827;color:#d8e9f4;display:grid;place-items:center}
.layer-menu-head button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8}
.layer-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.layer-option{
  min-height:68px;border-radius:11px;border:1px solid rgba(57,139,202,.16);
  background:#061522;color:#dbe9f3;display:grid;grid-template-columns:48px 1fr;
  gap:10px;align-items:center;padding:8px;text-align:left
}
.layer-option:hover{border-color:rgba(65,157,226,.55);background:#082037}
.layer-option.active{border-color:#f28a2a;box-shadow:0 0 0 1px rgba(242,138,42,.12),0 0 16px rgba(242,138,42,.10)}
.layer-option strong{display:block;font-size:12px}
.layer-option small{display:block;margin-top:3px;color:#7896ab;font-size:10px}
.layer-preview{width:48px;height:48px;border-radius:8px;border:1px solid rgba(255,255,255,.09);display:block}
.layer-preview.road{background:linear-gradient(35deg,#dff2d4 0 45%,#f3efe9 45% 62%,#cfe8fb 62%)}
.layer-preview.satellite{background:linear-gradient(135deg,#234228,#59643e 38%,#293e54 39% 55%,#6b7250 56%)}
.layer-preview.hybrid{background:linear-gradient(135deg,#1d3824,#5a6840 42%,#172f47 43% 60%,#767354 61%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.layer-preview.osm{background:linear-gradient(30deg,#d5edcf,#f7f1dc 50%,#c6e4f4)}
.layer-preview.topo{background:repeating-radial-gradient(ellipse at 30% 70%,#d9e8bd 0 3px,#b3cc8a 4px 6px,#dce8c4 7px 10px)}
.layer-preview.dark{background:linear-gradient(135deg,#101820,#1b2a36 48%,#223d4d)}
.layer-preview.light{background:linear-gradient(135deg,#eef1f3,#dfe4e7 50%,#cfd8dd)}
.layer-preview.free{background:linear-gradient(135deg,#0b2434,#17445d 50%,#18364d)}
.layer-note{padding:10px 4px 2px;color:#66869d;font-size:10px;line-height:1.4}

@media(max-width:1200px){
  .report-toolbar{grid-template-columns:1fr 1fr!important}
  .stats-grid{grid-template-columns:1fr 1fr!important}
  .layer-menu{width:350px}
}

/* Make module content start cleanly; no ghost map/popup underneath */
.module-panel:not(.hidden) ~ .vehicle-popup{visibility:hidden}