:root{
  --network-blue:#67c7ff;
  --network-blue-soft:rgba(103,199,255,.16);
  --network-amber:#ffb45e;
  --network-amber-soft:rgba(255,180,94,.14);
  --network-purple:#a690ff;
}
.network-page{padding-bottom:10px}
.network-nav-current{border-color:rgba(216,255,69,.38);background:rgba(216,255,69,.08)}
.network-hero{display:grid;grid-template-columns:1.1fr .62fr;gap:32px;align-items:center;padding:66px 0 48px}
.network-hero h1{font-size:clamp(48px,6vw,76px);max-width:760px}
.network-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.network-overall-card,.network-test-card,.network-route-card,.network-map-card,.network-matrix-card,.network-failover-card{
  border:1px solid var(--border);
  background:linear-gradient(180deg,rgba(21,31,43,.96),rgba(11,17,24,.98));
  border-radius:18px;
  box-shadow:var(--shadow);
}
.network-overall-card{padding:26px}
.network-overall-label{display:block;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
.network-overall-status{display:flex;gap:11px;align-items:center;font-size:20px}
.network-overall-status.is-operational{color:var(--ok)}
.network-overall-status.is-degraded{color:var(--network-amber)}
.network-overall-status.is-outage{color:var(--danger)}
.network-overall-status.is-unknown,.network-overall-status.is-loading{color:#c9d3df}
.network-status-dot{width:10px;height:10px;border-radius:50%;background:currentColor;box-shadow:0 0 18px currentColor;flex:0 0 auto}
.network-overall-card p{color:var(--muted);line-height:1.6;margin:16px 0 8px}
.network-updated-at{font-size:12px;color:#6f7f92}
.network-alert{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:18px 20px;border-radius:16px;border:1px solid var(--border);background:#111a25;margin-bottom:16px}
.network-alert>div{min-width:0}
.network-alert-kicker{display:block;font-size:11px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.network-alert strong{font-size:17px}
.network-alert p{margin:5px 0 0;color:var(--muted);line-height:1.5}
.network-alert-state{border-radius:999px;padding:7px 11px;font-size:11px;font-weight:900;letter-spacing:.08em;white-space:nowrap}
.network-alert.is-operational{border-color:rgba(128,232,156,.27);background:linear-gradient(90deg,rgba(128,232,156,.08),rgba(17,26,37,.96))}
.network-alert.is-operational .network-alert-state{background:rgba(128,232,156,.12);color:var(--ok)}
.network-alert.is-degraded{border-color:rgba(255,180,94,.34);background:linear-gradient(90deg,rgba(255,180,94,.10),rgba(17,26,37,.96))}
.network-alert.is-degraded .network-alert-state{background:rgba(255,180,94,.13);color:var(--network-amber)}
.network-alert.is-outage{border-color:rgba(255,112,112,.34);background:linear-gradient(90deg,rgba(255,112,112,.10),rgba(17,26,37,.96))}
.network-alert.is-outage .network-alert-state{background:rgba(255,112,112,.13);color:var(--danger)}
.network-alert.is-loading,.network-alert.is-unknown{border-color:var(--border)}
.network-alert.is-loading .network-alert-state,.network-alert.is-unknown .network-alert-state{background:#182332;color:#aebccd}
.network-section-tight{padding-top:68px;padding-bottom:68px}
.network-section-head-row{max-width:none;display:flex;align-items:end;justify-content:space-between;gap:24px}
.network-section-head-row>div{max-width:720px}
.network-relay-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.network-relay-card{border:1px solid var(--border);background:linear-gradient(180deg,#141e2a,#0d141d);border-radius:16px;padding:20px;min-width:0}
.network-relay-card.is-degraded{border-color:rgba(255,180,94,.38)}
.network-relay-card.is-outage{border-color:rgba(255,112,112,.42)}
.network-relay-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.network-relay-top>span:first-child{font-size:12px;color:var(--accent);font-weight:900;letter-spacing:.13em}
.network-relay-card h3{font-size:22px;margin:18px 0 8px}
.network-relay-card p{color:var(--muted);margin:0;min-height:42px;line-height:1.5}
.network-node-state{font-size:11px;font-weight:900;border-radius:999px;padding:6px 9px;text-transform:capitalize}
.network-node-state.is-operational{color:var(--ok);background:rgba(128,232,156,.10)}
.network-node-state.is-degraded{color:var(--network-amber);background:rgba(255,180,94,.11)}
.network-node-state.is-outage{color:var(--danger);background:rgba(255,112,112,.11)}
.network-node-state.is-unknown,.network-node-state.is-loading{color:#aebccd;background:#1b2634}
.network-relay-metric{display:flex;align-items:end;justify-content:space-between;gap:14px;border-top:1px solid var(--border);margin-top:18px;padding-top:16px}
.network-relay-metric span{color:var(--muted);font-size:12px}
.network-relay-metric strong{font-size:24px;letter-spacing:-.03em}
.network-relay-note{font-size:12px;color:#718196;margin-top:9px;min-height:18px}
.network-test-card{padding:22px}
.network-test-card-wide{width:100%}
.network-test-map-hint{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:20px;padding:14px 15px;border:1px solid #223143;background:#0b121b;border-radius:12px}
.network-test-map-hint strong{font-size:12px;color:#e6edf5}
.network-test-map-hint span{font-size:12px;color:#8394a8;line-height:1.45;flex:1 1 360px}
.network-test-map-hint a{font-size:11px;font-weight:900;color:var(--accent);text-decoration:none}
.network-test-map-hint a:hover{text-decoration:underline}
.network-test-head{display:flex;align-items:center;justify-content:space-between;gap:16px}
.network-test-head strong{display:block;font-size:18px}
.network-test-head span{display:block;color:var(--muted);font-size:13px;margin-top:5px}
.network-test-progress{margin:20px 0 0;display:grid;gap:8px}
.network-test-progress-bar{height:7px;border-radius:999px;background:#1b2837;overflow:hidden}
.network-test-progress-bar i{display:block;width:0;height:100%;border-radius:inherit;background:var(--accent);transition:width .2s ease}
.network-test-progress>span:last-child{font-size:12px;color:var(--muted)}
.network-fine-print{color:#75869a;font-size:12px;line-height:1.55;margin:18px 0 0}
.network-map-card{overflow:hidden}
.network-map-section-head{max-width:760px}
.network-map-toolbar{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:15px 18px;border-bottom:1px solid rgba(123,146,171,.14);background:linear-gradient(180deg,rgba(20,30,43,.82),rgba(14,22,32,.82))}
.network-map-legend{display:flex;align-items:center;gap:17px;flex-wrap:wrap;color:#8fa2b8;font-size:11px;font-weight:750}
.network-map-legend span{display:flex;align-items:center;gap:7px}
.legend-dot{width:7px;height:7px;border-radius:50%;display:inline-block;background:var(--accent);box-shadow:0 0 12px rgba(216,255,69,.52)}
.legend-line{width:23px;height:0;border-top:2px solid;display:inline-block}
.legend-line.backbone{border-color:var(--accent)}
.legend-line.vocus{border-color:var(--network-blue)}
.legend-line.gsl{border-color:var(--network-purple)}
.legend-line.backup{border-color:var(--network-amber);border-top-style:dashed}
.network-map-active-path{font-size:11px;font-weight:850;color:#d7e1ed;white-space:nowrap}
.network-map-live-card{overflow:hidden}
.network-map-shell{height:clamp(430px,54vw,640px);position:relative;background:#080e15}
.network-live-map{position:absolute;inset:0}
.network-map-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;background:radial-gradient(circle at center,rgba(17,31,47,.94),rgba(7,12,18,.98));color:#dbe5ef;font-size:13px;font-weight:850;letter-spacing:.01em;z-index:3;transition:opacity .25s ease,visibility .25s ease}
.network-map-loading.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.network-map-loading.is-error{flex-direction:column;text-align:center;color:#9fb0c3}
.network-map-loading.is-error .network-map-loading-dot{background:var(--danger);box-shadow:0 0 14px rgba(255,112,112,.42)}
.network-map-loading-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 14px rgba(216,255,69,.48);animation:network-map-pulse 1.1s ease-in-out infinite alternate}
@keyframes network-map-pulse{from{opacity:.35;transform:scale(.78)}to{opacity:1;transform:scale(1.2)}}
.network-map-route-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:rgba(123,146,171,.12);border-top:1px solid rgba(123,146,171,.12)}
.network-map-route-card{appearance:none;border:0;text-align:left;background:#0d151f;color:inherit;padding:15px 17px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:background .15s ease}
.network-map-route-card:hover{background:#111d2a}
.network-map-route-card.is-active{background:linear-gradient(90deg,rgba(255,180,94,.10),#111d2a)}
.network-map-route-card.is-active .network-map-route-code{box-shadow:0 0 18px rgba(255,180,94,.16)}
.network-map-route-card.is-standby{opacity:.66}
.network-map-route-card:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.network-map-route-card>span:last-child{min-width:0}
.network-map-route-card strong{display:block;color:#e7edf5;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.network-map-route-card small{display:block;color:#8294a8;font-size:11px;line-height:1.45;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.network-map-route-code{flex:0 0 auto;border:1px solid #304154;border-radius:999px;padding:6px 8px;font-size:9px;font-weight:950;letter-spacing:.09em;color:#b8c5d4;background:#111b27}
.network-map-route-code.is-vocus{border-color:rgba(103,199,255,.33);color:#82d6ff;background:rgba(103,199,255,.07)}
.network-map-route-code.is-gsl{border-color:rgba(166,144,255,.35);color:#baa8ff;background:rgba(166,144,255,.08)}
.network-map-route-code.is-backup{border-color:rgba(255,180,94,.34);color:#ffc47e;background:rgba(255,180,94,.07)}
.network-map-card .maplibregl-map{font-family:inherit}
.network-map-card .maplibregl-canvas{outline:none}
.network-map-card .maplibregl-ctrl-top-right{top:12px;right:12px}
.network-map-card .maplibregl-ctrl-group{border:1px solid rgba(141,162,184,.24);background:#0c151f;box-shadow:0 8px 28px rgba(0,0,0,.26);overflow:hidden}
.network-map-card .maplibregl-ctrl-group button{background-color:#0c151f}
.network-map-card .maplibregl-ctrl-group button+button{border-top-color:rgba(141,162,184,.18)}
.network-map-card .maplibregl-ctrl-group button:hover{background-color:#172332}
.network-map-card .maplibregl-ctrl-group button .maplibregl-ctrl-icon{filter:invert(1) opacity(.76)}
.network-map-card .maplibregl-ctrl-attrib{background:rgba(6,11,17,.78);color:#8091a5;font-size:9px}
.network-map-card .maplibregl-ctrl-attrib a{color:#91a8c0}
.network-map-card .maplibregl-popup{z-index:7}
.network-map-card .maplibregl-popup-content{background:#0d1722;color:#e9eff6;border:1px solid #29394c;border-radius:14px;box-shadow:0 16px 48px rgba(0,0,0,.46);padding:0;overflow:hidden;min-width:225px}
.network-map-card .maplibregl-popup-tip{border-top-color:#0d1722!important;border-bottom-color:#0d1722!important}
.network-map-card .maplibregl-popup-close-button{color:#8fa3b8;font-size:18px;padding:7px 10px;z-index:2}
.network-map-card .maplibregl-popup-close-button:hover{background:rgba(255,255,255,.05);color:#fff}
.network-map-popup{padding:15px 16px 14px}
.network-map-popup-kicker{display:flex;align-items:center;gap:7px;font-size:9px;font-weight:950;letter-spacing:.12em;text-transform:uppercase;color:#8396aa;margin-bottom:6px}
.network-map-popup-kicker i{width:7px;height:7px;border-radius:50%;background:currentColor}
.network-map-popup h3{font-size:17px;line-height:1.2;margin:0 28px 5px 0;color:#fff}
.network-map-popup-sub{font-size:11px;color:#91a3b7;line-height:1.45;margin-bottom:12px}
.network-map-popup-grid{display:grid;grid-template-columns:auto 1fr;gap:7px 14px;padding-top:11px;border-top:1px solid #223143;font-size:11px}
.network-map-popup-grid span{color:#708399}
.network-map-popup-grid strong{color:#dce6f0;font-weight:800;text-align:right}
.network-map-popup-state{display:inline-flex;align-items:center;gap:6px}
.network-map-popup-state::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.network-map-popup-state.is-operational,.network-map-popup-state.is-active{color:var(--ok)}
.network-map-popup-state.is-degraded,.network-map-popup-state.is-standby{color:var(--network-amber)}
.network-map-popup-state.is-outage{color:var(--danger)}
.network-map-popup-state.is-unknown{color:#8293a7}
@media(max-width:760px){
  .network-map-toolbar{align-items:flex-start;flex-direction:column;gap:10px}
  .network-map-active-path{white-space:normal}
  .network-map-shell{height:440px}
  .network-map-route-cards{grid-template-columns:1fr}
  .network-map-route-card{padding:13px 15px}
}
.network-matrix-card{padding:0;overflow:hidden}
.network-matrix-scroll{overflow:auto}
.network-matrix-table{width:100%;border-collapse:collapse;min-width:760px}
.network-matrix-table th,.network-matrix-table td{padding:15px 13px;text-align:center;border-bottom:1px solid #1e2a38;border-right:1px solid #1a2531}
.network-matrix-table th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#93a4b7;background:#101923}
.network-matrix-table tbody th{text-align:left;color:#cbd5e1}
.network-matrix-table td{font-size:13px;font-weight:700}
.network-matrix-table .matrix-self{color:#536275;background:#0b1219}
.network-matrix-card>.network-fine-print{padding:0 18px 18px}
.network-failover-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.network-failover-card{padding:19px}
.network-failover-card span{display:block;color:var(--muted);font-size:11px;text-transform:uppercase;font-weight:800;letter-spacing:.08em}
.network-failover-card strong{display:block;font-size:21px;margin:10px 0 6px}
.network-failover-card small{display:block;color:#7d8da0;line-height:1.4}
.network-events-layout{display:grid;grid-template-columns:.7fr 1.3fr;gap:30px}
.network-events{display:grid;gap:9px}
.network-event{display:grid;grid-template-columns:auto 1fr;gap:13px;border:1px solid var(--border);background:#101822;border-radius:13px;padding:15px}
.network-event-marker{width:9px;height:9px;border-radius:50%;background:var(--ok);margin-top:5px;box-shadow:0 0 12px rgba(128,232,156,.35)}
.network-event.is-warning .network-event-marker{background:var(--network-amber);box-shadow:0 0 12px rgba(255,180,94,.35)}
.network-event strong{display:block;font-size:13px}
.network-event p{font-size:12px;color:#8191a4;line-height:1.5;margin:4px 0}
.network-event time{font-size:10px;color:#5f7085}
.network-event-empty{border:1px dashed #2b394a;border-radius:13px;padding:22px;color:#718196;text-align:center}
@media(max-width:900px){
  .network-hero,.network-events-layout{grid-template-columns:1fr}
  .network-relay-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .network-failover-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .network-hero{padding-top:36px}
  .network-relay-grid,.network-failover-grid{grid-template-columns:1fr}
  .network-section-head-row,.network-map-toolbar,.network-test-head{align-items:flex-start;flex-direction:column}
  .network-alert{align-items:flex-start;flex-direction:column}
}