/* 🌌 BAZĂ */
body {
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', Arial, sans-serif;
  background: radial-gradient(circle at top, #020617, #000);
  color: #00ffcc;
  text-align: center;
  font-size: 18px;
}

h1 {
  margin: 16px 0;
  font-size: 28px;
  color: #00fff7;
  text-shadow: 0 0 8px #00fff7, 0 0 16px #00ffcc;
}

/* 📦 CARD */
.box {
  border: 1px solid #00ffcc;
  padding: 18px;
  margin: 15px auto;
  width: 320px;
  max-width: 90%;
  background: rgba(0, 255, 204, 0.05);
  box-shadow: 0 0 12px rgba(0,255,204,0.4),
              inset 0 0 10px rgba(0,255,204,0.2);
  border-radius: 0 18px 0 18px;
}

/* 🔹 RÂNDURI */
.row {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Titlu neon */
.neon-title strong {
  font-size: 1.3rem;            /* puțin mai mare */
  text-shadow: 0 0 8px #7fffd4, 0 0 16px #00ffcc; /* neon glow */
  color: #7fffd4;               /* culoare neon */
}

/* Valori neon */
.neon-values .data-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* Valori + pulse animation */
.value {
  font-weight: bold;
  color: #00ff9c;
  text-shadow: 0 0 6px #00ff9c;
  transition: color 0.3s, text-shadow 0.3s;
}

/* Pulse animation */
@keyframes pulse {
  0% { text-shadow: 0 0 6px #00ff9c; color: #00ff9c; }
  50% { text-shadow: 0 0 12px #00ff9c; color: #00ffcc; }
  100% { text-shadow: 0 0 6px #00ff9c; color: #00ff9c; }
}

.value.pulse {
  animation: pulse 0.5s ease-in-out;
}

/* Culori praguri */
.value.blue { color: #00bfff; text-shadow: 0 0 6px #00bfff; }  /* rece */
.value.green { color: #00ff9c; text-shadow: 0 0 6px #00ff9c; } /* optim */
.value.yellow { color: #ffff00; text-shadow: 0 0 6px #ffff00; } /* mediu-înalt */
.value.red { color: #ff3300; text-shadow: 0 0 6px #ff3300; } /* ridicat */

/* Iconițe */
i {
  color: #00f7ff;
  text-shadow: 0 0 6px #00f7ff;
  margin: 0;
}

/* TELEFON */
@media (max-width: 600px) {
  body { font-size: 22px; }
  h1 { font-size: 26px; }
  .box { padding: 24px; }
  .value { font-size: 26px; }
}

/* TABLETĂ */
@media (min-width: 601px) and (max-width: 1024px) {
  body { font-size: 20px; }
  h1 { font-size: 30px; }
  .box { width: 420px; }
  .value { font-size: 24px; }
}

/* DESKTOP */
@media (min-width: 1200px) {
  body { font-size: 18px; }
  h1 { font-size: 32px; }
  .box { width: 480px; }
  .value { font-size: 24px; }
}

/* 🌟 Glow constant pentru titlu și iconițe */
h1 {
  animation: neonGlow 2s ease-in-out infinite alternate;
}

i {
  animation: iconGlow 2s ease-in-out infinite alternate;
}

/* Animatii */
@keyframes neonGlow {
  0% { text-shadow: 0 0 8px #00fff7, 0 0 16px #00ffcc; color: #00fff7; }
  50% { text-shadow: 0 0 16px #00fff7, 0 0 32px #00ffcc; color: #00ffcc; }
  100% { text-shadow: 0 0 8px #00fff7, 0 0 16px #00ffcc; color: #00fff7; }
}

@keyframes iconGlow {
  0% { text-shadow: 0 0 6px #00f7ff; color: #00f7ff; }
  50% { text-shadow: 0 0 12px #00f7ff; color: #00f7ff; }
  100% { text-shadow: 0 0 6px #00f7ff; color: #00f7ff; }
}