:root {
  --red-50: #fde7e7;
  --red-200: #f5b5b5;
  --orange-50: #fff0e1;
  --orange-200: #ffc58f;
  --yellow-50: #fff9e6;
  --yellow-200: #ffe38a;
  --lime-50: #eefbe6;
  --lime-200: #bde9a2;
  --green-50: #e8fbf2;
  --green-200: #97e3c0;
}

.question-box {
  line-height: 1.6;
}

/* Ответы-карточки */
.answer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Сделать третью карточку шире и по центру на мобильных */
.answer-grid .answer-card:nth-child(3) {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 420px;
}

.answer-card {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid transparent;
  background: #fff;
  border-radius: 14px;
  padding: 14px 12px;
  text-align: center;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.08s ease, background-color 0.15s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.answer-card:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(32, 107, 196, 0.25);
}

.answer-card__emoji {
  font-size: 2rem;
  line-height: 1;
}

.answer-card__label {
  font-weight: 500;
  margin-top: 8px;
}

/* Цветовые модификаторы */
.answer-card--red {
  background: var(--red-50);
  border-color: #df4b4b;
}
.answer-card--red:hover {
  box-shadow: 0 6px 16px rgba(223, 75, 75, 0.25);
  transform: translateY(-1px);
}

.answer-card--orange {
  background: var(--orange-50);
  border-color: #ef8a2e;
}
.answer-card--orange:hover {
  box-shadow: 0 6px 16px rgba(239, 138, 46, 0.22);
  transform: translateY(-1px);
}

.answer-card--yellow {
  background: var(--yellow-50);
  border-color: #f0c230;
}
.answer-card--yellow:hover {
  box-shadow: 0 6px 16px rgba(240, 194, 48, 0.22);
  transform: translateY(-1px);
}

.answer-card--lime {
  background: var(--lime-50);
  border-color: #7fc35b;
}
.answer-card--lime:hover {
  box-shadow: 0 6px 16px rgba(127, 195, 91, 0.22);
  transform: translateY(-1px);
}

.answer-card--green {
  background: var(--green-50);
  border-color: #39b980;
}
.answer-card--green:hover {
  box-shadow: 0 6px 16px rgba(57, 185, 128, 0.22);
  transform: translateY(-1px);
}

/* Desktop: 5 карточек в ряд, одинаковая ширина */
@media (min-width: 992px) {
  .answer-grid {
    display: flex;
    gap: 14px;
  }
  .answer-grid .answer-card {
    flex: 1 1 0;
  }
}

.results-box .result-item .progress-bar {
  transition: width 0.4s ease;
}

/* Профессии: вывод в две колонки */
.results-box .result-item ul {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
  column-gap: 24px;
}

.results-box .result-item li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}

/* На очень узких экранах оставляем одну колонку для читабельности */
@media (max-width: 575.98px) {
  .results-box .result-item ul {
    -webkit-columns: 1;
    -moz-columns: 1;
    columns: 1;
  }
}