:root{--navy: #1b2e4b;--navy-deep: #0f1f33;--orange: #ff6b2b;--orange-soft: #ffe3d3;--green: #10b981;--gray-50: #f8f9fb;--gray-100: #f1f3f6;--gray-200: #e5e8ed;--gray-400: #9aa3b2;--gray-500: #6b7280;--gray-700: #374151;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%;width:100%}body{margin:0;background:var(--gray-50);color:var(--navy);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{color:var(--orange);text-decoration:none}button{font-family:inherit;cursor:pointer}h1,h2,h3,p{margin:0}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-thumb{background:var(--gray-200);border-radius:3px}.test-page-wrap{padding-top:42px;height:100vh;box-sizing:border-box}.test-page-wrap .tracking-page,.test-page-wrap .terminal-screen,.test-page-wrap .state-screen{height:100%}.test-panel{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--navy-deep);overflow-x:auto;white-space:nowrap}.test-panel-tag{font-size:10.5px;font-weight:800;letter-spacing:.05em;color:var(--orange);border:1px solid var(--orange);border-radius:6px;padding:3px 7px;flex-shrink:0}.test-panel-tag.finished{color:var(--green);border-color:var(--green)}.test-panel-select{font-size:12.5px;font-weight:600;border-radius:6px;border:none;padding:6px 8px;background:#fff;color:var(--navy);flex-shrink:0}.test-panel-btn{font-size:12.5px;font-weight:700;border-radius:6px;border:none;padding:6px 12px;background:var(--orange);color:#fff;flex-shrink:0}.tracking-page{display:flex;flex-direction:column;height:100vh;overflow:hidden}.map-area{position:relative;flex:1 1 56vh;min-height:280px;background:var(--gray-100)}.map-canvas{position:absolute;top:0;right:0;bottom:0;left:0}@media (min-width: 900px){.tracking-page{flex-direction:row}.map-area{flex:1 1 auto;height:100%}}.brand-header{position:absolute;top:14px;left:14px;right:14px;z-index:5;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.brand-logo{height:30px;border-radius:8px;background:#ffffffeb;padding:4px 8px;box-shadow:0 4px 14px #0f1f331f}.brand-pill{display:inline-flex;align-items:center;gap:6px;background:#ffffffeb;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:999px;padding:7px 12px;font-size:12.5px;font-weight:600;color:var(--navy);box-shadow:0 4px 14px #0f1f331f}.brand-dot{width:7px;height:7px;border-radius:50%;background:var(--gray-400)}.brand-dot.live{background:var(--green);box-shadow:0 0 #10b98199;animation:pulseDot 1.6s ease-out infinite}@keyframes pulseDot{0%{box-shadow:0 0 #10b9818c}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.recenter-btn{position:absolute;right:14px;bottom:18px;z-index:5;width:42px;height:42px;border-radius:50%;border:none;background:#fff;color:var(--orange);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px #0f1f332e}.waiting-banner{position:absolute;bottom:18px;left:14px;z-index:5;display:inline-flex;align-items:center;gap:8px;background:#fffffff0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:999px;padding:8px 14px;font-size:12.5px;font-weight:600;color:var(--navy);box-shadow:0 4px 14px #0f1f331f}.spinner-sm{width:12px;height:12px;border-radius:50%;border:2px solid var(--gray-200);border-top-color:var(--orange);animation:spin .8s linear infinite}.endpoint-pin{width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px #fff,0 4px 8px #0f1f3340}.endpoint-pin span{width:6px;height:6px;border-radius:50%;background:#fff}.vehicle-marker{position:relative;width:34px;height:34px;display:flex;align-items:center;justify-content:center;transition:transform .25s linear}.vehicle-icon-wrap{position:relative;z-index:2;display:flex;filter:drop-shadow(0 3px 6px rgba(15,31,51,.35))}.vehicle-pulse{position:absolute;z-index:1;width:34px;height:34px;border-radius:50%;background:#ff6b2b59;animation:vehiclePulse 1.8s ease-out infinite}@keyframes vehiclePulse{0%{transform:scale(.6);opacity:.8}to{transform:scale(2);opacity:0}}.trip-card{position:relative;background:#fff;border-radius:22px 22px 0 0;margin-top:-22px;z-index:4;padding:10px 20px 24px;box-shadow:0 -8px 24px #0f1f3314;overflow-y:auto;flex:1 1 auto}.trip-card-handle{width:40px;height:4px;border-radius:2px;background:var(--gray-200);margin:4px auto 14px}@media (min-width: 900px){.trip-card{width:380px;flex:none;border-radius:0;margin-top:0;box-shadow:-8px 0 24px #0f1f330f;padding:24px 22px}.trip-card-handle{display:none}}.trip-card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:14px}.trip-card-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gray-400);margin-bottom:2px}.trip-card-status{font-size:19px;font-weight:700;color:var(--navy)}.icon-btn{width:36px;height:36px;border-radius:50%;border:none;background:var(--gray-100);color:var(--navy);display:flex;align-items:center;justify-content:center;flex-shrink:0}.call-btn{background:var(--green);color:#fff}.stepper{display:flex;gap:2px;margin:10px 0 14px}.stepper-item{flex:1;display:flex;flex-direction:column;gap:6px}.stepper-track{display:flex;align-items:center}.stepper-dot{width:9px;height:9px;border-radius:50%;background:var(--gray-200);flex-shrink:0}.stepper-line{flex:1;height:3px;background:var(--gray-200);border-radius:2px;margin-left:2px}.stepper-label{font-size:10.5px;color:var(--gray-400);font-weight:600;line-height:1.25}.stepper-done .stepper-dot,.stepper-done .stepper-line{background:var(--orange)}.stepper-done .stepper-label{color:var(--navy)}.stepper-active .stepper-dot{background:var(--orange);box-shadow:0 0 0 3px var(--orange-soft)}.stepper-active .stepper-label{color:var(--orange)}.live-banner{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px;margin-bottom:14px}.live-banner.online{background:#ecfdf5;color:#047857}.live-banner.offline{background:#fff7ed;color:#c2410c}.trip-section{padding:14px 0;border-top:1px solid var(--gray-100)}.driver-row{display:flex;align-items:center;gap:12px}.avatar{width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex-shrink:0}.driver-meta{flex:1;min-width:0}.driver-name{font-weight:700;font-size:14.5px;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.vehicle-line{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--gray-500);margin-top:2px}.route-section{display:flex;flex-direction:column}.route-row{display:flex;align-items:flex-start;gap:12px}.route-dot{width:11px;height:11px;border-radius:50%;margin-top:4px;flex-shrink:0}.route-dot.pickup{background:var(--green)}.route-dot.drop{background:var(--orange)}.route-connector{width:11px;display:flex;justify-content:center}.route-connector:before{content:"";width:2px;height:22px;background:var(--gray-200);margin-left:-.5px}.route-label{font-size:11px;font-weight:700;color:var(--gray-400);text-transform:uppercase;letter-spacing:.04em}.route-address{font-size:13.5px;color:var(--navy);margin-top:2px;line-height:1.35}.distance-row{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--gray-500);font-weight:600}.terminal-screen,.state-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;height:100vh;padding:32px 24px;gap:10px}.terminal-badge{width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:6px}.terminal-badge.completed{background:#ecfdf5;color:var(--green)}.terminal-badge.cancelled{background:#fef2f2;color:#dc2626}.terminal-title{font-size:21px;font-weight:800;color:var(--navy)}.terminal-subtitle{font-size:13.5px;color:var(--gray-500);max-width:320px}.terminal-summary{width:100%;max-width:360px;background:var(--gray-50);border:1px solid var(--gray-100);border-radius:16px;padding:18px;margin-top:14px;text-align:left}.terminal-row{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--navy);font-weight:600;margin-bottom:10px}.terminal-route{display:flex;flex-direction:column;margin:10px 0}.terminal-footer{margin-top:22px;font-size:11.5px;color:var(--gray-400);font-weight:600;letter-spacing:.03em}.spinner{width:36px;height:36px;border-radius:50%;border:3px solid var(--gray-200);border-top-color:var(--orange);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.state-text{font-size:14.5px;font-weight:700;color:var(--navy)}.state-subtext{font-size:13px;color:var(--gray-500);max-width:280px}.home-logo{height:44px;margin-bottom:8px}.home-title{font-size:20px;font-weight:800;color:var(--navy)}