:root{--navy:#0F1E36;--green:#2BB24C;--bg:#F4F5F7;--line:#E2E7EE;--muted:#5A6578;
--moving:#2563EB;--parked:#6B7280;--offline:#EA7A0C;--alarm:#DC2626}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;}
body{display:flex;flex-direction:column;height:100vh;height:100dvh;font-family:Inter,system-ui,sans-serif;color:var(--navy);background:var(--bg)}
button,input,select{font:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.muted{color:var(--muted);font-size:13px}
.top{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:#fff;color:var(--navy);padding:10px 16px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:8px;font-family:Montserrat,sans-serif;font-weight:800;font-size:20px}
.brand b{color:#1E9E40}
.demo-badge{font:600 11px Inter,sans-serif;background:#EA7A0C;color:#fff;border-radius:6px;padding:2px 6px}
.search{flex:1 1 280px}
.search input{width:100%;height:42px;border-radius:12px;border:1px solid transparent;background:#F1F3F6;padding:0 14px;color:var(--navy)}
.search input:focus{outline:none;border-color:#9FD8B0;background:#fff}
.top-right{display:flex;gap:8px;align-items:center}
.top-right select{height:42px;border-radius:12px;border:0;padding:0 8px;background:#F1F3F6;color:var(--navy)}
.icon-btn{width:44px;height:44px;border-radius:12px;border:0;background:#F1F3F6;color:var(--navy);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.icon-btn.light{background:#fff;color:var(--navy);box-shadow:0 1px 4px rgba(15,30,54,.25)}
.icon-btn.listening{background:var(--alarm);color:#fff}
.alertbar{background:#FEF2F2;border-bottom:1px solid #FCA5A5;color:#991B1B;padding:10px 16px;font-weight:600;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.alertbar button{border:0;background:var(--alarm);color:#fff;border-radius:8px;padding:6px 12px;cursor:pointer}
.layout{display:flex;flex-wrap:wrap;flex:1;min-height:0;position:relative}
.side{flex:1 1 320px;max-width:380px;background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0;max-height:100%}
.side-head{display:flex;justify-content:space-between;align-items:baseline;padding:14px 16px 6px}
.side-head h1{margin:0;font:700 19px Montserrat,sans-serif}
.chips{display:flex;flex-wrap:wrap;gap:6px;padding:6px 16px 10px}
.chip{min-height:34px;border-radius:17px;border:1px solid #CBD3DE;background:#fff;padding:0 11px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:13px}
.chip[aria-pressed=true]{background:var(--navy);border-color:var(--navy);color:#fff}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}
.list{list-style:none;margin:0;padding:0 10px 12px;overflow:auto;flex:1}
.item{display:flex;gap:10px;align-items:center;padding:10px;border-radius:12px;border:1px solid transparent;cursor:pointer}
.item:hover,.item:focus{background:#F6F8FB;outline:none;border-color:var(--line)}
.item.sel{border-color:var(--navy);background:#EEF2F8}
.item .ic{width:42px;height:42px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex:none}
.item .t{font-weight:600;font-size:14px}
.item .s{font-size:12.5px;color:var(--muted)}
.mapwrap{flex:999 1 560px;min-width:0;position:relative;min-height:420px}
#map{position:absolute;inset:0}
.map-style{height:44px;border-radius:10px;border:0;padding:0 10px;background:#fff;box-shadow:0 1px 4px rgba(15,30,54,.25);color:var(--navy);font-weight:600}
.map-tools{position:absolute;right:14px;bottom:22px;z-index:500;display:flex;flex-direction:column;gap:12px;align-items:flex-end}
/* markers */
.car-mk{position:relative}
.car-mk .ring{position:absolute;inset:0;border-radius:50%;border:3px solid;background:#fff;box-shadow:0 2px 6px rgba(15,30,54,.35)}
.car-mk svg{position:absolute;left:50%;top:50%}
.car-mk .lbl{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:3px;white-space:nowrap;background:#fff;border-radius:6px;padding:1px 6px;font:600 11px Inter,sans-serif;box-shadow:0 1px 3px rgba(15,30,54,.25);color:var(--navy)}
.car-mk.alarm .ring{animation:pulse 1.2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(220,38,38,.6)}100%{box-shadow:0 0 0 14px rgba(220,38,38,0)}}
.stack{background:#fff;border-radius:22px;padding:4px 8px 4px 4px;display:flex;align-items:center;gap:2px;box-shadow:0 2px 8px rgba(15,30,54,.35);white-space:nowrap}
.stack .mini{width:30px;height:30px;border-radius:50%;border:2px solid #fff;margin-left:-10px;display:flex;align-items:center;justify-content:center;background:#EEF2F8}
.stack .mini:first-child{margin-left:0}
.stack .n{font:700 13px Montserrat,sans-serif;margin-left:4px}
.stack .dots{display:flex;gap:2px;margin-left:4px}
/* card */
.card{position:absolute;right:12px;top:76px;bottom:12px;width:min(420px,calc(100% - 24px));background:#fff;border-radius:16px;box-shadow:0 8px 30px rgba(15,30,54,.25);z-index:900;overflow:auto;padding:16px}
.card h2{margin:0;font:700 19px Montserrat,sans-serif}
.card .close{position:absolute;right:10px;top:10px;width:40px;height:40px;border:0;background:#F3F5F8;border-radius:10px;cursor:pointer}
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:14px;padding:4px 10px;font-size:12.5px;font-weight:600;color:#fff}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:12px 0}
.kv{background:#F6F8FB;border-radius:10px;padding:8px 10px}
.kv .k{font-size:11.5px;color:var(--muted)}
.kv .v{font-weight:600;font-size:14px;word-break:break-all}
.addr{background:#F6F8FB;border-radius:10px;padding:10px;margin:10px 0}
.btns{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0}
.btn{min-height:42px;border-radius:10px;border:1px solid #CBD3DE;background:#fff;padding:0 12px;cursor:pointer;font-weight:600;font-size:13.5px;text-decoration:none;color:var(--navy);display:inline-flex;align-items:center}
.btn.primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn.green{background:var(--green);border-color:var(--green);color:var(--navy)}
.days{display:flex;gap:6px;overflow-x:auto;padding:4px 0 8px}
.day{flex:none;min-width:72px;border:1px solid #CBD3DE;border-radius:10px;background:#fff;padding:6px 8px;cursor:pointer;text-align:left}
.day .d{font-weight:600;font-size:13px}.day .m{font-size:11.5px;color:var(--muted)}
.day[aria-pressed=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
.day[aria-pressed=true] .m{color:#C9D2E0}
.day.empty{opacity:.55}
.period{display:flex;gap:6px;flex-wrap:wrap;align-items:end;margin:6px 0}
.period label{display:flex;flex-direction:column;font-size:12px;color:var(--muted)}
.period input{height:38px;border:1px solid #CBD3DE;border-radius:8px;padding:0 8px}
.sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:8px 0}
.sum .kv .v{font-size:15px}
.events{list-style:none;margin:6px 0;padding:0;display:flex;flex-direction:column;gap:6px}
.events li{background:#F6F8FB;border-radius:10px;padding:8px 10px;font-size:13px}
.events li.toll{background:#FFF7E6;border:1px solid #F5C26B}
.events li.warn{background:#FEF2F2;border:1px solid #FCA5A5}
h3{font:700 14px Montserrat,sans-serif;margin:16px 0 6px}
.leaflet-container{font-family:Inter,sans-serif}
/* view switch */
.views{display:flex;background:#F1F3F6;border-radius:12px;padding:3px}
.views button{border:0;background:none;color:var(--muted);height:36px;padding:0 14px;border-radius:9px;cursor:pointer;font-weight:600}
.views button[aria-selected=true]{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(15,30,54,.15)}
/* dashboard (light, card-based, inspired by consumer fleet apps) */
.dash{flex:1;min-height:0;width:100%;box-sizing:border-box;overflow:auto;padding:20px;display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));align-content:start;max-width:1280px;margin:0 auto}
.dash .tile{background:#fff;border-radius:20px;padding:18px;border:1px solid #ECEEF2;box-shadow:0 1px 2px rgba(15,30,54,.05)}
.dash .hero{background:linear-gradient(160deg,#E3F6E9 0%,#E4F1FB 70%,#fff 100%)}
.dash .hero{grid-column:1/-1;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.dash h2{font:800 24px Montserrat,sans-serif;margin:0}
.dash h3{margin:0 0 10px;display:flex;justify-content:space-between;align-items:center}
.ringbox{position:relative;width:132px;height:132px;flex:none}
.ringbox .c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ringbox .c b{font:800 28px Montserrat,sans-serif}.ringbox .c span{font-size:12px;color:var(--muted)}
.counts{display:grid;grid-template-columns:repeat(4,minmax(72px,110px));gap:10px}
.count{min-width:96px;border-radius:14px;padding:10px 12px;background:#F6F8FB;cursor:pointer;border:0;text-align:left}
.count b{display:block;font:800 22px Montserrat,sans-serif}.count span{font-size:12.5px;color:var(--muted)}
.rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.rows li{display:flex;gap:10px;align-items:center;padding:10px;border-radius:14px;background:#F6F8FB;cursor:pointer}
.rows li .ic{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:none;font-weight:800}
.rows li .x{flex:1;min-width:0}.rows li .x b{display:block;font-size:14px}.rows li .x span{font-size:12.5px;color:var(--muted)}
.rows li.red{background:#FEF2F2}.rows li.red .ic{background:#DC2626;color:#fff}
.rows li.amber{background:#FFF7E6}.rows li.amber .ic{background:#EA7A0C;color:#fff}
.rows li.ok .ic{background:#E7F6EC;color:#1E7A35}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stats div{background:#F6F8FB;border-radius:14px;padding:12px}.stats b{display:block;font:800 22px Montserrat,sans-serif}.stats span{font-size:12.5px;color:var(--muted)}
.steps{display:grid;gap:8px}.steps div{display:flex;gap:10px;align-items:center}
.steps i{font-style:normal;width:30px;height:30px;border-radius:50%;background:var(--green);color:var(--navy);font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.linkbtn{white-space:nowrap;font-size:13px;border:0;background:none;color:#1E7A35;font-weight:600;cursor:pointer}
/* card tabs */
.ctabs{display:flex;gap:4px;background:#F3F5F8;border-radius:12px;padding:3px;margin:14px 0 6px}
.ctabs button{flex:1;border:0;background:none;height:38px;border-radius:9px;font-weight:600;cursor:pointer;color:var(--muted)}
.ctabs button[aria-selected=true]{background:#fff;color:var(--navy);box-shadow:0 1px 3px rgba(15,30,54,.12)}
.ctabs .badge{background:var(--alarm);color:#fff;border-radius:9px;padding:0 6px;font-size:11px;margin-left:4px}
.hero-car{display:flex;justify-content:center;background:linear-gradient(180deg,#EEF2F8,#fff);border-radius:14px;padding:10px;margin:10px 0}
.bar{height:6px;border-radius:3px;background:#E2E7EE;overflow:hidden;margin-top:6px}.bar i{display:block;height:100%}
/* bottom navigation (phones) */
.bnav{display:none}
@media (max-width:760px){
  .top{gap:8px;padding:8px 10px;position:sticky;top:0;z-index:1000}
  .top{flex-wrap:wrap}
  .brand{font-size:18px;flex:0 0 auto}
  .top-right{margin-left:auto;flex-wrap:nowrap}
  .top-right select{padding:0 4px}
  .views,#label{display:none}
  .search{order:5;flex:1 1 100%}
  .top-right{gap:6px}
  .live-btn{padding:0 10px}
  .dash{padding:12px;grid-template-columns:1fr}
  .dash .hero{gap:14px}
  .ringbox{width:112px;height:112px}
  .counts{grid-template-columns:repeat(4,minmax(0,1fr))}.count{min-width:0;padding:8px}
  .layout{flex-wrap:nowrap}
  .side{max-width:none;max-height:none;flex:1 1 auto;border-right:0}
  body:not(.m-list) .side{display:none}
  body.m-list .mapwrap{display:none}
  .mapwrap{min-height:0}
  .card{left:0;right:0;bottom:0;top:40px;width:auto;height:auto;border-radius:20px 20px 0 0;box-shadow:0 -6px 24px rgba(15,30,54,.25)}
  .alertbar{padding:6px 10px;font-size:13px;flex-wrap:nowrap;overflow-x:auto;white-space:nowrap;flex:none}
  .alertbar button{padding:4px 10px}
  .map-style{width:132px}
  .alertbar .muted{display:none}
  #lang{display:none}
  .bnav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));flex:none;background:#fff;border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom))}
  .bnav button{border:0;background:none;color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11.5px;min-height:48px;justify-content:center;cursor:pointer}
  .bnav button[aria-selected=true]{color:var(--navy);font-weight:700}
  .bnav button[aria-selected=true] svg{stroke:#1E9E40}
}

/* live mode */
.live-btn{height:42px;border-radius:12px;border:1px solid #CBD3DE;background:#fff;color:var(--navy);padding:0 12px;display:inline-flex;align-items:center;gap:8px;font-weight:600;cursor:pointer}
.live-btn .live-dot{width:9px;height:9px;border-radius:50%;background:#9AA3AE}
.live-btn[aria-pressed=true]{border-color:#2BB24C;background:#E7F6EC}
.live-btn[aria-pressed=true] .live-dot{background:#2BB24C;box-shadow:0 0 0 4px rgba(43,178,76,.2)}
.demo-badge.live{background:#1E9E40}
.live-dlg{border:0;border-radius:20px;padding:22px;width:min(420px,92vw);box-shadow:0 20px 60px rgba(15,30,54,.25);color:var(--navy)}
.live-dlg::backdrop{background:rgba(15,30,54,.35)}
.live-dlg h2{margin:0 0 6px;font:800 20px Montserrat,sans-serif}
.live-dlg label{display:block;font-weight:600;margin:14px 0 6px}
.live-dlg input{width:100%;height:46px;border-radius:12px;border:1px solid #CBD3DE;padding:0 12px}
.live-msg{min-height:20px;color:#B91C1C;font-size:14px;margin:8px 0}
.live-actions{display:flex;justify-content:flex-end;gap:8px}
.empty-note{background:#F6F8FB;border-radius:14px;padding:12px;margin:0;line-height:1.4}
.me-btn[aria-pressed=true]{color:#2563EB}

.bwrap{position:relative;display:inline-flex}
.bbadge{position:absolute;top:-4px;right:-10px;background:var(--alarm);color:#fff;border-radius:9px;font-size:10.5px;font-weight:700;padding:0 5px;min-width:16px;text-align:center}
.set-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.set-row:first-of-type{border-top:0}
.set-row select{height:42px;border-radius:12px;border:1px solid #CBD3DE;background:#fff;padding:0 8px;min-width:150px}
.soon{margin:0;padding-left:18px;color:var(--muted);line-height:1.9}

.pw-wrap{position:relative}
.pw-wrap input{padding-right:52px!important;font-size:16px;letter-spacing:.02em}
.pw-eye{position:absolute;right:4px;top:3px;width:44px;height:40px;border:0;background:none;color:var(--muted);cursor:pointer;border-radius:10px}
.pw-eye[aria-pressed=false]{color:#B91C1C}

/* SafeTag-style map controls: round buttons bottom-right, refresh countdown bottom-left */
.fab{width:56px;height:56px;border-radius:50%;border:0;background:#fff;color:var(--navy);box-shadow:0 3px 10px rgba(15,30,54,.25);display:flex;align-items:center;justify-content:center;cursor:pointer}
.fab.me-btn[aria-pressed=true]{color:#2563EB}
.layers-pop{background:#fff;border-radius:16px;box-shadow:0 6px 24px rgba(15,30,54,.25);padding:10px;width:200px}
.layers-pop label{display:block;font-weight:700;font-size:13px;margin:0 0 6px 4px}
.layers-pop select{width:100%;border:0;font-size:15px;box-shadow:none;height:auto;padding:0}
.layers-pop option{padding:8px 6px;border-radius:8px}
.refresh-pill{position:absolute;left:14px;bottom:22px;z-index:500;display:flex;align-items:center;gap:8px;height:44px;padding:0 16px;border:0;border-radius:22px;background:rgba(255,255,255,.95);box-shadow:0 3px 10px rgba(15,30,54,.2);font:600 15px Inter,sans-serif;color:var(--navy);cursor:pointer}
.car-mk .cone{position:absolute;left:calc(50% - 30px);top:calc(50% - 86px);width:60px;height:86px;transform-origin:50% 100%;background:linear-gradient(to top,rgba(37,99,235,.45),rgba(37,99,235,0));clip-path:polygon(50% 100%,0 0,100% 0);pointer-events:none}
.leaflet-control-attribution{font-size:9px!important}
@media (max-width:760px){
  body.v-map .top, body.v-map .alertbar{display:none}
  body.v-map .leaflet-control-zoom{display:none}
  .card{z-index:950}
}

/* compact car markers (no white discs): car picture with shadow + small status dot */
.car-mk .st-dot{position:absolute;right:-2px;bottom:-2px;width:11px;height:11px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 2px rgba(15,30,54,.4)}
.car-mk.alarm .st-dot{animation:pulse 1.2s infinite}
.car-mk .lbl{margin-top:1px}

/* map options sheet (SafeTag-like) */
.msheet{position:fixed;left:8px;right:8px;bottom:8px;z-index:1200;background:#fff;border-radius:24px;box-shadow:0 -6px 30px rgba(15,30,54,.25);padding:10px 18px 18px;max-height:80vh;overflow:auto;max-width:560px;margin:0 auto}
.msheet-grab{width:48px;height:5px;border-radius:3px;background:#CBD3DE;margin:0 auto 8px}
.msheet-head{display:flex;justify-content:space-between;align-items:center}
.msheet-head h2{margin:0;font:800 20px Montserrat,sans-serif}
.msheet-x{width:44px;height:44px;border:0;background:none;color:var(--navy);cursor:pointer}
.ms-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:12px 0 14px;border-bottom:1px solid var(--line)}
.ms-mode{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:8px;font:600 13.5px Inter,sans-serif;color:var(--navy);cursor:pointer;min-height:44px}
.ms-mode .ms-ic{width:58px;height:58px;border-radius:50%;background:#F1F3F6;display:flex;align-items:center;justify-content:center;color:#5A6578}
.ms-mode[aria-pressed=true]{color:#1E7A35}
.ms-mode[aria-pressed=true] .ms-ic{background:#E7F6EC;color:#1E7A35}
.ms-sub{display:block;margin:14px 0 10px;font:800 17px Montserrat,sans-serif;color:var(--navy)}
.ms-feats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ms-feat{border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:4px;font:600 12.5px Inter,sans-serif;color:var(--navy);cursor:pointer}
.ms-feat .ms-thumb{width:100%;aspect-ratio:1;border-radius:14px;border:2px solid #E2E7EE;background:#F3F6F2;display:flex;align-items:center;justify-content:center;color:#5A6578}
.ms-feat .ms-thumb.sat{background:linear-gradient(135deg,#3E5F3A,#7A8F5A 40%,#5C6B4E 60%,#9AA58A)}
.ms-feat[aria-pressed=true] .ms-thumb{border-color:#2BB24C;box-shadow:0 0 0 2px #E7F6EC}
.ms-feat[aria-pressed=true]{color:#1E7A35}
.ms-feat small{font-size:11px;color:var(--muted);font-weight:500}
.ms-feat:disabled{opacity:.55;cursor:default}
.msheet select{width:100%;height:46px;border-radius:12px;border:1px solid #CBD3DE;padding:0 10px;font-size:15px;background:#fff;color:var(--navy)}
.follow-dlg{border:0;border-radius:22px;padding:14px;width:min(560px,96vw);background:#fff;box-shadow:0 20px 60px rgba(15,30,54,.35)}
.follow-dlg::backdrop{background:rgba(15,30,54,.4)}
.follow-dlg input{width:100%;height:50px;border-radius:12px;border:1px solid #CBD3DE;background:#F6F8FB;padding:0 14px;font-size:16px}
.follow-list{list-style:none;margin:12px 0 0;padding:0;max-height:68vh;overflow:auto;display:flex;flex-direction:column;gap:8px}
.follow-list button{width:100%;min-height:64px;border:1px solid #E3E8EF;border-radius:14px;background:#fff;display:flex;align-items:center;gap:12px;font:700 18px Inter,sans-serif;color:var(--navy);cursor:pointer;padding:8px 16px;text-align:left}
.follow-foot{margin:12px 0 0;text-align:center;color:#fff;font-weight:700}
.fab.mode-on{color:#1E7A35;box-shadow:0 0 0 3px #2BB24C,0 3px 10px rgba(15,30,54,.25)}

/* car marker: picture centered exactly on the GPS point; status dot inside the label */
.car-mk .car-body{position:absolute;left:50%;top:50%;line-height:0;filter:drop-shadow(0 1px 2px rgba(15,30,54,.55))}
.car-mk .car-body svg{display:block}
.car-mk .lbl{display:flex;align-items:center;gap:5px}
.car-mk .lbl .st-dot{position:static;width:9px;height:9px;border:0;box-shadow:none;flex:none}

/* map options sheet: larger, SafeTag-like sizing */
.msheet{left:6px;right:6px;bottom:6px;padding:12px 22px 24px;border-radius:28px;max-height:88vh}
.msheet-head h2{font-size:26px}
.msheet-x svg{width:32px;height:32px}
.ms-modes{gap:8px;padding:18px 0 20px}
.ms-mode{gap:12px;font-size:16px}
.ms-mode .ms-ic{width:72px;height:72px}
.ms-mode .ms-ic svg{width:34px;height:34px}
.ms-sub{margin:20px 0 14px;font-size:22px}
.ms-feats{gap:14px}
.ms-feat{gap:6px;font-size:15px}
.ms-feat .ms-thumb{border-radius:16px;border-width:3px}
.ms-feat .ms-thumb svg{width:40px;height:40px}
.ms-feat small{font-size:12.5px}
.msheet select{height:54px;font-size:17px;border-radius:14px}
@media (max-width:380px){.ms-feats{grid-template-columns:repeat(3,minmax(0,1fr))}.ms-mode{font-size:14.5px}}
.ms-feat{width:100%;min-width:0}
.ms-feat .ms-thumb{width:100%;max-width:96px}
.msheet{padding-left:14px;padding-right:14px}
.msheet-head,.ms-sub{padding-left:8px}
.ms-feats{gap:10px}

/* vehicle editor: VIN, plate, photo */
.hero-car{position:relative}
.hero-photo{width:100%;aspect-ratio:16/9;max-height:220px;object-fit:cover;border-radius:12px;display:block;background:#E5E9EF}
.hero-add{position:absolute;right:10px;bottom:10px;border:0;border-radius:999px;background:rgba(255,255,255,.95);box-shadow:0 2px 8px rgba(15,30,54,.2);padding:10px 16px;font:700 15px Inter,sans-serif;color:var(--navy);cursor:pointer;min-height:44px}
.kv-add{border:2px dashed #9FD8B0;background:#F2FBF5;text-align:left;cursor:pointer;font:inherit;color:inherit}
.kv-add .v{color:#1E7A35}
.veh-dlg{max-height:92vh;overflow:auto}
.veh-dlg input,.veh-dlg select{font-size:17px}
.ve-photo{display:flex;justify-content:center;align-items:center;min-height:120px;background:#F3F6FA;border-radius:14px;margin:12px 0 10px;overflow:hidden}
.ve-photo img{width:100%;max-height:220px;object-fit:cover}
.ve-row{display:flex;gap:10px;flex-wrap:wrap}
.ve-file{cursor:pointer;min-height:48px;display:inline-flex;align-items:center}
.ve-hint{margin:6px 0 0;font-size:14px;color:var(--muted)}
.ve-hint.ok{color:#1E7A35}.ve-hint.warn{color:#B45309}.ve-hint.bad{color:#B91C1C}
.ve-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.ve-grid label{font-size:14px}
.ve-odo{display:flex;gap:6px}.ve-odo select{width:72px;height:46px;border-radius:12px;border:1px solid #CBD3DE}
#veVin{letter-spacing:1px;font-family:ui-monospace,Menlo,monospace;text-transform:uppercase}
.live-dlg label.ve-file{display:inline-flex;margin:0;align-items:center;padding:0 18px;font-size:16px}
.ve-row .btn{min-height:48px;font-size:16px}
#vePlate{text-transform:uppercase}
.ve-odo input{flex:1;min-width:0}

.me-dist{margin-top:8px;display:flex;align-items:center;gap:8px;font:700 16px Inter,sans-serif;color:#1D4ED8}
.me-dist .muted{font-weight:500;font-size:13px}
.me-dist button{border:1px solid #BFD3F6;background:#EFF5FF;color:#1D4ED8;border-radius:999px;min-height:44px;padding:0 16px;font:700 15px Inter,sans-serif;cursor:pointer}
.ve-wide{grid-column:1 / -1}
.ve-chips{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}
.ve-chip{width:36px;height:36px;border-radius:50%;border:2px solid #CBD3DE;cursor:pointer}
.ve-chip[aria-pressed=true]{outline:3px solid #2BB24C;outline-offset:2px}

.ve-crm{margin:8px 0 0;padding:8px 12px;border-radius:10px;background:#EFF5FF;color:#1D4ED8;font-size:14px}
.veh-dlg input.crm-lock{background:#F3F5F8;color:#475569}

/* red alert bar with siren */
.siren-bar{position:fixed;left:8px;right:8px;top:calc(env(safe-area-inset-top,0px) + 8px);z-index:1300;display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:#DC2626;color:#fff;box-shadow:0 8px 24px rgba(185,28,28,.45);animation:sbPulse 1.2s ease-in-out infinite;max-width:640px;margin:0 auto}
.siren-bar .sb-ic{font-size:28px;line-height:1}
.siren-bar .sb-x{flex:1;min-width:0;display:flex;flex-direction:column;font-size:15px}
.siren-bar .sb-x span{font-size:13px;opacity:.92}
.siren-bar .btn{min-height:44px;flex:none}
.siren-bar .btn:not(.green){background:#fff;color:#B91C1C;border-color:#fff}
@keyframes sbPulse{50%{background:#B91C1C}}
@media (prefers-reduced-motion:reduce){.siren-bar{animation:none}}

/* problem cars blink red on the map */
.car-mk .alarm-halo{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;background:radial-gradient(circle,rgba(220,38,38,.55) 0,rgba(220,38,38,.35) 45%,rgba(220,38,38,0) 70%);border:3px solid #DC2626;animation:alBlink 1s ease-in-out infinite;pointer-events:none}
.car-mk.blink .lbl{background:#DC2626;color:#fff;animation:alLbl 1s ease-in-out infinite}
.stack.alarm{border:3px solid #DC2626;animation:alStack 1s ease-in-out infinite}
.stack .al-n{background:#DC2626;color:#fff;border-radius:999px;padding:3px 8px;margin-right:4px;font:800 13px Inter,sans-serif}
@keyframes alBlink{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.25;transform:scale(.8)}}
@keyframes alLbl{50%{background:#7F1D1D}}
@keyframes alStack{50%{background:#FEE2E2;box-shadow:0 0 0 6px rgba(220,38,38,.35)}}

/* zoom +/- (one control on phone and computer) */
.leaflet-control-zoom{display:none!important}
.zoom-pill{display:flex;flex-direction:column;width:56px;border-radius:28px;background:#fff;box-shadow:0 3px 10px rgba(15,30,54,.25);overflow:hidden}
.zoom-pill button{width:56px;height:56px;border:0;background:#fff;color:var(--navy);display:flex;align-items:center;justify-content:center;cursor:pointer}
.zoom-pill button + button{border-top:1px solid #E2E7EE}
.zoom-pill button:active{background:#EEF2F6}

.ve-chips{gap:10px}
.ve-chip{width:40px;height:40px}
.ve-gen{background:#EEF2FF;border-color:#C7D2FE;color:#3730A3;font-weight:700}

.ver-line{font-size:15px;margin:4px 0 8px}
.ver-notes{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}
.ver-badge{font-size:11px;font-weight:600;color:#64748B;margin-left:4px}

/* trip history: every trip in its own color, numbered */
.trip-no{display:inline-flex;align-items:center;justify-content:center;min-width:22px;height:22px;border-radius:50%;color:#fff;font:800 12px Inter,sans-serif;border:2px solid #fff;box-shadow:0 1px 4px rgba(15,30,54,.35);box-sizing:border-box;flex:none}
#histOut .trip-li{display:flex;align-items:center;gap:10px;cursor:pointer}
#histOut .trip-li.on{outline:2px solid #2563EB}
.hist-bar{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 10px}
.hist-bar .btn{min-height:44px}
@media (max-width:760px){
  /* history on a phone: map on the top half with the routes, details below; one tap = big map */
  body.hist-on .card{top:46%}
  body.hist-on.hist-full .card{top:auto;height:150px}
  body.hist-on .map-tools{bottom:auto;top:12px}
  body.hist-on .map-tools .fab:not(#fit){display:none}
}

/* one-line period picker */
.range-field{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;margin:8px 0 4px;padding:0 14px;border:1px solid #CBD3DE;border-radius:12px;background:#fff;font:600 16px/1 inherit;color:#0F1E36;text-align:left;cursor:pointer}
.range-field span{flex:1}.range-field b{color:var(--muted);font-weight:400}
.rcal{border:1px solid #E2E8F0;border-radius:14px;padding:10px;margin:4px 0 8px;background:#fff;box-shadow:0 6px 20px rgba(15,30,54,.08)}
.rc-presets{display:flex;gap:6px;overflow-x:auto;padding-bottom:8px}
.rc-p{flex:none;min-height:36px;padding:0 12px;border-radius:18px;border:1px solid #CBD3DE;background:#F8FAFC;font:500 14px inherit;color:#0F1E36}
.rc-head{display:flex;align-items:center;justify-content:space-between;margin:2px 0 6px}
.rc-head b{font-size:17px;text-transform:capitalize}
.rc-nav{width:44px;height:44px;border:0;border-radius:22px;background:#EEF2F7;font-size:24px;color:#1D4ED8}
.rc-nav:disabled{opacity:.35}
.rc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.rc-wk span{text-align:center;font-size:12px;color:var(--muted);padding:2px 0}
.rc-d{position:relative;height:46px;border:0;border-radius:10px;background:transparent;font:400 16px inherit;color:#B4BCC8;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.1}
.rc-d small{font-size:10px;font-weight:500;opacity:.85}
.rc-d:disabled{color:#E1E5EB}
.rc-d.drove{color:#0B1220;font-weight:800}
.rc-d.today span{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:15px;background:#EF4444;color:#fff}
.rc-d.sel{background:#E3F4E8;color:#14532D}
.rc-d.sel.drove{color:#0B1220}
.rc-d.edge{background:#1E8A3A;color:#fff}
.rc-d.edge.drove{background:#1E8A3A;color:#fff}
.rc-d.edge.today span{background:transparent}
.rc-foot{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin:8px 2px}
.rc-leg b{color:#0B1220;font-weight:800}.rc-leg em{color:#B4BCC8;font-style:normal}
.rc-hint{color:#1D4ED8;font-weight:600}
.rc-btns{display:flex;gap:8px;justify-content:flex-end}.rc-btns .btn{min-height:44px;min-width:110px}

.gp-toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:3000;max-width:88vw;padding:12px 18px;border-radius:24px;background:#0F1E36;color:#fff;font-weight:600;font-size:15px;box-shadow:0 8px 24px rgba(0,0,0,.25);text-align:center}
.follow-list button small{display:block;font-weight:500;font-size:15px;color:#475569;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.car-mk .lbl.two{padding:2px 7px 3px;border-radius:8px}
.car-mk .lbl-t{display:flex;flex-direction:column;line-height:1.15}
.car-mk .lbl-t b{font-size:12px}.car-mk .lbl-t small{font:500 10.5px Inter,sans-serif;color:#475569}
.car-mk.blink .lbl-t small{color:#fff}

.range-field{gap:10px}
.range-field .rf-part{display:flex;flex-direction:column;align-items:flex-start;flex:1;line-height:1.2}
.range-field .rf-part small{font:500 12px Inter,sans-serif;color:var(--muted)}
.range-field .rf-part b{font:700 16px Inter,sans-serif;color:#0F1E36}
.range-field .rf-arrow{color:var(--muted);font-weight:400}
.range-field[aria-expanded=true]{border-color:#2BB24C;box-shadow:0 0 0 3px #E7F6EC}
.range-field .rf-arrow,.range-field .rf-ic{flex:none}

/* Size of buttons and menus (More -> Button size). Large is the default. */
@media (max-width: 900px) {
  .bnav button{font-size:13px;min-height:58px;gap:4px}
  .bnav button svg{width:26px;height:26px}
  body.ui-l .bnav,body.ui-l .map-tools,body.ui-l .msheet{zoom:1.12}
  body.ui-xl .bnav,body.ui-xl .map-tools,body.ui-xl .msheet{zoom:1.28}
}
body.ui-xl .map-tools{zoom:1.2}
.seg{display:inline-flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.seg .btn{min-height:44px;min-width:56px}

.rc-btns .rc-go{background:#1E8A3A;border-color:#1E8A3A;color:#fff;flex:1;font-weight:700}
.rc-btns .rc-go:disabled{background:#A7D7B5;border-color:#A7D7B5}
.rc-hint{color:#1E8A3A}
.range-field[aria-expanded=true]{border-color:#2BB24C}
/* map pin with the car's own photo (falls back to the top-view drawing) */
.car-photo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;border:3px solid #64748B;background:#E5E9EF;overflow:hidden;box-shadow:0 2px 6px rgba(15,30,54,.35)}
.car-photo img{width:100%;height:100%;object-fit:cover;display:block}
.car-mk.blink .car-photo{border-color:#DC2626}
.hero-car svg{max-width:100%;height:auto}

/* the page itself never zooms or rubber-bands; only the map pinch-zooms, panels just scroll */
html,body{touch-action:pan-x pan-y;overscroll-behavior:none}
.card,.msheet,#moreView,.rcal{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

.pill.crm-st{background:#EEF2F7;color:#334155;margin-left:6px}
.offline-note{background:#FFF7ED;border:1px solid #FED7AA;border-radius:10px;padding:8px 10px;color:#9A3412}

/* fleet list: car photo (or gray silhouette) + plate + name */
.item .lthumb{flex:none;width:76px;height:52px;border-radius:10px;border:2px solid #64748B;background:#F2F4F7;overflow:hidden;display:flex;align-items:center;justify-content:center}
.item .lthumb img{width:100%;height:100%;object-fit:cover;display:block}
.item .lthumb svg{width:66px;height:auto}
.item .n{display:block;font-size:13px;color:#475569;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item .t{display:block}

.ve-imgsrc{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 10px}
.ve-imgsrc .btn{min-height:40px}
.ve-imgsrc .btn:disabled{opacity:.4}

/* desktop: bigger vehicle card; ⤢ makes it about half the screen (remembered) */
@media (min-width:761px){
  .card{top:12px;width:clamp(460px,38vw,620px);padding:20px}
  body.card-xl .card{width:min(980px,58vw)}
  body.card-xl .card .hero-photo{max-height:380px}
  .card .card-wide{position:absolute;top:12px;right:60px;width:40px;height:40px;border-radius:20px;border:0;background:#EEF2F7;color:#0F1E36;font-size:20px;cursor:pointer;z-index:2}
  .card .card-wide[aria-pressed=true]{background:#1E8A3A;color:#fff}
}
@media (max-width:760px){.card .card-wide{display:none}}

/* adjustable text size (More -> Text size): scales the contents of cards, lists and pages, not the map */
:root{--tz:1}
.card > *,#list > li,.side-head,.follow-list,.msheet > *,.veh-dlg > *,.dash{zoom:var(--tz)}
.txt-ctl{display:flex;align-items:center;gap:8px}
.txt-ctl input{width:140px}
.txt-ctl .btn{min-width:48px;min-height:44px;font-weight:700}
.txt-sample{margin:4px 0 12px;padding:10px 12px;background:#F4F6F9;border-radius:10px}
.dash > *{min-width:0}
@media (max-width:760px){.dash{grid-template-columns:minmax(0,1fr)}.set-row > :first-child{min-width:0;flex:1}.set-row select{max-width:55%}.txt-ctl input{width:100px}}
.txt-row{flex-wrap:wrap}.txt-row > label{flex:1 1 160px}

.rc-p.on{background:#1E8A3A;border-color:#1E8A3A;color:#fff}
.toll-days .toll-day{display:flex;justify-content:space-between;gap:10px;cursor:pointer;background:#FFF7E6;border:1px solid #FCD9A0}
.ctabs button{font-size:14px;padding:0 4px;white-space:nowrap}
.ctabs{overflow-x:auto;scrollbar-width:none}.ctabs::-webkit-scrollbar{display:none}.ctabs button{flex:1 0 auto;min-width:0}

/* map view tiles in the map sheet */
.ms-styles{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 8px;scrollbar-width:thin}
.ms-style{flex:none;width:92px;border:0;background:none;padding:0;display:flex;flex-direction:column;align-items:center;gap:6px;font:600 13px Inter,sans-serif;color:var(--navy);cursor:pointer;text-align:center}
.ms-sw{position:relative;display:block;width:88px;height:64px;border-radius:12px;overflow:hidden;border:2px solid #E2E7EE}
.ms-sw i{position:absolute;left:-10px;right:-10px;top:26px;height:7px;background:var(--r1);transform:rotate(-12deg)}
.ms-sw b{position:absolute;left:40px;top:-10px;bottom:-10px;width:6px;background:var(--r2)}
.ms-style[aria-checked=true]{color:#1E7A35}
.ms-style[aria-checked=true] .ms-sw{border-color:#2BB24C;box-shadow:0 0 0 2px #E7F6EC}
.ms-sub-small{font-size:13px;color:var(--muted);margin-top:6px}

/* Opening screen (0.30.0): logo while data loads, then fades out and the map flies to the fleet */
#splash { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; background: radial-gradient(circle at 50% 42%, #ffffff 0%, #eef4f1 70%); transition: opacity .5s ease, visibility .5s; }
#splash.gone { opacity: 0; visibility: hidden; pointer-events: none; }
#splash .sp-in { display: grid; justify-items: center; gap: 14px; animation: spIn .6s ease-out both; }
#splash img { width: 96px; height: 96px; border-radius: 24px; box-shadow: 0 10px 30px rgba(15,30,54,.18); }
#splash .sp-name { font: 800 30px/1 Montserrat, Inter, system-ui, sans-serif; color: #0F1E36; letter-spacing: -.01em; }
#splash .sp-name b { color: #2BB24C; font-weight: 800; }
#splash .sp-bar { width: 120px; height: 4px; border-radius: 4px; background: #dfe8e3; overflow: hidden; }
#splash .sp-bar i { display: block; width: 40%; height: 100%; border-radius: 4px; background: #2BB24C; animation: spBar 1.1s ease-in-out infinite; }
@keyframes spIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@keyframes spBar { 0% { transform: translateX(-110%); } 100% { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) { #splash .sp-in, #splash .sp-bar i { animation: none; } }

/* Parachute landing: cars and labels fade in after touchdown */
#map .leaflet-marker-pane, #map .leaflet-tooltip-pane, #map .leaflet-shadow-pane { transition: opacity .7s ease; }
#map.landing .leaflet-marker-pane, #map.landing .leaflet-tooltip-pane, #map.landing .leaflet-shadow-pane { opacity: 0; }

/* Phone: card folded to a bar after a tap on the map (0.33.0) */
@media (max-width:760px){
  .card{transition:top .25s ease,height .25s ease}
  .card::before{content:"";display:block;width:44px;height:5px;border-radius:3px;background:#CBD3DE;margin:-6px auto 8px}
  body.card-min .card, body.card-min.hist-on .card{top:auto;height:118px;overflow:hidden;cursor:pointer}
  body.card-min .map-tools{bottom:130px}
}

/* data source health banner (0.34.0) */
.health{position:absolute;z-index:900;left:50%;transform:translateX(-50%);top:calc(env(safe-area-inset-top,0px) + 10px);max-width:min(560px,calc(100% - 24px));background:#FFF4E5;color:#7A3E00;border:1px solid #F5B66B;border-radius:14px;padding:10px 14px;font:600 14px/1.35 Inter,system-ui,sans-serif;box-shadow:0 8px 24px rgba(0,0,0,.15)}
.health div+div{margin-top:4px}
.ft-bar{height:8px;border-radius:6px;background:#E3E8EF;overflow:hidden;margin:6px 0}
.ft-bar i{display:block;height:100%;background:#2BB24C;transition:width .3s}
.tile.ft .rows li{cursor:pointer}
.ve-odo input{font-size:18px;letter-spacing:.02em}
@media (max-width:760px){.card::before{width:56px;height:6px;margin:-4px auto 10px}}
.fd-head{display:flex;align-items:center;justify-content:space-between;margin:2px 2px 10px}
.fd-head h2{margin:0;font:800 22px Montserrat,Inter,sans-serif;color:var(--navy)}
.fd-x{width:44px;height:44px;border-radius:12px;border:0;background:#F2F4F7;font-size:18px;cursor:pointer}
.fd-sort{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.fd-sort button{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid #CBD3DE;background:#fff;font:600 15px Inter,sans-serif;color:var(--navy);cursor:pointer}
.fd-sort button[aria-pressed=true]{background:var(--navy);color:#fff;border-color:var(--navy)}
.fd-sort button:disabled{opacity:.4}
.follow-list .lthumb{flex:none;width:72px;height:50px;border-radius:10px;border:2px solid #64748B;background:#F2F4F7;overflow:hidden;display:flex;align-items:center;justify-content:center}
.follow-list .lthumb img{width:100%;height:100%;object-fit:cover}
.follow-list .lthumb svg{width:60px;height:auto}
.fl-x{flex:1;min-width:0}
.fl-st{display:flex;align-items:center;gap:6px}
.fl-st .dot{width:8px;height:8px;border-radius:50%;flex:none}
.fl-d{flex:none;font:700 15px Inter,sans-serif;color:#2563EB}

/* Map & layers — GigPoint design (mockup 2, 0.38.0): camera segments, switches with a line of explanation */
.msheet .ms-cap{margin:16px 2px 8px;font:700 12px Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.msheet .ms-modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:4px;border:0;border-radius:16px;background:#EEF2F6}
.msheet .ms-mode{flex-direction:column;justify-content:center;gap:4px;min-height:64px;border-radius:12px;background:transparent;color:var(--muted);font:500 14px Inter,sans-serif}
.msheet .ms-mode svg{width:22px;height:22px}
.msheet .ms-mode[aria-pressed=true]{background:#fff;color:var(--navy);font-weight:700;box-shadow:0 1px 4px rgba(15,30,54,.15)}
.msheet .ms-mode[aria-pressed=true] svg{color:#1E8A3A}
.msheet .ms-feats{display:flex;flex-direction:column;gap:0;grid-template-columns:none}
.msheet .ms-feat{flex-direction:row;align-items:center;gap:12px;min-height:60px;padding:8px 2px;border-bottom:1px solid var(--line);text-align:left;font:inherit;color:var(--navy);width:100%}
.msheet .ms-feat:last-child{border-bottom:0}
.msheet .ms-ico{flex:none;width:40px;height:40px;border-radius:12px;background:#EEF2F6;display:flex;align-items:center;justify-content:center;color:var(--navy)}
.msheet .ms-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.msheet .ms-txt b{font:700 16px Inter,sans-serif}
.msheet .ms-txt small{font-size:13px;color:var(--muted);font-weight:500}
.msheet .ms-sw{flex:none;width:50px;height:30px;border-radius:15px;background:#CBD3DE;position:relative;transition:background .2s}
.msheet .ms-sw i{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:left .2s}
.msheet .ms-feat[aria-pressed=true] .ms-sw{background:#2BB24C}
.msheet .ms-feat[aria-pressed=true] .ms-sw i{left:23px}
.msheet .ms-feat[aria-pressed=true] .ms-ico{background:#E7F6EC;color:#1E8A3A}
.msheet .ms-soon{opacity:.5;cursor:default}
body.ui-l .msheet .ms-mode,body.ui-xl .msheet .ms-mode{min-height:76px;font-size:16px}
body.ui-l .msheet .ms-feat,body.ui-xl .msheet .ms-feat{min-height:68px}