:root{
 --sonic-navy:#080f36;--sonic-blue:#1655e8;--sonic-gold:#ffd42a;
 --sonic-red:#e93637;--sonic-ink:#172548;--sonic-muted:#65728c;
 --sonic-line:#dfe5f2;--sonic-paper:#f3f6fc;--green:var(--sonic-blue);--line:var(--sonic-line);
 color:var(--sonic-ink);background:var(--sonic-paper);color-scheme:light;
}
.migration-banner{padding:22px;margin:18px 0;border:2px solid #1655e8;border-radius:16px;background:#edf2ff;color:#172548}.migration-banner h2{margin-top:0}.migration-banner p{line-height:1.6;overflow-wrap:anywhere}.migration-banner .install-primary{margin-top:15px}
body{background:var(--sonic-paper);color:var(--sonic-ink)}
button,input,select,textarea{font-family:inherit}
a{color:#164dcc}h1,h2,h3{color:var(--sonic-ink)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #7c9eff;outline-offset:3px}
input,select,textarea{border-color:#ccd6eb;color:var(--sonic-ink)}
input:focus,select:focus,textarea:focus{outline-color:#8baaff}
button{touch-action:manipulation}
.brand-logo{display:block;width:190px;height:auto;max-width:100%;flex:none}
.brand-area{display:flex;align-items:center;gap:16px}
.brand-area-label{display:inline-block;color:#d9e3ff!important;font-size:10px!important;font-weight:700;letter-spacing:2px;border-left:1px solid #ffffff45;padding-left:16px}
.primary,.install-primary,#dispatch-send{background:var(--sonic-blue);color:white;box-shadow:0 4px 12px #1655e822}
.primary:hover,.install-primary:hover,#dispatch-send:hover{background:#1041ba}
.secondary{background:#edf2ff;border-color:#d2ddf9;color:#214fbe}
.secondary:hover{background:#e2eaff}
.action{color:#244fb1;background:#f1f5ff;border-color:#d8e1f7}
.action:hover{background:#e5edff}
.hint,.footnote,.history-note,.eyebrow,.place-label{color:var(--sonic-muted)}
.cancel-service,.cancel-service:hover{color:#ac3037;background:#fff0f1;border-color:#efbdc1}
.failure-button,.error,.dialog-error,#form-error,#evidence-error{color:#ac3037}
.gps-notices button{background:var(--sonic-blue)}
dialog{border:1px solid var(--sonic-line);box-shadow:0 24px 80px #080f3630}
dialog::backdrop{background:#080f3677;backdrop-filter:blur(3px)}
.details{color:#536385;background:#f2f5fc}

/* Coordination: strong identity at the edge, clear working surfaces. */
.sonic-admin .sidebar{background:var(--sonic-navy);border-right:0;padding-top:25px;color:#dce5ff}
.sonic-admin .brand{padding:0 8px 32px;letter-spacing:0}
.sonic-admin .brand-logo{width:198px}
.sonic-admin .nav-label{color:#8095c4;letter-spacing:2px}
.sonic-admin nav button,.sonic-admin nav .map-link{color:#bbc9ec;border-radius:9px}
.sonic-admin nav button:hover,.sonic-admin nav .map-link:hover{background:#ffffff0d;color:white}
.sonic-admin nav button.active{background:var(--sonic-gold);color:var(--sonic-navy);box-shadow:0 4px 18px #ffd42a12}
.sonic-admin .side-bottom{color:#c4d0ed}
.sonic-admin .side-bottom small{color:#8194bd}
.sonic-admin .side-bottom .secondary,.sonic-admin .side-bottom .action{background:#ffffff0a;border-color:#ffffff25;color:#e6edff}
.sonic-admin .profile{border-color:#ffffff20}
.sonic-admin .profile b{background:#203d7d;color:var(--sonic-gold)}
.sonic-admin header{padding:4px 0 20px;border-bottom:1px solid var(--sonic-line)}
.sonic-admin header h1{font-weight:750;color:#101f48}
.sonic-admin #create{background:var(--sonic-gold);color:var(--sonic-navy);box-shadow:0 4px 12px #d8a90022}
.sonic-admin #create:hover{background:#f4c919}
.sonic-admin .metric{border-color:var(--sonic-line);border-top:3px solid #d9e3ff}
.sonic-admin .metric:first-child{border-top-color:var(--sonic-blue)}
.sonic-admin .metric.pending-card{border-top-color:#efbc20}
.sonic-admin .metric strong{color:var(--sonic-ink)}
.sonic-admin .metric.pending-card strong{color:#976900}
.sonic-admin .panel{border-color:var(--sonic-line);box-shadow:0 3px 14px #080f3603}
.sonic-admin .panel-head p,.sonic-admin td small,.sonic-admin .metric small{color:#77839b}
.sonic-admin td{color:#586782}.sonic-admin td strong{color:#23375f}
.sonic-admin th{background:#f7f9fd;color:#697792}
.sonic-admin .tabs button.active{background:#e9efff;color:#1c50cd}
.sonic-admin .pill,.sonic-admin .rider-number{background:#edf2ff;color:#2351c1;border-color:#dbe4fa}
.sonic-admin .rider-name{color:#2b3d63}.sonic-admin .rider-meta{color:#6e7f9b}
.sonic-admin .side-note{background:#edf3ff;border-color:#dae4fb;color:#5b6f96}
.sonic-admin .side-note b{color:#2452b9}
.sonic-admin .pending{background:var(--sonic-navy);border:1px solid #ffd42a77;color:var(--sonic-gold)}
.response-bubble,.map-responses article{border-color:var(--sonic-blue)}
.sonic-admin footer{color:#72809e}

/* Shared mobile identity. Green/amber/red remain reserved for service states. */
.sonic-customer>header,.mobile-header,.sonic-map>header{
 background:linear-gradient(110deg,var(--sonic-navy),#102976);color:white;border-bottom:3px solid var(--sonic-gold);
}
.sonic-customer>header{display:flex;align-items:center;justify-content:center;gap:20px;padding-bottom:20px}
.sonic-customer>header small{font-size:10px;margin:0;color:#d9e3ff;letter-spacing:2px}
.sonic-customer>header .brand-logo{width:210px}
.sonic-customer main{max-width:680px;padding-top:22px}
.sonic-customer .card{border-color:var(--sonic-line);box-shadow:0 5px 24px #080f3605}
.sonic-customer #access{border-top:4px solid var(--sonic-gold)}
.sonic-customer #access>p{color:var(--sonic-muted);line-height:1.7}
.sonic-customer button:not(.secondary):not(.cancel-service){background:var(--sonic-blue);color:white}
.sonic-customer button:not(.secondary):not(.cancel-service):hover{background:#1041ba}
.sonic-customer #send{background:var(--sonic-gold);color:var(--sonic-navy);font-weight:800;box-shadow:0 5px 12px #d5a90020}
.sonic-customer #send:hover{background:#f5cb1b}
.sonic-customer .more-options{background:#f7f9ff;border-color:var(--sonic-line)}
.sonic-customer .more-options summary{color:#2852aa}
.sonic-customer .request small{color:var(--sonic-muted)}
.sonic-customer .service-summary{border-color:var(--sonic-line)}
.sonic-customer .welcome{margin-bottom:12px}
.sonic-customer .welcome h1{font-size:25px}.sonic-customer .welcome p{color:var(--sonic-muted);font-size:14px}
.mobile-header{padding-top:17px;padding-bottom:17px}
.mobile-header .wordmark{gap:13px}.mobile-header .brand-logo{width:180px}
.mobile-header .text-button{color:white}
.sonic-driver .service-card,.sonic-driver .tracking-panel{border-color:var(--sonic-line)}
.sonic-driver .service-card{box-shadow:0 5px 22px #080f3607}
.sonic-driver .greeting p:not(.eyebrow){color:var(--sonic-muted)}
.sonic-driver .type-tag,.sonic-driver .driver-tabs button.selected{background:#e9efff;color:#2854bc}
.sonic-driver .driver-tabs button{color:#73819b}
.sonic-driver .service-terms{color:#72829f}.sonic-driver .service-terms strong{color:#234a9c}
.sonic-driver .place-address{color:#526483}.sonic-driver .contact-link{color:#2057cf}
.sonic-driver .service-notes{background:#f1f5ff;color:#536887}
.sonic-driver .incoming-offer{border-color:var(--sonic-blue);border-top:6px solid var(--sonic-gold)}
.sonic-driver .incoming-offer>strong{color:#153a91}
.sonic-driver .alert-toggle{background:#eaf0ff;border-color:#cbd9fa;color:#244eac}
.sonic-driver .service-top{border-color:var(--sonic-line)}
.login-page{background:radial-gradient(ellipse at 80% 15%,#1849bd55,transparent 50%),linear-gradient(140deg,#060c2b,#102259);}
.login-card{border-top:5px solid var(--sonic-gold);box-shadow:0 20px 80px #02051d66}
.login-card .wordmark{background:var(--sonic-navy);padding:15px;border-radius:12px;justify-content:center;margin-bottom:30px}
.login-card .brand-logo{width:245px}
.login-card .callout{background:#fff7d9;color:#7a5d0d}
.sonic-map>header{align-items:center}.sonic-map>header a{color:#dbe6ff}
.sonic-map>header .brand-logo{width:165px}
.sonic-map .heading p,.sonic-map .rider span,.sonic-map .rider small,.sonic-map .map-help{color:#65738f}
.sonic-map button{color:#2353bd;border-color:#d1dcf4}
.sonic-map #map{border-color:#ced8ee;background:#e9eef9}
.sonic-map .rider strong{color:#254a94}
.sonic-map .dispatch-services{border-color:var(--sonic-line)}
.sonic-map .dispatch-scroll th{background:#f4f7fe;color:#647394}

/* Courier in a loop while at least one requested rider has not arrived. */
.sonic-customer .trip-progress{position:relative;overflow:hidden;background:linear-gradient(135deg,#080f36,#102878);border:0;padding:26px 22px 28px;color:#d8e5ff;box-shadow:0 12px 28px #080f3620}
.trip-progress .progress-label{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;color:var(--sonic-gold);font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}
.progress-label::before{content:'';height:7px;width:7px;background:var(--sonic-gold);border-radius:50%;box-shadow:0 0 12px #ffdf6a}
.courier-scene{position:relative;height:210px;margin:12px 0 4px;isolation:isolate}
.courier-scene::before{content:'';position:absolute;inset:15% 5%;border-radius:50%;background:radial-gradient(ellipse,#1e67ff99,transparent 68%);z-index:-1}
.courier-scene .courier-art{position:relative;width:220px;height:210px;object-fit:contain;z-index:2;animation:sonic-stride .48s ease-in-out infinite alternate;filter:drop-shadow(0 10px 12px #0005)}
.courier-road{position:absolute;left:8%;right:8%;bottom:8px;height:3px;background:linear-gradient(90deg,transparent,#3e83ff,transparent)}
.courier-speed{position:absolute;inset:25% 0 15%;overflow:hidden;z-index:0;transform:skewY(-8deg)}
.courier-speed i{position:absolute;width:90px;height:2px;right:-100px;background:linear-gradient(90deg,transparent,#5ba1ff);animation:sonic-speed 1.4s linear infinite}
.courier-speed i:nth-child(1){top:8%;animation-delay:-.3s;width:120px}.courier-speed i:nth-child(2){top:35%;animation-delay:-1s}.courier-speed i:nth-child(3){top:68%;animation-delay:-.5s;width:160px}.courier-speed i:nth-child(4){top:95%;animation-delay:-1.2s;background:linear-gradient(90deg,transparent,#ffd42a)}
.sonic-customer .trip-progress h2{position:relative;color:white;font-size:23px;letter-spacing:-.4px;margin:10px 0}
.trip-progress p{position:relative;color:#bfcef1;font-size:14px;line-height:1.6;margin:8px auto 0;max-width:360px}
@keyframes sonic-stride{from{transform:translateY(3px) rotate(-2deg)}to{transform:translateY(-5px) rotate(1deg)}}
@keyframes sonic-speed{from{transform:translateX(0);opacity:0}15%{opacity:.8}to{transform:translateX(-650px);opacity:0}}
@media(prefers-reduced-motion:reduce){.courier-art,.courier-speed i{animation:none!important}.courier-speed{display:none}*{scroll-behavior:auto!important}}
@media(max-width:520px){
 .sonic-customer>header{justify-content:space-between;gap:10px;padding-left:20px;padding-right:20px}
 .sonic-customer>header .brand-logo{width:185px}.brand-area-label{font-size:8px!important;letter-spacing:1px;padding-left:10px}
 .mobile-header .brand-logo{width:150px}.mobile-header .brand-area-label{font-size:8px!important}
 .sonic-customer .card{padding:21px}.sonic-customer .trip-progress{padding:23px 16px}
 .sonic-map>header .brand-logo{width:125px}.sonic-map>header a{font-size:12px}
}