:root{--navy:#16384f;--navy-dark:#0f2c40;--green:#16844b;--green-soft:#e8f6ee;--blue-soft:#edf4f8;--orange-soft:#fff3dd;--red-soft:#fff0f0;--bg:#f3f6f8;--card:#fff;--text:#17212b;--muted:#697786;--line:#e3e8ed}*{box-sizing:border-box}html{background:var(--bg)}body{color:var(--text);background:var(--bg);margin:0;font-family:Arial,Helvetica,sans-serif}button{font:inherit}.app{width:100%;max-width:520px;min-height:100vh;margin:0 auto;padding:18px 16px 96px}.header{justify-content:space-between;align-items:center;margin-bottom:28px;display:flex}.brand{align-items:center;gap:10px;display:flex}.logo{color:#fff;background:var(--navy);border-radius:10px;place-items:center;width:38px;height:38px;font-size:20px;font-weight:800;display:grid}.brand strong,.brand small{display:block}.brand strong{font-size:14px}.brand small{color:var(--muted);margin-top:2px;font-size:12px}.online{color:var(--green);align-items:center;gap:6px;font-size:12px;font-weight:700;display:flex}.onlineDot{background:var(--green);border-radius:50%;width:8px;height:8px}.welcome p,.welcome h1,.welcome span{margin:0}.welcome p{color:var(--muted);font-size:14px}.welcome h1{margin-top:3px;font-size:30px;line-height:1.1}.welcome span{color:var(--muted);margin-top:7px;font-size:13px;display:block}.summary{grid-template-columns:repeat(3,1fr);gap:9px;margin:20px 0;display:grid}.summary div{text-align:center;border:1px solid var(--line);background:var(--card);border-radius:13px;padding:13px 10px}.summary strong,.summary span{display:block}.summary strong{font-size:20px}.summary span{color:var(--muted);margin-top:3px;font-size:11px}.nextCard,.finishedCard,.today,.overnightCard{border:1px solid var(--line);background:var(--card);border-radius:18px;box-shadow:0 8px 24px #16384f0d}.nextCard{padding:18px}.cardLabel{color:var(--navy);letter-spacing:.1em;margin-bottom:13px;font-size:11px;font-weight:800}.timeRow{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;padding-bottom:15px;display:flex}.timeRow span,.timeRow strong{display:block}.timeRow div>span{color:var(--muted);font-size:12px}.timeRow strong{margin-top:2px;font-size:24px}.stopBadge{color:var(--navy);background:var(--blue-soft);border-radius:999px;padding:7px 10px;font-size:12px;font-weight:700}.customer{padding:16px 0}.customer span{color:var(--muted);font-size:12px}.customer h2{margin:4px 0 6px;font-size:22px}.customer p{color:var(--muted);margin:0;font-size:14px;line-height:1.45}.driveInfo{grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px;display:grid}.driveInfo div{background:var(--blue-soft);border-radius:12px;padding:12px}.driveInfo span,.driveInfo strong{display:block}.driveInfo span{color:var(--muted);font-size:11px}.driveInfo strong{color:var(--navy);margin-top:4px}.note{background:var(--orange-soft);border-radius:12px;gap:4px;margin:12px 0;padding:12px;display:grid}.note strong{font-size:12px}.note span{font-size:13px;line-height:1.4}.navigationButton,.arrivalButton,.deliveredButton,.problemButton{cursor:pointer;border:0;border-radius:12px;width:100%;padding:14px;font-weight:800}.navigationButton{color:#fff;background:var(--navy);margin-top:7px}.arrivalButton{color:var(--navy);background:var(--blue-soft);margin-top:9px}.deliveredButton{color:#fff;background:var(--green);margin-top:9px}.problemButton{color:#9c2c2c;background:var(--red-soft);margin-top:9px}.message{color:var(--green);background:var(--green-soft);border-radius:12px;margin-top:12px;padding:11px 13px;font-size:13px;font-weight:700}.today{margin-top:18px;padding:17px}.sectionHeader{justify-content:space-between;align-items:center;margin-bottom:15px;display:flex}.sectionHeader h2{margin:0;font-size:17px}.sectionHeader span{color:var(--muted);font-size:12px}.timeline{gap:12px;display:grid}.timelineItem{opacity:.58;grid-template-columns:34px 1fr;gap:10px;display:grid}.timelineItem.current,.timelineItem.done,.timelineItem.notDelivered{opacity:1}.timelineMarker{width:29px;height:29px;color:var(--muted);background:#eef1f3;border-radius:50%;place-items:center;font-size:12px;font-weight:800;display:grid}.timelineItem.current .timelineMarker{color:#fff;background:var(--navy)}.timelineItem.done .timelineMarker{color:#fff;background:var(--green)}.timelineItem.notDelivered .timelineMarker{color:#fff;background:#b3261e}.timelineContent{border-bottom:1px solid var(--line);padding-bottom:10px}.timelineContent div{flex-direction:column;gap:2px;display:flex}.timelineContent strong{font-size:13px}.timelineContent span,.timelineContent p{color:var(--muted);font-size:11px}.timelineContent p{margin:5px 0 0}.overnightCard{align-items:center;gap:13px;margin-top:18px;padding:16px;display:flex}.moon{color:#74550a;background:var(--orange-soft);border-radius:12px;place-items:center;width:42px;height:42px;font-size:24px;display:grid}.overnightCard strong,.overnightCard p,.overnightCard small{margin:0;display:block}.overnightCard p{margin-top:3px;font-size:14px}.overnightCard small{color:var(--muted);margin-top:3px}.finishedCard{text-align:center;padding:28px 18px}.finishedCard>span{color:#fff;background:var(--green);border-radius:50%;place-items:center;width:52px;height:52px;margin:0 auto;font-size:26px;display:grid}.finishedCard>span.warning{background:#b3261e}.finishedCard h2{margin:14px 0 7px}.finishedCard p{color:var(--muted);margin:0 0 13px;line-height:1.5}.bottomNav{z-index:20;border:1px solid var(--line);background:#fffffff5;border-radius:18px;grid-template-columns:repeat(3,1fr);width:calc(100% - 28px);max-width:492px;padding:7px;display:grid;position:fixed;bottom:12px;left:50%;transform:translate(-50%);box-shadow:0 12px 30px #16384f29}.bottomNav button{color:var(--muted);cursor:pointer;background:0 0;border:0;border-radius:12px;place-items:center;gap:3px;padding:8px;font-size:11px;display:grid}.bottomNav button span{font-size:16px}.bottomNav button.active{color:var(--navy);background:var(--blue-soft);font-weight:800}@media (min-width:700px){.app{padding-top:28px}}.app{padding-bottom:calc(150px + env(safe-area-inset-bottom))}.bottomNav{bottom:calc(12px + env(safe-area-inset-bottom))}.nextCard,.finishedCard{margin-bottom:18px}.loginScreen,.driverGate{background:linear-gradient(#edf3f7 0%,#f7f9fa 100%);place-items:center;min-height:100vh;padding:24px 18px;display:grid}.loginCard,.driverGateCard{border:1px solid var(--line);background:#fff;border-radius:24px;width:100%;max-width:430px;padding:30px 24px;box-shadow:0 16px 45px #16384f1a}.loginLogo{color:#fff;background:var(--navy);border-radius:17px;place-items:center;width:62px;height:62px;margin-bottom:24px;font-size:32px;font-weight:800;display:grid}.loginLogo.small{border-radius:12px;width:44px;height:44px;margin:0;font-size:22px}.loginHeadline span{color:var(--navy);font-size:14px;font-weight:800}.loginHeadline h1{margin:5px 0 7px;font-size:34px;line-height:1.05}.loginHeadline p{color:var(--muted);margin:0;line-height:1.5}.loginForm{gap:17px;margin-top:28px;display:grid}.loginForm label{color:#34414d;gap:7px;font-size:13px;font-weight:700;display:grid}.loginForm input{width:100%;min-height:52px;color:var(--text);background:#fff;border:1px solid #d9e0e6;border-radius:13px;outline:0;padding:0 14px;font-size:16px}.loginForm input:focus{border-color:var(--navy);box-shadow:0 0 0 3px #16384f1a}.loginButton{color:#fff;background:var(--navy);cursor:pointer;border:0;border-radius:13px;min-height:54px;margin-top:4px;font-size:16px;font-weight:800}.loginButton:disabled{opacity:.65;cursor:wait}.loginError{color:#9c2c2c;background:var(--red-soft);border-radius:12px;padding:12px 13px;font-size:13px}.loginFooter{border-top:1px solid var(--line);color:var(--muted);text-align:center;margin-top:25px;padding-top:18px;font-size:11px}.loginLoading{color:var(--muted);font-size:14px}.driverGateTop{justify-content:space-between;align-items:center;margin-bottom:34px;display:flex}.logoutButton{color:var(--navy);background:var(--blue-soft);cursor:pointer;border:0;border-radius:10px;padding:9px 12px;font-size:12px;font-weight:700}.driverGateLabel{color:var(--navy);letter-spacing:.1em;font-size:11px;font-weight:800}.driverGateCard h1{margin:7px 0 3px;font-size:31px}.driverEmail{color:var(--muted);margin:0;font-size:13px}.driverDataBox{gap:10px;margin-top:25px;display:grid}.driverDataBox>div{background:var(--blue-soft);border-radius:13px;padding:14px}.driverDataBox span,.driverDataBox strong{display:block}.driverDataBox span{color:var(--muted);margin-bottom:5px;font-size:11px}.driverDataBox strong{font-size:13px;line-height:1.45}.driverSuccess{color:var(--green);background:var(--green-soft);border-radius:12px;margin-top:18px;padding:13px;font-size:13px;font-weight:800}.driverWarning{color:#8b6100;background:var(--orange-soft);border-radius:12px;margin-top:22px;padding:13px;font-size:13px;font-weight:700}.driverHelp{color:var(--muted);margin:15px 0 0;font-size:13px;line-height:1.55}.driverNext{background:#f6f8f9;border-radius:13px;gap:5px;margin-top:18px;padding:14px;display:grid}.driverNext strong{font-size:13px}.driverNext span{color:var(--muted);font-size:12px;line-height:1.5}.liveError{color:#9c2c2c;background:var(--red-soft);border-radius:12px;margin:0 0 14px;padding:13px;font-size:13px;font-weight:700}.statusChip{color:var(--muted);background:#f5f7f8;border-radius:11px;margin:8px 0 4px;padding:10px 12px;font-size:12px}.statusChip strong{color:var(--navy)}.navigationButton:disabled,.arrivalButton:disabled,.deliveredButton:disabled{opacity:.65;cursor:wait}.liveEta{border-radius:13px;grid-template-columns:1fr auto;align-items:center;gap:14px;margin:12px 0;padding:13px 14px;display:grid}.liveEta span,.liveEta strong{display:block}.liveEta span{opacity:.76;margin-bottom:3px;font-size:11px}.liveEta strong{font-size:18px}.etaDelay{text-align:right}.liveEta.etaOk{color:#126b3e;background:#e8f6ee}.liveEta.etaWarn{color:#806000;background:#fff3d8}.liveEta.etaLate{color:#a52c2c;background:#fff0f0}.etaInline{font-weight:800}.etaInline.etaOk{color:#16844b}.etaInline.etaWarn{color:#9a7200}.etaInline.etaLate{color:#b33232}.trafficInfo{color:var(--muted);background:#f5f7f8;border-radius:11px;gap:4px;margin:10px 0 4px;padding:11px 13px;font-size:12px;line-height:1.4;display:grid}.trafficInfo strong{color:var(--navy);font-size:12px}.trafficInfo small{opacity:.78}.trafficSuccess{color:#126b3e;background:#e8f6ee}.trafficSuccess strong{color:#126b3e}.trafficError{color:#8b6100;background:#fff3dd}