/* srv-network.css */
.network-canvas {
  position:relative;min-height:385px;border-radius:28px;background:
    linear-gradient(180deg,rgba(7,12,28,.45),rgba(7,12,28,.88)),
    radial-gradient(circle at 50% 50%,rgba(255,102,0,.12),transparent 28%),
    url('https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&w=1600&q=80') center/cover;
  border:1px solid rgba(255,255,255,.10);overflow:hidden;
}
.net-node.core { left:50%;top:46%;transform:translate(-50%,-50%);background:linear-gradient(180deg,rgba(255,102,0,.24),rgba(255,255,255,.05));border-color:rgba(255,102,0,.36); }
.net-node.up1 { left:9%;top:13%; }
.net-node.up2 { right:9%;top:13%; }
.net-node.edge1 { left:10%;bottom:13%; }
.net-node.edge2 { right:10%;bottom:13%; }
.net-node.noc { left:50%;bottom:8%;transform:translateX(-50%); }

.pipe.p1 { width:360px;transform:rotate(-150deg); }
.pipe.p2 { width:360px;transform:rotate(-30deg); }
.pipe.p3 { width:340px;transform:rotate(145deg); }
.pipe.p4 { width:340px;transform:rotate(35deg); }
.pipe.p5 { width:245px;transform:rotate(90deg); }
.ring { position:absolute;left:26%;right:26%;top:22%;height:210px;border:1px dashed rgba(90,174,255,.36);border-radius:50%;background:radial-gradient(ellipse at center,rgba(90,174,255,.06),transparent 70%); }

/* topology-map overrides */
.topology-map { background:rgba(7,12,28,.62); }
.zone {
  position:absolute;border-radius:28px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);
  padding:16px;color:var(--muted2);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.z1 { left:24px;top:24px;width:28%;height:180px; }
.z2 { right:24px;top:24px;width:28%;height:180px; }
.z3 { left:24px;bottom:24px;right:24px;height:180px; }

.map-node.internet { left:50%;top:32px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(90,174,255,.22),rgba(255,255,255,.05)); }
.map-node.border1 { left:34%;top:138px; }
.map-node.border2 { right:34%;top:138px; }
.map-node.core1 { left:37%;top:250px;background:linear-gradient(180deg,rgba(255,102,0,.24),rgba(255,255,255,.05));border-color:rgba(255,102,0,.35); }
.map-node.core2 { right:37%;top:250px;background:linear-gradient(180deg,rgba(255,102,0,.24),rgba(255,255,255,.05));border-color:rgba(255,102,0,.35); }
.map-node.access1 { left:11%;bottom:54px; }
.map-node.access2 { left:39%;bottom:54px; }
.map-node.access3 { right:11%;bottom:54px; }

.map-link.l1 { left:50%;top:96px;width:150px;transform:rotate(143deg); }
.map-link.l2 { left:50%;top:96px;width:150px;transform:rotate(37deg); }
.map-link.l3 { left:39%;top:198px;width:125px;transform:rotate(62deg); }
.map-link.l4 { right:39%;top:198px;width:125px;transform:rotate(118deg); }
.map-link.l5 { left:44%;top:312px;width:164px;transform:rotate(0deg); }
.map-link.l6 { left:42%;top:322px;width:320px;transform:rotate(158deg); }
.map-link.l7 { left:47%;top:322px;width:170px;transform:rotate(95deg); }
.map-link.l8 { left:55%;top:322px;width:320px;transform:rotate(22deg); }



.routing-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px; }
.routing-box { border-radius:22px;padding:18px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.08); }
.routing-box strong { font-size:22px;letter-spacing:-.05em;display:block; }
.routing-box span { color:var(--muted);font-size:13px;line-height:1.6; }

@media(max-width:1120px) {
  .routing-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:880px) {
  .routing-grid { grid-template-columns:1fr; }
  .net-node,.map-node { position:relative;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;margin:10px auto; }
  .pipe,.ring,.map-link,.zone { display:none; }
  .network-canvas,.topology-map { display:grid;align-content:center;gap:8px; }
}