.quiz-card {
  max-width: 680px;
  margin: 1.5rem auto 0;
  background: var(--surface);
  border: 1px solid var(--text);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: 6px 6px 0 var(--accent);
}

.quiz-progress { height: 4px; background: var(--border); margin-bottom: 1.2rem; }

.quiz-progress span { display: block; height: 100%; background: var(--primary); transition: width 0.3s; }

.quiz-meta { color: var(--muted); font-size: 0.9rem; letter-spacing: 0.1em; margin-bottom: 0.4rem; }

.quiz-question { font-size: 1.3rem; margin-bottom: 1rem; }

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

.quiz-option {
  text-align: left;
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-left: 4px solid var(--border);
  background: var(--bg);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.quiz-option:hover:not(:disabled) { border-color: var(--text); border-left-color: var(--primary); }

.quiz-option.correct { border-color: #3f7d4e; border-left-color: #3f7d4e; background: rgba(63, 125, 78, 0.15); }

.quiz-option.wrong { border-color: var(--primary); border-left-color: var(--primary); background: rgba(193, 39, 45, 0.15); }

.quiz-feedback { margin: 1rem 0 0; color: var(--muted); min-height: 1.5rem; }

.quiz-actions { margin-top: 1.2rem; text-align: right; }

.quiz-result { text-align: center; }

.quiz-result strong { font-size: 3rem; color: var(--primary); display: block; }