/**
 * Входная группа (splash, онбординг, вход/регистрация). Тише и просторнее
 * основного приложения — docs/08 раздел 2.1. Всегда тёмная тема.
 */

.auth-body {
  background: var(--gradient-entry);
  height: 100dvh;
  overflow: hidden;
}

/* Между .auth-body и .auth-shell стоит контейнер точки монтирования (#app).
   Без явной высоты он рвёт цепочку процентов: .auth-shell растягивается по
   контенту, overflow-y:auto не включается, и низ экрана (чекбокс, кнопки)
   оказывается за границей body{overflow:hidden} — недостижим ни тапом,
   ни скроллом. */
.auth-body > #app {
  height: 100%;
}

.auth-shell {
  max-width: 480px;
  margin: 0 auto;
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  padding: var(--sp-8) var(--screen-padding) var(--sp-6);
  color: var(--entry-text);
}

.auth-shell .text-secondary {
  color: var(--entry-text-a68);
}

/* ── Капля-герой: общий графический элемент всех экранов входной группы ── */
.auth-drop-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30dvh;
}

.auth-drop {
  width: 96px;
  height: 120px;
  background: var(--gradient-liquid);
  -webkit-mask-image: var(--mask-drop);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: var(--mask-drop);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

@keyframes auth-drop-fall {
  0% { transform: translateY(-40px); opacity: 0; }
  60% { transform: translateY(4px); opacity: 1; }
  80% { transform: translateY(-2px); }
  100% { transform: translateY(0); opacity: 1; }
}

.auth-drop--falling {
  animation: auth-drop-fall 1.2s cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes auth-drop-pulse {
  0%, 100% { filter: drop-shadow(0 0 12px var(--accent-a30)); }
  50% { filter: drop-shadow(0 0 24px var(--entry-ring-a60)); }
}

.auth-drop--pulse {
  animation: auth-drop-pulse 4s ease-in-out infinite;
}

/* ── Капля с телефонной иконкой внутри: экран "Код отправлен" при
   регистрации (signup-sms-code.html) — крупнее обычной капли-героя,
   со свечением и иконкой смс поверх. ── */
.auth-drop-envelope {
  position: relative;
  width: 104px;
  height: 126px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 0 27px var(--entry-ring-a60));
}

.auth-drop-envelope .auth-drop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.auth-drop-envelope svg {
  position: relative;
  z-index: 1;
}

.auth-ripple {
  width: 140px;
  height: 24px;
  border: 1px solid var(--entry-ring-a35);
  border-radius: var(--radius-full);
  margin-top: var(--sp-3);
  opacity: 0;
}

@keyframes auth-ripple-expand {
  0% { transform: scaleX(.3); opacity: .8; }
  100% { transform: scaleX(1.4); opacity: 0; }
}

.auth-ripple--show {
  animation: auth-ripple-expand .8s ease-out forwards;
}

/* ── Раскадровка design/drop-storyboard.html, кадр 4 "раскрывается":
   капля запечатывания разворачивается в форму капсулы и вспыхивает —
   используется в сцене запечатывания (step7.js, capsule_new.js) сразу
   после падения, чтобы обозначить момент "запечатано". ── */
@keyframes auth-drop-seal {
  0% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 12px var(--accent-a30)); }
  55% { transform: scale(1.12) rotate(8deg); filter: drop-shadow(0 0 30px var(--entry-ring-a60)); }
  100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 18px var(--accent-a30)); }
}

.auth-drop--sealed {
  animation: auth-drop-fall 1.2s cubic-bezier(.4, 0, .2, 1) forwards,
             auth-drop-seal .9s cubic-bezier(.4, 0, .2, 1) .9s forwards;
}

/* ── Раскадровка, кадр 5 "падает в сосуд": капля-индикатор финала
   онбординга (final.js) падает сверху и оседает над наполняющимся
   сосудом. ── */
@keyframes auth-vessel-drop-fall {
  0% { transform: translateY(-36px); opacity: 0; }
  70% { transform: translateY(3px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

.auth-vessel-drop--falling {
  animation: auth-vessel-drop-fall .9s cubic-bezier(.4, 0, .2, 1) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .auth-drop--falling,
  .auth-drop--pulse,
  .auth-drop--sealed,
  .auth-ripple--show,
  .auth-vessel-drop--falling {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ── Текстовый блок ── */
.auth-title {
  font-size: var(--fs-entry-title);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--entry-text);
  margin-bottom: var(--sp-3);
}

.auth-text {
  font-size: var(--fs-entry-body);
  line-height: var(--lh-relaxed);
  color: var(--entry-text-a80);
}

/* ═══ Онбординг, шаги 1-4 (группа C1) ═══ */

/* Заголовки этих экранов в макете крупнее общего --fs-entry-title (28px):
   шаги 1-3 — 32px, шаг 4 — 30px. Модификатор не трогает базовый .auth-title,
   которым пользуются другие шаги/экраны с другим кеглем. */
.auth-title--lg {
  font-size: var(--fs-h1);
  line-height: 1.2;
}

.auth-title--md {
  font-size: var(--fs-h1-sm);
  line-height: 1.22;
}

/* Точка отсчёта (шаг 4): концентрические кольца с пульсирующей точкой
   в центре — отдельный от .auth-drop графический элемент, как в макете
   onboarding-4-start-point.html (там не капля-тизер, а кольца). */
.auth-rings {
  position: relative;
  width: 180px;
  height: 120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-rings::before,
.auth-rings::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--entry-ring-a35);
}

.auth-rings::before {
  width: 180px;
  height: 180px;
  border-color: var(--accent-ring-a16);
}

.auth-rings::after {
  width: 112px;
  height: 112px;
}

.auth-rings__dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-light);
  box-shadow: 0 0 26px var(--entry-ring-a60);
}

/* ── Поля на полупрозрачной поверхности (docs/08 2.1) ── */
.auth-shell .input {
  background: var(--entry-surface-a08);
  border-color: var(--entry-surface-a16);
  color: var(--entry-text);
}

.auth-shell .input::placeholder {
  color: var(--entry-text-a45);
}

.auth-shell .input-label {
  color: var(--entry-text-a75);
}

/* Чекбокс согласия во входной группе: базовый .checkbox берёт светлые токены
   рамки, на тёмном фоне он почти не виден. Заодно поднимаем высоту лейбла
   до тап-таргета 44px — сам квадратик 22px для пальца мал. */
.auth-shell .checkbox {
  min-height: 44px;
  color: var(--entry-text);
}

.auth-shell .checkbox-box {
  border-color: var(--entry-text-a45);
}

.auth-actions {
  margin-top: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* ── Сравнение локальных данных и данных аккаунта перед объединением (merge-data.html) ── */
.merge-compare {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.merge-compare-card {
  flex: 1;
  background: var(--entry-surface-a08);
  border: 1px solid var(--entry-surface-a16);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
}

.merge-compare-card--account {
  background: var(--gradient-card-accent);
  border-color: var(--accent-ring-a30);
}

.merge-compare-label {
  font: var(--fw-semibold) var(--fs-micro) / 1 var(--font);
  color: var(--entry-text-a75);
}

.merge-compare-card--account .merge-compare-label {
  color: var(--accent-light);
}

.merge-compare-days {
  font: var(--fw-black) var(--fs-h2) / 1 var(--font-mono);
  color: var(--entry-text);
  margin-top: var(--sp-3);
}

.merge-compare-days-unit {
  font: var(--fw-regular) var(--fs-nano) / 1 var(--font);
  color: var(--entry-text-a55);
  margin-top: var(--sp-1);
}

.merge-compare-card--account .merge-compare-days-unit {
  color: var(--entry-text-a80);
}

.merge-compare-meta {
  font: var(--fw-regular) var(--fs-micro) / 1.7 var(--font);
  color: var(--entry-text-a75);
  margin-top: var(--sp-3);
}

.merge-compare-card--account .merge-compare-meta {
  color: var(--entry-text-a80);
}

.auth-shell .btn--text {
  color: var(--entry-text-a75);
}

.auth-shell .btn--secondary {
  background: var(--entry-surface-a08);
  border-color: var(--entry-surface-a16);
  color: var(--entry-text);
}

/* ── Индикатор шагов онбординга: точки, активная растянута в пилюлю ── */
.auth-steps {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  margin-bottom: var(--sp-6);
}

.auth-step-dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--entry-surface-a25);
  transition: all var(--transition);
}

.auth-step-dot--active {
  width: 20px;
  background: var(--accent);
}

.auth-step-dot--done {
  background: var(--entry-ring-a60);
}

/* ── Шапка с кнопкой назад ── */
.auth-header {
  display: flex;
  align-items: center;
  min-height: var(--tap);
  margin-bottom: var(--sp-4);
}

.auth-back {
  width: var(--tap);
  height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--entry-text);
}

/* Чипы "Сегодня/Вчера/Позавчера/Выбрать дату" (шаг 4) — входная группа
   всегда тёмная независимо от темы приложения, а базовый .chip
   (components.css) берёт светлые токены --border/--text-secondary,
   поэтому здесь фиксируем entry-палитрой, как уже сделано для .input. */
.auth-shell .chip {
  border-color: var(--entry-surface-a16);
  color: var(--entry-text-a55);
}

/* ── Карточки ДАТА / ВРЕМЯ (шаг 4) ── */
.auth-datetime-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.auth-datetime-card {
  background: var(--entry-surface-a75);
  border: 1px solid var(--entry-surface-a16);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  text-align: left;
}

.auth-datetime-card__label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  color: var(--entry-text-a55);
  letter-spacing: .04em;
}

.auth-datetime-card__value {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--entry-text);
  margin-top: var(--sp-2);
}

.auth-datetime-card__value--mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── Живая строка "Ты трезв уже..." (шаг 4) ── */
.auth-live-counter {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: var(--lh-tight);
  color: var(--accent-light);
  text-shadow: 0 0 26px var(--entry-ring-a60);
  text-align: center;
  background: radial-gradient(circle at 50% 50%, var(--accent-a30), transparent 75%);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-4);
  margin-top: var(--sp-6);
}

/* ── Модалка выбора даты/времени колёсиком (шаг 4) ── */
.auth-wheel-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-end;
}

.auth-wheel-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: var(--entry-scrim);
}

.auth-wheel-sheet__panel {
  position: relative;
  width: 100%;
  background: var(--entry-surface-solid);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--sp-4) var(--sp-5) var(--sp-8);
}

.auth-wheel-sheet__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.auth-wheel-sheet__header button {
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--entry-text-a75);
}

.auth-wheel-sheet__done {
  color: var(--accent-light) !important;
  font-weight: var(--fw-semibold) !important;
}

.auth-wheel-cols {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  position: relative;
}

.auth-wheel-col {
  flex: 1;
  height: 200px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  font-family: var(--font-mono);
  text-align: center;
  scrollbar-width: none;
}

.auth-wheel-col::-webkit-scrollbar { display: none; }

.auth-wheel-col--month { font-family: Inter, sans-serif; }

.auth-wheel-col > div {
  scroll-snap-align: center;
  padding: var(--sp-3) 0;
  color: var(--entry-text-a55);
  font-size: var(--fs-body);
}

.auth-wheel-col > div.is-selected {
  color: var(--entry-text);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
}

.auth-wheel-cols::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
  background: var(--accent-a06);
  border-radius: var(--radius);
  pointer-events: none;
}

@keyframes auth-counter-pop {
  0% { transform: scale(.92); opacity: .5; }
  60% { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}

.auth-live-counter--pop {
  animation: auth-counter-pop .35s cubic-bezier(.4, 0, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
  .auth-live-counter--pop {
    animation: none;
  }
}

/* ── Прозрачность синхронизации (регистрация): левая — сервер, правая — только на телефоне ── */
.auth-sync-table {
  display: flex;
  gap: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--entry-surface-a16);
  margin: var(--sp-5) 0 0;
}

.auth-sync-col {
  flex: 1;
  padding: var(--sp-4);
  background: var(--entry-surface-solid);
}

.auth-sync-col__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  color: var(--text-light);
}

.auth-sync-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--fs-micro);
  color: var(--text-secondary);
  margin-top: var(--sp-2);
  line-height: var(--lh-relaxed);
}

.auth-sync-col--private {
  background: linear-gradient(160deg, var(--accent-dark), var(--primary-dark));
  border: 1px solid var(--entry-ring-a35);
}

.auth-sync-col--private .auth-sync-col__head {
  color: var(--on-primary);
  font-weight: var(--fw-bold);
}

.auth-sync-col--private ul {
  color: var(--on-primary-a85);
}

/* ── Иконка-капля над заголовком: кольцо (шаг 2) ── */
.auth-icon-drop {
  width: 62px;
  height: 62px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--entry-ring-a35);
  border-top-color: transparent;
  transform: rotate(-25deg);
  margin: 0 auto var(--sp-5);
}

/* ── Иконка-капля сплошная: маленький сосуд-тизер (шаг 3, шаг 4) ── */
.auth-icon-drop--solid {
  width: 38px;
  height: 46px;
  border-radius: var(--vessel-radius);
  border: none;
  transform: none;
  background: linear-gradient(180deg, var(--accent-light), var(--primary));
  box-shadow: 0 0 24px var(--accent-glow-a40);
}

/* ── Ореол вокруг капли-героя (обещание, шаг 1) ── */
.auth-drop-stage--glow {
  position: relative;
}

.auth-drop-stage--glow::before {
  content: "";
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--accent-glow-a30), transparent 70%);
  pointer-events: none;
}

/* ── Дисклеймер (шаг 2) ── */
.auth-disclaimer-block {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  padding: var(--sp-4);
  background: var(--entry-surface-a08);
  border: 1px solid var(--entry-surface-a16);
  border-radius: var(--radius-lg);
}

.auth-disclaimer-block svg {
  flex: none;
  color: var(--entry-ring-a60);
}

.auth-disclaimer-block--danger {
  background: transparent;
  border-color: var(--danger-a55);
}

.auth-disclaimer-block--danger svg {
  color: var(--danger);
}

.auth-disclaimer-block--danger .auth-text {
  color: var(--danger-text-on-dark);
}

/* ── Кнопки закреплены внизу экрана (шаги входной группы) ── */
/* Липкий блок кнопок внизу экрана. Прилипая, он накрывает собой контент,
   поэтому получает фон-подложку (иначе текст просвечивает насквозь) и
   отрицательный внешний отступ, компенсирующий падинг .auth-shell —
   подложка должна доходить до краёв экрана, а не обрываться по контенту. */
.auth-actions--fixed {
  position: sticky;
  bottom: calc(var(--sp-6) * -1);
  margin-top: auto;
  margin-left: calc(var(--screen-padding) * -1);
  margin-right: calc(var(--screen-padding) * -1);
  padding: var(--sp-4) var(--screen-padding) var(--sp-6);
  background: var(--gradient-entry-actions);
}

/* ── Калькулятор напитков / цели / капсула — общие вспомогательные классы ── */
.auth-result-line {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--accent-light);
  text-align: center;
  margin-top: var(--sp-5);
}

.auth-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

@keyframes auth-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.shake {
  animation: auth-shake .3s ease-in-out;
}

@media (prefers-reduced-motion: reduce) {
  .shake {
    animation: none;
  }
}

/* ── Соц-кнопки входа (регистрация) ── */
.auth-social-row {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.auth-social-btn {
  flex: 1;
  border: 1px solid var(--entry-surface-a16);
  border-radius: var(--radius);
  padding: var(--sp-3);
  text-align: center;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--entry-text);
  background: transparent;
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--entry-surface-a16);
}

.auth-divider span {
  font-size: var(--fs-micro);
  color: var(--text-light);
}

/* ── Поле телефона: неизменяемый префикс +7 ── */
.auth-phone-row {
  display: flex;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.auth-phone-prefix {
  flex: none;
  background: var(--entry-surface-solid);
  border: 1px solid var(--entry-surface-a16);
  border-radius: var(--radius);
  padding: 0 var(--sp-4);
  display: flex;
  align-items: center;
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  color: var(--text-secondary);
}

.auth-phone-row .input {
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  letter-spacing: .01em;
}

/* ── Ячейки кода из SMS ── */
.auth-code-row {
  display: flex;
  gap: var(--sp-3);
  justify-content: center;
  margin-top: var(--sp-8);
}

.auth-code-cell {
  width: 62px;
  height: 72px;
  border-radius: var(--radius-lg);
  background: var(--entry-surface-solid);
  border: 1px solid var(--entry-surface-a16);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  color: var(--entry-text);
}

.auth-code-cell--active {
  border: 1.5px solid var(--accent);
  box-shadow: 0 0 0 4px var(--focus-ring-accent);
}

.auth-code-cell--empty {
  background: var(--bg-alt);
}

.auth-code-cell--error {
  border: 1.5px solid var(--danger);
}

.auth-code-caret {
  width: 2px;
  height: 28px;
  background: var(--accent-light);
}

/* ── Прозрачные подсказки под кнопками входной группы ── */
.auth-footnote {
  text-align: center;
  font-size: var(--fs-micro);
  line-height: var(--lh-relaxed);
  color: var(--text-light);
  margin-top: var(--sp-4);
}

/* ── Карточка уведомления (шаг 8) ── */
.auth-notif-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--entry-surface-solid);
  border: 1px solid var(--entry-surface-a16);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
}

.auth-notif-card__icon {
  flex: none;
  color: var(--accent-light);
}

.auth-notif-card__body {
  flex: 1;
}

.auth-notif-card__title {
  font-weight: var(--fw-semibold);
  color: var(--entry-text);
}

.auth-notif-card__hint {
  font-size: var(--fs-caption);
  color: var(--text-light);
  margin-top: var(--sp-1);
}

/* ── Пресеты-карточки цели (шаг 6) ── */
.auth-goal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.auth-goal-card {
  border: 1px solid var(--entry-surface-a16);
  border-radius: var(--radius-lg);
  padding: var(--sp-2);
  text-align: left;
  position: relative;
}

.auth-goal-card__art {
  height: 74px;
  border-radius: var(--radius);
  background: var(--entry-surface-solid);
}

.auth-goal-card__title {
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  padding: var(--sp-2) var(--sp-1) var(--sp-1);
}

.auth-goal-card--selected {
  border: 2px solid var(--accent);
  box-shadow: 0 0 22px var(--accent-glow-a25);
}

.auth-goal-card--selected .auth-goal-card__art {
  background: var(--gradient-card-accent);
}

.auth-goal-card--selected .auth-goal-card__title {
  color: var(--entry-text);
}

.auth-goal-card__check {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-goal-card--custom {
  border-style: dashed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  gap: var(--sp-2);
}

.auth-goal-card--custom .auth-goal-card__plus {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-light);
  color: var(--accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-h3);
}

/* ── Капсула: кольца пульсации вокруг кнопки записи ── */
.auth-capsule-record-stage {
  position: relative;
  width: 240px;
  height: 240px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-capsule-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--accent-ring-a16);
  animation: auth-capsule-pulse 2.2s ease-in-out infinite;
}

.auth-capsule-ring:nth-child(1) { inset: 0; }
.auth-capsule-ring:nth-child(2) { inset: 30px; border-color: var(--entry-ring-a35); animation-delay: .35s; }
.auth-capsule-ring:nth-child(3) { inset: 58px; border-color: var(--entry-ring-a60); animation-delay: .7s; }

@keyframes auth-capsule-pulse {
  0%, 100% { transform: scale(1); opacity: .55; }
  50% { transform: scale(1.18); opacity: .15; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-capsule-ring {
    animation: none;
  }
}

/* ── Капсула: кастомный плеер прослушивания перед печатью (design/capsule-record-done-dark.html) ── */
.auth-capsule-playback {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  background: var(--entry-surface-a72);
  border: 1px solid var(--entry-surface-a16);
  border-radius: var(--radius-lg);
  padding: var(--sp-3);
}

.auth-capsule-playback-btn {
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--entry-text);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.auth-capsule-playback-btn:active {
  transform: scale(.96);
}

.auth-capsule-playback-bars {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 38px;
}

.auth-capsule-playback-bar {
  flex: 1;
  height: var(--bar-h, 40%);
  min-height: 3px;
  border-radius: var(--radius-xs);
  background: var(--entry-surface-a16);
  transition: background .15s ease;
}

.auth-capsule-playback-bar.is-played {
  background: var(--accent-light);
}

.auth-capsule-playback-time {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--entry-text-a55);
  font-variant-numeric: tabular-nums;
}

/* ── Калькулятор напитков: нижний лист (шаг 5) ── */
.auth-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  display: flex;
  align-items: flex-end;
}

.auth-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: var(--entry-scrim);
}

.auth-sheet__panel {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  background: var(--entry-surface-solid);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  padding: var(--sp-4) var(--sp-5) var(--sp-8);
}

.auth-sheet__handle {
  width: 38px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--entry-surface-a16);
  margin: 0 auto var(--sp-4);
}

.auth-calc-label {
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  color: var(--entry-text-a55);
  letter-spacing: .6px;
}

.auth-calc-volume-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.auth-calc-volume-box {
  flex: 1;
  background: var(--entry-surface-solid);
  border: 1px solid var(--entry-surface-a16);
  border-radius: var(--radius);
  padding: var(--sp-3);
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  color: var(--entry-text);
}

.auth-calc-volume-box__unit {
  font-family: Inter, sans-serif;
  font-weight: var(--fw-regular);
  font-size: var(--fs-caption);
  color: var(--entry-text-a55);
}

.auth-calc-open-link {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-caption);
  color: var(--accent-light);
}

.auth-calc-money-input {
  font-family: var(--font-mono);
  font-weight: var(--fw-semibold);
}

.auth-calc-period {
  flex: 1;
  text-align: center;
  padding: var(--sp-2) 0;
  border-radius: var(--radius-full);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--entry-text-a55);
}

.auth-calc-period--selected {
  background: var(--entry-surface-solid);
  color: var(--accent-light);
  font-weight: var(--fw-semibold);
}

.auth-calc-result {
  background: var(--accent-glow-a12);
  border: 1px solid var(--accent-glow-a35);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
}

.auth-calc-result__amount {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--accent-light);
}

.auth-calc-result__hint {
  font-size: var(--fs-caption);
  color: var(--entry-text-a55);
  margin-top: var(--sp-2);
}

/* ── Шторка калькулятора: содержимое (шаг 5) ── */
.auth-calc-sheet-title {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--entry-text);
}

.auth-calc-stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auth-calc-stepper__btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid var(--entry-surface-a16);
  background: none;
  color: var(--entry-text);
  font-size: var(--fs-h3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-calc-stepper__btn--primary {
  border: none;
  background: var(--accent);
  color: var(--on-primary);
}

.auth-calc-stepper__value {
  text-align: center;
}

.auth-calc-stepper__count {
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h1);
  color: var(--entry-text);
}

.auth-calc-stepper__unit {
  font-size: var(--fs-caption);
  color: var(--entry-text-a55);
  margin-top: var(--sp-1);
}

.auth-calc-sheet-result {
  margin-top: var(--sp-6);
  background: var(--entry-surface-a08);
  border-radius: var(--radius-lg);
  padding: var(--sp-4);
  text-align: center;
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  color: var(--accent-light);
}

/* ── Сосуд-финал онбординга: капля падает, наполняет вместилище "День N" ── */
.auth-vessel-drop {
  width: 16px;
  height: 20px;
  border-radius: var(--vessel-radius);
  background: var(--accent-light);
  box-shadow: 0 0 20px var(--entry-ring-a60);
  margin: 0 auto;
}

.auth-vessel {
  position: relative;
  width: 196px;
  height: 270px;
  border-radius: var(--vessel-radius);
  background: var(--entry-surface-a16);
  border: 1.5px solid var(--entry-ring-a35);
  box-shadow: 0 0 54px var(--accent-a30);
  overflow: hidden;
  margin: var(--sp-4) auto 0;
}

.auth-vessel__fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26%;
  background: linear-gradient(180deg, var(--accent-light), var(--accent) 50%, var(--primary-dark));
}

/* ── Вариант сосуда для экрана возвращения: меньше, без цифры, наполнен сильнее ── */
.auth-vessel--comeback {
  width: 170px;
  height: 236px;
  background: var(--entry-surface-a16);
  border-color: var(--entry-ring-a35);
}

.auth-vessel--comeback .auth-vessel__fill {
  height: 70%;
  background: linear-gradient(180deg, var(--accent-a30), var(--primary-dark));
}

.auth-vessel__number {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}

.auth-vessel__number strong {
  font-family: var(--font-mono);
  font-size: var(--fs-hero);
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--on-primary);
  text-shadow: 0 4px 22px var(--primary-a45);
}

.auth-vessel__number span {
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--on-primary-a85);
  margin-top: var(--sp-1);
}

/* ── PIN: точки прогресса и цифровая клавиатура без чипов (pin-unlock) ── */
.auth-pin-dots {
  display: flex;
  justify-content: center;
  gap: var(--sp-4);
  margin-top: var(--sp-8);
}

.auth-pin-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--entry-surface-a16);
  transition: background var(--transition), border-color var(--transition);
}

.auth-pin-dot--filled {
  background: var(--accent);
  border-color: var(--accent);
}

.auth-pin-dot--error {
  background: var(--danger);
  border-color: var(--danger);
}

.auth-pin-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  color: var(--danger-text-on-dark);
}

.auth-pin-error svg {
  flex: none;
  color: var(--danger);
}

.auth-pin-keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-8);
  padding: 0 var(--sp-6);
}

.auth-pin-key {
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: var(--fs-h3);
  color: var(--entry-text);
}

.auth-pin-key--icon {
  color: var(--entry-ring-a60);
}

.auth-pin-key--del {
  color: var(--text-light);
}