* {
  font-family: 'JetBrains Mono', monospace;
}

.confetti {
  background-image: 
    radial-gradient(circle, #10b981 20%, transparent 20%),
    radial-gradient(circle, #3b82f6 20%, transparent 20%),
    radial-gradient(circle, #f59e0b 20%, transparent 20%),
    radial-gradient(circle, #ef4444 20%, transparent 20%),
    radial-gradient(circle, #8b5cf6 20%, transparent 20%);
  background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
  background-position: 0% 80%, 70% 80%, 10% 20%, 80% 10%, 40% 0%;
  animation: confetti-fall 3s ease-out forwards;
}

@keyframes confetti-fall {
  0% {
    background-position: 0% -10%, 70% -10%, 10% -10%, 80% -10%, 40% -10%;
  }
  100% {
    background-position: 0% 120%, 70% 140%, 10% 110%, 80% 130%, 40% 125%;
  }
}

textarea::placeholder,
code {
  opacity: 0.5;
}

pre code {
  display: block;
  white-space: pre-wrap;
  word-wrap: break-word;
}

input[type="checkbox"] {
  cursor: pointer;
}

select, input[type="text"] {
  transition: all 0.2s;
}

select:focus, input[type="text"]:focus {
  outline: none;
}

button:disabled {
  cursor: not-allowed;
}

@media (max-width: 1024px) {
  .grid-cols-1.lg\:grid-cols-2 {
    grid-template-columns: 1fr;
  }
}

/* Scrollbar styling for dark mode */
.dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dark ::-webkit-scrollbar-track {
  background: #1f2937;
}

.dark ::-webkit-scrollbar-thumb {
  background: #4b5563;
  border-radius: 4px;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}