.topology-workspace{position:relative;min-width:0;overflow:hidden;background:var(--card)}
.topology-commandbar{position:relative;z-index:10;display:flex;min-height:58px;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--hair-soft);background:var(--card)}
.topology-search{position:relative;display:flex;width:172px;height:36px;flex:none;align-items:center}.topology-search>.ic{position:absolute;z-index:1;left:11px;color:var(--muted);font-size:14px;pointer-events:none}.topology-search input{width:100%;height:100%;padding:0 32px;border:1px solid var(--hair);border-radius:9px;background:var(--surface);color:var(--ink);font:540 11.5px var(--sans)}.topology-search input:focus{border-color:var(--accent);outline:2px solid color-mix(in srgb,var(--accent) 28%,transparent);outline-offset:1px}.topology-search button{position:absolute;z-index:2;right:4px;display:grid;width:28px;height:28px;padding:0;place-items:center;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer}.topology-search button:hover{background:var(--hover);color:var(--ink)}
.topology-command-group,.topology-command-actions{display:flex;height:36px;flex:none;align-items:stretch;overflow:hidden;border:1px solid var(--hair);border-radius:9px;background:var(--surface)}.topology-command-group button,.topology-command-actions button{display:inline-flex;min-width:0;align-items:center;justify-content:center;gap:6px;padding:0 10px;border:0;border-right:1px solid var(--hair-soft);background:transparent;color:var(--muted);font:580 10.5px var(--sans);white-space:nowrap;cursor:pointer}.topology-command-group button:last-child,.topology-command-actions button:last-child{border-right:0}.topology-command-group button:hover,.topology-command-actions button:hover{background:var(--hover);color:var(--ink)}.topology-command-group button.is-active,.topology-command-actions button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 5px color-mix(in srgb,var(--ink) 7%,transparent)}.topology-command-group button b{color:inherit;font-size: 11px;font-weight:650;font-variant-numeric:tabular-nums}.topology-command-group .ic,.topology-command-actions .ic{font-size:13px}.topology-command-actions{margin-left:auto}.topology-command-actions button{width:38px;padding:0}.topology-command-actions button span{display:none}.topology-command-actions button[aria-pressed="true"]{color:var(--accent-ink)}
.topology-dot{display:inline-block;width:7px;height:7px;flex:none;border-radius:50%;background:var(--muted)}.topology-dot.is-up{background:var(--good)}.topology-dot.is-degraded{background:var(--warn)}.topology-dot.is-down{background:var(--bad)}
.topology-status-short{display:none}
.topology-canvas-shell{position:relative;min-width:0;overflow:hidden;background:color-mix(in srgb,var(--surface) 68%,var(--card))}.topology-canvas-bar{position:relative;z-index:4;display:flex;min-height:48px;align-items:center;justify-content:space-between;gap:16px;padding:8px 14px;border-bottom:1px solid var(--hair-soft);background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:blur(10px)}.topology-canvas-bar>div:first-child{display:flex;align-items:baseline;gap:8px}.topology-canvas-bar strong{color:var(--ink);font-size:11px}.topology-canvas-bar span{color:var(--muted);font-size: 11px}.topology-canvas-actions{display:flex;align-items:center;gap:10px}.topology-canvas-actions button{display:inline-flex;height:31px;align-items:center;gap:6px;padding:0 10px;border:1px solid var(--hair);border-radius:8px;background:var(--card);color:var(--ink-2);font:600 10.5px var(--sans);cursor:pointer}.topology-canvas-actions button:hover{background:var(--hover)}.topology-drag-hint{display:inline-flex;align-items:center;gap:5px}.topology-drag-hint .ic{font-size:13px}
.topology-viewport{height:450px;overflow:auto;overscroll-behavior:contain;background:color-mix(in srgb,var(--surface) 72%,var(--card));cursor:grab;scrollbar-color:color-mix(in srgb,var(--muted) 24%,transparent) transparent}.topology-viewport.is-dragging{cursor:grabbing;user-select:none}.topology-viewport:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}.topology-stage{position:relative;width:960px;height:460px;transform-origin:0 0}.topology-stage::after{content:"";position:absolute;z-index:0;right:30px;bottom:16px;left:30px;height:104px;border:1px solid color-mix(in srgb,var(--muted) 15%,var(--hair));border-radius:18px;background:color-mix(in srgb,var(--card) 74%,transparent);box-shadow:0 10px 32px color-mix(in srgb,var(--ink) 3%,transparent);pointer-events:none}.topology-stage-caption{position:absolute;inset:17px 24px auto;z-index:1;display:flex;justify-content:space-between;color:color-mix(in srgb,var(--muted) 74%,transparent);font-size: 11px;font-weight:720;letter-spacing:.12em;text-transform:uppercase;pointer-events:none}.topology-stage-caption span:last-child{position:absolute;right:7px;top:398px}
.topology-viewport{height:430px}
.topology-links{position:absolute;inset:0;z-index:1;width:100%;height:100%;overflow:visible;pointer-events:none}.topology-link{fill:none;stroke:color-mix(in srgb,var(--muted) 42%,transparent);stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke;transition:opacity .16s ease,stroke .16s ease}.topology-link.is-down{stroke:var(--bad);stroke-width:2;stroke-dasharray:6 5}.topology-link.is-emphasized{stroke:var(--accent);opacity:1!important}.topology-link.is-emphasized.is-down{stroke:var(--bad)}.topology-link[hidden]{display:none}
.topology-node{position:absolute;z-index:2;left:var(--node-x);top:var(--node-y);display:flex;width:178px;align-items:center;gap:10px;padding:0;border:0;background:transparent;transform:translate(-50%,-50%);color:var(--ink);font-family:var(--sans);text-align:left;cursor:pointer;transition:opacity .16s ease}.topology-node:hover,.topology-node:focus-visible,.topology-node.is-selected{z-index:6;outline:0}.topology-node[hidden]{display:none}.topology-node-icon{position:relative;display:grid;width:46px;height:46px;flex:none;place-items:center;border:1px solid color-mix(in srgb,var(--muted) 26%,var(--hair));border-radius:14px;background:var(--card);color:var(--ink-2);box-shadow:0 7px 22px color-mix(in srgb,var(--ink) 8%,transparent);transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}.topology-node-icon>.ic{font-size:17px}.topology-node:hover .topology-node-icon,.topology-node:focus-visible .topology-node-icon,.topology-node.is-selected .topology-node-icon{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft),0 10px 25px color-mix(in srgb,var(--accent) 13%,transparent);transform:translateY(-2px)}.topology-node-icon::after{content:"";position:absolute;right:-3px;bottom:-3px;width:8px;height:8px;border:2px solid var(--card);border-radius:50%;background:var(--muted)}.topology-node.is-up .topology-node-icon::after{background:var(--good)}.topology-node.is-degraded .topology-node-icon::after{background:var(--warn)}.topology-node.is-down .topology-node-icon{border-color:color-mix(in srgb,var(--bad) 42%,var(--hair));box-shadow:0 0 0 3px var(--bad-soft),0 8px 22px color-mix(in srgb,var(--ink) 6%,transparent)}.topology-node.is-down .topology-node-icon::after{background:var(--bad)}.topology-node-icon>b{position:absolute;top:-7px;right:-7px;display:grid;min-width:18px;height:18px;padding:0 4px;place-items:center;border:2px solid var(--card);border-radius:10px;background:var(--bad);color:#fff;font-size: 11px}.topology-node-copy{display:grid;min-width:0;max-width:122px;gap:2px}.topology-node-copy strong,.topology-node-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topology-node-copy strong{font-size:11.5px;font-weight:660}.topology-node-copy small{color:var(--muted);font-size: 11px}
.topology-node.is-layer-3{width:62px;flex-direction:column;gap:5px}.topology-node.is-layer-3 .topology-node-icon{width:36px;height:36px;border-radius:11px;box-shadow:0 5px 15px color-mix(in srgb,var(--ink) 6%,transparent)}.topology-node.is-layer-3 .topology-node-icon .ic{font-size:15px}.topology-node.is-layer-3 .topology-node-copy{position:absolute;top:43px;left:50%;width:100px;transform:translateX(-50%);gap:0;text-align:center;opacity:0;pointer-events:none;transition:opacity .14s ease}.topology-node.is-layer-3 .topology-node-copy strong{font-size: 11px}.topology-node.is-layer-3 .topology-node-copy small{display:none}.topology-node.is-layer-3:hover .topology-node-copy,.topology-node.is-layer-3:focus-visible .topology-node-copy,.topology-node.is-layer-3.is-selected .topology-node-copy,.topology-workspace.is-showing-labels .topology-node.is-layer-3 .topology-node-copy{opacity:1}.topology-workspace.is-spotlighting.is-tracing .topology-node:not(.is-emphasized){opacity:.12}.topology-workspace.is-spotlighting.is-tracing .topology-link:not(.is-emphasized){opacity:.045}.topology-node.is-emphasized .topology-node-icon{border-color:color-mix(in srgb,var(--accent) 58%,var(--hair));box-shadow:0 0 0 4px var(--accent-soft),0 9px 22px color-mix(in srgb,var(--accent) 13%,transparent)}
.topology-zoom-dock{position:absolute;z-index:7;bottom:56px;left:14px;display:flex;height:34px;align-items:center;overflow:hidden;border:1px solid var(--hair);border-radius:9px;background:color-mix(in srgb,var(--card) 96%,transparent);box-shadow:0 8px 24px color-mix(in srgb,var(--ink) 8%,transparent);backdrop-filter:blur(8px)}.topology-zoom-dock button{display:grid;width:34px;height:34px;padding:0;place-items:center;border:0;background:transparent;color:var(--ink-2);cursor:pointer}.topology-zoom-dock button:hover{background:var(--hover)}.topology-zoom-dock span{width:45px;color:var(--muted);font-size: 11px;text-align:center;font-variant-numeric:tabular-nums}
.topology-inspector{position:absolute;z-index:8;top:64px;right:16px;width:236px;padding:18px;border:1px solid var(--hair);border-radius:14px;background:color-mix(in srgb,var(--card) 97%,transparent);box-shadow:0 18px 46px color-mix(in srgb,var(--ink) 15%,transparent);backdrop-filter:blur(14px)}.topology-inspector[hidden]{display:none}.topology-inspector:focus{outline:none}.topology-inspector:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}.topology-inspector-close{position:absolute;top:9px;right:9px;display:grid;width:28px;height:28px;padding:0;place-items:center;border:0;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer}.topology-inspector-close:hover{background:var(--hover);color:var(--ink)}.topology-inspector-heading{display:flex;align-items:center;gap:11px;padding-right:20px}.topology-inspector-heading>span{display:grid;width:38px;height:38px;flex:none;place-items:center;border-radius:11px;background:var(--accent-soft);color:var(--accent)}.topology-inspector-heading>div{min-width:0}.topology-inspector-heading span[data-topology-inspector-kind]{display:block;color:var(--muted);font-size: 11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.topology-inspector h3{overflow:hidden;margin:3px 0 0;color:var(--ink);font-size:14px;font-weight:660;text-overflow:ellipsis;white-space:nowrap}.topology-inspector dl{margin:16px 0;padding:5px 0;border-top:1px solid var(--hair-soft);border-bottom:1px solid var(--hair-soft)}.topology-inspector dl div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;font-size: 11px}.topology-inspector dt{color:var(--muted)}.topology-inspector dd{margin:0;color:var(--ink);font-weight:620;text-align:right}.topology-inspector .btn{width:100%;justify-content:center}
.topology-key{position:relative;z-index:5;display:flex;min-height:44px;align-items:center;flex-wrap:wrap;gap:9px 16px;padding:8px 14px;border-top:1px solid var(--hair-soft);background:var(--card);color:var(--muted);font-size: 11px}.topology-key span{display:inline-flex;align-items:center;gap:6px}.topology-key small{margin-left:auto;color:var(--muted);font-size: 11px}.topology-key i.is-link,.topology-key i.is-link-down{width:20px;height:0;border-top:2px solid color-mix(in srgb,var(--muted) 50%,transparent)}.topology-key i.is-link-down{border-color:var(--bad);border-top-style:dashed}
.topology-workspace.is-compact{min-height:0}.topology-workspace.is-compact .topology-commandbar,.topology-workspace.is-compact .topology-canvas-bar,.topology-workspace.is-compact .topology-key,.topology-workspace.is-compact .topology-zoom-dock{display:none}.topology-workspace.is-compact .topology-viewport{height:340px}.topology-workspace.is-compact .topology-node.is-layer-3 .topology-node-copy{opacity:0}
@media(max-width:900px){.topology-commandbar{display:grid;grid-template-columns:minmax(160px,1fr) auto auto;min-height:104px}.topology-search{width:100%}.topology-command-group:first-of-type{grid-column:2/4}.topology-command-group.is-layer{grid-column:1/3}.topology-command-actions{grid-column:3;margin-left:0;justify-self:end}.topology-viewport{height:430px}}
@media(max-width:680px){.topology-commandbar{grid-template-columns:minmax(0,1fr) auto;min-height:148px}.topology-search{grid-column:1/3}.topology-command-group:first-of-type{grid-column:1/3;justify-self:stretch}.topology-command-group:first-of-type button{flex:1;padding-right:6px;padding-left:6px}.topology-status-full{display:none}.topology-status-short{display:inline}.topology-command-group.is-layer{grid-column:1}.topology-command-group.is-layer button span{display:none}.topology-command-actions{grid-column:2}.topology-canvas-bar>div:first-child span,.topology-drag-hint{display:none}.topology-viewport{height:420px}.topology-inspector{right:10px;left:10px;width:auto}.topology-key{gap:8px 12px}.topology-key span:nth-of-type(n+4),.topology-key small{display:none}}
@media(prefers-reduced-motion:reduce){.topology-link,.topology-node,.topology-node-icon{transition:none}}

/* Full site map: use the entire viewport, separate the network fabric from
   endpoint groups, and keep device names readable at the fitted scale. */
.topology-workspace:not(.is-operations):not(.is-compact) .topology-viewport{height:560px;background:color-mix(in srgb,var(--surface) 60%,var(--card))}
.topology-workspace:not(.is-operations):not(.is-compact) .topology-stage{width:1240px;height:580px;margin-inline:auto;background:color-mix(in srgb,var(--surface) 48%,var(--card))}
.topology-workspace:not(.is-operations) .topology-stage::before{content:"";position:absolute;z-index:0;top:21%;right:20px;bottom:40%;left:20px;border-top:1px solid color-mix(in srgb,var(--muted) 16%,var(--hair));border-bottom:1px solid color-mix(in srgb,var(--muted) 16%,var(--hair));background:color-mix(in srgb,var(--card) 42%,transparent);pointer-events:none}
.topology-workspace:not(.is-operations) .topology-stage::after{display:none}
.topology-workspace:not(.is-operations) .topology-stage-caption{inset:0;display:block}
.topology-workspace:not(.is-operations) .topology-stage-caption span{position:absolute;right:auto;left:28px;color:color-mix(in srgb,var(--muted) 80%,transparent)}
.topology-workspace:not(.is-operations) .topology-stage-caption .is-edge{top:17px}
.topology-workspace:not(.is-operations) .topology-stage-caption .is-fabric{top:23%}
.topology-workspace:not(.is-operations) .topology-stage-caption .is-endpoints{top:59%}
.topology-workspace:not(.is-operations) .topology-endpoint-group{z-index:auto;box-sizing:border-box;padding:11px 14px;border-color:color-mix(in srgb,var(--muted) 20%,var(--hair));border-radius:13px;background:color-mix(in srgb,var(--card) 82%,transparent);box-shadow:0 8px 22px color-mix(in srgb,var(--ink) 3%,transparent)}
.topology-workspace:not(.is-operations) .topology-endpoint-group.is-unlinked{border-style:dashed;background:color-mix(in srgb,var(--surface) 70%,var(--card))}
.topology-workspace:not(.is-operations) .topology-endpoint-group>span,.topology-workspace:not(.is-operations) .topology-endpoint-group>b{position:relative;z-index:3;width:max-content;padding-right:4px;background:color-mix(in srgb,var(--card) 94%,transparent)}
.topology-workspace:not(.is-operations) .topology-endpoint-group>span{font-size:11.5px}
.topology-workspace:not(.is-operations) .topology-endpoint-group>b{font-size:10.5px}
.topology-workspace:not(.is-operations):not(.is-compact) .topology-node:not(.is-layer-3){width:206px;gap:12px}
.topology-workspace:not(.is-operations):not(.is-compact) .topology-node:not(.is-layer-3) .topology-node-icon{width:50px;height:50px;border-radius:13px}
.topology-workspace:not(.is-operations):not(.is-compact) .topology-node:not(.is-layer-3) .topology-node-copy{max-width:144px;gap:3px}
.topology-workspace:not(.is-operations):not(.is-compact) .topology-node:not(.is-layer-3) .topology-node-copy strong{font-size:12.5px}
.topology-workspace:not(.is-operations):not(.is-compact) .topology-node:not(.is-layer-3) .topology-node-copy small{font-size:11.5px}
.topology-workspace:not(.is-operations):not(.is-compact) .topology-node.is-layer-3{width:104px}
.topology-workspace:not(.is-operations):not(.is-compact) .topology-node.is-layer-3 .topology-node-icon{width:40px;height:40px;border-radius:11px}
.topology-workspace:not(.is-operations):not(.is-compact) .topology-node.is-layer-3 .topology-node-copy{top:47px;width:104px}
.topology-workspace:not(.is-operations):not(.is-compact) .topology-node.is-layer-3 .topology-node-copy strong{font-size:11.5px}

/* Dedicated Operations topology: a task canvas with grouped endpoint trays,
   not the legacy all-devices-on-one-line diagram. */
.topology-workspace.is-operations .topology-viewport{height:560px;background:color-mix(in srgb,var(--surface) 54%,var(--card));}
.topology-workspace.is-operations .topology-stage{width:1000px;height:620px;background:color-mix(in srgb,var(--surface) 54%,var(--card))}
.topology-workspace.is-operations .topology-stage::after{display:none}
.topology-workspace.is-operations .topology-stage-caption{inset:24px 28px auto}.topology-workspace.is-operations .topology-stage-caption .is-fabric,.topology-workspace.is-operations .topology-stage-caption .is-endpoints{display:none}
.topology-workspace.is-operations .topology-node:not(.is-layer-3){width:184px}.topology-workspace.is-operations .topology-node:not(.is-layer-3) .topology-node-icon{width:43px;height:43px;border-radius:12px}
.topology-workspace.is-operations .topology-node.is-layer-3{z-index:4}.topology-workspace.is-operations .topology-node.is-layer-3 .topology-node-icon{width:34px;height:34px;border-radius:10px;background:color-mix(in srgb,var(--card) 96%,var(--surface))}
.topology-workspace.is-operations .topology-node.is-layer-3 .topology-node-copy{top:40px;width:78px}.topology-workspace.is-operations.is-showing-labels .topology-node.is-layer-3 .topology-node-copy{opacity:1}
.topology-workspace.is-operations .topology-link{stroke:color-mix(in srgb,var(--muted) 52%,transparent);stroke-width:1.25}.topology-workspace.is-operations .topology-link.is-down{stroke:var(--bad);stroke-width:1.8}
.topology-endpoint-group{position:absolute;z-index:0;top:420px;height:162px;padding:14px 15px;border:1px solid color-mix(in srgb,var(--muted) 18%,var(--hair));border-radius:16px;background:color-mix(in srgb,var(--card) 85%,transparent);box-shadow:0 12px 34px color-mix(in srgb,var(--ink) 4%,transparent);pointer-events:none}.topology-endpoint-group>span,.topology-endpoint-group>b{display:block}.topology-endpoint-group>span{color:var(--ink-2);font-size: 11px;font-weight:680}.topology-endpoint-group>b{margin-top:2px;color:var(--muted);font-size: 11px;font-weight:540}
.topology-workspace.is-operations .topology-inspector{top:62px;right:14px;width:245px}.topology-workspace.is-operations .topology-zoom-dock{bottom:54px}.topology-workspace.is-operations .topology-key{min-height:40px}
@media(max-width:900px){.topology-workspace.is-operations .topology-viewport{height:530px}}