.topology-wrapper{position:relative;border-radius:10px;overflow:hidden;border:1px solid #1e293b}.topology-container{width:100%;height:560px;position:relative;background:radial-gradient(circle,rgba(226,232,240,.25) 1px,transparent 1px),linear-gradient(170deg,#0c1021,#111827,#0e1424);background-size:30px 30px,100% 100%}.topology-container canvas{outline:none}.topology-zoom-controls{position:absolute;bottom:14px;right:14px;display:flex;flex-direction:column;gap:1px;z-index:10}.topology-zoom-controls button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;background:#0f1424e6;border:1px solid rgba(148,163,184,.12);color:#94a3b880;font-size:12px;cursor:pointer;transition:color .15s,background .15s}.topology-zoom-controls button:first-child{border-radius:6px 6px 0 0}.topology-zoom-controls button:last-child{border-radius:0 0 6px 6px}.topology-zoom-controls button:hover{color:#94a3b8;background:#1e293be6}.topology-watermark{position:absolute;bottom:14px;left:14px;font-size:9px;font-weight:600;letter-spacing:1.5px;color:#94a3b833;z-index:10;pointer-events:none;-webkit-user-select:none;user-select:none}.topology-legend{display:flex;align-items:center;gap:24px;padding:10px 18px;background:#fff;border:1px solid var(--border-color);border-radius:8px;margin-top:12px;flex-wrap:wrap}.legend-section{display:flex;align-items:center;gap:8px}.legend-title{font-size:10px;font-weight:700;color:#94a3b8;text-transform:uppercase;letter-spacing:.6px}.legend-items{display:flex;gap:14px;flex-wrap:wrap;align-items:center}.legend-item{display:flex;align-items:center;gap:5px;font-size:11px;color:#64748b;font-weight:500}.legend-indicator{width:8px;height:8px;border-radius:50%;flex-shrink:0}.legend-indicator.running{background:#22c55e;box-shadow:0 0 4px #22c55e59}.legend-indicator.stopped{background:#64748b}.legend-indicator.pending{background:#eab308}.legend-indicator.error{background:#ef4444}.legend-indicator.sleeping{background:#06b6d4}.legend-line{width:20px;height:2px;border-radius:1px;flex-shrink:0}.legend-line.subnet-link{background:#64748b80}.legend-line.gateway-route{background:#06b6d4}.legend-divider{width:1px;height:16px;background:var(--border-color)}.topology-header-actions{display:flex;gap:4px;align-items:center}.topology-header-actions .btn{font-size:12px;padding:5px 12px;box-shadow:none!important}.topology-header-actions .btn:hover{box-shadow:none!important}.topology-context-menu{position:fixed;z-index:1000;min-width:180px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 8px 30px #0000001f,0 1px 3px #0000000f;padding:4px 0}.context-menu-header{padding:8px 12px;font-size:11px;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.4px;border-bottom:1px solid #f1f5f9;display:flex;align-items:center;gap:6px}.context-menu-header i{font-size:9px;color:#94a3b8}.context-menu-item{display:flex;align-items:center;gap:8px;padding:7px 12px;font-size:13px;color:#334155;cursor:pointer;transition:background .1s}.context-menu-item:hover{background:#f8fafc}.context-menu-item.danger:hover{background:#fef2f2}.context-menu-item i{width:15px;text-align:center;font-size:12px}.context-menu-item i.text-success{color:#22c55e!important}.context-menu-item i.text-danger{color:#ef4444!important}.context-menu-item i.text-info{color:#06b6d4!important}.context-menu-item i.text-warning{color:#d97706!important}.context-menu-item i.text-muted{color:#94a3b8!important}a.context-menu-item{text-decoration:none;color:#334155}.context-menu-submenu-wrap{position:relative}.context-menu-submenu-wrap>.context-menu-item{justify-content:flex-start}.context-menu-arrow{margin-left:auto;font-size:8px;color:#94a3b8}.context-menu-submenu{display:none;position:absolute;left:100%;top:-4px;min-width:160px;background:#fff;border:1px solid #e2e8f0;border-radius:0 8px 8px 0;box-shadow:0 8px 30px #0000001f,0 1px 3px #0000000f;padding:2px 0;z-index:1}.context-menu-submenu-wrap:hover>.context-menu-submenu{display:block}.submenu-flip .context-menu-submenu{left:auto;right:100%;border-radius:8px 0 0 8px}.context-menu-badge{margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.3px;padding:1px 5px;border-radius:3px;background:#f1f5f9;color:#64748b}.context-menu-badge.default{background:#dcfce7;color:#16a34a}.context-menu-divider{height:1px;background:#f1f5f9;margin:3px 0}.topology-tooltip{display:none}@media(hover:hover)and (pointer:fine){.topology-tooltip{display:block;position:fixed;z-index:1001;background:#1e293b;border:1px solid rgba(148,163,184,.15);border-radius:8px;padding:12px 14px;min-width:190px;max-width:260px;box-shadow:0 8px 24px #00000059;pointer-events:none}.topology-tooltip .tooltip-header{font-size:12px;font-weight:700;color:#f1f5f9;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid rgba(148,163,184,.1)}.topology-tooltip .tooltip-row{display:flex;justify-content:space-between;align-items:center;font-size:11px;color:#94a3b8;margin-bottom:4px;gap:10px}.topology-tooltip .tooltip-row span:first-child{font-size:10px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.3px}.topology-tooltip .tooltip-row code{background:#06b6d41a;padding:1px 6px;border-radius:3px;font-size:10px;color:#67e8f9;font-weight:500;font-family:var(--font-mono)}.topology-tooltip .tooltip-row .status-running{color:#22c55e;font-weight:600}.topology-tooltip .tooltip-row .status-stopped{color:#64748b;font-weight:600}.topology-tooltip .tooltip-row .status-pending{color:#eab308;font-weight:600}.topology-tooltip .tooltip-row .status-error{color:#ef4444;font-weight:600}.topology-tooltip .tooltip-hint{font-size:9px;color:#475569;margin-top:8px;padding-top:6px;border-top:1px solid rgba(148,163,184,.08);text-align:center;letter-spacing:.2px}}.topology-fullscreen{position:fixed!important;inset:0;z-index:9999;background:#0c1021;display:flex;flex-direction:column}.topology-fullscreen .content-header.topology-header-bar{display:flex;padding:10px 20px;margin:0;background:#0f172a;border-bottom:1px solid #1e293b;flex-shrink:0;z-index:10;position:relative}.topology-fullscreen .content-header.topology-header-bar h4{color:#e2e8f0}.topology-fullscreen .content-header.topology-header-bar .btn{color:#94a3b8;border-color:#334155}.topology-fullscreen .content-header.topology-header-bar .btn:hover{color:#e2e8f0;background:#1e293b}.topology-fullscreen .content-body{flex:1;display:flex;flex-direction:column;padding:0;overflow:hidden}.topology-fullscreen .info-banner{display:none}.topology-fullscreen .topology-wrapper{flex:1;margin:0;border-radius:0;border:none}.topology-fullscreen .topology-container{height:100%;border-radius:0}.topology-fullscreen .topology-legend{margin:0;border-radius:0;border:none;border-top:1px solid #1e293b;background:#0f172a;flex-shrink:0}.topology-fullscreen .topology-legend .legend-title{color:#475569}.topology-fullscreen .topology-legend .legend-item{color:#64748b}.topology-fullscreen .topology-legend .legend-divider{background:#1e293b}.topology-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:400px;color:#94a3b84d;gap:10px}.topology-empty i{font-size:40px}.topology-empty p{font-size:13px;font-weight:500}@media(max-width:768px){.topology-container{height:380px}.topology-legend{gap:12px;padding:8px 12px}.topology-header-actions{flex-wrap:wrap}}