@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Noto+Sans+KR:wght@400;500;600;700&display=swap');

:root{--ink:#eaf1fa;--muted:#8190a5;--line:rgba(141,166,195,.14);--panel:#0c1727;--panel-2:#101e31;--cyan:#35d8c7;--blue:#2d7dff;--amber:#ffb846;--red:#ff6177;--sidebar:76px;font-family:Manrope,'Noto Sans KR',sans-serif;color:var(--ink);background:#07101c;color-scheme:dark}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden}button,input{font:inherit}button,a{color:inherit}.hidden{display:none!important}.eyebrow{margin:0 0 7px;color:#64758c;font-size:10px;font-weight:800;letter-spacing:.19em}.app{height:100%;display:flex;background:#08111e}.sidebar{position:relative;z-index:20;width:var(--sidebar);flex:0 0 var(--sidebar);background:#0a1422;border-right:1px solid var(--line);display:flex;align-items:center;flex-direction:column}.logo-row{height:78px;width:100%;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;gap:4px}.logo-row strong{font-size:13px;letter-spacing:.02em}.logo-row small{display:none}.brand-mark{width:27px;height:29px;display:flex;align-items:flex-end;gap:3px}.brand-mark span{display:block;width:6px;border-radius:4px 4px 1px 1px;background:linear-gradient(180deg,#65eadb,#1f71ef);transform:skewY(-18deg)}.brand-mark span:nth-child(1){height:15px}.brand-mark span:nth-child(2){height:24px}.brand-mark span:nth-child(3){height:19px}.brand-mark.large{width:50px;height:52px;gap:5px}.brand-mark.large span{width:11px}.brand-mark.large span:nth-child(1){height:27px}.brand-mark.large span:nth-child(2){height:45px}.brand-mark.large span:nth-child(3){height:35px}.sidebar nav{width:100%;padding-top:18px;display:flex;flex-direction:column;align-items:center;gap:8px}.nav-item{position:relative;width:56px;height:54px;border:0;border-radius:12px;background:transparent;color:#5f7086;cursor:pointer;display:flex;align-items:center;justify-content:center}.nav-item>span:last-child{display:none}.nav-item.active{background:linear-gradient(145deg,rgba(45,125,255,.18),rgba(53,216,199,.08));color:var(--cyan)}.nav-item.active:before{content:'';position:absolute;left:-10px;height:26px;width:3px;border-radius:0 3px 3px 0;background:var(--cyan);box-shadow:0 0 16px var(--cyan)}.nav-icon{font-size:22px}.sidebar-bottom{margin-top:auto;padding-bottom:20px;display:flex;flex-direction:column;gap:8px}.icon-button{width:40px;height:40px;border:1px solid var(--line);border-radius:10px;text-decoration:none;background:rgba(255,255,255,.02);display:grid;place-items:center;cursor:pointer;color:#8494a8}.workspace{min-width:0;flex:1;display:flex;flex-direction:column}.topbar{height:78px;flex:0 0 78px;display:flex;align-items:center;justify-content:space-between;padding:0 26px 0 30px;background:#0b1625;border-bottom:1px solid var(--line)}.topbar h1{margin:0;font-size:20px;letter-spacing:-.04em}.header-actions{display:flex;align-items:center;gap:22px}.connection{font-size:12px;color:#9aa8b8;display:flex;align-items:center;gap:8px}.connection i,.detail-state i{width:7px;height:7px;border-radius:50%;background:#617087}.connection i.online,.detail-state i.online{background:var(--cyan);box-shadow:0 0 10px rgba(53,216,199,.8)}.connection i.error{background:var(--red)}#clock{font-variant-numeric:tabular-nums;color:#728196;font-size:12px}.avatar{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#1678e9,#34b8c8);display:grid;place-items:center;font-size:11px;font-weight:800}.dashboard{position:relative;min-height:0;flex:1;display:grid;grid-template-columns:minmax(0,1fr) 344px}.map-shell{position:relative;min-width:0;overflow:hidden}#map{position:absolute;inset:0;background:#0a1724}.map-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(3,10,18,.18),transparent 35%,rgba(3,10,18,.22))}.maplibregl-ctrl-attrib{font-size:9px!important;background:rgba(7,16,28,.72)!important;color:#8592a4!important}.maplibregl-ctrl-attrib a{color:#aeb8c5!important}.map-toolbar{position:absolute;top:20px;left:20px;display:flex;flex-direction:column;gap:8px}.map-button{width:42px;height:42px;background:rgba(11,24,39,.91);border:1px solid rgba(151,176,202,.18);border-radius:11px;box-shadow:0 8px 24px rgba(0,0,0,.25);cursor:pointer;color:#8999ad}.map-button.active{color:var(--cyan);border-color:rgba(53,216,199,.34)}.glass{background:rgba(8,20,34,.88);backdrop-filter:blur(16px);border:1px solid rgba(154,178,204,.16);box-shadow:0 16px 40px rgba(0,0,0,.24)}.stats-strip{position:absolute;left:20px;bottom:20px;height:82px;border-radius:15px;padding:0 22px;display:flex;align-items:center}.stats-strip>div{min-width:128px;padding:0 22px;border-right:1px solid var(--line)}.stats-strip>div:first-child{padding-left:0}.stats-strip>div:last-child{border:0;padding-right:0}.stats-strip span{display:block;color:#74869b;font-size:10px;margin-bottom:4px}.stats-strip strong{font-size:25px;letter-spacing:-.05em}.stats-strip small{font-size:10px;color:#75879b;margin-left:4px}.map-legend{position:absolute;right:18px;bottom:18px;border-radius:10px;padding:10px 13px;display:flex;gap:12px;color:#8c9bad;font-size:9px}.map-legend span{display:flex;align-items:center;gap:5px}.map-legend i,.vehicle-dot{width:6px;height:6px;border-radius:50%;display:inline-block}.online{background:var(--cyan)}.delayed{background:var(--amber)}.offline{background:#576579}.fleet-panel{position:relative;z-index:4;background:var(--panel);border-left:1px solid var(--line);min-width:0;display:flex;flex-direction:column}.panel-head{height:77px;padding:18px 20px 12px;display:flex;align-items:center;justify-content:space-between}.panel-head h2{font-size:17px;margin:0}.panel-head h2 span{font-size:10px;color:#8d9bad;background:#17263a;border-radius:20px;padding:4px 8px;margin-left:5px}.plain-button{border:0;background:transparent;color:#728196;font-size:22px;cursor:pointer}.search{margin:4px 18px 13px;height:41px;background:#101e30;border:1px solid rgba(130,154,181,.15);border-radius:10px;display:flex;align-items:center;padding:0 13px;color:#64758a}.search input{width:100%;background:transparent;border:0;outline:0;color:#dce5ef;padding:0 9px;font-size:12px}.search input::placeholder{color:#57687c}.filters{padding:0 18px 13px;display:flex;gap:5px;border-bottom:1px solid var(--line)}.filter{border:0;background:transparent;color:#687a90;font-size:10px;padding:6px 11px;border-radius:20px;cursor:pointer}.filter.active{color:#9eeae1;background:rgba(53,216,199,.11)}.vehicle-list{min-height:0;overflow-y:auto;padding:7px 10px}.vehicle-list::-webkit-scrollbar{width:5px}.vehicle-list::-webkit-scrollbar-thumb{background:#26364a;border-radius:10px}.vehicle-card{border:0;border-bottom:1px solid rgba(139,164,191,.09);border-radius:0;padding:14px 12px;display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;cursor:pointer;transition:.18s}.vehicle-card:hover{background:#111f31}.vehicle-card.active{background:#111f31;border:1px solid rgba(91,148,207,.18);border-radius:10px}.vehicle-badge{width:34px;height:34px;border-radius:9px;background:#17263a;display:grid;place-items:center;color:#8799ae;font-size:8px;font-weight:800}.vehicle-main{min-width:0}.vehicle-main strong{font-size:12px}.vehicle-main p{margin:4px 0 0;color:#65778c;font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vehicle-state{text-align:right}.vehicle-state div{font-size:10px}.vehicle-state small{display:block;color:#637488;font-size:8px;margin-top:5px}.empty-state{margin:auto;text-align:center;color:#607186}.empty-state strong{display:block;color:#8c9bae;font-size:13px;margin-top:20px}.empty-state p{font-size:10px;line-height:1.7}.radar{width:52px;height:52px;margin:auto;border:1px solid rgba(53,216,199,.18);border-radius:50%;position:relative}.radar:before,.radar:after{content:'';position:absolute;border:1px solid rgba(53,216,199,.12);border-radius:50%;inset:9px}.radar:after{inset:19px}.radar i{position:absolute;left:50%;top:50%;width:2px;height:24px;background:linear-gradient(var(--cyan),transparent);transform-origin:bottom;animation:radar 2s linear infinite}@keyframes radar{to{transform:translate(-1px,-100%) rotate(360deg)}}.detail-drawer{position:absolute;z-index:30;top:78px;right:344px;bottom:0;width:300px;background:rgba(10,21,35,.97);border-left:1px solid var(--line);transform:translateX(102%);opacity:0;transition:.25s ease;padding:27px 24px;box-shadow:-22px 0 50px rgba(0,0,0,.22)}.detail-drawer.open{transform:none;opacity:1}.detail-drawer .close{position:absolute;right:16px;top:13px}.detail-title{display:flex;align-items:center;gap:13px;margin-top:21px}.detail-title h2{font-size:18px;margin:0}.detail-title p{color:#71839a;font-size:10px;margin:5px 0}.bus-symbol{width:44px;height:44px;border:1px solid rgba(53,216,199,.3);border-radius:11px;background:rgba(53,216,199,.08);display:grid;place-items:center;color:var(--cyan);font-size:9px;font-weight:800}.detail-state{margin-top:18px;padding:11px 12px;background:#101f32;border-radius:9px;display:flex;align-items:center;gap:8px;font-size:10px}.detail-state time{margin-left:auto;color:#6c7d92}.speed-gauge{width:142px;height:75px;margin:29px auto 14px;border:10px solid #182a3f;border-bottom:0;border-radius:90px 90px 0 0;position:relative;background:linear-gradient(105deg,rgba(53,216,199,.06),rgba(45,125,255,.05))}.speed-gauge:before{content:'';position:absolute;inset:-10px;border:10px solid transparent;border-top-color:var(--cyan);border-left-color:var(--cyan);border-radius:90px 90px 0 0;clip-path:polygon(0 0,66% 0,45% 100%,0 100%)}.speed-gauge div{position:absolute;inset:20px -10px 0;text-align:center}.speed-gauge strong{font-size:30px;letter-spacing:-.06em}.speed-gauge span{display:block;color:#718197;font-size:9px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:11px;overflow:hidden;margin:24px 0}.detail-grid div{background:#0d1929;padding:12px}.detail-grid div.wide{grid-column:1/-1}.detail-grid dt{font-size:8px;color:#687a8f;margin-bottom:5px}.detail-grid dd{font-size:10px;margin:0;color:#bec9d6}.packet{padding-top:14px;border-top:1px solid var(--line)}.packet span{font-size:8px;color:#68798d;display:block;margin-bottom:7px}.packet code{font-size:9px;color:#7790aa}.marker{width:31px;height:31px;border-radius:10px 10px 10px 3px;transform:rotate(-45deg);border:2px solid #b5fff6;background:#17a99d;box-shadow:0 5px 16px rgba(0,0,0,.4);display:grid;place-items:center;cursor:pointer}.marker.delayed{background:#dc9130;border-color:#ffe0a4}.marker.offline{background:#48576b;border-color:#8b98a8}.marker:after{content:'●';font-size:8px;color:white;transform:rotate(45deg)}.marker-label{position:absolute;left:32px;top:-2px;background:rgba(6,15,26,.9);border:1px solid rgba(157,183,210,.17);border-radius:7px;padding:5px 7px;font-size:9px;white-space:nowrap;color:#d3dce8}.marker-label.hidden-label{display:none}.toast{position:fixed;z-index:100;left:50%;bottom:28px;transform:translate(-50%,20px);opacity:0;background:#12243a;border:1px solid var(--line);border-radius:10px;padding:11px 16px;color:#b8c6d6;font-size:11px;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
.login-view{height:100%;position:relative;overflow:hidden;background:radial-gradient(circle at 80% 30%,rgba(22,117,159,.23),transparent 27%),radial-gradient(circle at 22% 86%,rgba(38,83,185,.2),transparent 28%),#07111e;display:grid;place-items:center}.login-view:before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(132,164,196,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(132,164,196,.035) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(circle at center,#000,transparent 75%)}.login-card{position:relative;width:min(440px,calc(100% - 38px));padding:48px 52px;border:1px solid rgba(138,168,198,.17);border-radius:24px;background:rgba(10,22,37,.8);box-shadow:0 40px 100px rgba(0,0,0,.4);backdrop-filter:blur(20px)}.login-card h1{margin:24px 0 17px;font-size:42px;line-height:1.14;letter-spacing:-.06em}.login-card h1 em{font-style:normal;color:var(--cyan)}.login-copy{font-size:13px;color:#7f8fa3;line-height:1.8}.login-button{height:52px;margin-top:30px;border-radius:12px;background:linear-gradient(100deg,#1e76eb,#24b8ad);display:flex;align-items:center;justify-content:space-between;padding:0 20px;text-decoration:none;font-size:13px;font-weight:700;box-shadow:0 13px 30px rgba(31,124,206,.22)}.security-note{margin-top:20px;text-align:center;font-size:9px;color:#64758a}.security-note i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--cyan);margin-right:6px}.login-orbit{position:absolute;border:1px solid rgba(53,216,199,.08);border-radius:50%}.orbit-a{width:700px;height:700px;right:-250px;top:-200px}.orbit-b{width:500px;height:500px;left:-180px;bottom:-220px}
@media(max-width:900px){.dashboard{grid-template-columns:1fr}.fleet-panel{position:absolute;right:0;top:0;bottom:0;width:320px;transform:translateX(100%)}.stats-strip>div{min-width:96px}.detail-drawer{right:0}.map-legend{display:none}}@media(max-width:640px){:root{--sidebar:0px}.sidebar{display:none}.topbar{height:68px;flex-basis:68px;padding:0 16px}.topbar h1{font-size:17px}.topbar .eyebrow,#clock{display:none}.dashboard{height:calc(100% - 68px)}.stats-strip{left:10px;right:10px;bottom:10px;height:72px;padding:0 12px}.stats-strip>div{min-width:0;flex:1;padding:0 10px}.stats-strip strong{font-size:19px}.connection span{display:none}.detail-drawer{top:68px;width:min(300px,100%)}.login-card{padding:38px 30px}.login-card h1{font-size:35px}}

/* Compact vehicle markers */
.vehicle-marker{position:relative;width:12px;height:12px;cursor:pointer}
.marker,.marker.delayed,.marker.offline{width:12px;height:12px;border-radius:50%;transform:none;border:1.5px solid #cafff4;background:#20c997;box-shadow:0 0 0 3px rgba(32,201,151,.16),0 3px 8px rgba(0,0,0,.4)}
.marker:after{content:none}
.marker-label{left:50%;top:auto;bottom:14px;transform:translateX(-50%);border-radius:3px;padding:1px 3px;font-size:8px;line-height:1.15}

/* Top map information panels */
.stats-strip{top:20px;bottom:auto}
.map-legend{top:20px;bottom:auto}
@media(max-width:640px){.stats-strip{top:10px;bottom:auto}}

/* Header status summary */
.header-summary{display:flex;align-items:center;gap:20px;margin-left:auto;margin-right:24px}
.header-stats{display:flex;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:rgba(255,255,255,.02)}
.header-stats span{padding:7px 10px;border-right:1px solid var(--line);color:#75869a;font-size:9px;white-space:nowrap}
.header-stats span:last-child{border-right:0}
.header-stats strong{margin:0 2px;color:#dce7f2;font-size:12px}
.header-legend{display:flex;gap:10px;color:#7e8ea2;font-size:9px;white-space:nowrap}
.header-legend span{display:flex;align-items:center;gap:4px}
.header-legend i{width:6px;height:6px;border-radius:50%;display:inline-block}
.track-button{margin-top:6px;padding:3px 7px;border:1px solid rgba(53,216,199,.24);border-radius:10px;background:transparent;color:#7f93a9;font-size:8px;cursor:pointer}
.track-button.active{background:rgba(53,216,199,.14);border-color:rgba(53,216,199,.55);color:#8cecdf}
@media(max-width:1200px){.header-legend{display:none}.header-summary{margin-right:12px}.header-stats span{padding:7px 7px}}
@media(max-width:980px){.header-summary{display:none}}

/* Fleet-first layout */
.workspace{width:100%}
.dashboard{grid-template-columns:344px minmax(0,1fr)}
.fleet-panel{position:absolute;z-index:10;top:-78px;bottom:0;left:0;width:344px;overflow:hidden;border-left:0;border-right:1px solid var(--line)}
.fleet-brand{height:78px;flex:0 0 78px;padding:0 16px;display:flex;align-items:center}
.fleet-brand h1{margin:0;font-size:20px;letter-spacing:-.04em}
.map-shell{grid-column:2;grid-row:1}
.header-logout{flex:0 0 40px}
.detail-drawer{left:344px;right:auto;border-left:0;border-right:1px solid var(--line);transform:translateX(-102%);pointer-events:none}
.detail-drawer.open{transform:none;pointer-events:auto}
@media(max-width:900px){.dashboard{grid-template-columns:320px minmax(0,1fr)}.fleet-panel{position:absolute;top:-78px;bottom:0;left:0;width:320px;transform:none}.detail-drawer{left:320px;right:auto}}
@media(max-width:640px){.dashboard{grid-template-columns:minmax(250px,42%) minmax(0,1fr)}.fleet-panel{width:min(320px,42%)}.detail-drawer{left:0;right:auto}}
.vehicle-card{grid-template-columns:minmax(0,1fr) auto}
.panel-head{height:52px;padding:10px 12px 6px}
.search{flex:0 0 41px;margin:0 10px 8px}
.vehicle-list{flex:1 1 auto;min-height:0;overflow-y:auto}
.tracking-detail{flex:0 0 auto;overflow:visible;margin:0 10px 10px;padding:10px;border:1px solid var(--line);border-radius:10px;background:#0a1625}
.tracking-detail-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.tracking-detail-head .eyebrow{margin-bottom:3px}
.tracking-detail-head h3{margin:0;font-size:15px}
.tracking-detail-head>p{margin:0;color:#71839a;font-size:9px}
.tracking-detail .detail-state{margin-top:10px;padding:8px 9px}
.tracking-speed{display:flex;align-items:baseline;margin:11px 1px 8px;color:#71839a;font-size:9px}
.tracking-speed strong{margin-left:auto;color:#e1eaf4;font-size:22px}
.tracking-speed small{margin-left:4px}
.tracking-detail .detail-grid{margin:8px 0}
.tracking-detail .detail-grid div{padding:8px 9px}
.tracking-detail .packet{padding-top:8px}

/* MQTT and signed-in user header panels */
.mqtt-panel{min-width:178px;height:43px;padding:0 11px;display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:9px;background:rgba(255,255,255,.025)}
.mqtt-panel>i{width:8px;height:8px;flex:0 0 8px;border-radius:50%;background:#617087}
.mqtt-panel>i.online{background:var(--cyan);box-shadow:0 0 10px rgba(53,216,199,.8)}
.mqtt-panel>i.error{background:var(--red)}
.mqtt-panel div{display:flex;min-width:0;flex-direction:column;gap:2px}
.mqtt-panel small{color:#63758b;font-size:8px;font-weight:700;letter-spacing:.12em}
.mqtt-panel strong{overflow:hidden;color:#b9c7d6;font-size:10px;font-weight:600;white-space:nowrap;text-overflow:ellipsis}
.mqtt-panel>span{margin-left:auto;color:#66788d;font-size:8px;white-space:nowrap}
.mqtt-panel b{margin-right:2px;color:#95a6b9;font-size:10px}
.user-account{display:flex;min-width:0;max-width:180px;flex-direction:column;align-items:flex-end;gap:2px}
.user-account>strong,.user-account>small{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.user-account>strong{color:#c5d0dc;font-size:11px;font-weight:600}
.user-account>small{color:#6f8196;font-size:8px}
.header-logout{width:auto;height:34px;flex:0 0 auto;padding:0 12px;display:flex;align-items:center;border:1px solid var(--line);border-radius:8px;color:#8fa0b4;font-size:10px;text-decoration:none}
@media(max-width:980px){.header-summary{display:flex}.header-stats{display:none}.user-account{max-width:100px}}
@media(max-width:720px){.mqtt-panel{min-width:130px}.mqtt-panel>span{display:none}.header-actions{gap:8px}.topbar{gap:10px}.topbar .eyebrow{display:none}.topbar h1{font-size:15px}.user-account{max-width:70px}}

/* Header alignment follows the fleet/map columns */
.topbar{display:grid;grid-template-columns:344px minmax(0,1fr) auto;padding:0}
.header-summary{grid-column:2;min-width:0;margin:0;padding:0 20px;justify-self:stretch}
.header-actions{grid-column:3;padding-right:26px}
#clock{display:block;flex:0 0 auto;color:#aab9c9;font-size:16px;font-weight:600;letter-spacing:.04em}
.user-account{display:block;text-align:right}
@media(max-width:1200px){.header-stats{display:none}}
@media(max-width:900px){.topbar{grid-template-columns:320px minmax(0,1fr) auto}.header-summary{padding-left:16px}}
@media(max-width:640px){.topbar{grid-template-columns:minmax(250px,42%) minmax(0,1fr) auto}.header-summary{padding:0 10px}#clock{display:block;font-size:14px}.header-actions{padding-right:10px}}

.mqtt-panel{min-width:0;width:auto;height:34px;padding:0 11px;gap:7px}
.mqtt-panel>strong{color:#9eafc1;font-size:10px;letter-spacing:.08em}
.maplibregl-popup-content{min-width:150px;padding:9px 11px;border:1px solid var(--line);border-radius:7px;background:#0b1929;color:#dce8f3;box-shadow:0 8px 24px rgba(0,0,0,.38)}
.maplibregl-popup-content strong,.maplibregl-popup-content span,.maplibregl-popup-content small{display:block}
.maplibregl-popup-content strong{font-size:11px}.maplibregl-popup-content span{margin-top:3px;color:#8395aa;font-size:8px}.maplibregl-popup-content small{margin-top:5px;color:#6fcfc2;font-size:8px}.maplibregl-popup-tip{border-top-color:#0b1929!important;border-bottom-color:#0b1929!important}
.tracking-arrival{margin-top:8px;padding:8px 9px;border-radius:7px;background:rgba(255,209,102,.1);color:#ffd166;font-size:10px;font-weight:600}

/* Follow the operating-system color scheme */
@media(prefers-color-scheme:light){
  :root{--ink:#172333;--muted:#66768a;--line:rgba(53,72,94,.16);--panel:#fff;--panel-2:#f3f6fa;--cyan:#087f73;--blue:#1769d2;--amber:#a96700;--red:#cf3652;background:#f4f7fb;color-scheme:light}
  body,.app{background:#f4f7fb}
  .topbar{background:#fff;border-bottom-color:#dbe2ea}
  .topbar h1{color:#172333}
  .eyebrow{color:#77869a}
  #clock{color:#33445a}
  .header-stats,.mqtt-panel{background:#f7f9fc;border-color:#d8e0e9}
  .header-stats span{color:#69798d;border-color:#d8e0e9}
  .header-stats strong,.mqtt-panel>strong{color:#27374a}
  .mqtt-panel b{color:#52657b}
  .user-account>strong{color:#2f4054}
  .header-logout{color:#455970;background:#f8fafc;border-color:#d6dee8}
  .fleet-panel{background:#fff;border-color:#d9e1ea}
  .panel-head h2{color:#1b293a}
  .panel-head h2 span{color:#51657b;background:#e9eef4}
  .search{color:#65778d;background:#f3f6fa;border-color:#d9e1ea}
  .search input{color:#26384c}
  .search input::placeholder{color:#8996a7}
  .vehicle-list::-webkit-scrollbar-thumb{background:#cbd4df}
  .vehicle-card{border-bottom-color:#e3e8ee}
  .vehicle-card:hover{background:#eef5fa}
  .vehicle-card.active{background:#eef5fa;border-color:#ccdbe7}
  .vehicle-main strong{color:#1e3044}
  .vehicle-main p{color:#65788e}
  .vehicle-state{color:#34495f}
  .track-button{color:#50677d;border-color:rgba(8,127,115,.3)}
  .track-button.active{color:#086e64;background:rgba(8,127,115,.1);border-color:rgba(8,127,115,.5)}
  .empty-state{color:#7b8999}
  .empty-state strong{color:#4b5d72}
  .tracking-detail{background:#f7f9fc;border-color:#d9e1ea}
  .tracking-detail-head h3{color:#1e3044}
  .tracking-detail-head>p,.tracking-speed{color:#65788e}
  .detail-state{color:#354b61;background:#edf2f7}
  .detail-state time{color:#708298}
  .tracking-speed strong{color:#1e3044}
  .detail-grid{background:#dce3eb;border-color:#dce3eb}
  .detail-grid div{background:#fff}
  .detail-grid dt,.packet span{color:#718298}
  .detail-grid dd{color:#30445a}
  .packet{border-color:#dce3eb}
  .packet code{color:#496882}
  .map-shade{background:linear-gradient(180deg,rgba(255,255,255,.05),transparent 35%,rgba(255,255,255,.08))}
  .maplibregl-ctrl-attrib{background:rgba(255,255,255,.82)!important;color:#5d6c7e!important}
  .maplibregl-ctrl-attrib a{color:#334b64!important}
  .marker-label{color:#172333;background:rgba(255,255,255,.94);border-color:#cfd8e2;box-shadow:0 2px 8px rgba(23,35,51,.14)}
  .maplibregl-popup-content{color:#203247;background:#fff;border-color:#d3dce6;box-shadow:0 8px 24px rgba(32,50,71,.2)}
  .maplibregl-popup-content span{color:#687b90}
  .maplibregl-popup-content small{color:#087f73}
  .maplibregl-popup-tip{border-top-color:#fff!important;border-bottom-color:#fff!important}
  .toast{color:#34495f;background:#fff;border-color:#d3dce6;box-shadow:0 8px 24px rgba(32,50,71,.18)}
  .tracking-arrival{color:#8a5700;background:rgba(255,183,58,.14)}
}