.mesh-wrap { position: relative; border-radius: 14px; border: 1px solid rgba(148, 163, 184, 0.16); background: radial-gradient(circle at 50% 40%, rgba(255, 215, 0, 0.08), rgba(0, 0, 0, 0.35)); overflow: hidden; } .mesh-svg { width: 100%; min-height: 520px; display: block; } .mesh-edge { stroke: rgba(0, 229, 255, 0.42); stroke-width: 1.6; fill: none; stroke-linecap: round; } .mesh-pulse { stroke: rgba(0, 229, 255, 0.9); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 3 140; animation: mesh-pulse 2.4s linear infinite; } @keyframes mesh-pulse { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -286; } } .mesh-node { cursor: pointer; } .mesh-node text { font-size: 12px; fill: #e2e8f0; font-weight: 600; text-anchor: middle; } .mesh-node circle { fill: #0f172a; stroke: rgba(148, 163, 184, 0.65); stroke-width: 2; } .mesh-node.healthy circle { stroke: #22c55e; } .mesh-node.warn circle { stroke: #f59e0b; } .mesh-node.idle circle { stroke: #38bdf8; } .mesh-node.offline circle { stroke: #64748b; } .mesh-herman circle.main { fill: #111827; stroke: #ffd700; stroke-width: 4; filter: drop-shadow(0 0 12px rgba(255, 215, 0, 0.6)); } .mesh-exec circle.main { fill: #0f172a; stroke-width: 3; } .mesh-ceo circle.main { stroke: #ff9f43; filter: drop-shadow(0 0 10px rgba(255, 159, 67, 0.5)); } .mesh-cto circle.main { stroke: #a855f7; filter: drop-shadow(0 0 10px rgba(168, 85, 247, 0.5)); } .mesh-exec circle.ring { fill: none; stroke: rgba(255, 255, 255, 0.15); stroke-width: 1.5; stroke-dasharray: 4 4; } .mesh-agent .mesh-status { fill: #64748b; } .mesh-herman circle.ring { fill: none; stroke: rgba(255, 215, 0, 0.35); stroke-width: 2; stroke-dasharray: 8 4; animation: mesh-herman-ring 7s linear infinite; transform-origin: center; } @keyframes mesh-herman-ring { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .mesh-legend { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 0.75rem; color: #94a3b8; font-size: 0.82rem; } .vtab-badge { display: inline-flex; min-width: 1.1rem; height: 1.1rem; padding: 0 0.35rem; margin-left: 0.35rem; border-radius: 999px; background: #f59e0b; color: #0a0e14; font-size: 0.65rem; font-weight: 700; align-items: center; justify-content: center; } .badge-warn { background: rgba(245, 158, 11, 0.2); color: #fbbf24; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.72rem; }