/* ===================== TOPOLOGY D3 GRAPH ===================== */
#topology-graph {
  width: 100%; height: 900px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; position: relative;
}
.topology-controls {
  display: flex; gap: 16px; align-items: center; margin-bottom: 12px;
  font-size: 14px; color: var(--text-muted);
}
.topology-controls label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
.topology-controls button {
  padding: 6px 14px; border-radius: 6px; font-size: 13px;
  background: var(--bg-card); border: 1px solid var(--border); color: var(--text);
  cursor: pointer;
}
.topology-controls button:hover { border-color: var(--accent); }

.topo-node { cursor: pointer; }
.topo-node circle { stroke-width: 2; }
.topo-node text {
  font-size: 11px; fill: var(--text); pointer-events: none;
  text-anchor: middle; dominant-baseline: central;
}
.topo-link { fill: none; stroke-width: 1.5; opacity: 0.5; }
.topo-link:hover { opacity: 1; stroke-width: 3; }
.topo-arrow { fill: var(--text-muted); }

.topo-tooltip {
  position: absolute; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 14px; font-size: 13px; pointer-events: none;
  display: none; z-index: 10; max-width: 260px; box-shadow: var(--shadow);
}
.topo-tooltip.visible { display: block; }