/* ============ COMMAND CENTER THEME (default — from JSPL Smart Ride style guide) ============ */
:root, [data-theme="command"]{
  --bg:#020617; --surface:#0F172A; --surface2:#1E293B; --line:#1E293B; --line2:#334155;
  --ink:#F1F5F9; --ink2:#94A3B8; --ink3:#64748B;
  --accent:#F59E0B; --accent2:#FBBF24; --btn-ink:#0F172A;
  --ok:#34D399; --warn:#FBBF24; --bad:#F87171; --info:#60A5FA; --charge:#22D3EE;
  --map-canvas:#0B1220; --chip:#020617;
  --shadow:0 10px 26px rgba(0,0,0,.45); --radius:14px;
}
[data-theme="jspl-light"]{
  --bg:#F4F5F2; --surface:#FFFFFF; --surface2:#EDEFE9; --line:#DDE1D8; --line2:#C9CFC0;
  --ink:#1E2419; --ink2:#5B6355; --ink3:#8A9280;
  --accent:#5FA829; --accent2:#F5821F; --btn-ink:#fff;
  --ok:#2E9E44; --warn:#E8A400; --bad:#D8452E; --info:#1877C9; --charge:#0FA3B1;
  --map-canvas:#FFFFFF; --chip:#EEF4E7; --shadow:0 2px 14px rgba(30,36,25,.08); --radius:13px;
}
[data-theme="steel"]{
  --bg:#E9EBEE; --surface:#F7F8FA; --surface2:#DFE3E8; --line:#C9CFD7; --line2:#AEB7C2;
  --ink:#232A32; --ink2:#5F6975; --ink3:#8893A0;
  --accent:#3A6EA5; --accent2:#F5821F; --btn-ink:#fff;
  --ok:#2E8B57; --warn:#C98A00; --bad:#C0392B; --info:#3A6EA5; --charge:#0FA3B1;
  --map-canvas:#F7F8FA; --chip:#E2E9F2; --shadow:0 1px 10px rgba(35,42,50,.12); --radius:13px;
}
[data-theme="amber-ops"]{
  --bg:#151210; --surface:#1E1915; --surface2:#28211B; --line:#382E24; --line2:#4A3D30;
  --ink:#F3E9DC; --ink2:#A6957F; --ink3:#7D6F5C;
  --accent:#FFB020; --accent2:#FF7A1A; --btn-ink:#1E1915;
  --ok:#8FCB3A; --warn:#FFB020; --bad:#FF5C4D; --info:#5FB8D8; --charge:#33C9DD;
  --map-canvas:#1A1511; --chip:#2E2418; --shadow:0 2px 18px rgba(0,0,0,.5); --radius:13px;
}
*{box-sizing:border-box; margin:0}
html,body{height:100%}
body{font-family:"IBM Plex Sans",system-ui,sans-serif; background:var(--bg); color:var(--ink); font-size:14px; overflow:hidden}
h1,h2,h3,.disp{font-family:"Rajdhani",sans-serif; letter-spacing:.02em}
.mono{font-family:"IBM Plex Mono",monospace}
button{font-family:inherit; cursor:pointer}
input,select,textarea{font-family:inherit; font-size:13.5px; background:var(--chip); color:var(--ink);
  border:1px solid var(--line); border-radius: 4px; padding:8px 11px; outline:none; width:100%}
input:focus,select:focus{border-color:var(--accent)}
input[type=date],input[type=datetime-local]{color-scheme:dark}
[data-theme="jspl-light"] input,[data-theme="steel"] input{color-scheme:light}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--surface2); border-radius: 4px} ::-webkit-scrollbar-thumb:hover{background:var(--line2)} .leaflet-image-layer{image-rendering:auto} .microlbl{font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ink3); display:block; margin-bottom:4px}

/* LOGIN */
/* ---- Session-restore splash: shown instead of the login screen when a token
   exists, so refreshing never flashes the login page ---- */
#splash{display:none; position:fixed; inset:0; z-index:1200; align-items:center; justify-content:center;
  background:radial-gradient(1100px 700px at 50% 38%, #16233B 0%, #0B1220 60%, #070D18 100%)}
html.resuming #splash{display:flex}
html.resuming #loginScreen{display:none !important}
.splashInner{display:flex; flex-direction:column; align-items:center; gap:14px; animation:splashIn .35s ease}
.splashLogo{background:#fff; border-radius: 4px; padding:8px 16px; box-shadow:0 12px 40px rgba(0,0,0,.5)}
.splashLogo img{height:54px; display:block; object-fit:contain; max-width:220px}
.splashTitle{color:#E2E8F0; font-weight:800; letter-spacing:.09em; font-size:15px}
.splashTitle .jspl{color:#5FA829}
.splashSpin{width:26px; height:26px; border-radius: 50%; border:3px solid rgba(148,163,184,.25); border-top-color:#5FA829; animation:spin .8s linear infinite; margin-top:4px}
.splashMsg{color:#94A3B8; font-size:12.5px; letter-spacing:.03em}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes splashIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
#splash.out{opacity:0; transition:opacity .28s ease; pointer-events:none}
/* loader iframes: transparent, no border; the animation supplies its own visuals */
.ldIframe{width:min(480px,92vw); height:420px; border:0; background:transparent; pointer-events:none}
.ldIframe.sm{height:380px}
#ldOverlay{display:none; position:fixed; inset:0; z-index:2500; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--bg) 55%, transparent); backdrop-filter:blur(2px)}
/* Map labels never swallow clicks — buses stay clickable under/near them.
   .pe re-enables events where needed (editor waypoint picking, drawer dragging). */
.mapPin{pointer-events:none}
.mapPin.pe{pointer-events:auto}

#loginScreen{position:fixed; inset:0; z-index:1000; display:none; align-items:center; justify-content:center;
  background:radial-gradient(1200px 600px at 70% -10%, rgba(245,158,11,.14), transparent 60%), #020617}
#loginScreen::before{content:""; position:absolute; inset:0; opacity:.05;
  background-image:repeating-linear-gradient(90deg,#fff 0 1px,transparent 1px 70px),repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 70px)}
.loginCard{position:relative; width:440px; max-width:92vw; background:#0F172A; border:1px solid #1E293B; border-radius: 4px; padding:36px 34px 28px; box-shadow:0 30px 80px rgba(0,0,0,.6);
  animation:splashIn .3s ease}
.loginCard input:focus{outline:none; border-color:#F59E0B; box-shadow:0 0 0 3px rgba(245,158,11,.18)}
.loginCard img{height:88px; display:block; margin:0 auto 12px; max-width:88%; object-fit:contain; background:#fff; border-radius: 4px; padding:8px 14px}
.loginCard h1{text-align:center; font-size:24px; font-weight:700; color:#F1F5F9; line-height:1.15; letter-spacing:.04em}
.loginCard h1 .jspl{color:#F59E0B} .loginCard h1 .ev{color:#34D399}
.loginCard .sub{text-align:center; color:#64748B; font-size:11px; margin:5px 0 22px; letter-spacing:.16em; text-transform:uppercase; font-weight:700}
.loginCard label{display:block; font-size:10.5px; font-weight:800; color:#94A3B8; margin:14px 0 5px; text-transform:uppercase; letter-spacing:.12em}
.loginCard input{background:#020617; color:#F1F5F9; border-color:#1E293B}
.loginCard .btn-go{width:100%; margin-top:22px; padding:13px; border:none; border-radius: 4px; font-family:"Rajdhani"; font-size:17px; font-weight:700; letter-spacing:.12em; color:#0F172A;
  background:linear-gradient(90deg,#F59E0B,#D97706); text-transform:uppercase; box-shadow:0 6px 20px rgba(245,158,11,.25)}
.loginCard .btn-go:hover{filter:brightness(1.08)}
#loginErr{color:#F87171; font-size:13px; margin-top:10px; text-align:center; min-height:17px}

/* SHELL */
#app{display:none; height:100vh; grid-template-columns:230px 1fr; grid-template-rows:66px 1fr}
#app.on{display:grid}
/* Collapsible menu bar (desktop): one header button hides/shows the whole nav */
#app.navHidden{grid-template-columns:0 1fr}
#app.navHidden #nav{transform:translateX(-100%); pointer-events:none}
.navCollapse{display:inline-flex; align-items:center; justify-content:center; background:var(--chip); border:1px solid var(--line); color:var(--ink); border-radius: 4px; font-size:15px; line-height:1; padding:6px 10px; cursor:pointer}
#app.navHidden .navCollapse{transform:scaleX(-1)}
@media(max-width:820px){ .navCollapse{display:none} }
header{grid-column:1/3; display:flex; align-items:center; gap:13px; padding:0 16px; background:color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); z-index:50}
.brandIcon{background:var(--accent); color:var(--btn-ink); padding:8px; border-radius: 4px; display:flex; box-shadow:0 4px 16px color-mix(in srgb, var(--accent) 30%, transparent)}
.brandIcon svg{width:24px;height:24px}
header .logoBox{background:#fff; border-radius: 4px; padding:3px 9px; display:flex; align-items:center}
header img{height:46px; display:block; max-width:190px; object-fit:contain}
header .brand{line-height:1.1}
header .brand .t1{font-weight:800; font-size:16px; letter-spacing:.06em; color:var(--ink); display:flex; align-items:center; gap:8px}
header .brand .t1 .jspl{color:var(--accent)}
.chipBlue{background:color-mix(in srgb, var(--info) 16%, transparent); color:var(--info); font-size:10.5px; padding:2px 9px; border-radius: 4px; font-weight:700; border:1px solid color-mix(in srgb, var(--info) 30%, transparent)}
header .brand small{display:block; font-size:10.5px; font-weight:500; color:var(--ink2); margin-top:2px}
.spacer{flex:1}
.pill{display:inline-flex; align-items:center; gap:7px; background:var(--chip); border:1px solid var(--line); border-radius: 4px; padding:6px 12px; font-size:11.5px; font-weight:600}
.dot{width:8px;height:8px;border-radius: 50%; position:relative}
.dot.ok{background:var(--ok)} .dot.warn{background:var(--warn)} .dot.bad{background:var(--bad)}
.dot.ok::after{content:""; position:absolute; inset:-3px; border-radius: 50%; border:2px solid var(--ok); opacity:.6; animation:ping 1.6s infinite}
@keyframes ping{0%{transform:scale(.6);opacity:.7}80%,100%{transform:scale(1.6);opacity:0}}
#themeSel{width:auto; padding:6px 10px; font-size:12px}
.userBadge{display:flex; align-items:center; gap:9px}
.avatar{width:34px;height:34px;border-radius: 50%;background:var(--accent);color:var(--btn-ink);display:flex;align-items:center;justify-content:center;font-weight:800;font-family:"Rajdhani";font-size:16px}
.userBadge b{font-size:13px; display:block; line-height:1.1}
.userBadge small{color:var(--ink2); font-size:11px}
.iconBtn{background:var(--chip); border:1px solid var(--line); color:var(--ink2); border-radius: 4px; padding:7px 12px; font-size:12px; font-weight:700}
.iconBtn:hover{border-color:var(--accent); color:var(--ink)}

nav{background:var(--surface); border-right:1px solid var(--line); padding:12px 9px; overflow-y:auto; transition:transform .2s ease}
nav .grp{font-size:9.5px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--ink3); margin:15px 9px 6px}
nav a{display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius: 4px; color:var(--ink2); text-decoration:none; font-size:13px; font-weight:600; margin-bottom:2px; cursor:pointer; border-left:3px solid transparent}
nav a svg{width:16px;height:16px; flex:none}
nav a:hover{background:var(--surface2); color:var(--ink)}
nav a.act{background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--accent); border-left-color:var(--accent)}
nav a.parent .car{margin-left:auto; transition:transform .18s; font-size:10px}
nav a.parent.open .car{transform:rotate(90deg)}
nav .sub{display:none; margin-left:14px; border-left:1px dashed var(--line); padding-left:4px}
nav .sub.open{display:block}
nav .sub a{font-size:12.5px; padding:7px 10px}

main{position:relative; overflow:hidden; background:var(--bg)}
.page{display:none; position:absolute; inset:0; overflow:auto; padding:16px}
.page.on{display:block; animation:pageIn .18s ease}
@keyframes pageIn{from{opacity:0; transform:translateY(5px)}to{opacity:1; transform:none}}
.page.nopad.on{animation:none}   /* map pages: Leaflet dislikes being animated while measuring */
#pg-migrate.on{display:flex; flex-direction:column}
.page.nopad{padding:0; overflow:hidden}

.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:11px; margin-bottom:13px}
.kpi{background:var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding:12px 15px; box-shadow:var(--shadow)}
.kpi .v{font-family:"Rajdhani"; font-size:28px; font-weight:700; line-height:1; word-break:break-word}
.kpi .l{font-size:9.5px; font-weight:800; color:var(--ink3); text-transform:uppercase; letter-spacing:.12em; margin-top:5px}
.kpi.gA .v{color:var(--ok)} .kpi.gW .v{color:var(--warn)} .kpi.gB .v{color:var(--bad)} .kpi.gI .v{color:var(--info)} .kpi.gO .v{color:var(--accent)}
.card{background:var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding:15px; box-shadow:var(--shadow); margin-bottom:13px}
.card h3{font-size:14.5px; font-weight:800; font-family:"IBM Plex Sans"; margin-bottom:12px; padding-bottom:9px; border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:8px; flex-wrap:wrap; color:var(--ink)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:13px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:13px}
@media(max-width:1100px){.grid2,.grid3{grid-template-columns:1fr}}
table{width:100%; border-collapse:collapse; font-size:12.5px}
th{text-align:left; font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:var(--ink3); padding:7px 8px; border-bottom:1px solid var(--line); white-space:nowrap; font-weight:800}
td{padding:8px; border-bottom:1px solid var(--line)}
tr:hover td{background:color-mix(in srgb, var(--surface2) 55%, transparent)}
/* ---- advanced table look (Shift Desk, Reports Center, ETA, everywhere) ---- */
thead th{background:color-mix(in srgb, var(--chip) 55%, transparent); border-bottom:2px solid color-mix(in srgb, var(--accent) 30%, var(--line))}
thead th:first-child{border-top-left-radius:4px} thead th:last-child{border-top-right-radius:4px}
tbody tr:nth-child(even) td{background:color-mix(in srgb, var(--chip) 34%, transparent)}
tbody tr:hover td{background:color-mix(in srgb, var(--accent) 8%, transparent)}
/* KPI cards: coloured top accent + hover lift */
.kpi{position:relative; overflow:hidden; transition:transform .14s ease, box-shadow .14s ease}
.kpi:hover{transform:translateY(-2px); box-shadow:0 8px 22px rgba(0,0,0,.18)}
.kpi::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--line2)}
.kpi.gA::before{background:var(--ok)} .kpi.gW::before{background:var(--warn)} .kpi.gB::before{background:var(--bad)} .kpi.gI::before{background:var(--info)} .kpi.gO::before{background:var(--accent)}
/* route + ETA pills (ETA Board and friends) */
.routePill{display:inline-flex; align-items:center; gap:7px; padding:3px 11px 3px 8px; border-radius: 4px; font-weight:800; font-size:11.5px;
  color:var(--rc, var(--ink)); background:color-mix(in srgb, var(--rc, var(--ink)) 12%, transparent); border:1px solid color-mix(in srgb, var(--rc, var(--ink)) 30%, transparent); white-space:nowrap}
.routePill::before{content:""; width:9px; height:9px; border-radius: 50%; background:var(--rc, var(--ink)); flex:0 0 auto}
.etaPill{display:inline-block; min-width:58px; text-align:center; padding:4px 11px; border-radius: 4px; font-family:"Rajdhani"; font-size:16.5px; font-weight:700}
.etaPill.ok{background:color-mix(in srgb, var(--ok) 15%, transparent); color:var(--ok)}
.etaPill.warn{background:color-mix(in srgb, var(--warn) 15%, transparent); color:var(--warn)}
.etaPill.bad{background:color-mix(in srgb, var(--bad) 15%, transparent); color:var(--bad)}
.etaPill.na{background:var(--chip); color:var(--ink3)}
.tag{display:inline-block; padding:2px 9px; border-radius: 4px; font-size:10.5px; font-weight:800; letter-spacing:.05em}
.tag.MOVING,.tag.OK{background:color-mix(in srgb, var(--ok) 15%, transparent); color:var(--ok)}
.tag.IDLE,.tag.HIGH{background:color-mix(in srgb, var(--warn) 15%, transparent); color:var(--warn)}
.tag.STOPPED{background:color-mix(in srgb, var(--info) 15%, transparent); color:var(--info)}
.tag.OOS,.tag.SEVERE,.tag.BAD{background:color-mix(in srgb, var(--bad) 15%, transparent); color:var(--bad)}
.tag.CHARGING{background:color-mix(in srgb, var(--charge) 15%, transparent); color:var(--charge)}
.btn{border:none; border-radius: 4px; padding:9px 15px; font-weight:800; font-size:12.5px; color:var(--btn-ink); background:var(--accent);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease}
.btn:hover{filter:brightness(1.07); box-shadow:0 4px 14px color-mix(in srgb, var(--accent) 28%, transparent)}
.btn:active{transform:translateY(1px)}
.btn.orange{background:var(--accent2); color:var(--btn-ink)}
.btn.red{background:color-mix(in srgb, var(--bad) 12%, transparent); color:var(--bad); border:1px solid color-mix(in srgb, var(--bad) 32%, transparent)}
.btn.blue{background:color-mix(in srgb, var(--info) 14%, transparent); color:var(--info); border:1px solid color-mix(in srgb, var(--info) 32%, transparent)}
.btn.ghost{background:var(--chip); color:var(--ink2); border:1px solid var(--line)}
.btn:hover{filter:brightness(1.12)}
.btn.sm{padding:5px 10px; font-size:11.5px}
.chipBtn{padding:6px 13px; border-radius: 4px; border:1px solid var(--line); background:var(--chip); color:var(--ink2); font-weight:700; font-size:11.5px}
.chipBtn.on{background:var(--accent); border-color:var(--accent); color:var(--btn-ink)}
.modeSwitch{display:inline-flex; gap:0; border:1px solid var(--line); border-radius: 4px; overflow:hidden}
.modeSwitch .chipBtn{border:none; border-radius: 0; margin:0}
.routeChip{display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius: 4px; border:1.5px solid var(--line); background:var(--chip); color:var(--ink); font-weight:800; font-size:13px; cursor:pointer; transition:.15s}
.routeChip .rcDot{width:12px; height:12px; border-radius: 50%; box-shadow:0 0 0 3px color-mix(in srgb, var(--rc) 25%, transparent)}
.routeChip small{color:var(--ink2); font-weight:700; font-size:11px}
.routeChip.on{border-color:var(--rc); background:color-mix(in srgb, var(--rc) 15%, transparent)}
.routeChip.on small{color:var(--ink)}
.routeChip.partial{border-color:var(--rc); border-style:dashed}
/* --- Route Studio (advanced editor) --- */
.edEditingName{font-weight:800; font-size:13px; color:var(--accent); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.edFields{display:flex; gap:8px; margin-top:8px}
.edFields label{flex:1; display:flex; flex-direction:column}
.edFields label:last-child{flex:0 0 64px}
.edToolGrid{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:6px}
.edTool{display:flex; align-items:center; gap:7px; padding:9px 10px; border-radius: 4px; border:1.5px solid var(--line); background:var(--chip); color:var(--ink); font-weight:700; font-size:12px; cursor:pointer; text-align:left; transition:.12s}
.edTool span{line-height:1.1}
.edTool:hover{border-color:var(--accent)}
.edTool.on{background:color-mix(in srgb, var(--accent) 18%, transparent); border-color:var(--accent); color:var(--ink)}
.wpPanel{margin-top:9px; padding:9px; border:1.5px dashed var(--accent); border-radius: 4px; background:color-mix(in srgb, var(--accent) 7%, transparent)}
.edPtMarker{cursor:crosshair; filter:drop-shadow(0 1px 2px rgba(0,0,0,.55))}
.edPtMarker.grab{cursor:grab}
.edPtMarker.grab:active{cursor:grabbing}
/* active-tool banner over the edit map */
.edModeBanner{position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:600; background:var(--accent); color:var(--btn-ink); font-weight:800; font-size:12px; padding:7px 14px; border-radius: 4px; box-shadow:0 3px 12px rgba(0,0,0,.3); pointer-events:auto; white-space:nowrap; max-width:92%; overflow:hidden; text-overflow:ellipsis; display:flex; align-items:center; gap:6px}
/* Route Studio edit-lock: hide the geofence draw toolbar while locked */
#pg-editor.edLocked .leaflet-draw{display:none}
/* New-route-by-mapping wizard: maximise the map, floating control panel.
   Collapse the 340px side track to a single full-width map column, otherwise the
   map squeezes into the empty 340px slot and the rest of the page renders blank. */
.edShell.wizard{grid-template-columns:1fr}
.edShell.wizard .edSide{display:none}
.wizPanel{position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:900; width:min(640px,94%);
  background:var(--surface); border:1px solid var(--line); border-radius: 4px; box-shadow:var(--shadow);
  padding:13px 16px; display:flex; flex-direction:column; gap:8px}
.wizPanel .wizRow{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.wizPanel label{font-size:12.5px; display:flex; align-items:center; gap:5px}
#wizStopFields{display:flex}
/* ---- ROUTE EDITOR drawer (admin: add/edit/drag stoppages, Polish, Save) ---- */
.routeEditor{position:absolute; top:0; right:0; bottom:0; width:410px; max-width:94vw; z-index:940; background:var(--surface);
  border-left:1px solid var(--line); box-shadow:-10px 0 30px rgba(0,0,0,.28); display:flex; flex-direction:column;
  transform:translateX(105%); transition:transform .22s ease}
.routeEditor.on{transform:none}
.routeEditor .reHead{display:flex; align-items:center; gap:9px; padding:13px 15px; border-bottom:1px solid var(--line); font-weight:800; font-size:14px}
.routeEditor .reCols{display:grid; grid-template-columns:24px 1fr 76px 76px 46px 50px 28px; gap:5px; padding:8px 15px 4px;
  font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; color:var(--ink3)}
.routeEditor .reBody{flex:1; overflow-y:auto; padding:4px 15px 10px}
.reRow{display:grid; grid-template-columns:24px 1fr 76px 76px 46px 50px 28px; gap:5px; margin-bottom:6px; align-items:center}
.reRow input,.reRow select{padding:6px 6px; font-size:11.5px; min-width:0}
.reRow .reNum{width:22px; height:22px; border-radius: 50%; background:var(--chip); border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:800; color:var(--ink2)}
/* Step-by-step guide strip — same numbers the toasts use */
.reSteps{display:flex; flex-direction:column; gap:4px; padding:9px 15px; border-bottom:1px solid var(--line);
  background:color-mix(in srgb, var(--info) 7%, transparent); font-size:11.5px; line-height:1.5}
.reSteps b{color:var(--info)}
/* "Show landmarks" chip on the Route Studio map (focus mode) */
.edExtrasTog{position:absolute; top:12px; left:56px; z-index:930; display:flex; gap:6px; align-items:center;
  background:var(--surface); border:1px solid var(--line); border-radius: 4px; padding:6px 12px;
  font-size:11.5px; font-weight:700; color:var(--ink); cursor:pointer; box-shadow:0 3px 10px rgba(0,0,0,.18)}
.reFoot{padding:12px 15px 8px; border-top:1px solid var(--line); display:flex; gap:8px; flex-wrap:wrap}
.reStopIc{width:30px; height:30px; display:flex; align-items:center; justify-content:center; background:#fff; border:2.5px solid; border-radius: 50%; font-size:15px; box-shadow:0 2px 8px rgba(0,0,0,.4); cursor:grab}
/* Google-Maps-style map labels: bare icon (no white chip) + always-visible name
   with a dark halo so it reads clearly on satellite AND street tiles. Labels
   hide automatically when zoomed far out (map container gets .zoomLbLo). */
.mapPin{display:flex; flex-direction:column; align-items:center; line-height:1}
.mapPinIc{line-height:1; filter:drop-shadow(0 1px 2.5px rgba(0,0,0,.85))}
.mapPinDot{display:inline-block; border-radius: 50%; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.65)}
.mapLblTxt{margin-top:2px; font-size:10.5px; font-weight:800; color:#fff; letter-spacing:.02em; white-space:nowrap;
  text-shadow:0 0 3px #0B1220, 0 0 3px #0B1220, 0 1px 2px #0B1220, 0 -1px 2px #0B1220}
.zoomLbLo .mapLblTxt{display:none}
/* Waypoints A→B: blinking ring on the two consecutive neighbour stoppages */
.wpBlinkRing{width:40px; height:40px; border-radius: 50%; border:4px solid #F59E0B; box-shadow:0 0 14px #F59E0B; animation:wpBlink .55s ease-in-out infinite alternate}
@keyframes wpBlink{from{opacity:1; transform:scale(.82)}to{opacity:.25; transform:scale(1.18)}}
/* ---- ⚡ charging bus: multi-colour flashing animation (only while the API says CHARGING) ---- */
.busMarkerInner.chg .busIconWrap{animation:chgHue 1.5s linear infinite}
@keyframes chgHue{
  0%{filter:drop-shadow(0 0 5px #22D3EE)} 25%{filter:drop-shadow(0 0 13px #34D399)}
  50%{filter:drop-shadow(0 0 7px #FBBF24)} 75%{filter:drop-shadow(0 0 13px #22D3EE)} 100%{filter:drop-shadow(0 0 5px #22D3EE)}}
.chgBolt{position:absolute; top:-7px; right:-3px; font-size:15px; z-index:6; animation:chgFlash .9s ease-in-out infinite; filter:drop-shadow(0 0 4px #FBBF24); pointer-events:none}
@keyframes chgFlash{0%,100%{opacity:1; transform:scale(1)}50%{opacity:.3; transform:scale(1.3)}}
.edUndoBar{display:flex; gap:6px; margin-top:9px}
.edUndoBar .btn{flex:1}
.btn:disabled,.btn.disabled{opacity:.4; pointer-events:none}
/* --- Advanced Driver Scorecard --- */
.scTopGrid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px}
.scTopCol{display:flex; flex-direction:column; gap:8px}
.scTopTitle{font-weight:800; font-size:13px; margin-bottom:2px}
.scCard{display:flex; align-items:center; gap:10px; background:var(--card); border:1px solid var(--line); border-radius: 4px; padding:9px 11px}
.scRank{flex:0 0 26px; height:26px; border-radius: 50%; color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:13px}
.scCardBody{flex:1; min-width:0}
.scCardBody b{display:block; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.scCardBody small{color:var(--ink2); font-size:11px}
.scMini{display:flex; flex-wrap:wrap; gap:10px; margin-top:5px; font-size:12px; font-weight:700}
.scRouteHead{padding:8px 11px; margin:14px 0 6px; background:var(--chip); border-radius: 4px} .scRouteHead small{color:var(--ink2)} .dfmsBanner{background:color-mix(in srgb, var(--warn) 12%, transparent); border:1px solid color-mix(in srgb, var(--warn) 45%, transparent); color:var(--ink); border-radius: 4px; padding:10px 13px; font-size:12.5px; margin-bottom:12px; cursor:pointer}
.hint{font-size:11.5px; color:var(--ink2); line-height:1.55; margin-top:7px}
.chartBox{position:relative; height:250px; width:100%}
.chartBox canvas{position:absolute; inset:0}

/* battery bar */
.battWrap{width:52px}
.battBar{height:7px; border-radius: 4px; background:var(--surface2); overflow:hidden}
.battBar i{display:block; height:100%; border-radius: 4px} .battTxt{font-size:9.5px; font-weight:800; margin-top:2px; letter-spacing:.03em}

/* DFMS badge */
.dfmsNA{background:color-mix(in srgb, var(--bad) 12%, transparent); color:var(--bad); border:1px dashed color-mix(in srgb, var(--bad) 45%, transparent);
  padding:2px 8px; border-radius: 4px; font-size:10px; font-weight:800; cursor:pointer; letter-spacing:.04em; white-space:nowrap}
.dfmsNA:hover{filter:brightness(1.2)}

.mapWrap{position:absolute; inset:0}
#liveMap,#boardMap,#editMap,#playMap{position:absolute; inset:0; background:var(--map-canvas)}
#boardMap{background:#0B1220}
[data-theme="jspl-light"] #boardMap,[data-theme="steel"] #boardMap{background:#f2f2ef}
.leaflet-container{background:var(--map-canvas); font-family:"IBM Plex Sans"}
/* padding-right reserves a gutter so the filter panel never covers the Leaflet
   layers control (base-map switcher) that sits at the map's top-right corner */
.mapTopBar{position:absolute; top:12px; left:12px; right:12px; z-index:600; display:flex; gap:9px; align-items:flex-start; pointer-events:none; flex-wrap:wrap; padding-right:52px}
.mapTopBar>*{pointer-events:auto}
.mapPanel{background:var(--surface); border:1px solid var(--line); border-radius: 4px; box-shadow:var(--shadow); padding:8px 12px; display:flex; gap:9px; align-items:center; flex-wrap:wrap}
.mapPanel input{width:185px; padding:6px 10px; font-size:12.5px}
.legend{position:absolute; bottom:16px; left:12px; z-index:600; background:var(--surface); border:1px solid var(--line); border-radius: 4px; padding:10px 14px; box-shadow:var(--shadow); font-size:11.5px; max-width:340px}
.legend div{display:flex; align-items:center; gap:8px; margin:3px 0}
.legend i{width:10px;height:10px;border-radius: 50%; flex:none}
.busPop{font-size:12.5px; line-height:1.6; min-width:210px}
.busPop b{font-family:"Rajdhani"; font-size:16px}
/* max-height is the safety net for the DRAGGED state: dragging sets bottom:auto,
   which otherwise lets the panel grow past the bottom of the screen so the last
   buses are unreachable. JS re-caps this precisely; this keeps it sane meanwhile. */
.fleetSide{position:absolute; top:64px; right:12px; bottom:16px; width:280px; max-height:calc(100% - 80px); z-index:600; background:var(--surface); border:1px solid var(--line); border-radius: 4px; box-shadow:var(--shadow); display:flex; flex-direction:column; overflow:hidden}
.fleetSide h4{padding:11px 14px 8px; font-weight:800; font-size:13px; border-bottom:1px solid var(--line); letter-spacing:.04em}
.fleetCtrls{padding:6px 8px; border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:6px}
.fleetTabs{display:flex; gap:4px; flex-wrap:wrap}
.fchip{font-size:10.5px; font-weight:700; padding:3px 8px; border-radius: 4px; border:1px solid var(--line); background:var(--chip); color:var(--ink2); cursor:pointer; white-space:nowrap}
.fchip.on{background:color-mix(in srgb, var(--accent) 16%, transparent); border-color:var(--accent); color:var(--ink)}
#fleetSort{font-size:11.5px; padding:4px 6px; width:100%}
#fleetQ{font-size:11.5px; padding:5px 7px; width:100%}
#fleetQCount{font-size:10px; color:var(--ink3); font-weight:700}
#fleetHead{cursor:grab}
.fleetList{flex:1; overflow-y:auto; padding:6px}
.busRow{display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius: 4px; cursor:pointer; border:1px solid transparent}
.busRow:hover{background:var(--surface2)}
.busRow.sel{border-color:var(--accent)}
.busRow .rt{width:8px; height:30px; border-radius: 4px; flex:none}
.busRow b{font-size:12px; display:block; font-family:"IBM Plex Mono"}
.busRow small{color:var(--ink2); font-size:10.5px}
.busRow .spd{margin-left:auto; font-family:"Rajdhani"; font-weight:700; font-size:15px; text-align:right}
/* Fleet panel header carries a dedicated collapse button (better UX than clicking the whole row) */
.fleetSide h4{display:flex; align-items:center; gap:8px; user-select:none}
.fleetTog{margin-left:auto; display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius: 4px; border:1px solid var(--line); background:var(--chip); color:var(--ink); cursor:pointer; font-size:12px; font-weight:800; padding:0; transition:transform .18s ease, background .12s}
.fleetTog:hover{background:var(--surface2); border-color:var(--accent)}
.fleetTog:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.fleetSide.collapsed{bottom:auto; width:auto; max-width:260px}
.fleetSide.collapsed .fleetList{display:none}
.fleetSide.collapsed h4{border-bottom:none}
.fleetSide.collapsed .fleetTog{transform:rotate(-180deg)}
/* last-4 reg number labels under every live bus */
.busLbl{background:rgba(15,23,42,.88); color:#fff; border:1px solid rgba(255,255,255,.25); border-radius: 4px;
  padding:1px 6px; font-family:"IBM Plex Mono",monospace; font-size:10.5px; font-weight:700; letter-spacing:.06em;
  box-shadow:0 1px 4px rgba(0,0,0,.4); pointer-events:none}
.busLbl::before{display:none}
/* Near Me panel */
.fleetSide.nearMe{z-index:640}
.fleetSide.nearMe h4 .btn{margin-left:auto}
.nearRow small b{color:var(--ink)}
.nearEta{margin-left:auto; text-align:right; font-family:"Rajdhani"; font-weight:700; font-size:17px; line-height:1}
.nearEta small{display:block; font-size:9.5px; color:var(--ink2); font-family:"IBM Plex Sans"; font-weight:600}
.userDot{width:16px;height:16px;border-radius: 50%;background:#1877C9;border:3px solid #fff;box-shadow:0 0 0 2px rgba(24,119,201,.4);position:relative}
.userDot::after{content:""; position:absolute; inset:-7px; border-radius: 50%; border:2px solid #1877C9; opacity:.55; animation:ping 1.8s infinite}
/* ---- Plant Route Map (schematic view, styled after the JSL reference drawing) ---- */
/* sits above the Leaflet panes & controls (≤1000) but below the live top bar (1100) */
#plantMapView{position:absolute; inset:0; z-index:1050; display:none; flex-direction:column; background:#020617; color:#E2E8F0; user-select:none; -webkit-user-select:none}
#plantMapView svg{touch-action:none}
#pg-live .mapTopBar{z-index:1100}
#plantMapView.on{display:flex}
.pmHead{display:flex; align-items:center; gap:12px; padding:64px 16px 10px; border-bottom:1px solid #1E293B; flex-wrap:wrap}
.pmTitle b{font-family:"Rajdhani"; font-size:19px; letter-spacing:.04em; display:block; color:#F1F5F9}
.pmTitle small{color:#64748B; font-size:11px}
.pmHead select{width:auto; margin-left:auto; background:#0F172A; color:#E2E8F0; border-color:#1E293B}
.pmSvgWrap{flex:1; min-height:0; position:relative; padding:10px; overflow:hidden; touch-action:none}
.pmSvgWrap svg{width:100%; height:100%; display:block; background:#020617; border:1px solid #0F172A; border-radius: 4px; cursor:grab}
.pmSvgWrap svg.dragging{cursor:grabbing}
.pmZoom{position:absolute; top:16px; left:16px; z-index:5; display:flex; flex-direction:column; gap:5px; background:rgba(15,23,42,.85); backdrop-filter:blur(6px); border:1px solid #1E293B; border-radius: 4px; padding:5px}
.pmZoom button{width:32px; height:32px; background:transparent; border:none; color:#E2E8F0; font-size:16px; font-weight:800; cursor:pointer; border-radius: 4px; padding:0}
.pmZoom button:hover{background:#1E293B; color:#fff}
.pmZoom .lvl{font-size:10px; color:#64748B; text-align:center; padding:2px 0; font-family:monospace}
.pmLegend{display:flex; gap:16px; flex-wrap:wrap; align-items:center; padding:9px 16px; border-top:1px solid #1E293B; font-size:11.5px; color:#94A3B8}
.pmLegend i{width:14px; height:4px; border-radius: 2px; display:inline-block; margin-right:6px; vertical-align:middle}
/* --- Bus direction badge (inbound = toward Hostel 3, outbound = away) --- */
.dirBadge{display:inline-flex; align-items:center; gap:3px; font-size:10.5px; font-weight:800; letter-spacing:.02em; white-space:nowrap; padding:1px 6px; border-radius: 4px; background:color-mix(in srgb, currentColor 10%, transparent); max-width:170px; overflow:hidden; text-overflow:ellipsis}
/* ETA board / table cells: show the FULL direction target (no ellipsis clipping) */
.dirBadge.big{font-size:12px; padding:2px 8px; max-width:none; white-space:normal; overflow:visible; text-overflow:clip}
/* --- Complaint Box --- */
.cmplShell{display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr); gap:14px; align-items:start}
.cmplForm textarea{width:100%; resize:vertical; font-family:inherit; font-size:13px; padding:9px 11px; border:1px solid var(--line); border-radius: 4px; background:var(--surface); color:var(--ink)}
.cmSnap{margin-top:8px; padding:9px 11px; background:var(--chip); border:1px dashed var(--line); border-radius: 4px; font-size:11.5px; line-height:1.6}
.cmSnap b{color:var(--ink)}
.cmAiBox{margin-top:10px; padding:10px 12px; border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); background:color-mix(in srgb, var(--accent) 8%, transparent); border-radius: 4px; font-size:12px}
.cmAiBox .row{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:5px}
.cmMiniKpis{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:10px}
.cmMiniKpis .k{flex:1; min-width:88px; background:var(--chip); border:1px solid var(--line); border-radius: 4px; padding:7px 10px}
.cmMiniKpis .k b{font-family:"Rajdhani"; font-size:20px; display:block; line-height:1}
.cmMiniKpis .k small{font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--ink3); font-weight:800}
.cmListBody{max-height:62vh; overflow-y:auto; display:flex; flex-direction:column; gap:8px}
.cmRow{border:1px solid var(--line); border-radius: 4px; padding:10px 12px; cursor:pointer; transition:.12s; border-left-width:4px}
.cmRow:hover{background:var(--surface2)}
.cmRow .top{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.cmRow .cid{font-family:"IBM Plex Mono"; font-weight:800; font-size:12px}
.cmRow .subj{font-weight:700; font-size:13px; margin:3px 0}
.cmRow .meta{font-size:11px; color:var(--ink2); display:flex; gap:10px; flex-wrap:wrap}
.cmPri{font-size:10px; font-weight:800; padding:1px 8px; border-radius: 4px; text-transform:uppercase; letter-spacing:.04em}
.cmPri.Critical{background:color-mix(in srgb,var(--bad) 18%,transparent); color:var(--bad)}
.cmPri.High{background:color-mix(in srgb,#F97316 20%,transparent); color:#F97316}
.cmPri.Medium{background:color-mix(in srgb,var(--warn) 18%,transparent); color:var(--warn)}
.cmPri.Low{background:color-mix(in srgb,var(--ok) 16%,transparent); color:var(--ok)}
.cmStat{font-size:10px; font-weight:800; padding:1px 8px; border-radius: 4px} .cmStat.Open,.cmStat.Acknowledged{background:color-mix(in srgb,var(--info) 16%,transparent); color:var(--info)}
.cmStat.InProgress,.cmStat.NeedMoreTime{background:color-mix(in srgb,var(--warn) 18%,transparent); color:var(--warn)}
.cmStat.Resolved,.cmStat.Closed{background:color-mix(in srgb,var(--ok) 16%,transparent); color:var(--ok)}
.cmThread{max-height:46vh; overflow-y:auto; margin:12px 0; display:flex; flex-direction:column; gap:9px}
.cmMsg{padding:9px 12px; border-radius: 4px; font-size:12.5px; line-height:1.5; max-width:88%}
.cmMsg.user{background:var(--chip); border:1px solid var(--line); align-self:flex-start}
.cmMsg.staff{background:color-mix(in srgb,var(--accent) 12%,transparent); border:1px solid color-mix(in srgb,var(--accent) 30%,transparent); align-self:flex-end}
.cmMsg .who{font-size:10px; font-weight:800; color:var(--ink3); margin-bottom:3px; text-transform:uppercase; letter-spacing:.05em}
.cmDetGrid{display:grid; grid-template-columns:1fr 1fr; gap:6px 14px; font-size:12px; margin:10px 0; padding:11px; background:var(--chip); border-radius: 4px} .cmDetGrid .l{color:var(--ink3); font-size:10px; text-transform:uppercase; letter-spacing:.06em; font-weight:800}
@media(max-width:900px){ .cmplShell{grid-template-columns:1fr} .cmDetGrid{grid-template-columns:1fr} }
/* --- Live-map bus marker: heading arrow around the bus icon --- */
.busMarker{overflow:visible}
.busMarkerInner{position:relative; display:flex; align-items:center; justify-content:center}
.busIconWrap{display:flex; align-items:center; justify-content:center; position:relative; z-index:2}
.busHeadRing{position:absolute; inset:0; z-index:1; transform-origin:center center; transition:transform .5s ease}
.busHeadArrow{position:absolute; top:-4px; left:50%; transform:translateX(-50%); width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:12px solid #34D399; filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
/* --- Metro-style Line Status view --- */
#metroView{position:absolute; inset:0; z-index:1050; display:none; flex-direction:column; background:#0B1220; color:#E2E8F0; user-select:none; -webkit-user-select:none}
#metroView.on{display:flex}
#metroView .pmHead{padding:64px 16px 12px}
#metroView .pmTitle small{color:#94A3B8}
.metroWrap{flex:1; min-height:0; overflow:auto; padding:14px 18px 22px; scroll-behavior:smooth}
.metroLine{position:relative; margin:0 0 26px; padding:12px 12px 20px; background:rgba(15,23,42,.65); border:1px solid #1E293B; border-radius: 4px; overflow:hidden}
.metroLine h5{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:800; letter-spacing:.03em; margin-bottom:12px}
.metroLine h5 .dot{width:14px; height:14px; border-radius: 50%; box-shadow:0 0 0 3px rgba(255,255,255,.06)}
.metroLine h5 .meta{margin-left:auto; font-size:11px; color:#94A3B8; font-weight:600; letter-spacing:0}
/* padding-top must clear pill (22) + stem (12) + gap (8) + pulse ring expansion (~10) */
.metroTrack{position:relative; padding:100px 22px 44px; overflow-x:auto; overflow-y:visible}
.metroRail{position:relative; height:6px; border-radius: 3px; min-width:100%}
.metroStop{position:absolute; top:50%; transform:translate(-50%,-50%); width:14px; height:14px; border-radius: 50%; background:#0F172A; border:3px solid currentColor; box-shadow:0 0 0 3px #0B1220}
.metroStop.origin{width:18px; height:18px; background:#F59E0B; border-color:#fff}
.metroStop.terminus{width:16px; height:16px; background:#334155}
.metroStopLabel{position:absolute; top:22px; transform:translateX(-50%); font-size:10.5px; font-weight:700; color:#CBD5E1; white-space:nowrap; letter-spacing:.02em; text-align:center; max-width:110px}
.metroStopLabel.origin{color:#F59E0B; font-weight:800}
.metroBus{position:absolute; bottom:calc(100% + 8px + (var(--stk, 0) * 34px)); transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:2px; z-index:2; cursor:pointer; transition:transform .12s}
/* stopped / idle buses BLINK and carry a clear status label above the pill */
.metroBus.halt .metroBusPill{animation:metroBlink .85s ease-in-out infinite}
@keyframes metroBlink{0%,100%{opacity:1}50%{opacity:.3}}
.metroBusStat{font-size:10.5px; font-weight:900; letter-spacing:.06em; color:#fff; background:var(--bad); padding:2.5px 9px; border-radius: 4px; box-shadow:0 2px 6px rgba(0,0,0,.55); white-space:nowrap; border:1px solid rgba(255,255,255,.35); text-shadow:0 1px 1px rgba(0,0,0,.5)}
.metroBus.halt .metroBusStat{animation:metroBlink .85s ease-in-out infinite}
.metroBusStat.chg{background:var(--charge); color:#062a33; text-shadow:none}
.metroBus:hover{transform:translateX(-50%) translateY(-2px)}
.metroBus.moving{--pill:#10B981; --pillGlow:52,211,153}
.metroBus.stopped{--pill:#EF4444; --pillGlow:248,113,113}
.metroBus.charging{--pill:#22D3EE; --pillGlow:34,211,238}
.metroBus.oos{--pill:#7F1D1D; --pillGlow:127,29,29}
.metroBusPill{background:var(--pill); color:#fff; padding:4px 10px; border-radius: 4px; font-size:10.5px; font-weight:800; font-family:"IBM Plex Mono", monospace; letter-spacing:.03em; box-shadow:0 2px 8px rgba(var(--pillGlow),.55), inset 0 1px 0 rgba(255,255,255,.35); display:flex; align-items:center; gap:5px; border:1.5px solid #0B1220}
.metroBusPill .arrow{font-size:12px; line-height:1; text-shadow:0 1px 2px rgba(0,0,0,.4)}
.metroBus.moving .metroBusPill::before{content:""; position:absolute; inset:-3px; border-radius: 4px; border:1.5px solid rgba(var(--pillGlow),.6); animation:metroPulse 1.7s infinite}
@keyframes metroPulse{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.metroBus .metroBusPill{position:relative}
.metroBusStem{width:2px; height:12px; background:var(--pill); opacity:.75}
.metroBusStem::after{content:""; display:block; width:8px; height:8px; margin:-3px 0 0 -3px; border-radius: 50%; background:var(--pill)}
.metroEmpty{padding:40px; text-align:center; color:#64748B; font-size:12.5px}
/* Bus details drawer within Metro view */
/* Sit below the map top bar (which is z-index:1100 in the parent stacking
   context — inside #metroView we can't out-stack it, so we lower the drawer
   instead so its close button is always reachable). */
.metroDetail{position:absolute; top:64px; right:0; bottom:0; width:340px; max-width:92vw; z-index:1100; background:linear-gradient(180deg, #0F172A 0%, #0B1220 100%); border-left:1px solid #1E293B; border-top:1px solid #1E293B; border-radius: 4px 0 0 0; box-shadow:-6px 0 24px rgba(0,0,0,.55); transform:translateX(100%); transition:transform .28s ease; overflow:hidden; display:flex; flex-direction:column; color:#E2E8F0}
.metroDetail.open{transform:translateX(0)}
.metroDetHead{position:relative; padding:18px 18px 14px; border-bottom:1px solid #1E293B}
.metroDetReg{font-family:"Rajdhani", "IBM Plex Mono"; font-weight:800; font-size:24px; letter-spacing:.05em; color:#F1F5F9}
.metroDetLine{font-size:12px; font-weight:700; color:#94A3B8; margin-top:2px}
.metroDetClose{position:absolute; top:12px; right:12px; width:32px; height:32px; border:1px solid #334155; background:rgba(15,23,42,.6); color:#E2E8F0; border-radius: 4px; font-size:14px; font-weight:800; cursor:pointer}
.metroDetClose:hover{background:#1E293B}
.metroDetBody{padding:16px 18px 22px; overflow-y:auto; flex:1}
.metroDetStatus{display:inline-block; font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; padding:5px 12px; border-radius: 4px; border:1px solid; margin-bottom:14px}
.metroDetRow{display:flex; align-items:baseline; gap:10px; padding:8px 0; border-bottom:1px dashed #1E293B; font-size:12.5px}
.metroDetRow .l{color:#64748B; text-transform:uppercase; font-size:10px; font-weight:800; letter-spacing:.1em; flex:0 0 92px}
.metroDetRow .v{flex:1; color:#E2E8F0; word-break:break-word}
.metroDetSep{height:10px}
@media(max-width:640px){
  .metroDetail{width:100%; max-width:100%; top:110px; border-radius: 4px 4px 0 0} } /* --- Auto-nearby banner: appears on Live map after login geolocation --- */ .autoNearby{position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:640; width:min(520px, 94%); background:var(--surface); color:var(--ink); border:1px solid var(--line); border-left:4px solid var(--info); border-radius: 4px; padding:12px 40px 12px 15px; box-shadow:0 8px 24px rgba(0,0,0,.18); font-size:12.5px}
.autoNearby .anTitle{font-weight:800; font-size:12px; color:var(--info); letter-spacing:.04em; text-transform:uppercase; margin-bottom:5px}
.autoNearby .anBody{line-height:1.55}
.autoNearby .anBody b{color:var(--ink)}
.autoNearby .anBusRow{display:flex; align-items:center; gap:8px; margin-top:6px; padding:5px 8px; background:var(--chip); border-radius: 4px; cursor:pointer}
.autoNearby .anBusRow:hover{background:var(--surface2)}
.autoNearby .anBusRow .eta{margin-left:auto; font-family:"Rajdhani"; font-weight:800; font-size:16px; color:var(--accent)}
.anClose{position:absolute; top:6px; right:6px; width:26px; height:26px; border:none; background:transparent; color:var(--ink2); font-size:14px; font-weight:800; cursor:pointer; border-radius: 4px} .anClose:hover{background:var(--surface2); color:var(--ink)}

.playBar{position:absolute; left:50%; transform:translateX(-50%); bottom:16px; z-index:650; background:var(--surface);
  border:1px solid var(--line); border-radius: 4px; box-shadow:var(--shadow); padding:11px 16px; width:min(880px,94%);
  display:flex; align-items:center; gap:11px; flex-wrap:wrap}
.playBar input[type=range]{flex:1; min-width:200px; accent-color:var(--accent)}
.pbtn{width:38px;height:38px;border-radius: 50%;border:none;background:var(--accent);color:var(--btn-ink);font-size:15px;display:flex;align-items:center;justify-content:center}
.pbtn.ghost{background:var(--chip); color:var(--ink); border:1px solid var(--line)}
.playStat{position:absolute; top:64px; right:12px; z-index:650; background:var(--surface); border:1px solid var(--line); border-radius: 4px; box-shadow:var(--shadow); padding:11px 15px; min-width:215px; font-size:12.5px; line-height:1.7}
.playStat b{font-family:"Rajdhani"; font-size:18px}
/* History Playback added a right-docked "History stored" panel in the same top-right
   corner as .playStat (the per-point vehicle readout) — move the readout to the left
   there so scrubbing never covers the vehicle list. */
#pg-playback .playStat{left:12px; right:auto}

.tabs{display:flex; gap:7px; margin-bottom:13px; flex-wrap:wrap}
.tabs button{padding:8px 14px; border-radius: 4px; border:1px solid var(--line); background:var(--surface); color:var(--ink2); font-weight:700; font-size:12px}
.tabs button.on{background:var(--accent); border-color:var(--accent); color:var(--btn-ink)}

.mgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:12px; perspective:1200px}
/* Liquid-glass flip cards: hover (or tap on mobile) flips front → back detail */
.mflip{height:104px; cursor:pointer; perspective:900px}
.mflip-inner{position:relative; width:100%; height:100%; transition:transform .6s cubic-bezier(.45,.05,.2,1); transform-style:preserve-3d}
.mflip:hover .mflip-inner,.mflip.flipped .mflip-inner{transform:rotateY(180deg)}
.mface{position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius: 4px; padding:12px 14px;
  display:flex; flex-direction:column; justify-content:center; overflow:hidden;
  background:linear-gradient(135deg, color-mix(in srgb, var(--surface) 78%, transparent), color-mix(in srgb, var(--surface) 42%, transparent));
  backdrop-filter:blur(12px) saturate(1.5); -webkit-backdrop-filter:blur(12px) saturate(1.5);
  border:1px solid color-mix(in srgb, var(--ink) 12%, transparent);
  box-shadow:0 6px 22px rgba(0,0,0,.14), inset 0 1px 0 color-mix(in srgb,#fff 45%, transparent), inset 0 0 22px color-mix(in srgb,#fff 6%, transparent)}
.mface::before{content:""; position:absolute; top:-55%; left:-35%; width:80%; height:150%;
  background:linear-gradient(115deg, color-mix(in srgb,#fff 42%, transparent), transparent 62%); transform:rotate(9deg); pointer-events:none}
.mface::after{content:""; position:absolute; inset:0; border-radius: 4px; padding:1px; pointer-events:none;
  background:linear-gradient(135deg, color-mix(in srgb,#fff 40%, transparent), transparent 45%, color-mix(in srgb,var(--accent) 22%, transparent));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude}
.mface .t{font-size:9.5px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--ink3); position:relative; z-index:1}
.mface .v{font-family:"Rajdhani"; font-size:24px; font-weight:700; margin-top:3px; word-break:break-word; line-height:1.05; position:relative; z-index:1}
.mface .s{font-size:11px; color:var(--ink2); margin-top:4px; position:relative; z-index:1}
.mface.back{transform:rotateY(180deg);
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 26%, var(--surface)), color-mix(in srgb, var(--surface) 60%, transparent))}
.mface.back .fliplbl{font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); position:relative; z-index:1}
.mface.back .bigdetail{font-size:14px; font-weight:800; color:var(--ink); margin-top:4px; position:relative; z-index:1; line-height:1.25}
.mflip.a .front .v{color:var(--ok)} .mflip.w .front .v{color:var(--warn)} .mflip.b .front .v{color:var(--bad)} .mflip.i .front .v{color:var(--info)} .mflip.o .front .v{color:var(--accent)}
.msec{font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); margin:16px 0 8px}
@media(hover:none){.mflip:hover .mflip-inner{transform:none} .mflip.flipped .mflip-inner{transform:rotateY(180deg)}}
/* balance the metric box: taller, value scales down if long, 🔍 detail button */
.mflip{height:118px}
.mface .v{font-size:clamp(15px, 4.4vw, 24px); max-height:52px; overflow:hidden}
.mDetBtn{position:absolute; top:7px; right:8px; z-index:2; background:color-mix(in srgb,var(--ink) 8%, transparent); border:1px solid var(--line); border-radius: 4px; font-size:11px; padding:2px 6px; cursor:pointer; opacity:0; transition:.12s}
.mflip:hover .mDetBtn{opacity:1}
.mface.back{justify-content:flex-start; padding-top:14px}
/* detail modal: staggered fade-in list + body entrance */
#dmBody.dmIn{animation:dmFade .22s ease}
@keyframes dmFade{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
.dmList{display:flex; flex-direction:column; gap:6px; max-height:340px; overflow:auto}
.dmRow{display:flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid var(--line); border-radius: 4px; background:var(--chip); font-size:12.5px; opacity:0; animation:dmRowIn .3s ease forwards}
@keyframes dmRowIn{from{opacity:0; transform:translateX(-8px)}to{opacity:1; transform:none}}

.hcard{display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line); border-radius: var(--radius); padding:15px 18px; box-shadow:var(--shadow)}
.hdot{width:15px;height:15px;border-radius: 50%; flex:none}
.hdot.g{background:var(--ok); box-shadow:0 0 14px var(--ok)}
.hdot.r{background:var(--bad); box-shadow:0 0 14px var(--bad)}
.hdot.y{background:var(--warn)}
.hcard b{font-weight:800; font-size:14px; display:block}
.hcard small{color:var(--ink2); font-size:11.5px}
.hgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px; margin-bottom:13px}

.edShell{display:grid; grid-template-columns:340px 1fr; position:absolute; inset:0}
.edSide{background:var(--surface); border-right:1px solid var(--line); overflow-y:auto; padding:14px}
.edSide h3{font-size:15px; font-weight:800; margin-bottom:10px}
.routeCard{display:flex; align-items:center; gap:10px; padding:10px 11px 10px 9px; border:1px solid var(--line); border-left:4px solid var(--rc, var(--line)); border-radius: 4px; margin-bottom:7px; cursor:pointer; background:var(--chip);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease}
.routeCard:hover{transform:translateX(2px); box-shadow:0 3px 12px rgba(0,0,0,.14)}
.routeCard.sel{border-color:var(--accent); border-left-color:var(--rc, var(--accent)); background:color-mix(in srgb, var(--rc, var(--accent)) 9%, transparent)}
.routeCard .cdot{width:13px;height:13px;border-radius: 50%; flex:none; box-shadow:0 0 0 3px color-mix(in srgb, var(--rc, var(--ink)) 22%, transparent)}
.routeCard b{font-size:13px; display:block; color:var(--rc, var(--ink))}
.routeCard small{color:var(--ink2); font-size:11px}
.routeCard .rcChips{display:flex; gap:5px; margin-top:3px}
.routeCard .rcChip{font-size:9.5px; font-weight:800; letter-spacing:.04em; padding:1.5px 7px; border-radius: 4px; background:color-mix(in srgb, var(--ink3) 14%, transparent); color:var(--ink2); white-space:nowrap}
.stopsTable{max-height:250px; overflow-y:auto; border:1px solid var(--line); border-radius: 4px; margin-top:8px}
.stopsTable table{font-size:12px}
.stopsTable input{padding:4px 6px; font-size:12px; border-radius: 4px} .edMapWrap{position:relative} #editMap{position:absolute; inset:0}

.icoGrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:11px}
.icoCard{border:2px solid var(--line); border-radius: 4px; padding:12px 8px; text-align:center; cursor:pointer; background:var(--chip)}
.icoCard.sel{border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, transparent)}
.icoCard .nm{font-size:11px; font-weight:700; margin-top:7px}
.icoCard svg{filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}

/* BIRD'S EYE WALL */
.beTop{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:12px}
.beWrap{display:flex; gap:13px; align-items:stretch}
.beGrid{display:grid; gap:12px; flex:1; grid-template-columns:repeat(2,1fr); align-content:start}
.bePanel{border-radius: var(--radius); overflow:hidden; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); cursor:pointer; position:relative;
  transition:transform .15s ease, box-shadow .15s ease}
.bePanel:hover{transform:translateY(-2px); box-shadow:0 10px 28px rgba(0,0,0,.28)}
.bePanel.sel{outline:3px solid var(--accent)}
.bePanel .beHead{display:flex; align-items:center; gap:9px; padding:9px 13px; border-bottom:1px solid var(--line); font-weight:800; font-size:13px; letter-spacing:.03em;
  background:linear-gradient(90deg, color-mix(in srgb, var(--rc, transparent) 13%, transparent), transparent 70%)}
.bePanel .beHead .cdot{width:11px;height:11px;border-radius: 50%; box-shadow:0 0 0 3px color-mix(in srgb, var(--rc, var(--ink)) 22%, transparent)}
.bePanel .beHead{border-left:4px solid var(--rc, var(--line))}
.beChip{font-size:9.5px; font-weight:800; letter-spacing:.04em; padding:2px 8px; border-radius: 4px; background:color-mix(in srgb, var(--ink3) 14%, transparent); color:var(--ink2); margin-left:5px; white-space:nowrap}
.beChip.mv{background:color-mix(in srgb, var(--ok) 16%, transparent); color:var(--ok)}
.bePanel .beHead small{margin-left:auto; color:var(--ink2); font-weight:600; font-size:11px}
.bePanel[draggable=true]{cursor:grab}
.bePanel.beDragOver{outline:3px dashed var(--accent)}
.beBigBtn{background:var(--chip); border:1px solid var(--line); color:var(--ink); border-radius: 4px; font-size:12px; line-height:1; padding:3px 7px; cursor:pointer}
.beBigTag{background:var(--accent); color:var(--btn-ink); font-size:9px; font-weight:800; letter-spacing:.05em; padding:2px 6px; border-radius: 4px} .bePanel .beMap{height:340px; background:var(--map-canvas)}
.bePanel{display:flex; flex-direction:column}
.bePanel .beMap{flex:1; min-height:340px}
/* CCTV-control-panel wall styles: big feature panels + small tiles */
.beGrid.laySmall .bePanel .beMap{min-height:210px; height:210px}
.beGrid.layBig .bePanel .beMap{min-height:220px; height:220px}
.beGrid.layBig .bePanel.big{grid-column:span 2; grid-row:span 2}
.beGrid.layBig .bePanel.big .beMap{min-height:475px; height:auto}
.beSide{width:335px; flex:none; background:var(--surface); border:1px solid var(--line); border-radius: var(--radius); box-shadow:var(--shadow); overflow-y:auto; max-height:calc(100vh - 165px); display:none}
.beSide.on{display:block}
.beSide h4{padding:12px 14px; border-bottom:1px solid var(--line); font-weight:800; font-size:14px; display:flex; align-items:center; gap:8px; position:sticky; top:0; background:var(--surface); z-index:2}
.beSide .sec{padding:10px 14px; border-bottom:1px solid var(--line)}
.beSide .sec b.st{font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--ink3); display:block; margin-bottom:7px}
.beBusRow{padding:8px 10px; border:1px solid var(--line); border-radius: 4px; margin-bottom:7px; background:var(--chip); font-size:12px; line-height:1.65}
.beBanner{background:color-mix(in srgb, var(--accent) 10%, transparent); border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  color:var(--accent); border-radius: 4px; padding:10px 14px; font-size:12.5px; font-weight:700; display:flex; align-items:center; gap:12px; margin-bottom:12px}

/* Toasts live TOP-CENTRE (under the header) so they never cover the Route
   Editor drawer, wizard panel or fleet list that occupy the page corners. */
#toasts{position:fixed; top:76px; left:50%; transform:translateX(-50%); z-index:2000; display:flex; flex-direction:column; gap:9px; align-items:center; pointer-events:none}
#toasts .toast{pointer-events:auto}
.toast{background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--accent); border-radius: 4px; padding:11px 16px; box-shadow:var(--shadow); font-size:12.5px; min-width:250px; max-width:420px; animation:tin .25s; color:var(--ink)}
.toast.warn{border-left-color:var(--warn)} .toast.bad{border-left-color:var(--bad)}
@keyframes tin{from{transform:translateX(30px);opacity:0}}
/* ---- 🫧 LIQUID GLASS popups (iOS-style): frosted blur behind, translucent
   surface, soft inner highlight on the top edge and a deep ambient shadow.
   Applies to EVERY .modal site-wide. Falls back to a solid surface where
   backdrop-filter is unsupported (@supports below). ---- */
.modalBk{position:fixed; inset:0; background:rgba(2,6,23,.45); backdrop-filter:blur(18px) saturate(1.35);
  -webkit-backdrop-filter:blur(18px) saturate(1.35); z-index:1500; display:none; align-items:center; justify-content:center}
.modalBk.on{display:flex; animation:glassIn .22s ease}
@keyframes glassIn{from{opacity:0}}
.modal{position:relative; border-radius: 4px; padding:24px; width:470px; max-width:94vw; max-height:92vh; overflow-y:auto;
  background:color-mix(in srgb, var(--surface) 62%, transparent);
  backdrop-filter:blur(34px) saturate(1.9); -webkit-backdrop-filter:blur(34px) saturate(1.9);
  border:1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  box-shadow:0 32px 90px rgba(0,0,0,.45), 0 2px 0 rgba(255,255,255,.30) inset, 0 -1px 0 rgba(255,255,255,.06) inset;
  animation:glassPop .26s cubic-bezier(.22,1.2,.36,1)}
@keyframes glassPop{from{opacity:0; transform:translateY(14px) scale(.965)}}
/* specular sheen across the top, like the iOS control-centre tiles */
.modal::before{content:""; position:absolute; inset:0 0 auto 0; height:46%; border-radius: 4px 4px 60% 60%/26px 4px 22% 22%;
  background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0)); pointer-events:none}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .modalBk{background:rgba(2,6,23,.80)} .modal{background:var(--surface)}
}
.modal h3{margin-bottom:14px; font-weight:800; font-size:16px}
.modal label{display:block; font-size:10.5px; font-weight:800; color:var(--ink3); margin:11px 0 4px; text-transform:uppercase; letter-spacing:.1em}
.modal .acts{display:flex; gap:9px; justify-content:flex-end; margin-top:20px}
.permGrid{display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; font-size:12.5px; margin-top:6px}
.permGrid label{display:flex; align-items:center; gap:7px; margin:2px 0; font-weight:500; color:var(--ink); text-transform:none; letter-spacing:0; font-size:12.5px}
.permGrid input{width:auto}
.calibList{font-size:12px; max-height:130px; overflow-y:auto; margin-top:6px}
.calibList div{padding:3px 0; border-bottom:1px dashed var(--line)}
.daysGrid{display:flex; gap:6px; flex-wrap:wrap}
.daysGrid label{display:flex; gap:4px; align-items:center; font-size:12px; font-weight:600; color:var(--ink); text-transform:none; letter-spacing:0; background:var(--chip); border:1px solid var(--line); border-radius: 4px; padding:4px 8px; margin:0}
.daysGrid input{width:auto}
/* --- hamburger + nav backdrop (mobile) --- */
.navBurger{display:none; background:var(--chip); border:1px solid var(--line); color:var(--ink); border-radius: 4px; font-size:18px; line-height:1; padding:6px 11px; cursor:pointer}
/* backdrop must sit ABOVE Leaflet controls/panes (z-index up to ~1000) so the
   open drawer covers the map instead of the map bleeding over it */
#navBackdrop{display:none; position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1990}
#navBackdrop.on{display:block}

/* ============================ MOBILE / RESPONSIVE ============================ */
@media(max-width:820px){
  #app{grid-template-columns:minmax(0,1fr); grid-template-rows:58px 1fr}
  header{grid-column:1; gap:9px; padding:0 11px; min-width:0; overflow-x:auto}
  header .brand small{display:none}
  header .brand .t1{font-size:13px}
  header img{height:34px; max-width:120px}
  .navBurger{display:block}
  /* off-canvas nav */
  nav{position:fixed; top:0; left:0; bottom:0; width:250px; z-index:2000; transform:translateX(-100%); transition:transform .22s ease; box-shadow:2px 0 18px rgba(0,0,0,.35); padding-top:14px; background:var(--surface)}
  nav.open{transform:translateX(0)}
  /* let content flow/scroll naturally on phones; min-width:0 lets grid items shrink
     below the Leaflet map's cached intrinsic width instead of overflowing the screen */
  main{overflow:auto; min-width:0}
  nav{min-width:0}
  .page{position:relative; inset:auto; padding:11px; min-height:100%; max-width:100%}
  .page.nopad{position:relative; inset:auto}
  .edShell,.edSide,.edMapWrap{min-width:0; max-width:100%}
  #editMap,#liveMap,#boardMap,#playMap{width:100%}
  .grid2,.grid3{grid-template-columns:1fr}
  .scTopGrid{grid-template-columns:1fr}
  .edToolGrid{grid-template-columns:1fr 1fr}
  .beGrid{grid-template-columns:1fr !important}
  .permGrid{grid-template-columns:1fr}
  /* Route Studio: stack the side panel above the map */
  .edShell{position:relative; inset:auto; grid-template-columns:1fr; height:auto; min-height:100%}
  .edSide{border-right:none; border-bottom:1px solid var(--line); max-height:none}
  .edMapWrap{height:62vh; min-height:340px}
  #editMap,#liveMap,#boardMap,#playMap{min-height:340px}
  /* make every table horizontally scrollable inside cards */
  .card{padding:12px; overflow-x:auto}
  table{min-width:520px}
  /* header pills wrap tighter */
  .pill{font-size:10.5px; padding:4px 8px}
  #themeSel{max-width:120px}
  .userBadge b{max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
  .modal{width:94vw !important; max-width:94vw}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  .kpi .v{font-size:22px}
  /* FLEET / Near-me become bottom sheets on phones — never cover the whole map */
  .fleetSide{top:auto; left:10px; right:10px; bottom:10px; width:auto; max-height:42vh}
  .fleetSide.collapsed{left:auto; right:10px; max-width:210px}
  .fleetSide.collapsed h4{padding:9px 12px 8px; font-size:12px}
  /* plant route map header clears the (wrapped) floating top bar */
  .pmHead{padding-top:118px}
}
@media(max-width:480px){
  header .brand,header .logoBox{display:none}
  .userBadge small{display:none}
  .edToolGrid{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr 1fr}
}

/* Landing Page Styles */
#landingPage {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: none;
  align-items: center;
  justify-content: center;
  background: radial-gradient(1200px 600px at 50% 30%, rgba(245,158,11,.08), transparent 60%), #020617;
  overflow: hidden;
}
#landingPage::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .05;
  background-image: repeating-linear-gradient(90deg,#fff 0 1px,transparent 1px 70px),repeating-linear-gradient(0deg,#fff 0 1px,transparent 1px 70px);
}
.landingCard {
  position: relative;
  width: 500px;
  max-width: 92vw;
  background: #0F172A;
  border: 1px solid #1E293B;
  border-radius: 4px;
  padding: 40px 36px 36px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  text-align: center;
  animation: splashIn .3s ease;
}
.landingCard img {
  height: 88px;
  display: block;
  margin: 0 auto 16px;
  max-width: 88%;
  object-fit: contain;
  background: #fff;
  border-radius: 4px;
  padding: 8px 14px;
}
.landingCard h1 {
  font-size: 26px;
  font-weight: 700;
  color: #F1F5F9;
  line-height: 1.15;
  letter-spacing: .04em;
  margin-bottom: 8px;
}
.landingCard .sub {
  color: #F59E0B;
  font-size: 11px;
  margin-bottom: 24px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
}
.landingDesc {
  color: #94A3B8;
  font-size: 13.5px;
  line-height: 1.6;
  margin-bottom: 30px;
}
.loginCard .btn-back {
  width: 100%;
  margin-top: 10px;
  padding: 11px;
  border: 1px solid #1E293B;
  border-radius: 4px;
  font-family: "Rajdhani";
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .12em;
  color: #94A3B8;
  background: transparent;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .2s ease;
}
.loginCard .btn-back:hover {
  background: #1E293B;
  color: #F1F5F9;
}

.landingCard .btn-advanced {
  position: relative;
  width: 100%;
  margin-top: 22px;
  padding: 14px 20px;
  border: 1px solid rgba(245, 158, 11, 0.3);
  border-radius: 4px;
  font-family: "Rajdhani";
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .15em;
  color: #fff;
  background: linear-gradient(90deg, #F59E0B, #D97706, #F59E0B);
  background-size: 200% auto;
  text-transform: uppercase;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.landingCard .btn-advanced span {
  transition: transform 0.3s ease;
}
.landingCard .btn-advanced .btn-arrow {
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform: translateX(-4px);
  opacity: 0.8;
}
.landingCard .btn-advanced:hover {
  background-position: right center;
  box-shadow: 0 6px 25px rgba(245, 158, 11, 0.45);
  border-color: rgba(245, 158, 11, 0.6);
  transform: translateY(-1px);
}
.landingCard .btn-advanced:hover .btn-arrow {
  transform: translateX(2px);
  opacity: 1;
}