.network-vis.disruptive{flex:1.5;display:flex;align-items:center;justify-content:center;height:60px;margin:0;padding:0;position:relative;pointer-events:none}.vis-connection{width:100%;height:2px;background:#ffffff0d;position:relative;overflow:visible}.vis-line{position:absolute;top:50%;left:0;width:100%;height:1px;background:linear-gradient(90deg,transparent,rgba(102,126,234,.3),rgba(240,147,251,.3),transparent);transform:translateY(-50%)}.vis-particles{position:absolute;top:0;left:0;width:100%;height:100%}.particle{position:absolute;top:50%;width:4px;height:4px;border-radius:50%;transform:translateY(-50%);opacity:0;filter:blur(1px)}@keyframes flowForward{0%{left:0%;opacity:0}20%{opacity:1}80%{opacity:1}to{left:100%;opacity:0}}@keyframes flowBackward{0%{left:100%;opacity:0}20%{opacity:1}80%{opacity:1}to{left:0%;opacity:0}}@keyframes flowPing{0%{left:0%;opacity:0}20%{opacity:1}50%{left:100%}80%{opacity:1}to{left:0%;opacity:0}}.network-vis.pinging .particle{background:var(--accent-cyan);box-shadow:0 0 8px var(--accent-cyan),0 0 15px var(--accent-cyan);animation:flowPing 1.2s ease-in-out infinite}.network-vis.downloading .particle{background:var(--accent-pink);box-shadow:0 0 8px var(--accent-pink),0 0 15px var(--accent-pink);animation:flowBackward .8s linear infinite}.network-vis.uploading .particle{background:var(--accent-purple);box-shadow:0 0 8px var(--accent-purple),0 0 15px var(--accent-purple);animation:flowForward .8s linear infinite}.particle.p1{animation-delay:0s}.particle.p2{animation-delay:.15s}.particle.p3{animation-delay:.3s}.particle.p4{animation-delay:.45s}.particle.p5{animation-delay:.6s}.active-origin #node-origin{border-color:var(--accent-purple);box-shadow:inset 0 0 20px #667eea33,0 0 30px #667eea1a;background:#667eea0d}.active-destination #node-destination{border-color:var(--accent-pink);box-shadow:inset 0 0 20px #f093fb33,0 0 30px #f093fb1a;background:#f093fb0d}.active-origin #node-origin .node-icon,.active-destination #node-destination .node-icon{animation:iconPulse 1s infinite alternate}@keyframes iconPulse{0%{transform:scale(1);filter:drop-shadow(0 0 5px white)}to{transform:scale(1.1);filter:drop-shadow(0 0 15px white)}}#btn-screenshot{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);border-radius:12px;padding:8px 12px;font-size:1.25rem;cursor:pointer;transition:all .3s ease;display:flex;align-items:center;justify-content:center;color:#fff}#btn-screenshot:hover{background:#fff3!important;transform:scale(1.05)}#btn-screenshot:active{transform:scale(.95)}.screenshot-flash{position:fixed;top:0;left:0;width:100%;height:100%;background:#fff;opacity:0;pointer-events:none;z-index:9999;transition:opacity .3s ease}.screenshot-flash.active{opacity:.8}.toast{position:fixed;bottom:20px;left:50%;transform:translate(-50%) translateY(100px);background:#43e97b;color:#1a1a2e;padding:12px 24px;border-radius:50px;font-weight:600;box-shadow:0 5px 15px #0000004d;transition:transform .3s cubic-bezier(.175,.885,.32,1.275);z-index:10000;display:flex;align-items:center;gap:8px}.toast.show{transform:translate(-50%) translateY(0)}.screenshot-container{position:relative}.screenshot-menu{position:absolute;top:0;right:110%;min-width:180px;background:#1a1a2e;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:8px;visibility:hidden;opacity:0;transform:translate(10px);transition:all .2s ease;box-shadow:0 10px 30px #00000080;z-index:101}.screenshot-menu.active{visibility:visible;opacity:1;transform:translate(0)}.menu-item{display:flex;align-items:center;gap:10px;padding:10px 15px;color:#fff;background:none;border:none;width:100%;text-align:left;cursor:pointer;border-radius:8px;transition:background .2s;font-family:Inter,sans-serif;font-size:14px}.menu-item:hover{background:#ffffff1a}.menu-item span{font-size:16px}
