.topology{padding:24px;text-align:left}
.topo-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px}
.topo-header h2{font-size:20px;font-weight:600;line-height:1.4;margin:0;color:#192b25}
.topo-header p{font-size:12px;color:#64756c;margin:8px 0 0}
.topo-toggle{flex:none;border:1px solid #dce4dd;background:white;border-radius:7px;padding:8px 12px;min-height:40px;color:#3c5370;font:inherit;font-size:12px;cursor:pointer}
.topo-toggle:hover,.topo-toggle[aria-pressed=true]{background:#edf3ff;border-color:#bcccf0;color:#2348b8}
.topo-toggle:disabled{cursor:default;color:#64756c;background:#f7f9f7}
.topo-scroll{overflow-x:auto;scrollbar-color:#c8d4e3 #f5f8fb;margin-top:8px;border-radius:10px}
.topo-svg{display:block;font-family:inherit;overflow:visible}
.topo-boundary{fill:#f6f8fd;stroke:#c7d2e8;stroke-width:1;stroke-dasharray:6 5}
.topo-boundary-label{font-size:12px;font-weight:500;fill:#52678e}
.topo-node{cursor:pointer;outline:none;transform-box:fill-box;transform-origin:center;transition:opacity .22s}
.topo-node rect{fill:#fff;stroke:#c9d7ec;stroke-width:1;transition:fill .22s,stroke .22s,stroke-width .22s}
.topo-agent rect{fill:#eaf0ff;stroke:#9bb5ed}
.topo-name{text-anchor:middle;dominant-baseline:central;font-size:14px;font-weight:600;fill:#243e68;pointer-events:none}
.topo-sub{text-anchor:middle;dominant-baseline:central;font-size:11px;fill:#526c92;pointer-events:none}
.topo-edge{transition:opacity .22s;pointer-events:none}
.topo-line,.topo-signal{fill:none;stroke-width:1.5;stroke-linecap:round}
.topo-line{stroke:#9aabc7;transition:stroke .22s,stroke-width .22s}
.topo-signal{stroke:#3561df;stroke-width:2.5;stroke-dasharray:3 17;opacity:.6;animation:topoFlow 2.8s linear infinite;animation-delay:var(--edge-delay,0s);animation-play-state:paused}
.topo-edge text{font-family:inherit;font-size:11px;fill:#52678e}
.topo-visible .topo-signal{animation-play-state:running}
.topo-arrived .topo-node{animation:topoNodeIn .65s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--node-delay,0ms)}
.topo-node:hover rect,.topo-node:focus-visible rect,.topo-node.is-linked rect{stroke:#3561df;stroke-width:1.5;fill:#eff4ff}
.topo-node:focus-visible rect{stroke-width:2.5}
.topo-node.is-active rect{fill:#e3ecff;stroke-width:2}
.topo-edge.is-linked .topo-line{stroke:#3561df;stroke-width:2}
.topo-edge.is-linked .topo-signal{opacity:1;stroke-width:3}
.topology.has-focus .topo-edge:not(.is-linked){opacity:.35}
.topology.has-focus .topo-node:not(.is-linked):not(.is-active){opacity:.65!important}
.topo-paused .topo-signal{animation-play-state:paused}
.topo-readout{display:flex;align-items:baseline;gap:9px;padding:12px 14px;margin-top:12px;border:1px solid #dce6f6;border-radius:8px;background:#f6f9ff;font-size:12px;line-height:1.7;color:#34517c;min-height:48px}
.topo-status-dot{height:6px;width:6px;background:#3561df;flex:none;border-radius:50%;align-self:center}
.topology .cap{text-align:left;font-size:11px;line-height:1.8;margin-top:12px;color:#64756c}
.topo-mobile-hint{display:none}
@keyframes topoFlow{to{stroke-dashoffset:-80}}
@keyframes topoNodeIn{from{opacity:.35;translate:0 8px;scale:.97}to{opacity:1;translate:0 0;scale:1}}
@media(max-width:639px){.topology{padding:20px 16px}.topo-header{gap:12px}.topo-header h2{font-size:19px}.topo-header p{line-height:1.7}.topo-toggle{min-height:44px;padding:8px 10px}.topo-svg{min-width:580px}.topo-mobile-hint{display:block;font-size:11px;color:#64756c;margin:8px 0}.topo-readout{font-size:12px}}
@media(prefers-reduced-motion:reduce){.topo-signal{display:none}.topo-arrived .topo-node{animation:none!important;opacity:1;translate:none;scale:1}.topo-node,.topo-node rect,.topo-edge,.topo-line{transition:none}}