:root{--bg:#07111f;--card:#101b2e;--line:#263650;--text:#f8fafc;--muted:#9aa9bd;--gold:#f6c85f;--green:#34d399;--red:#fb7185;--blue:#60a5fa}
*{box-sizing:border-box}body{margin:0;background:linear-gradient(180deg,#06101e,#0d1727);color:var(--text);font-family:system-ui,-apple-system,Segoe UI,sans-serif}button,input,select{font:inherit}.netBanner{position:sticky;top:0;z-index:1400;text-align:center;background:#7c2d12;color:#fff7ed;padding:8px 12px;font-size:11px;font-weight:800;letter-spacing:.01em}.app{max-width:900px;margin:auto;padding:12px 12px 110px}header{position:sticky;top:0;z-index:1000;background:linear-gradient(180deg,#06101ffa,#06101fee,transparent);padding:8px 0 10px}.brandRow,.sectionHead{display:flex;align-items:center;justify-content:space-between;gap:12px}h1{font-size:22px;margin:0;letter-spacing:-.02em}.sub{font-size:12px;color:var(--muted);margin-top:2px}.tripBadge,.verifiedBadge{font-size:9px;letter-spacing:.1em;font-weight:900;border:1px solid #4a5b76;border-radius:999px;padding:6px 8px;color:#d8e3f3;background:#111c2f}.tabs,.filters{display:flex;gap:7px;overflow:auto;padding:9px 0;scrollbar-width:none}.tabs::-webkit-scrollbar,.filters::-webkit-scrollbar{display:none}.tab,.filter{white-space:nowrap;border:1px solid var(--line);background:#0d1728;color:#cbd5e1;border-radius:999px;padding:8px 11px;font-size:12px}.tab:disabled,.filter:disabled,.actions button:disabled{opacity:.35;cursor:not-allowed;filter:saturate(.4)}.active{background:var(--gold)!important;color:#111827!important;font-weight:900}.potterFilter:not(.active){border-color:#8a6c22;color:#ffe79a;background:#17140d}.card{background:#101b2efa;border:1px solid var(--line);border-radius:18px;padding:14px;margin:10px 0;box-shadow:0 10px 28px #0002}.heroCard{background:linear-gradient(145deg,#14243b,#101b2e 65%)}.eyebrow{font-size:11px;color:var(--gold);font-weight:900;letter-spacing:.08em}.hero{font-size:25px;font-weight:900;margin:4px 0;letter-spacing:-.02em}.meta,.small{font-size:12px;color:#cbd5e1;line-height:1.5}.chips,.links{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}.chip{font-size:10px;border:1px solid #3b4d69;border-radius:999px;padding:4px 7px;background:#0d1728}.green{color:#6ee7b7}.red{color:#fda4af}.gold{color:var(--gold)}.potter{color:#ffe79a;border-color:#8a6c22;background:#211a0c;font-weight:850}.actions{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:12px}.actions button,.btn{border:1px solid var(--line);background:#172239;color:#fff;border-radius:12px;padding:10px 6px;font-size:11px;min-height:42px}.actions button:hover:not(:disabled),.mapTools button:hover,.side button:hover{border-color:#526784}.primary{background:var(--gold)!important;color:#111827!important;font-weight:900}.smart{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}.smart label{display:block;font-size:11px;color:var(--muted);margin-bottom:4px}.smart input,.smart select{width:100%;background:#0d1728;color:#fff;border:1px solid var(--line);border-radius:10px;padding:10px}.inputWrap{position:relative}.inputWrap input{padding-right:38px}.inputWrap span{position:absolute;right:12px;top:10px;color:var(--muted);font-size:12px}.modeHint{font-size:11px;color:#aebed2;margin-top:9px;padding-top:9px;border-top:1px solid #22314a;line-height:1.45}.mapFilterStatus{font-size:10px;color:#8fa2b9;margin:-2px 0 8px;padding-left:2px}.navPanel{margin:0 0 10px;border:1px solid #8a6c22;background:linear-gradient(145deg,#1c2536,#17140d);border-radius:16px;padding:12px;box-shadow:0 10px 24px #0003}.navTop{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}.navName{font-size:18px;font-weight:900;margin-top:2px}.navArea,.navBearing{font-size:11px;color:#aebed2;line-height:1.4}.navStop{border:1px solid #7f1d1d;background:#321717;color:#fecaca;border-radius:10px;padding:8px 10px;font-size:10px;font-weight:800}.navReadout{display:flex;align-items:center;gap:12px;margin-top:10px;padding:10px;border-radius:12px;background:#0d1728;border:1px solid #334155}.navArrow{font-size:32px;line-height:1;transform-origin:center;transition:transform .25s ease;color:var(--gold);min-width:34px;text-align:center}.navDistance{font-size:17px;font-weight:900}.navActions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:8px}.navActions button,.popupNav{border:1px solid #425676;background:#16243b;color:#dbeafe;border-radius:9px;padding:8px 10px;font-size:10px;font-weight:750}.popupNav{margin-top:7px;cursor:pointer}#map{height:440px;border-radius:16px;border:1px solid #334155;background:#0b1728;overflow:hidden}.offlineBackup{margin-top:10px;border:1px solid #7c4a1d;background:linear-gradient(145deg,#24180d,#171514);border-radius:14px;padding:12px}.offlineTitle{font-size:14px;font-weight:900;color:#fed7aa;margin-bottom:3px}.offlineNext{margin-top:10px;padding:10px;border-radius:11px;background:#0f172a;border:1px solid #334155;font-size:12px;line-height:1.45}.offlineNext span{color:#cbd5e1}.offlineList{margin-top:8px;display:flex;flex-direction:column;gap:6px}.offlineRow{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 9px;border-radius:10px;background:#111827;border:1px solid #263650;cursor:pointer}.offlineRow.potterOffline{border-color:#70561d;background:#19150c}.offlineRow div{display:flex;flex-direction:column;min-width:0}.offlineRow b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.offlineRow span{font-size:10px;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.offlineRow strong{font-size:10px;color:var(--gold);white-space:nowrap}.mapLegend{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px;font-size:10px;color:#aebed2}.mapLegend span{border:1px solid #31445f;border-radius:999px;padding:4px 7px;background:#0d1728}.mapTools{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:8px}.mapTools button{border:1px solid var(--line);background:#172239;color:#fff;border-radius:12px;padding:10px;font-size:11px}.gpsMsg{margin-top:8px}.sectionTitle{display:flex;align-items:end;justify-content:space-between;gap:10px;font-weight:900;margin:18px 2px 8px;font-size:16px}.sectionTitle small{font-size:10px;color:var(--muted);font-weight:500}.list{display:flex;flex-direction:column;gap:8px}.item{display:grid;grid-template-columns:1fr auto;gap:8px;background:#0c1627;border:1px solid var(--line);border-radius:14px;padding:11px;cursor:pointer}.item:hover{border-color:#526784}.item.potterItem{border-color:#5f4b1e;background:linear-gradient(145deg,#111827,#17140d)}.item.done{opacity:.5}.name{font-weight:850}.side{display:flex;flex-direction:column;gap:6px}.side button,.link{border:1px solid #425676;background:#16243b;color:#dbeafe;border-radius:9px;padding:7px 9px;font-size:10px;text-decoration:none}.side .navBtn{background:var(--gold);color:#111827;border-color:#c69d38;font-weight:900}.transportLinks .link{padding:8px 10px}.accuracy{color:#9fb0c5}.footer{position:fixed;left:0;right:0;bottom:0;z-index:1200;background:#06101ff4;border-top:1px solid var(--line);padding:8px 10px;display:flex;gap:8px;justify-content:center;backdrop-filter:blur(12px)}.footer button{width:min(390px,48%);padding:13px;border-radius:14px;border:0;font-weight:900}.loc{background:var(--gold);color:#111827}.official{background:#172239;color:#fff;border:1px solid var(--line)!important}.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#101b2e;color:#fff}.mapFail{height:100%;display:grid;place-items:center;text-align:center;padding:30px;color:#dbeafe;background:linear-gradient(135deg,#12233d,#081424)}
@media(max-width:560px){.app{padding-left:9px;padding-right:9px}h1{font-size:20px}.tripBadge{display:none}#map{height:390px}.smart{grid-template-columns:1fr}.actions{grid-template-columns:1fr 1fr}.actions button:first-child{grid-column:1/-1}.mapTools{grid-template-columns:1fr 1fr}.mapTools button:last-child{grid-column:1/-1}.sectionTitle{align-items:start;flex-direction:column;gap:1px}.sectionTitle small{font-size:10px}.item{padding:10px}.side button{min-width:82px}.navActions{grid-template-columns:1fr}.navReadout{align-items:flex-start}}