/*
 * GPS Simulator
 * Created by Habib Nejara
 * Copyright (c) 2024-2026 Habib Nejara
 * Licensed under the MIT License.
 */

:root{
--bg:#f3f9ff; 
--card:#ffffff;
--accent:#e53935; 
--accent-2:#1e90ff; 
--muted:#6b7280;
}

body.dark-mode{
--bg:#1a1a1a;
--card:#2d2d2d;
--accent:#e53935;
--accent-2:#4a9eff;
--muted:#9ca3af;
color:#e0e0e0;
}

body.dark-mode .sidebar{
background:var(--card);
border-right:1px solid rgba(255,255,255,0.1);
}

body.dark-mode input[type="text"], 
body.dark-mode input[type="number"], 
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode select{
background:#3a3a3a;
border-color:#4a4a4a;
color:#ffffff;
}

body.dark-mode input[type="text"]:focus, 
body.dark-mode input[type="number"]:focus, 
body.dark-mode input[type="email"]:focus,
body.dark-mode input[type="password"]:focus,
body.dark-mode select:focus{
border-color:var(--accent-2);
box-shadow:0 0 0 3px rgba(74, 158, 255, 0.2);
}

body.dark-mode .vehicle-card{
background:linear-gradient(180deg, #2d2d2d, #252525);
border-color:rgba(255,255,255,0.1);
}

body.dark-mode .vehicle-card-title{
color:#e0e0e0;
}

body.dark-mode .vehicle-status-pill{
background:rgba(74,158,255,0.18);
}

body.dark-mode .vehicle-status-pill.is-running{
background:rgba(34,197,94,0.2);
color:#86efac;
}

body.dark-mode .vehicle-card.is-running{
border-color:rgba(34,197,94,0.5);
box-shadow:0 0 0 1px rgba(34,197,94,0.16), 0 4px 14px rgba(34,197,94,0.18);
}

body.dark-mode .vehicle-card.is-route-active{
border-color:rgba(74,158,255,0.75);
box-shadow:0 0 0 1px rgba(74,158,255,0.26), 0 4px 16px rgba(74,158,255,0.16);
}

body.dark-mode .vehicle-card.is-running.is-route-active{
border-color:rgba(74,158,255,0.82);
box-shadow:0 0 0 1px rgba(74,158,255,0.3), 0 4px 16px rgba(34,197,94,0.18);
}

body.dark-mode .vehicle-route-switch{
background:rgba(74,158,255,0.14);
border-color:rgba(74,158,255,0.32);
color:#93c5fd;
}

body.dark-mode .vehicle-route-switch:hover,
body.dark-mode .vehicle-route-switch.is-active{
background:var(--accent-2);
border-color:#93c5fd;
color:white;
}

body.dark-mode .vehicle-remove-btn{
background:rgba(229,57,53,0.15);
border-color:rgba(229,57,53,0.35);
}

body.dark-mode .vehicle-collapse-btn{
background:rgba(74,158,255,0.14);
border-color:rgba(74,158,255,0.3);
color:#93c5fd;
}

body.dark-mode .vehicle-delete-confirm{
background:rgba(229,57,53,0.12);
border-color:rgba(229,57,53,0.35);
color:#fecaca;
}

body.dark-mode .vehicle-delete-confirm-cancel{
background:#3a3a3a;
color:#e0e0e0;
border-color:rgba(255,255,255,0.12) !important;
}

body.dark-mode .vehicle-route-panel{
background:rgba(74,158,255,0.08);
border-color:rgba(74,158,255,0.18);
}

body.dark-mode .vehicle-route-summary strong{
color:#f8fafc;
}

body.dark-mode .vehicle-route-btn{
background:#343230;
border-color:rgba(255,255,255,0.14);
color:#93c5fd;
}

body.dark-mode .log{
background:#0a0a0a;
color:#7cffb2;
}

body.dark-mode .small-muted{
color:var(--muted);
}

body.dark-mode code{
background:rgba(255,255,255,0.1);
color:#fff;
}

body.dark-mode #routeList{
background:#2d2d2d !important;
border-color:rgba(255,255,255,0.15) !important;
color:#ffffff;
}

body.dark-mode label{
color:var(--muted);
}

body.dark-mode .badge{
background:rgba(229,57,53,0.2);
color:var(--accent);
}

body.dark-mode .footer-note{
color:var(--muted);
}

.footer-link-button{
background:none;
border:none;
color:var(--accent-2);
cursor:pointer;
font-size:11px;
font-weight:600;
margin-top:7px;
padding:3px 6px;
text-decoration:underline;
text-underline-offset:2px;
}

.footer-link-button:hover{
color:var(--accent);
}

.footer-brand-link{
color:var(--accent-2);
font-weight:700;
text-decoration:none;
}

.footer-brand-link:hover{
color:var(--accent);
text-decoration:underline;
text-underline-offset:2px;
}

.privacy-modal{
display:none;
position:fixed;
inset:0;
z-index:5000;
align-items:center;
justify-content:center;
padding:18px;
}

.privacy-modal.is-open{
display:flex;
}

body.privacy-modal-open{
overflow:hidden;
}

.privacy-modal-backdrop{
position:absolute;
inset:0;
background:rgba(15,23,42,0.62);
backdrop-filter:blur(2px);
}

.privacy-modal-panel{
position:relative;
width:min(620px, 100%);
max-height:min(82vh, 720px);
background:#ffffff;
border:1px solid rgba(30,144,255,0.18);
border-radius:8px;
box-shadow:0 20px 55px rgba(15,23,42,0.35);
display:flex;
flex-direction:column;
overflow:hidden;
}

.privacy-modal-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:14px 16px;
border-bottom:1px solid rgba(15,23,42,0.1);
}

.privacy-modal-header h2{
font-size:18px;
line-height:1.25;
margin:0;
color:#111827;
}

.privacy-modal-close{
width:32px;
height:32px;
border:none;
border-radius:6px;
background:rgba(207,75,51,0.1);
color:#cf4b33;
cursor:pointer;
font-size:24px;
line-height:1;
display:flex;
align-items:center;
justify-content:center;
}

.privacy-modal-close:hover{
background:rgba(207,75,51,0.18);
}

.privacy-modal-body{
padding:14px 16px;
overflow:auto;
color:#334155;
font-size:13px;
line-height:1.55;
}

.privacy-modal-body p{
margin:0 0 12px;
}

.privacy-modal-body h3{
margin:16px 0 8px;
font-size:14px;
line-height:1.3;
color:#111827;
}

.privacy-template-note{
background:rgba(30,144,255,0.08);
border:1px solid rgba(30,144,255,0.18);
border-radius:6px;
padding:9px;
}

.privacy-modal-footer{
padding:12px 16px;
border-top:1px solid rgba(15,23,42,0.1);
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
}

.privacy-consent-hint{
display:none;
color:var(--muted);
font-size:12px;
line-height:1.4;
text-align:left;
}

.privacy-modal.requires-consent .privacy-consent-hint{
display:block;
}

.privacy-modal.requires-consent .privacy-modal-close,
.privacy-modal.requires-consent .privacy-close-action{
display:none;
}

.privacy-modal.is-accepted .privacy-accept-button{
display:none;
}

.privacy-modal-actions{
display:flex;
align-items:center;
justify-content:flex-end;
gap:8px;
flex-wrap:wrap;
margin-left:auto;
}

.privacy-close-action,
.privacy-accept-button{
background:var(--accent-2) !important;
border-color:var(--accent-2) !important;
color:#ffffff !important;
}

.privacy-close-action:hover,
.privacy-accept-button:hover{
background:#1976d2 !important;
border-color:#1976d2 !important;
}

.account-delete-modal{
display:none;
position:fixed;
inset:0;
z-index:5100;
align-items:center;
justify-content:center;
padding:18px;
}
.account-delete-modal.is-open{
display:flex;
}
body.account-delete-modal-open,
body.usage-guide-modal-open,
body.install-app-modal-open{
overflow:hidden;
}
.account-delete-backdrop{
position:absolute;
inset:0;
background:rgba(15,23,42,0.58);
}
.account-delete-panel{
position:relative;
width:min(430px, 100%);
max-height:calc(100vh - 36px);
display:flex;
flex-direction:column;
overflow:hidden;
border:1px solid rgba(15,23,42,0.1);
border-radius:8px;
background:#ffffff;
box-shadow:0 24px 60px rgba(15,23,42,0.28);
}
.account-delete-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:14px 16px;
border-bottom:1px solid rgba(15,23,42,0.1);
}
.account-delete-header h2{
margin:0;
font-size:18px;
line-height:1.25;
color:#111827;
}
.account-delete-close{
width:32px;
height:32px;
display:flex;
align-items:center;
justify-content:center;
border:none;
border-radius:6px;
background:rgba(207,75,51,0.1);
color:#cf4b33;
cursor:pointer;
font-size:24px;
line-height:1;
}
.account-delete-body{
padding:14px 16px;
color:#334155;
font-size:13px;
line-height:1.55;
}
.account-delete-body p{
margin:0;
}
.account-delete-actions{
display:flex;
justify-content:flex-end;
gap:8px;
padding:12px 16px;
border-top:1px solid rgba(15,23,42,0.1);
}
.account-delete-actions .btn{
margin-top:0;
}
.account-delete-cancel{
background:#64748b;
}
.account-delete-confirm{
background:#cf4b33;
}
.usage-guide-panel{
width:min(620px, 100%);
}
.usage-guide-body{
padding:14px 16px;
overflow:auto;
color:#334155;
font-size:13px;
line-height:1.55;
}
.usage-guide-intro{
margin:0 0 12px;
color:#475569;
}
.usage-guide-list{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}
.usage-guide-list section{
padding:10px;
border:1px solid rgba(30,144,255,0.14);
border-radius:7px;
background:rgba(30,144,255,0.045);
}
.usage-guide-list h3{
margin:0 0 5px;
font-size:13px;
line-height:1.3;
color:#0f172a;
}
.usage-guide-list p{
margin:0;
font-size:12px;
line-height:1.45;
color:#475569;
}
.install-app-panel{
width:min(460px, 100%);
}
.install-app-body{
padding:14px 16px;
color:#334155;
font-size:13px;
line-height:1.55;
}
.install-app-body p{
margin:0 0 10px;
}
.install-app-steps{
display:grid;
gap:7px;
padding:10px;
border:1px solid rgba(30,144,255,0.14);
border-radius:7px;
background:rgba(30,144,255,0.045);
}
.install-app-steps p{
margin:0;
font-size:12px;
line-height:1.45;
}
.install-app-confirm{
background:var(--accent-2);
}
.install-app-prompt{
position:fixed;
left:50%;
bottom:18px;
width:min(440px, calc(100% - 28px));
display:grid;
grid-template-columns:44px minmax(0, 1fr) auto;
gap:12px;
align-items:center;
padding:12px;
border:1px solid rgba(30,144,255,0.18);
border-radius:8px;
background:#ffffff;
box-shadow:0 18px 48px rgba(15,23,42,0.22);
z-index:4900;
opacity:0;
pointer-events:none;
transform:translate(-50%, calc(100% + 24px));
transition:opacity 0.24s ease, transform 0.24s ease;
}
.install-app-prompt.is-visible{
opacity:1;
pointer-events:auto;
transform:translate(-50%, 0);
}
.install-app-prompt img{
width:44px;
height:44px;
border-radius:10px;
display:block;
box-shadow:0 4px 12px rgba(15,23,42,0.14);
}
.install-app-prompt-copy{
display:grid;
gap:3px;
min-width:0;
}
.install-app-prompt-copy strong{
font-size:13px;
line-height:1.25;
color:#0f172a;
}
.install-app-prompt-copy span{
font-size:12px;
line-height:1.35;
color:#64748b;
}
.install-app-prompt-actions{
display:flex;
align-items:center;
gap:8px;
}
.install-app-prompt-dismiss{
height:34px;
padding:0 10px;
border:1px solid rgba(148,163,184,0.35);
border-radius:6px;
background:#ffffff;
color:#475569;
font-size:12px;
font-weight:600;
cursor:pointer;
}
.install-app-prompt-install{
height:34px;
margin-top:0 !important;
padding:0 12px !important;
background:var(--accent-2);
font-size:12px;
}

body.dark-mode .footer-link-button{
color:#93c5fd;
}

body.dark-mode .footer-brand-link{
color:#93c5fd;
}

body.dark-mode .privacy-modal-panel{
background:#2a2a2a;
border-color:rgba(255,255,255,0.14);
box-shadow:0 20px 55px rgba(0,0,0,0.55);
}

body.dark-mode .privacy-modal-header,
body.dark-mode .privacy-modal-footer{
border-color:rgba(255,255,255,0.12);
}

body.dark-mode .privacy-modal-header h2,
body.dark-mode .privacy-modal-body h3,
body.dark-mode .privacy-modal-body{
color:#ffffff;
}

body.dark-mode .privacy-template-note{
background:rgba(30,144,255,0.12);
border-color:rgba(147,197,253,0.25);
}

body.dark-mode .account-delete-panel{
background:#2a2a2a;
border-color:rgba(255,255,255,0.14);
box-shadow:0 20px 55px rgba(0,0,0,0.55);
}

body.dark-mode .account-delete-header,
body.dark-mode .account-delete-actions{
border-color:rgba(255,255,255,0.12);
}

body.dark-mode .account-delete-header h2,
body.dark-mode .account-delete-body{
color:#ffffff;
}

body.dark-mode .usage-guide-body,
body.dark-mode .usage-guide-list h3{
color:#ffffff;
}

body.dark-mode .usage-guide-intro,
body.dark-mode .usage-guide-list p{
color:#e5e7eb;
}

body.dark-mode .usage-guide-list section{
background:rgba(74,158,255,0.1);
border-color:rgba(147,197,253,0.22);
}

body.dark-mode .install-app-body{
color:#ffffff;
}

body.dark-mode .install-app-steps{
background:rgba(74,158,255,0.1);
border-color:rgba(147,197,253,0.22);
}

body.dark-mode .install-app-prompt{
background:#2a2a2a;
border-color:rgba(147,197,253,0.22);
box-shadow:0 18px 48px rgba(0,0,0,0.5);
}

body.dark-mode .install-app-prompt-copy strong{
color:#ffffff;
}

body.dark-mode .install-app-prompt-copy span{
color:#e5e7eb;
}

body.dark-mode .install-app-prompt-dismiss{
background:#3a3a3a;
border-color:rgba(255,255,255,0.16);
color:#ffffff;
}

body.dark-mode .privacy-consent-hint{
color:#e5e7eb;
}

body.dark-mode div[style*="background:#f8f9fa"]{
background:#2a2a2a !important;
border-color:rgba(74, 158, 255, 0.2) !important;
}

body.dark-mode div[style*="background:#f8f9fa"] label{
color:var(--accent-2) !important;
}

body.dark-mode input[type="file"]{
background:#3a3a3a;
border-color:#4a4a4a;
color:#ffffff;
}

body.dark-mode .server-demo-link{
background:rgba(74,158,255,0.14);
border-color:rgba(147,197,253,0.28);
color:#93c5fd;
}

body.dark-mode .server-demo-link:hover{
background:var(--accent-2);
border-color:var(--accent-2);
color:#ffffff;
}

body.dark-mode .server-demo-note{
color:var(--muted);
}

body.dark-mode .auth-panel{
background:rgba(74,158,255,0.08);
border-color:rgba(147,197,253,0.24);
}

body.dark-mode .auth-panel-header strong,
body.dark-mode .auth-user-label{
color:#ffffff;
}

body.dark-mode .account-menu-btn{
background:#3a3a3a;
border-color:#4a4a4a;
color:#93c5fd;
}

body.dark-mode .account-menu{
background:#2d2d2d;
border-color:rgba(255,255,255,0.14);
box-shadow:0 14px 30px rgba(0,0,0,0.42);
}

body.dark-mode .account-menu button{
color:#ffffff;
}

body.dark-mode .account-menu button:hover{
background:rgba(74,158,255,0.16);
color:#93c5fd;
}

body.dark-mode .account-menu button.danger{
color:#fecaca;
}

body.dark-mode .account-menu button.danger:hover{
background:rgba(207,75,51,0.18);
color:#ffffff;
}

body.dark-mode .auth-status{
background:rgba(74,158,255,0.16);
color:#bfdbfe;
}

body.dark-mode .auth-status.is-online{
background:rgba(34,197,94,0.18);
color:#86efac;
}

body.dark-mode .auth-message{
color:#e5e7eb;
}

body.dark-mode .btn{
color:#ffffff;
}

body.dark-mode .btn:hover{
opacity:0.9;
}

body.dark-mode #routeStatus{
color:var(--muted);
}

.route-missing-notice{
background:rgba(207,75,51,0.09);
border:1px solid rgba(207,75,51,0.32);
border-radius:6px;
color:#7f1d1d;
font-size:12px;
line-height:1.45;
padding:10px;
}

.route-missing-notice strong{
display:block;
font-size:13px;
margin-bottom:6px;
}

#routePanel.route-panel-attention{
outline:2px solid rgba(30,144,255,0.55);
box-shadow:0 0 0 4px rgba(30,144,255,0.14);
}

body.dark-mode .route-missing-notice{
background:rgba(207,75,51,0.16);
border-color:rgba(248,113,113,0.42);
color:#ffffff;
}

body.dark-mode .route-point-tooltip{
background:rgba(0,0,0,0.9) !important;
color:white !important;
}

.marker-controls{
margin-top:50px !important;
}

body.dark-mode .marker-controls{
background:#2d2d2d !important;
border:1px solid rgba(255,255,255,0.2) !important;
box-shadow:0 2px 8px rgba(0,0,0,0.5) !important;
}

body.dark-mode .marker-control-btn{
    background:#3a3a3a !important;
    border:2px solid rgba(255,255,255,0.2) !important;
}

body.dark-mode .marker-control-btn:hover{
    background:#4a4a4a !important;
    border-color:rgba(255,255,255,0.3) !important;
}

.marker-controls{
margin-top:18px !important;
background:rgba(255,255,255,0.96) !important;
border:1px solid rgba(30,144,255,0.16) !important;
border-radius:7px !important;
box-shadow:0 6px 18px rgba(15,23,42,0.18) !important;
padding:4px !important;
display:flex !important;
flex-direction:column !important;
gap:4px !important;
position:relative !important;
}

.marker-control-btn{
width:34px !important;
height:34px !important;
padding:0 !important;
border:1px solid rgba(30,144,255,0.18) !important;
border-radius:6px !important;
background:#ffffff !important;
color:var(--accent-2) !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
font-size:15px !important;
font-weight:700 !important;
line-height:1 !important;
box-shadow:none !important;
cursor:pointer !important;
transition:background 0.15s, border-color 0.15s, transform 0.15s, box-shadow 0.15s !important;
}

.marker-control-btn:hover{
background:#f3f7fb !important;
border-color:rgba(30,144,255,0.35) !important;
transform:translateY(-1px);
}

.marker-control-btn.is-active{
background:var(--accent-2) !important;
border-color:#58b5ff !important;
color:white !important;
box-shadow:0 0 0 2px rgba(30,144,255,0.18), 0 4px 10px rgba(30,144,255,0.25) !important;
}

.marker-control-img{
width:22px;
height:22px;
display:block;
object-fit:contain;
}

.marker-control-start-end-svg{
width:26px !important;
height:26px !important;
display:block !important;
color:#cf4b33 !important;
fill:#cf4b33 !important;
stroke:#cf4b33 !important;
filter:drop-shadow(0 0 1px rgba(255,255,255,0.95)) drop-shadow(0 1px 1px rgba(255,255,255,0.72)) !important;
-webkit-filter:drop-shadow(0 0 1px rgba(255,255,255,0.95)) drop-shadow(0 1px 1px rgba(255,255,255,0.72)) !important;
mix-blend-mode:normal !important;
opacity:1 !important;
}

.marker-control-btn.is-active .marker-control-start-end-svg,
.marker-control-btn:not(.is-active) .marker-control-start-end-svg{
color:#cf4b33 !important;
fill:#cf4b33 !important;
stroke:#cf4b33 !important;
filter:drop-shadow(0 0 1px rgba(255,255,255,0.95)) drop-shadow(0 1px 1px rgba(255,255,255,0.72)) !important;
-webkit-filter:drop-shadow(0 0 1px rgba(255,255,255,0.95)) drop-shadow(0 1px 1px rgba(255,255,255,0.72)) !important;
mix-blend-mode:normal !important;
opacity:1 !important;
}

.marker-control-stop-img{
filter:drop-shadow(0 0 1px rgba(255,255,255,0.95)) drop-shadow(0 1px 1px rgba(255,255,255,0.72)) !important;
-webkit-filter:drop-shadow(0 0 1px rgba(255,255,255,0.95)) drop-shadow(0 1px 1px rgba(255,255,255,0.72)) !important;
opacity:1 !important;
}

.marker-control-location-img{
width:24px;
height:24px;
filter:none !important;
-webkit-filter:none !important;
mix-blend-mode:normal !important;
opacity:1 !important;
}

.marker-control-btn.is-active .marker-control-location-img,
.marker-control-btn:not(.is-active) .marker-control-location-img,
.location-control-btn .marker-control-location-img,
.location-control-btn.is-active .marker-control-location-img,
body.dark-mode .location-control-btn .marker-control-location-img,
body.dark-mode .location-control-btn.is-active .marker-control-location-img{
filter:none !important;
-webkit-filter:none !important;
mix-blend-mode:normal !important;
opacity:1 !important;
}

.marker-control-location-svg{
width:22px !important;
height:22px !important;
display:block !important;
color:#cf4b33 !important;
fill:#cf4b33 !important;
stroke:none !important;
filter:drop-shadow(0 0 1px rgba(255,255,255,0.95)) drop-shadow(0 1px 1px rgba(255,255,255,0.72)) !important;
-webkit-filter:drop-shadow(0 0 1px rgba(255,255,255,0.95)) drop-shadow(0 1px 1px rgba(255,255,255,0.72)) !important;
mix-blend-mode:normal !important;
opacity:1 !important;
}

.marker-control-btn.is-active .marker-control-location-svg,
.marker-control-btn:not(.is-active) .marker-control-location-svg,
.location-control-btn .marker-control-location-svg,
.location-control-btn.is-active .marker-control-location-svg,
body.dark-mode .location-control-btn .marker-control-location-svg,
body.dark-mode .location-control-btn.is-active .marker-control-location-svg{
color:#cf4b33 !important;
fill:#cf4b33 !important;
stroke:none !important;
filter:drop-shadow(0 0 1px rgba(255,255,255,0.95)) drop-shadow(0 1px 1px rgba(255,255,255,0.72)) !important;
-webkit-filter:drop-shadow(0 0 1px rgba(255,255,255,0.95)) drop-shadow(0 1px 1px rgba(255,255,255,0.72)) !important;
mix-blend-mode:normal !important;
opacity:1 !important;
}

.marker-control-arrow-img{
width:21px;
height:21px;
filter:drop-shadow(0 0 1px rgba(255,255,255,0.95)) drop-shadow(0 1px 1px rgba(255,255,255,0.72)) !important;
-webkit-filter:drop-shadow(0 0 1px rgba(255,255,255,0.95)) drop-shadow(0 1px 1px rgba(255,255,255,0.72)) !important;
opacity:1 !important;
}

.marker-control-btn.is-active .marker-control-arrow-img,
.marker-control-btn:not(.is-active) .marker-control-arrow-img{
filter:drop-shadow(0 0 1px rgba(255,255,255,0.95)) drop-shadow(0 1px 1px rgba(255,255,255,0.72)) !important;
-webkit-filter:drop-shadow(0 0 1px rgba(255,255,255,0.95)) drop-shadow(0 1px 1px rgba(255,255,255,0.72)) !important;
opacity:1 !important;
}

.marker-control-start-end-svg,
.marker-control-btn.is-active .marker-control-start-end-svg,
.marker-control-btn:not(.is-active) .marker-control-start-end-svg,
.marker-control-stop-img,
.marker-control-location-svg,
.marker-control-btn.is-active .marker-control-location-svg,
.marker-control-btn:not(.is-active) .marker-control-location-svg,
.location-control-btn .marker-control-location-svg,
.location-control-btn.is-active .marker-control-location-svg,
body.dark-mode .location-control-btn .marker-control-location-svg,
body.dark-mode .location-control-btn.is-active .marker-control-location-svg,
.marker-control-arrow-img,
.marker-control-btn.is-active .marker-control-arrow-img,
.marker-control-btn:not(.is-active) .marker-control-arrow-img{
filter:drop-shadow(0 0 0.65px rgba(255,255,255,0.72)) !important;
-webkit-filter:drop-shadow(0 0 0.65px rgba(255,255,255,0.72)) !important;
}

.location-control-btn{
background:#ffffff !important;
color:var(--accent-2) !important;
}

.location-control-btn.is-active{
background:var(--accent-2) !important;
border-color:#58b5ff !important;
color:white !important;
box-shadow:0 0 0 2px rgba(30,144,255,0.18), 0 4px 10px rgba(30,144,255,0.25) !important;
}

.map-toolbar-divider{
height:1px;
background:rgba(17,24,39,0.1);
margin:2px 3px;
}

.map-zoom-btn{
font-size:21px !important;
}

.map-layer-control{
position:relative;
}

.map-layer-toggle{
position:relative;
}

#activeBaseMapLabel{
display:none;
}

.map-layer-menu{
position:absolute;
top:0;
right:40px;
width:212px;
display:none;
padding:6px;
border-radius:8px;
background:rgba(255,255,255,0.98);
border:1px solid rgba(30,144,255,0.16);
box-shadow:0 8px 22px rgba(15,23,42,0.2);
z-index:1100;
}

.map-layer-menu.is-open{
display:grid;
gap:5px;
}

.map-layer-option{
width:100%;
border:1px solid rgba(255,255,255,0.08);
border-radius:6px;
background:#ffffff;
color:#1f2937;
padding:8px 10px;
text-align:left;
cursor:pointer;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
font-size:12px;
font-weight:700;
white-space:nowrap;
min-width:0;
}

.map-layer-option span{
white-space:nowrap;
}

.map-layer-option small{
color:#64748b;
font-size:10px;
font-weight:600;
white-space:nowrap;
flex-shrink:0;
}

.map-layer-option:hover,
.map-layer-option.is-active{
background:var(--accent-2);
border-color:#58b5ff;
color:white;
}

.map-layer-option:hover small,
.map-layer-option.is-active small{
color:rgba(255,255,255,0.86);
}

body.dark-mode .marker-controls,
body.dark-mode .map-layer-menu{
background:#201f1d !important;
border-color:rgba(255,255,255,0.16) !important;
box-shadow:0 8px 24px rgba(0,0,0,0.45) !important;
}

body.dark-mode .marker-control-btn{
background:#343230 !important;
border-color:rgba(255,255,255,0.14) !important;
color:#f8fafc !important;
}

body.dark-mode .marker-control-btn:hover{
background:#45413d !important;
}

body.dark-mode .marker-control-btn.is-active{
background:var(--accent-2) !important;
border-color:#93c5fd !important;
color:white !important;
}

body.dark-mode .location-control-btn{
background:rgba(30,144,255,0.18) !important;
color:#f8fafc !important;
}

body.dark-mode .location-control-btn.is-active{
background:var(--accent-2) !important;
border-color:#93c5fd !important;
color:white !important;
}

body.dark-mode .map-toolbar-divider{
background:rgba(255,255,255,0.14);
}

body.dark-mode .map-layer-option{
background:#2f2c29;
border-color:rgba(255,255,255,0.1);
color:#f8fafc;
}

body.dark-mode .map-layer-option small{
color:#ffffff;
}

body.dark-mode .map-layer-option:hover,
body.dark-mode .map-layer-option.is-active{
background:var(--accent-2);
border-color:#93c5fd;
color:white;
}

.route-list-item{
transition:background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.route-list-item:hover{
background:#f5f7fa !important;
box-shadow:0 1px 3px rgba(0,0,0,0.1) !important;
}

body.dark-mode .route-list-item{
background:#3a3a3a !important;
border-color:rgba(255,255,255,0.1) !important;
color:#e0e0e0 !important;
}

body.dark-mode .route-list-item:hover{
background:#4a4a4a !important;
}

body.dark-mode .edit-point-btn{
background:var(--accent-2) !important;
color:white !important;
}

body.dark-mode .delete-point-btn{
background:var(--accent) !important;
color:white !important;
}

body.dark-mode .edit-point-popup{
background:#2d2d2d !important;
color:#e0e0e0 !important;
}

body.dark-mode .edit-point-popup input{
background:#3a3a3a !important;
border-color:#4a4a4a !important;
color:#ffffff !important;
}

body.dark-mode .edit-point-popup input:focus{
border-color:var(--accent-2) !important;
box-shadow:0 0 0 3px rgba(74, 158, 255, 0.2) !important;
}

body.dark-mode .edit-point-popup label{
color:var(--muted) !important;
}

body.dark-mode .edit-point-popup strong{
color:#e0e0e0 !important;
}

body.dark-mode .edit-point-popup button{
color:white !important;
}

body.dark-mode .leaflet-popup-content-wrapper{
background:#2d2d2d !important;
color:#e0e0e0 !important;
box-shadow:0 3px 14px rgba(0,0,0,0.6) !important;
}

body.dark-mode .leaflet-popup-tip{
background:#2d2d2d !important;
}

.vehicle-map-tooltip{
background:#ffffff;
border:1px solid rgba(30,144,255,0.35);
border-radius:7px;
box-shadow:0 8px 24px rgba(15,23,42,0.22);
color:#111827;
font-size:12px;
line-height:1.45;
padding:8px 10px;
position:relative;
}

.leaflet-tooltip-top.vehicle-map-tooltip::before{
border-top-color:#ffffff !important;
border-width:8px 8px 0 !important;
bottom:-8px !important;
margin-left:-8px !important;
z-index:2;
}

.leaflet-tooltip-top.vehicle-map-tooltip::after{
content:"";
position:absolute;
left:50%;
bottom:-10px;
margin-left:-10px;
border-left:10px solid transparent;
border-right:10px solid transparent;
border-top:10px solid rgba(30,144,255,0.35);
z-index:1;
}

.vehicle-map-tooltip-title{
color:var(--accent-2);
font-size:13px;
font-weight:800;
margin-bottom:3px;
}

body.dark-mode .vehicle-map-tooltip{
background:#2a2a2a;
border-color:rgba(147,197,253,0.35);
box-shadow:0 8px 24px rgba(0,0,0,0.55);
color:#ffffff;
}

body.dark-mode .leaflet-tooltip-top.vehicle-map-tooltip::before{
border-top-color:#2a2a2a !important;
}

body.dark-mode .leaflet-tooltip-top.vehicle-map-tooltip::after{
border-top-color:rgba(147,197,253,0.35);
}

body.dark-mode .vehicle-map-tooltip-title{
color:#93c5fd;
}

body.dark-mode .leaflet-popup-close-button{
color:#e0e0e0 !important;
opacity:0.8;
}

body.dark-mode .leaflet-popup-close-button:hover{
    opacity:1;
    color:#ffffff !important;
}

body.dark-mode .leaflet-control-zoom {
    border:1px solid rgba(255,255,255,0.2) !important;
    box-shadow:0 2px 8px rgba(0,0,0,0.5) !important;
}

body.dark-mode .leaflet-control-zoom a {
    background-color:#2d2d2d !important;
    color:#e0e0e0 !important;
    border-bottom:1px solid rgba(255,255,255,0.1) !important;
}

body.dark-mode .leaflet-control-zoom a:hover {
    background-color:#3a3a3a !important;
    color:#ffffff !important;
}

body.dark-mode .leaflet-control-zoom-in {
    border-top-left-radius:4px !important;
    border-top-right-radius:4px !important;
}

body.dark-mode .leaflet-control-zoom-out {
    border-bottom-left-radius:4px !important;
    border-bottom-right-radius:4px !important;
    border-bottom:none !important;
}

body.dark-mode #startAddressSuggestions,
body.dark-mode #endAddressSuggestions{
background:#3a3a3a !important;
border-color:rgba(255,255,255,0.2) !important;
color:#e0e0e0 !important;
}

body.dark-mode #startAddressSuggestions > div,
body.dark-mode #endAddressSuggestions > div{
color:#e0e0e0 !important;
border-bottom-color:rgba(255,255,255,0.1) !important;
}

body.dark-mode #startAddressSuggestions > div:hover,
body.dark-mode #endAddressSuggestions > div:hover{
background:#4a4a4a !important;
}

body.dark-mode .waypoint-input-container{
background:#3a3a3a !important;
border-color:rgba(255,255,255,0.1) !important;
}

body.dark-mode .waypoint-input-container input{
background:#3a3a3a !important;
border-color:#4a4a4a !important;
color:#ffffff !important;
}

body.dark-mode .waypoint-input-container .waypoint-suggestions,
body.dark-mode .waypoint-suggestions{
background:#3a3a3a !important;
border-color:rgba(255,255,255,0.2) !important;
color:#e0e0e0 !important;
}

body.dark-mode .waypoint-suggestions > div{
background:#3a3a3a !important;
color:#e0e0e0 !important;
border-bottom-color:rgba(255,255,255,0.1) !important;
}

body.dark-mode .waypoint-suggestions > div:hover{
background:#4a4a4a !important;
}

body.dark-mode .waypoint-remove-btn{
background:var(--accent) !important;
color:white !important;
}

body.dark-mode .waypoint-remove-btn:hover{
background:#c62828 !important;
}
*{box-sizing:border-box}
body{
margin:0;
font-family:Inter, Arial, sans-serif;
background:var(--bg);
color:#111827;
height:100vh;
display:flex;
}
body.auth-gate-active{
display:block;
min-height:100vh;
height:auto;
overflow:auto;
}
body.auth-gate-active .mobile-header,
body.auth-gate-active .sidebar,
body.auth-gate-active #map{
display:none !important;
}
.auth-gate{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:24px;
background:linear-gradient(180deg, #eef7ff 0%, #ffffff 100%);
position:relative;
}
.auth-gate[hidden]{
display:none !important;
}
.auth-gate-card{
width:min(420px, 100%);
background:#ffffff;
border:1px solid rgba(30,144,255,0.18);
border-radius:10px;
box-shadow:0 18px 55px rgba(15,23,42,0.14);
padding:22px;
position:relative;
}
.auth-card-controls{
position:absolute;
top:10px;
right:10px;
display:flex;
align-items:center;
gap:6px;
z-index:2;
}
.auth-card-icon-btn{
width:32px;
height:30px;
padding:0;
border:1px solid rgba(30,144,255,0.2);
border-radius:7px;
background:rgba(255,255,255,0.96);
color:var(--accent-2);
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
box-shadow:0 4px 12px rgba(15,23,42,0.08);
}
.auth-card-icon-btn:hover{
background:rgba(30,144,255,0.1);
border-color:rgba(30,144,255,0.34);
}
.auth-card-icon-btn.is-active{
background:var(--accent-2);
border-color:var(--accent-2);
color:#ffffff;
}
.auth-card-icon-btn svg:not(.flag-icon){
width:17px;
height:17px;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
display:block;
}
.auth-card-icon-btn .flag-icon{
width:23px;
height:15px;
}
.auth-gate-logo{
display:block;
width:min(270px, 100%);
height:auto;
margin:0 auto 12px;
object-fit:contain;
}
.auth-gate-card h1{
margin:0;
font-size:24px;
line-height:1.15;
text-align:center;
color:#0f172a;
}
.auth-gate-controls{
position:absolute;
top:16px;
right:16px;
width:auto;
display:flex;
align-items:center;
justify-content:flex-end;
padding:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
z-index:5;
}
.auth-gate-language,
.auth-gate-theme{
display:block;
align-items:center;
}
.auth-gate-control-icon{
width:24px;
height:24px;
display:flex;
align-items:center;
justify-content:center;
color:var(--accent-2);
}
.auth-gate-control-icon svg:not(.flag-icon){
width:19px;
height:19px;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
}
.auth-gate-language label,
.auth-gate-control-label{
margin:0;
font-size:12px;
font-weight:700;
color:var(--muted);
}
.auth-language-picker{
position:relative;
min-width:0;
}
.auth-gate-language .auth-language-picker{
width:clamp(126px, 18vw, 146px);
}
.auth-language-button{
width:100%;
height:32px;
display:grid;
grid-template-columns:24px minmax(0, 1fr) 14px;
align-items:center;
gap:6px;
padding:5px 8px;
border:1px solid #e6eefb;
border-radius:6px;
background:#fbfdff;
color:#111827;
cursor:pointer;
font-size:13px;
font-weight:700;
line-height:1;
text-align:left;
}
.auth-gate-language .auth-language-menu{
left:auto;
right:0;
width:176px;
}
.auth-language-button span{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.auth-language-button .flag-icon,
.auth-language-option .flag-icon{
width:24px;
height:16px;
}
.auth-language-chevron{
width:15px;
height:15px;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
opacity:0.75;
}
.auth-language-menu{
position:absolute;
top:calc(100% + 5px);
right:0;
left:0;
z-index:20;
padding:4px;
border:1px solid rgba(30,144,255,0.18);
border-radius:7px;
background:#ffffff;
box-shadow:0 12px 28px rgba(15,23,42,0.16);
}
.auth-language-option{
width:100%;
height:32px;
display:grid;
grid-template-columns:24px minmax(0, 1fr);
align-items:center;
gap:8px;
padding:5px 7px;
border:none;
border-radius:5px;
background:transparent;
color:#111827;
cursor:pointer;
font-size:13px;
font-weight:700;
text-align:left;
}
.auth-language-option:hover,
.auth-language-option.is-active{
background:rgba(30,144,255,0.1);
color:var(--accent-2);
}
.app-language-picker{
width:118px;
z-index:30;
}
.app-language-button{
height:28px;
padding:4px 7px;
font-size:12px;
}
.app-language-button .flag-icon{
width:22px;
height:14px;
}
.app-language-picker .auth-language-menu{
left:auto;
right:0;
width:168px;
}
.auth-theme-toggle{
display:grid;
grid-template-columns:1fr 1fr;
gap:3px;
padding:3px;
border:1px solid rgba(30,144,255,0.16);
border-radius:7px;
background:rgba(30,144,255,0.08);
}
.auth-theme-btn{
width:34px;
height:28px;
min-height:28px;
padding:0;
border:none;
border-radius:5px;
background:transparent;
color:var(--muted);
cursor:pointer;
display:flex;
align-items:center;
justify-content:center;
}
.auth-theme-btn svg{
width:16px;
height:16px;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
}
.auth-theme-btn.is-active{
background:var(--accent-2);
color:#ffffff;
box-shadow:0 2px 8px rgba(30,144,255,0.2);
}
.auth-gate-mode-title{
margin:12px 0 0;
font-size:18px;
line-height:1.25;
text-align:center;
color:var(--accent-2);
}
.auth-gate-copy,
.auth-gate-hint{
margin:10px 0 0;
font-size:13px;
line-height:1.45;
text-align:center;
color:var(--muted);
}
.auth-gate-fields{
display:grid;
gap:9px;
margin-top:18px;
}
.auth-gate-fields input{
margin-top:0;
}
.password-field{
position:relative;
display:block;
width:100%;
}
.password-field input{
width:100%;
padding-right:42px !important;
}
.password-toggle{
position:absolute;
top:50%;
right:7px;
width:30px;
height:30px;
padding:0;
border:1px solid transparent;
border-radius:6px;
background:transparent;
color:#64748b;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transform:translateY(-50%);
transition:background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.password-toggle:hover,
.password-toggle.is-active{
background:rgba(30,144,255,0.1);
border-color:rgba(30,144,255,0.22);
color:var(--accent-2);
}
.password-toggle svg{
width:17px;
height:17px;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
display:block;
}
.auth-gate-actions{
display:grid;
grid-template-columns:1fr;
gap:8px;
margin-top:12px;
}
.auth-gate-actions .btn{
width:100%;
background:var(--accent-2);
margin-top:0;
}
.auth-gate-card[data-auth-mode="login"] .auth-register-only,
.auth-gate-card[data-auth-mode="register"] .auth-login-only{
display:none !important;
}
.auth-gate-switch{
display:block;
width:100%;
margin:10px 0 0;
padding:4px 6px;
border:none;
background:transparent;
color:var(--accent-2);
cursor:pointer;
font-size:12px;
font-weight:700;
line-height:1.35;
text-align:center;
text-decoration:underline;
text-underline-offset:3px;
}
.auth-gate-switch:hover{
color:var(--accent);
}
.auth-gate-message{
min-height:18px;
margin-top:10px;
font-size:12px;
line-height:1.35;
text-align:center;
color:#b42318;
}
.auth-gate-legal{
margin-top:14px;
display:grid;
gap:7px;
justify-items:center;
text-align:center;
font-size:11px;
line-height:1.35;
color:var(--muted);
}
.auth-gate-privacy{
border:none;
background:transparent;
padding:0;
color:var(--accent-2);
font:inherit;
font-weight:700;
cursor:pointer;
text-decoration:underline;
text-underline-offset:3px;
}
.auth-gate-privacy:hover,
.auth-gate-copyright a:hover{
color:var(--accent);
}
.auth-gate-copyright a{
color:var(--accent-2);
font-weight:700;
text-decoration:none;
}
.auth-gate-hint{
font-size:11px;
}
body.dark-mode .auth-gate{
background:linear-gradient(180deg, #171717 0%, #242424 100%);
}
body.dark-mode .auth-gate-card{
background:#2d2d2d;
border-color:rgba(147,197,253,0.22);
box-shadow:0 18px 55px rgba(0,0,0,0.42);
}
body.dark-mode .auth-card-icon-btn{
background:rgba(58,58,58,0.96);
border-color:rgba(147,197,253,0.22);
color:#93c5fd;
box-shadow:0 4px 12px rgba(0,0,0,0.28);
}
body.dark-mode .auth-card-icon-btn:hover{
background:rgba(74,158,255,0.16);
}
body.dark-mode .auth-card-icon-btn.is-active{
background:var(--accent-2);
border-color:var(--accent-2);
color:#ffffff;
}
body.dark-mode .password-toggle{
color:#cbd5e1;
}
body.dark-mode .password-toggle:hover,
body.dark-mode .password-toggle.is-active{
background:rgba(74,158,255,0.16);
border-color:rgba(147,197,253,0.25);
color:#93c5fd;
}
body.dark-mode .auth-gate-controls{
background:transparent;
border-color:transparent;
box-shadow:none;
}
body.dark-mode .auth-theme-toggle{
background:rgba(74,158,255,0.12);
border-color:rgba(147,197,253,0.22);
}
body.dark-mode .auth-language-button{
background:#3a3a3a;
border-color:#4a4a4a;
color:#ffffff;
}
body.dark-mode .auth-language-menu{
background:#2d2d2d;
border-color:rgba(147,197,253,0.22);
box-shadow:0 12px 28px rgba(0,0,0,0.4);
}
body.dark-mode .auth-language-option{
color:#ffffff;
}
body.dark-mode .auth-language-option:hover,
body.dark-mode .auth-language-option.is-active{
background:rgba(74,158,255,0.16);
color:#93c5fd;
}
body.dark-mode .app-language-button{
background:#3a3a3a;
border-color:#4a4a4a;
color:#ffffff;
}
body.dark-mode .mobile-language-button{
background:#3a3a3a;
border-color:#4a4a4a;
color:#ffffff;
}
body.dark-mode .auth-theme-btn{
color:#e5e7eb;
}
body.dark-mode .auth-theme-btn.is-active{
background:var(--accent-2);
color:#ffffff;
}
body.dark-mode .auth-gate-card h1,
body.dark-mode .auth-gate-mode-title,
body.dark-mode .auth-gate-language label,
body.dark-mode .auth-gate-control-label,
body.dark-mode .auth-gate-copy,
body.dark-mode .auth-gate-legal,
body.dark-mode .auth-gate-hint{
color:#ffffff;
}
body.dark-mode .auth-gate-switch{
color:#93c5fd;
}
body.dark-mode .auth-gate-privacy,
body.dark-mode .auth-gate-copyright a{
color:#93c5fd;
}
body.dark-mode .auth-gate-message{
color:#fecaca;
}
.sidebar{
width:420px;
background:var(--card);
padding:20px;
padding-top:0;
border-right:1px solid rgba(0,0,0,0.06);
overflow:auto;
}
h1{margin:0 0 12px 0; font-size:18px; color:var(--accent-2)}
.logo{
    max-height:78px;
    max-width:300px;
    height:auto;
    width:auto;
    margin-bottom:0;
    margin-top:0;
    margin-left:0;
    margin-right:0;
    display:block;
    object-fit:contain;
    background:transparent;
    border:none;
    padding:0;
    transition:filter 0.2s ease, transform 0.2s ease;
}

body.dark-mode .logo,
body.dark-mode .mobile-logo,
body.dark-mode .auth-gate-logo{
    filter:none;
}
#darkModeToggle svg,
#mobileDarkModeToggle svg{
width:16px;
height:16px;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
display:block;
}
label{font-size:13px; color:var(--muted); display:block; margin-top:10px}
input[type="text"], input[type="number"], input[type="email"], input[type="password"], select{
width:100%; padding:9px 12px; margin-top:6px;
border:1px solid #e6eefb; border-radius:6px;
background:#fbfdff; font-size:14px;
transition:border-color 0.2s, box-shadow 0.2s;
}
input[type="text"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="password"]:focus, select:focus{
outline:none; border-color:var(--accent-2);
box-shadow:0 0 0 3px rgba(30,144,255,0.1);
}
.auth-panel{
margin-top:12px;
padding:10px;
border:1px solid rgba(30,144,255,0.18);
border-radius:8px;
background:rgba(30,144,255,0.06);
}
.auth-panel-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
margin-bottom:8px;
}
.auth-panel-header strong{
font-size:13px;
line-height:1.2;
color:#0f172a;
}
.auth-status{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:22px;
padding:3px 8px;
border-radius:999px;
background:rgba(30,144,255,0.12);
color:var(--accent-2);
font-size:11px;
font-weight:700;
line-height:1;
}
.auth-status.is-online{
background:rgba(34,197,94,0.14);
color:#15803d;
}
.auth-fields{
display:grid;
grid-template-columns:1fr;
gap:7px;
}
.auth-fields[hidden],
.auth-session[hidden]{
display:none !important;
}
.auth-fields input{
margin-top:0;
font-size:13px;
}
.auth-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:7px;
}
.auth-actions .btn{
width:100%;
background:var(--accent-2);
margin-top:0;
padding-left:8px;
padding-right:8px;
}
.auth-actions .auth-logout{
background:#64748b;
}
#authSession .auth-actions{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
.auth-session{
display:grid;
gap:8px;
}
.auth-session-header{
display:grid;
grid-template-columns:minmax(0, 1fr) auto;
align-items:center;
gap:8px;
}
.auth-user-label{
font-size:12px;
font-weight:700;
color:#0f172a;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.account-menu-wrap{
position:relative;
}
.account-menu-btn{
width:34px;
height:34px;
display:flex;
align-items:center;
justify-content:center;
padding:0;
border:1px solid rgba(30,144,255,0.22);
border-radius:7px;
background:#ffffff;
color:var(--accent-2);
cursor:pointer;
}
.account-menu-btn:hover,
.account-menu-btn[aria-expanded="true"]{
background:rgba(30,144,255,0.1);
border-color:rgba(30,144,255,0.38);
}
.account-menu-btn svg{
width:22px;
height:22px;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
}
.account-menu{
position:absolute;
top:calc(100% + 6px);
right:0;
z-index:40;
min-width:168px;
padding:5px;
border:1px solid rgba(15,23,42,0.12);
border-radius:8px;
background:#ffffff;
box-shadow:0 14px 30px rgba(15,23,42,0.16);
}
.account-menu button{
width:100%;
min-height:32px;
display:flex;
align-items:center;
justify-content:flex-start;
padding:7px 9px;
border:none;
border-radius:6px;
background:transparent;
color:#0f172a;
cursor:pointer;
font-size:12px;
font-weight:700;
text-align:left;
}
.account-menu button:hover{
background:rgba(30,144,255,0.1);
color:var(--accent-2);
}
.account-menu button.danger{
color:#b42318;
}
.account-menu button.danger:hover{
background:rgba(207,75,51,0.1);
color:#cf4b33;
}
.auth-message{
min-height:16px;
margin-top:7px;
font-size:11px;
line-height:1.35;
color:var(--muted);
}
.server-url-hint{
margin-top:6px;
color:var(--muted);
font-size:11px;
line-height:1.4;
}
.server-demo-link{
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
width:100%;
min-height:34px;
margin-top:8px;
padding:8px 10px;
border:1px solid rgba(30,144,255,0.28);
border-radius:7px;
background:rgba(30,144,255,0.08);
color:var(--accent-2);
font-size:12px;
font-weight:700;
line-height:1.2;
text-decoration:none;
}
.server-demo-link svg{
width:15px;
height:15px;
fill:none;
stroke:currentColor;
stroke-width:2;
stroke-linecap:round;
stroke-linejoin:round;
flex:0 0 auto;
}
.server-demo-link:hover{
background:var(--accent-2);
border-color:var(--accent-2);
color:#ffffff;
}
.server-demo-note{
margin-top:5px;
color:var(--muted);
font-size:11px;
line-height:1.35;
}
input[type="file"]{
width:100%; padding:8px 10px; margin-top:6px;
border:1px solid #e6eefb; border-radius:6px;
background:#fbfdff; font-size:13px;
cursor:pointer;
}
.row{display:flex; gap:8px}
.row > *{flex:1}
.btn{
display:inline-block; text-align:center; padding:10px 16px; border-radius:8px;
cursor:pointer; border:none; color:white; font-weight:600; font-size:14px;
transition:all 0.2s ease; box-shadow:0 2px 4px rgba(0,0,0,0.1);
user-select:none; white-space:nowrap;
}
.btn:hover{
transform:translateY(-1px); box-shadow:0 4px 8px rgba(0,0,0,0.15);
}
.btn:active{
transform:translateY(0); box-shadow:0 1px 2px rgba(0,0,0,0.1);
}
.btn:focus{
outline:2px solid rgba(30,144,255,0.5); outline-offset:2px;
}
.btn-start{
background:var(--accent-2); width:100%; padding:12px 16px; margin-top:0;
}
.btn-start:hover{background:#1976d2}
.btn-start[style*="background: #4caf50"]:hover{background:#45a049}
.btn-stop{
background:var(--accent); width:100%; margin-top:8px; padding:12px 16px;
}
.btn-stop:hover{background:#c62828}
.small{
font-size:13px; padding:9px 14px; border-radius:6px; min-width:0;
font-weight:500; letter-spacing:0.2px;
}
.small:hover{opacity:0.95}
.device-actions{
display:grid;
grid-template-columns:1fr;
gap:8px;
margin-top:12px;
}
.vehicle-card{
border:1px solid rgba(30,144,255,0.08);
padding:16px; margin-top:16px; border-radius:8px;
background:linear-gradient(180deg, #fff, #fbfdff);
box-shadow:0 1px 3px rgba(0,0,0,0.05);
}
.vehicle-card.is-running{
border-color:rgba(34,197,94,0.45);
box-shadow:0 0 0 1px rgba(34,197,94,0.12), 0 4px 14px rgba(34,197,94,0.16);
}
.vehicle-card.is-route-active{
border-color:rgba(30,144,255,0.68);
box-shadow:0 0 0 1px rgba(30,144,255,0.22), 0 4px 16px rgba(30,144,255,0.16);
}
.vehicle-card.is-running.is-route-active{
border-color:rgba(30,144,255,0.75);
box-shadow:0 0 0 1px rgba(30,144,255,0.28), 0 4px 16px rgba(34,197,94,0.16);
}
.vehicle-card.is-collapsed{
padding-bottom:12px;
}
.vehicle-card-header{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
margin-bottom:10px;
cursor:pointer;
}
.vehicle-card.is-collapsed .vehicle-card-header{
margin-bottom:0;
}
.vehicle-collapse-btn{
width:28px;
height:28px;
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid rgba(30,144,255,0.18);
border-radius:6px;
background:rgba(30,144,255,0.08);
color:var(--accent-2);
font-size:18px;
font-weight:800;
line-height:1;
cursor:pointer;
flex-shrink:0;
transition:all 0.2s ease;
}
.vehicle-collapse-btn:hover{
background:var(--accent-2);
color:white;
box-shadow:0 2px 6px rgba(30,144,255,0.22);
}
.vehicle-collapse-icon{
display:block;
line-height:1;
transform:translateY(-1px);
}
.vehicle-card-title-group{
display:flex;
align-items:center;
gap:8px;
min-width:0;
flex:1;
}
.vehicle-card-title{
font-size:14px;
font-weight:700;
color:#111827;
white-space:nowrap;
}
.vehicle-status-pill{
display:inline-flex;
align-items:center;
gap:5px;
font-size:11px;
font-weight:600;
line-height:1;
padding:5px 8px;
border-radius:999px;
background:rgba(30,144,255,0.1);
color:var(--accent-2);
white-space:nowrap;
}
.vehicle-status-pill.is-running{
background:rgba(34,197,94,0.14);
color:#15803d;
}
.vehicle-route-switch{
height:26px;
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid rgba(30,144,255,0.2);
border-radius:999px;
background:rgba(30,144,255,0.08);
color:var(--accent-2);
font-size:11px;
font-weight:700;
line-height:1;
padding:0 9px;
white-space:nowrap;
cursor:pointer;
flex-shrink:0;
transition:all 0.2s ease;
}
.vehicle-route-switch:hover,
.vehicle-route-switch.is-active{
background:var(--accent-2);
border-color:var(--accent-2);
color:white;
box-shadow:0 2px 6px rgba(30,144,255,0.24);
}
.vehicle-status-dot{
width:7px;
height:7px;
border-radius:50%;
background:#22c55e;
box-shadow:0 0 0 0 rgba(34,197,94,0.65);
animation:vehicleRunningPulse 1.1s ease-out infinite;
}
@keyframes vehicleRunningPulse{
0%{box-shadow:0 0 0 0 rgba(34,197,94,0.65); opacity:1}
70%{box-shadow:0 0 0 7px rgba(34,197,94,0); opacity:0.75}
100%{box-shadow:0 0 0 0 rgba(34,197,94,0); opacity:1}
}
.vehicle-remove-btn{
width:28px;
height:28px;
display:inline-flex;
align-items:center;
justify-content:center;
border:1px solid rgba(229,57,53,0.2);
border-radius:6px;
background:rgba(229,57,53,0.08);
color:var(--accent);
font-size:20px;
font-weight:700;
line-height:1;
cursor:pointer;
flex-shrink:0;
transition:all 0.2s ease;
}
.vehicle-remove-btn:hover{
background:var(--accent);
color:white;
box-shadow:0 2px 6px rgba(229,57,53,0.25);
}
.vehicle-card-body.is-collapsed{
display:none;
}
.vehicle-delete-confirm{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
padding:10px;
margin-bottom:12px;
border:1px solid rgba(229,57,53,0.18);
border-radius:6px;
background:rgba(229,57,53,0.06);
color:#991b1b;
font-size:12px;
font-weight:600;
}
.vehicle-delete-confirm-actions{
display:flex;
gap:6px;
flex-shrink:0;
}
.vehicle-delete-confirm button{
border:none;
border-radius:6px;
padding:7px 9px;
font-size:12px;
font-weight:700;
cursor:pointer;
white-space:nowrap;
}
.vehicle-delete-confirm-delete{
background:var(--accent);
color:white;
}
.vehicle-delete-confirm-cancel{
background:white;
color:var(--muted);
border:1px solid rgba(0,0,0,0.08) !important;
}
.vehicle-route-panel{
margin-top:12px;
padding:10px;
border:1px solid rgba(30,144,255,0.12);
border-radius:6px;
background:rgba(30,144,255,0.04);
}
.vehicle-route-summary{
font-size:12px;
color:var(--muted);
margin-bottom:8px;
}
.vehicle-route-summary strong{
color:#111827;
font-weight:700;
}
.vehicle-route-actions{
display:grid;
grid-template-columns:1fr 1fr;
gap:8px;
}
.vehicle-route-btn{
border:1px solid rgba(30,144,255,0.22);
border-radius:6px;
background:#ffffff;
color:var(--accent-2);
font-size:12px;
font-weight:700;
padding:8px 9px;
cursor:pointer;
}
.vehicle-route-btn:hover:not(:disabled){
background:var(--accent-2);
color:white;
}
.vehicle-route-btn:disabled{
opacity:0.45;
cursor:not-allowed;
}
.vehicle-card label{
font-size:11px; font-weight:500; color:var(--muted); display:block;
}
.vehicle-card input, .vehicle-card select{
font-size:13px; padding:7px 10px; margin-top:4px;
border:1px solid #e6eefb; border-radius:6px;
background:#fbfdff; width:100%;
transition:border-color 0.2s, box-shadow 0.2s;
}
.vehicle-icon-field{
margin-bottom:10px;
}
.vehicle-icon-picker{
display:grid;
grid-template-columns:38px minmax(0, 1fr);
align-items:center;
gap:8px;
margin-top:4px;
}
.vehicle-icon-preview{
width:38px;
height:38px;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
border:1px solid #dce9fb;
border-radius:7px;
background:linear-gradient(180deg, #ffffff, #f4f8ff);
box-shadow:0 1px 2px rgba(15,23,42,0.05);
}
.vehicle-icon-preview img{
max-width:30px;
max-height:30px;
object-fit:contain;
display:block;
}
.vehicle-icon-select{
height:38px;
margin-top:0 !important;
font-size:12px !important;
padding:7px 30px 7px 10px !important;
min-width:0;
}
.vehicle-card input:focus, .vehicle-card select:focus{
outline:none; border-color:var(--accent-2);
box-shadow:0 0 0 2px rgba(30,144,255,0.1);
}
.vehicle-field-hint{
font-size:10px;
color:var(--muted);
line-height:1.25;
margin-top:3px;
}
body.dark-mode .vehicle-icon-preview{
background:linear-gradient(180deg, #343434, #2a2a2a);
border-color:#4a4a4a;
box-shadow:none;
}
.vehicle-map-marker{
background:transparent;
border:none;
}
.vehicle-map-marker-inner{
width:56px;
height:56px;
display:flex;
align-items:center;
justify-content:center;
background:transparent;
}
.vehicle-map-marker-asset{
width:50px;
height:50px;
display:block;
object-fit:contain;
transform-origin:center center;
transition:transform 0.2s ease;
filter:drop-shadow(0 2px 4px rgba(0,0,0,0.45));
}
.controls{display:flex; gap:10px; margin-top:14px}
.controls .btn{flex:1; min-width:0; font-size:13px; padding:9px 12px}
#map{flex:1; height:100vh}
.log{
margin-top:12px; background:#0b1220; color:#7cffb2; padding:8px; font-family:monospace;
border-radius:6px; height:120px; overflow:auto; font-size:12px;
}
.file-row{display:flex; gap:8px; align-items:center}
.badge{
display:inline-block; padding:5px 10px; border-radius:12px; font-size:12px;
background:rgba(229,57,53,0.08); color:var(--accent); font-weight:500;
}
.small-muted{font-size:12px; color:var(--muted); line-height:1.5}
.footer-note{font-size:12px; color:var(--muted); margin-top:10px; line-height:1.5}
.app-footer{
margin-top:20px;
padding-top:16px;
border-top:1px solid rgba(0,0,0,0.1);
text-align:center;
}
code{
background:rgba(0,0,0,0.05); padding:2px 6px; border-radius:4px;
font-family:'Courier New', monospace; font-size:11px;
}
.route-point-marker{cursor:move}
.route-image-marker{
background:transparent;
border:none;
}
.route-image-marker-asset{
width:100%;
height:100%;
display:block;
object-fit:contain;
filter:drop-shadow(0 2px 4px rgba(0,0,0,0.42));
}
.route-point-tooltip{
    background:rgba(0,0,0,0.8) !important;
    color:white !important;
    border:none !important;
    border-radius:6px !important;
    padding:6px 10px !important;
    font-size:12px !important;
    font-weight:500 !important;
    box-shadow:0 2px 8px rgba(0,0,0,0.3) !important;
}
.route-point-tooltip:before{
    border-top-color:rgba(0,0,0,0.8) !important;
}

.current-location-marker {
    background:transparent;
    border:none;
}
.current-location-marker-asset {
    width:42px;
    height:42px;
    display:block;
    object-fit:contain;
    filter:drop-shadow(0 2px 4px rgba(0,0,0,0.42));
    animation: markerPulse 0.6s ease-out;
}
@keyframes markerPulse {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.mobile-header{
    display:none;
    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:2000;
    background:var(--card);
    border-bottom:1px solid rgba(0,0,0,0.1);
    box-shadow:0 2px 8px rgba(0,0,0,0.1);
}

.mobile-header-top{
    display:flex;
    align-items:center;
    justify-content:center; 
    padding:6px 12px; 
    border-bottom:1px solid rgba(0,0,0,0.05);
    min-height:56px; 
    position:relative; 
}

.mobile-logo{
    max-height:48px;
    max-width:min(150px, calc(100vw - 126px));
    height:auto;
    width:auto;
    margin:0 auto; 
    transition:filter 0.2s ease, transform 0.2s ease;
}

.mobile-header-actions{
    display:flex;
    gap:4px;
    align-items:center;
    flex-shrink:0;
    position:absolute;
    right:12px;
}

.mobile-language-picker{
    width:38px;
    z-index:40;
}

.mobile-language-button{
    width:38px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    font-size:12px;
    background:#fbfdff;
}

.mobile-language-button span,
.mobile-language-button .auth-language-chevron{
    display:none;
}

.mobile-language-button .flag-icon{
    width:22px;
    height:14px;
}

.mobile-language-picker .auth-language-menu{
    left:auto;
    right:0;
    width:168px;
}

.mobile-header-content{
    display:none; 
}

.mobile-tab{
    padding:8px 12px;
    border:none;
    background:transparent;
    color:var(--muted);
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    border-radius:6px;
    transition:all 0.2s;
    white-space:nowrap;
}

.mobile-tab:hover{
    background:rgba(30,144,255,0.1);
}

.mobile-tab-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    flex-shrink:0;
}

.mobile-tab-icon svg{
    width:22px;
    height:22px;
    display:block;
    fill:none;
    stroke:currentColor;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.mobile-tab-text{
    font-size:14px;
    font-weight:600;
}

.mobile-tab.active{
    color:var(--accent-2);
    background:rgba(30,144,255,0.15);
}

.mobile-tab:active{
    opacity:0.7;
}

body.dark-mode .mobile-header{
    background:var(--card);
    border-bottom-color:rgba(255,255,255,0.1);
    box-shadow:0 2px 8px rgba(0,0,0,0.3);
}

body.dark-mode .mobile-tab{
    color:var(--muted);
}

body.dark-mode .mobile-tab.active{
    color:var(--accent-2);
    background:rgba(74,158,255,0.1);
}

@media (min-width: 769px) {
    .sidebar{
        transform:none !important;
        position:relative !important;
        top:auto !important;
        width:420px !important;
        height:auto !important;
    }
    
    #map{
        transform:none !important;
        position:relative !important;
        top:auto !important;
        width:auto !important;
        height:100vh !important;
    }
    
    body{
        padding-top:0 !important;
    }
}

@media (max-width: 768px) {
    body{
        flex-direction:column;
        height:100vh;
        overflow:hidden;
        -webkit-overflow-scrolling:touch;
    }
    
    .mobile-header{
        display:block !important;
    }

    .mobile-language-picker{
        width:38px;
    }

    .mobile-language-picker .auth-language-menu{
        width:168px;
    }
    
    
    .sidebar > div:first-child{
        display:none !important;
    }
    
    body{
        padding-top:56px; 
    }

    body.auth-gate-active{
        padding-top:0 !important;
        height:auto;
        overflow:auto;
    }
    
    .sidebar{
        width:100%;
        height:calc(100vh - 56px);
        height:calc(100dvh - 56px);
        margin-top:0;
        position:fixed;
        top:56px;
        left:0;
        transform:translateX(-100%);
        transition:transform 0.3s ease;
        z-index:1000;
        border-right:none;
        overflow-y:auto;
        -webkit-overflow-scrolling:touch;
        padding:8px 12px calc(34px + env(safe-area-inset-bottom, 0px)); 
        overscroll-behavior:contain;
    }
    
    body.show-menu .sidebar{
        transform:translateX(0);
    }
    
    #map{
        width:100%;
        height:calc(100vh - 56px);
        height:calc(100dvh - 56px);
        margin-top:0;
        position:fixed;
        top:56px;
        left:0;
        transform:translateX(100%);
        transition:transform 0.3s ease;
        z-index:999;
    }
    
    body.show-map #map{
        transform:translateX(0);
    }
    
    body.show-menu #map{
        transform:translateX(100%);
    }
    
    body.show-map .sidebar{
        transform:translateX(-100%);
    }
    
    
    body:not(.show-map):not(.show-menu) .sidebar{
        transform:translateX(0);
    }
    
    body:not(.show-map):not(.show-menu) #map{
        transform:translateX(100%);
    }
    
    
    .mobile-tab{
        -webkit-tap-highlight-color:transparent;
        touch-action:manipulation;
    }
    
    
    .mobile-header ~ .sidebar .logo{
        max-height:62px;
        max-width:240px;
    }
    
    
    .sidebar > * {
        margin-top:12px !important; 
    }
    
    .sidebar > *:first-child {
        margin-top:0 !important;
    }
    
    
    .sidebar input,
    .sidebar select {
        padding:6px 8px !important; 
        margin-top:4px !important;
    }

    .vehicle-icon-picker{
        grid-template-columns:34px minmax(0, 1fr);
        gap:7px;
    }

    .vehicle-icon-preview{
        width:34px;
        height:34px;
        border-radius:6px;
    }

    .vehicle-icon-preview img{
        max-width:27px;
        max-height:27px;
    }

    .vehicle-icon-select{
        height:34px;
        font-size:12px !important;
        padding:6px 28px 6px 9px !important;
        margin-top:0 !important;
    }
    
    
    .sidebar .btn {
        padding:8px 12px !important; 
        margin-top:8px !important;
    }

    .footer-note{
        font-size:11px !important;
        line-height:1.55;
        overflow-wrap:anywhere;
    }

    .footer-note code{
        display:inline;
        white-space:normal;
        overflow-wrap:anywhere;
        word-break:break-word;
        line-height:1.7;
    }

    .log{
        height:96px;
        max-height:22vh;
        font-size:11px;
        line-height:1.35;
        overflow:auto;
        overflow-wrap:anywhere;
    }

    .app-footer{
        margin-top:12px !important;
        padding-top:12px !important;
        padding-bottom:calc(22px + env(safe-area-inset-bottom, 0px));
    }

    .app-footer > div{
        font-size:10px !important;
        line-height:1.45 !important;
    }

    .auth-panel{
        margin-top:10px !important;
        padding:9px !important;
    }

    .auth-actions{
        gap:6px;
    }

    #authSession .auth-actions{
        grid-template-columns:1fr;
    }

    .auth-actions .btn{
        margin-top:0 !important;
    }
    
    
    .sidebar label {
        margin-top:12px !important;
        font-size:13px !important;
    }
    
    
    .sidebar div[style*="padding:14px"] {
        padding:10px !important;
    }
    
    
    .sidebar div[style*="margin-top:20px"]:not(.app-footer) {
        margin-top:12px !important;
    }

    .privacy-modal{
        padding:12px;
    }

    .privacy-modal-panel{
        max-height:86vh;
    }

    .privacy-modal-footer{
        align-items:stretch;
        flex-direction:column;
    }

    .privacy-modal-actions{
        width:100%;
        margin-left:0;
    }

    .privacy-modal-actions .btn{
        flex:1;
    }

    .account-delete-modal{
        padding:12px;
    }

    .account-delete-panel{
        width:100%;
    }

    .install-app-panel,
    .usage-guide-panel{
        width:100%;
    }

    .install-app-prompt{
        bottom:calc(12px + env(safe-area-inset-bottom, 0px));
        width:calc(100% - 24px);
        grid-template-columns:40px minmax(0, 1fr);
        padding:10px;
        gap:10px;
    }

    .install-app-prompt img{
        width:40px;
        height:40px;
        border-radius:9px;
    }

    .install-app-prompt-actions{
        grid-column:1 / -1;
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
    }

    .install-app-prompt-dismiss,
    .install-app-prompt-install{
        width:100%;
    }

    .account-delete-actions{
        flex-direction:column-reverse;
    }

    .account-delete-actions .btn{
        width:100%;
    }

    .usage-guide-list{
        grid-template-columns:1fr;
    }

    .auth-gate{
        padding:14px;
        padding-top:72px;
        align-items:flex-start;
    }

    .auth-gate-controls{
        top:12px;
        right:12px;
        left:auto;
        width:auto;
    }

    .auth-gate-language,
    .auth-gate-theme{
        display:block;
    }

    .auth-gate-language .auth-language-picker{
        width:132px;
    }

    .auth-gate-card{
        padding:18px;
    }

    .auth-gate-card h1{
        font-size:21px;
    }

    .auth-gate-actions{
        grid-template-columns:1fr;
    }
}