/* Custom styles */

.value-glow {
  text-shadow: 0 0 20px currentColor, 0 0 40px currentColor;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

/* Slider styling */
.slider::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #8B5CF6, #EC4899);
  cursor: pointer;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}

.slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #8B5CF6, #EC4899);
  cursor: pointer;
  border-radius: 50%;
  border: none;
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.5);
}

.slider:hover::-webkit-slider-thumb {
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.8);
}

.slider:hover::-moz-range-thumb {
  box-shadow: 0 0 20px rgba(139, 92, 246, 0.8);
}

/* Confetti animation */
.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: fall 3s linear forwards;
}

@keyframes fall {
  0% {
    top: -10%;
    transform: rotate(0deg);
  }
  100% {
    top: 110%;
    transform: rotate(360deg);
  }
}

/* Input focus effects */
input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.3);
}

/* Button hover effects */
button {
  transition: all 0.2s ease;
}

button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
}

button:active {
  transform: translateY(0);
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Table hover effect */
table tbody tr {
  transition: background-color 0.2s ease;
}