/* ══════════════════════════════════════════════════════════════════════════
   ВХОД И РЕГИСТРАЦИЯ — вид N1.

   Все правила начинаются с #vh-sloi: слой входа живёт внутри приложения, и
   его имена (.active, .show, .btn-primary, .toast) не должны задевать экраны
   кабинета. Вес у id выше, чем у body.n1 .класс, поэтому стили приложения
   сюда не протекают, а наши не протекают туда.

   Вид — как у остальных экранов N1 (n1.css, n1-shell.css): фон #262626,
   группа полей одной карточкой #2f2f2f r24, заголовок 30/36, серая строка
   15/20, главная кнопка 56 салатовая прижата к низу, «назад» — круг 44.
   Шрифт системный, как во всём приложении.

   НЕСУЩИЕ ПРАВИЛА (вид менять можно, смысл нет):
     - механика слайдов: неактивный слайд стоит за правым краем
       (translate3d(100%)) с visibility hidden — на это опирается
       postavitSlajdBezAnimacii (vhod.js) после свайпа назад; переход
       слайдов — --neo-dur/--neo-ease, как у экранов приложения: через
       --neo-dur + 60 мс goToSlide убирает классы перехода;
     - .vh-nizhe (нижний слайд, доля сдвига --vh-nizhe), .vh-uhod (уходит
       назад поверх), .vh-bez (поставить без проезда) — классы vhod.js;
     - .code-error виден только с .show; .btn-loading прячет надпись;
     - слой на 9500: ниже экранов приложения (10001+), выше навбара.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Слой ─────────────────────────────────────────────────────────────── */
#vh-sloi {
  /* doLogin красит рамку поля этой переменной инлайном — пусть это будет
     красный N1, а не старый */
  --error: var(--n1-red, #ff6b6b);
  --vh-font: var(--n1-font, -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
  position: fixed;
  inset: 0;
  z-index: 9500;
  overflow: hidden;
  background: var(--n1-bg, #262626);
  color: #fff;
  font: 400 17px/22px var(--vh-font);
  letter-spacing: -.43px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  -webkit-user-select: none;
  user-select: none;
  /* протяжка вниз не обновляет страницу поверх входа */
  overscroll-behavior: contain;
}

#vh-sloi[hidden] { display: none; }

/* Слой — нижний экран стопки приложения (vhod.js, podklyuchitZhesty).
   Экран поверх (выбор пункта при регистрации) сдвигает его общим правилом
   .neo-under (style.css) на треть влево; затемнение — своё, внутри слоя.
   После входа слой уезжает вправо (.vh-uhodit), кабинет под ним
   возвращается на место. Те же --neo-dur/--neo-ease, что у экранов. */
#vh-sloi {
  transition: transform var(--neo-dur, 420ms) var(--neo-ease, cubic-bezier(.42, .48, .15, 1));
}
#vh-sloi::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10001;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--neo-dur, 420ms) var(--neo-ease, cubic-bezier(.42, .48, .15, 1));
}
#vh-sloi.neo-under::after { opacity: calc(var(--neo-pod, 1) * .10); }
#vh-sloi.vh-uhodit {
  transform: translate3d(100%, 0, 0);
  box-shadow: -1px 0 2px rgba(0, 0, 0, .18), -10px 0 26px rgba(0, 0, 0, .26);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  #vh-sloi.neo-under::after { opacity: 0; }
}

/* Свои элементы прячем атрибутом hidden — он должен побеждать display
   любого класса (известная грабля проекта). */
#vh-sloi [hidden] { display: none !important; }

/* В полях долгое нажатие «Вставить» и выделение должны работать. */
#vh-sloi input {
  -webkit-user-select: text;
  user-select: text;
}

#vh-sloi a { color: inherit; text-decoration: none; }

#vh-sloi button,
#vh-sloi a { -webkit-tap-highlight-color: transparent; }

#vh-sloi :is(button, a, input):focus-visible {
  outline: 2px solid var(--n1-lime, #b2fe12);
  outline-offset: 2px;
}

/* ── Колонна и слайды ─────────────────────────────────────────────────── */
#vh-sloi #auth-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 480px;
  margin: 0 auto;
  overflow: hidden;
}

/* Слайд: верхняя строка 56 (кнопка «назад»), тело с прокруткой, низ с
   главной кнопкой. Низ всегда у нижнего края слайда; при клавиатуре
   кнопку поднимает модуль (data-kb), сам слайд не меняется.

   ПЕРЕХОДЫ — КАК У ЭКРАНОВ ПРИЛОЖЕНИЯ (style.css: .fullscreen-overlay,
   .neo-under). Слайд непрозрачный, со своим фоном и тенью по левой
   кромке: новый въезжает справа ПОВЕРХ прежнего, прежний уходит под него
   на треть влево и темнеет на 0.10. Назад — наоборот. Те же --neo-dur и
   --neo-ease, тот же сдвиг 33.333% и то же затемнение. */
#vh-sloi .auth-slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: var(--n1-bg, #262626);
  box-shadow: -1px 0 2px rgba(0, 0, 0, .18), -10px 0 26px rgba(0, 0, 0, .26);

  /* по умолчанию за правым краем */
  transform: translate3d(100%, 0, 0);
  visibility: hidden;
  pointer-events: none;

  /* visibility гаснет в конце перехода: уходящий слайд видно, пока он
     уезжает, а не пропадает в первый же кадр */
  transition: transform var(--neo-dur, 420ms) var(--neo-ease, cubic-bezier(.42, .48, .15, 1)),
              visibility 0s linear var(--neo-dur, 420ms);
  will-change: transform;
}

#vh-sloi .auth-slide.active {
  z-index: 2;
  transform: translate3d(0, 0, 0);
  visibility: visible;
  pointer-events: auto;
  transition: transform var(--neo-dur, 420ms) var(--neo-ease, cubic-bezier(.42, .48, .15, 1)),
              visibility 0s;
}

/* Нижний: прежний слайд под новым. --vh-nizhe — доля сдвига: 1 — уведён на
   треть, 0 — на месте (её ведёт палец при свайпе назад). */
#vh-sloi .auth-slide.vh-nizhe {
  z-index: 1;
  transform: translate3d(calc(var(--vh-nizhe, 1) * -33.333%), 0, 0);
  visibility: visible;
  transition: transform var(--neo-dur, 420ms) var(--neo-ease, cubic-bezier(.42, .48, .15, 1)),
              visibility 0s;
}
/* Уходящий назад остаётся поверх нижнего до конца проезда. */
#vh-sloi .auth-slide.vh-uhod { z-index: 3; }

/* Затемнение нижнего — внутри самого слайда, едет вместе с ним.
   --vh-dur ставит свайп: после отпускания затемнение доезжает за то же
   время, что и слайд. */
#vh-sloi .auth-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 50;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--vh-dur, var(--neo-dur, 420ms)) var(--neo-ease, cubic-bezier(.42, .48, .15, 1));
}
#vh-sloi .auth-slide.vh-nizhe::after { opacity: calc(var(--vh-nizhe, 1) * .10); }

/* Поставить без проезда (vhod.js, bezPerehoda): уборка и свайп. */
#vh-sloi .auth-slide.vh-bez,
#vh-sloi .auth-slide.vh-bez::after { transition: none !important; }

/* «Меньше движения»: без сдвига. Новый слайд проступает поверх прежнего,
   прежний стоит на месте без затемнения; уходящий назад тает на месте.
   Палец по-прежнему ведёт слайд — это движение по воле человека, его не
   отнимаем. */
@media (prefers-reduced-motion: reduce) {
  #vh-sloi .auth-slide {
    opacity: 0;
    transition: opacity 150ms linear, visibility 0s linear 150ms;
  }
  #vh-sloi .auth-slide.active {
    opacity: 1;
    transition: opacity 150ms linear, visibility 0s;
  }
  #vh-sloi .auth-slide.vh-nizhe {
    opacity: 1;
    transform: none;
    transition: visibility 0s;
  }
  #vh-sloi .auth-slide.vh-uhod { transform: none; }
  #vh-sloi .auth-slide.vh-nizhe::after { opacity: 0; }
}

/* верхняя строка: 56 под вырезом экрана, круглая «назад» слева */
#vh-sloi .vh-verh {
  flex: none;
  display: flex;
  align-items: center;
  height: calc(56px + env(safe-area-inset-top, 0px));
  padding: env(safe-area-inset-top, 0px) 16px 0;
}

#vh-sloi .vh-telo {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 4px 16px 24px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
#vh-sloi .vh-telo::-webkit-scrollbar { display: none; }
/* Содержимое тела не ужимается: при открытой клавиатуре тело прокручивается.
   Без этого карточка анкеты (overflow: hidden, значит min-height 0)
   сплющивалась под свободное место и обрезала строки Имя/Фамилия/Пароль. */
#vh-sloi .vh-telo > * { flex-shrink: 0; }


#vh-sloi .vh-niz {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 16px max(16px, calc(12px + env(safe-area-inset-bottom, 0px)));   /* в приложении 12 px над полоской «домой», а не вплотную */
  background: var(--n1-bg, #262626);
}

/* ── Текст ────────────────────────────────────────────────────────────── */
#vh-sloi .vh-h1 {
  margin: 0;
  padding: 0 4px;
  font: 700 30px/36px var(--vh-font);
  letter-spacing: -.5px;
  color: #fff;
  text-wrap: balance;
}

#vh-sloi .vh-pod {
  margin: 6px 0 0;
  padding: 0 4px;
  font: 400 15px/20px var(--vh-font);
  letter-spacing: -.23px;
  color: var(--n1-grey, #bdbdbd);
  text-wrap: pretty;
}

#vh-sloi .vh-centr { text-align: center; }
#vh-sloi .vh-nowrap { white-space: nowrap; }

/* строки под полем: сноска серым, ошибка красным */
#vh-sloi .vh-snoska,
#vh-sloi .vh-oshibka {
  margin: 8px 0 0;
  padding: 0 16px;
  font: 400 15px/20px var(--vh-font);
  letter-spacing: -.23px;
  color: var(--n1-grey, #bdbdbd);
}
#vh-sloi .vh-oshibka { color: var(--n1-red, #ff6b6b); }

/* ── Первый экран «Маршрут»: обещание, поле, соглашение, картинка ─────────
   Сверху заголовок и поле номера, под полем соглашение (13/18 серым,
   ссылки белым, по краю текста поля), ниже картинка на всё свободное место
   до кнопки. Клавиатура ложится на картинку: поле, соглашение и кнопка над
   клавиатурой видны, экран не двигается и не сжимается.
   Картинка (.vh-scena-kartinka) вписывается в .vh-scena целиком: сейчас это
   SVG из готовых 3D (фура едет по пунктиру к пункту Neo, у пункта мягкий
   салатовый свет — единственный акцент экрана); цельная vhod-diorama.webp
   встаёт на её место одной строкой <img class="vh-scena-kartinka">. */
#vh-sloi #slide-phone .vh-telo {
  /* сверху логотип (вырез + 25), заголовок под ним на той же высоте, что у
     остальных шагов: вырез + 60 (строка 56 + 4) */
  padding-top: calc(env(safe-area-inset-top, 0px) + 25px);
}
/* Логотип первого слайда: то же место и размер, что в шапке Главной
   (n1.css, .n1-home-logo: 92x30, слева 16, сверху вырез + 25). На него
   садится логотип заставки приложения (neo-native.js, mestoLogo), поэтому
   он не двигается: без анимации появления, без сдвига на низком экране.
   25 + 30 + 5 = 60: заголовок не сдвинулся. Украшение, касание мимо. */
#vh-sloi .vh-logo {
  display: block;
  align-self: flex-start;
  width: 92px;
  height: 30px;
  margin: 0 0 5px;
  pointer-events: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
#vh-sloi #slide-phone .vh-pod { margin-top: 8px; }
#vh-sloi #slide-phone .vh-pole { margin-top: 24px; }

#vh-sloi .vh-pravo {
  margin: 12px 0 0;
  padding: 0 16px;
  text-align: left;
  font: 400 13px/18px var(--vh-font);
  letter-spacing: -.08px;
  color: var(--n1-grey2, #8e8e8e);
  text-wrap: pretty;
}
/* Ссылки на документы — белые и подчёркнутые: видно, что это отдельное
   место для нажатия. Открывает их только касание по самим словам (vhod.js,
   ssylkaPodPaltsem), рядом с ними касание ничего не открывает. */
#vh-sloi .vh-pravo a,
#vh-sloi .vh-soglasie-tekst a {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(255, 255, 255, .5);
  text-underline-offset: 3px;
}
/* ошибка номера встаёт между полем и соглашением */
#vh-sloi .vh-oshibka + .vh-pravo { margin-top: 8px; }
/* Кнопка над клавиатурой наехала бы на соглашение (низкий экран, высокая
   клавиатура) — соглашение гаснет, пока клавиатура открыта (vhod.js,
   sledimZaSoglasiem). Над кнопкой оно видно всегда, когда есть место. */
#vh-sloi .vh-pravo { transition: opacity 150ms linear; }
#vh-sloi .vh-pravo.vh-pod-knopkoj { opacity: 0; pointer-events: none; }

#vh-sloi .vh-scena {
  position: relative;
  flex: 1 0 168px;
  margin: 16px 0 0;
  pointer-events: none;
}
#vh-sloi .vh-scena-kartinka {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* свет у пункта шире квадрата картинки: без этого SVG обрезал его своей
     рамкой, и вместо мягкого пятна выходил прямоугольник */
  overflow: visible;
  -webkit-user-drag: none;
}

/* Появление первого экрана: заголовок и картинка один раз мягко проступают
   и чуть поднимаются, фура при этом подъезжает по пунктиру к пункту. Поле
   и кнопка на месте сразу — набирать номер можно с первого кадра.
   Запускается каждый раз, когда слой показывают (display меняется с none). */
@keyframes vh-poyavlenie {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes vh-fura-edet {
  from { opacity: 0; transform: translate(26px, -12px); }
  to { opacity: 1; transform: none; }
}
#vh-sloi.vh-otkryt #slide-phone .vh-scena,
#vh-sloi.vh-otkryt #slide-phone .vh-h1 {
  animation: vh-poyavlenie 420ms var(--neo-ease, cubic-bezier(.25, .8, .25, 1)) both;
}
#vh-sloi.vh-otkryt #slide-phone .vh-scena-fura {
  animation: vh-fura-edet 900ms var(--neo-ease, cubic-bezier(.25, .8, .25, 1)) 120ms both;
}
@media (prefers-reduced-motion: reduce) {
  #vh-sloi.vh-otkryt #slide-phone .vh-scena,
  #vh-sloi.vh-otkryt #slide-phone .vh-h1,
  #vh-sloi.vh-otkryt #slide-phone .vh-scena-fura { animation: none; }
}

/* Клавиатура ложится поверх, экран не сжимается и картинка не прячется:
   кнопку над клавиатурой поднимает модуль js/n1-keyboard.js (разметка
   data-kb в app.html). Низкий экран — класс .vh-nizkij от vhod.js по высоте
   окна БЕЗ клавиатуры, а не @media (max-height): там, где клавиатура
   сжимает окно, медиазапрос срабатывал от неё, и картинка прыгала. */
/* Верх первого слайда на низком экране тот же (логотип, под ним заголовок
   на вырез + 60): логотип стоит там же, где на Главной. */
#vh-sloi.vh-nizkij .vh-scena { flex-basis: 120px; margin-top: 8px; }
/* Узкий и низкий (320x568): заголовок 30/36 шёл в три строки и вместе с
   логотипом опускал поле под поднятую кнопку. При 26/32 строк две. */
@media (max-width: 359px) {
  #vh-sloi.vh-nizkij #slide-phone .vh-h1 { font-size: 26px; line-height: 32px; }
}

/* ── Поле: одна строка-карточка, ввод без рамки ───────────────────────── */
#vh-sloi .vh-pole {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  margin-top: 28px;
  padding: 0 16px;
  border-radius: 24px;
  background: var(--n1-card, #2f2f2f);
  transition: opacity .2s ease;
}

#vh-sloi .auth-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 56px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  box-shadow: none;
  color: #fff;
  font: 400 17px/22px var(--vh-font);
  letter-spacing: -.43px;
  caret-color: var(--n1-lime, #b2fe12);
  -webkit-appearance: none;
  appearance: none;
}
#vh-sloi .auth-input:focus,
#vh-sloi .auth-input.input-error {
  border: 0;
  box-shadow: none;
  background: transparent;
}
#vh-sloi .auth-input::placeholder {
  color: var(--n1-grey2, #8e8e8e);
  opacity: 1;
}
#vh-sloi .auth-input:focus-visible { outline: 0; }
/* автозаполнение не красит строку в жёлтый */
#vh-sloi .auth-input:-webkit-autofill,
#vh-sloi .auth-input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff;
  -webkit-box-shadow: 0 0 0 1000px var(--n1-card, #2f2f2f) inset;
  caret-color: var(--n1-lime, #b2fe12);
  transition: background-color 9999s;
}
/* свои глазки у браузеров прячем: глазок у нас свой */
#vh-sloi .auth-input::-ms-reveal,
#vh-sloi .auth-input::-ms-clear { display: none; }
#vh-sloi .auth-input::-webkit-credentials-auto-fill-button,
#vh-sloi .auth-input::-webkit-password-reveal-button { display: none !important; }

/* Номер телефона: флаг и «+7» с чертой слева, вне поля ввода.
   Флаг в файле 500×500 занимает x100–400: кадр 22 показывает круг. */
#vh-sloi .vh-kod {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
  padding-right: 12px;
  box-shadow: 1px 0 0 var(--n1-hair, #4a4a4a);
  font: 400 17px/22px var(--vh-font);
  letter-spacing: -.43px;
  color: #fff;
}
#vh-sloi .vh-flag {
  flex: none;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
}
#vh-sloi .vh-flag img {
  display: block;
  width: 36.67px;
  height: 36.67px;
  max-width: none;
  margin: -7.33px 0 0 -7.33px;
  pointer-events: none;
}
#vh-sloi .vh-pole--tel .auth-input { font-variant-numeric: tabular-nums; }

/* крестик очистки: только в поле с фокусом и набранным номером */
#vh-sloi .vh-ochistit {
  flex: none;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 -10px 0 0;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: none;
  color: var(--n1-grey2, #8e8e8e);
  cursor: pointer;
}
#vh-sloi .vh-pole:focus-within .auth-input:not(:placeholder-shown) ~ .vh-ochistit { display: grid; }

/* пока ждём ответа сервера, поле тусклое */
#vh-sloi .auth-slide:has(.vh-niz .btn-loading) .vh-pole { opacity: .45; }
/* вход закрыт лимитом попыток (vhod.js, limitVhoda): поле тусклое и не нажимается */
#vh-sloi .vh-limit .vh-pole { opacity: .45; }
#vh-sloi .auth-input:disabled { opacity: 1; -webkit-text-fill-color: currentColor; }

/* глазок у пароля */
#vh-sloi .input-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0 -10px 0 0;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: none;
  color: var(--n1-grey2, #8e8e8e);
  cursor: pointer;
}

/* ── Карточка со строками (регистрация, анкета) ───────────────────────── */
#vh-sloi .vh-karta {
  margin-top: 28px;
  border-radius: 24px;
  background: var(--n1-card, #2f2f2f);
  overflow: hidden;
}
#vh-sloi .vh-stroka {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 16px;
}
/* волосок между строками: от начала текста до края */
#vh-sloi .vh-stroka + .vh-stroka::before {
  content: "";
  position: absolute;
  left: 16px;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--n1-hair, #4a4a4a);
  transform: scaleY(.5);
  transform-origin: top;
}
#vh-sloi .vh-karta--ikonki .vh-stroka + .vh-stroka::before { left: 60px; }

#vh-sloi .vh-metka {
  flex: none;
  width: 92px;
  font: 400 17px/22px var(--vh-font);
  letter-spacing: -.43px;
  color: #fff;
}

#vh-sloi .vh-stroka-tekst {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 12px 0;
}
#vh-sloi .vh-t { font: 400 17px/22px var(--vh-font); letter-spacing: -.43px; color: #fff; }
#vh-sloi .vh-g { font: 400 15px/20px var(--vh-font); letter-spacing: -.23px; color: var(--n1-grey, #bdbdbd); }

/* значок WhatsApp: рисунок в файле 500×500 занимает x100–400 */
#vh-sloi .vh-wa {
  flex: none;
  display: block;
  width: 32px;
  height: 32px;
  overflow: hidden;
}
#vh-sloi .vh-wa img {
  display: block;
  width: 53.33px;
  height: 53.33px;
  max-width: none;
  margin: -10.67px 0 0 -10.67px;
  pointer-events: none;
}

/* галочка согласия: 24 r7, выбрано — салатовая заливка и тёмная галочка */
#vh-sloi .vh-soglasie {
  align-items: flex-start;
  padding-top: 16px;
  padding-bottom: 16px;
  cursor: pointer;
}
#vh-sloi .vh-soglasie input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
#vh-sloi .reg-terms-mark {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  margin: -2px 4px 0;
  border-radius: 7px;
  box-shadow: inset 0 0 0 1.5px var(--n1-grey2, #8e8e8e);
  color: transparent;
  transition: background-color .15s ease, box-shadow .15s ease, color .15s ease;
}
#vh-sloi .vh-soglasie input:checked + .reg-terms-mark {
  background: var(--n1-lime, #b2fe12);
  box-shadow: none;
  color: var(--n1-on-lime, #111a00);
}
#vh-sloi .vh-soglasie input:focus-visible + .reg-terms-mark {
  outline: 2px solid var(--n1-lime, #b2fe12);
  outline-offset: 2px;
}
#vh-sloi .vh-soglasie-tekst {
  font: 400 15px/20px var(--vh-font);
  letter-spacing: -.23px;
  color: var(--n1-grey, #bdbdbd);
}

/* полосы надёжности пароля в N1 нет; сами элементы нужны vhod.js */
#vh-sloi .password-strength { display: none !important; }

/* ── Кнопки ───────────────────────────────────────────────────────────── */
#vh-sloi .btn-primary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  margin: 0;
  padding: 0 20px;
  border: 0;
  border-radius: 28px;
  background: var(--n1-lime, #b2fe12);
  color: var(--n1-on-lime, #111a00);
  box-shadow: none;
  font: 600 17px/22px var(--vh-font);
  letter-spacing: -.4px;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
#vh-sloi .btn-primary:disabled {
  background: var(--n1-card2, #383838);
  color: var(--n1-grey2, #8e8e8e);
  cursor: default;
}

/* загрузка: надпись прячется, в кнопке тёмная крутилка на салатовом.
   Надпись гаснет сразу, без перехода цвета: иначе первые 0.2 с крутилка
   лежит поверх тающего «Создать аккаунт». */
#vh-sloi .btn-primary.btn-loading,
#vh-sloi .btn-primary.btn-loading:disabled {
  background: var(--n1-lime, #b2fe12);
  color: transparent;
  transition: none;
}
#vh-sloi .btn-loading::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  box-sizing: border-box;
  border: 2.2px solid var(--n1-on-lime, #111a00);
  border-top-color: transparent;
  border-radius: 50%;
  animation: vh-krug .8s linear infinite;
}
@keyframes vh-krug { to { transform: rotate(360deg); } }

/* «назад»: круг 44, стрелка ph-caret-left */
#vh-sloi .btn-back {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: var(--n1-card2, #383838);
  color: #fff;
  cursor: pointer;
}

/* ссылка-кнопка: салатовый 17/400 */
#vh-sloi .btn-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin: 4px 0 0;
  padding: 0 16px;
  border: 0;
  background: none;
  color: var(--n1-lime, #b2fe12);
  font: 400 17px/22px var(--vh-font);
  letter-spacing: -.43px;
  text-align: left;
  /* стили приложения подчёркивают .btn-link */
  text-decoration: none;
  cursor: pointer;
}
#vh-sloi .btn-link:disabled { cursor: default; }

/* ── Код из WhatsApp: шесть клеток ────────────────────────────────────── */
#vh-sloi .code-inputs {
  display: flex;
  gap: 8px;
  margin-top: 28px;
  padding: 0 4px;
}
#vh-sloi .code-box {
  flex: 1 1 0;
  min-width: 0;
  max-width: 64px;
  height: 56px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  outline: 0;
  background: var(--n1-card, #2f2f2f);
  box-shadow: none;
  color: #fff;
  font: 400 28px/34px var(--vh-font);
  letter-spacing: 0;
  text-align: center;
  caret-color: var(--n1-lime, #b2fe12);
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow .15s ease, opacity .2s ease;
}
#vh-sloi .code-box:focus {
  border: 0;
  background: var(--n1-card, #2f2f2f);
  box-shadow: inset 0 0 0 2px var(--n1-lime, #b2fe12);
}
#vh-sloi .code-box:focus-visible { outline: 0; }
#vh-sloi .code-box.error { box-shadow: inset 0 0 0 1.5px var(--n1-red, #ff6b6b); }

/* ошибка кода — одной красной строкой; видна только с .show */
#vh-sloi .code-error {
  display: none;
  margin: 12px 0 0;
  padding: 0 4px;
  font: 400 15px/20px var(--vh-font);
  letter-spacing: -.23px;
  color: var(--n1-red, #ff6b6b);
}
#vh-sloi .code-error.show { display: block; }

/* «Далее» и «Подтвердить» не нужны: код уходит сам после шестой цифры.
   Из разметки их не убрать — vhod.js пишет в них без проверки. Их класс
   загрузки заодно показывает строку «Проверяем код». */
#vh-sloi .vh-knopka-koda { display: none !important; }

#vh-sloi .vh-proverka {
  display: none;
  align-items: center;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0 4px;
  font: 400 15px/20px var(--vh-font);
  letter-spacing: -.23px;
  color: var(--n1-grey, #bdbdbd);
}
#vh-sloi .vh-knopka-koda.btn-loading ~ .vh-proverka { display: flex; }
#vh-sloi .vh-knopka-koda.btn-loading ~ .vh-povtor { display: none; }
#vh-sloi .auth-slide:has(.vh-knopka-koda.btn-loading) .code-box { opacity: .6; }

#vh-sloi .vh-krutilka {
  flex: none;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: vh-krug .8s linear infinite;
}

/* «Новый код можно запросить через 0:47» → «Отправить код ещё раз» */
#vh-sloi .vh-povtor {
  margin-top: 4px;
  padding: 0 4px;
}
#vh-sloi .vh-povtor:disabled {
  font: 400 15px/20px var(--vh-font);
  letter-spacing: -.23px;
  color: var(--n1-grey, #bdbdbd);
  font-variant-numeric: tabular-nums;
}

/* Три неверных кода подряд (vhod.js, zablokirovatKod): клетки тусклые и не
   нажимаются, под ними серым причина и отсчёт до нового кода, двумя строками
   (макет LoginCodeLocked). */
#vh-sloi .vh-kod-blok .code-box,
#vh-sloi .code-box:disabled {
  opacity: .45;
  box-shadow: none;
  cursor: default;
  -webkit-text-fill-color: currentColor;
}
#vh-sloi .vh-blok-koda {
  margin: 12px 0 0;
  padding: 0 4px;
  font: 400 15px/20px var(--vh-font);
  letter-spacing: -.23px;
  color: var(--n1-grey, #bdbdbd);
  font-variant-numeric: tabular-nums;
  outline: 0;
}
#vh-sloi .vh-blok-koda > span { display: block; }

/* ── Всплывающие сообщения входа ──────────────────────────────────────── */
#vh-sloi #vh-soobscheniya {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: max(12px, calc(env(safe-area-inset-top, 0px) + 8px)) 16px 0;
  pointer-events: none;
}

/* У приложения во внутренних стилях app.html свой .toast (рамка, полоса
   слева, въезд снизу) — здесь всё это снято. */
#vh-sloi .toast {
  box-sizing: border-box;
  width: 100%;
  max-width: 420px;
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 12px 16px 12px 12px;
  border: 0;
  border-radius: 16px;
  background: #383838;
  box-shadow: 0 16px 40px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .25);
  color: #fff;
  font: 400 15px/20px var(--vh-font);
  letter-spacing: -.23px;
  pointer-events: auto;
  animation: none;
  opacity: 0;
  transform: translateY(-16px);
  transition: transform 280ms var(--neo-ease, ease-out), opacity 200ms ease-out;
}
#vh-sloi .toast.show {
  opacity: 1;
  transform: none;
}
/* круг 32 слева: серый со стрелками (сведения), салатовый с галочкой, красный с крестом */
#vh-sloi .vh-tost-znak {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background: #4a4a4a;
  color: #fff;
}
#vh-sloi .toast.success .vh-tost-znak { background: var(--n1-lime, #b2fe12); color: var(--n1-on-lime, #111a00); }
#vh-sloi .toast.error .vh-tost-znak { background: #ff453a; color: #fff; }
#vh-sloi .vh-tost-tekst { min-width: 0; overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  #vh-sloi .toast { transform: none; transition: opacity 150ms ease; }
}

/* ══════════════════════════════════════════════════════════════════════════
   РЕГИСТРАЦИЯ: ШАГ ПРОМОКОДА.
   Это экран приложения (#promo-code-screen), а не слайд входа; в режим
   регистрации его переводит app.js (__neoPromoVRegistracii) признаком
   data-obyazatelno. Общий вид экрана — n1-profilesub.css, здесь только то,
   что отличает шаг регистрации.

   «Пропустить» — второй тёмной кнопкой 52 сразу под «Активировать» (N1:
   кнопки столбиком, главная салатовая, вторая #383838). Раньше это была
   мелкая ссылка в правом верхнем углу, а первые три секунды её закрывал
   тост «Пункт выдачи выбран». app.js ставит кнопку следом за «Активировать»,
   где бы та ни стояла (в форме или в доке под телом экрана).
   Инлайн-стили кнопки и правило n1-profilesub.css (ссылка в шапке)
   перебиваем: !important и вес двух id.
   ══════════════════════════════════════════════════════════════════════════ */
body.n1 #promo-code-screen[data-obyazatelno] #promo-skip:not([hidden]) {
  position: static;
  display: block;
  width: 100% !important;
  height: 52px;
  margin: 12px 0 0 !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 26px !important;
  background: var(--n1-card2, #383838) !important;
  color: #fff !important;
  font: 600 17px/22px var(--n1-font, -apple-system, BlinkMacSystemFont, system-ui, sans-serif) !important;
  letter-spacing: -.4px;
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Регистрация закончена, нажатая кнопка ждёт Главную (app.js, zakonchitPromo):
   надпись прячется, на её месте крутилка, как у кнопок входа. Цвет кнопки
   свой, даже когда её гасит проверка пустого поля. */
body.n1 #promo-code-screen[data-obyazatelno] #promo-skip.vh-zhdyom:not([hidden]),
body.n1 #promo-code-screen[data-obyazatelno] #promo-modal-submit.vh-zhdyom {
  position: relative;
  color: transparent !important;
}
body.n1 #promo-code-screen[data-obyazatelno] #promo-modal-submit.vh-zhdyom {
  background: var(--n1-lime, #b2fe12) !important;
}
body.n1 #promo-code-screen[data-obyazatelno] #promo-skip.vh-zhdyom:not([hidden])::after,
body.n1 #promo-code-screen[data-obyazatelno] #promo-modal-submit.vh-zhdyom::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  box-sizing: border-box;
  border: 2.2px solid #fff;
  border-top-color: transparent;
  border-radius: 50%;
  animation: vh-krug .8s linear infinite;
}
body.n1 #promo-code-screen[data-obyazatelno] #promo-modal-submit.vh-zhdyom::after {
  border-color: var(--n1-on-lime, #111a00);
  border-top-color: transparent;
}
/* пока крутится «Активировать», «Пропустить» погашена и выглядит так */
body.n1 #promo-code-screen[data-obyazatelno] #promo-skip:not([hidden]):disabled:not(.vh-zhdyom) {
  color: var(--n1-grey2, #8e8e8e) !important;
  cursor: default;
}