/* Active variant: neon stat cards with smaller, non-interactive background charts */

li.service[data-name="CPU"],
li.service[data-name="Memory"],
li.service[data-name="Lan Speed"] {
  --stat-radius: 18px;
}

li.service[data-name="CPU"] .service-card,
li.service[data-name="Memory"] .service-card,
li.service[data-name="Lan Speed"] .service-card {
  background: rgba(2, 6, 23, 0.82);
  border: 1px solid rgba(56, 189, 248, 0.22);
  border-radius: var(--stat-radius);
  overflow: hidden;
}

li.service[data-name="CPU"] .service-card {
  box-shadow: 0 0 0 1px rgba(59,130,246,.20), 0 0 26px rgba(59,130,246,.18);
}

li.service[data-name="Memory"] .service-card {
  box-shadow: 0 0 0 1px rgba(168,85,247,.20), 0 0 26px rgba(168,85,247,.18);
}

li.service[data-name="Lan Speed"] .service-card {
  box-shadow: 0 0 0 1px rgba(16,185,129,.20), 0 0 26px rgba(16,185,129,.18);
}

li.service[data-name="CPU"] .service-name,
li.service[data-name="Memory"] .service-name,
li.service[data-name="Lan Speed"] .service-name {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .74rem;
  font-weight: 700;
}

li.service[data-name="CPU"] .service-container.chart,
li.service[data-name="Memory"] .service-container.chart,
li.service[data-name="Lan Speed"] .service-container.chart {
  height: 76px !important;
}

/* Make the charts decorative instead of interactive/noisy */
li.service[data-name="CPU"] .service-container.chart .recharts-responsive-container,
li.service[data-name="Memory"] .service-container.chart .recharts-responsive-container,
li.service[data-name="Lan Speed"] .service-container.chart .recharts-responsive-container,
li.service[data-name="CPU"] .service-container.chart svg,
li.service[data-name="Memory"] .service-container.chart svg,
li.service[data-name="Lan Speed"] .service-container.chart svg {
  pointer-events: none !important;
}

li.service[data-name="CPU"] .service-container.chart .absolute.-top-10,
li.service[data-name="Memory"] .service-container.chart .absolute.-top-10,
li.service[data-name="Lan Speed"] .service-container.chart .absolute.-top-10 {
  opacity: 0.45;
  transform: scaleY(0.82);
  transform-origin: bottom center;
}

li.service[data-name="CPU"] .service-container.chart .absolute.bottom-3.left-3 .text-xs,
li.service[data-name="Memory"] .service-container.chart .absolute.bottom-3.left-3 .text-xs,
li.service[data-name="Lan Speed"] .service-container.chart .absolute.bottom-3.left-3 .text-xs {
  font-size: 0.78rem;
  opacity: 0.75;
}

li.service[data-name="CPU"] .service-container.chart .absolute.bottom-3.right-3 .text-xs,
li.service[data-name="Memory"] .service-container.chart .absolute.bottom-3.right-3 .text-xs,
li.service[data-name="Lan Speed"] .service-container.chart .absolute.bottom-3.right-3 .text-xs {
  font-size: 1rem;
  opacity: 1;
  border-radius: 9999px;
  padding: 0.24rem 0.55rem;
  background: rgba(15,23,42,0.55);
  border: 1px solid rgba(255,255,255,0.08);
  text-shadow: 0 0 10px rgba(255,255,255,.15);
}

li.service[data-name="CPU"] .service-container.chart::after,
li.service[data-name="Memory"] .service-container.chart::after,
li.service[data-name="Lan Speed"] .service-container.chart::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  pointer-events: none;
}