/* ── Quiz option buttons ─────────────────────────────────── */
.quiz-opt {
  width: 100%;
  padding: 16px 20px;
  border: 1.5px solid var(--gray-200);
  border-radius: 10px;
  background: #fff;
  font-size: 15px;
  font-family: inherit;
  font-weight: 500;
  color: var(--gray-800);
  cursor: pointer;
  text-align: center;
  transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.quiz-opt:hover {
  border-color: var(--blue-400);
  background: var(--blue-50);
  color: var(--blue-800);
}
.quiz-opt.selected {
  border-color: var(--blue-500, #4A9FCC);
  background: var(--blue-50);
  color: var(--blue-800);
  font-weight: 700;
  box-shadow: 0 0 0 3px rgba(74,159,204,.15);
}

/* ── Progress bar ────────────────────────────────────────── */
.quiz-progress {
  height: 6px;
  background: var(--gray-100);
  border-radius: 99px;
  overflow: hidden;
}
.quiz-progress span {
  display: block;
  height: 100%;
  background: var(--blue-400, #4A9FCC);
  border-radius: 99px;
  transition: width .3s ease;
}

/* ── Question counter tag ────────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
}
.tag.blue {
  background: var(--blue-50);
  color: var(--blue-700);
}

/* ── Domain score bars (results screen) ─────────────────── */
.mock-bar {
  height: 8px;
  background: var(--gray-100);
  border-radius: 99px;
  overflow: hidden;
}
.mock-bar span {
  display: block;
  height: 100%;
  border-radius: 99px;
  transition: width .5s cubic-bezier(.4,0,.2,1);
}

@media (max-width: 600px) {
  .domain-score-row { grid-template-columns: 1fr 44px !important; gap: 10px !important; }
  .domain-bar { display: none; }
  .quiz-opt { padding: 14px 16px; font-size: 14px; }
}