:root{color-scheme:dark;--bg:#0b1019;--panel:#131c29;--line:#263345;--text:#e7edf6;--muted:#91a1b8;--accent:#68dfba}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}a{color:var(--accent);text-decoration:none}button,input{font:inherit}button,.button{display:inline-block;border:1px solid transparent;background:var(--accent);color:#08251e;border-radius:9px;padding:10px 17px;cursor:pointer;font-weight:650}button:hover,.button:hover{filter:brightness(1.12)}.quiet{background:#1b283a;color:#d6e2f2;border-color:#304058}input{width:100%;background:#0c1421;color:var(--text);border:1px solid #35445c;border-radius:8px;padding:11px;margin-top:7px}input:focus{outline:2px solid var(--accent);outline-offset:2px}label{display:block;color:#bdcbe0;margin:12px 0}small{font-size:11px;color:var(--muted);display:block;letter-spacing:.04em}h1{font-size:30px;letter-spacing:-.8px;line-height:1.2;margin:12px 0}h2{font-size:19px;font-weight:650;margin:8px 0 14px}h3{font-size:19px;margin:16px 0 3px}.muted{color:var(--muted)}.brand{display:flex;align-items:center;gap:10px;font-weight:750;letter-spacing:1.4px;font-size:15px}.brand small{letter-spacing:3px;font-size:9px;margin-top:2px}.mark{display:grid;place-items:center;background:var(--accent);color:#103c31;width:36px;height:36px;border-radius:10px;font-size:24px}aside{position:fixed;inset:0 auto 0 0;width:224px;padding:30px 20px;background:#101723;border-right:1px solid var(--line)}.navlabel{font-size:9px;letter-spacing:1.5px;color:#72829b;margin:46px 7px 15px}nav a{display:flex;align-items:center;gap:14px;padding:12px;margin:6px 0;color:#a8b8cd;border-radius:8px}nav a span{font-size:22px;width:22px}.selected{background:#1b3434;color:var(--accent)}.asidefoot{position:absolute;bottom:25px;font-size:12px;color:var(--muted)}.workspace{margin-left:224px;padding:34px 38px;max-width:1600px}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--muted)}.row,.sectiontitle{display:flex;align-items:center;justify-content:space-between;gap:15px}.row h1{margin-bottom:8px}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}.card{background:var(--panel);border:1px solid var(--line);border-radius:13px;padding:23px;margin-bottom:20px}.stats .card{margin:0}.stats b{display:block;font-size:34px;font-weight:550;margin-top:10px}.statusbar{display:flex;justify-content:space-between;gap:15px;padding:20px 0;border-bottom:1px solid var(--line);font-size:12px;color:var(--accent);margin-bottom:28px}.sectiontitle{margin-bottom:12px}.sectiontitle a{font-size:13px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:18px}.tracker{display:block;color:var(--text);margin:0;transition:border-color .15s}.tracker:hover{border-color:var(--accent)}.device{color:var(--accent);background:#1c3738;border-radius:9px;padding:4px 12px;font-size:25px}.badge{display:inline-block;padding:4px 9px;border-radius:6px;background:#233249;color:#c2d1e7;font-size:11px;white-space:nowrap}.ok{background:#193d35;color:#78e2bf}.warn{background:#493727;color:#efc285}.metrics{display:flex;justify-content:space-between;margin:25px 0}.metrics strong{display:block;font-weight:550;font-size:15px;margin-top:6px}.metrics strong span{font-size:10px;color:var(--muted)}.cardfoot{border-top:1px solid var(--line);padding-top:16px;display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}.empty{padding:45px;text-align:center;grid-column:1/-1}.empty .button{margin-top:15px}.formgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;align-items:end}.formgrid button{margin-bottom:12px}.actions{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0}.actions button{font-size:12px}summary{cursor:pointer;color:#b7c8dd;padding:8px 0}details+details{margin-top:12px}.check{display:flex;gap:10px;align-items:center}.check input{width:17px;height:17px;margin:0;flex-shrink:0}.danger{color:#f5a8a8}.danger:is(button){background:#4c242d}.notice{padding:16px;background:#20353d;border:1px solid #385866;border-radius:10px;margin:15px 0}.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:12px}table{width:100%;border-collapse:collapse;background:var(--panel);font-size:13px}th,td{text-align:left;padding:18px;border-bottom:1px solid var(--line);vertical-align:top}th{font-weight:500;color:var(--muted);background:#172232}td small{margin-top:5px}code{display:block;overflow-wrap:anywhere;white-space:pre-wrap;font-size:12px;max-width:500px}footer{font-size:11px;color:#718199;margin-top:40px}.login{max-width:470px;margin:8vh auto;padding:30px}.login h1{font-size:39px;margin-top:40px}.login form{margin-top:30px}.login button{width:100%;margin:15px 0}.warning{color:#f0b878}@media(max-width:1050px){.stats{grid-template-columns:repeat(2,1fr)}.workspace{padding:26px}aside{width:195px}.workspace{margin-left:195px}}@media(max-width:700px){aside{position:static;width:auto;padding:18px}.navlabel{display:none}.asidefoot{position:static;display:flex;align-items:center;justify-content:space-between;margin-top:12px}.asidefoot p{display:none}.asidefoot button{padding:6px 12px}nav{display:flex;overflow-x:auto;margin-top:15px}nav a{padding:8px;font-size:12px;gap:4px;white-space:nowrap}nav a span{font-size:16px;width:auto}.workspace{margin:0;padding:20px}.stats{gap:10px}.stats .card{padding:16px}.stats b{font-size:28px}.statusbar{flex-direction:column}.grid{grid-template-columns:1fr}.row{align-items:flex-start}h1{font-size:25px}.brand small{display:inline}.formgrid{grid-template-columns:1fr;gap:0}.login{margin-top:3vh;padding:22px}}
/* Main dashboard: private LAN monitor. */
:root{--bg:#05111c;--panel:#0b1b27;--line:#1d3948;--text:#eef3f8;--muted:#a4b3c4;--accent:#17eb9b}
body{background:radial-gradient(ellipse at 80% 0%,#0b1d2d66,transparent 65%),var(--bg)}
.icon{width:24px;height:24px;display:inline-block;flex-shrink:0;vertical-align:middle;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
aside{width:250px;padding:30px 20px;background:radial-gradient(ellipse at 0 70%,#004e3b70,transparent 53%),linear-gradient(150deg,#071b23,#05101b 65%);overflow:auto}
.brand{font-size:20px;gap:17px;letter-spacing:.3px;padding:0 8px}.brand small{font-size:11px;letter-spacing:3.5px}.mark{width:42px;height:44px;background:linear-gradient(135deg,#45ffac,#00b7ab);color:#03382e;border-radius:10px;font-size:29px;box-shadow:0 0 25px #10ed9b15}
nav{margin-top:38px}nav a{font-size:16px;gap:24px;padding:13px 23px;margin:5px 0;border-radius:14px;color:#b9c8d7}nav a.selected{background:#004c37a8;color:var(--accent);font-weight:650}
.asidefoot{bottom:26px;left:28px;right:25px}.asidefoot>.badge{font-size:14px;padding:10px 15px;border:1px solid #006142;border-radius:16px;display:block;text-align:center;background:#003d2b80;color:#27efaa}.asidefoot>.warn{color:#efc285;border-color:#695333;background:#493727}.asidefoot p{margin:10px 15px}.asidefoot button{font-size:12px;padding:6px 12px}
.workspace{margin-left:250px;max-width:none;padding:20px 30px 35px}header{margin-bottom:22px}.eyebrow{font-size:12px;letter-spacing:1px}h1{font-size:32px;margin-top:9px;font-weight:750}header>p{margin:4px 0 0;font-size:15px}.live-meta{display:flex;gap:26px;align-items:center}.connection{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:650;padding:8px 15px;border-radius:16px;border:1px solid #27664e;background:#003a2880;white-space:nowrap}.connection:before{content:'';height:8px;width:8px;border-radius:50%;background:currentColor}.connection.online{color:var(--accent);box-shadow:0 0 22px #00e68a0a}.connection.offline{color:#e2ba76;background:#382b1d80;border-color:#695333}
.stats{margin-top:0;gap:18px}.stat.card{display:flex;align-items:center;gap:24px;position:relative;overflow:hidden;padding:18px 26px;background:linear-gradient(130deg,#0c1c28,#091924);min-height:100px;border-radius:15px}.stat:after{content:'';position:absolute;width:200px;height:100px;bottom:-78px;right:-30px;border-radius:50%;border-top:2px solid currentColor;transform:rotate(-25deg);box-shadow:0 -12px 35px currentColor;opacity:.17;pointer-events:none}.stat.green{color:#00ea8e}.stat.blue{color:#00cba0}.stat.cyan{color:#00caff}.stat.red{color:#ff546d}.stat-icon{display:grid;place-items:center;width:56px;height:56px;flex-shrink:0;border-radius:14px;background:#243c50;color:#d1e3f2}.stat-icon .icon{width:32px;height:32px}.green .stat-icon{background:#004b30;color:#18ed98}.cyan .stat-icon{background:#0b3a4c;color:#a1d7e9}.red .stat-icon{background:#3c202e;color:#ff6577}.stat-label{color:#dce5ed;font-size:14px}.stats b{font-size:33px;font-weight:750;margin-top:0;line-height:1.2;color:var(--text)}
.sectiontitle{margin:25px 0 18px}.sectiontitle h2{position:relative;padding-left:20px;margin:0;font-size:22px;font-weight:720}.sectiontitle h2:before{content:'';position:absolute;left:0;top:5px;width:5px;height:22px;background:linear-gradient(#59ffbf,#00ce80);border-radius:4px}.sectiontitle a{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600}.sectiontitle a .icon{width:18px}
.home-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.vehicle.card{border-radius:19px;padding:0;background:linear-gradient(120deg,#091c25,#081722);overflow:hidden;min-width:0}.vehicle.moving{border-color:#00bf7a;box-shadow:inset 0 0 35px #00f29503}.vehicle.stationary{border-color:#546c7f}.vehicle.paused{border-color:#2f4859}.vehicle.warning{border-color:#8f7241}.vehicle-head{display:flex;gap:12px;align-items:center;padding:17px 18px 0;flex-wrap:wrap}.vehicle-icon{display:grid;place-items:center;border-radius:50%;background:linear-gradient(135deg,#274952,#102a34);width:45px;height:45px;flex-shrink:0;color:#d1e6f0}.vehicle-icon .icon{width:28px;height:28px}.vehicle-name{flex:1;min-width:90px}.vehicle h3{font-size:15px;line-height:1.35;margin:0;font-weight:700;overflow-wrap:anywhere}.vehicle-name>a{color:var(--text)}.account-login{font-size:12px;color:var(--muted);margin:4px 0 0;overflow-wrap:anywhere}.state{display:inline-flex;align-items:center;gap:6px;border-radius:20px;padding:5px 9px;font-size:10px;letter-spacing:0;background:#193243;color:#c4d4e1}.state i,.monitor-state i{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block;flex-shrink:0}.state.moving{background:#00442c;color:#24eda7}.state.warning{background:#49391f;color:#f2c885}.state.paused{background:#243342;color:#a7b5c7}.vehicle-metrics{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:22px 18px 18px;flex-wrap:wrap}.speed{display:flex;align-items:baseline;gap:5px;color:#a7b8ca;white-space:nowrap}.speed .icon{width:29px;height:29px;align-self:center;margin-right:4px}.speed strong{font-size:30px;font-weight:750;line-height:1}.speed>span{font-size:12px;font-weight:650}.speed.fresh{color:var(--accent)}.gps{display:flex;align-items:center;gap:9px;color:#9aafc3}.gps>.icon{width:20px;height:20px}.gps span{font-size:11px;display:block;margin-bottom:2px}.gps strong{font-size:10px;color:#dbe4ed;font-weight:600;white-space:nowrap}.position{display:flex;align-items:center;gap:10px;padding:0 18px;font-size:12px;color:#d8e5ef}.position>.icon{width:18px;height:18px;color:#aabed1}.telemetry-note{font-size:11px;color:#8199ac;padding:9px 18px 14px}.vehicle .cardfoot{padding:11px 16px;align-items:center;gap:8px;flex-wrap:wrap;background:#09233144;border-color:#153543;margin:0;min-height:56px}.monitor-state{display:flex;align-items:center;gap:7px;font-size:10px;font-weight:650;color:#99acbd}.monitor-state.enabled{color:#19e6a0}.map-button{display:inline-flex;align-items:center;gap:6px;background:#0e3044;border:1px solid #17455f;padding:7px 10px;border-radius:20px;color:#abd9f2;font-size:10px;font-weight:600}.map-button .icon{width:16px;height:16px}.no-position{font-size:10px;color:var(--muted)}footer{color:#5f7b90;margin-top:35px;font-size:10px}.tracker .metrics{gap:15px}.tracker h3{overflow-wrap:anywhere}.tracker:not(.vehicle) .cardfoot{margin-top:12px}
@media(min-width:1800px){.vehicle h3{font-size:16px}.vehicle-head{padding:18px 20px 0;gap:13px}.gps strong{font-size:11px}.state{font-size:11px}.vehicle-metrics{padding:24px 20px 20px}.monitor-state,.map-button{font-size:11px}}
@media(max-width:1550px){.home-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.stat.card{gap:15px;padding:18px}.stat-label{font-size:12px}.live-meta{gap:15px}}
@media(max-width:1250px){.home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stats{grid-template-columns:repeat(2,1fr)}aside{width:220px;padding:27px 15px}.workspace{margin-left:220px;padding:25px}.brand{font-size:17px;gap:12px}nav a{padding:12px 20px}.live-meta{flex-wrap:wrap;justify-content:flex-end}header .row{align-items:flex-start}.vehicle h3{font-size:16px}.gps strong{font-size:11px}}
@media(max-width:700px){aside{position:static;width:auto;padding:18px 16px;border-right:0;border-bottom:1px solid var(--line);overflow:visible}.brand{font-size:18px}.brand small{display:block}.mark{height:36px;width:36px;font-size:24px}nav{margin:18px 0 0;gap:3px}nav a{font-size:12px;padding:9px 10px;border-radius:10px;gap:6px}nav .icon{width:18px;height:18px}.asidefoot{position:static;display:flex;gap:12px;margin-top:14px}.asidefoot>.badge{display:inline-block;font-size:11px;padding:6px 10px;border-radius:10px}.asidefoot p{display:none}.workspace{margin:0;padding:20px 16px}header .row{display:block}header>p{font-size:13px;margin-top:12px}h1{font-size:29px}.live-meta{justify-content:flex-end;gap:10px;margin:15px 0 0}.connection{font-size:11px;padding:6px 10px;border-radius:11px}.stats{gap:10px}.stat.card{padding:14px 12px;gap:10px;min-height:85px;border-radius:12px}.stat-icon{width:37px;height:42px;border-radius:10px}.stat-icon .icon{width:25px;height:25px}.stat-label{font-size:10px}.stats b{font-size:28px}.sectiontitle{margin-top:25px;gap:10px}.sectiontitle h2{font-size:18px;padding-left:14px}.sectiontitle h2:before{height:18px;top:4px;width:4px}.sectiontitle a{font-size:11px}.home-grid{grid-template-columns:1fr;gap:14px}.vehicle-head{padding:18px 17px 0;gap:10px}.vehicle-name{min-width:90px}.vehicle h3{font-size:15px}.state{font-size:10px}.vehicle-metrics{padding:23px 18px 18px}.gps strong{font-size:10px}.vehicle .cardfoot{padding:12px 16px}.monitor-state,.map-button{font-size:10px}.sectiontitle .icon{width:14px}.login{padding:22px}.login .brand{padding:0}.account .row{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
.power{display:flex;align-items:center;gap:10px;padding:12px 18px 15px;font-size:12px;color:#d8e5ef}.power .icon{width:20px;height:18px;color:#42ecac}.disabled{cursor:default;opacity:.55}nav a.disabled{color:#a8b8ca}.monitor-toggle{display:flex;align-items:center;gap:9px;background:transparent;color:var(--muted);padding:5px;border:0;font-size:12px;white-space:nowrap}.switch-track{display:inline-flex;width:40px;height:23px;background:#314353;padding:3px;border-radius:20px;border:1px solid #516274}.switch-track>span{width:15px;height:15px;background:#b9c7d3;border-radius:50%;transition:transform .15s}.is-on{color:var(--accent)}.is-on .switch-track{background:#006442;border-color:#00a569}.is-on .switch-track>span{background:var(--accent);transform:translateX(16px)}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.account h2{margin-bottom:0}.account .row{flex-wrap:wrap}.account .row>.badge{margin-left:auto}
@media(min-width:1600px){aside{width:300px;padding:34px 21px}.workspace{margin-left:300px;padding:20px 32px 35px}.brand{font-size:23px;gap:20px;padding:0 14px}.brand small{font-size:12px}.mark{width:45px;height:45px}nav{margin-top:40px}nav a{font-size:18px;gap:30px;padding:13px 30px}.eyebrow{font-size:14px}h1{font-size:36px}header>p{font-size:17px}.connection{font-size:16px}.stat.card{min-height:106px;padding:18px 30px;gap:28px}.stat-icon{width:64px;height:64px}.stat-label{font-size:16px}.stats b{font-size:36px}.sectiontitle{margin:26px 0 22px}.sectiontitle h2{font-size:25px}.sectiontitle a{font-size:16px}.vehicle h3{font-size:17px}.vehicle-icon{width:53px;height:53px}.vehicle-icon .icon{width:31px;height:31px}.vehicle-head{padding:15px 21px 0;gap:13px}.account-login{font-size:14px}.state{font-size:11px}.vehicle-metrics{padding:22px 22px 19px}.speed strong{font-size:34px}.speed>span{font-size:14px}.speed .icon{width:32px;height:32px}.gps span{font-size:12px}.gps strong{font-size:12px}.position,.power{font-size:14px;padding-left:23px;padding-right:23px}.position .icon{height:20px;width:20px}.power{padding-top:13px;padding-bottom:13px}.vehicle .cardfoot{padding:12px 22px;min-height:62px}.monitor-state,.map-button{font-size:12px}.map-button{padding:7px 12px}.asidefoot{left:39px;right:39px;bottom:25px}.asidefoot>.badge{font-size:16px}}
@media(min-width:1251px) and (max-width:1550px){.home-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1600px){header .row h1{margin-top:5px;margin-bottom:0}.vehicle-metrics{padding-bottom:16px}.vehicle .cardfoot{min-height:58px}}

/* Account management and the extended navigation retain the existing theme. */
select{font:inherit;width:100%;padding:11px;margin-top:7px;color:var(--text);background:#0c1421;border:1px solid #35445c;border-radius:8px}
button:disabled{background:#263345;color:#91a1b8;border-color:#35445c;cursor:not-allowed;filter:none;opacity:.7}
@media(min-width:701px){aside{display:flex;flex-direction:column}aside .brand{flex-shrink:0}aside nav{overflow-y:auto;min-height:0;margin-bottom:18px}.asidefoot{position:static;flex-shrink:0;margin-top:auto}}

/* Reserve the status space during a short initial handshake; errors remain visible. */
.connection.pending{visibility:hidden}