/**
 * LIVZO — authentication.
 *
 * One combined Login + Join flow over Firebase Phone Authentication. Desktop gets a
 * centred card; below 768px the dialog becomes a true full-screen sheet (100vw ×
 * 100dvh, no outer corners) because that is what a phone authentication flow should
 * feel like. Nothing here knows anything about Firebase — the modal is driven entirely
 * by state classes set in assets/js/auth/auth-modal.js:
 *
 *   .lz-auth.is-open      → visible
 *   .lz-auth__step        → which of the four panels is showing (JS toggles hidden)
 *   .is-invalid           → field / code-box error state
 *   .is-busy              → submit or verify in flight
 *   .is-success           → the confirmation tick
 */

/* ==========================================================================
   1. Shell + scrim
   ========================================================================== */

.lz-auth {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.lz-auth__scrim {
    position: absolute;
    inset: 0;
    background-color: rgba(11, 27, 51, 0.38);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 0.3s var(--lz-ease);
}

.lz-auth.is-open .lz-auth__scrim { opacity: 1; }

/* Scoped so `hidden` keeps winning over the flex/grid displays below — the root
   `.lz-auth` itself included. It owns `display: flex`, which otherwise beats the UA
   `[hidden]` rule, leaving the fixed shell laid out over the whole viewport and
   swallowing every click while it looks closed. */
.lz-auth[hidden],
.lz-auth [hidden],
.lz-account[hidden],
.lz-account [hidden],
.lz-auth-trigger[hidden] { display: none !important; }

/* ==========================================================================
   2. Dialog
   ========================================================================== */

.lz-auth__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(478px, 100%);
    max-height: min(92dvh, 820px);
    border: 1px solid var(--lz-line);
    border-radius: 26px;
    background-color: var(--lz-surface);
    box-shadow: 0 4px 12px rgba(11, 27, 51, 0.06), 0 44px 90px -40px rgba(11, 27, 51, 0.5);
    overflow: hidden;
    opacity: 0;
    transform: translateY(14px) scale(0.985);
    transition: opacity 0.3s var(--lz-ease), transform 0.34s var(--lz-ease-out);
}

.lz-auth.is-open .lz-auth__dialog {
    opacity: 1;
    transform: none;
}

/* --- Bar ------------------------------------------------------------------ */

.lz-auth__bar {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 16px 16px 0;
}

.lz-auth__brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.lz-auth__brand-mark { display: grid; place-items: center; }

.lz-auth__brand-word {
    color: var(--lz-navy);
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.lz-auth__icon-btn {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--lz-line);
    border-radius: 12px;
    background-color: var(--lz-surface);
    color: var(--lz-navy);
    cursor: pointer;
    transition: border-color 0.22s var(--lz-ease),
        background-color 0.22s var(--lz-ease),
        color 0.22s var(--lz-ease);
}

.lz-auth__icon-btn:hover {
    border-color: rgba(109, 74, 255, 0.30);
    background-color: #FBFAFF;
    color: var(--lz-accent);
}

.lz-auth__icon-btn .lz-icon { width: 17px; height: 17px; }

.lz-auth__back-ico { transform: scaleX(-1); }

/* --- Body ----------------------------------------------------------------- */

.lz-auth__body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 22px clamp(20px, 5vw, 30px) clamp(22px, 5vw, 30px);
    overflow-y: auto;
}

/* --- Progress ------------------------------------------------------------- */

.lz-auth__progress {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: 22px;
}

.lz-auth__progress-step {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 0;
    min-width: 0;
    color: var(--lz-body);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.lz-auth__progress-dot {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background-color: var(--lz-line-2);
    transition: background-color 0.3s var(--lz-ease), box-shadow 0.3s var(--lz-ease);
}

.lz-auth__progress-step.is-current { color: var(--lz-accent); }

.lz-auth__progress-step.is-current .lz-auth__progress-dot {
    background-color: var(--lz-accent);
    box-shadow: 0 0 0 4px var(--lz-accent-soft);
}

/* --- Steps ---------------------------------------------------------------- */

.lz-auth__step { animation: lzAuthStep 0.34s var(--lz-ease-out) both; }

@keyframes lzAuthStep {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: none; }
}

.lz-auth__eyebrow {
    color: var(--lz-accent);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.lz-auth__title {
    margin-top: 9px;
    font-size: clamp(1.36rem, 1.24rem + 0.6vw, 1.6rem);
    letter-spacing: -0.032em;
    line-height: 1.2;
    text-wrap: balance;
}

.lz-auth__text {
    margin-top: 9px;
    color: var(--lz-body);
    font-size: 0.92rem;
    line-height: 1.6;
}

.lz-auth__sent-to {
    color: var(--lz-navy);
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* --- Phone field ---------------------------------------------------------- */

.lz-auth__field { margin-top: 22px; }

.lz-auth__label {
    display: block;
    color: var(--lz-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.lz-auth__phone {
    display: flex;
    align-items: center;
    margin-top: 9px;
    border: 1px solid var(--lz-line-2);
    border-radius: 16px;
    background-color: var(--lz-surface);
    transition: border-color 0.22s var(--lz-ease), box-shadow 0.22s var(--lz-ease);
}

.lz-auth__phone:focus-within {
    border-color: var(--lz-accent);
    box-shadow: 0 0 0 4px rgba(109, 74, 255, 0.14);
}

.lz-auth__phone.is-invalid,
.lz-auth__otp.is-invalid { border-color: var(--lz-red); }

.lz-auth__dial {
    display: flex;
    align-items: center;
    align-self: stretch;
    padding: 0 14px;
    border-right: 1px solid var(--lz-line);
    color: var(--lz-navy);
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.lz-auth__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 56px;
    padding: 0 16px;
    border: 0;
    border-radius: 16px;
    background-color: transparent;
    color: var(--lz-navy);
    font-size: 1.08rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.lz-auth__input:focus { outline: none; }

.lz-auth__input::placeholder {
    color: var(--lz-body);
    font-weight: 500;
    letter-spacing: 0.04em;
}

/* --- Error ---------------------------------------------------------------- */

.lz-auth__error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 11px 14px;
    border: 1px solid rgba(229, 72, 77, 0.28);
    border-radius: 13px;
    background-color: var(--lz-red-soft);
    color: var(--lz-red-600);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.5;
    animation: lzAuthStep 0.28s var(--lz-ease-out) both;
}

/* --- Submit --------------------------------------------------------------- */

.lz-auth__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 54px;
    margin-top: 18px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: 16px;
    background-image: linear-gradient(180deg, var(--lz-accent) 0%, var(--lz-accent-600) 100%);
    color: #fff;
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.012em;
    cursor: pointer;
    box-shadow: 0 14px 26px -18px rgba(109, 74, 255, 0.95);
    transition: transform 0.26s var(--lz-ease-out),
        box-shadow 0.26s var(--lz-ease),
        opacity 0.26s var(--lz-ease);
}

.lz-auth__submit:hover:not([disabled]) {
    transform: translateY(-2px);
    box-shadow: 0 20px 34px -18px rgba(109, 74, 255, 0.95), 0 0 0 6px rgba(109, 74, 255, 0.10);
}

.lz-auth__submit[disabled] { opacity: 0.65; cursor: default; box-shadow: none; }

.lz-auth__submit--quiet {
    background-image: none;
    border-color: var(--lz-line-2);
    background-color: var(--lz-surface);
    color: var(--lz-navy);
    box-shadow: none;
}

.lz-auth__submit--quiet:hover:not([disabled]) {
    border-color: rgba(229, 72, 77, 0.4);
    color: var(--lz-red-600);
    box-shadow: none;
}

.lz-auth__submit-ico {
    width: 17px;
    height: 17px;
    transition: transform 0.26s var(--lz-ease-out);
}

.lz-auth__submit:hover:not([disabled]) .lz-auth__submit-ico { transform: translateX(3px); }

.lz-auth__legal {
    margin-top: 16px;
    color: var(--lz-body);
    font-size: 0.76rem;
    line-height: 1.6;
    text-align: center;
}

.lz-auth__legal a {
    color: var(--lz-accent-700);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* --- Edit number ---------------------------------------------------------- */

.lz-auth__edit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding: 5px 11px 5px 8px;
    border: 1px solid var(--lz-line);
    border-radius: var(--lz-r-pill);
    background-color: var(--lz-surface);
    color: var(--lz-accent-700);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.24s var(--lz-ease), background-color 0.24s var(--lz-ease);
}

.lz-auth__edit:hover {
    border-color: rgba(109, 74, 255, 0.34);
    background-color: var(--lz-accent-soft);
}

.lz-auth__edit-ico { width: 14px; height: 14px; }

/* --- OTP boxes ------------------------------------------------------------ */

.lz-auth__otp {
    display: grid;
    grid-template-columns: repeat(var(--lz-otp-count, 6), minmax(0, 1fr));
    gap: clamp(6px, 1.8vw, 11px);
    margin-top: 22px;
}

.lz-auth__digit {
    width: 100%;
    height: clamp(46px, 12.5vw, 60px);
    padding: 0;
    border: 1px solid var(--lz-line-2);
    border-radius: 14px;
    background-color: var(--lz-surface);
    color: var(--lz-navy);
    font-size: clamp(1.1rem, 4.4vw, 1.4rem);
    font-weight: 800;
    text-align: center;
    caret-color: var(--lz-accent);
    transition: border-color 0.2s var(--lz-ease), box-shadow 0.2s var(--lz-ease),
        transform 0.2s var(--lz-ease-out);
}

.lz-auth__digit:focus {
    outline: none;
    border-color: var(--lz-accent);
    box-shadow: 0 0 0 4px rgba(109, 74, 255, 0.16);
    transform: translateY(-2px);
}

.lz-auth__otp.is-invalid .lz-auth__digit {
    border-color: var(--lz-red);
    animation: lzAuthShake 0.4s var(--lz-ease) both;
}

@keyframes lzAuthShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    45% { transform: translateX(5px); }
    70% { transform: translateX(-3px); }
}

/* --- Verifying ------------------------------------------------------------ */

.lz-auth__verifying {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: 16px;
    color: var(--lz-accent-700);
    font-size: 0.86rem;
    font-weight: 700;
}

.lz-auth__spinner {
    width: 16px;
    height: 16px;
    flex: none;
    border: 2px solid var(--lz-accent-soft-2);
    border-top-color: var(--lz-accent);
    border-radius: 50%;
    animation: lzSpin 0.7s linear infinite;
}

/* --- Resend --------------------------------------------------------------- */

.lz-auth__resend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
    text-align: center;
}

.lz-auth__resend-btn {
    padding: 5px 10px;
    border: 0;
    border-radius: 10px;
    background-color: transparent;
    color: var(--lz-accent-700);
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
    transition: color 0.24s var(--lz-ease), background-color 0.24s var(--lz-ease);
}

.lz-auth__resend-btn:hover:not([disabled]) { background-color: var(--lz-accent-soft); }

.lz-auth__resend-btn[disabled] {
    color: var(--lz-body);
    font-weight: 600;
    cursor: default;
}

.lz-auth__resent {
    color: var(--lz-green);
    font-size: 0.8rem;
    font-weight: 700;
    animation: lzAuthStep 0.3s var(--lz-ease-out) both;
}

/* --- Success / account ---------------------------------------------------- */

.lz-auth__step--success,
.lz-auth__step--account {
    padding: 26px 0 10px;
    text-align: center;
}

.lz-auth__tick {
    display: grid;
    place-items: center;
    width: 74px;
    height: 74px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background-color: var(--lz-green-soft);
    color: var(--lz-green);
    animation: lzAuthPop 0.55s var(--lz-ease-out) both;
}

.lz-auth__tick .lz-icon { width: 36px; height: 36px; }

@keyframes lzAuthPop {
    0% { opacity: 0; transform: scale(0.6); }
    60% { transform: scale(1.06); }
    100% { opacity: 1; transform: scale(1); }
}

.lz-auth__step--success .lz-auth__text,
.lz-auth__step--account .lz-auth__text { margin-top: 8px; }

.lz-auth__who {
    margin-top: 18px;
    padding: 11px 16px;
    border: 1px solid var(--lz-line);
    border-radius: 14px;
    background-color: var(--lz-bg-2);
    color: var(--lz-navy);
    font-size: 0.92rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* --- reCAPTCHA ------------------------------------------------------------ */

/* Firebase needs a real, laid-out element to attach the invisible verifier to, so
   this is collapsed rather than display:none. The reCAPTCHA badge itself is Google's
   and is deliberately left visible — hiding it breaks their terms. */
.lz-auth__recaptcha {
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

/* ==========================================================================
   3. Header account UI
   ========================================================================== */

.lz-account { position: relative; }

.lz-account__btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 46px;
    padding: 0 14px 0 6px;
    border: 1px solid var(--lz-line);
    border-radius: var(--lz-r-pill);
    background-color: var(--lz-surface);
    color: var(--lz-navy);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: border-color 0.24s var(--lz-ease), box-shadow 0.24s var(--lz-ease);
}

.lz-account__btn:hover {
    border-color: rgba(109, 74, 255, 0.30);
    box-shadow: var(--lz-sh-2);
}

.lz-account__avatar {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: none;
    border-radius: 50%;
    background-image: linear-gradient(150deg, #fa7c37, #fa955d);
    color: #fff;
    font-size: 0.84rem;
    font-weight: 800;
    letter-spacing: 0;
}

.lz-account__chevron {
    width: 15px;
    height: 15px;
    flex: none;
    color: var(--lz-body);
    transition: transform 0.24s var(--lz-ease-out);
}

.lz-account__btn[aria-expanded="true"] .lz-account__chevron { transform: rotate(180deg); }

.lz-account__menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 5;
    width: 268px;
    padding: 16px;
    border: 1px solid var(--lz-line);
    border-radius: 18px;
    background-color: var(--lz-surface);
    box-shadow: 0 3px 8px rgba(11, 27, 51, 0.06), 0 28px 50px -26px rgba(11, 27, 51, 0.45);
    animation: lzAuthStep 0.24s var(--lz-ease-out) both;
}

.lz-account__who { display: grid; gap: 3px; }

.lz-account__who-label {
    color: var(--lz-navy);
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: -0.016em;
}

.lz-account__phone {
    color: var(--lz-body);
    font-size: 0.82rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.lz-account__note {
    margin-top: 9px;
    color: var(--lz-body);
    font-size: 0.74rem;
    line-height: 1.5;
}

/* --- Profile completion block (ring + action) ----------------------------- */

.lz-account__profile {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 13px;
    padding: 12px;
    border: 1px solid rgba(109, 74, 255, 0.16);
    border-radius: 14px;
    background-image: linear-gradient(160deg, var(--lz-accent-soft) 0%, rgba(109, 74, 255, 0.03) 100%);
}

.lz-account__ring {
    position: relative;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    flex: none;
}

.lz-account__ring-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.lz-account__ring-track {
    fill: none;
    stroke: rgba(109, 74, 255, 0.16);
    stroke-width: 5;
}

.lz-account__ring-arc {
    fill: none;
    stroke: var(--lz-accent);
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    transition: stroke-dashoffset 0.9s var(--lz-ease-out);
}

.lz-account__ring-value {
    display: flex;
    align-items: baseline;
    color: var(--lz-navy);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.lz-account__ring-num {
    font-size: 0.86rem;
    font-variant-numeric: tabular-nums;
}

.lz-account__ring-sign { font-size: 0.6rem; color: var(--lz-body); }

.lz-account__profile-text { display: grid; gap: 2px; min-width: 0; }

.lz-account__profile-title {
    color: var(--lz-navy);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: -0.012em;
}

.lz-account__profile-hint {
    color: var(--lz-body);
    font-size: 0.72rem;
    line-height: 1.4;
}

.lz-account__profile.is-complete {
    border-color: rgba(22, 163, 74, 0.24);
    background-image: linear-gradient(160deg, var(--lz-green-soft) 0%, rgba(22, 163, 74, 0.04) 100%);
}

.lz-account__profile.is-complete .lz-account__ring-arc { stroke: var(--lz-green-600); }
.lz-account__profile.is-complete .lz-account__ring-track { stroke: rgba(22, 163, 74, 0.2); }

.lz-account__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: var(--lz-r-pill);
    background-image: linear-gradient(180deg, var(--lz-accent) 0%, var(--lz-accent-600) 100%);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    box-shadow: 0 14px 26px -18px rgba(109, 74, 255, 0.95);
    transition: transform 0.24s var(--lz-ease-out), box-shadow 0.24s var(--lz-ease);
}

.lz-account__cta:hover { transform: translateY(-1px); box-shadow: var(--lz-sh-accent); }

.lz-account__cta-ico { width: 16px; height: 16px; flex: none; }

.lz-account__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 13px;
    padding-top: 13px;
    border-top: 1px solid var(--lz-line);
    color: var(--lz-accent-700);
    font-size: 0.84rem;
    font-weight: 700;
}

.lz-account__link-ico {
    width: 15px;
    height: 15px;
    transition: transform 0.24s var(--lz-ease-out);
}

.lz-account__link:hover .lz-account__link-ico { transform: translateX(3px); }

.lz-account__out {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 13px;
    padding: 7px 12px 7px 10px;
    border: 1px solid var(--lz-line-2);
    border-radius: 12px;
    background-color: var(--lz-surface);
    color: var(--lz-navy);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.24s var(--lz-ease), color 0.24s var(--lz-ease);
}

.lz-account__out:hover { border-color: rgba(229, 72, 77, 0.4); color: var(--lz-red-600); }

.lz-account__out-ico { width: 14px; height: 14px; }

/* In the mobile menu the account block is full width. */
.lz-account--block { display: block; }
.lz-account--block .lz-account__btn { width: 100%; justify-content: flex-start; }
.lz-account--block .lz-account__menu { position: static; width: 100%; margin-top: 10px; }

/* ==========================================================================
   4. Focus states
   ========================================================================== */

.lz-auth__icon-btn:focus-visible,
.lz-auth__submit:focus-visible,
.lz-auth__edit:focus-visible,
.lz-auth__resend-btn:focus-visible,
.lz-account__btn:focus-visible,
.lz-account__link:focus-visible,
.lz-account__out:focus-visible {
    outline: 3px solid var(--lz-accent-ring);
    outline-offset: 3px;
}

/* ==========================================================================
   5. Responsive — desktop card → mobile full-screen sheet
   ========================================================================== */

@media (max-width: 767px) {
    .lz-auth {
        align-items: stretch;
        justify-content: stretch;
        padding: 0;
    }

    .lz-auth__scrim { display: none; }

    .lz-auth__dialog {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: 100dvh;
        border: 0;
        border-radius: 0;
        transform: translateY(12px);
        box-shadow: none;
    }

    .lz-auth.is-open .lz-auth__dialog { transform: none; }

    .lz-auth__bar {
        padding: max(14px, env(safe-area-inset-top)) 16px 0;
    }

    .lz-auth__body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 24px 20px max(24px, env(safe-area-inset-bottom));
    }

    .lz-auth__step { width: 100%; }
}

@media (max-width: 360px) {
    .lz-auth__otp { gap: 6px; }
    .lz-auth__digit { border-radius: 13px; }
}

@media (max-width: 480px) {
    .lz-account__menu { width: min(268px, calc(100vw - 28px)); }
}

/* ==========================================================================
   6. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .lz-auth__scrim,
    .lz-auth__dialog,
    .lz-auth__step,
    .lz-auth__error,
    .lz-auth__resent,
    .lz-auth__tick,
    .lz-account__menu,
    .lz-auth__spinner,
    .lz-auth__otp.is-invalid .lz-auth__digit {
        animation: none;
    }

    .lz-auth__dialog,
    .lz-auth__scrim,
    .lz-auth__digit,
    .lz-auth__submit,
    .lz-account__btn,
    .lz-account__ring-arc,
    .lz-account__cta {
        transition: none;
    }

    .lz-auth__digit:focus { transform: none; }
}