* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow: hidden;
  background: #020706;
}

.switchboard-bg {
  position: relative;
  width: 100vw;
  height: 100vh;
  background:
    radial-gradient(circle at 18% 22%, rgba(39, 190, 115, 0.12), transparent 28%),
    radial-gradient(circle at 78% 68%, rgba(207, 142, 58, 0.10), transparent 30%),
    radial-gradient(circle at 52% 48%, rgba(60, 255, 170, 0.045), transparent 38%),
    linear-gradient(135deg, #020807 0%, #03100d 48%, #010403 100%);
}

.base-noise,
.grid-layer,
.circuit-layer,
.network-layer,
.vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.base-noise {
  opacity: 0.13;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
}

.grid-layer {
  opacity: 0.6;
  background-image:
    linear-gradient(rgba(105, 255, 170, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105, 255, 170, 0.045) 1px, transparent 1px),
    linear-gradient(rgba(105, 255, 170, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(105, 255, 170, 0.018) 1px, transparent 1px);
  background-size:
    80px 80px,
    80px 80px,
    20px 20px,
    20px 20px;
  mask-image: radial-gradient(circle at 50% 50%, black 0%, transparent 78%);
}

.circuit-layer {
  opacity: 0.32;
  background-image:
    linear-gradient(90deg, transparent 0 18%, rgba(82, 255, 170, 0.11) 18.1% 18.3%, transparent 18.4% 100%),
    linear-gradient(0deg, transparent 0 34%, rgba(255, 178, 76, 0.10) 34.1% 34.25%, transparent 34.35% 100%),
    linear-gradient(90deg, transparent 0 63%, rgba(82, 255, 170, 0.09) 63.1% 63.25%, transparent 63.35% 100%),
    linear-gradient(0deg, transparent 0 71%, rgba(82, 255, 170, 0.075) 71.1% 71.22%, transparent 71.32% 100%);
  background-size:
    360px 260px,
    420px 300px,
    520px 380px,
    640px 420px;
  animation: circuitDrift 28s linear infinite;
}

.network-layer {
  width: 100vw;
  height: 100vh;
  opacity: 0.72;
}

.vignette {
  background:
    radial-gradient(circle at center, transparent 0%, transparent 45%, rgba(0, 0, 0, 0.72) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.35), transparent 18%, transparent 82%, rgba(0, 0, 0, 0.45));
}

.route-line {
  stroke: rgba(105, 255, 178, 0.26);
  stroke-width: 1;
}

.route-line.secondary {
  stroke: rgba(255, 184, 83, 0.18);
}

.route-line.warning {
  stroke: rgba(255, 90, 68, 0.18);
}

.route-node {
  fill: rgba(118, 255, 185, 0.86);
  filter: drop-shadow(0 0 7px rgba(118, 255, 185, 0.65));
}

.route-node.major {
  fill: rgba(160, 255, 205, 0.95);
  filter: drop-shadow(0 0 14px rgba(118, 255, 185, 0.95));
}

.route-node.amber {
  fill: rgba(255, 186, 86, 0.9);
  filter: drop-shadow(0 0 10px rgba(255, 186, 86, 0.75));
}

.route-node.red {
  fill: rgba(255, 86, 70, 0.82);
  filter: drop-shadow(0 0 10px rgba(255, 86, 70, 0.6));
}

.route-pulse {
  fill: rgba(175, 255, 205, 0.95);
  filter: drop-shadow(0 0 9px rgba(175, 255, 205, 0.9));
}

.node-label {
  fill: rgba(178, 235, 196, 0.42);
  font-family: "Courier New", monospace;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

@keyframes circuitDrift {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-80px, 40px, 0);
  }
}