:root {
  --cx-blue: #0d6efd;
  --cx-dark: #101828;
  --cx-muted: #667085;
  --cx-bg: #f5f7fb;
  --cx-card: #ffffff;
  --cx-border: #e5e7eb;
  --cx-good: #157347;
  --cx-bad: #bb2d3b;
}

body {
  background: var(--cx-bg);
  color: var(--cx-dark);
}

.app-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 12px 48px;
}

.hero-card,
.question-card,
.result-card {
  background: var(--cx-card);
  border: 1px solid var(--cx-border);
  border-radius: 22px;
  box-shadow: 0 14px 40px rgba(16, 24, 40, .08);
}

.hero-card {
  padding: 28px;
}

.question-card {
  padding: 24px;
}

.badge-soft {
  background: #eef4ff;
  color: #0b5ed7;
  border: 1px solid #d8e7ff;
}

.timer {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  letter-spacing: .5px;
}

.answer-option {
  border: 1px solid var(--cx-border);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  transition: .15s ease;
  background: #fff;
}

.answer-option:hover {
  border-color: #b6c8ff;
  background: #f8fbff;
}

.answer-option.selected {
  border-color: var(--cx-blue);
  background: #eef4ff;
}

.answer-option.correct {
  border-color: var(--cx-good);
  background: #ecfdf3;
}

.answer-option.wrong {
  border-color: var(--cx-bad);
  background: #fff1f3;
}

.question-image {
  max-height: 360px;
  object-fit: contain;
  border: 1px solid var(--cx-border);
  border-radius: 16px;
  background: #fff;
}

.muted {
  color: var(--cx-muted);
}

.hidden {
  display: none !important;
}

.category-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .85rem;
  background: #f2f4f7;
  color: #344054;
}

.review-item {
  border: 1px solid var(--cx-border);
  border-radius: 16px;
  padding: 16px;
  background: #fff;
}

.review-item.correct-review {
  border-color: #abefc6;
  background: #f6fef9;
}

.review-item.wrong-review {
  border-color: #fecdd3;
  background: #fffafa;
}