*{box-sizing:border-box}html,body,#map{width:100%;height:100%;margin:0}body{overflow:hidden;background:#e9edf1;color:#fff;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}.search-panel{position:fixed;z-index:5;top:20px;left:20px;width:min(470px,calc(100vw - 40px));padding:14px;background:rgba(28,30,34,.9);border-radius:18px;box-shadow:0 8px 30px #0005;backdrop-filter:blur(16px)}.search-panel label{display:block;margin:0 0 8px 4px;color:#b8bcc2;font-size:.72rem;font-weight:700}.search-row{display:flex;gap:8px}.search-row input{min-width:0;flex:1;border:1px solid #4a4d52;border-radius:11px;padding:15px;background:#25282c;color:#fff;font:inherit;outline:none}.search-row input:focus{border-color:#4388ec;box-shadow:0 0 0 3px #4388ec33}.search-row button,.map-actions button,.map-actions a,.route-summary button{display:grid;place-items:center;border:0;border-radius:11px;background:#1a73e8;color:#fff;font:700 1.2rem inherit;text-decoration:none;cursor:pointer}.search-row button{width:54px}.route-summary{position:fixed;z-index:5;right:20px;bottom:20px;display:flex;align-items:center;gap:25px;min-width:410px;padding:17px 18px;background:rgba(31,34,38,.94);border-radius:18px;box-shadow:0 8px 30px #0005;backdrop-filter:blur(15px)}.route-summary[hidden],.maneuver[hidden]{display:none!important}.route-summary div{display:grid;gap:3px}.route-summary small{color:#aeb2b7;font-size:.67rem;text-transform:uppercase}.route-summary strong{font-size:1.08rem}.route-summary button{width:40px;height:40px;background:#4a4d51}.route-summary .start-route{width:94px;background:#25cc45;color:#071209;font-size:.86rem}.maneuver{position:fixed;z-index:5;top:20px;left:50%;translate:-50% 0;display:flex;align-items:center;gap:15px;min-width:290px;max-width:420px;padding:14px 18px;background:rgba(31,34,38,.94);border-radius:18px;box-shadow:0 8px 30px #0005}.maneuver>span{display:grid;place-items:center;width:54px;height:54px;border-radius:12px;background:#1a73e8;font-size:2rem}.maneuver div{display:grid;gap:3px}.maneuver strong{font-size:1.45rem}.maneuver small{color:#c4c7cb}.speed{position:fixed;z-index:5;left:20px;bottom:20px;display:grid;place-items:center;width:86px;height:86px;background:rgba(255,255,255,.96);color:#111;border-radius:50%;box-shadow:0 6px 24px #0004}.speed strong{font-size:2.1rem;line-height:1}.speed small{font-size:.6rem;color:#666}.map-actions{position:fixed;z-index:5;right:20px;top:20px;display:grid;gap:10px}.map-actions button,.map-actions a{width:54px;height:54px;background:#292c30;color:#fff;box-shadow:0 4px 18px #0004}.map-actions a{width:auto;height:42px;padding:0 13px;font-size:.7rem}.map-message{position:fixed;z-index:7;top:110px;left:50%;translate:-50% 0;padding:11px 16px;background:#202124;color:#fff;border-radius:9px;font-size:.8rem;box-shadow:0 5px 18px #0004}.navigating .search-panel{opacity:.25;transition:.2s}.navigating .search-panel:focus-within{opacity:1}@media(max-width:800px){.maneuver{top:105px}.route-summary{right:10px;bottom:10px;min-width:0;width:calc(100vw - 116px);gap:13px}.route-summary .start-route{width:64px}.speed{left:10px;bottom:10px}.map-actions{right:10px;top:120px}.search-panel{top:10px;left:10px;width:calc(100vw - 20px)}}

/* Light/dark CarPlay surfaces */
body:not(.dark) .search-panel{background:rgba(255,255,255,.72);box-shadow:0 8px 30px #26384d35}
body:not(.dark) .search-panel label{color:#4d5864}
body:not(.dark) .search-row input{background:rgba(255,255,255,.7);border-color:rgba(100,115,130,.3);color:#17202a}
body.dark .search-panel{background:rgba(21,37,65,.76)}
body.dark .search-row input{background:rgba(12,25,45,.7);border-color:#3e5a77;color:#fff}
.speed{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0;gap:3px}
.speed strong,.speed small{margin:0}
.map-actions button{font-size:.76rem;font-weight:800}.map-actions button.active{background:#1a73e8;color:#fff;box-shadow:0 0 0 3px #fff8,0 4px 18px #0004}
.map-actions #locateButton img{display:block;width:42px;height:42px;object-fit:contain;pointer-events:none}
.navigating .search-panel{display:none}.navigating .maneuver{top:14px;left:14px;translate:0 0;min-width:340px;max-width:min(440px,calc(100vw - 100px));padding:0;background:#08745d;overflow:hidden}.navigating .maneuver>span{align-self:stretch;width:82px;height:auto;border-radius:0;background:#086a56;font-size:2.6rem}.navigating .maneuver>div{flex:1;padding:14px 15px 0;overflow:hidden}.navigating .maneuver strong{font-size:1.7rem}.navigating .maneuver b{margin:5px 0 12px;font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.navigating .maneuver small{display:block;margin:0 -15px;padding:9px 15px;background:#075d4c;color:#e7fffa;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.navigating .route-summary{right:auto;left:14px;min-width:330px;background:rgba(255,255,255,.96);color:#101316}.navigating .route-summary small{color:#657078}.navigating .route-summary .start-route{display:none}@media(max-width:800px){.navigating .maneuver{top:10px;left:10px;max-width:calc(100vw - 84px);min-width:0}.navigating .route-summary{left:10px;width:calc(100vw - 116px)}}
.place-card{position:fixed;z-index:6;left:20px;top:112px;width:min(340px,calc(100vw - 40px));padding:17px 18px;background:rgba(255,255,255,.96);color:#17202a;border-radius:13px;box-shadow:0 8px 28px #0004}.place-card[hidden]{display:none}.place-card:after{content:"";position:absolute;left:52px;bottom:-12px;border:12px solid transparent;border-top-color:rgba(255,255,255,.96);border-bottom:0}.place-card>small{display:block;color:#68727c;font-size:.65rem}.place-card>strong{display:block;margin:4px 34px 3px 0;font-size:1.05rem}.place-card p{margin:0 0 13px;color:#626d77;font-size:.78rem;line-height:1.45}.place-close{position:absolute;right:10px;top:10px;width:30px;height:30px;border:0;border-radius:50%;background:#edf1f4;color:#333;font-size:1.1rem;cursor:pointer}.place-directions{width:100%;padding:11px;border:0;border-radius:9px;background:#1a73e8;color:#fff;font-weight:800;cursor:pointer}body.dark .place-card{background:rgba(21,37,65,.96);color:#fff}body.dark .place-card:after{border-top-color:rgba(21,37,65,.96)}body.dark .place-card p,body.dark .place-card>small{color:#c2c8d3}@media(max-width:800px){.place-card{left:10px;top:100px;width:calc(100vw - 84px)}}
.heading-badge{display:none;position:fixed;z-index:5;right:29px;top:14px;min-width:56px;padding:6px 10px;border-radius:13px;background:rgba(31,34,38,.92);color:#fff;text-align:center;font-weight:800;box-shadow:0 4px 16px #0003}.navigating .heading-badge{display:block}.navigating .speed{left:auto;right:20px;top:52px;bottom:auto;width:74px;height:74px}.navigating .speed strong{font-size:1.8rem}.navigating .map-actions{top:142px}@media(max-width:800px){.navigating .heading-badge{right:19px;top:10px}.navigating .speed{right:10px;top:48px}.navigating .map-actions{top:132px}}
.route-summary{left:50%;right:auto;transform:translateX(-50%);flex-wrap:wrap;max-width:min(440px,calc(100vw - 40px));padding-top:20px}.route-summary h2{width:100%;margin:0 40px 2px 0;font-size:1.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.route-summary>div:not(.route-options){flex:1}.route-summary>button#closeRoute{position:absolute;right:14px;top:14px;margin:0}.route-summary .more-routes{order:4;width:100%;height:44px;margin:0;background:#4a4d51;color:#fff;font-size:.82rem}.route-summary .route-options{order:5;display:grid;width:100%;gap:7px}.route-summary .route-options[hidden]{display:none}.route-option{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 12px;border:1px solid #59616a;border-radius:9px;background:#292d32;color:#fff;cursor:pointer}.route-option.active{border-color:#1a73e8;background:#173d71}.route-option small{color:#bcc4cc}.route-summary .start-route{order:6;width:100%;height:52px;margin:0;background:#25cc45;color:#071209;font-size:1rem}.navigating .route-summary h2,.navigating .route-summary .more-routes,.navigating .route-summary .route-options{display:none}.navigating .route-summary{max-width:390px;transform:none}.navigating .route-summary>button#closeRoute{right:-50px;top:50%;transform:translateY(-50%);width:42px;height:42px}
.marker-picker{position:fixed;z-index:8;right:84px;top:276px;width:188px;padding:12px;background:rgba(31,34,38,.92);border-radius:14px;box-shadow:0 5px 22px #0004;backdrop-filter:blur(14px)}.marker-picker[hidden]{display:none}.marker-picker>strong{display:block;margin-bottom:9px;color:#d5d8dc;font-size:.68rem;text-transform:uppercase}.marker-options{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.marker-options button{height:32px;padding:0;border:1px solid #555b62;border-radius:7px;background:#292d32;color:#fff;font-weight:800;cursor:pointer}.marker-options button.active{border-color:#fff;background:#1a73e8;box-shadow:0 0 0 2px #1a73e855}.marker-color{display:flex;align-items:center;justify-content:space-between;margin-top:10px;color:#bbc0c6;font-size:.7rem}.marker-color input{width:42px;height:25px;padding:0;border:0;border-radius:6px;background:none;cursor:pointer}body:not(.dark) .marker-picker{background:rgba(255,255,255,.82)}body:not(.dark) .marker-picker>strong,body:not(.dark) .marker-color{color:#3d4650}body:not(.dark) .marker-options button{background:#fff;color:#20252a;border-color:#ccd2d8}body:not(.dark) .marker-options button.active{background:#1a73e8;color:#fff}@media(max-width:800px){.marker-picker{top:auto;right:74px;bottom:64px;width:174px}}

.auto-dark-setting{display:flex;align-items:center;justify-content:space-between;margin-top:10px;padding-top:10px;border-top:1px solid #ffffff1c;color:#bbc0c6;font-size:.7rem}.auto-dark-setting input{width:34px;height:19px;accent-color:#1a73e8;cursor:pointer}body:not(.dark) .auto-dark-setting{border-top-color:#d8dde2;color:#3d4650}
/* Alternative route rows must override the compact summary icon button. */
.route-summary .route-options{display:grid;grid-template-columns:1fr;width:100%;gap:7px}
.route-summary .route-options[hidden]{display:none}
.route-summary .route-option{display:flex;width:100%;height:auto;min-height:48px;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;text-align:left;line-height:1.3}
.route-summary .route-option span{min-width:0;flex:1;overflow-wrap:anywhere}
.route-summary .route-option small{flex:0 0 auto;white-space:nowrap;text-align:right}
.layer-picker{position:fixed;z-index:8;right:84px;top:148px;width:190px;padding:12px;background:rgba(31,34,38,.94);border:1px solid #4b5056;border-radius:14px;box-shadow:0 5px 22px #0004;backdrop-filter:blur(14px)}.layer-picker[hidden]{display:none}.layer-picker>strong{display:block;margin-bottom:8px;color:#d5d8dc;font-size:.68rem;text-transform:uppercase}.layer-picker label{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 4px;color:#f4f5f6;font-size:.76rem;font-weight:700}.layer-picker label+label{border-top:1px solid #454a50}.layer-picker label.disabled{opacity:.42}.layer-picker input{width:34px;height:19px;accent-color:#1a73e8;cursor:pointer}.layer-picker input:disabled{cursor:not-allowed}body:not(.dark) .layer-picker{background:rgba(255,255,255,.92);border-color:#d5d9de}body:not(.dark) .layer-picker>strong,body:not(.dark) .layer-picker label{color:#303840}.navigating .layer-picker{top:260px}@media(max-width:800px){.layer-picker{right:74px;top:248px}.navigating .layer-picker{top:260px}}