:root{--route-accent:#315da8;--route-tint:#eaf0fa}:root[data-theme=dark]{--route-accent:#a9c5f4;--route-tint:#202b3c}.route-toggle{display:flex;align-items:center;gap:6px;padding:9px 11px;font-size:11px;border:1px solid var(--line);border-radius:6px;background:var(--paper);color:var(--tone-8)}.route-toggle[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}.canvas-top:has(.route-toggle){gap:9px}.canvas-top:has(.route-toggle) .diagram-caption{display:none}.inspector.route-inspector{width:340px}.route-panel-top{padding:20px 19px 16px}.route-panel-top p{font-size:11px;color:var(--tone-7);margin-top:10px;line-height:1.7}.route-panel{padding:20px 18px}.route-endpoint{display:flex;align-items:center;gap:5px}.route-endpoint select{min-width:0;flex:1}.route-endpoint .icon-btn{flex:none;border:1px solid var(--line);height:34px;width:32px}.route-endpoint .icon-btn.active{background:var(--route-tint);border-color:var(--route-accent);color:var(--route-accent)}.route-endpoints{position:relative}.route-swap{display:block;margin:-5px auto 10px;font-size:18px;color:var(--tone-7);padding:0 12px}.route-summary{padding:13px 14px;border:1px solid var(--line);border-radius:6px;background:var(--tone-1);margin:18px 0 12px}.route-summary strong{font-size:12px;font-weight:500;display:block;line-height:1.7}.route-summary small{display:block;font:9px var(--mono);color:var(--tone-7);line-height:1.8;margin-top:5px}.route-state-compatible{border-color:var(--route-accent)}.route-state-blocked,.route-state-disconnected{border-color:var(--error)}.route-state-blocked strong,.route-state-disconnected strong{color:var(--error)}.route-tools-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px}.route-tools-row .btn{padding:7px 9px;font-size:10px;flex:1}.route-tool-tabs{display:flex;border:1px solid var(--line);background:var(--tone-1);border-radius:6px;padding:3px;gap:3px}.route-tool-tabs button{flex:1;padding:7px 6px;font-size:11px;color:var(--tone-7);border-radius:4px}.route-tool-tabs button[aria-pressed=true]{background:var(--paper);color:var(--ink);box-shadow:0 1px 3px #00000010}.route-simulation-note{font-size:10px;line-height:1.8;color:var(--tone-7);margin:12px 0}.route-scenario,.route-diagnostics{padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:13px}.route-scenario summary,.route-diagnostics summary{font-size:11px;cursor:pointer;color:var(--tone-8);line-height:1.7}.route-scenario[open] summary,.route-diagnostics[open] summary{margin-bottom:15px}.route-scenario p,.route-diagnostics p{font-size:10px;line-height:1.8;margin:10px 0}.route-scenario p{color:var(--tone-7)}.route-scenario .field-row{gap:6px}.route-scenario .field-row input{padding:8px 6px;font-size:11px}.route-scenario .field-row .field span{font-size:9px;line-height:1.6}.route-scenario .group-checkbox{align-items:flex-start;font-size:11px;line-height:1.7}.route-exclusions{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}.route-exclusions button{font-size:9px;border:1px solid var(--line);border-radius:4px;padding:6px;color:var(--warning);text-align:left;overflow-wrap:anywhere}.route-run{width:100%;justify-content:center;font-size:11px;margin:2px 0 14px}.route-console{white-space:pre-wrap;overflow-wrap:anywhere;font:10px/1.9 var(--mono);padding:14px;background:var(--tone-1);border:1px solid var(--line);border-radius:6px;margin:0 0 20px;color:var(--ink);max-height:350px;overflow:auto}.route-hops h3{font-size:12px;font-weight:550;margin:20px 0 12px}.route-hop{padding:13px;border:1px solid var(--line);border-radius:7px;margin-bottom:11px;background:var(--tone-1)}.route-hop.cut{border-color:var(--error)}.route-hop-heading{display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:10px}.route-hop-heading>span{font:8px/1.7 var(--mono);color:var(--tone-7);overflow-wrap:anywhere}.route-hop-device{display:block;text-align:left;width:100%;padding:2px 0}.route-hop-device strong{font-size:11px;font-weight:500;display:block;color:var(--ink)}.route-hop-device span{display:block;font:10px var(--mono);color:var(--tone-8);margin-top:6px}.route-hop-device small{display:block;font-size:10px;color:var(--tone-7);line-height:1.8;margin-top:4px;overflow-wrap:anywhere}.route-hop-arrow{color:var(--tone-6);margin:8px 0}.route-hop .text-link{display:flex;align-items:center;gap:6px;margin:13px 0 0}.route-scope{font-size:10px;line-height:1.8;color:var(--tone-7);margin:22px 0}.node.route-dim{opacity:.25}.edges g.route-dim{opacity:.2}.node.route-node{border:2px solid var(--route-accent);box-shadow:0 0 0 2px rgb(75 116 180 / .08)}.node.route-failed{border-color:var(--error)}.route-node-badge{position:absolute;top:-11px;left:-10px;min-width:22px;height:22px;padding:0 5px;border-radius:50%;background:var(--route-accent);color:var(--paper);font:10px var(--mono);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px var(--tone-1);pointer-events:none;z-index:5}.node.route-failed .route-node-badge{background:var(--error)}.edges g.route-edge .edge{stroke:var(--route-accent);stroke-width:3}.edges g.route-edge .edge-label{fill:var(--route-accent)}.edges g.route-cut .edge{stroke:var(--error);stroke-dasharray:7 5}.network-group.route-group{border-color:var(--route-accent);border-left-color:var(--route-accent);box-shadow:0 0 0 1px rgb(75 116 180 / .06)}.route-inspector .field select{font-size:11px}.route-inspector .field input{font-size:11px}.canvas-area:has(.route-picking){cursor:crosshair}
@media(max-width:1150px){.inspector.route-inspector{width:310px}.route-panel{padding:18px 15px}}@media(max-width:1000px){.workspace:has(.route-inspector)>.library{display:none}.inspector.route-inspector{width:300px}}@media(max-width:680px){.inspector.route-inspector{width:100%;position:static;box-shadow:none;border-left:0;border-top:1px solid var(--line);height:48%;min-height:230px;flex:none}.workspace:has(.route-inspector){flex-direction:column}.workspace:has(.route-inspector)>.canvas-area{flex:1;min-height:180px;width:100%}.route-panel-top{padding:12px 15px}.route-panel-top p{display:none}.route-panel{padding:15px}.route-panel-top .inspector-heading{font-size:12px}.route-endpoints{display:grid;grid-template-columns:1fr 1fr;gap:8px}.route-endpoints>.route-swap{display:none}.route-endpoints .field{margin-bottom:0}.route-toggle{font-size:10px;padding:7px 9px}.canvas-top .diagram-switch button{padding:6px 8px}.canvas-top{gap:6px}.route-summary{margin-top:12px}}