:root{--bg:#11151c;--panel:#1a212b;--inset:#0d1117;--line:#2b3542;--line-soft:#1e2630;--text:#e6edf3;--dim:#8b98a8;--on-accent:#03121f;--ok:#3fb950;--bad:#f85149;--warn:#d29922;--accent:#58a6ff;--pin:#bc8cff;--r-sm:8px;--r-md:12px;--shadow:0 2px 10px rgba(0,0,0,.55);--mono:ui-monospace,SFMono-Regular,Menlo,monospace;--fs:13px;--fs-sm:12px;--fs-xs:11px;--ctl:36px;--ctl-sm:30px;--side-w: clamp(300px, 32vw, 380px);--edge:10px;--clock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7.5' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M10 5.5V10l3 2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");color-scheme:dark}@media(pointer:coarse){:root{--fs:14px;--fs-sm:13px;--fs-xs:12px;--ctl:44px;--ctl-sm:40px}}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;font:var(--fs)/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text);height:100vh;height:100dvh;display:flex;overflow:hidden;-webkit-tap-highlight-color:transparent}#side{order:-1;flex:none;width:var(--side-w);background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}h1{font-size:14px;margin:0;padding:10px 14px;border-bottom:1px solid var(--line);letter-spacing:.3px;display:flex;flex-wrap:wrap;align-items:center;gap:0 8px}h1 .brand{flex:1 1 auto;display:flex;align-items:center;gap:9px}h1 .brand:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px #58a6ff40;flex:none}h1 small{flex:1 0 100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--dim);font-weight:400;font-size:var(--fs-sm);letter-spacing:0}h1 small:before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--dim);margin-right:7px;vertical-align:1px}h1 small[data-state=on]:before{background:var(--ok)}h1 small[data-state=on]{color:var(--text)}h1 small[data-state=bad]:before{background:var(--bad)}#sideToggle{display:none;align-self:center;font-size:15px}.tabs{display:flex;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none}.tabs::-webkit-scrollbar{display:none}.tab{flex:1 0 auto;padding:0 8px;font-size:var(--fs-sm);min-height:var(--ctl);display:flex;align-items:center;justify-content:center;white-space:nowrap;cursor:pointer;color:var(--dim);border-bottom:2px solid transparent;user-select:none}.tab.active{color:var(--text);border-bottom-color:var(--accent)}.pane{display:none;padding:12px 14px;overflow-y:auto;flex:1}.pane.active{display:block}#pane-progress.active{display:flex;flex-direction:column}.row{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px}label{color:var(--dim)}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}input[type=number],input[type=text],select{font:inherit;background:var(--inset);color:var(--text);border:1px solid var(--line);border-radius:var(--r-sm);padding:0 8px;width:80px;min-height:calc(var(--ctl) - 6px)}select{appearance:none;-webkit-appearance:none;padding-right:26px;background:var(--inset) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238b98a8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 9px center / 10px 6px}input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}@media(pointer:coarse){input[type=number],input[type=text],select{font-size:16px}}button{font:inherit;font-weight:600;background:var(--accent);color:var(--on-accent);border:0;border-radius:var(--r-sm);padding:0 14px;min-height:var(--ctl);cursor:pointer;width:100%}button.ghost{background:transparent;color:var(--text);border:1px solid var(--line)}button.danger{border-color:var(--bad);color:var(--bad)}button:disabled{opacity:.45;cursor:not-allowed}.card{background:var(--inset);border:1px solid var(--line);border-radius:var(--r-md);padding:12px;margin-bottom:10px}.muted{color:var(--dim)}dialog#settingsDialog{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 14px 0;width:min(360px,92vw);max-height:calc(100dvh - 40px);overflow-y:auto}dialog#settingsDialog::backdrop{background:#00000080}dialog#settingsDialog input[type=number],dialog#settingsDialog select{width:100px}dialog#settingsDialog .row>label{display:flex;align-items:center;min-width:0}.dialog-actions{position:sticky;bottom:0;display:flex;gap:8px;margin:0 -14px;padding:10px 14px 14px;background:var(--panel);border-top:1px solid var(--line)}.dialog-actions button{flex:1}.info{cursor:help;color:var(--dim);border:1px solid var(--line);border-radius:50%;width:16px;height:16px;font-size:0;text-align:center;display:inline-block;margin-left:6px;flex:none}.info:before{content:"i";font:italic 600 11px/14px Georgia,serif}.info:hover,.info:focus-visible{color:var(--text);border-color:var(--dim)}@media(pointer:coarse){.info{position:relative}.info:after{content:"";position:absolute;inset:-14px}}.info-note{font-size:var(--fs-sm);color:var(--dim);background:var(--inset);border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;margin:-2px 0 10px}.hop{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px solid var(--line-soft);font-variant-numeric:tabular-nums}.hop:last-child{border-bottom:0}#log{font-family:var(--mono);font-size:var(--fs-xs);flex:1;min-height:120px;overflow-y:auto}#log div{padding:1px 0;border-bottom:1px solid var(--line-soft)}.t-ok{color:var(--ok)}.t-bad{color:var(--bad)}.t-warn{color:var(--warn)}.chip{display:inline-block;padding:1px 7px;border-radius:999px;font-size:var(--fs-xs);background:#21262d;color:var(--dim);margin-left:6px}ol{margin:6px 0 0;padding-left:20px}.manual-hop{margin-bottom:4px}.manual-hop.dragging{opacity:.4}.manual-hop.drag-over{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}.hop-row{display:flex;align-items:center;justify-content:space-between;gap:6px;cursor:grab}.hop-row:active{cursor:grabbing}.drag-handle{color:var(--dim)}.del-hop{width:auto;min-height:0;background:transparent;border:0;color:var(--dim);cursor:pointer;padding:0 4px;font-size:13px;line-height:1.4}.del-hop:hover{color:var(--bad)}.route-plan{position:relative;padding-left:14px}.route-plan:before{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:2px;background:#39465a;border-radius:1px}.plan-fixed{display:flex;align-items:center;gap:6px;padding:3px 0}.plan-fixed .chip{margin-left:0}.plan-icon{flex:0 0 16px;margin-left:-17px;text-align:center;font-size:12px;line-height:1.4;background:var(--inset)}.plan-dest{font-weight:600}.plan-dest.muted{font-weight:400}.plan-gap{font-size:10px;color:var(--dim);font-style:italic;padding:2px 0 2px 2px}.route-plan ol{margin:2px 0;padding-left:16px}.route-plan ol li::marker{color:var(--pin);font-weight:600}#connectBar{padding:10px 14px;border-bottom:1px solid var(--line);flex:0 1 auto;min-height:0;max-height:40%;overflow-y:auto}.connect-row{display:flex;gap:8px}.connect-row button{flex:1}.tcp-row{margin-top:8px;flex-wrap:wrap}.tcp-row select{flex:1 1 100%;min-width:0}.tcp-row select[hidden],.tcp-row[hidden]{display:none}.connect-row input{width:auto;flex:1 1 0;min-width:0}.connect-row #tcpPort{flex:0 0 4.5rem}.connect-row #tcpGo{flex:0 0 auto;width:auto}.connect-note{margin-top:8px;font-size:var(--fs-sm)}.connect-error{padding:8px 10px;border:1px solid var(--bad);border-radius:var(--r-sm);background:#f8514914}.connect-error[hidden]{display:none}.ce-msg{color:var(--bad);font-weight:600;overflow-wrap:anywhere}.ce-hint{color:var(--dim);margin-top:4px}.ce-hint:empty{display:none}.pane>button{margin-bottom:8px}.btn-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.btn-row>button{flex:1 1 150px}.cta{position:sticky;bottom:0;margin:0 -14px -12px;padding:10px 14px 12px;background:linear-gradient(to bottom,transparent,var(--panel) 10px)}.card-title{font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:8px}.hint{border-left:2px solid var(--line);padding-left:10px;font-size:var(--fs-sm);color:var(--dim);margin-bottom:10px}.route-actions{display:flex;gap:6px;margin-top:8px}.route-actions button{flex:1;min-height:0;padding:6px 8px;font-size:var(--fs-sm)}.pathstr{display:block;margin-top:6px;padding:5px 7px;background:var(--inset);border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--fs-xs);font-family:var(--mono);color:var(--text);user-select:all;overflow-wrap:anywhere}#stage{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;container:stage / inline-size}#map{flex:1 1 0;min-height:0;container:map / size}#hud,#measureCtl,#legend,.rail-group{background:#1a212bf0;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow);font-size:var(--fs-xs)}#overlay{position:absolute;z-index:2;inset:var(--edge) var(--edge) 36px;display:flex;gap:8px;pointer-events:none}#overlayMain{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:flex-end;gap:8px}#overlay :is(#pickHintPill,#hud,#measureCtl,#legend,#viewctl){pointer-events:auto}#activity{display:flex;flex-direction:column;align-items:flex-start;gap:8px;flex:0 1 auto;min-height:0;min-width:0;max-width:100%;overflow-y:auto;margin-bottom:auto;scrollbar-width:none}#activity::-webkit-scrollbar{display:none}#activity>*{max-width:100%}#pickHintPill{background:var(--accent);color:var(--on-accent);border-radius:16px;padding:5px 14px;font-size:var(--fs-xs);font-weight:600;box-shadow:var(--shadow);pointer-events:none!important}#pickHintPill[hidden],#measureCtl[hidden],#hud[hidden]{display:none}#hud{padding:7px 12px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;cursor:pointer}#hudPhase{display:flex;align-items:center;gap:6px;white-space:nowrap}#hudIcon{font-size:14px;line-height:1}#hudLabel{color:var(--dim)}#hudChain{display:flex;align-items:center;gap:0;overflow:hidden;min-width:0}#hudChain .bead{width:9px;height:9px;border-radius:50%;flex:none;border:1px solid var(--inset)}#hudChain .link{width:9px;height:2px;flex:none;background:var(--line)}#hudChain .bead.self{background:#fff}#hudChain .bead.ok{background:var(--ok)}#hudChain .bead.dest{background:transparent;border:2px solid var(--dim)}#hudChain .bead.checking{background:var(--ok);animation:blink .55s steps(1) infinite}#hudChain .bead.probing{background:var(--pin);animation:beat .7s ease-in-out infinite}#hudChain .bead.shortcut{background:#39c5cf;animation:beat .7s ease-in-out infinite}#hudMeta{color:var(--dim);font-variant-numeric:tabular-nums;white-space:nowrap}@keyframes blink{50%{opacity:.15}}@keyframes beat{50%{transform:scale(1.7)}}#measureCtl{padding:8px 10px;width:min(260px,100%);display:flex;flex-direction:column}.mc-head{display:flex;align-items:center;gap:8px}.mc-title{flex:1;font-weight:600}#measureCtl select{width:auto;min-height:var(--ctl-sm);padding:0 24px 0 8px;font-size:var(--fs-xs)}#measureStop{min-width:var(--ctl-sm);min-height:var(--ctl-sm);font-size:14px}#measureInfo{margin-top:6px;font-variant-numeric:tabular-nums;overflow-y:auto;min-height:0;max-height:24dvh;max-height:26cqh}#measureInfo .row{margin-bottom:4px}#measureInfo .total{font-weight:600;border-top:1px solid var(--line);padding-top:4px;margin-top:2px}#viewctl{flex:none;align-self:flex-start;display:flex;flex-direction:column;gap:8px}.rail-group{display:flex;flex-direction:column;overflow:hidden}.rail-btn{width:var(--ctl-sm);min-height:0;height:var(--ctl-sm);padding:0;border-radius:0;background:transparent;color:var(--text);display:flex;align-items:center;justify-content:center}.rail-btn+.rail-btn{border-top:1px solid var(--line)}.rail-btn:hover{background:#ffffff12}.rail-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.rail-btn[aria-pressed=true]{background:var(--accent);color:var(--on-accent)}#compassBtn svg{transform:rotate(var(--bearing, 0deg));stroke:none}#compassBtn .n{fill:#e53935}#compassBtn .s{fill:#c8ccd0}#legend{display:none;max-width:480px;padding:8px 12px;flex:0 1 auto;min-height:0;overflow-y:auto;grid-template-columns:repeat(auto-fill,minmax(136px,1fr));gap:6px 12px}#legend.open{display:grid}#legend span{display:flex;align-items:center;gap:6px}#legend i{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}#mapbar{flex:none;display:flex;align-items:center;gap:4px 12px;padding:6px var(--edge);min-height:calc(var(--ctl-sm) + 12px);background:var(--panel);border-top:1px solid var(--line);font-size:var(--fs-xs)}.bar-filter{display:flex;align-items:center;gap:6px;white-space:nowrap;flex:none}.bar-filter select{width:auto;min-height:var(--ctl-sm);padding:0 24px 0 8px;font-size:var(--fs-xs)}.bar-status{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:0 6px}.bar-text{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bar-text:has(#mapdata.bad){white-space:normal}#refreshNodes{min-width:var(--ctl-sm);min-height:var(--ctl-sm);font-size:16px}#legendToggle{flex:none;margin-left:auto;min-height:var(--ctl-sm);padding:0 10px;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--text);font-size:var(--fs-xs);font-weight:600}#legendToggle:after{content:"\25b4";margin-left:6px;color:var(--dim)}#legendToggle[aria-expanded=true]:after{content:"\25be"}#legendToggle[aria-expanded=true]{background:#ffffff12}.linkbtn{width:auto;min-height:0;background:transparent;border:0;color:var(--dim);cursor:pointer;padding:0 2px;font-size:13px;line-height:1}.linkbtn:hover:not(:disabled){color:var(--text)}.linkbtn:disabled{opacity:.5;cursor:default}.linkbtn.spin{animation:spin 1s linear infinite;display:inline-block}@keyframes spin{to{transform:rotate(360deg)}}#mapdata.warn{color:var(--warn)}#mapdata.bad{color:var(--bad)}.maplibregl-ctrl-attrib{background:transparent!important}.maplibregl-ctrl-attrib.maplibregl-compact{margin:0 var(--edge) 6px 0!important}.maplibregl-ctrl-attrib,.maplibregl-ctrl-attrib a{color:var(--dim)!important;font-size:10px}#map>.maplibregl-ctrl-scale{position:absolute;bottom:6px;left:var(--edge);z-index:1;margin:0!important;background:#1a212bb3!important;color:var(--dim)!important;border:1px solid var(--dim)!important;border-top:none!important;font-size:10px;border-radius:0 0 3px 3px;padding:2px 8px!important}.maplibregl-popup-content{background:var(--panel);color:var(--text);font-size:var(--fs-sm);border:1px solid var(--line);border-radius:var(--r-sm);padding:6px 10px;box-shadow:var(--shadow)}.maplibregl-popup-tip{border-top-color:var(--panel)}.disambig-title{font-size:var(--fs-xs);color:var(--dim);margin-bottom:5px;white-space:nowrap}.disambig-item{display:block;width:100%;min-height:var(--ctl-sm);text-align:left;background:transparent;border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 8px;margin-bottom:4px;color:var(--text);cursor:pointer;font:inherit;font-weight:400;white-space:nowrap}.disambig-item:last-child{margin-bottom:0}.disambig-item:hover{border-color:var(--accent)}@container stage (max-width: 560px){#mapbar{gap:4px 8px;flex-wrap:wrap}#mapbar:has(#mapdata.bad) .bar-status{order:3;flex:1 0 100%}.bar-filter .lbl{display:none}.bar-filter:before{content:"";width:16px;height:16px;flex:none;background:var(--dim);-webkit-mask:var(--clock) center / contain no-repeat;mask:var(--clock) center / contain no-repeat}}@container map (max-height: 380px){#measureInfo{max-height:14cqh}}@container map (max-height: 480px){#overlayMain:has(#legend.open) #activity{display:none}}@container map (max-height: 220px){#overlay{display:none}}@media(max-width:900px)and (orientation:portrait){body{flex-direction:column}#side{order:0;width:100%;flex:none;height:clamp(240px,46dvh,500px);border-right:0;border-top:1px solid var(--line);border-radius:var(--r-md) var(--r-md) 0 0;box-shadow:0 -4px 16px #00000059}#side.expanded{height:88dvh}body:has(#side.expanded) #mapbar{display:none}@media(max-height:600px){#side{height:max(240px,42dvh)}#side.expanded{height:88dvh}}#sideToggle{display:inline-flex;align-items:center;justify-content:center;width:var(--ctl);min-height:var(--ctl);margin:-8px -8px -8px 0}dialog#settingsDialog{width:100%;max-width:none;margin:auto 0 0;border-bottom:0;border-radius:var(--r-md) var(--r-md) 0 0;max-height:88dvh}}@media(max-width:340px){.tab{padding:0 5px}}@media(orientation:landscape)and (max-height:500px){:root{--side-w:clamp(340px, 42vw, 420px)}h1{padding:6px 12px}#connectBar{padding:8px 12px}}