:root {
  --neon-pink: #ff2cdf;
  --neon-blue: #00eaff;
  --neon-purple: #7f00ff;
  --neon-green: #00ff9d;
  --neon-red: #ff3b3b;
  --bg-dark: #0b0f1a;
  --glass: rgba(255, 255, 255, 0.08);
}


body {
  min-height: 100vh;
  background: radial-gradient(circle at top, #1b1f3b, #05070f);
  font-family: "Orbitron", "Poppins", system-ui, sans-serif;
  color: white;
  overflow-x: hidden;
}


.container {
  animation: appFade 0.8s ease;
}

@keyframes appFade {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: scale(1); }
}


.card {
  background: var(--glass);
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow:
    0 0 20px rgba(0,234,255,0.2),
    inset 0 0 20px rgba(255,255,255,0.05);
  backdrop-filter: blur(14px);
}

.card-body {
  padding: 2rem;
}


h1, h2, h3, h4, h5 {
  color: var(--neon-blue);
  font-weight: 700;
  text-shadow:
    0 0 10px rgba(0,234,255,0.8),
    0 0 25px rgba(0,234,255,0.6);
  animation: neonPulse 2s infinite alternate;
}

@keyframes neonPulse {
  from { text-shadow: 0 0 10px rgba(0,234,255,0.6); }
  to { text-shadow: 0 0 20px rgba(0,234,255,1); }
}


p, label {
  color: #c7d2fe;
}


.btn {
  border-radius: 16px;
  font-weight: 600;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.btn-primary {
  background: linear-gradient(135deg, var(--neon-purple), var(--neon-pink));
  border: none;
  box-shadow: 0 0 15px rgba(255,44,223,0.8);
}

.btn-success {
  background: linear-gradient(135deg, var(--neon-green), #00c853);
  border: none;
  box-shadow: 0 0 15px rgba(0,255,157,0.8);
}

.btn:hover {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 0 25px rgba(0,234,255,0.9);
}


#options button {
  background: rgba(10,15,30,0.8);
  border: 2px solid var(--neon-blue);
  color: white;
  padding: 14px;
  font-size: 1rem;
  text-align: left;
  box-shadow: 0 0 10px rgba(0,234,255,0.4);
  animation: optionSlide 0.4s ease;
}

@keyframes optionSlide {
  from { transform: translateX(-10px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

#options button.btn-success {
  background: var(--neon-green);
  color: #022c22;
  box-shadow: 0 0 25px rgba(0,255,157,1);
}

#options button.btn-danger {
  background: var(--neon-red);
  box-shadow: 0 0 25px rgba(255,59,59,1);
}


.progress {
  height: 26px;
  background: rgba(255,255,255,0.1);
  border-radius: 20px;
  overflow: hidden;
}

.progress-bar {
  background: linear-gradient(90deg, var(--neon-pink), var(--neon-blue));
  font-weight: bold;
  color: black;
  text-shadow: 0 0 10px white;
  animation: barGlow 1.5s infinite alternate;
}

@keyframes barGlow {
  from { filter: brightness(1); }
  to { filter: brightness(1.4); }
}


.form-control,
.form-select {
  background: rgba(10,15,30,0.9);
  border: 2px solid var(--neon-purple);
  color: white;
  border-radius: 14px;
}

.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 20px rgba(127,0,255,0.9);
  border-color: var(--neon-pink);
}


.form-check-input {
  background-color: transparent;
  border: 2px solid var(--neon-blue);
}

.form-check-input:checked {
  background-color: var(--neon-blue);
  box-shadow: 0 0 10px var(--neon-blue);
}


footer {
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(12px);
  border-top: 1px solid rgba(255,255,255,0.1);
}


.dev-img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  border: 3px solid var(--neon-blue);
  box-shadow:
    0 0 15px var(--neon-blue),
    0 0 30px var(--neon-purple);
  animation: avatarGlow 2s infinite alternate;
}

@keyframes avatarGlow {
  from { box-shadow: 0 0 10px var(--neon-blue); }
  to { box-shadow: 0 0 30px var(--neon-pink); }
}


#resultText {
  font-size: 1.2rem;
  text-shadow: 0 0 10px rgba(255,255,255,0.4);
}


@media (max-width: 576px) {
  .card-body {
    padding: 1.3rem;
  }

  h1, h2 {
    font-size: 1.4rem;
  }

  #options button {
    font-size: 0.95rem;
  }
}