:root{--ink:#172c32;--muted:#6e7d82;--teal:#087f70;--teal-light:#e5f3ee;--border:#dfe7e6;--bg:#f5f7f6;--nav:#102b31;--white:#fff;font:14px/1.5 "Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--bg);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{outline-offset:4px}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}a{color:var(--teal);text-decoration:none}h1,h2,h3,p{margin:0}input,select{min-width:0}button{transition:background .15s,box-shadow .15s}button:hover:not(:disabled){filter:brightness(.96)}[hidden]{display:none!important}.sidebar{width:248px;position:fixed;inset:0 auto 0 0;background:var(--nav);color:#d7e5e6;display:flex;flex-direction:column;padding:30px 20px 18px;z-index:5}.brand{display:flex;gap:12px;align-items:center;color:#fff;font-size:26px;font-weight:650;letter-spacing:-1px}.brand-mark{background:#b8edd9;color:#123c39;display:block;width:41px;height:43px;border-radius:12px;font-size:37px;line-height:37px;text-align:center;position:relative}.brand-mark span{position:absolute;width:8px;height:8px;border-radius:50%;background:#fff;right:4px;top:5px;border:2px solid var(--nav)}.brand-caption{display:block;font-size:8px;letter-spacing:2.2px;color:#a4bdc0;font-weight:500;margin-top:0}.workspace-label{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.6px;color:#92afb2;margin:43px 8px 13px}.workspace-label span{letter-spacing:.5px;color:#bad8cf}.nav-active{background:#214249;border:1px solid #35555b;border-radius:8px;padding:12px 13px;display:flex;gap:12px;align-items:center;color:#fff;font-weight:600}.nav-active>span:first-child{font-size:22px;line-height:1}.nav-dot{margin-left:auto;width:6px;height:6px;background:#b8edd9;border-radius:50%}.devices-heading{display:flex;align-items:center;justify-content:space-between;margin:32px 8px 13px}.devices-heading h2{font-size:13px;font-weight:600}.devices-heading>span{font-size:11px;border:1px solid #456067;padding:0 6px;border-radius:5px}.search-field{display:flex;align-items:center;border:1px solid #466066;border-radius:7px;gap:8px;padding:7px 10px;color:#9fbabd}.search-field input{width:100%;background:none;border:0;color:#fff;font-size:12px;padding:2px 0;outline:none}.search-field input::placeholder{color:#90a9ad}.search-field>span{font-size:20px;line-height:18px}.select-all{font-size:12px;display:flex;align-items:center;gap:9px;margin:18px 7px 12px}.select-all span{margin-left:auto;font-size:10px;color:#a6c3c7}input[type=checkbox]{accent-color:#0f9c86;width:15px;height:15px;cursor:pointer}.devices{overflow-y:auto;flex:1;scrollbar-width:thin;scrollbar-color:#456067 transparent}.device-row{display:flex;gap:9px;padding:9px 6px;align-items:center;border-radius:6px;cursor:pointer}.device-row:hover{background:#1c3b42}.device-row input{flex-shrink:0}.device-row .device-info{flex:1;min-width:0}.device-row strong{font-size:12px;font-weight:500;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.device-row small{font-size:10px;color:#8eafb3;display:block}.device-row .device-total{font-size:10px;color:#a3bdc1}.sidebar-empty{padding:10px 6px;color:#9fbdc1;font-size:12px}.sidebar-footer{display:flex;gap:10px;align-items:center;border-top:1px solid #345057;padding-top:18px;margin-top:16px}.sidebar-footer>div{font-size:10px;color:#9fb9bd}.sidebar-footer strong{display:block;color:#e1eeee;font-size:12px;font-weight:500;margin-top:2px}.connection-dot{height:7px;width:7px;border-radius:50%;background:#96dabc}.read-only{margin-left:auto;font-size:8px;letter-spacing:.5px;color:#aac6ca}.workspace{margin-left:248px}.topbar{height:78px;padding:0 36px;background:#fff;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:12px}.breadcrumb{color:var(--muted)}.slash{margin:0 14px;color:#a6b5b8}.topbar strong{font-weight:600}.topbar-right{display:flex;align-items:center;gap:25px}.timezone{font-size:11px;color:var(--muted)}.account-button{border:0;background:transparent;display:flex;gap:9px;align-items:center;color:var(--ink);font-size:12px;font-weight:600}.avatar{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#ebf0ed;color:var(--teal);font-size:13px}main{padding:34px 36px 16px;max-width:1800px;margin:auto}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:25px}.eyebrow{font-size:9px;font-weight:650;letter-spacing:2px;color:var(--teal);margin-bottom:6px}h1{font-size:34px;font-weight:650;line-height:1.2;letter-spacing:-1.4px}.title-dot{color:var(--teal)}.page-heading p{font-size:12px;color:var(--muted);margin-top:9px}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:6px;padding:10px 16px;font-size:12px;font-weight:600;border:1px solid transparent;white-space:nowrap}.primary{background:var(--teal);color:#fff}.secondary{background:#fff;border-color:var(--border);color:var(--ink)}.mode-notice{display:flex;align-items:center;gap:12px;background:#edf5f1;border:1px solid #d6e7df;border-radius:8px;padding:14px 16px;margin-bottom:24px}.notice-icon{width:26px;height:26px;display:grid;place-items:center;border:1px solid #97bdb0;border-radius:50%;color:var(--teal);font-family:Georgia,serif;font-weight:bold;flex-shrink:0}.mode-notice strong{font-size:12px;font-weight:650}.mode-notice p{color:#5e7771;font-size:11px;margin-top:2px}.text-button{background:transparent;border:0;color:var(--teal);font-size:11px;font-weight:650;padding:7px 0;white-space:nowrap}.mode-notice .text-button{margin-left:auto}.stats{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid var(--border);border-radius:9px;margin-bottom:24px;padding:20px 0}.stat{padding:0 24px;border-left:1px solid var(--border)}.stat:first-child{border:0}.stat>span{font-size:11px;color:#53666b;display:flex;align-items:center;gap:7px}.stat strong{display:block;font-weight:600;font-size:29px;line-height:1.25;margin:8px 0 5px;font-variant-numeric:tabular-nums;letter-spacing:-1px}.stat small{font-size:10px;color:#849094}.dot{height:6px;width:6px;display:inline-block;border-radius:50%}.green{background:#129e7c}.amber{background:#c29a48}.gray{background:#95a6aa}.filters{display:flex;align-items:flex-end;gap:12px;background:#fff;border:1px solid var(--border);padding:17px;border-radius:8px;margin-bottom:24px}.filters label{flex:1;font-size:10px;font-weight:600;color:#6a7b80;display:flex;flex-direction:column;gap:6px}.filters input,.filters select{background:#fff;color:#30464b;border:1px solid #d9e2e1;border-radius:5px;padding:9px 10px;width:100%;height:38px;font-size:11px}.filters .button{height:38px}.results-header{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:17px}.results-header h2{font-size:15px;font-weight:650}.results-header h2 span{font-size:10px;background:#e5ece9;color:#627970;padding:2px 6px;border-radius:4px;margin-left:6px}.results-header p{font-size:10px;color:var(--muted);margin-top:3px}.results-tools{display:flex;gap:15px;align-items:center}.scan-state{font-size:10px;color:#75867f}.view-switch{display:flex;border:1px solid var(--border);border-radius:6px;background:#fff;padding:3px;gap:2px}.view-switch button{border:0;background:none;color:#82928e;font-size:19px;border-radius:3px;line-height:1;padding:5px 8px}.view-switch .selected{background:#edf3f0;color:var(--teal)}.event-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.event-card{background:#fff;border:1px solid var(--border);border-radius:9px;overflow:hidden;text-align:left;padding:0;color:inherit;display:flex;flex-direction:column;min-width:0;box-shadow:0 2px 3px #12332903}.event-card:hover{box-shadow:0 5px 17px #12332912;transform:translateY(-1px);border-color:#abc7bb}.card-preview{aspect-ratio:16/9;background:#dce5e1;position:relative;overflow:hidden;width:100%;display:grid;place-items:center}.card-preview img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}.card-preview::after{content:"";position:absolute;inset:55% 0 0;background:linear-gradient(transparent,#001c244d);pointer-events:none}.preview-placeholder{display:flex;flex-direction:column;align-items:center;gap:8px;color:#7a9590;font-size:11px}.preview-placeholder>span{font-size:28px}.card-topline{position:absolute;top:12px;left:12px;right:12px;display:flex;justify-content:space-between;z-index:1}.badge{font-size:9px;font-weight:600;letter-spacing:.15px;border-radius:4px;padding:4px 7px;display:inline-flex;align-items:center;gap:5px}.badge.ready{color:#236a51;background:#e8f6ec}.badge.image-only{color:#876419;background:#fcf4e3}.badge.pending,.badge.unavailable{color:#9c5d37;background:#fff0e6}.badge.neutral{color:#627671;background:#edf2ef}.file-count{font-size:9px;color:#fff;background:#173936b3;padding:3px 7px;border-radius:4px;height:23px}.play-icon{position:absolute;z-index:1;background:#fffE;border-radius:50%;width:36px;height:36px;color:#21574f;display:grid;place-items:center;font-size:12px;padding-left:2px;box-shadow:0 3px 20px #17332a33}.card-body{padding:15px 16px;width:100%;min-width:0}.card-vehicle{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:5px}.card-vehicle strong{font-size:13px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-arrow{color:#93a59e;font-size:16px}.card-alarm{font-size:11px;color:#778983;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-divider{height:1px;background:#edf1ee;margin:12px 0 10px}.card-bottom{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:10px;color:#7a8985}.card-bottom time{font-variant-numeric:tabular-nums;color:#52665e}.card-bottom .source-tag{font-size:8px;font-weight:600;letter-spacing:.5px}.event-grid.list{grid-template-columns:1fr}.event-grid.list .event-card{flex-direction:row;align-items:center}.event-grid.list .card-preview{width:190px;flex-shrink:0;aspect-ratio:16/9}.event-grid.list .card-divider{margin:7px 0}.empty-state{grid-column:1/-1;background:#fff;border:1px dashed #cbdad2;border-radius:9px;padding:65px 24px;text-align:center;color:#71837b}.empty-state .empty-symbol{font-size:35px;color:#aac2b8;display:block;margin-bottom:12px}.empty-state h3{color:#38584b;font-size:16px;margin-bottom:5px}.empty-state p{font-size:12px;max-width:430px;margin:0 auto}.pagination{display:flex;align-items:center;justify-content:space-between;padding:24px 0;font-size:11px;color:var(--muted)}.pagination>div{display:flex;gap:8px}.page-footer{display:flex;justify-content:space-between;border-top:1px solid var(--border);padding-top:14px;font-size:9px;color:#8a9891}.scan-progress{height:3px;background:#e1ebe5;border-radius:5px;margin-bottom:16px;overflow:hidden}.scan-progress div{height:100%;background:#389e80;transition:width .5s;min-width:4%;width:4%}.error-banner{background:#fff0e8;border:1px solid #edcfbd;color:#884e2e;border-radius:6px;padding:12px 15px;font-size:12px;margin-bottom:18px}dialog{border:1px solid #d6e2dd;border-radius:13px;padding:0;color:var(--ink);box-shadow:0 15px 80px #071e2b44}dialog::backdrop{background:#061f2cd1;backdrop-filter:blur(3px)}.detail-dialog{width:min(1460px,95vw);max-width:95vw;height:94vh;max-height:94vh;background:var(--bg)}.detail-header{display:flex;align-items:center;justify-content:space-between;background:#fff;padding:22px 26px;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:3;gap:15px}.detail-header h2{font-size:21px;letter-spacing:-.4px;font-weight:650}.detail-header p{font-size:11px;color:var(--muted);margin-top:5px}.icon-button{border:1px solid var(--border);background:#fff;border-radius:5px;width:32px;height:32px;display:inline-grid;place-items:center;font-size:20px;color:#52685f;flex-shrink:0}.detail-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr);gap:22px;padding:24px}.detail-main,.detail-side{min-width:0}.player{background:#0b2025;border-radius:9px;aspect-ratio:16/9;display:grid;place-items:center;position:relative;overflow:hidden;color:#c4d5ce}.player video,.player img{width:100%;height:100%;object-fit:contain;position:absolute;inset:0}.player-message{text-align:center;padding:20px;max-width:440px;font-size:12px}.player-message strong{display:block;font-size:17px;color:#e0efe8;margin-bottom:8px}.media-header{display:flex;align-items:center;justify-content:space-between;margin:18px 0 10px}.media-header h3,.info-panel h3,.map-panel h3{font-size:12px;font-weight:650}.media-header h3 span{font-size:10px;color:#7c9086;margin-left:5px}.media-strip{display:flex;gap:8px;overflow-x:auto;padding-bottom:12px;margin-bottom:4px}.media-item{min-width:130px;max-width:170px;border:1px solid var(--border);border-radius:6px;background:#fff;padding:9px 11px;color:#4b6759;text-align:left}.media-item.active{border-color:var(--teal);background:#ecf5ef;box-shadow:inset 0 0 0 1px var(--teal)}.media-item strong{font-size:11px;display:block}.media-item small{font-size:9px;color:#7c9187;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:3px}.detail-panels{display:grid;grid-template-columns:1fr 1fr;gap:14px}.info-panel{background:#fff;border:1px solid var(--border);border-radius:8px;padding:17px;margin-bottom:15px}.info-panel h3{margin-bottom:13px}.info-panel dl{margin:0;display:grid;grid-template-columns:minmax(80px,1fr) minmax(0,1.25fr);font-size:11px;column-gap:12px;row-gap:10px}.info-panel dt{color:#7b8b82}.info-panel dd{margin:0;word-break:break-word;color:#355347}.fineprint{color:#86948d;font-size:10px;line-height:1.6;margin-top:15px}.muted{color:#809086;font-size:11px;line-height:1.7}.map-panel{background:#fff;border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-bottom:15px}.map-heading{display:flex;justify-content:space-between;padding:15px 17px;align-items:center}.map-heading>span{font-size:9px;color:#7f9387}.map{height:300px;background-color:#edf2ea;background-image:linear-gradient(#cfdbd333 1px,transparent 1px),linear-gradient(90deg,#cfdbd333 1px,transparent 1px);background-size:32px 32px;position:relative;overflow:hidden}.map-empty{position:absolute;inset:0;display:grid;place-items:center;padding:30px;font-size:12px;color:#849b8e;text-align:center}.map-tile{position:absolute;width:256px;height:256px;max-width:none;pointer-events:none}.map svg.gps-overlay{position:absolute;inset:0;pointer-events:none;width:100%;height:100%}.map-credit{position:absolute;right:0;bottom:0;background:#fffD;padding:1px 5px;font-size:8px;color:#496551}.map-controls{padding:12px 16px 0;display:flex;gap:6px;align-items:center}.map-controls a{margin-left:auto;font-size:10px}.map-panel>p{padding:10px 17px;font-size:11px;color:#6c8576}.map-panel>p+p{padding-top:0}.diagnostics>div:first-child{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.diagnostics p{font-size:11px;color:#778a7f}.file-meta{font-size:10px;color:#7d9085;display:flex;gap:13px;flex-wrap:wrap;margin-top:10px}.file-meta a{margin-left:auto;font-weight:600}.timeline{height:23px;background:#e3ebe6;margin-top:9px;border-radius:4px;position:relative;color:#5c7867;font-size:9px;line-height:23px;padding:0 7px}.timeline .event-marker{position:absolute;top:0;bottom:0;border-left:2px solid #c16c41}.timeline .event-marker span{position:absolute;white-space:nowrap;background:#fff2e8;color:#b1643d;padding:0 5px;line-height:18px;top:2px;left:3px}details{margin-top:12px;font-size:11px;color:#668071}summary{cursor:pointer}pre{white-space:pre-wrap;overflow-wrap:anywhere;font:10px/1.6 Consolas,monospace;background:#f3f6f3;padding:12px;max-height:200px;overflow:auto}.parameter-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;font-size:11px}.parameter-grid div{display:flex;justify-content:space-between;background:#f4f7f4;padding:8px;border-radius:4px;gap:10px}.parameter-grid span{color:#83978a}.parameter-grid strong{font-weight:500;overflow-wrap:anywhere}.login-dialog{padding:34px;width:410px;max-width:94vw}.login-dialog>.close-dialog{position:absolute;right:13px;top:13px;border:0}.login-dialog h2{font-size:24px;letter-spacing:-.5px;margin:10px 0}.login-dialog>p{font-size:12px;color:#7c8d82;margin-bottom:20px}.login-dialog label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;margin-top:14px}.login-dialog input{padding:10px 12px;border:1px solid var(--border);border-radius:5px;width:100%}.login-dialog .primary{width:100%;margin:18px 0 0}.login-dialog>.fineprint{font-size:10px;margin:15px 0}.login-dialog>a{font-size:11px}#login-error{font-size:11px;color:#ad613e;margin-top:12px}#captcha-image{max-width:180px;max-height:80px;margin-top:15px}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:12px 20px;background:#133a30;color:#fff;border-radius:8px;font-size:12px;z-index:20;box-shadow:0 4px 25px #153b2c33}
.mobile-vehicles{display:none}
.filters{flex-wrap:wrap}.filters #driver-field{flex:1 1 210px;min-width:170px}.driver-search-help{font-size:11px;color:var(--muted);margin:-14px 0 16px}.driver-search-progress{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 0 18px;padding:11px 14px;border:1px solid var(--border);border-radius:6px;background:var(--white);color:var(--muted);font-size:11px}.driver-search-progress[hidden]{display:none}.driver-search-progress button{flex-shrink:0}.card-driver{display:flex;flex-direction:column;gap:3px;margin:8px 0 0;font-size:11px;color:var(--ink);overflow-wrap:anywhere}.card-driver small{font-size:10px;color:var(--muted)}.filters input:disabled{opacity:.65;cursor:not-allowed}
.refresh-controls{display:flex;align-items:center;gap:12px;flex-shrink:0}.auto-refresh-control{display:flex;flex-direction:column;gap:4px;min-width:164px}.auto-refresh-control label{font-size:10px;font-weight:600;color:#6a7b80}.auto-refresh-control select{height:36px;padding:7px 10px;border:1px solid var(--border);border-radius:6px;background:#fff;color:var(--ink);font-size:11px}.auto-refresh-control small{font-size:9px;color:#71857a;min-height:14px;font-variant-numeric:tabular-nums}.refresh-controls .button{margin:0}
@media(min-width:1700px){.event-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.card-body{padding:17px 18px}.card-vehicle strong{font-size:14px}}
@media(max-width:1250px){.sidebar{width:218px;padding:25px 15px 18px}.workspace{margin-left:218px}main{padding:28px 24px 16px}.topbar{padding:0 24px}.event-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stat{padding:0 17px}.filters{flex-wrap:wrap}.filters label{min-width:130px}.detail-layout{grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);padding:18px;gap:15px}}
@media(max-width:900px){.sidebar{width:190px;padding:23px 12px 15px}.workspace{margin-left:190px}.brand{font-size:23px;gap:9px}.brand-caption{letter-spacing:1.5px;font-size:7px}.brand-mark{width:35px;height:38px;font-size:32px;line-height:34px}.topbar{padding:0 20px}.timezone{display:none}main{padding:25px 20px 16px}.page-heading{align-items:flex-start}.page-heading h1{font-size:29px}.page-heading>.button{padding:9px 10px;font-size:10px}.mode-notice{flex-wrap:wrap}.mode-notice>.text-button{margin-left:38px;padding-top:0}.stats{grid-template-columns:repeat(2,1fr);gap:20px}.stat:nth-child(3){border:0}.event-grid{gap:14px}.card-body{padding:12px}.card-vehicle strong{font-size:12px}.detail-layout{grid-template-columns:1fr}.detail-side{display:grid;grid-template-columns:1fr 1fr;gap:14px}.map-panel{grid-row:span 2}.detail-side .info-panel{margin:0}.detail-header h2{font-size:18px}.scan-state{max-width:135px;text-align:right}}
@media(max-width:650px){.sidebar{position:relative;inset:auto;width:100%;height:auto;padding:14px 18px;display:block}.brand{font-size:22px}.workspace-label,.nav-active,.devices-heading,.sidebar-footer,.devices,.sidebar .search-field,.select-all{display:none}.workspace{margin:0}.topbar{height:58px;padding:0 18px}.topbar-right{gap:5px}main{padding:23px 16px 15px}.page-heading{margin-bottom:20px}.page-heading p{font-size:11px;max-width:210px}.page-heading h1{font-size:30px}.page-heading .button{margin-top:15px}.eyebrow{font-size:8px}.mode-notice{margin-bottom:18px}.mode-notice>div:nth-child(2){flex:1}.stats{padding:17px 0;margin-bottom:18px}.stat strong{font-size:27px}.stat small{font-size:9px}.filters{gap:10px;padding:13px;margin-bottom:20px}.filters label{min-width:40%;flex:1}.filters .button{width:100%}.event-grid{grid-template-columns:1fr}.results-header{align-items:flex-start}.scan-state{display:none}.card-body{padding:17px}.card-vehicle strong{font-size:14px}.card-alarm{font-size:12px}.card-bottom{font-size:11px}.event-grid.list .card-preview{width:115px;align-self:stretch;aspect-ratio:auto}.event-grid.list .card-topline{top:6px;left:6px;right:6px}.event-grid.list .file-count{display:none}.event-grid.list .badge{font-size:8px}.event-grid.list .card-bottom{font-size:9px}.event-grid.list .card-body{padding:12px}.detail-dialog{max-width:100vw;width:100vw;height:100dvh;max-height:100dvh;border-radius:0}.detail-header{padding:16px}.detail-header h2{font-size:17px}.detail-layout{padding:14px}.detail-panels,.detail-side{grid-template-columns:1fr}.detail-side .info-panel{margin-bottom:0}.detail-side{gap:15px}.map-panel{grid-row:auto;margin:0}.page-footer{font-size:8px;gap:15px}.pagination .button{padding:8px 10px}.info-panel dl{grid-template-columns:1fr 1.4fr}.mode-notice .text-button{margin-left:38px}}
@media(max-width:650px){.mobile-vehicles{display:block;position:absolute;right:18px;top:23px;background:#23464b;border:1px solid #4b6869;border-radius:5px;color:#e3f0e7;padding:5px 10px;font-size:11px}.sidebar.expanded .devices-heading,.sidebar.expanded .search-field,.sidebar.expanded .select-all{display:flex}.sidebar.expanded .devices{display:block;max-height:250px}.sidebar.expanded .devices-heading{margin-top:20px}.scan-state{display:block;max-width:100px;font-size:8px}}
@media(max-width:1100px){.page-heading{flex-wrap:wrap}.refresh-controls{margin-left:auto}}@media(max-width:650px){.refresh-controls{width:100%;margin:0;justify-content:space-between;gap:16px}.auto-refresh-control{flex:1;min-width:0}.page-heading .refresh-controls .button{margin:0;padding:9px 12px}.auto-refresh-control small{font-size:9px}}

/* Theme colors apply to the interface; evidence photos and video stay unaltered. */
:root{color-scheme:light}
.review-video-grid{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);gap:22px;align-items:start}
.review-video-grid.has-live{grid-template-columns:repeat(2,minmax(0,1fr))}
.recorded-panel,.live-panel{min-width:0;background:var(--white);border:1px solid var(--border);border-radius:10px;padding:15px}
.video-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;margin-bottom:10px}
.video-panel-heading p{font-size:11px;color:var(--muted)}
.video-panel-heading .eyebrow{margin-bottom:3px}
.live-viewport{position:relative;width:100%;min-width:0;aspect-ratio:16/9;background:#0b2025;border-radius:8px;overflow:hidden;display:grid;place-items:center;color:#c4d5ce;min-height:230px}
.live-viewport iframe{width:100%;height:100%;position:absolute;inset:0;border:0;background:#0b2025}
.live-viewport:fullscreen{aspect-ratio:auto;width:100vw;height:100vh;border-radius:0}
.live-controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:12px;margin:14px 0}
.live-controls>label{font-size:10px;color:var(--muted)}
.live-controls select{width:100%;padding:7px;border:1px solid var(--border);border-radius:5px;color:var(--ink);background:var(--bg);font-size:11px;margin-top:5px}
#live-camera-picker{position:relative;margin:0;padding:7px 9px;border:1px solid var(--border);border-radius:5px;color:var(--ink);align-self:end}
#live-camera-picker[open]{grid-column:1/-1}
.live-cameras{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:12px 0;max-height:180px;overflow:auto}
.live-cameras label{display:flex;align-items:center;gap:7px;font-size:11px}
.live-cameras input{margin:0;flex-shrink:0}
#live-camera-picker small{color:var(--muted)}
.live-actions,.live-secondary-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.live-actions .text-button{margin-left:auto}
.live-secondary-actions{justify-content:space-between;margin-top:8px}
#live-message{margin-top:8px;min-height:32px}
#live-token-fields{margin-top:15px}
#live-settings-form>.fineprint{margin:14px 0}
@media(max-width:900px){.review-video-grid.has-live{grid-template-columns:1fr}.live-viewport{min-height:250px}}
@media(max-width:650px){.recorded-panel,.live-panel{padding:12px}.live-actions .text-button{margin-left:0}}
.alarm-filter{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.filter-label{font-size:10px;font-weight:600;color:var(--muted)}
.alarm-picker{position:relative;font-size:11px;min-width:0;margin:0}
.alarm-picker summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;height:38px;padding:9px 10px;border:1px solid var(--border);border-radius:5px;background:var(--white);color:var(--ink);cursor:pointer}
.alarm-picker summary::-webkit-details-marker{display:none}
#alarm-type-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.alarm-saved{flex-shrink:0;margin-left:auto;color:var(--teal);font-size:9px;font-weight:600}
.alarm-memory{font-size:10px;color:var(--muted);line-height:1.5;margin-top:8px}
.vehicle-memory{font-size:10px;line-height:1.45;color:#a6c3c7;margin:0 7px 10px}
.alarm-picker[open] summary{border-color:var(--teal)}
.alarm-menu{position:absolute;z-index:12;top:calc(100% + 6px);left:0;width:max(100%,300px);max-width:calc(100vw - 60px);padding:12px;border:1px solid var(--border);border-radius:8px;background:var(--white);color:var(--ink);box-shadow:0 12px 30px #071e2b30}
.alarm-menu-toolbar,.alarm-menu-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted)}
.alarm-menu-toolbar{padding:5px 0}.alarm-menu-footer{border-top:1px solid var(--border);padding-top:7px;margin-top:7px}
.alarm-type-options{max-height:230px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.filters .alarm-type-options label{flex-direction:row;align-items:center;gap:9px;min-width:0;padding:8px 6px;border-radius:4px;font-size:11px;font-weight:400;color:var(--ink);cursor:pointer}
.filters .alarm-type-options label:hover{background:var(--teal-light)}
.filters .alarm-type-options input{width:15px;height:15px;flex-shrink:0;padding:0;margin:0}
#alarm-type-empty{padding:12px 5px;font-size:11px}
[data-theme="dark"] .alarm-picker summary{background:#1d343a}
@media(max-width:650px){.alarm-filter{min-width:40%}.alarm-menu{width:300px}.alarm-type-options{max-height:200px}}
.driver-options{display:flex;align-items:center;justify-content:space-between;gap:12px}
.driver-options .driver-search-help{margin-bottom:12px}.driver-options button{white-space:nowrap}
.card-driver .driver-name-source{align-self:flex-start;border:1px solid var(--border);border-radius:4px;padding:1px 6px;color:var(--teal);background:var(--teal-light);font-weight:600}
.card-driver .driver-name-source.fms{color:var(--ink);background:var(--bg)}
.card-driver .driver-name-source.unknown{color:var(--muted);background:transparent}
.songdee-dialog{width:610px;max-width:calc(100vw - 30px);max-height:90vh;overflow:auto;color:var(--ink);background:var(--white)}
.songdee-dialog select{display:block;width:100%;padding:10px;margin-top:5px;border:1px solid var(--border);border-radius:5px;background:var(--bg);color:var(--ink)}
.password-field{display:flex;align-items:stretch;gap:8px;margin-top:5px}
.password-field input{flex:1;min-width:0;margin:0}
.password-toggle{flex:0 0 62px;border:1px solid var(--border);border-radius:5px;background:var(--bg);color:var(--ink);font-size:12px}
.password-help{margin-top:7px}
.songdee-pair-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px}.songdee-pairs{padding:0;list-style:none;margin:15px 0;max-height:180px;overflow:auto}
.songdee-pairs li{display:flex;gap:10px;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding:8px 0;font-size:12px}
.map-direction{margin:0 17px 12px;padding:9px;border:1px solid var(--border);border-radius:5px;color:var(--ink);font-size:11px}
.map-direction small{display:block;color:var(--muted);margin-top:3px}
@media(max-width:650px){.songdee-pair-controls{grid-template-columns:1fr}.driver-options{align-items:flex-start}}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 10px;background:var(--white);color:var(--ink);border:1px solid var(--border);border-radius:6px;font-size:11px;font-weight:600;flex-shrink:0}
.theme-toggle svg{flex-shrink:0}.theme-icon-sun{display:none}
:where(button,input,select,a,summary):focus-visible{outline:2px solid var(--teal);outline-offset:3px}
:root[data-theme="dark"]{color-scheme:dark;--ink:#e3eee9;--muted:#a7bbb4;--teal:#71d6b6;--teal-light:#203f38;--border:#30484a;--bg:#0e1b20;--nav:#0b242a;--white:#172a30}
[data-theme="dark"] .theme-icon-moon{display:none}
[data-theme="dark"] .theme-icon-sun{display:block}
[data-theme="dark"] :is(.topbar,.stats,.filters,.event-card,.info-panel,.map-panel,.detail-header,.secondary,.view-switch,.icon-button,.media-item,.empty-state,.login-dialog){background:var(--white)}
[data-theme="dark"] dialog{border-color:var(--border)}
[data-theme="dark"] :is(.filters input,.filters select,.auto-refresh-control select,.login-dialog input){background:#1d343a;border-color:var(--border);color:var(--ink)}
[data-theme="dark"] :is(.filters label,.auto-refresh-control label,.auto-refresh-control small,.stat>span,.stat small,.scan-state,.card-alarm,.card-bottom,.card-bottom time,.card-arrow,.media-item small,.media-header h3 span,.info-panel dt,.fineprint,.muted,.map-heading>span,.map-panel>p,.map-empty,.diagnostics p,.file-meta,.parameter-grid span,.login-dialog>p,.page-footer,details){color:var(--muted)}
[data-theme="dark"] :is(.info-panel dd,.empty-state h3,.media-item,.icon-button){color:var(--ink)}
[data-theme="dark"] .mode-notice{background:#153831;border-color:#2e554c}
[data-theme="dark"] .mode-notice p{color:#b0c7bc}
[data-theme="dark"] .notice-icon{border-color:#599b87}
[data-theme="dark"] .primary{background:#71d6b6;color:#0b2b22}
[data-theme="dark"] :is(.avatar,.results-header h2 span,.view-switch .selected){background:#23433f;color:var(--teal)}
[data-theme="dark"] .view-switch button{color:var(--muted)}
[data-theme="dark"] .card-preview{background:#243a3e}
[data-theme="dark"] .preview-placeholder{color:var(--muted)}
[data-theme="dark"] .card-divider{background:var(--border)}
[data-theme="dark"] .event-card:hover{border-color:#629887;box-shadow:0 5px 17px #0003}
[data-theme="dark"] .badge.ready{background:#1e4738;color:#a1e6bf}
[data-theme="dark"] .badge.image-only{background:#493b22;color:#f8d28a}
[data-theme="dark"] :is(.badge.pending,.badge.unavailable){background:#50352c;color:#ffc2a4}
[data-theme="dark"] .badge.neutral{background:#283e40;color:#b9cfc5}
[data-theme="dark"] .empty-state{border-color:var(--border);color:var(--muted)}
[data-theme="dark"] .empty-state .empty-symbol{color:#87a99a}
[data-theme="dark"] .scan-progress{background:#263c3b}
[data-theme="dark"] .media-item.active{background:#1d433b}
[data-theme="dark"] :is(.parameter-grid div,pre){background:#112228;color:var(--ink)}
[data-theme="dark"] .map{background-color:#182b2b;background-image:linear-gradient(#adc9bc12 1px,transparent 1px),linear-gradient(90deg,#adc9bc12 1px,transparent 1px)}
[data-theme="dark"] .timeline{background:#263c3b;color:#bdd3c6}
[data-theme="dark"] .timeline .event-marker span{background:#4b3529;color:#ffc08d}
[data-theme="dark"] .error-banner{background:#3a2824;border-color:#6e493a;color:#f3bf9c}
[data-theme="dark"] #login-error{color:#f3bf9c}
@media(max-width:400px){.theme-toggle{width:32px;padding:0}.theme-toggle #theme-label{display:none}.topbar{gap:8px;padding-left:14px;padding-right:14px}.slash{margin:0 8px}.account-button{gap:6px}}

/* Google owns its map controls and attribution; application SVG rules stay scoped. */
.google-map-canvas{width:100%;height:100%;color:#172e35;color-scheme:light}
.map-provider{padding:12px 17px 0;font-size:11px;line-height:1.6;color:var(--muted)}
.map-provider p:empty{display:none}.map-provider .text-button{margin-top:5px}
.map-grid-label{position:absolute;left:10px;bottom:10px;font-size:10px;color:var(--muted);background:var(--surface);padding:4px 7px;border-radius:4px}
.google-north{background:#fff;color:#173831;font:bold 12px Arial,sans-serif;padding:8px;margin:10px;border-radius:20px;box-shadow:0 1px 4px #0003}
.google-fix{position:absolute;transform:translate(-50%,-50%);pointer-events:none;font:bold 11px Arial,sans-serif}
.route-fix{width:22px;height:22px;background:#073f35;color:#fff;border:2px solid #fff;border-radius:50%;display:grid;place-items:center;z-index:3}
.alarm-fix{width:36px;height:36px;border-radius:50%;background:#d25f3b26;display:grid;place-items:center;z-index:4}
.alarm-dot{width:16px;height:16px;border:3px solid #fff;border-radius:50%;background:#d25f3b;box-shadow:0 0 3px #0003}
.alarm-bearing{position:absolute;inset:0;transform-origin:center}
.alarm-bearing:before{content:"";position:absolute;left:11px;top:-18px;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid #d25f3b;filter:drop-shadow(0 0 1px white)}
.map .map-tile{position:absolute;width:256px;height:256px;max-width:none;user-select:none}
.google-tile-credit{position:absolute;bottom:0;right:0;background:#fffffff0;color:#444;padding:2px 6px;font:10px Arial,sans-serif;z-index:2}
.map-provider .text-button+.text-button{margin-left:14px}

/* Customer / fleet selection uses a compact desktop sidebar and mobile drawer. */
.sidebar{width:300px;padding:24px 16px 18px}
.workspace{margin-left:300px}
.sidebar .workspace-label{margin:26px 7px 12px}
.vehicle-picker-body{display:flex;flex-direction:column;flex:1;min-height:0}
.sidebar .devices-heading{display:flex;margin:24px 0 12px;gap:8px}
.devices-heading h2{font-size:13px}
.devices-heading small{display:block;color:#95b4b8;font-size:10px;margin-top:4px}
.sidebar-action{color:#c2e6df;background:transparent;border:0;padding:6px;font-size:11px}
#hide-vehicles{font-size:27px;line-height:24px;width:32px;border:1px solid #385960;border-radius:5px}
.sidebar .search-field{display:flex}
.vehicle-select-toolbar{display:flex;justify-content:space-between;align-items:center;margin-top:13px}
.sidebar .select-all{display:flex;margin:0 3px;font-size:12px}
.vehicle-selection-summary{display:flex;align-items:center;gap:6px;margin:10px 3px 0;font-size:11px;color:#b8d7d1}
.vehicle-selection-summary strong{font-size:12px;color:#effcf8}
.sidebar .vehicle-memory{display:block;font-size:10px;line-height:1.5;color:#a4c7c8;margin:6px 3px 10px}
.sidebar #fleet-warning{color:#f7cc8d}
.sidebar .devices{display:block;flex:1;min-height:0;max-height:none;overflow:auto}
.vehicle-tree,.fleet-children{list-style:none;padding:0;margin:0}
.fleet-children{margin:0 0 5px 9px;padding-left:6px;border-left:1px solid #315057}
.fleet-row{display:flex;align-items:center;gap:5px;padding:8px 3px;border-radius:5px}
.fleet-row:hover{background:#1c3b42}
.fleet-expand{width:19px;flex-shrink:0;border:0;background:transparent;color:#a5c4c4;padding:2px 0;font-size:15px}
.fleet-row label{display:flex;align-items:center;gap:8px;flex:1;min-width:0;cursor:pointer}
.fleet-row label>span{min-width:0;flex:1}
.fleet-row input{margin:0;flex-shrink:0}
.fleet-row strong{display:block;overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:650;white-space:nowrap}
.fleet-row small{display:block;color:#8eafb3;font-size:9px;margin-top:2px}
.fleet-count{font-size:10px;color:#a9cbc1;font-variant-numeric:tabular-nums;white-space:nowrap}
.account-vehicle-label{flex:1;font-size:11px;color:#b7d1d2}
.vehicle-tree .device-row{padding:7px 4px 7px 19px}
.vehicle-tree .device-info strong{font-size:11px}
.vehicle-tree .device-info small{font-size:9px}
.vehicle-picker-hint{margin:12px 3px 0;color:#94b3b6;font-size:10px;line-height:1.5}
.workspace-navigation{display:flex;align-items:center;gap:18px;min-width:0}
.vehicle-panel-toggle{display:flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--white);color:var(--ink);border-radius:6px;padding:7px 10px;font-size:11px;white-space:nowrap}
#vehicle-toggle-count{background:var(--teal-light);color:var(--teal);border-radius:4px;padding:1px 5px;font-size:10px}
.vehicle-panel-toggle.selection-pending:after{content:"";width:5px;height:5px;border-radius:50%;background:#d39a45}
.vehicle-sidebar-hidden .sidebar{display:none}
.vehicle-sidebar-hidden .workspace{margin-left:0}
.vehicle-selection-notice{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;padding:10px 14px;border:1px solid var(--border);border-radius:7px;background:var(--teal-light);font-size:11px;color:var(--ink)}
.vehicle-scrim{position:fixed;inset:0;background:#001b2499;border:0;z-index:20}
@media(max-width:1100px){.workspace-breadcrumb{display:none}.topbar{gap:10px;padding-left:20px;padding-right:20px}}
@media(max-width:650px){
  .sidebar{position:fixed;inset:0 auto 0 0;width:min(340px,90vw);height:100dvh;display:flex;z-index:30;padding:22px 16px}
  .sidebar .brand{display:flex}.sidebar .workspace-label,.sidebar .nav-active,.sidebar .sidebar-footer{display:none}
  .sidebar .devices-heading{margin-top:22px}.sidebar .devices{max-height:none}
  .workspace{margin-left:0}
  body:not(.vehicle-sidebar-hidden){overflow:hidden}
  .topbar{gap:8px;padding:0 12px}.topbar-right{gap:5px}
  .vehicle-panel-toggle{padding:7px 8px;gap:5px}.workspace-navigation{gap:0}
  .vehicle-selection-notice{align-items:flex-start}
}
.monitor-setup{display:flex;align-items:center;flex-wrap:wrap;gap:16px 22px;padding:18px;background:var(--white);border:1px solid var(--border);border-radius:9px;margin:0 0 22px}
.monitor-setup>div:first-child{flex:1 1 260px}.monitor-setup h2{font-size:17px}.monitor-setup p{font-size:11px;color:var(--muted);margin-top:5px}
.monitor-setup>.fineprint{flex-basis:100%;margin:0}.monitor-settings{display:flex;align-items:center;gap:16px;font-size:11px}
.monitor-settings label{display:flex;gap:6px;flex-direction:column;color:var(--muted)}.monitor-settings input[type=number]{width:100px;padding:7px 9px;background:var(--bg);color:var(--ink);border:1px solid var(--border);border-radius:5px}
.monitor-settings .monitor-live-option{flex-direction:row;align-items:center;color:var(--ink)}.monitor-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.monitor-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 24px;border-bottom:1px solid var(--border);background:var(--white);position:sticky;top:0;z-index:4;box-shadow:0 2px 6px #0000000a}
.monitor-open .detail-header{position:relative}.monitor-now{display:flex;flex-direction:column;gap:3px;min-width:0}
.monitor-now strong{font-size:13px;color:var(--teal)}.monitor-now span{font-size:12px;overflow-wrap:anywhere}.monitor-now small{font-size:10px;color:var(--muted)}
.monitor-countdown{font-variant-numeric:tabular-nums;font-size:22px;font-weight:650;min-width:45px;color:var(--teal)}.monitor-bar .button{padding:8px 11px}
.monitor-waiting .detail-main,.monitor-waiting .detail-side,.monitor-waiting .live-panel,
.monitor-waiting .video-panel-heading,.monitor-waiting .timeline,.monitor-waiting .media-header,.monitor-waiting .media-strip{display:none!important}
.monitor-waiting .review-video-grid{grid-template-columns:1fr}.monitor-waiting .player-placeholder{padding:45px 20px;text-align:center;color:var(--muted)}
.monitor-settings{flex-wrap:wrap}.filters #time-mode{min-width:170px}
.monitor-hold-note{font-size:11px;line-height:1.5;padding:9px 11px;margin:0 0 12px;border-left:3px solid var(--teal);background:var(--teal-light);color:var(--ink);border-radius:4px}
@media(max-width:850px){.monitor-bar{align-items:flex-start;flex-direction:column;padding:12px 16px}.monitor-bar .monitor-actions{gap:8px}.monitor-setup{padding:14px}.monitor-settings{flex-wrap:wrap}}