.network-vis{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:400px;margin:0 auto 2rem;padding:0 1rem}.vis-endpoint{display:flex;flex-direction:column;align-items:center;gap:.5rem;z-index:2}.vis-icon-wrapper{width:50px;height:50px;background:#ffffff0d;border:1px solid rgba(255,255,255,.1);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.5rem;transition:all .3s ease}.vis-label{font-size:.8rem;color:var(--text-secondary)}.vis-connection{flex:1;height:4px;background:#ffffff0d;border-radius:2px;margin:0 1rem;position:relative;overflow:hidden}.vis-line{position:absolute;top:0;left:0;width:100%;height:100%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0px,rgba(255,255,255,.1) 4px,transparent 4px,transparent 8px)}.particle{position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;transform:translate(-50%,-50%);background:var(--text-primary);box-shadow:0 0 10px #fff;opacity:0}@keyframes downloadFlow{0%{left:100%;opacity:0}10%{opacity:1}90%{opacity:1}to{left:0%;opacity:0}}@keyframes uploadFlow{0%{left:0%;opacity:0}10%{opacity:1}90%{opacity:1}to{left:100%;opacity:0}}@keyframes pingFlow{0%{left:0%;opacity:0}20%{opacity:1}50%{left:100%}80%{opacity:1}to{left:0%;opacity:0}}.network-vis.downloading .particle{background:var(--accent-green);box-shadow:0 0 10px var(--accent-green);animation:downloadFlow 1s linear infinite}.network-vis.uploading .particle{background:var(--accent-purple);box-shadow:0 0 10px var(--accent-purple);animation:uploadFlow 1s linear infinite}.network-vis.pinging .particle{background:var(--accent-cyan);box-shadow:0 0 10px var(--accent-cyan);animation:pingFlow 1s ease-in-out infinite}.particle.p1{animation-delay:0s}.particle.p2{animation-delay:.33s}.particle.p3{animation-delay:.66s}.network-vis.downloading .server .vis-icon-wrapper,.network-vis.uploading .client .vis-icon-wrapper{border-color:var(--text-primary);background:#ffffff1a;box-shadow:0 0 15px #fff3}#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}