/* ============================================================================
   Obsidian Gold — auth.
   Вход, регистрация, подтверждение email, восстановление и смена пароля.

   Значения — из макета `Zapret VPN Вход.dc.html` (fidelity: high, цифры
   воспроизводятся буквально). Цвета берутся из tokens.css; те значения макета,
   которых в токенах нет, объявлены один раз в блоке 0 как --zp-auth-* и дальше
   используются только через переменные.

   ЧТО ЗДЕСЬ ЖИВЁТ
     0  Переменные поверхности и каркас страницы (перекрывает shell.css)
     1  Карточка авторизации      .zp-auth
     2  Табы вход/регистрация     .zp-auth__tabs
     3  Шапка карточки            .zp-auth__eyebrow .zp-auth__title
     4  Уведомления               .zp-auth__notices
     5  Telegram                  .btn-telegram .zp-auth__tgwidget .zp-auth__divider
     6  Формы                     .zp-auth__form .zp-auth__labelrow .zp-auth__code
     7  Индикатор пароля          .zp-pw
     8  Согласие с офертой        .zp-auth__terms  + .btn.is-locked
     9  Доп. блоки и подвал       .zp-auth__aux .zp-auth__switch .zp-auth__legal
    10  Адаптив                   900 / 640 / 380
   Базовые правила каркаса (.auth-shell, .auth-aside, .auth-layout__panel)
   объявлены в shell.css; здесь они доводятся до значений макета.
   ============================================================================ */


/* ============================================================================
   0. Переменные поверхности и каркас страницы

   Макет — один flex-ряд на min-height:100vh из двух секций, без общей шапки:
   слева бренд-панель (бренд вверху → знак по центру → заголовок внизу),
   справа стеклянная карточка. Просвет между колонками даёт их собственный
   padding, поэтому gap у контейнера нулевой.
   ============================================================================ */

.auth-body {
  /* Ореол фона и подсвет знака: в токенах --zp-halo слабее (0.22) */
  --zp-auth-halo: radial-gradient(circle, rgba(255, 150, 0, 0.24), rgba(255, 120, 0, 0.06) 45%, transparent 70%);
  --zp-auth-mark-glow: radial-gradient(circle, rgba(255, 150, 0, 0.42), rgba(255, 120, 0, 0.08) 50%, transparent 72%);
  /* Стекло карточки: плёнка и золотой кант ярче, чем в общих токенах */
  --zp-auth-glass: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012));
  --zp-auth-glass-line: linear-gradient(160deg, rgba(255, 184, 0, 0.55), rgba(255, 184, 0, 0.08) 45%, rgba(246, 240, 228, 0.08));
  --zp-auth-card-shadow: 0 40px 100px rgba(0, 0, 0, 0.6);
  /* Тени золотой кнопки: в макете inset-блик остаётся и на hover */
  --zp-auth-gold-shadow: 0 16px 40px rgba(255, 140, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --zp-auth-gold-shadow-hover: 0 22px 50px rgba(255, 140, 0, 0.48), inset 0 1px 0 rgba(255, 255, 255, 0.55);
  /* Приглушённый ink макета: плейсхолдеры и надпись «или».
     Тише, чем --zp-ink-3; используется только для необязательных подсказок. */
  --zp-auth-ink-4: #6f6a60;
  /* Текст Telegram-кнопки на hover — чистый белый, как в макете */
  --zp-auth-tg-ink-hover: #ffffff;
}

.auth-body .auth-shell {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
}

/* Фон: один ореол слева сверху (второй — от каркаса кабинета — не рисуем) */
.zp-decor--auth .zp-decor__halo--a {
  top: -20vw;
  right: auto;
  left: -10vw;
  width: 60vw;
  height: 60vw;
  background: var(--zp-auth-halo);
  filter: blur(34px);
}

/* --- Левая колонка: бренд, знак, заголовок --- */

.auth-body .auth-aside {
  position: relative;
  z-index: 1;
  flex: 1 1 380px;
  min-width: 0;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  gap: 0;
  padding: clamp(24px, 3.5vw, 56px);
  /* Появление разнесено по трём блокам — общая анимация колонки не нужна */
  animation: none;
}

.auth-aside__brand {
  display: flex;
  align-items: center;
  align-self: flex-start;
  gap: 12px;
  min-width: 0;
  text-decoration: none;
  animation: zp-rise 700ms var(--zp-ease) both;
}

/* Знак стоит свободно: ни рамки, ни плашки — скругление уже внутри z-mark.svg */
.auth-aside__brand .brand-logo-image {
  width: 38px;
  height: 38px;
  border-radius: 0;
  background: none;
  object-fit: contain;
}

.auth-aside__brand .brand-wordmark { font-size: 14.5px; }

.auth-aside__hero {
  position: relative;
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  padding: clamp(20px, 4vw, 60px) 0;
}

.auth-body .auth-aside__orbit {
  position: relative;
  width: min(70%, 380px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  animation: zp-rise 1000ms var(--zp-ease) 150ms both;
}

/* Кольцо орбиты и точка на нём (значения макета; дублируют каркас shell.css,
   чтобы поверхность входа не зависела от правок в общем файле) */
.auth-aside__orbit-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(255, 184, 0, 0.28);
  animation: zp-orbit 40s linear infinite;
}

.auth-aside__orbit-dot {
  position: absolute;
  inset: 0;
  animation: zp-orbit 40s linear infinite;
}

.auth-aside__orbit-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: var(--zp-gold-light);
  box-shadow: 0 0 18px 4px rgba(255, 184, 0, 0.65);
}

/* Размытый подсвет под знаком — без него знак «плоский» */
.auth-aside__orbit-glow {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background: var(--zp-auth-mark-glow);
  filter: blur(26px);
  animation: zp-breathe 6s ease-in-out infinite;
  pointer-events: none;
}

/* Фирменный знак из макета: свободно стоящая Z-молния без плашки */
.auth-body .auth-aside__mark {
  position: relative;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 0;
  background-image: url("assets/z-bolt.svg");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  filter: drop-shadow(0 30px 60px rgba(255, 140, 0, 0.45));
  animation: zp-float-auth 7s ease-in-out infinite;
}

/* В макете размах качания шире общего --zp-float (2deg): 3deg */
@keyframes zp-float-auth {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-16px) rotate(3deg); }
}

.auth-aside__foot { animation: zp-rise 900ms var(--zp-ease) 300ms both; }

.auth-body .auth-aside__title {
  margin: 0;
  max-width: 16ch;
  font-family: var(--zp-font-display);
  font-weight: 200;
  font-size: clamp(30px, 3.6vw, 52px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--zp-ink);
}

.auth-aside__title .zp-gold-text { font-weight: 500; }

.auth-aside__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 18px 0 0;
  font-family: var(--zp-font-mono);
  font-size: 11.5px;
  line-height: 1.4;
  letter-spacing: 0.08em;
  color: var(--zp-ink-3);
}

/* --- Правая колонка: карточка --- */

.auth-body .auth-layout__panel {
  position: relative;
  z-index: 2;
  flex: 1 1 420px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 3.5vw, 56px);
}

.auth-body .auth-layout__panel > * { width: 100%; max-width: 460px; }


/* ============================================================================
   1. Карточка авторизации
   Стекло: белая плёнка + золотой кант по border-box, сквозь blur(20px)
   просвечивает ореол фона. Тёмного скрима под плёнкой в макете нет.
   ============================================================================ */

.zp-auth {
  position: relative;
  width: 100%;
  max-width: 460px;
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid transparent;
  border-radius: 28px;
  background:
    var(--zp-auth-glass) padding-box,
    var(--zp-auth-glass-line) border-box;
  box-shadow: var(--zp-auth-card-shadow);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  animation: zp-rise 800ms var(--zp-ease) 120ms both;
}

/* Первый элемент карточки не должен добавлять свой верхний отступ */
.zp-auth > *:first-child { margin-top: 0; }


/* ============================================================================
   2. Табы «Вход / Регистрация»
   Это две ссылки на разные маршруты, а не JS-вкладки: страницы отдаёт сервер.
   Табы стыкуются вплотную — зазора между ними в макете нет.
   ============================================================================ */

.zp-auth__tabs {
  gap: 0;
  margin-bottom: 0;
  padding: 4px;
  border-radius: 14px;
  border-color: rgba(246, 240, 228, 0.08);
}

.zp-auth__tabs .tab-item {
  flex: 1 1 0;
  min-height: 44px;
  padding: 11px 14px;
  border-radius: 11px;
  font-size: 14.5px;
}


/* ============================================================================
   3. Шапка карточки
   ============================================================================ */

.zp-auth__head {
  margin-top: clamp(22px, 3vw, 30px);
  margin-bottom: 0;
}

/* Знака внутри карточки в макете нет ни на одном размере: бренд живёт слева.
   Разметку оставляем скрытой — на ней висит переопределение логотипа из
   бэкенда (GET_BRAND_LOGO_URL), которое обязано сохраниться в шаблоне. */
.zp-auth__mark { display: none; }

.zp-auth__eyebrow {
  margin: 0;
  font-family: var(--zp-font-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--zp-ink-3);
  overflow-wrap: anywhere;
}

.zp-auth__title {
  margin: 8px 0 0;
  font-family: var(--zp-font-display);
  font-weight: 300;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--zp-ink);
  overflow-wrap: anywhere;
}

.zp-auth__subtitle {
  margin: 10px 0 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--zp-ink-2);
}


/* ============================================================================
   4. Уведомления (err/ok)
   Контейнер без собственных отступов: когда ни одна ветка не сработала,
   он остаётся пустым и не даёт лишнего просвета. Отступы держат сами пилюли.
   ============================================================================ */

.zp-auth__notices { margin: 0; }

.zp-auth__notices .alert {
  margin: 0 0 12px;
  padding: 13px 15px;
  border-radius: var(--zp-r-tile-sm);
  font-size: 13.5px;
  line-height: 1.45;
}

.zp-auth__notices .alert:first-child { margin-top: clamp(20px, 2.6vw, 28px); }
.zp-auth__notices .alert:last-child { margin-bottom: 0; }

.zp-auth__notices .alert::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 7px;
  border-radius: 50%;
  background: currentColor;
}

.zp-auth__notices .alert-content { margin: 0; }


/* ============================================================================
   5. Telegram: кнопка, виджет, разделитель
   ============================================================================ */

.zp-auth__tg { margin-top: clamp(20px, 2.6vw, 28px); }

/* Перекрываем плоскую синюю кнопку старой темы из custom.css.
   Градиент чистый, как в макете: затемняющих слоёв поверх него нет. */
.zp-auth .btn.btn-telegram {
  position: relative;
  overflow: hidden;
  gap: 12px;
  border-color: transparent;
  background-color: transparent;
  background-image: var(--zp-tg);
  color: var(--zp-tg-ink);
  font-weight: 600;
  font-size: 15.5px;
  box-shadow: 0 16px 40px rgba(30, 143, 214, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.zp-auth .btn.btn-telegram:hover {
  filter: none;
  color: var(--zp-auth-tg-ink-hover);
  transform: translateY(-2px);
  box-shadow: 0 22px 50px rgba(30, 143, 214, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.zp-auth .btn.btn-telegram > * { position: relative; z-index: 1; }

.zp-auth .btn.btn-telegram svg { width: 20px; height: 20px; }

/* Бегущий блик — в макете он только у Telegram-кнопки */
.zp-auth .btn.btn-telegram::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 36%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: translateX(-160%) skewX(-18deg);
  animation: zp-shimmer 3.4s var(--zp-ease) 1.6s infinite;
  pointer-events: none;
}

/* Запасная ветка: официальный виджет Telegram рисует свой iframe.
   Держим ту же высоту, что и фирменная кнопка, чтобы ритм карточки не поехал. */
.zp-auth__tgwidget {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
}

.zp-auth__tgwidget iframe { max-width: 100%; }

.zp-auth__note {
  margin: 10px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  text-align: center;
  color: var(--zp-ink-3);
}

.zp-auth__divider {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: clamp(18px, 2.4vw, 24px) 0;
  font-family: var(--zp-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--zp-auth-ink-4);
}

.zp-auth__divider::before,
.zp-auth__divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: rgba(246, 240, 228, 0.1);
}


/* ============================================================================
   6. Формы
   Вертикальный ритм макета: поля — одна колонка с gap:14px, кнопка отбивается
   ещё на 6px. Своего margin-top у формы нет — его дают соседние блоки.
   ============================================================================ */

.zp-auth__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 0;
}

.zp-auth__form .form-group { margin-bottom: 0; }
.zp-auth__form .btn { margin-top: 6px; }
.zp-auth__form > .zp-auth__note { margin-top: 0; }

/* Страницы без Telegram-блока (verify / forgot / reset) и выключенный
   Telegram на login: отбивка формы от шапки или от пилюль уведомлений */
.zp-auth__head + .zp-auth__form,
.zp-auth__notices + .zp-auth__form,
.zp-auth__head + .zp-auth__aux,
.zp-auth__notices + .zp-auth__aux { margin-top: clamp(20px, 2.6vw, 28px); }

.zp-auth__form--tight { margin-top: 12px; }

.zp-auth__form .form-input {
  min-height: 50px;
  padding: 14px 16px;
  font-size: 16px;
  line-height: 1.2;
}

.zp-auth__form .form-input::placeholder { color: var(--zp-auth-ink-4); }

/* Строка «Пароль … Забыли пароль?» */
.zp-auth__labelrow {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.zp-auth__labelrow .form-label { margin-bottom: 0; }
.zp-auth__labelrow .zp-auth__link { font-size: 12.5px; white-space: nowrap; }

.zp-auth__link {
  color: var(--zp-gold);
  text-decoration: none;
  border-radius: 4px;
}

.zp-auth__link:hover {
  color: var(--zp-gold-light);
  text-decoration: underline;
}

/* Кнопки карточки: 16px 22px, высота 56px, текст 15.5px */
.zp-auth .btn.btn-lg {
  min-height: 56px;
  padding: 16px 22px;
  gap: 10px;
  font-size: 15.5px;
}

.zp-auth .btn-primary { box-shadow: var(--zp-auth-gold-shadow); }
.zp-auth .btn-primary:hover { box-shadow: var(--zp-auth-gold-shadow-hover); }

/* Блика на золотой кнопке в макете нет — он только у Telegram */
.zp-auth .btn-primary::after { display: none; }

/* У Telegram-кнопки зазор иконка/текст шире золотой (объявлено после .btn-lg) */
.zp-auth .btn.btn-lg.btn-telegram { gap: 12px; }

/* Код из письма — моноширинный, с разрядкой */
.zp-auth__code {
  font-family: var(--zp-font-mono);
  font-size: 17px;
  letter-spacing: 0.26em;
  text-align: center;
}

.zp-auth__code::placeholder { letter-spacing: 0.1em; }

.zp-auth__arrow {
  font-size: 17px;
  line-height: 1;
  transition: transform var(--zp-t-fast) var(--zp-ease);
}

.zp-auth .btn:hover .zp-auth__arrow { transform: translateX(3px); }


/* ============================================================================
   7. Индикатор надёжности пароля
   Значение приходит из data-score, который проставляет скрипт register.html.
   Без JS виден нейтральный индикатор и подсказка — форма остаётся рабочей.
   Подпись окрашена в тот же цвет, что и полосы.
   ============================================================================ */

.zp-pw { margin-top: 8px; }

.zp-pw__bars {
  display: flex;
  gap: 4px;
}

.zp-pw__bar {
  flex: 1 1 0;
  height: 3px;
  border-radius: var(--zp-r-pill);
  background: rgba(246, 240, 228, 0.1);
  transition: background 300ms var(--zp-ease);
}

.zp-pw__label {
  display: block;
  margin-top: 6px;
  font-family: var(--zp-font-mono);
  font-size: 11px;
  line-height: 1.4;
  color: var(--zp-ink-3);
  transition: color 300ms var(--zp-ease);
}

.zp-pw[data-score="1"] .zp-pw__bar:nth-child(-n + 1) { background: var(--zp-err); }
.zp-pw[data-score="2"] .zp-pw__bar:nth-child(-n + 2) { background: var(--zp-amber); }
.zp-pw[data-score="3"] .zp-pw__bar:nth-child(-n + 3) { background: var(--zp-gold); }
.zp-pw[data-score="4"] .zp-pw__bar { background: var(--zp-ok); }

.zp-pw[data-score="1"] .zp-pw__label { color: var(--zp-err); }
.zp-pw[data-score="2"] .zp-pw__label { color: var(--zp-amber); }
.zp-pw[data-score="3"] .zp-pw__label { color: var(--zp-gold); }
.zp-pw[data-score="4"] .zp-pw__label { color: var(--zp-ok); }


/* ============================================================================
   8. Согласие с офертой
   ============================================================================ */

.zp-auth__terms {
  align-items: flex-start;
  gap: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--zp-ink-2);
  cursor: pointer;
}

.zp-auth__terms input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  margin: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgba(246, 240, 228, 0.2);
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.45);
  cursor: pointer;
  transition: background var(--zp-t-fast) var(--zp-ease),
    border-color var(--zp-t-fast) var(--zp-ease),
    box-shadow var(--zp-t-fast) var(--zp-ease);
}

.zp-auth__terms input[type="checkbox"]::after {
  content: "\2713";
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  color: var(--zp-on-gold);
  opacity: 0;
  transform: scale(0.4);
  transition: opacity var(--zp-t-fast) var(--zp-ease), transform var(--zp-t-fast) var(--zp-ease);
}

.zp-auth__terms input[type="checkbox"]:checked {
  border-color: transparent;
  background: var(--zp-grad-gold);
  box-shadow: 0 6px 16px rgba(255, 140, 0, 0.35);
}

.zp-auth__terms input[type="checkbox"]:checked::after { opacity: 1; transform: none; }

.zp-auth__terms .form-check__text { flex: 1 1 auto; min-width: 0; }
/* Названия документов — цельные строчные блоки. Обычная строчная ссылка на
   узком экране разрывается между строками («Пользовательское» на одной,
   «соглашение» на следующей), и её прямоугольник становится объединением
   обоих кусков — он наезжает на соседнюю ссылку, забирая часть её зоны клика.
   inline-block запрещает такой разрыв, max-width оставляет запас: если ссылка
   когда-то не влезет в строку, она перенесётся внутри себя, а не поверх соседа. */
.zp-auth__terms .form-check__text a {
  display: inline-block;
  max-width: 100%;
  color: var(--zp-gold);
}
.zp-auth__terms .form-check__text a:hover { color: var(--zp-gold-light); text-decoration: underline; }

/* Кнопка приглушена, пока не отмечено согласие. Клик не блокируем:
   нативная проверка required сама подскажет, что нужно отметить. */
.zp-auth .btn.is-locked {
  opacity: 0.45;
  box-shadow: none;
}

.zp-auth .btn.is-locked:hover { transform: none; box-shadow: none; }


/* ============================================================================
   9. Доп. блоки, переключатель страниц, подвал
   ============================================================================ */

/* Подтверждение email и завершение Telegram-регистрации: вложенная панель */
.zp-auth__aux {
  margin-top: clamp(18px, 2.6vw, 26px);
  padding: clamp(16px, 2.2vw, 22px);
  border: 1px solid var(--zp-hairline);
  border-radius: var(--zp-r-tile);
  background: rgba(0, 0, 0, 0.25);
}

.zp-auth__aux--tg { border-color: rgba(255, 184, 0, 0.3); }

.zp-auth__aux > .zp-auth__form:first-of-type { margin-top: 14px; }

.zp-auth__auxtitle {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--zp-ink-2);
}

.zp-auth__auxlink {
  margin: 8px 0 0;
  font-size: 13px;
}

/* Страницы без табов (verify / forgot / reset): ссылка назад ко входу */
.zp-auth__switch {
  margin: clamp(18px, 2.4vw, 24px) 0 0;
  font-size: 13.5px;
  text-align: center;
  color: var(--zp-ink-2);
}

.zp-auth__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  margin-top: clamp(18px, 2.4vw, 24px);
  padding-top: 18px;
  border-top: 1px solid rgba(246, 240, 228, 0.08);
  font-size: 12.5px;
}

/* Ссылки — обычный текст в строке, как в макете: без своей высоты и padding */
.zp-auth__legal a {
  color: var(--zp-ink-3);
  text-decoration: none;
}

.zp-auth__legal a:hover { color: var(--zp-ink); text-decoration: underline; }


/* ============================================================================
   10. Адаптив
   Медиазапросов в макете нет: колонки переносятся сами (flex-wrap) и всё
   тянется на clamp(). Здесь только поджимаем герой на узких экранах, чтобы
   форма оставалась в пределах первого экрана.
   ============================================================================ */

/* Бренд-панель остаётся видимой и просто переезжает над карточкой
   (в shell.css она скрыта — это правило каркаса кабинета) */
@media (max-width: 900px) {
  .auth-body .auth-aside { display: flex; }
}

@media (max-width: 640px) {
  .auth-body .auth-aside { min-height: 0; }
  .auth-aside__hero { padding: 16px 0; }
  .auth-body .auth-aside__orbit { width: min(52%, 180px); }

  .zp-auth { padding: 24px 18px; }
  .zp-auth__code { font-size: 16px; letter-spacing: 0.2em; }
  .zp-auth__legal { gap: 6px 14px; }
}

@media (max-width: 380px) {
  .zp-auth { padding: 20px 14px; }
  .zp-auth__tabs .tab-item { padding: 11px 8px; font-size: 13.5px; }
  .zp-auth__eyebrow { letter-spacing: 0.14em; }
  .zp-auth__labelrow { flex-wrap: wrap; gap: 2px 12px; }
  .zp-auth .btn.btn-telegram { font-size: 14.5px; }
}