:root {
  --bg: #0d0818;
  --bg-deep: #080512;
  --grid: rgba(124, 58, 237, 0.06);
}

/* ── DASHBOARD BACKGROUND ────────────────────────────── */
body.dashboard-bg {
  background:
    radial-gradient(ellipse at 15% 12%, rgba(124, 58, 237, 0.22), transparent 45%),
    radial-gradient(ellipse at 85% 5%, rgba(244, 200, 66, 0.09), transparent 40%),
    radial-gradient(ellipse at 8% 80%, rgba(168, 85, 247, 0.18), transparent 50%),
    linear-gradient(160deg, #160d2e, #0d0818);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

body.dashboard-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.5;
  pointer-events: none;
  z-index: -2;
}

body.dashboard-bg::after { content: none; }

/* ── IT / NETWORK SVG BACKGROUND ────────────────────── */
.it-background {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: 0.14;
  mix-blend-mode: screen;
}

.it-background svg {
  width: 100%;
  height: 100%;
}

/* Animated packet lines — now gold/purple */
.packet-line {
  fill: none;
  stroke: rgba(244, 200, 66, 0.4);
  stroke-width: 1.2;
  stroke-dasharray: 10 18;
  animation: packetFlow 18s linear infinite;
}

.packet-line--b {
  stroke: rgba(168, 85, 247, 0.38);
  stroke-dasharray: 8 16;
  animation-duration: 22s;
}

.packet-line--c {
  stroke: rgba(244, 200, 66, 0.28);
  stroke-dasharray: 12 20;
  animation-duration: 26s;
}

.topology-line {
  stroke: rgba(244, 200, 66, 0.22);
  stroke-width: 1;
  opacity: 0.55;
}

.protocol-text {
  fill: rgba(244, 200, 66, 0.35);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-family: "Source Sans 3", sans-serif;
}

.protocol-text--muted {
  fill: rgba(168, 85, 247, 0.28);
}

.node-dot {
  fill: rgba(244, 200, 66, 0.6);
  opacity: 0.8;
  animation: nodePulse 6s ease-in-out infinite;
}

.node-dot--b,
.node-dot--d,
.node-dot--f,
.node-dot--h,
.node-dot--j,
.node-dot--l {
  animation-delay: 1.5s;
  fill: rgba(168, 85, 247, 0.55);
  opacity: 0.45;
}

@keyframes packetFlow {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -220; }
}

@keyframes nodePulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 0.75; transform: scale(1.2); }
}