.quiz-hero {
  padding: 1.75rem 0 0;
  text-align: center;
}

.quiz-hero h1 {
  font-size: 2.6rem;
}

.quiz-hero .lead {
  max-width: 42rem;
  margin: 0.5rem auto 0;
}

.quiz-card {
  display: grid;
  gap: 1rem;
  padding: 1.2rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.quiz-progress {
  color: var(--muted);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.quiz-options {
  display: grid;
  gap: 0.7rem;
}

.quiz-option {
  display: flex;
  gap: 0.7rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fffaf0;
  cursor: pointer;
}

.quiz-option input {
  margin-top: 0.25rem;
  flex-shrink: 0;
}

.quiz-feedback {
  min-height: 1.6rem;
  color: var(--ink-light);
  font-weight: 600;
}

.quiz-feedback[data-status="correct"] { color: #1f6f43; }
.quiz-feedback[data-status="wrong"]   { color: #9b3a4d; }
.quiz-feedback[data-status="warning"] { color: #8a5a12; }

.quiz-score-final {
  text-align: center;
  font-size: 1.8rem;
  font-weight: 700;
  padding: 1rem 0;
  color: var(--ink);
}

.quiz-result-score {
  display: block;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.quiz-result-msg {
  font-size: 1.1rem;
  font-weight: 500;
  text-align: center;
}

.result-perfect,
.result-good,
.result-low {
  text-align: center;
  display: grid;
  gap: 1rem;
  place-items: center;
}

.result-perfect { background: #1f6f43; color: #fff; }
.result-good    { background: #c8e6c9; color: #1b3d22; }
.result-low     { background: #ffcdd2; color: #6e1d28; }