:root {
  --ink: #0b1020;
}

body {
  min-height: 100vh;
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(99, 102, 241, 0.18), transparent 50%),
    radial-gradient(900px 400px at 100% 0%, rgba(245, 158, 11, 0.12), transparent 45%),
    var(--ink);
}

.hero-card, .cat-card, .quiz-card {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
}

.cat-card:hover {
  border-color: rgba(245, 158, 11, 0.45);
  transform: translateY(-2px);
}

.cat-card {
  transition: 0.15s ease;
  cursor: pointer;
}

.option-btn {
  text-align: left;
  white-space: normal;
}

.option-btn.correct {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
}

.option-btn.wrong {
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.15);
}

.progress {
  height: 8px;
}