/*! Navex · «Туман» — вход, регистрация, код, восстановление, мастер нового проекта (этап 108).
   Прототип: docs/design-lab/v2-mist/css/auth.css и css/wizard.css (alt-auth-layout=a, alt-otp=a, alt-wizard=a, alt-gate=a).
   Подключается только в layouts/guest.blade.php, после tokens.css, app.css и mist.css. Цвета и размеры — из токенов. */

/* ---------- каркас гостевой страницы ---------- */
.mz-auth-body { margin: 0; }
.mz-auth { position: relative; min-height: 100dvh; display: flex; flex-direction: column; max-width: 1440px; margin: 0 auto; padding: 16px 32px 24px; isolation: isolate; }
.mz-auth__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; }
.mz-auth__brandline { display: grid; gap: 4px; min-width: 0; }
.mz-auth__logo { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); text-decoration: none; border-radius: var(--rounded-pill); padding-right: 8px; }
.mz-auth__logo .brand-logo { --logo-h: 32px; }
.mz-auth__slogan { margin: 0; font: 400 14px/1.35 var(--font-text); color: var(--ink-soft); }
.mz-auth__acts { display: flex; align-items: center; gap: 8px; }
.mz-auth__acts form { margin: 0; }
.mz-auth__grid { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; padding-top: 16px; min-height: 0; }
.mz-auth__main { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; min-width: 0; padding: 24px 0; }
.mz-auth__main:focus { outline: none; }
.mz-auth__legal { margin: 0; font: 400 13px/1.4 var(--font-text); color: var(--ink-soft); text-align: center; }
.mz-auth__legal .mz-link { color: var(--ink-soft); }

/* ---------- карточка формы ---------- */
.mz-auth__card {
  position: relative; width: 440px; max-width: 100%;
  padding: 32px; border-radius: var(--rounded-lg);
  background: var(--surface-raised); box-shadow: var(--hl-top), var(--shadow-2), 0 0 0 1px var(--line);
}
.mz-auth__card > .notice { margin-bottom: 16px; }
.mz-auth__card .btn { white-space: normal; text-align: center; line-height: 1.3; }
.is-wide-guest-card .mz-auth__card { width: 640px; }
.mz-screen { display: grid; gap: 24px; }
.mz-screen[data-in] { animation: mz-screen-in var(--normal) var(--ease) both; }
@keyframes mz-screen-in { from { opacity: 0; translate: 0 var(--enter-y, 8px); } }
.mz-auth__head { display: grid; gap: 8px; }
.mz-auth__headrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.mz-auth__title { font: 300 32px/1.12 var(--font-display); letter-spacing: -0.03em; color: var(--ink); }
.mz-auth__sub { margin: 0; font: 400 15px/1.5 var(--font-text); color: var(--ink-soft); }
.mz-auth__sub b, .mz-auth__sub strong { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.mz-auth__form { display: grid; gap: 16px; }
.mz-auth__form .mz-input, .mz-auth__form .mz-select { height: var(--control-h-lg); }
.mz-auth__actions { display: grid; gap: 12px; }
.mz-auth__actions .btn, .mz-auth__form .btn-block { width: 100%; }
.mz-auth__alt { margin: 0; text-align: center; font: 400 14px/1.45 var(--font-text); color: var(--ink-soft); }
.mz-auth__alt .link, .mz-auth__alt .mz-link { font-weight: 500; }
.mz-auth__note { margin: 0; font: 400 13px/1.45 var(--font-text); color: var(--ink-soft); }
.mz-auth__center { justify-items: center; text-align: center; }
.mz-auth__center .mz-auth__head { justify-items: center; }
.mz-auth__back { justify-self: start; margin-left: -10px; }
.mz-field__row .mz-link, .mz-field__row .link { font: 500 13px/1.3 var(--font-text); }
.mz-field__error { margin: 0; }
.mz-field__hint .link { font-weight: 500; }
.mz-caps { display: inline-flex; align-items: center; gap: 6px; font: 500 13px/1.4 var(--font-text); color: var(--warning); }
.mz-caps[hidden] { display: none; }
.mz-caps .nx-icon { --nx-size: 16px; }
.mz-auth__consent { margin: 0; font: 400 13px/1.5 var(--font-text); color: var(--ink-soft); text-align: center; }
.mz-auth__consent .link { font-weight: 500; white-space: nowrap; } /* доработка по QA: ссылка оферты не рвётся на две строки */
.mz-auth__check-note { font-weight: 400; color: var(--ink-soft); }

/* сотрудник проекта по ссылке ?login= */
.mz-auth__who { display: flex; align-items: center; gap: 12px; padding: 8px 16px; border-radius: var(--rounded-pill); background: var(--surface); font: 500 14px/1.3 var(--font-text); }
.mz-auth__who .nx-icon { --nx-size: 20px; color: var(--ink-soft); }

/* иконка экрана «закрыто» — 3D песочные часы */
.mz-auth__glyph { width: 88px; height: 88px; display: grid; place-items: center; border-radius: 50%; background: var(--surface); box-shadow: inset 0 1px 2px rgb(22 22 22 / .06); }
.mz-auth__glyph img { width: 64px; height: 64px; display: block; }

/* код подтверждения: 6 ячеек поверх одного поля (id verify-code, v-model code) */
.mz-otp-wrap { display: grid; justify-items: center; gap: 12px; }
.mz-otp-wrap .nx-otp { --nx-otp-w: 48px; --nx-otp-h: 56px; --nx-otp-gap: 8px; }
.mz-otp-msg { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; border-radius: var(--rounded-md); font: 500 14px/1.4 var(--font-text); }
.mz-otp-msg .nx-icon { --nx-size: 18px; margin-top: 1px; flex: none; }
.mz-otp-msg--danger { background: var(--danger-soft); color: var(--danger); }
.mz-otp-msg--warn { background: var(--warning-soft); color: var(--warning); }
.mz-otp-msg span { color: var(--ink); font-weight: 400; }
.mz-resend { justify-self: center; font-variant-numeric: tabular-nums; }
.mz-change { display: grid; gap: 12px; padding: 16px; border-radius: var(--rounded-md); background: var(--surface); }
.mz-change__row { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.mz-link-btn { display: inline; padding: 0; border: 0; background: none; font: inherit; font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-color: rgb(22 22 22 / .3); text-underline-offset: 3px; text-decoration-thickness: 1px; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .mz-link-btn:hover { text-decoration-color: currentColor; } }

/* результат «письмо отправлено» */
.mz-done { display: grid; justify-items: center; gap: 8px; text-align: center; padding: 24px 16px; border-radius: var(--rounded-md); background: var(--surface); }
.mz-done__ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--success-soft); color: var(--success); margin-bottom: 4px; }
.mz-done__ico .nx-icon { --nx-size: 24px; }
.mz-done__title { margin: 0; font: 500 17px/1.3 var(--font-display); }
.mz-done__text { margin: 0; font: 400 14px/1.5 var(--font-text); color: var(--ink-soft); max-width: 34ch; }
.mz-done__text strong { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }

/* поле пароля с «глазом»: partials/password-field (.password-field + .password-field__toggle) в стиле .mz-input-wrap */
.password-field.mz-input-wrap { position: relative; }
.password-field .password-field__toggle { top: auto; border-radius: 50%; color: var(--ink-soft); }
.password-field .password-field__toggle .nx-icon { width: 20px; height: 20px; }
.password-field .mz-input { width: 100%; }

/* ---------- ПРОМО: гель-герой (один на экран) ---------- */
.mz-auth__promo.mz-gel { justify-content: space-between; align-items: stretch; gap: 32px; padding: 40px; min-height: 640px; }
.mz-auth__promo-text { display: grid; gap: 16px; max-width: 520px; align-content: start; }
.mz-auth__h { margin: 0; font: 300 52px/1.04 var(--font-display); letter-spacing: -0.035em; color: var(--on-gel, #161616); text-wrap: balance; }
.mz-auth__lead { margin: 0; font: 400 17px/1.5 var(--font-text); color: var(--on-gel, #161616); opacity: .82; max-width: 42ch; }
.mz-auth__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.mz-auth__chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 8px; border-radius: var(--rounded-pill); background: rgb(255 255 255 / .62); color: #161616; font: 500 13px/1 var(--font-text); box-shadow: inset 0 1px 0 rgb(255 255 255 / .8); }
.mz-auth__chip .nx-icon { --nx-size: 20px; }

/* иллюстрация: клиент → AI → запись (без имён и цифр) */
.mz-flow { position: relative; display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: end; min-height: 300px; }
.mz-flow__3d { width: 240px; align-self: end; margin-right: -40px; margin-bottom: -12px; }
.mz-flow__3d img { filter: brightness(1.12) saturate(.9); }
.mz-flow__stack { position: relative; z-index: 1; display: grid; gap: 8px; max-width: 420px; }
.mz-flow__item { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 22px; background: rgb(255 255 255 / .9); color: #161616; box-shadow: 0 1px 0 rgb(255 255 255 / .9) inset, 0 10px 24px -14px rgb(22 22 22 / .35); min-width: 0; }
.mz-flow__item:nth-child(1) { margin-right: 40px; border-bottom-left-radius: 8px; }
.mz-flow__item:nth-child(2) { margin-left: 40px; border-bottom-right-radius: 8px; background: #F7DDE8; }
.mz-flow__item:nth-child(3) { padding: 12px 14px 12px 12px; background: #fff; box-shadow: 0 0 0 1.5px #161616, 0 18px 36px -16px rgb(22 22 22 / .4); }
.mz-flow__body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.mz-flow__name { font: 600 13px/1.3 var(--font-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-flow__text { font: 400 13px/1.4 var(--font-text); color: #3E4143; }
.mz-flow__ai { color: #A8325F; }
.mz-gelchip--sm { width: 36px; height: 36px; border-radius: 50%; }

/* шаги «Как получить доступ» (регистрация закрыта) */
.mz-steps { display: grid; gap: 8px; max-width: 440px; margin: 0; padding: 0; list-style: none; }
.mz-steps li { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px 10px 10px; border-radius: var(--rounded-pill); background: rgb(255 255 255 / .9); color: #161616; box-shadow: 0 10px 24px -16px rgb(22 22 22 / .35); }
.mz-steps__n { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: #161616; color: #fff; font: 500 15px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.mz-steps__t { display: grid; gap: 2px; min-width: 0; }
.mz-steps__t b { font: 600 14px/1.3 var(--font-text); }
.mz-steps__t span { font: 400 13px/1.4 var(--font-text); color: #3E4143; }

/* две выгоды (регистрация открыта) */
.mz-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; max-width: 560px; }
.mz-benefit { display: grid; gap: 10px; align-content: start; padding: 18px; border-radius: var(--rounded-md); background: rgb(255 255 255 / .9); color: #161616; }
.mz-benefit .mz-gelchip { background: #fff; box-shadow: inset 0 0 0 1px rgb(22 22 22 / .08); }
.mz-benefit b { font: 600 15px/1.3 var(--font-text); }
.mz-benefit span:not(.mz-gelchip) { font: 400 13px/1.45 var(--font-text); color: #3E4143; }

/* выгоды регистрации внутри карточки — только на телефоне (промо там скрыто); класс register-perks держит тест */
.register-perks { display: none; margin: 0; padding: 12px 14px; border-radius: var(--rounded-md); background: var(--primary-faint, var(--surface)); color: var(--ink); font: 500 13px/1.45 var(--font-text); }

/* ---------- старые классы страниц этапа 116 (внутри карточки «Тумана») ---------- */
.mz-auth__card .guest-card__title { margin: 0 0 8px; font: 300 32px/1.12 var(--font-display); letter-spacing: -0.03em; color: var(--ink); }
.mz-auth__card .guest-card__subtitle { margin: 0 0 24px; font: 400 15px/1.5 var(--font-text); color: var(--ink-soft); }
.mz-auth__card .guest-card__footer { margin-top: 24px; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 16px; text-align: center; font: 400 14px/1.45 var(--font-text); color: var(--ink-soft); }
.mz-auth__card .guest-card__footer.flex-col { flex-direction: column; align-items: center; }
.mz-auth__card .guest-card__footer .link { font-weight: 500; }
.mz-auth__card .guest-card__step { margin: 0 0 12px; display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: var(--rounded-pill); background: var(--surface); color: var(--ink-soft); font: 500 12px/1 var(--font-text); text-transform: none; letter-spacing: 0; }
.mz-auth__card .guest-card__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px; border-radius: 50%; background: var(--success-soft); color: var(--success); }
.mz-auth__card .guest-card__icon .nx-icon { width: 24px; height: 24px; }
.mz-auth__card .guest-card__error-icon { margin: 0 auto 16px; }
.mz-auth__card .link-button { font-weight: 500; }

/* ---------- планшет ---------- */
@media (max-width: 1100px) {
  .mz-auth__h { font-size: 44px; }
  .mz-flow { grid-template-columns: 1fr; }
  .mz-flow__3d { display: none; }
}

/* ---------- телефон ---------- */
@media (max-width: 767.98px) {
  .mz-auth { padding: calc(8px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom)); }
  .mz-auth__top { flex-wrap: wrap; row-gap: 4px; padding-top: 4px; }
  .mz-auth__brandline { display: contents; }
  .mz-auth__slogan { order: 3; flex: 1 0 100%; font: 300 22px/1.2 var(--font-display); letter-spacing: -0.02em; color: var(--ink); }
  .mz-auth__logo { min-height: 44px; }
  .mz-auth__acts .btn { min-height: 44px; }
  /* ссылки в строке текста: зона нажатия 44 px без раздувания строки (как в app.css для .verify-hint) */
  .mz-auth__alt .link, .mz-auth__alt .mz-link, .mz-auth__legal .mz-link, .mz-auth__consent .link, .mz-auth__sub .link, .mz-field__hint .link, .mz-auth__note .link, .mz-link-btn, .mz-auth__card .guest-card__footer .link { display: inline-block; padding: 14px 4px; margin: -14px -4px; }
  .mz-field__row .link, .mz-field__row .mz-link { display: inline-flex; align-items: center; min-height: 44px; }
  .mz-auth__grid { grid-template-columns: minmax(0, 1fr); padding-top: 8px; gap: 16px; }
  .mz-auth__promo { display: none !important; }
  .mz-auth__main { justify-content: flex-start; padding: 8px 0 0; }
  .mz-auth__card, .is-wide-guest-card .mz-auth__card { width: 100%; padding: 24px 16px; border-radius: var(--rounded-md); }
  .mz-auth__title, .mz-auth__card .guest-card__title { font-size: 28px; }
  .mz-screen { gap: 20px; }
  .mz-auth__form .mz-input, .mz-auth__form .mz-select { height: 52px; }
  .mz-auth__actions .btn { height: 52px; }
  .register-perks { display: block; }
  .mz-benefits { grid-template-columns: 1fr; }
  .mz-otp-wrap .nx-otp { --nx-otp-w: 44px; --nx-otp-gap: 6px; }
}
@media (min-width: 768px) { .mz-auth__slogan { display: none; } }
@media (max-width: 360px) { .mz-otp-wrap .nx-otp { --nx-otp-w: 40px; --nx-otp-gap: 4px; } }

/* сила пароля (новый пароль) */
.mz-strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.mz-strength > i { height: 4px; border-radius: 2px; background: var(--surface-sunken); }
.mz-strength[data-level="1"] > i:nth-child(-n+1) { background: var(--danger); }
.mz-strength[data-level="2"] > i:nth-child(-n+2) { background: var(--warning); }
.mz-strength[data-level="3"] > i:nth-child(-n+3) { background: var(--success); }
.mz-strength[data-level="4"] > i { background: var(--success); }
.segmented--lg button { min-height: 44px; }

/* «Перейти к форме»: видна только при фокусе с клавиатуры */
.mz-auth-body .skip-link { position: absolute; left: 16px; top: -64px; z-index: var(--z-toast, 100); padding: 12px 16px; border-radius: var(--rounded-pill); background: var(--ink); color: var(--ink-inverse, #fff); font: 500 14px/1 var(--font-text); text-decoration: none; transition: top var(--fast) var(--ease); }
.mz-auth-body .skip-link:focus-visible { top: 12px; }

/* =====================================================================
   МАСТЕР НОВОГО ПРОЕКТА (wizard.html, alt-wizard=a «рельса + карточка», alt-gate=a)
   ===================================================================== */
.mz-auth { --nx-bottom-ui: 0px; }
.mz-auth--wizard { max-width: 1360px; padding-bottom: 48px; }
.mz-auth--wizard .mz-auth__grid { grid-template-columns: 320px minmax(0, 640px); justify-content: center; align-items: start; align-content: start; padding-top: 24px; }
.mz-auth--wizard .mz-auth__main { align-items: stretch; justify-content: flex-start; padding: 0; }
.mz-auth--wizard .mz-auth__card, .mz-auth--wizard.mz-auth .is-wide-guest-card .mz-auth__card { width: 100%; }
.mz-wz__me { display: inline-flex; align-items: center; gap: 10px; padding: 4px 14px 4px 4px; border-radius: var(--rounded-pill); background: var(--surface); font: 500 14px/1 var(--font-text); max-width: 240px; }
.mz-wz__me-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* рельса: степпер + живое превью */
.mz-wz__rail { position: sticky; top: 24px; display: grid; gap: 16px; }
.mz-wz__rail > div { display: grid; gap: 16px; }
.mz-wz__steps { display: grid; gap: 6px; margin: 0; padding: 8px; list-style: none; border-radius: var(--rounded-lg); background: var(--surface-subtle); box-shadow: var(--hl-top); }
.mz-wz__step { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px 8px 8px; border-radius: var(--rounded-pill); color: var(--ink-soft); }
.mz-wz__step[aria-current="step"] { background: var(--surface-raised); color: var(--ink); box-shadow: var(--hl-top), var(--shadow-1); }
.mz-wz__num { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--surface-sunken); color: var(--ink-soft); font: 500 15px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.mz-wz__num .nx-icon { --nx-size: 20px; }
.mz-wz__step[aria-current="step"] .mz-wz__num { background: var(--primary); color: var(--on-primary); box-shadow: inset 0 0 0 1px rgb(22 22 22 / .1); }
.mz-wz__step[data-done] .mz-wz__num { background: var(--ink); color: var(--ink-inverse, #fff); }
.mz-wz__steptext { display: grid; gap: 2px; min-width: 0; }
.mz-wz__steptext small { font: 500 12px/1.2 var(--font-text); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.mz-wz__steptext b { font: 500 15px/1.25 var(--font-text); color: inherit; }
.mz-wz__step[aria-current="step"] .mz-wz__steptext small { color: var(--ink-soft); }

/* превью проекта — гель-герой экрана */
.mz-pv { align-items: stretch !important; justify-content: flex-start !important; gap: 20px !important; padding: 24px !important; min-height: 300px; }
.mz-pv__label { font: 500 13px/1.3 var(--font-text); color: #161616; opacity: .8; }
.mz-pv__card { display: grid; gap: 16px; padding: 20px; border-radius: var(--rounded-lg); background: rgb(255 255 255 / .9); color: #161616; box-shadow: 0 16px 32px -18px rgb(22 22 22 / .4); }
.mz-pv__row { display: flex; align-items: center; gap: 14px; min-width: 0; }
.mz-pv__ava { width: 56px; height: 56px; flex: none; border-radius: 32%; display: grid; place-items: center; background: var(--gel-green-2, #D7DFBA); color: #161616; font: 400 24px/1 var(--font-display); }
.mz-wz__strip-t { display: grid; gap: 2px; min-width: 0; flex: 1; }
.mz-pv__name { font: 300 22px/1.15 var(--font-display); letter-spacing: -0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mz-pv__name.is-empty { color: #6A6D6F; }
.mz-pv__meta { font: 400 13px/1.4 var(--font-text); color: #5C5F61; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mz-pv__lines { display: grid; gap: 8px; margin: 0; padding: 12px 0 0; list-style: none; border-top: 1px solid rgb(22 22 22 / .08); }
.mz-pv__lines li { display: flex; align-items: center; gap: 10px; font: 400 13px/1.35 var(--font-text); color: #3E4143; }
.mz-pv__lines .nx-icon { --nx-size: 18px; flex: none; }
.mz-pv__lines .is-ok { color: #1C7339; }
.mz-pv__lines .is-wait { color: #7F5300; }
.mz-pv__plan { display: grid; gap: 8px; color: #161616; font: 500 13px/1.35 var(--font-text); }
.mz-pv__plan .mz-meter { background: rgb(255 255 255 / .6); }

/* карточка шага */
.mz-auth--wizard .mz-auth__card { padding: 32px; }
.mz-wz__sec { display: grid; gap: 24px; min-width: 0; }
.mz-wz__head { display: grid; gap: 8px; }
.mz-wz__title { margin: 0; font: 300 32px/1.12 var(--font-display); letter-spacing: -0.03em; color: var(--ink); }
.mz-wz__lead { margin: 0; font: 400 15px/1.5 var(--font-text); color: var(--ink-soft); max-width: 56ch; }
.mz-wz__step-label { margin: 0; justify-self: start; display: inline-flex; align-items: center; min-height: 28px; padding: 4px 12px; border-radius: 14px; background: var(--surface); color: var(--ink-soft); font: 500 12px/1.35 var(--font-text); }
.mz-wz__form { display: grid; gap: 24px; }
.mz-wz__form .mz-input, .mz-wz__form .mz-select { height: var(--control-h-lg); }
.mz-wz__group { display: grid; gap: 12px; border: 0; margin: 0; padding: 0; min-width: 0; }
.mz-wz__group > legend { padding: 0; margin-bottom: 12px; font: 500 15px/1.3 var(--font-text); }
.mz-wz__radios { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mz-wz__more { justify-self: start; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px; border: 0; border-radius: var(--rounded-pill); background: var(--surface); color: var(--ink); font: 500 14px/1 var(--font-text); cursor: pointer; }
.mz-wz__more .nx-icon { --nx-size: 18px; }
@media (hover: hover) and (pointer: fine) { .mz-wz__more:hover { background: var(--surface-subtle); } }
.mz-wz__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mz-copy { display: grid; gap: 12px; padding: 16px; border-radius: var(--rounded-md); background: var(--surface); }
.mz-copy__checks { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.mz-copy__note { margin: 0; display: flex; gap: 8px; align-items: flex-start; font: 400 13px/1.4 var(--font-text); color: var(--ink-soft); }
.mz-copy__note .nx-icon { --nx-size: 16px; margin-top: 2px; flex: none; }
.mz-planline-wz { display: grid; gap: 8px; font: 400 14px/1.4 var(--font-text); color: var(--ink-soft); }
.mz-planline-wz b { color: var(--ink); font-weight: 500; }
.mz-wz__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 8px; }
@media (min-width: 768px) { .mz-wz__foot > .mz-sticky-action:only-child { margin-left: auto; } }
.mz-wz__projects-phone { display: none; }
.mz-wz__note { margin: 0; font: 400 13px/1.5 var(--font-text); color: var(--ink-soft); }

/* этап 124 — шаг «Сфера бизнеса»: плитки 3×3 и предпросмотр готовой воронки (ux-navex/css/wizard-ux.css, .uxw-*) */
.mz-auth--wizard .mz-auth__grid:has(.mz-wz__flow[data-wz-step="2"]) { grid-template-columns: 300px minmax(0, 900px); }
.mz-sphere { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; }
.mz-sphere__pick { display: grid; gap: 12px; min-width: 0; }
.mz-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mz-tile { position: relative; display: grid; justify-items: start; align-content: space-between; gap: 12px; min-height: 112px; padding: 16px; border-radius: var(--rounded-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: background-color var(--fast) var(--ease), box-shadow var(--fast) var(--ease); }
.mz-tile input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.mz-tile__ico { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: var(--surface-raised); box-shadow: var(--shadow-1); color: var(--ink); }
.mz-tile__ico .nx-icon { --nx-size: 26px; }
.mz-tile__name { font: 500 15px/1.25 var(--font-text); color: var(--ink); }
.mz-tile:has(input:checked) { background: var(--surface-raised); box-shadow: inset 0 0 0 2px var(--ink), var(--shadow-2); }
.mz-tile:has(input:checked) .mz-tile__ico { background: var(--primary); color: var(--on-primary); }
.mz-tile:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .mz-tile:not(:has(input:checked)):hover { background: var(--surface-raised); } }
.mz-tiles[aria-invalid="true"] .mz-tile { box-shadow: inset 0 0 0 1px var(--danger); }
.mz-funnel { position: sticky; top: 16px; display: grid; gap: 12px; padding: 16px; border-radius: var(--rounded-md); background: var(--surface-subtle); min-width: 0; }
.mz-funnel__body { display: grid; gap: 12px; }
.mz-funnel__note { margin: 0; display: flex; gap: 10px; align-items: flex-start; font: 500 14px/1.4 var(--font-text); color: var(--ink); }
.mz-funnel__note .nx-icon { --nx-size: 18px; flex: none; margin-top: 1px; }
.mz-funnel__foot { margin: 0; font: 400 13px/1.45 var(--font-text); color: var(--ink-soft); }
.mz-stages { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.mz-stages li { position: relative; display: flex; gap: 12px; padding: 0 0 14px; }
.mz-stages li:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 2px; width: 2px; background: var(--line); }
.mz-stages__n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 600 12px/1 var(--font-text); color: #fff; background: var(--c, var(--ink-soft)); }
.mz-stages li > span:last-child { display: grid; gap: 2px; padding-top: 4px; min-width: 0; }
.mz-stages b { font: 600 14px/1.25 var(--font-text); }
.mz-stages small { font: 400 12px/1.35 var(--font-text); color: var(--ink-soft); }
.mz-wz__foot .btn-ghost + .btn-secondary { margin-left: auto; }
.mz-ok__row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; align-items: center; }
.mz-pv__ico { display: grid; place-items: center; }
.mz-pv__ico .nx-icon { --nx-size: 26px; }
.mz-wz__strip .mz-pv__ico .nx-icon { --nx-size: 24px; }
.mz-wz__close .nx-icon { --nx-size: 18px; }
@media (max-width: 1023.98px) {
  .mz-auth--wizard .mz-auth__grid:has(.mz-wz__flow[data-wz-step="2"]) { grid-template-columns: 280px minmax(0, 1fr); }
  .mz-sphere { grid-template-columns: minmax(0, 1fr); }
  .mz-funnel { position: static; }
}
@media (max-width: 767.98px) {
  .mz-auth--wizard .mz-auth__grid:has(.mz-wz__flow[data-wz-step="2"]) { grid-template-columns: minmax(0, 1fr); }
  .mz-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mz-tile { min-height: 96px; padding: 12px; }
  .mz-wz__close { min-width: 44px; min-height: 44px; justify-content: center; padding: 0; }
  .mz-wz__close-t { display: none; }
  .mz-ok__row { flex-direction: column-reverse; align-items: stretch; width: 100%; }
}

/* шаг 2: ворота группы Telegram */
.mz-gate__steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.mz-gate__steps li { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px 8px 8px; border-radius: var(--rounded-pill); background: var(--surface); font: 400 14px/1.35 var(--font-text); }
.mz-gate__n { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-raised); font: 500 14px/1 var(--font-display); box-shadow: var(--shadow-1); }
.mz-gate__main { display: grid; gap: 12px; min-width: 0; }
.mz-gate__main > .btn { width: 100%; height: 52px; font-size: 15px; }
.mz-wait { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px; border-radius: var(--rounded-pill); background: var(--surface); font: 500 14px/1.3 var(--font-text); color: var(--ink); }
.mz-gate__links { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.mz-gate__toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--ink); font: 500 14px/1 var(--font-text); cursor: pointer; border-radius: 10px; }
.mz-gate__toggle .nx-icon { --nx-size: 18px; transition: rotate var(--normal) var(--ease); }
.mz-gate__toggle[aria-expanded="true"] .nx-icon { rotate: 180deg; }
.mz-gate__notg { min-height: 44px; font: 400 13px/1.3 var(--font-text); color: var(--ink-soft); }
.mz-manual { display: grid; gap: 12px; padding: 16px; border-radius: var(--rounded-md); background: var(--surface); }
.mz-manual p { margin: 0; font: 400 14px/1.5 var(--font-text); }
.mz-cmd { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 6px 6px 6px 18px; border-radius: var(--rounded-pill); background: var(--surface-raised); box-shadow: inset 0 0 0 1px var(--line); }
.mz-cmd code { white-space: nowrap; font: 500 17px/1 ui-monospace, 'SF Mono', Menlo, monospace; letter-spacing: .02em; overflow: hidden; text-overflow: ellipsis; }
.mz-skip { display: grid; gap: 12px; padding: 20px; border-radius: var(--rounded-md); background: linear-gradient(180deg, var(--danger-soft), var(--surface-raised) 85%); box-shadow: inset 0 0 0 1px rgb(179 43 43 / .18); }
.mz-skip p { margin: 0; }
.mz-skip__title { font: 400 22px/1.2 var(--font-display); letter-spacing: -0.02em; }
.mz-skip p:not(.mz-skip__title) { font: 400 14px/1.5 var(--font-text); color: var(--ink-soft); }
.mz-skip__row { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
.mz-skip__row form { margin: 0; }

/* успех */
.mz-ok { display: grid; justify-items: center; text-align: center; gap: 16px; padding: 8px 0; }
.mz-ok__check { width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #161616; box-shadow: inset 0 0 0 1px rgb(22 22 22 / .1), 0 14px 32px -12px rgb(120 140 0 / .55); }
.mz-ok__check svg { width: 44px; height: 44px; }
.mz-ok[data-in] .mz-ok__check path { stroke-dasharray: 1; animation: mz-draw 400ms var(--ease) 120ms both; }
@keyframes mz-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.mz-ok .mz-wz__lead { max-width: 46ch; }
.mz-ok__pill { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 16px 0 10px; border-radius: 999px; background: var(--success-soft); color: var(--success); font: 600 14px/1.2 var(--font-text); }
.mz-ok__pill .nx-icon { --nx-size: 18px; }

/* лимит тарифа */
.mz-limit { display: grid; justify-items: center; text-align: center; gap: 16px; padding: 8px 0; }
.mz-limit img { width: 112px; height: 112px; }
.mz-limit__row { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

.mz-auth--wizard .notice { border-radius: var(--rounded-md); }
.mz-auth--wizard .mz-auth__card .guest-card__title { font-size: 32px; }

@media (max-width: 1023.98px) {
  .mz-auth--wizard .mz-auth__grid { grid-template-columns: 280px minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
  .mz-auth--wizard { padding: calc(4px + env(safe-area-inset-top)) 16px 0; }
  .mz-auth--wizard .mz-auth__top { min-height: 52px; }
  .mz-auth--wizard .mz-wz__me, .mz-auth--wizard .mz-wz__projects-desk { display: none; }
  .mz-auth--wizard .mz-wz__projects-phone { display: inline-flex; margin-right: auto; }
  .mz-auth--wizard:has(.mz-wz__projects-phone) .mz-auth__brandline { display: none; }
  .mz-auth--wizard .mz-auth__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-top: 4px; align-content: start; }
  .mz-wz__rail { position: static; }
  .mz-wz__rail .mz-gel, .mz-wz__rail .mz-wz__steps { display: none; }
  .mz-auth--wizard .mz-auth__card { padding: 20px 16px; border-radius: var(--rounded-md); }
  .mz-wz__title, .mz-auth--wizard .mz-auth__card .guest-card__title { font-size: 28px; }
  .mz-wz__radios, .mz-wz__pair, .mz-copy__checks { grid-template-columns: 1fr; }
  /* этап 124 (ux-navex/css/wizard-ux.css): «← Назад» и «Отмена» видны на каждом шаге, главная кнопка — первой строкой на всю ширину */
  .mz-wz__foot { flex-wrap: wrap; gap: 8px; padding-top: 0; }
  .mz-wz__foot > .btn-ghost { display: inline-flex; min-height: 44px; }
  .mz-wz__foot > .mz-sticky-action { flex: 1 1 100%; order: -1; margin: 0 -16px; }
  .mz-wz__foot > .btn-secondary { margin-left: auto; min-height: 44px; }
  .mz-gate__steps li { border-radius: var(--rounded-md); }
  .mz-cmd { flex-wrap: wrap; padding: 12px; border-radius: var(--rounded-md); }
  .mz-cmd code { padding: 4px 6px; }
  .mz-cmd .btn { width: 100%; height: 44px; }
  .mz-skip__row { flex-direction: column-reverse; }
  .mz-skip__row .btn, .mz-skip__row form, .mz-limit__row .btn { width: 100%; }
  .mz-ok .btn-primary { width: 100%; height: 52px; }
}

/* телефон: степпер-точки и полоса превью 64 px (на ПК скрыты) */
.mz-wz__hsteps, .mz-wz__strip { display: none; }
.mz-wz__hsteps { align-items: center; justify-content: space-between; gap: 12px; padding: 0 4px; }
.mz-wz__hsteps-t { font: 500 14px/1.3 var(--font-text); }
.mz-wz__hsteps-t span span { color: var(--ink-soft); font-weight: 400; }
.mz-wz__hsteps-t .mz-wz__hsteps-n { color: inherit; font-weight: inherit; } /* этап 124: номер шага — не подпись */
.mz-wz__dots { display: flex; gap: 6px; }
.mz-wz__dots i { width: 8px; height: 8px; border-radius: 4px; background: rgb(22 22 22 / .2); }
.mz-wz__dots i.is-on { width: 24px; background: var(--ink); }
.mz-wz__dots i.is-done { background: var(--ink); }
.mz-wz__strip { align-items: center; gap: 12px; min-height: 64px; padding: 8px 16px 8px 8px; border-radius: var(--rounded-pill); background: var(--surface-raised); box-shadow: var(--hl-top), var(--shadow-1); min-width: 0; }
.mz-wz__strip .mz-pv__ava { width: 48px; height: 48px; font-size: 20px; }
.mz-wz__strip .mz-pv__name { font: 500 16px/1.25 var(--font-text); letter-spacing: 0; }
@media (max-width: 767.98px) {
  .mz-wz__hsteps, .mz-wz__strip { display: flex; }
}

/* выход из мастера: «Мои проекты» и «Отменить создание проекта» */
.mz-wz__exit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.mz-wz__exit form { margin: 0; }
.mz-wz__cancel { color: var(--danger); }
.mz-wz__radios--col { grid-template-columns: 1fr; }
.mz-radio-card .badge { margin-left: 6px; vertical-align: 1px; }
@media (max-width: 767.98px) {
  .mz-wz__exit .btn { min-height: 44px; }
  .mz-wz__exit .btn:first-child { margin-left: -8px; }
}
.mz-auth__card .btn-block { min-height: var(--control-h-lg); }
/* этап 116-B2: «глаз» в поле пароля — цель нажатия 44 px (был 40) */
.password-field .password-field__toggle.mz-input-wrap__btn { width: 44px; height: 44px; right: 0; }

/* ===== Этап 126 — регистрация и вход по WhatsApp (макет docs/design-lab/ux-navex/auth.html) ===== */
.ua-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ua-note { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--rounded-md); font: 400 14px/1.45 var(--font-text); }
.ua-note > .nx-icon { --nx-size: 20px; flex: none; margin-top: 1px; }
.ua-note b { display: block; margin-bottom: 2px; font-weight: 600; }
.ua-note--danger { background: rgb(179 43 43 / .08); color: #7E1D1D; } .ua-note--danger > .nx-icon { color: var(--danger); }
.ua-note--warn { background: #FCF1D2; color: #5C4100; } .ua-note--warn > .nx-icon { color: #9A6B00; }
.ua-note--info { background: var(--surface-subtle); color: var(--ink); }
.ua-note__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.ua-sent { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--rounded-md); background: #E7EFE3; font: 400 14px/1.45 var(--font-text); }
.ua-sent > .nx-icon { --nx-size: 22px; flex: none; }
.ua-inline-form { display: inline; }
.ua-inline-form .mz-link-btn { min-height: 0; }
.ua-tries { font: 500 13px/1.4 var(--font-text); color: var(--ink-soft); }
.ua-tries.is-low { color: var(--danger); }
.ua-steps { display: flex; gap: 6px; margin-bottom: 8px; }
.ua-steps i { flex: 1; height: 4px; border-radius: 2px; background: var(--surface-sunken, var(--surface-subtle)); }
.ua-steps i.on { background: var(--ink); }
.mz-auth .segmented--block button { min-height: 44px; }
@media (max-width: 767.98px) {
    .ua-note__acts .btn, .ua-inline-form .mz-link-btn { min-height: 44px; }
    .mz-auth__alt .link, .mz-field__hint .link { display: inline-flex; align-items: center; min-height: 44px; }
}
.ua-hp input { width: 1px; height: 1px; padding: 0; border: 0; }