/* Оформление. Цвета берутся из темы платформы: в Telegram — из клиента,
   в браузере — светлая тема по умолчанию. */
:root {
  --фон: #ffffff;
  --текст: #111111;
  --второстепенный: #707579;
  --кнопка: #2f6fed;
  --текст-кнопки: #ffffff;
  --подложка: #f4f4f5;
  --опасно: #d1453b;
  --внимание: #b8860b;
  --хорошо: #2e7d32;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--фон);
  color: var(--текст);
  -webkit-text-size-adjust: 100%;
}

.приложение {
  max-width: 560px;
  margin: 0 auto;
  padding: 16px 16px 96px;
}

h1 { font-size: 22px; line-height: 1.3; margin: 0 0 12px; }
h2 { font-size: 18px; line-height: 1.35; margin: 24px 0 8px; }
p  { margin: 0 0 12px; }
.второстепенно { color: var(--второстепенный); font-size: 14px; }

/* ── полоса прогресса анкеты */
.прогресс { height: 3px; background: var(--подложка); border-radius: 2px; margin-bottom: 20px; }
.прогресс > i { display: block; height: 100%; background: var(--кнопка); border-radius: 2px; transition: width .2s; }
.шаг { color: var(--второстепенный); font-size: 13px; margin-bottom: 6px; }

/* ── варианты ответа */
.варианты { display: flex; flex-direction: column; gap: 8px; margin: 16px 0; }
.вариант {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border: 1.5px solid var(--подложка); border-radius: 12px;
  background: var(--фон); color: var(--текст); text-align: left;
  font: inherit; cursor: pointer; width: 100%;
}
.вариант:hover { border-color: #d7d7db; }
.вариант[aria-pressed="true"] { border-color: var(--кнопка); background: color-mix(in srgb, var(--кнопка) 7%, transparent); }
.вариант .метка { flex: 1; }
.вариант .номер {
  min-width: 22px; height: 22px; border-radius: 50%; background: var(--кнопка);
  color: var(--текст-кнопки); font-size: 13px; display: grid; place-items: center;
}
.группа-вариантов { color: var(--второстепенный); font-size: 13px; margin: 14px 0 2px; }

/* ── кнопки платформы (только веб-реализация) */
.главная-кнопка {
  position: fixed; left: 16px; right: 16px; bottom: 16px; max-width: 528px;
  margin: 0 auto; padding: 14px; border: 0; border-radius: 12px;
  background: var(--кнопка); color: var(--текст-кнопки); font: 600 16px/1 inherit; cursor: pointer;
}
.главная-кнопка:disabled { opacity: .45; cursor: default; }
.кнопка-назад {
  position: fixed; top: 10px; left: 10px; width: 36px; height: 36px;
  border: 0; border-radius: 50%; background: var(--подложка); color: var(--текст);
  font-size: 18px; cursor: pointer;
}

/* ── формула */
.плашка { padding: 14px 16px; border-radius: 12px; background: var(--подложка); margin: 0 0 16px; }
.плашка.опасно { background: color-mix(in srgb, var(--опасно) 10%, transparent); }
.слот { border: 1.5px solid var(--подложка); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.слот h3 { margin: 0 0 6px; font-size: 16px; }
.требование { color: var(--второстепенный); font-size: 14px; margin-bottom: 8px; }
.пример { padding: 8px 0; border-top: 1px solid var(--подложка); font-size: 15px; }
.пример .марка { color: var(--второстепенный); font-size: 13px; }
.пометка { display: inline-block; font-size: 12px; color: var(--внимание); }
.честно { border-left: 3px solid var(--внимание); padding-left: 12px; margin: 10px 0; }
.красный-флаг { border-left: 3px solid var(--опасно); padding-left: 12px; margin: 10px 0; }
.назначение { margin: 10px 0 0; padding: 0; list-style: none; font-size: 15px; }
.назначение li { padding: 4px 0; border-top: 1px solid var(--подложка); }
.назначение b { font-weight: 600; }

/* ── поля ввода */
.поле {
  width: 100%; padding: 12px 14px; margin: 12px 0;
  border: 1.5px solid var(--подложка); border-radius: 12px;
  background: var(--фон); color: var(--текст); font: inherit;
}
.поле:focus { outline: none; border-color: var(--кнопка); }
.поле-состав { min-height: 180px; resize: vertical; }

/* ── раскрывающееся «Почему?» */
details { margin-top: 8px; }
summary { cursor: pointer; color: var(--кнопка); font-size: 14px; }
details p { font-size: 14px; margin: 8px 0 0; }

/* ── цвета плашек вердикта */
.плашка.внимание { background: color-mix(in srgb, var(--внимание) 12%, transparent); }
.плашка.хорошо   { background: color-mix(in srgb, var(--хорошо) 10%, transparent); }
.плашка h1 { margin: 0 0 6px; }

/* Экран загрузки и ошибки загрузки */
.загрузка { padding-top: 30vh; text-align: center; }
.полоса { height: 6px; border-radius: 3px; background: var(--подложка); overflow: hidden; margin: 12px 0 8px; }
.полоса-заполнено { height: 100%; background: var(--кнопка); transition: width 0.2s; }
.кнопка-повтора {
  margin: 16px 0 8px; padding: 12px 20px; border: 0; border-radius: 10px;
  background: var(--кнопка); color: var(--текст-кнопки); font-size: 16px;
}
.подробность { font-size: 12px; }

/* «Назад» на каждом вопросе анкеты */
.назад-в-анкете {
  background: none; border: 0; padding: 4px 0; margin: 0 0 8px;
  color: var(--кнопка); font-size: 15px; cursor: pointer;
}