:root { font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --purple:#6d16d7; --purple-2:#4d0ba3; --ink:#281939; --muted:#716581; --stroke:#e8def0; color-scheme:light }
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#fbf9fd;color:var(--ink);-webkit-text-size-adjust:100%;}button,a{font:inherit;-webkit-tap-highlight-color:transparent}button{cursor:pointer;border:0}button:focus-visible,a:focus-visible{outline:3px solid #b789e7;outline-offset:3px} [hidden]{display:none!important}
.offline-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(12px + env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 12px max(16px,env(safe-area-inset-left));background:#fff;border-bottom:1px solid var(--stroke)}
.offline-brand{display:flex;align-items:center;gap:10px;color:var(--purple-2);text-decoration:none;font-size:20px;font-weight:900;letter-spacing:-.04em;min-width:0}.offline-brand img{object-fit:contain;border-radius:8px}.offline-brand small{font-size:12px;font-weight:700;letter-spacing:0;color:var(--muted)}.offline-network{border-radius:999px;padding:7px 10px;background:#f3edf9;color:#675776;font-size:11px;font-weight:800;white-space:nowrap}.offline-network[data-offline="true"]{background:#fff1db;color:#8b570d}
.offline-main{max-width:850px;margin:0 auto;padding:24px 18px max(36px,env(safe-area-inset-bottom))}.offline-kicker{font-size:10px;font-weight:900;letter-spacing:.13em;color:var(--purple);text-transform:uppercase}.offline-hero{padding:10px 0 16px}.offline-hero h1,.offline-title h1{font-size:clamp(25px,6vw,36px);line-height:1.17;letter-spacing:-.055em;margin:12px 0 10px;font-weight:850}.offline-hero p,.offline-title p{margin:0;color:var(--muted);line-height:1.55;font-size:14px;max-width:650px}.offline-hint{padding:14px 16px;border-radius:16px;background:#f1eaff;color:#513e6c;border:1px solid #ded0f1;font-size:13px;line-height:1.5}.offline-hint strong{display:block;margin-bottom:3px;color:var(--purple-2)}
.offline-library-header{margin:24px 0 12px;display:flex;justify-content:space-between;align-items:center}.offline-library-header h2{margin:0;font-size:18px}.offline-library-header span{font-size:12px;color:var(--muted)}.offline-routes-list{display:grid;gap:12px}.offline-route-card{border:1px solid var(--stroke);border-radius:18px;padding:16px;background:white;box-shadow:0 5px 20px #30164e0d}.offline-route-card h3{margin:0 0 5px;font-size:16px;line-height:1.35;overflow-wrap:anywhere}.offline-route-card p{margin:0;color:var(--muted);font-size:12px}.offline-route-card .offline-route-details{display:flex;flex-wrap:wrap;gap:10px;color:var(--muted);font-size:12px;margin:10px 0}.offline-route-card button,.offline-route-card a{padding:11px 15px;border-radius:12px;background:var(--purple);color:white;font-size:13px;font-weight:800;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px}.offline-empty{padding:28px 18px;color:var(--muted);border:1px dashed #cfbce1;background:white;border-radius:16px;line-height:1.55;margin:0}.offline-assurance,.offline-warning{margin:25px 0 0;font-size:12px;line-height:1.6;color:var(--muted)}
.offline-reader-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}.offline-back{color:var(--purple);background:transparent;font-weight:800;padding:10px 3px}.offline-tools{display:flex;gap:7px;align-items:center}.offline-tools button{padding:9px 11px;border:1px solid var(--stroke);border-radius:10px;background:white;font-size:12px;font-weight:700}.offline-tools #offline-remove{color:#b5335b}.offline-title{margin:10px 0 18px}.offline-title h1{margin:8px 0 6px;font-size:clamp(23px,6vw,30px)}
.offline-map-shell{position:relative;height:clamp(270px,65vh,520px);background:linear-gradient(90deg,transparent 24px,#eae4f1 25px,transparent 26px) 0 0/30px 30px,linear-gradient(0deg,transparent 24px,#eae4f1 25px,transparent 26px) 0 0/30px 30px,#f8f4fc;border:1px solid #dfd0ed;border-radius:20px;overflow:hidden}.offline-map-shell svg{display:block;width:100%;height:100%;touch-action:pan-x pan-y}.offline-map-caption{position:absolute;top:12px;left:12px;background:#ffffffd9;backdrop-filter:blur(6px);border:1px solid var(--stroke);border-radius:9px;padding:7px 9px;font-size:10px;letter-spacing:.04em;font-weight:850;color:var(--purple-2);max-width:calc(100% - 24px)}.offline-map-tools{position:absolute;bottom:12px;right:12px;display:flex;gap:8px}.offline-map-tools button{border:1px solid #dbcceb;border-radius:10px;background:white;padding:10px 12px;min-height:42px;color:var(--purple-2);font-size:12px;font-weight:800;box-shadow:0 4px 13px #35105022}.offline-map-tools button[aria-pressed="true"]{background:var(--purple);color:white}
.offline-deviation{margin-top:12px;padding:12px 15px;border-radius:12px;background:#fff0e8;border:1px solid #f5bea4;color:#9b3d17;display:grid;gap:4px}.offline-deviation strong{font-size:14px}.offline-deviation span{font-size:12px}.offline-stats{margin-top:15px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.offline-stats>div{background:white;border:1px solid var(--stroke);border-radius:13px;padding:11px 10px;min-width:0}.offline-stats span{display:block;font-size:10px;color:var(--muted);margin-bottom:7px;line-height:1.35}.offline-stats strong{font-size:16px;overflow-wrap:anywhere}.offline-progress{height:7px;border-radius:99px;background:#e9deef;margin-top:12px;overflow:hidden}.offline-progress span{display:block;width:0;height:100%;background:var(--purple);transition:width .3s}.offline-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:15px}.offline-actions button{min-height:48px;padding:12px 8px;border-radius:12px;background:#eee6f7;color:var(--purple-2);font-weight:800;font-size:14px}.offline-actions .offline-primary{background:var(--purple);color:white}.offline-status{margin:11px 0;color:var(--muted);font-size:13px;line-height:1.5;min-height:20px}
@media(max-width:430px){.offline-header{padding-inline:12px}.offline-main{padding:16px 12px max(28px,env(safe-area-inset-bottom))}.offline-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.offline-map-shell{height:min(50vh,380px)}.offline-map-caption{font-size:9px}.offline-brand{font-size:18px}}@media(pointer:coarse){.offline-tools button,.offline-map-tools button{position:relative}.offline-tools button::after,.offline-map-tools button::after{content:"";position:absolute;left:0;right:0;pointer-events:auto}.offline-tools button::after{top:-5px;bottom:-5px}.offline-map-tools button::after{top:-1px;bottom:-1px}}
@media(prefers-reduced-motion:reduce){.offline-progress span{transition:none}}