.account-topology-panel {overflow:hidden;--topology-glass:rgba(244,250,255,.48);--glass-rim:rgba(255,255,255,.88);--glass-depth:rgba(113,149,166,.23);--glass-shadow:rgba(37,74,97,.13)}
.theme-dark .account-topology-panel {--topology-glass:rgba(143,180,200,.1);--glass-rim:rgba(217,242,255,.22);--glass-depth:rgba(103,159,178,.19);--glass-shadow:rgba(0,0,0,.35)}
.account-topology-panel .panel-header {flex-wrap:wrap;gap:12px}
.topology-toolbar {display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px 0;color:var(--faint);font-size:11px}
.topology-legend {display:flex;flex-wrap:wrap;gap:16px}
.topology-legend span {display:inline-flex;align-items:center;gap:6px}
.topology-legend i,.topology-node-foot i {width:6px;height:6px;display:inline-block;border-radius:50%;background:var(--chart-accent);box-shadow:0 0 7px color-mix(in srgb,var(--chart-accent) 40%,transparent);flex:none}
.topology-legend .pending,.topology-node-foot .unknown {background:var(--faint);box-shadow:none}
.topology-legend .warning,.topology-node-foot .degraded {background:var(--warning);box-shadow:none}
.topology-node-foot .unreachable {background:var(--danger);box-shadow:none}
.topology-instructions {display:flex;align-items:center;gap:8px;min-height:50px;padding:12px 20px;color:var(--muted);font-size:12px}
.topology-instructions>svg {flex:none;color:var(--blue)}
.topology-instructions>span {flex:1;min-width:0}
.topology-instructions .button {flex:none}
.topology-viewport {position:relative;overflow:hidden;max-height:620px;overscroll-behavior:contain;touch-action:none;border-top:1px solid var(--border);border-bottom:1px solid var(--border);cursor:grab;background-color:var(--surface);background-image:linear-gradient(color-mix(in srgb,var(--border) 35%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--border) 35%,transparent) 1px,transparent 1px)}
.topology-viewport.dragging,.topology-viewport.dragging .topology-canvas {cursor:grabbing}
.topology-viewport.dragging * {user-select:none}
.topology-viewport:focus-visible {outline:2px solid var(--blue);outline-offset:-2px}
.topology-canvas {position:absolute;top:0;left:0;transform-origin:0 0;isolation:isolate}
.topology-wires {position:absolute;inset:0;pointer-events:none;overflow:visible}
.topology-edge {transition:opacity .16s ease}
.topology-edge.dimmed {opacity:.12}
.topology-edge path {fill:none}
.topology-edge .wire-halo {stroke:var(--chart-accent);stroke-width:3;opacity:.07;filter:blur(2px)}
.topology-edge .wire-stroke {stroke-width:1;opacity:.65;stroke-linecap:round;stroke-linejoin:round}
.topology-edge circle {fill:var(--surface);stroke:var(--chart-accent);stroke-width:1.25;filter:drop-shadow(0 0 3px color-mix(in srgb,var(--chart-accent) 30%,transparent));r:2.5px}
.topology-edge.pending .wire-stroke {stroke:var(--faint);stroke-dasharray:5 5;opacity:.6}
.topology-edge.pending circle {fill:var(--faint)}
.topology-edge.warning .wire-stroke {stroke:var(--warning)}
.topology-edge.warning circle {fill:var(--surface);stroke:var(--warning)}
.topology-edge.pending .wire-halo {opacity:0}
.topology-edge.warning .wire-halo {stroke:var(--warning);opacity:.08}
.topology-edge.pending circle {stroke:var(--faint);filter:none}
.topology-draft-wire {fill:none;stroke:var(--chart-accent);stroke-width:2;stroke-dasharray:5 5}
.topology-column-title {position:absolute;top:24px;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:11px;font-weight:500;letter-spacing:.025em}
.topology-column-title span {display:flex;align-items:center;gap:7px}
.topology-column-title small {padding:2px 6px;border-radius:5px;background:var(--surface-3);color:var(--faint)}
.topology-empty-column {position:absolute;padding:25px 12px;border:1px dashed var(--border-strong);border-radius:12px;text-align:center;color:var(--faint);font-size:12px}
/* Shared thin-coated material. Tune surface, cover, rim, side and contact
   shadow independently; the content layer always stays opaque and sharp. */
.topology-node {
 --panel-base:#f1f6fa;--panel-center:#eef4f8;--panel-light:#f5f9fc;
 --panel-cover-color:#fafcfe;--panel-cover-strength:.32;
 --panel-edge:#d4e5ef;--panel-rim:#fafcfe;--panel-edge-strength:.55;
 --panel-inner-halo:7px;--panel-rim-width:1px;--panel-radius:12px;
 --panel-outline:#c5d4df;--panel-side:#cad8e2;--panel-side-thickness:1.5px;
 --panel-contact-shadow:rgba(33,58,78,.14);
 --panel-text:#243746;--panel-muted:#5e7181;--panel-faint:#6b7d8c;
 --panel-icon:#287bbb;--panel-icon-base:rgba(214,231,241,.32);
 --panel-icon-border:rgba(139,177,198,.32);--panel-divider:rgba(143,171,191,.22);
 position:absolute;isolation:isolate;z-index:1;height:100px;
 border:1px solid var(--panel-outline);border-radius:var(--panel-radius);
 background:var(--panel-base);color:var(--panel-text);
 box-shadow:0 5px 9px -6px var(--panel-contact-shadow);
 transition:box-shadow .18s,border-color .18s,opacity .18s;overflow:visible;
}
.theme-dark .topology-node {
 --panel-base:#344358;--panel-center:#2e3b4e;--panel-light:#42566d;
 --panel-cover-color:#b1cddd;--panel-cover-strength:.16;
 --panel-edge:#8fbbd2;--panel-rim:#b1d8e7;--panel-edge-strength:.42;
 --panel-outline:#637e94;--panel-side:#536576;
 --panel-contact-shadow:rgba(0,0,0,.32);
 --panel-text:#edf4f9;--panel-muted:#c3d0dc;--panel-faint:#acbdce;
 --panel-icon:#a3cce4;--panel-icon-base:rgba(111,154,180,.10);
 --panel-icon-border:rgba(160,196,218,.25);--panel-divider:rgba(163,192,212,.16);
}
/* One thin solid side, with no second outline or separate stacked plate. */
.topology-node::before {content:"";position:absolute;inset:0 0 calc(-1 * var(--panel-side-thickness));z-index:-1;border-radius:inherit;background:var(--panel-side);pointer-events:none}
.topology-node-material {position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none;background:radial-gradient(ellipse at 46% 48%,var(--panel-center),var(--panel-base) 64%,var(--panel-light));}
/* Large, low-contrast coating reflection never affects the text or icons. */
.topology-node-material::before {content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(125deg,var(--panel-cover-color),transparent 46%,transparent 65%,color-mix(in srgb,var(--panel-cover-color) 30%,transparent));opacity:var(--panel-cover-strength);pointer-events:none}
/* Continuous rounded inner transition; the centre does not emit light. */
.topology-node-material::after {content:"";position:absolute;inset:0;border-radius:inherit;opacity:var(--panel-edge-strength);box-shadow:inset 0 0 0 var(--panel-rim-width) var(--panel-rim),inset 0 0 var(--panel-inner-halo) 1px var(--panel-edge),inset 2px 1px 4px color-mix(in srgb,var(--panel-rim) 35%,transparent);pointer-events:none}
.topology-node:hover,.topology-node:focus-within,.topology-node.target,.topology-node.illuminated {border-color:var(--chart-accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--chart-accent) 25%,transparent),0 5px 9px -6px var(--panel-contact-shadow)}
.topology-node.selected {border-color:var(--warning);box-shadow:0 0 0 2px color-mix(in srgb,var(--warning) 45%,transparent),0 5px 9px -6px var(--panel-contact-shadow)}
.topology-node.unavailable {border-style:dashed;--panel-cover-strength:.08;box-shadow:none}
.topology-node-select {position:relative;z-index:1;display:flex;align-items:center;gap:10px;width:100%;height:70px;border:0;background:none;padding:12px 15px;text-align:left;border-radius:12px 12px 0 0;cursor:pointer;color:var(--panel-text)}
.topology-node-select:focus-visible {outline:2px solid var(--blue);outline-offset:2px}
.connecting .topology-node-select,.connecting .topology-canvas {cursor:crosshair}
.topology-node-icon {background:var(--panel-icon-base);border:1px solid var(--panel-icon-border);width:32px;height:32px;display:grid;place-items:center;flex:none;border-radius:9px;color:var(--panel-icon)}
.topology-node-copy {min-width:0;display:flex;flex-direction:column;gap:3px}
.topology-node-copy strong {font-size:12px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topology-node-copy small {font-size:10px;color:var(--panel-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topology-node-copy code {color:var(--panel-faint);font-size:9px;white-space:nowrap}
.topology-plus {position:absolute;right:-13px;top:25px;width:26px;height:26px;display:grid;place-items:center;background:var(--topology-glass);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid color-mix(in srgb,var(--chart-accent) 50%,var(--border));border-radius:8px;color:var(--text);box-shadow:inset 0 1px 0 var(--glass-rim),0 3px 0 -1px var(--glass-depth),0 6px 12px -5px var(--glass-shadow);opacity:0;transform:translateX(-4px);transition:opacity .15s,transform .15s}
.topology-node:hover .topology-plus,.topology-node:focus-within .topology-plus,.topology-node.selected .topology-plus,.topology-node.target .topology-plus {opacity:1;transform:translateX(0)}
.topology-node-foot {position:relative;z-index:1;height:29px;display:flex;align-items:center;gap:9px;margin:0 14px;border-top:1px solid var(--panel-divider);color:var(--panel-muted);font-size:10px}
.topology-node-foot span {display:flex;align-items:center;gap:5px;flex:1}
.topology-node-foot small {font-size:9px}
.topology-node-foot a {display:grid;place-items:center;color:var(--panel-muted);width:20px;height:20px}
.topology-node-foot a:hover {color:var(--panel-icon)}
.topology-dialog {max-width:680px;min-width:0;width:calc(100vw - 32px)}
.topology-dialog .publish-dialog-body {display:grid;gap:16px;min-width:0}
.topology-dialog .relay-connectivity-field {margin:0;min-width:0}
.topology-dialog footer {display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.topology-path-summary {display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding:12px;border:1px solid var(--border);border-radius:9px;background:var(--surface-2);color:var(--text);font-size:12px}
.topology-path-summary span {display:flex;align-items:center;gap:8px;min-width:0}
.topology-path-summary strong {overflow-wrap:anywhere}
.topology-path-summary svg {flex:none;color:var(--blue)}
.topology-form-field {display:flex;flex-direction:column;gap:8px;font-size:12px;color:var(--muted);min-width:0}
.topology-form-field input {width:100%;border:1px solid var(--border-strong);border-radius:7px;padding:10px;color:var(--text);background:var(--surface)}
.topology-form-hint {margin:0;font-size:12px;line-height:1.6;color:var(--muted)}
.topology-task {display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 20px;border-top:1px solid var(--border);font-size:12px;background:color-mix(in srgb,var(--chart-accent) 6%,var(--surface))}
.topology-task>span {display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.topology-task a {display:flex;align-items:center;gap:3px;color:var(--blue);text-decoration:none;white-space:nowrap}
.topology-task.failed {color:var(--danger);background:color-mix(in srgb,var(--danger) 5%,var(--surface))}
@media(hover:none) {.topology-plus{opacity:1;transform:none}}
@media(max-width:640px) {.topology-toolbar{padding:12px 14px 0;flex-wrap:wrap}.topology-instructions{padding:12px 14px;align-items:flex-start}.topology-viewport{max-height:470px}.topology-dialog footer>.button{flex:1;min-width:100px}.topology-dialog .relay-connectivity-addresses{grid-template-columns:minmax(0,1fr)}.topology-dialog .relay-connectivity-arrow{transform:rotate(90deg);justify-self:center}.topology-task{padding:12px 14px}}
@media(prefers-reduced-motion:reduce) {.account-topology-panel *{transition:none!important}}
dialog.publish-dialog.topology-dialog.accessible-dialog {width:min(680px,calc(100vw - 32px));max-width:680px;min-width:0}
.account-topology-panel a.button,.topology-dialog a.button {text-decoration:none;color:var(--text)}
.topology-dialog a.button-primary {color:var(--surface)}
.theme-dark .topology-dialog a.button-primary {color:var(--bg)}
dialog.publish-dialog.topology-dialog.accessible-dialog[open] {display:flex;flex-direction:column;max-height:calc(100dvh - 40px);padding:0;overflow:hidden}
dialog.topology-dialog>header,dialog.topology-dialog>footer {flex:none}
dialog.topology-dialog>.publish-dialog-body {flex:1;min-height:0;overflow-y:auto}
dialog.topology-dialog>footer {margin-top:0}

.topology-view-controls {display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.topology-view-controls>small {margin-right:10px;white-space:nowrap}
.topology-view-controls>.button {display:grid;place-items:center;min-width:28px;width:28px;height:28px;padding:0;border:1px solid var(--border);border-radius:7px;box-shadow:inset 0 1px 0 var(--glass-rim);background:var(--surface)}
.topology-view-controls output {min-width:36px;text-align:center;color:var(--muted);font-size:10px;font-variant-numeric:tabular-nums}
.topology-gesture-hint {margin:0;padding:8px 20px 0;font-size:10px;color:var(--faint)}
@media(max-width:640px) {.topology-view-controls{width:100%;gap:7px}.topology-view-controls>small{flex:1;margin-right:0}.topology-view-controls>.button{width:30px;height:30px}.topology-gesture-hint{padding:9px 14px 0;line-height:1.6}}

.topology-edge.focused .wire-stroke {stroke-width:1.5;opacity:1}
.topology-edge.focused .wire-halo {opacity:.18}

.topology-wire-labels {position:absolute;z-index:2;transform:translate(-50%,-50%);width:56px;display:flex;flex-direction:column;pointer-events:none;}
.topology-wire-label {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;width:56px;min-height:24px;padding:3px 2px;border:1px solid var(--border-strong);border-radius:6px;background:var(--surface);color:var(--text);font-size:10px;font-variant-numeric:tabular-nums;line-height:1.1;white-space:nowrap;cursor:pointer;pointer-events:auto;box-shadow:0 2px 5px rgba(0,0,0,.06);}
.topology-wire-label small {font-size:8px;line-height:1.2;color:var(--muted);margin-top:2px;}
.topology-wire-label:has(small) {min-height:32px;}
.topology-wire-label+.topology-wire-label {margin-top:0;}
.topology-wire-label.degraded {color:var(--warning);border-color:color-mix(in srgb,var(--warning) 45%,var(--border));}
.topology-wire-label:hover {border-color:var(--chart-accent);background:var(--surface-2);}
.topology-wire-label:focus-visible {outline:2px solid var(--blue);outline-offset:2px;}
.topology-wire-label.unreachable {color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,var(--border));}
.topology-wire-label>span {max-width:100%;overflow:hidden;text-overflow:ellipsis;}