:root{--blue:#1479f3;--blue-dark:#0862ca;--green:#159a68;--red:#e5484d;--ink:#172033;--muted:#667085;--line:#e4e9f0;--soft:#f5f7fa;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--ink)}*{box-sizing:border-box}html,body{height:100%;margin:0;overflow:hidden}button,input{font:inherit}.customer-app{height:100%;display:grid;grid-template-columns:310px minmax(0,1fr);grid-template-rows:minmax(0,1fr);background:#e5ecef}.vehicles-panel{height:100%;min-height:0;display:flex;flex-direction:column;background:#fff;border-right:1px solid var(--line);z-index:800}.brand-row{height:72px;display:flex;align-items:center;gap:10px;padding:0 18px;border-bottom:1px solid var(--line)}.brand-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(145deg,#2c91fa,#0c67d4);box-shadow:0 7px 18px rgba(20,121,243,.24)}.brand-icon svg{width:23px;fill:#fff}.brand-copy strong,.brand-copy small{display:block}.brand-copy strong{font-size:14px;letter-spacing:.1em}.brand-copy small{margin-top:3px;font-size:9px;letter-spacing:.15em;color:var(--muted)}.panel-title{display:flex;align-items:center;justify-content:space-between;padding:20px 18px 12px}.panel-title span{font-size:9px;color:var(--blue);font-weight:800;letter-spacing:.14em}.panel-title h1{margin:4px 0 0;font-size:20px}.panel-title b{display:grid;place-items:center;min-width:30px;height:30px;padding:0 8px;border-radius:999px;background:#eaf3ff;color:var(--blue);font-size:12px}.search{height:44px;margin:0 14px 12px;display:flex;align-items:center;gap:8px;padding:0 12px;border:1px solid var(--line);border-radius:11px;color:#8a94a4}.search:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(20,121,243,.12)}.search svg,.map-actions svg{width:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.search input{width:100%;border:0;outline:0;color:var(--ink)}.vehicle-list{flex:1;min-height:0;overflow:auto;padding:0 8px 12px}.vehicle{width:100%;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:12px 10px;border:0;border-radius:12px;background:transparent;text-align:left;cursor:pointer;transition:background .2s}.vehicle:hover{background:var(--soft)}.vehicle.active{background:#eaf3ff}.vehicle-pin{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#edf1f6;color:#526273}.vehicle.active .vehicle-pin{background:var(--blue);color:#fff}.vehicle-pin svg{width:20px;fill:currentColor}.vehicle strong,.vehicle small{display:block}.vehicle strong{font-size:13px}.vehicle small{margin-top:4px;font-size:11px;color:var(--muted)}.vehicle-state{text-align:right}.vehicle-state b{font-size:12px}.vehicle-state i,.panel-footer i,.live-pill i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--red)}.vehicle-state i.moving,.panel-footer i.connected,.live-pill i{background:var(--green)}.panel-footer{height:52px;display:flex;align-items:center;gap:7px;padding:0 18px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.panel-footer button{margin-left:auto;border:0;background:transparent;color:var(--muted);cursor:pointer}.map-area{position:relative;height:100%;min-height:0;overflow:hidden}#customerMap{position:absolute;inset:0}.live-pill{position:absolute;z-index:600;top:16px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:7px;padding:9px 13px;border-radius:999px;background:rgba(255,255,255,.94);box-shadow:0 8px 25px rgba(18,33,52,.15);font-size:11px}.live-pill i{box-shadow:0 0 0 4px rgba(21,154,104,.14)}.live-pill time{color:var(--muted)}.map-actions{position:absolute;z-index:600;right:16px;top:16px;display:flex;gap:8px}.map-actions button{height:44px;border:0;border-radius:11px;background:#fff;box-shadow:0 8px 25px rgba(18,33,52,.14);cursor:pointer}.map-actions button:first-child{width:44px;display:grid;place-items:center}.map-actions #stopFollowButton{padding:0 14px;color:var(--blue);font-size:12px;font-weight:700}.map-actions .hidden{display:none!important}.live-marker{position:relative;width:42px;height:42px;border-radius:15px 15px 15px 4px;transform:rotate(-45deg);background:var(--marker);border:3px solid #fff;box-shadow:0 6px 18px rgba(11,28,48,.3)}.live-marker span{position:absolute;inset:0;display:grid;place-items:center;transform:rotate(45deg);color:#fff;font-size:11px;font-weight:800}.live-marker.followed{box-shadow:0 0 0 7px rgba(20,121,243,.19),0 6px 18px rgba(11,28,48,.35)}.empty{padding:28px 14px;text-align:center;color:var(--muted);font-size:12px}.mobile-vehicles{display:none}.access-overlay{position:fixed;z-index:2000;inset:0;display:grid;place-items:center;padding:20px;background:rgba(10,23,39,.64);backdrop-filter:blur(8px);transition:opacity .2s}.access-overlay.hidden{opacity:0;pointer-events:none}.access-card{width:min(100%,390px);padding:30px;border-radius:18px;background:#fff;box-shadow:0 28px 80px rgba(4,15,30,.3)}.access-card>p{margin:20px 0 5px;color:var(--blue);font-size:9px;font-weight:800;letter-spacing:.14em}.access-card h2{margin:0 0 22px;font-size:24px}.access-card label span{display:block;margin-bottom:7px;font-size:12px;font-weight:700}.access-card input{width:100%;height:47px;padding:0 13px;border:1px solid var(--line);border-radius:10px;font-size:16px;outline:none}.access-card input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(20,121,243,.12)}.access-error{min-height:30px;padding-top:8px;color:var(--red);font-size:12px}.access-card button{width:100%;height:47px;border:0;border-radius:10px;background:var(--blue);color:#fff;font-weight:750;cursor:pointer}.access-card button:hover{background:var(--blue-dark)}.access-card button:disabled{opacity:.6;cursor:wait}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}:focus-visible{outline:3px solid rgba(20,121,243,.42);outline-offset:2px}@media(max-width:700px){.customer-app{display:block}.vehicles-panel{position:absolute;left:0;top:0;bottom:0;width:min(86vw,310px);transform:translateX(-102%);transition:transform .22s;box-shadow:0 12px 35px rgba(0,0,0,.18)}.vehicles-panel.open{transform:translateX(0)}.map-area{height:100%}.mobile-vehicles{display:block;position:absolute;z-index:600;left:14px;bottom:18px;height:46px;padding:0 17px;border:0;border-radius:999px;background:var(--ink);color:#fff;box-shadow:0 8px 25px rgba(18,33,52,.2);font-weight:700}.live-pill{top:12px}.map-actions{top:62px;right:12px}}@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}