html {
  font-size: 16px;
}

body {
  background-color: #f8f9fa;
  color: #212529;
}

.card {
  border-radius: 8px;
}

.btn,
.form-control,
.form-select {
  border-radius: 8px;
}

.table > :not(caption) > * > * {
  padding: 0.65rem 0.6rem;
}

.exam-text-area {
  --exam-font-scale: 1;
}

.exam-text-area .exam-question-text {
  font-size: calc(1rem * var(--exam-font-scale));
  line-height: 1.5;
}

.exam-text-area .exam-option-text,
.exam-text-area .exam-explanation {
  font-size: calc(0.98rem * var(--exam-font-scale));
  line-height: 1.45;
}

.topic-name-input {
  min-width: 280px;
}

@media (max-width: 576px) {
  .btn {
    min-height: 44px;
  }

  .exam-text-area .exam-question-text {
    line-height: 1.55;
  }

  .table > :not(caption) > * > * {
    padding: 0.5rem;
  }

  .topic-name-input {
    min-width: 160px;
    width: 100%;
  }
}