/* Reduce vertical gaps between sections */
section {
  margin-bottom: 14px !important;
}

/* Tighten group titles */
h2 {
  margin-bottom: 8px !important;
}

/* Make widget cards feel elevated */
.card, .service {
  background: rgba(15, 23, 42, 0.75) !important;
  border: 1px solid rgba(255,255,255,0.04);
  backdrop-filter: blur(8px);
}

/* Subtle hover lift */
.card:hover, .service:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35) !important;
}

/* Glow for active widgets */
.card:has(.status), 
.card:has(.uptime),
.card:has(.running) {
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.15),
              0 6px 20px rgba(0,0,0,0.25) !important;
}

h2 {
  font-size: 16px !important;
  letter-spacing: 1.5px;
  color: #94a3b8 !important;
  text-transform: uppercase;
}

/* Top stat bar polish */
.stats {
  background: rgba(255,255,255,0.03) !important;
  border-radius: 14px !important;
  padding: 10px !important;
}

body {
  background: radial-gradient(circle at top,
    rgba(59,130,246,0.08),
    transparent 40%),
    linear-gradient(180deg, #020617 0%, #0f172a 100%) !important;
}

body {
  background: linear-gradient(
    180deg,
    #1e293b 0%,
    #0f172a 100%
  ) !important;
}


.card, .service {
  background: rgba(30, 41, 59, 0.7) !important;
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.05);
}

.card:hover, .service:hover {
  box-shadow: 
    0 10px 30px rgba(0,0,0,0.4),
    0 0 15px rgba(59,130,246,0.25);
}

h2 {
  color: #cbd5f5 !important;
 p letter-spacing: 2px;
}

.cpard:has(.widget) {
  background: rgba(15, 23, 42, 0.85) !important;
  border: 1px solid rgba(59,130,246,0.15);
}

/* 🟢 Healthy services glow */
.service-card:has(.status-up) {
  box-shadow: 0 0 12px rgba(0, 255, 150, 0.15);
  transition: all 0.3s ease;
}

/* 🔴 Down services pulse */
.service-card:has(.status-down) {
  animation: pulse-red 1.5s infinite;
}

@keyframes pulse-red {
  0% { box-shadow: 0 0 5px rgba(255, 0, 0, 0.2); }
  50% { box-shadow: 0 0 20px rgba(255, 0, 0, 0.6); }
  100% { box-shadow: 0 0 5px rgba(255, 0, 0, 0.2); }
}

/* 🟢 Fast (0–100ms) */
.status-badge {
  background: rgba(0, 255, 150, 0.15);
  color: #00ffa0;
}

/* 🟠 Medium (100–500ms) */
.status-badge[data-ms*="1"],
.status-badge[data-ms*="2"],
.status-badge[data-ms*="3"] {
  background: rgba(255, 165, 0, 0.15);
  color: #ffa500;
}

/* 🔴 Slow (500ms+) */
.status-badge[data-ms*="5"],
.status-badge[data-ms*="6"],
.status-badge[data-ms*="7"],
.status-badge[data-ms*="8"],
.status-badge[data-ms*="9"] {
  background: rgba(255, 0, 0, 0.2);
  color: #ff4d4d;
}