.network-panel{background:#202d30;color:#f4f6ef;border:1px solid #303d40;border-radius:5px;overflow:hidden;padding:21px 22px 17px;position:relative;isolation:isolate;min-width:0}
.network-panel:before{content:'';position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#d9eeec06 1px,transparent 1px),linear-gradient(90deg,#d9eeec06 1px,transparent 1px);background-size:32px 32px}
.network-top,.network-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px;font:11px/1.6 var(--mono);color:#a3b5b7}
.network-top strong{font-weight:500;color:#e7ede8;display:flex;gap:9px;align-items:center}
.network-top strong:before{content:'';width:7px;height:7px;display:block;border-radius:2px;background:var(--lime);box-shadow:0 0 0 5px #ddf27c0d}
.network-top>span{font-size:10px}.network-map{height:270px;position:relative;margin:5px -2px 8px}
.network-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.route-base{fill:none;stroke:#52696a;stroke-width:1;vector-effect:non-scaling-stroke}
.route-flow{fill:none;stroke:#ddf27c;stroke-width:3;stroke-dasharray:3 72;opacity:.8;animation:bit-route 7s linear infinite;vector-effect:non-scaling-stroke}
.route-flow.blue{stroke:#9ea6ff;animation-duration:10s;animation-delay:-3s}.route-flow.white{stroke:#f0f4e9;animation-duration:9s;animation-delay:-5s}
.network-ring{position:absolute;left:48%;top:51%;width:140px;height:140px;transform:translate(-50%,-50%);border:1px dashed #ddf27c16;border-radius:50%;pointer-events:none}
.network-ring.outer{width:220px;height:220px;border-color:#ddf27c0c}
.network-core{position:absolute;left:48%;top:51%;transform:translate(-50%,-50%);width:64px;height:64px;border-radius:15px;background:var(--blue);box-shadow:0 0 0 12px #3545ed20,0 0 0 25px #3545ed09;z-index:2}
.network-core img{display:block;width:100%;height:100%;border-radius:15px}
.network-core:after{content:'';position:absolute;inset:-12px;border:1px solid #6874ff2b;border-radius:25px;animation:core-breathe 4s ease-in-out infinite;pointer-events:none}
.network-agent{position:absolute;transform:translate(-50%,-50%);padding:0;background:none;color:#c2cece;display:flex;flex-direction:column;align-items:center;gap:8px;z-index:3;font:10px/1.3 var(--mono);white-space:nowrap}
.network-agent .bit{width:14px;height:14px;border-radius:3px;background:#f2f5eb;box-shadow:0 0 0 5px #f2f5eb05;transition:box-shadow .2s,transform .2s}
.network-agent:hover .bit,.network-agent:focus-visible .bit{box-shadow:0 0 0 7px #ddf27c15;transform:scale(1.18)}
.network-agent.lime .bit{background:var(--lime)}.network-agent.receipt .bit{background:transparent;border:1px solid #a8bcbe;width:12px;height:12px;transform:rotate(45deg)}
.network-agent.scout{left:17%;top:27%}.network-agent.patch{left:81%;top:23%}.network-agent.draft{left:81%;top:78%}.network-agent.receipt{left:17%;top:77%}
.network-center-caption{position:absolute;left:48%;top:73%;transform:translateX(-50%);font:9px var(--mono);letter-spacing:.05em;color:#8e9fa1;white-space:nowrap}
.network-bottom{font-size:9px;border-top:1px solid #a3b5b711;padding-top:12px}.network-bottom span:last-child{color:#d9e7a0;letter-spacing:.08em}
.brand img{border-radius:8px}.footer strong{display:inline-flex;align-items:center;gap:7px}.footer strong img{height:22px;width:22px;border-radius:5px}
@keyframes bit-route{to{stroke-dashoffset:-300}}@keyframes core-breathe{50%{opacity:.25;transform:scale(1.12)}}
@media(max-width:1100px){.network-panel{padding:17px}.network-top{font-size:10px}.network-top>span{font-size:9px}.network-map{height:264px}}
@media(min-width:541px) and (max-width:800px){.network-top{flex-wrap:wrap;gap:3px}.network-top>span{font-size:9px}.network-core{width:48px;height:48px;border-radius:12px}.network-core img{border-radius:12px}.network-ring{width:110px;height:110px}.network-ring.outer{width:180px;height:180px}.network-agent{font-size:9px}.network-map{height:235px}.network-bottom{font-size:8px;gap:7px}}
@media(max-width:540px){.network-panel{padding:20px 16px 16px}.network-map{height:270px}.network-top{font-size:11px}.network-top>span{font-size:9px}.network-bottom{font-size:9px}.network-agent{font-size:10px}.network-ring.outer{width:220px;height:220px}}
@media(prefers-reduced-motion:reduce){.route-flow,.network-core:after{animation:none!important}.network-agent .bit{transition:none}}