/* ════════════════════════════════
     TOPOLOGY VIEW
  ════════════════════════════════ */
  #topo-view { background: #0a0a0c; }
  #topo-container { cursor: grab; }
  #topo-container:active { cursor: grabbing; }

  .topo-toolbar {
    position: absolute; top: 12px; left: 12px; z-index: 10;
    display: flex; gap: 6px; align-items: center;
  }
  .topo-btn {
    background: var(--bg3); border: 1px solid var(--border2); border-radius: 4px;
    color: var(--text); cursor: pointer; font-family: 'Barlow Condensed', sans-serif;
    font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
    padding: 5px 10px; transition: all 0.15s; user-select: none;
  }
  .topo-btn:hover { border-color: var(--amber); color: var(--amber); }
  .topo-legend {
    position: absolute; bottom: 12px; right: 12px; z-index: 10;
    background: rgba(18,18,22,0.9); border: 1px solid var(--border);
    border-radius: 6px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px;
  }
  .topo-legend-item {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Barlow Condensed', sans-serif; font-size: 11px;
    font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
  }
  .topo-legend-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
  .topo-legend-line {
    width: 24px; height: 2px; flex-shrink: 0; border-radius: 1px;
  }
  .topo-node { cursor: grab; user-select: none; }
  .topo-node:active { cursor: grabbing; }