/* =========================================================
   «Наш Малыш» — оформление приложения
   Построено строго по брендбуку версии 1.0.

   Три правила брендбука, которые здесь соблюдаются везде:
     1. Теней нет. Совсем. Глубина строится цветом.
     2. Эмодзи и сердечки не используются — только линейные иконки.
     3. Скругления фиксированные: карточки 24, кнопки 22 или 999.
        Промежуточных значений не бывает.
   ========================================================= */

/* ---------- 1. Токены брендбука ---------- */
:root {
  /* Палитра — страница 11 брендбука */
  --blue:      #29A8E0;   /* Голубой — основной фирменный */
  --blue-deep: #1E8AC0;   /* нажатое состояние кнопки */
  --sky:       #BFE6F7;   /* Небо — подложки, карточки */
  --sky-soft:  #DCF0FB;   /* небо, разбавленное молоком */
  --sky-deep:  #8BD0EF;   /* небо на шаг ближе к Голубому:
                             спокойный способ выделить одну
                             карточку из трёх, не крича цветом */
  --rose:      #F5AEC4;   /* мягкий розовый — только для выбора
                             «Девочка». Единственное отступление
                             от палитры брендбука, по просьбе
                             заказчика: пол ребёнка привычнее
                             читается цветом */
  --coral:     #FF6F5E;   /* Коралл — акценты, ошибки */
  --sun:       #FFC24A;   /* Солнце — метки, знак */
  --ink:       #10395B;   /* Чернила — ТОЛЬКО текст */
  --milk:      #FDF7F0;   /* Молоко — фон */

  /* Производные от чернил: брендбук разрешает чернила только для
     текста, поэтому линии и приглушённый текст — это те же чернила
     с прозрачностью, а не отдельные серые цвета. */
  --ink-soft:  rgba(16, 57, 91, 0.72);
  --ink-faint: rgba(16, 57, 91, 0.48);
  --line:      rgba(16, 57, 91, 0.12);
  --line-firm: rgba(16, 57, 91, 0.20);

  /* Неактивное состояние */
  --off-bg:   #E7EDF2;
  --off-text: rgba(16, 57, 91, 0.38);

  /* Шрифты — страница 12 брендбука */
  --font-display: 'Cormorant Infant', Cambria, Georgia, serif;
  --font-text: 'Golos Text', 'Segoe UI', Roboto, system-ui, sans-serif;

  /* Скругления — страница 13. Других значений быть не должно. */
  --r-card: 24px;
  --r-btn: 999px;
  --r-btn-sq: 22px;
  --r-field: 22px;

  --pad: 20px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* Высота нижней навигации — чтобы контент под неё не заезжал */
  --nav-h: 64px;
}

/* ---------- 2. Сброс ---------- */

/* Помечено скрытым — значит скрыто, что бы ни говорили другие правила.
   Однажды это уже стоило нам «мутного экрана»: невидимое модальное окно
   висело поверх всего приложения и перехватывало нажатия. */
[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  overscroll-behavior: none;
}

body {
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--milk);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

button, input, textarea, select { font: inherit; color: inherit; }
button { border: none; background: none; cursor: pointer; }
img { display: block; max-width: 100%; }
::-webkit-scrollbar { width: 0; height: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 3. Каркас экрана ---------- */
.screen {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  max-width: 520px;
  margin: 0 auto;
  padding: calc(var(--safe-top) + 12px) var(--pad)
           calc(var(--safe-bottom) + 20px);
}

/* Экран с нижней навигацией — оставляем ей место */
.screen.has-nav {
  padding-bottom: calc(var(--safe-bottom) + var(--nav-h) + 12px);
}

.view {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 18px;
  animation: view-in 0.38s var(--ease) both;
}
@keyframes view-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.spacer { flex: 1; min-height: 8px; }

/* Экран целиком в фирменном голубом — экран ожидания */
.screen--blue { background: var(--blue); }
.screen--blue,
.screen--blue .h1,
.screen--blue .h2 { color: #fff; }
.screen--blue .lead,
.screen--blue .tiny { color: rgba(255, 255, 255, 0.86); }

/* ---------- 4. Типографика ---------- */

/* Заголовки — Cormorant Infant. Прописными не набирается (брендбук). */
.h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 34px;
  line-height: 1.12;
  letter-spacing: 0;
  margin: 0;
  text-wrap: balance;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}
/* Заголовок блока — уже наборный шрифт */
.h3 {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  margin: 0;
}

.lead {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0;
}

.tiny {
  font-size: 13px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink-faint);
  margin: 0;
}

/* Надзаголовок разделов брендбука: разрядка, голубой */
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0;
}

/* ---------- 5. Кнопки (страница 16) ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 0 24px;
  border-radius: var(--r-btn);
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  transition: background-color 0.16s var(--ease), transform 0.14s var(--ease);
}
.btn:active { transform: scale(0.985); }

.btn--primary { background: var(--blue); color: #fff; }
.btn--primary:active { background: var(--blue-deep); }

.btn--secondary {
  background: #fff;
  color: var(--blue);
  box-shadow: inset 0 0 0 1.5px var(--blue);   /* обводка, не тень */
}
.btn--secondary:active { background: var(--sky-soft); }

.btn--accent { background: var(--coral); color: #fff; }
.btn--accent:active { background: #ED5F4E; }

/* «Небесная» кнопка — третий по важности выбор на главной */
.btn--sky { background: var(--sky); color: var(--ink); }
.btn--sky:active { background: #ADDDF3; }

.btn--quiet {
  background: transparent;
  color: var(--ink-soft);
  min-height: 48px;
  font-weight: 500;
}
.btn--quiet:active { color: var(--ink); }

.btn[disabled],
.btn--off {
  background: var(--off-bg);
  color: var(--off-text);
  pointer-events: none;
  box-shadow: none;
}

.btn--sm { min-height: 46px; font-size: 15px; padding: 0 18px; }

/* Кнопка со скруглением 22 — второй разрешённый радиус */
.btn--sq { border-radius: var(--r-btn-sq); }

.row { display: flex; gap: 12px; }
.row > * { flex: 1; }

/* Круглая иконочная кнопка */
.iconbtn {
  width: 44px; height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: var(--r-btn);
  background: #fff;
  /* Обводка обязательна: на молочном фоне белая кнопка без неё
     сливается и выглядит не нажимаемой */
  box-shadow: inset 0 0 0 1.5px var(--line);
  color: var(--ink);
  transition: background-color 0.16s var(--ease);
}
.iconbtn:active { background: var(--sky-soft); }

/* ---------- 6. Иконки ---------- */
/* Сетка 48×48, толщина линии 2.4, скруглённые концы, без заливки.
   Толщина не меняется при масштабировании — поэтому
   vector-effect + фиксированный stroke-width на viewBox 48. */
.ic {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ic--lg { width: 32px; height: 32px; }
.ic--nav { width: 26px; height: 26px; }

/* Единственная заливка во всей иконографии — солнечный круг знака */
.ic .sun { fill: var(--sun); stroke: none; }

/* ---------- 7. Шапка ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
}
.topbar__title {
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  flex: 1;
}

/* ---------- 8. Нижняя навигация (страница 16) ---------- */
.nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: 520px;
  height: calc(var(--nav-h) + var(--safe-bottom));
  padding-bottom: var(--safe-bottom);
  display: flex;
  align-items: center;
  /* Два пункта не растягиваем на всю ширину — держим рядом,
     по центру: так они читаются как пара, а не как края экрана */
  justify-content: center;
  gap: 48px;
  background: #fff;
  border-top: 1px solid var(--line);
  z-index: 40;
}
.nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 18px;
  color: var(--ink-faint);
  font-size: 11px;
  font-weight: 500;
  transition: color 0.16s var(--ease);
}
.nav__item.is-active { color: var(--blue); }

/* ---------- 9. Арка — главная форма бренда ---------- */
/* Верх кадра обрезается полукругом, радиус = половина ширины.
   999px браузер сам ужимает ровно до половины ширины. */
.arch {
  border-radius: 999px 999px 0 0;
  overflow: hidden;
}

/* Рамка загрузки фото в форме арки */
.upload {
  position: relative;
  flex: 1;
  aspect-ratio: 3 / 4;
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  background: var(--sky);
  display: grid;
  place-items: center;
  transition: background-color 0.16s var(--ease);
}
.upload:active { background: #ADDDF3; }

/* Пустая рамка — пунктир по контуру арки, без заливки */
.upload:not(.is-filled) {
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--line-firm);
}
.upload:not(.is-filled):active { background: var(--milk); }

.upload__ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 14px;
  text-align: center;
  color: var(--ink-soft);
}
.upload__ph-text { font-size: 15px; font-weight: 500; }
.upload__ph-hint { font-size: 12px; color: var(--ink-faint); }

.upload__img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.upload__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  color: var(--ink);
  background: rgba(253, 247, 240, 0.92);
}
.upload.is-filled .upload__label { background: rgba(253, 247, 240, 0.92); }

/* Крестик «убрать фото».
   Верх рамки — полукруг, поэтому обычный отступ от угла
   выносил бы кнопку за пределы дуги. Отступы заданы в
   процентах: так крестик остаётся внутри контура при любом
   размере рамки. */
.upload__clear {
  position: absolute;
  top: 18%; right: 16%;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border-radius: var(--r-btn);
  background: rgba(253, 247, 240, 0.92);
  color: var(--ink);
  z-index: 2;
}
.upload__clear .ic {
  width: 13px;
  height: 13px;
  stroke-width: 4;
}

.uploads { display: flex; gap: 14px; }

/* ---------- 10. Поля и метки ---------- */
.field { display: flex; flex-direction: column; gap: 8px; }
.field__label { font-size: 14px; font-weight: 500; color: var(--ink-soft); }

.segmented {
  display: flex;
  gap: 8px;
}
.seg {
  flex: 1;
  min-height: 46px;
  border-radius: var(--r-btn);
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--line);
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 500;
  transition: all 0.16s var(--ease);
}
.seg.is-active {
  background: var(--blue);
  color: #fff;
  box-shadow: none;
}

/* Выбор «Девочка» — мягким розовым. Текст остаётся чернилами:
   белый на розовом читался бы плохо. */
.seg--girl.is-active {
  background: var(--rose);
  color: var(--ink);
}

/* Метки-чипы */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-btn);
  font-size: 13px;
  font-weight: 500;
  background: var(--sky);
  color: var(--ink);
}
.chip--new { background: var(--sun); color: var(--ink); }
.chip--sub { background: var(--coral); color: #fff; }

/* Согласие */
.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 4px 0;
  cursor: pointer;
}
.check__box {
  flex: 0 0 24px;
  width: 24px; height: 24px;
  margin-top: 1px;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--line-firm);
  display: grid; place-items: center;
  color: #fff;
  transition: background-color 0.16s var(--ease);
}
.check.is-on .check__box {
  background: var(--blue);
  box-shadow: none;
}
.check__text { font-size: 13px; line-height: 1.45; color: var(--ink-soft); }
.check__text a { color: var(--blue); }

/* ---------- 11. Карточки ---------- */
.card {
  background: var(--sky);
  border-radius: var(--r-card);
  padding: 18px;
}
.card--plain { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }

/* Плашка-предупреждение (дисклеймер про УЗИ) */
.notice {
  display: flex;
  gap: 12px;
  padding: 16px;
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.notice .ic { color: var(--blue); }

/* ---------- 12. Экран ожидания (страница 17) ---------- */
.waiting {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  text-align: center;
}

/* Солнечный круг в кольце — знак бренда, увеличенный до экрана */
.sunwheel {
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: var(--blue-deep);
  display: grid;
  place-items: center;
  animation: breathe 3.4s ease-in-out infinite;
}
.sunwheel__core {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--sun);
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

.progress {
  width: 100%;
  max-width: 300px;
  height: 6px;
  border-radius: var(--r-btn);
  background: rgba(255, 255, 255, 0.34);
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  width: 0;
  border-radius: var(--r-btn);
  background: var(--sun);
  transition: width 0.5s var(--ease);
}
/* Тот же индикатор на светлом фоне */
.progress--light { background: var(--sky); }
.progress--light .progress__fill { background: var(--coral); }

.waiting__status {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1.15;
  min-height: 32px;
}

/* ---------- 13. Результат ---------- */
.portrait {
  width: 100%;
  aspect-ratio: 3 / 4;
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  background: var(--sky);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }

.variants {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px;
}
.variant {
  flex: 0 0 64px;
  width: 64px;
  height: 84px;
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  background: var(--sky);
  transition: box-shadow 0.16s var(--ease);
}
.variant.is-active { box-shadow: inset 0 0 0 3px var(--blue); }
.variant img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- 14. Дорожка жизни ---------- */

/* Выбор возраста: четыре кнопки в ряд, всегда помещаются
   в ширину экрана — ничего не обрезается и не уезжает вбок */
.ages-pick {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.age-pick {
  min-width: 0;
  min-height: 60px;
  padding: 8px 4px;
  border-radius: var(--r-btn-sq);
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--line);
  color: var(--ink);
  transition: background-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.age-pick.is-on {
  background: var(--sky-soft);
  box-shadow: inset 0 0 0 2px var(--blue);
}
.age-pick__age {
  display: block;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.age-pick__note {
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 500;
  color: var(--ink-faint);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Готовые портреты — ряд арок */
.ages-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.age-card {
  flex: 0 0 132px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  scroll-snap-align: start;
  transition: opacity 0.16s var(--ease);
}
.age-card:active { opacity: 0.85; }

.age-card__arch {
  display: block;
  width: 132px;
  height: 176px;
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  background: var(--sky);
}
.age-card__arch img { width: 100%; height: 100%; object-fit: cover; }

.age-card__label {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  color: var(--ink);
}

/* ---------- 15. Подписка ---------- */
.plan {
  display: block;
  width: 100%;
  text-align: left;
  padding: 16px 18px;
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--line);
  transition: box-shadow 0.16s var(--ease), background-color 0.16s var(--ease);
}
.plan.is-active {
  background: var(--sky-soft);
  box-shadow: inset 0 0 0 2px var(--blue);
}
.plan__row { display: flex; align-items: baseline; gap: 8px; }
.plan__name { font-size: 16px; font-weight: 600; flex: 1; }
.plan__price { font-size: 18px; font-weight: 600; }
.plan__note { font-size: 13px; color: var(--ink-soft); margin-top: 4px; }

.perks { display: flex; flex-direction: column; gap: 12px; }
.perk { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.perk .ic { color: var(--blue); }

/* ---------- 16. История ---------- */
.hist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.hist-item {
  border-radius: 999px 999px 0 0;
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--sky);
  position: relative;
  transition: opacity 0.16s var(--ease);
}
.hist-item:active { opacity: 0.85; }
.hist-item img { width: 100%; height: 100%; object-fit: cover; }
.hist-item__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  background: rgba(253, 247, 240, 0.92);
}

.empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 40px 20px;
  color: var(--ink-soft);
}
.empty .ic { color: var(--sky); width: 56px; height: 56px; }

/* ---------- 17. Сообщения и окна ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--safe-bottom) + var(--nav-h) + 16px);
  transform: translate(-50%, 16px);
  max-width: min(90vw, 420px);
  padding: 13px 20px;
  border-radius: var(--r-btn);
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
  z-index: 100;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: var(--pad);
  background: rgba(16, 57, 91, 0.42);
  animation: fade-in 0.2s var(--ease);
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.modal__box {
  width: 100%;
  max-width: 380px;
  padding: 24px;
  border-radius: var(--r-card);
  background: var(--milk);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------- 18. Юридический текст ---------- */
.doc {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  border-radius: var(--r-card);
  background: #fff;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  user-select: text;
}
.doc h3 {
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  margin: 20px 0 8px;
}
.doc h3:first-child { margin-top: 0; }
.doc p { margin: 0 0 10px; }
.doc ul { margin: 0 0 10px; padding-left: 20px; }
.doc li { margin-bottom: 5px; }

/* ---------- 19. Приветствие ---------- */
.slide {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}
.slide__art {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 11 / 14;
  margin: 0 auto;
  border-radius: 999px 999px 0 0;
  background: var(--sky);
  display: grid;
  place-items: center;
}
.slide__art .sunwheel { width: 120px; height: 120px; animation: none; }
.slide__art .sunwheel__core { width: 56px; height: 56px; }

.dots { display: flex; gap: 8px; justify-content: center; }
.dot {
  width: 8px; height: 8px;
  border-radius: var(--r-btn);
  background: var(--sky);
  transition: all 0.25s var(--ease);
}
.dot.is-active { width: 26px; background: var(--blue); }

/* ---------- 20. Аварийный экран ---------- */
.fatal {
  position: fixed;
  inset: 12px;
  z-index: 200;
  margin: 0;
  padding: 20px;
  overflow: auto;
  border-radius: var(--r-card);
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--coral);
  color: var(--ink);
  font-family: Consolas, 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  user-select: text;
}

/* ---------- 21. Кнопка «Назад» ----------
   Раньше здесь была голая круглая иконка на светлом фоне — её просто
   не замечали. Теперь это явная кнопка с подписью. */
.backbtn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0 18px 0 12px;
  border-radius: var(--r-btn);
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--line);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  transition: background-color 0.16s var(--ease);
}
.backbtn:active { background: var(--sky-soft); }
.backbtn .ic { width: 20px; height: 20px; }

/* ---------- 22. Карточка выбора на главной ----------
   Компонент со страницы 16 брендбука: заголовок, пояснение,
   стрелка. Понятнее, чем просто кнопка с одним словом. */
.opt {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 18px;
  border-radius: var(--r-card);
  background: var(--sky);
  color: var(--ink);
  transition: background-color 0.16s var(--ease), transform 0.14s var(--ease);
}
.opt:active { transform: scale(0.99); background: #ADDDF3; }

/* Выделенная карточка — тем же голубым семейством, на тон глубже */
.opt--soft { background: var(--sky-deep); }
.opt--soft:active { background: #78C6EA; }

.opt__icon {
  flex: 0 0 48px;
  width: 48px; height: 48px;
  border-radius: var(--r-btn);
  background: rgba(255, 255, 255, 0.6);
  display: grid;
  place-items: center;
}
.opt--soft .opt__icon { background: rgba(255, 255, 255, 0.7); }

.opt__body { flex: 1; min-width: 0; }
.opt__title {
  display: block;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.25;
}
.opt__sub {
  display: block;
  font-size: 13.5px;
  line-height: 1.35;
  margin-top: 3px;
  opacity: 0.82;
}
.opt__arrow { flex: 0 0 auto; opacity: 0.6; }
.opt__arrow .ic { width: 20px; height: 20px; }

/* Шаг в последовательности: «Шаг 1 из 2» */
.steps {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ---------- 23. Поля ввода ---------- */
.input {
  width: 100%;
  min-height: 56px;
  padding: 0 18px;
  border-radius: var(--r-field);
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--line);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  user-select: text;
  transition: box-shadow 0.16s var(--ease);
}
.input::placeholder { color: var(--ink-faint); }
.input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--blue); }
.input.is-error { box-shadow: inset 0 0 0 2px var(--coral); }

.field__error {
  font-size: 13px;
  font-weight: 500;
  color: var(--coral);
}

/* Поле для кода из письма */
.code-input {
  width: 100%;
  min-height: 68px;
  padding: 0 12px;
  border-radius: var(--r-field);
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--line);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-indent: 0.32em;
  text-align: center;
  user-select: text;
  transition: box-shadow 0.16s var(--ease);
}
.code-input:focus { outline: none; box-shadow: inset 0 0 0 2px var(--blue); }
.code-input.is-error { box-shadow: inset 0 0 0 2px var(--coral); }

/* Строка «показать пароль» и подобные ссылки-кнопки */
.linkbtn {
  align-self: flex-start;
  min-height: 44px;
  padding: 0 4px;
  color: var(--blue);
  font-size: 15px;
  font-weight: 500;
}

/* Карточка аккаунта в профиле */
.account {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  border-radius: var(--r-card);
  background: var(--sky);
}
.account__avatar {
  flex: 0 0 52px;
  width: 52px; height: 52px;
  border-radius: var(--r-btn);
  background: rgba(255, 255, 255, 0.65);
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 600;
}
.account__body { flex: 1; min-width: 0; }
.account__name { font-weight: 600; font-size: 16px; }
.account__mail {
  font-size: 13.5px;
  color: var(--ink-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- 24. Крупнее цели нажатия ----------
   Палец — не курсор. Всё, что нажимается, должно быть
   не меньше 48 точек по высоте. */
.nav__item {
  flex: 0 0 auto;
  min-width: 104px;
  min-height: 56px;
  justify-content: center;
  padding: 6px 8px;
}

.chip {
  min-height: 34px;
}
/* Метка, которая на самом деле кнопка, должна быть крупнее */
button.chip {
  min-height: 44px;
  padding: 0 18px;
  font-size: 14px;
}

.plan { min-height: 64px; }
.seg { min-height: 50px; }
.opt { min-height: 84px; }

/* ---------- 25. Согласие на обработку данных ----------
   Отдельный крупный блок: по закону согласие должно быть
   сознательным, значит и нажать на него должно быть удобно. */
/* Окно согласия — самое важное место экрана: пока галочка не
   стоит, дальше пройти нельзя. Поэтому оно крупнее остальных
   карточек, с более крупным текстом и заметным голубым тоном,
   чтобы человек сразу видел, куда нажимать. */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 20px;
  border-radius: var(--r-card);
  background: var(--sky);
  box-shadow: inset 0 0 0 2px var(--blue);
  cursor: pointer;
  transition: background-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.consent:active { background: #ACDDF4; }
.consent.is-on {
  background: #ACDDF4;
  box-shadow: inset 0 0 0 2.5px var(--blue);
}
.consent:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--blue);
}

.consent__box {
  flex: 0 0 34px;
  width: 34px; height: 34px;
  margin-top: 1px;
  border-radius: 11px;
  background: #fff;
  box-shadow: inset 0 0 0 2px var(--blue);
  display: grid;
  place-items: center;
  color: #fff;
  transition: background-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.consent.is-on .consent__box {
  background: var(--blue);
  box-shadow: none;
}
.consent__box .ic { width: 23px; height: 23px; stroke-width: 4; }

.consent__text { flex: 1; min-width: 0; }
.consent__title {
  display: block;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
}
.consent__sub {
  display: block;
  margin-top: 6px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* Маленькая галочка в списке фактов.
   Список — справочный, поэтому и галочка, и текст рядом с ней
   мельче: внимание должно оставаться на окне согласия. */
.ic--tick {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  color: var(--blue);
  stroke-width: 4;
}

/* ---------- 26. Кнопка «Скачать» ----------
   Ради этого человек всё и делал, поэтому она самая заметная
   на экране: выше остальных, в две строки — крупное действие
   и мелкая приписка, что это ничего не стоит. */
.btn--save {
  flex-direction: column;
  gap: 1px;
  min-height: 70px;
  padding: 0 20px;
}
.btn--save__main {
  font-size: 21px;
  font-weight: 600;
  line-height: 1.15;
}
.btn--save__sub {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.15;
  opacity: 0.88;
}

/* ---------- 27. Выбор пола ----------
   Цвета видны сразу, не только у выбранной кнопки: человек
   должен понимать смысл, ещё не нажав. Выбранная выделяется
   насыщенностью и обводкой. */
.gender {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gender__label {
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-soft);
}

.gender__row {
  display: flex;
  gap: 12px;
}

.gender__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.gender__btn {
  width: 100%;
  min-height: 58px;
  border-radius: var(--r-btn);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.16s var(--ease), box-shadow 0.16s var(--ease),
              transform 0.14s var(--ease);
}
.gender__btn:active { transform: scale(0.975); }

/* Девочка — розовый заметно ярче голубого: этот выбор
   бесплатный, и на него хочется смотреть в первую очередь */
.gender__btn--girl { background: #F9C2D5; }
.gender__btn--girl.is-active {
  background: #F09CB8;
  box-shadow: inset 0 0 0 2.5px #DB7093;
}

/* Мальчик — нежно-голубой, светлее фирменного */
.gender__btn--boy { background: #E3F3FC; }
.gender__btn--boy.is-active {
  background: #A9DCF4;
  box-shadow: inset 0 0 0 2.5px #4FA8D8;
}

/* Подписи под кнопками — мелкие и одинаково спокойные:
   цена не должна спорить с самим выбором */
.gender__price {
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.3;
  text-align: center;
  color: var(--ink-faint);
}

/* ---------- 28. Совсем мелкие подписи ----------
   Юридические и служебные пояснения: они должны быть
   доступны, но не спорить с содержанием экрана. */
.tiny--xs { font-size: 11px; line-height: 1.4; }
.notice--sm { font-size: 11.5px; padding: 13px 14px; }
.notice--sm .ic { width: 20px; height: 20px; }

/* Три рамки в ряд — для снимков УЗИ */
.uploads--three { gap: 9px; }

/* Три кнопки в ряд — срок беременности. Текст длинный,
   поэтому шрифт мельче и разрешён перенос на две строки. */
.segmented--three .seg {
  font-size: 13px;
  padding: 6px 4px;
  line-height: 1.2;
  white-space: normal;
}

/* ---------- 29. Окно результата по УЗИ ----------
   Большое, строго квадратное, без скруглений — портрет
   показывается во всю ширину экрана. */
.scan-result {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  overflow: hidden;
  background: var(--sky-soft);
}
.scan-result img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: scan-appear 0.6s var(--ease) both;
}
@keyframes scan-appear {
  from { opacity: 0; transform: scale(1.02); }
  to   { opacity: 1; transform: none; }
}

/* Пока идёт генерация — переливается фирменный градиент.
   Цвета взяты из палитры брендбука: небо, голубой, солнце,
   коралл. Человеку есть на что смотреть, и это «что-то»
   принадлежит бренду, а не абстрактному спиннеру. */
.scan-result--loading {
  background: linear-gradient(115deg,
    #BFE6F7 0%,
    #29A8E0 22%,
    #7FD0F0 40%,
    #FFC24A 58%,
    #FF9E8E 76%,
    #BFE6F7 100%);
  background-size: 320% 320%;
  animation: scan-flow 5s ease-in-out infinite;
}
@keyframes scan-flow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Мягкое свечение поверх градиента — добавляет глубины */
.scan-result--loading::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0) 60%);
  animation: scan-breathe 3.2s ease-in-out infinite;
}
@keyframes scan-breathe {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 0.8;  transform: scale(1.12); }
}

/* Проценты и шкала поверх градиента */
.scan-progress {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  pointer-events: none;
}

.scan-progress__value {
  font-family: var(--font-display);
  font-size: 62px;
  line-height: 1;
  color: #fff;
  /* Цифры не должны прыгать по ширине при смене числа */
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 16px rgba(16, 57, 91, 0.35);
}

.scan-progress__bar {
  width: 58%;
  height: 5px;
  border-radius: var(--r-btn);
  background: rgba(255, 255, 255, 0.45);
  overflow: hidden;
}

.scan-progress__fill {
  height: 100%;
  width: 0;
  border-radius: var(--r-btn);
  background: #fff;
  transition: width 0.25s linear;
}

/* Подпись под окном, пока идёт ожидание */
.scan-status {
  text-align: center;
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
  min-height: 30px;
}

/* ---------- 30. Мелочи ---------- */
.hidden-input { display: none; }
.divider { height: 1px; background: var(--line); }
.stack { display: flex; flex-direction: column; gap: 12px; }
.stack--tight { gap: 8px; }