/* PATCH16: emergency runtime visual fixes */

#app {
  background: #fff !important;
}

#startScreen.hidden,
#questionScreen.hidden,
#finishScreen.hidden,
.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

#startScreen:not(.hidden),
#finishScreen:not(.hidden) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 100svh !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
}

#questionScreen:not(.hidden) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 100svh !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff !important;
}

.start-card,
.question-card {
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#startBtn,
#openTree,
#closeTree,
#nextBtn,
#backBtn,
#skipBtn,
#submitBtn,
.choice,
.tree-item {
  pointer-events: auto !important;
  touch-action: manipulation !important;
  cursor: pointer !important;
}

#treePanel.tree-panel {
  width: min(86vw, 360px) !important;
  z-index: 9500 !important;
  background: #fff !important;
}

#treePanel.tree-panel.open,
body.menu-open #treePanel.tree-panel {
  transform: translateX(0) !important;
}

#tree.tree {
  display: grid !important;
  gap: 12px !important;
}

#tree .tree-item {
  width: 100% !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
  padding: 16px 14px !important;
  border-radius: 22px !important;
  background: #f6f8fb !important;
  color: #000 !important;
  text-align: left !important;
  border: 1px solid transparent !important;
  font-size: 18px !important;
  line-height: 1.16 !important;
  font-weight: 850 !important;
}

#tree .tree-item .num {
  display: block !important;
  font-weight: 950 !important;
  color: #000 !important;
  min-width: 28px !important;
}

#tree .tree-item .label {
  display: block !important;
  min-width: 0 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

#tree .tree-item.active {
  background: #eaf3ff !important;
  border-color: #0074ff !important;
  box-shadow: 0 14px 34px rgba(0,109,255,.16) !important;
}

#tree .tree-item.answered {
  background: #f0fdf4 !important;
}

#answerHost {
  display: grid !important;
  gap: 10px !important;
}

#answerHost .input,
#answerHost input,
#answerHost textarea {
  width: 100% !important;
  min-height: 54px !important;
  border-radius: 18px !important;
  border: 1px solid #dfe6ef !important;
  padding: 14px 16px !important;
  font-size: 18px !important;
}

#answerHost textarea {
  min-height: 120px !important;
}

#answerHost .choice {
  width: 100% !important;
  border-radius: 20px !important;
  border: 1px solid #dfe6ef !important;
  background: #fff !important;
  padding: 16px !important;
  text-align: left !important;
  color: #000 !important;
  font-size: 20px !important;
  font-weight: 850 !important;
}

#answerHost .choice.selected {
  background: #eaf3ff !important;
  border-color: #0074ff !important;
}

.emergency-badge{display:none!important;}


/* PATCH20_LOWER_FORM */

/* На телефоне карточка ближе к нижней части экрана, чтобы до кнопок было легче дотянуться. */
@media (max-width: 860px) {
  #startScreen:not(.hidden),
  #questionScreen:not(.hidden),
  #finishScreen:not(.hidden) {
    align-items: flex-end !important;
    justify-content: center !important;
    padding-top: clamp(72px, 13svh, 150px) !important;
    padding-bottom: clamp(10px, 3.5svh, 34px) !important;
    padding-left: 38px !important;
    padding-right: 8px !important;
  }

  #startScreen .start-card,
  #questionScreen .question-card,
  #finishScreen .start-card {
    margin-top: auto !important;
    margin-bottom: 0 !important;
    max-height: 82svh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #questionScreen .question-card {
    width: min(100%, 760px) !important;
  }

  #questionScreen .card-actions {
    margin-top: 14px !important;
  }
}

/* Если JS спрятал кнопку "Пропустить" на первом экране, сетка кнопок не должна ломаться. */
#skipBtn[style*="display: none"] {
  display: none !important;
}


/* PATCH21_MINIMAL_WHITE_QUESTION_UI */

html,
body,
#app,
.main,
#startScreen,
#questionScreen,
#finishScreen {
  background: #fff !important;
}

/* Главная идея: никакой карточки, рамки и тени. Только текст на белом фоне. */
#questionScreen:not(.hidden) {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100svh !important;
  height: 100svh !important;
  padding: 72px 18px 145px 44px !important;
  background: #fff !important;
}

#questionScreen .question-card {
  width: 100% !important;
  max-width: 720px !important;
  min-height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
  display: grid !important;
  align-content: center !important;
  gap: 22px !important;
  filter: none !important;
  transform: none !important;
}

/* Текст — максимально чёрный и резкий */
#questionScreen .step-label,
#questionScreen #stepTitle,
#questionScreen #counter {
  color: #111 !important;
  opacity: .82 !important;
  font-weight: 850 !important;
}

#questionScreen #questionText {
  color: #000 !important;
  font-weight: 950 !important;
  letter-spacing: -0.045em !important;
  line-height: .98 !important;
  text-wrap: balance !important;
  animation: questionTextReveal .58s ease both !important;
}

#questionScreen #hintText,
#questionScreen .hint {
  color: #151515 !important;
  opacity: .9 !important;
  font-weight: 780 !important;
  line-height: 1.18 !important;
  animation: questionTextReveal .68s ease .08s both !important;
}

#questionScreen #answerHost {
  animation: questionTextReveal .7s ease .13s both !important;
}

/* Кнопки внизу, под пальцем */
#questionScreen .card-actions {
  position: fixed !important;
  left: 44px !important;
  right: 12px !important;
  bottom: max(16px, env(safe-area-inset-bottom)) !important;
  z-index: 8000 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

#questionScreen .card-actions button {
  min-height: 62px !important;
  border-radius: 999px !important;
  font-size: 20px !important;
  font-weight: 900 !important;
}

/* Если скрыли Назад/Пропустить, Дальше занимает всю ширину */
#questionScreen .card-actions:has(#backBtn[style*="display: none"]):has(#skipBtn[style*="display: none"]) {
  grid-template-columns: 1fr !important;
}

#questionScreen #backBtn[style*="display: none"],
#questionScreen #skipBtn[style*="display: none"] {
  display: none !important;
}

/* Стартовая карточка пока оставляем аккуратной, но делаем фон чище */
#startScreen:not(.hidden),
#finishScreen:not(.hidden) {
  background: #fff !important;
}

#startScreen .start-card,
#finishScreen .start-card {
  background: rgba(255,255,255,.96) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.08) !important;
}

/* Мягкое затемнение-появление текста */
@keyframes questionTextReveal {
  0% {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(10px);
    color: rgba(0,0,0,.05);
  }
  55% {
    opacity: .65;
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
    color: #000;
  }
}

@media (max-width: 420px) {
  #questionScreen:not(.hidden) {
    padding-top: 66px !important;
    padding-bottom: 142px !important;
    padding-left: 44px !important;
    padding-right: 12px !important;
  }

  #questionScreen .question-card {
    gap: 18px !important;
  }

  #questionScreen #questionText {
    font-size: clamp(32px, 9.2vw, 48px) !important;
  }

  #questionScreen #hintText,
  #questionScreen .hint {
    font-size: clamp(21px, 6.2vw, 30px) !important;
  }

  #questionScreen .card-actions {
    left: 44px !important;
    right: 12px !important;
    bottom: 16px !important;
  }

  #questionScreen .card-actions button {
    min-height: 60px !important;
    font-size: 20px !important;
  }
}


/* PATCH22_STABLE_MOBILE_QUESTION_LAYOUT */

/*
  Новый принцип:
  - экран вопроса = колонка на всю высоту;
  - верх/текст/ответы прокручиваются внутри карточки;
  - кнопки находятся внизу внутри потока, не fixed;
  - ничего не налезает друг на друга.
*/

html,
body,
#app,
.main,
#questionScreen {
  background: #fff !important;
}

#questionScreen:not(.hidden) {
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  min-height: 100svh !important;
  height: 100svh !important;
  padding: 54px 12px 14px 44px !important;
  background: #fff !important;
  overflow: hidden !important;
}

/* Убираем визуальную карточку, но оставляем нормальную компоновку */
#questionScreen .question-card {
  width: 100% !important;
  max-width: 760px !important;
  height: calc(100svh - 68px) !important;
  max-height: calc(100svh - 68px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 14px !important;
  overflow: hidden !important;
  filter: none !important;
  transform: none !important;
}

/* Верхняя строка */
#questionScreen .card-top,
#questionScreen .question-top,
#questionScreen .question-meta {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 30px !important;
}

#questionScreen #stepTitle,
#questionScreen .step-label {
  color: #222 !important;
  opacity: .9 !important;
  font-size: clamp(16px, 4.4vw, 22px) !important;
  line-height: 1.1 !important;
  font-weight: 850 !important;
  letter-spacing: -0.02em !important;
}

#questionScreen #counter {
  color: #000 !important;
  opacity: .95 !important;
  font-size: clamp(18px, 5vw, 24px) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

/* Основная область прокрутки. Именно она не даёт кнопкам налезать на текст. */
#questionScreen .question-body,
#questionScreen .card-body {
  min-height: 0 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 4px 0 8px !important;
  display: grid !important;
  align-content: center !important;
  gap: 18px !important;
}

/* Если в HTML нет отдельной body-обёртки, всё равно страхуем элементы */
#questionScreen #questionText,
#questionScreen #hintText,
#questionScreen #answerHost {
  max-width: 100% !important;
}

/* Главный вопрос: крупный, но уже не гигантский */
#questionScreen #questionText {
  color: #000 !important;
  font-size: clamp(25px, 7.1vw, 34px) !important;
  line-height: 1.04 !important;
  font-weight: 950 !important;
  letter-spacing: -0.04em !important;
  text-wrap: balance !important;
  margin: 0 !important;
  animation: questionTextRevealClean .42s ease both !important;
}

/* Подсказка/описание */
#questionScreen #hintText,
#questionScreen .hint {
  color: #111 !important;
  opacity: .88 !important;
  font-size: clamp(17px, 5.1vw, 22px) !important;
  line-height: 1.18 !important;
  font-weight: 760 !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  animation: questionTextRevealClean .46s ease .04s both !important;
}

/* Ответы */
#questionScreen #answerHost {
  display: grid !important;
  gap: 10px !important;
  animation: questionTextRevealClean .48s ease .08s both !important;
}

#questionScreen #answerHost .choice,
#questionScreen #answerHost input,
#questionScreen #answerHost textarea,
#questionScreen #answerHost .input {
  width: 100% !important;
  box-sizing: border-box !important;
  font-size: clamp(17px, 5vw, 22px) !important;
  line-height: 1.15 !important;
  font-weight: 800 !important;
  color: #000 !important;
}

/* Кнопки теперь НЕ fixed. Они внизу карточки и не перекрывают текст. */
#questionScreen .card-actions {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 2 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 6px 0 0 !important;
  background: #fff !important;
}

#questionScreen .card-actions button {
  min-height: 54px !important;
  border-radius: 999px !important;
  font-size: clamp(17px, 5vw, 22px) !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

/* Кнопка "Пропустить", когда она есть, занимает всю ширину второй строкой */
#questionScreen #skipBtn {
  grid-column: 1 / -1 !important;
}

/* Первый вопрос: если Назад и Пропустить скрыты, Дальше одна на всю ширину */
#questionScreen .card-actions:has(#backBtn[style*="display: none"]):has(#skipBtn[style*="display: none"]) {
  grid-template-columns: 1fr !important;
}

#questionScreen #backBtn[style*="display: none"],
#questionScreen #skipBtn[style*="display: none"] {
  display: none !important;
}

/* Мягкое появление без сильного blur, чтобы не было мыла */
@keyframes questionTextRevealClean {
  0% {
    opacity: 0;
    transform: translateY(8px);
    color: rgba(0,0,0,.14);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    color: #000;
  }
}

/* Узкие экраны */
@media (max-width: 420px) {
  #questionScreen:not(.hidden) {
    padding-top: 48px !important;
    padding-right: 10px !important;
    padding-bottom: 12px !important;
    padding-left: 44px !important;
  }

  #questionScreen .question-card {
    height: calc(100svh - 60px) !important;
    max-height: calc(100svh - 60px) !important;
    gap: 12px !important;
  }

  #questionScreen .question-body,
  #questionScreen .card-body {
    gap: 16px !important;
  }

  #questionScreen #questionText {
    font-size: clamp(24px, 6.8vw, 32px) !important;
  }

  #questionScreen #hintText,
  #questionScreen .hint {
    font-size: clamp(16px, 4.8vw, 21px) !important;
  }

  #questionScreen .card-actions button {
    min-height: 52px !important;
  }
}

/* Очень низкие экраны: делаем компактнее */
@media (max-height: 700px) {
  #questionScreen:not(.hidden) {
    padding-top: 34px !important;
    padding-bottom: 8px !important;
  }

  #questionScreen .question-card {
    height: calc(100svh - 42px) !important;
    max-height: calc(100svh - 42px) !important;
    gap: 9px !important;
  }

  #questionScreen #questionText {
    font-size: clamp(22px, 6.3vw, 30px) !important;
    line-height: 1.02 !important;
  }

  #questionScreen #hintText,
  #questionScreen .hint {
    font-size: clamp(15px, 4.4vw, 19px) !important;
    line-height: 1.14 !important;
  }

  #questionScreen .card-actions button {
    min-height: 48px !important;
    font-size: clamp(16px, 4.6vw, 20px) !important;
  }
}


/* PATCH23_CENTERED_QUESTION_FLOW */

/*
  Финальная логика экрана вопроса:
  - верхняя строка: раздел + прогресс;
  - середина: вопрос + подсказка + поле/варианты;
  - низ: кнопки;
  - ничего не накладывается.
*/

html,
body,
#app,
.main,
#questionScreen {
  background: #fff !important;
}

#questionScreen:not(.hidden) {
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 100svh !important;
  height: 100svh !important;
  padding: 46px 12px 12px 44px !important;
  background: #fff !important;
  overflow: hidden !important;
}

/* Никаких карточек, рамок, теней */
#questionScreen .question-card {
  width: 100% !important;
  max-width: 760px !important;
  height: calc(100svh - 58px) !important;
  max-height: calc(100svh - 58px) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 12px !important;
}

/* Верх */
#questionScreen .card-top,
#questionScreen .question-top,
#questionScreen .question-meta {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  min-height: 32px !important;
  margin: 0 !important;
  padding: 0 !important;
}

#questionScreen #stepTitle,
#questionScreen .step-label {
  color: #2b2b2b !important;
  opacity: .92 !important;
  font-size: clamp(17px, 4.5vw, 22px) !important;
  line-height: 1.08 !important;
  font-weight: 850 !important;
  letter-spacing: -0.025em !important;
}

#questionScreen #counter {
  color: #000 !important;
  opacity: 1 !important;
  font-size: clamp(19px, 5.2vw, 25px) !important;
  line-height: 1 !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

/* Центральный блок вопроса */
#questionFlow.question-flow {
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  display: grid !important;
  align-content: center !important;
  gap: clamp(14px, 2.2vh, 22px) !important;
  padding: clamp(16px, 5vh, 46px) 0 clamp(14px, 2.2vh, 22px) !important;
}

/* Длинные вопросы — начинаем чуть выше, но без огромной пустоты */
#questionFlow.question-flow--long {
  align-content: start !important;
  padding-top: clamp(18px, 3.2vh, 34px) !important;
}

/* Короткие вопросы — строго красиво ближе к центру */
#questionFlow.question-flow--short {
  align-content: center !important;
}

/* Главный вопрос */
#questionScreen #questionText {
  color: #000 !important;
  font-size: clamp(25px, 6.7vw, 35px) !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  letter-spacing: -0.042em !important;
  text-wrap: balance !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  animation: questionReveal23 .38s ease both !important;
}

/* Подсказка */
#questionScreen #hintText,
#questionScreen .hint {
  color: #161616 !important;
  opacity: .9 !important;
  font-size: clamp(16px, 4.55vw, 21px) !important;
  line-height: 1.16 !important;
  font-weight: 760 !important;
  letter-spacing: -0.018em !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  animation: questionReveal23 .42s ease .04s both !important;
}

/* Ответы рядом с подсказкой, не уезжают вниз */
#questionScreen #answerHost {
  display: grid !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  animation: questionReveal23 .44s ease .08s both !important;
}

#questionScreen #answerHost .choice,
#questionScreen #answerHost input,
#questionScreen #answerHost textarea,
#questionScreen #answerHost .input {
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 52px !important;
  border-radius: 18px !important;
  font-size: clamp(17px, 4.7vw, 21px) !important;
  line-height: 1.12 !important;
  font-weight: 820 !important;
  color: #000 !important;
}

/* Нижняя навигация. Не fixed, не перекрывает текст */
#questionScreen .card-actions {
  position: static !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  z-index: 2 !important;
}

#questionScreen .card-actions button {
  min-height: 54px !important;
  border-radius: 999px !important;
  font-size: clamp(17px, 4.9vw, 21px) !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
}

#questionScreen #skipBtn {
  grid-column: 1 / -1 !important;
}

/* Первый вопрос: только Дальше */
#questionScreen .card-actions:has(#backBtn[style*="display: none"]):has(#skipBtn[style*="display: none"]) {
  grid-template-columns: 1fr !important;
}

#questionScreen #backBtn[style*="display: none"],
#questionScreen #skipBtn[style*="display: none"] {
  display: none !important;
}

@keyframes questionReveal23 {
  0% {
    opacity: 0;
    transform: translateY(7px);
    color: rgba(0,0,0,.12);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    color: #000;
  }
}

/* Honor / узкие экраны */
@media (max-width: 430px) {
  #questionScreen:not(.hidden) {
    padding-top: 44px !important;
    padding-left: 44px !important;
    padding-right: 10px !important;
    padding-bottom: 10px !important;
  }

  #questionScreen .question-card {
    height: calc(100svh - 54px) !important;
    max-height: calc(100svh - 54px) !important;
    gap: 11px !important;
  }

  #questionFlow.question-flow {
    gap: clamp(12px, 2vh, 18px) !important;
    padding-top: clamp(18px, 4.2vh, 38px) !important;
    padding-bottom: 12px !important;
  }

  #questionFlow.question-flow--long {
    padding-top: clamp(12px, 2.6vh, 24px) !important;
  }

  #questionScreen #questionText {
    font-size: clamp(24px, 6.45vw, 32px) !important;
    line-height: 1.045 !important;
  }

  #questionScreen #hintText,
  #questionScreen .hint {
    font-size: clamp(15px, 4.35vw, 20px) !important;
    line-height: 1.16 !important;
  }

  #questionScreen #answerHost .choice,
  #questionScreen #answerHost input,
  #questionScreen #answerHost textarea,
  #questionScreen #answerHost .input {
    min-height: 50px !important;
    font-size: clamp(16px, 4.45vw, 20px) !important;
  }

  #questionScreen .card-actions button {
    min-height: 52px !important;
  }
}

/* Низкие экраны: компактнее */
@media (max-height: 720px) {
  #questionScreen:not(.hidden) {
    padding-top: 32px !important;
    padding-bottom: 8px !important;
  }

  #questionScreen .question-card {
    height: calc(100svh - 40px) !important;
    max-height: calc(100svh - 40px) !important;
    gap: 8px !important;
  }

  #questionFlow.question-flow {
    gap: 11px !important;
    padding-top: 12px !important;
    padding-bottom: 8px !important;
  }

  #questionScreen #questionText {
    font-size: clamp(22px, 6vw, 29px) !important;
  }

  #questionScreen #hintText,
  #questionScreen .hint {
    font-size: clamp(14px, 4vw, 18px) !important;
  }

  #questionScreen #answerHost .choice,
  #questionScreen #answerHost input,
  #questionScreen #answerHost textarea,
  #questionScreen #answerHost .input {
    min-height: 46px !important;
  }

  #questionScreen .card-actions button {
    min-height: 48px !important;
  }
}


/* PATCH24_FIX_CLIPPED_QUESTIONS */

/*
  Фикс обрезанных вопросов:
  - flow всегда имеет нормальную верхнюю зону;
  - при множестве вариантов контент начинается сверху;
  - варианты компактнее;
  - кнопки не перекрывают список.
*/

#questionScreen:not(.hidden) {
  padding-top: 38px !important;
  padding-bottom: 10px !important;
  overflow: hidden !important;
}

#questionScreen .question-card {
  height: calc(100svh - 48px) !important;
  max-height: calc(100svh - 48px) !important;
  grid-template-rows: auto minmax(0, 1fr) auto !important;
  gap: 10px !important;
  overflow: hidden !important;
}

/* Верхняя строка компактнее, чтобы освободить место вопросу */
#questionScreen .card-top,
#questionScreen .question-top,
#questionScreen .question-meta {
  min-height: 28px !important;
}

#questionScreen #stepTitle,
#questionScreen .step-label {
  font-size: clamp(16px, 4.2vw, 21px) !important;
  line-height: 1.05 !important;
}

#questionScreen #counter {
  font-size: clamp(18px, 5vw, 24px) !important;
}

/* Главный блок вопроса */
#questionFlow.question-flow {
  min-height: 0 !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  align-content: center !important;
  padding-top: clamp(10px, 2.2vh, 24px) !important;
  padding-bottom: clamp(8px, 1.8vh, 18px) !important;
  gap: clamp(11px, 1.8vh, 18px) !important;
  scroll-padding-top: 14px !important;
}

/* Длинные вопросы и много вариантов: всегда начинаем сверху, ничего не обрезаем */
#questionFlow.question-flow--long,
#questionFlow.question-flow--many-options {
  align-content: start !important;
  padding-top: 8px !important;
}

/* Вопросы с большим количеством вариантов должны быть компактнее */
#questionFlow.question-flow--many-options #questionText {
  font-size: clamp(21px, 5.6vw, 28px) !important;
  line-height: 1.03 !important;
}

#questionFlow.question-flow--many-options #hintText,
#questionFlow.question-flow--many-options .hint {
  font-size: clamp(14px, 3.9vw, 18px) !important;
  line-height: 1.14 !important;
}

/* Сам вопрос — без риска обрезки сверху */
#questionScreen #questionText {
  display: block !important;
  overflow: visible !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Ответы/варианты компактнее */
#questionScreen #answerHost {
  gap: 8px !important;
  overflow: visible !important;
}

#questionScreen #answerHost .choice,
#questionScreen #answerHost input,
#questionScreen #answerHost textarea,
#questionScreen #answerHost .input {
  min-height: 48px !important;
  padding: 12px 16px !important;
  border-radius: 16px !important;
  font-size: clamp(16px, 4.3vw, 20px) !important;
  line-height: 1.1 !important;
}

/* Для длинных списков вариантов ещё компактнее */
#questionFlow.question-flow--many-options #answerHost .choice {
  min-height: 44px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Нижние кнопки компактнее, чтобы больше места осталось контенту */
#questionScreen .card-actions {
  gap: 8px !important;
  padding-top: 4px !important;
}

#questionScreen .card-actions button {
  min-height: 50px !important;
  font-size: clamp(16px, 4.6vw, 20px) !important;
}

/* Очень узкие/низкие экраны */
@media (max-width: 430px) {
  #questionScreen:not(.hidden) {
    padding-top: 34px !important;
    padding-left: 44px !important;
    padding-right: 10px !important;
    padding-bottom: 8px !important;
  }

  #questionScreen .question-card {
    height: calc(100svh - 42px) !important;
    max-height: calc(100svh - 42px) !important;
    gap: 8px !important;
  }

  #questionFlow.question-flow {
    gap: 10px !important;
    padding-top: 8px !important;
    padding-bottom: 7px !important;
  }

  #questionScreen #questionText {
    font-size: clamp(22px, 6vw, 30px) !important;
    line-height: 1.03 !important;
  }

  #questionFlow.question-flow--many-options #questionText {
    font-size: clamp(20px, 5.4vw, 27px) !important;
  }

  #questionScreen #hintText,
  #questionScreen .hint {
    font-size: clamp(14px, 4vw, 18px) !important;
  }

  #questionScreen #answerHost .choice,
  #questionScreen #answerHost input,
  #questionScreen #answerHost textarea,
  #questionScreen #answerHost .input {
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: clamp(15px, 4.1vw, 19px) !important;
  }

  #questionScreen .card-actions button {
    min-height: 48px !important;
  }
}

@media (max-height: 720px) {
  #questionScreen:not(.hidden) {
    padding-top: 26px !important;
    padding-bottom: 6px !important;
  }

  #questionScreen .question-card {
    height: calc(100svh - 32px) !important;
    max-height: calc(100svh - 32px) !important;
  }

  #questionScreen #questionText {
    font-size: clamp(20px, 5.4vw, 27px) !important;
  }

  #questionFlow.question-flow--many-options #questionText {
    font-size: clamp(19px, 5vw, 25px) !important;
  }

  #questionScreen #answerHost .choice,
  #questionScreen #answerHost input,
  #questionScreen #answerHost textarea,
  #questionScreen #answerHost .input {
    min-height: 40px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  #questionScreen .card-actions button {
    min-height: 44px !important;
  }
}