.qr-network{position:relative;aspect-ratio:1.12;width:100%;margin:16px 0 20px;background:radial-gradient(circle at center,#fff 0,#eef4ec 45%,#e5eee4 100%);border:1px solid #e1e9df;border-radius:9px;isolation:isolate;overflow:hidden}.qr-network:before{content:'';position:absolute;inset:12%;border:1px dashed #bdceba;border-radius:50%;pointer-events:none}.qr-network:after{content:'';position:absolute;inset:24%;border:1px solid #d8e3d4;border-radius:50%;pointer-events:none}.qr-links{position:absolute;inset:0;width:100%;height:100%;z-index:0}.qr-link{fill:none;stroke:#a8bda1;stroke-width:1.3;stroke-dasharray:4 5}.qr-packet{fill:#df8b27;filter:drop-shadow(0 0 3px #ef9b46);offset-path:path('M 0 0 L 0 0');animation:packetPulse 3.6s ease-in-out infinite}.qr-packet:nth-of-type(2n){fill:#557d59}.qr-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:27%;aspect-ratio:1;background:#fff;border:1px solid #acc3a6;border-radius:12px;box-shadow:0 8px 30px #3c643c15;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center}.qr-hub:before{content:'';position:absolute;inset:-8px;border:1px solid #8eaf8155;border-radius:18px;animation:hubSignal 3.6s ease-out infinite}.qr-hub svg{width:62%;height:auto;aspect-ratio:1;fill:#2b4c38}.qr-hub strong{font:600 clamp(6px,.7vw,9px) 'DM Sans',sans-serif;letter-spacing:1px;margin-top:6px}.equipment-node{position:absolute;width:29%;height:23%;background:#ffffffd9;border:1px solid #cbdac5;border-radius:8px;padding:7px 4px;z-index:3;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;transition:background .25s,border-color .25s,box-shadow .25s}.equipment-node:hover,.equipment-node.active{background:white;border-color:#d4933f;box-shadow:0 4px 16px #b88b3020}.equipment-node svg{width:76%;height:70%;overflow:visible}.equipment-node span{font-size:clamp(6px,.68vw,9px);font-weight:550;line-height:1.2;text-align:center}.equipment-node.n0{left:35.5%;top:3%}.equipment-node.n1{right:3%;top:24%}.equipment-node.n2{right:7%;bottom:5%}.equipment-node.n3{left:7%;bottom:5%}.equipment-node.n4{left:3%;top:24%}.equipment-symbols{position:absolute;width:0;height:0;overflow:hidden}.network-control{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}.network-control p{font-size:9px;color:#49674e;line-height:1.5;margin:0}.network-control button{flex-shrink:0;background:transparent;border:1px solid #cad8c5;border-radius:4px;font-size:8px;padding:7px 9px}.network-paused *{animation-play-state:paused!important}.equipment-readout{display:flex;align-items:center;gap:9px;border:1px solid #d9e3d5;background:#f0f5ed;border-radius:5px;padding:10px 12px;font-size:10px;margin-bottom:18px;color:#3a5740}.equipment-readout:before{content:'';width:5px;height:5px;background:#588457;border-radius:50%;box-shadow:0 0 0 4px #58845713}.care-visual{min-height:580px}.care-card{width:100%;max-width:500px}.care-card .care-state{font-size:22px}.care-card .service-explanation{margin-top:12px}@keyframes hubSignal{0%{transform:scale(.95);opacity:.8}80%,100%{transform:scale(1.18);opacity:0}}@keyframes packetPulse{0%,8%{opacity:0}25%,80%{opacity:1}100%{opacity:0}}@media(max-width:720px){.qr-network{aspect-ratio:1.06}.equipment-node span{font-size:7px}.qr-hub strong{font-size:6px;letter-spacing:.5px}.equipment-node{padding:6px 2px}.care-visual{min-height:550px}.care-card .care-state{font-size:20px}.network-control p{font-size:8px}.equipment-readout{font-size:9px}}@media(prefers-reduced-motion:reduce){.qr-network *{animation:none!important}.qr-packet{display:none}}
