/* ======================================
   NOVA BANK — AUTH / LOGIN
   ====================================== */

:root {
    --bg: #f4f5f7;
    --surface: #ffffff;
    --surface-soft: #f0f1f4;

    --text: #111217;
    --muted: #737983;

    --accent: #765be9;
    --accent-2: #9a87ff;
    --lime: #dfff59;

    --line: rgba(17, 18, 23, .09);

    --danger: #e84e62;
    --danger-soft: #fff0f2;

    --radius-xl: 36px;
    --radius-lg: 28px;
    --radius-md: 18px;

    --shadow:
        0 28px 80px rgba(26, 20, 58, .10);

    --container: 1360px;
}


* {
    box-sizing: border-box;
}


html {
    min-height: 100%;
}


body {
    min-height: 100vh;
    margin: 0;

    color: var(--text);

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(118, 91, 233, .08),
            transparent 27%
        ),
        var(--bg);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    -webkit-font-smoothing: antialiased;
}


body.modal-open {
    overflow: hidden;
}


a {
    color: inherit;
    text-decoration: none;
}


button,
input,
select {
    font: inherit;
}


button {
    color: inherit;
}


svg {
    display: block;
}


.auth-page {
    min-height: 100vh;

    display: flex;
    flex-direction: column;
}


.auth-container {
    width:
        min(
            calc(100% - 48px),
            var(--container)
        );

    margin-inline: auto;
}


/* ======================================
   HEADER
   ====================================== */


.auth-header {
    padding:
        18px
        0;
}


.auth-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;
}


.auth-logo {
    display: inline-flex;
    align-items: center;

    gap: 10px;
}


.auth-logo__mark {
    position: relative;

    width: 34px;
    height: 34px;

    overflow: hidden;

    border-radius: 11px;

    background: #111217;
}


.auth-logo__mark > span:first-child {
    position: absolute;

    width: 20px;
    height: 20px;

    left: 6px;
    top: 7px;

    border-radius: 50%;

    border:
        5px solid
        var(--accent);
}


.auth-logo__mark > span:last-child {
    position: absolute;

    width: 16px;
    height: 7px;

    right: -2px;
    bottom: 5px;

    border-radius: 5px;

    background:
        var(--lime);

    transform:
        rotate(-24deg);
}


.auth-logo__text {
    font-size: 20px;
    font-weight: 900;

    letter-spacing: -.035em;
}


.auth-header__actions {
    display: flex;
    align-items: center;

    gap: 14px;
}


.auth-header__question {
    color: #7d828b;

    font-size: 12px;
}


/* ======================================
   BUTTONS
   ====================================== */


.btn {
    min-height: 48px;

    padding:
        0 19px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    border:
        1px solid
        transparent;

    border-radius:
        15px;

    background:
        transparent;

    cursor: pointer;

    font-weight: 800;
    font-size: 13px;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .2s ease,
        border-color .2s ease;
}


.btn:hover {
    transform:
        translateY(-2px);
}


.btn--ghost {
    background:
        #fff;

    border-color:
        var(--line);

    box-shadow:
        0 8px 28px
        rgba(0, 0, 0, .04);
}


.btn--primary {
    color: #111217;

    background:
        var(--lime);

    box-shadow:
        0 12px 30px
        rgba(193, 224, 55, .22);
}


.btn--primary:hover {
    box-shadow:
        0 15px 34px
        rgba(193, 224, 55, .30);
}


.btn--full {
    width: 100%;

    min-height:
        54px;

    margin-top:
        4px;
}


/* ======================================
   MAIN
   ====================================== */


.auth-main {
    flex: 1;

    display: flex;
    align-items: center;

    padding:
        14px
        0
        30px;
}


.auth-shell {
    min-height:
        690px;

    display: grid;

    grid-template-columns:
        1.08fr
        .92fr;

    overflow: hidden;

    border-radius:
        var(--radius-xl);

    background:
        #fff;

    box-shadow:
        var(--shadow);
}


/* ======================================
   LEFT VISUAL
   ====================================== */


.auth-visual {
    position: relative;

    isolation: isolate;

    overflow: hidden;

    color: #fff;

    background:
        radial-gradient(
            circle at 80% 24%,
            rgba(223, 255, 89, .16),
            transparent 28%
        ),
        radial-gradient(
            circle at 18% 85%,
            rgba(118, 91, 233, .55),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #14151b,
            #21183f 53%,
            #3b268f
        );
}


.auth-visual::after {
    content: "";

    position: absolute;

    width: 620px;
    height: 620px;

    right: -280px;
    bottom: -270px;

    border-radius:
        50%;

    border:
        1px solid
        rgba(255, 255, 255, .10);
}


.auth-visual__glow {
    position: absolute;

    border-radius:
        50%;

    filter:
        blur(25px);

    z-index:
        -1;
}


.auth-visual__glow--one {
    width: 220px;
    height: 220px;

    right: -20px;
    top: -45px;

    background:
        rgba(223, 255, 89, .30);
}


.auth-visual__glow--two {
    width: 320px;
    height: 320px;

    left: 10%;
    bottom: -150px;

    background:
        rgba(118, 91, 233, .38);
}


.auth-visual__content {
    position: relative;

    z-index: 4;

    max-width: 600px;

    padding:
        70px
        54px;
}


.eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    margin-bottom:
        17px;

    color: #797e87;

    font-size: 10px;
    font-weight: 800;

    letter-spacing:
        .055em;

    text-transform:
        uppercase;
}


.eyebrow--light {
    color:
        rgba(
            255,
            255,
            255,
            .55
        );
}


.eyebrow__dot {
    width: 7px;
    height: 7px;

    border-radius:
        50%;

    background:
        var(--lime);

    box-shadow:
        0 0 0 5px
        rgba(
            223,
            255,
            89,
            .1
        );
}


.auth-visual h1 {
    max-width: 620px;

    margin: 0;

    font-size:
        clamp(
            46px,
            4.7vw,
            68px
        );

    line-height:
        .98;

    letter-spacing:
        -.055em;

    font-weight:
        800;
}


.auth-visual h1 span {
    display: block;

    color:
        var(--lime);
}


.auth-visual__content > p {
    max-width: 490px;

    margin:
        25px
        0
        0;

    color:
        rgba(
            255,
            255,
            255,
            .61
        );

    font-size:
        15px;

    line-height:
        1.65;
}


.auth-benefits {
    max-width:
        430px;

    margin-top:
        39px;

    display: flex;
    flex-direction: column;

    gap:
        13px;
}


.auth-benefit {
    display: flex;
    align-items: center;

    gap:
        12px;
}


.auth-benefit__icon {
    width:
        38px;
    height:
        38px;

    flex:
        0 0
        38px;

    display: grid;
    place-items: center;

    border-radius:
        13px;

    color:
        #111217;

    background:
        var(--lime);

    font-size:
        11px;

    font-weight:
        900;
}


.auth-benefit:nth-child(2)
.auth-benefit__icon {
    color:
        #fff;

    background:
        rgba(
            255,
            255,
            255,
            .12
        );
}


.auth-benefit:nth-child(3)
.auth-benefit__icon {
    color:
        #fff;

    background:
        var(--accent);
}


.auth-benefit > div {
    display: flex;
    flex-direction: column;

    gap:
        3px;
}


.auth-benefit strong {
    font-size:
        11px;
}


.auth-benefit small {
    color:
        rgba(
            255,
            255,
            255,
            .43
        );

    font-size:
        8px;
}


/* ======================================
   PHONE
   ====================================== */


.auth-device {
    position: absolute;

    right:
        42px;

    bottom:
        -115px;

    width:
        340px;

    height:
        530px;
}


.auth-phone {
    position: absolute;

    width:
        235px;

    height:
        478px;

    right:
        15px;

    bottom:
        0;

    padding:
        9px;

    border-radius:
        39px;

    background:
        #0c0d11;

    box-shadow:
        0 38px 65px
        rgba(
            0,
            0,
            0,
            .36
        );

    transform:
        rotate(6deg);
}


.auth-phone__speaker {
    position: absolute;

    z-index:
        4;

    width:
        69px;

    height:
        16px;

    left:
        50%;

    top:
        14px;

    border-radius:
        0 0 12px 12px;

    background:
        #0c0d11;

    transform:
        translateX(-50%);
}


.auth-phone__screen {
    height:
        100%;

    overflow:
        hidden;

    padding:
        24px 15px;

    border-radius:
        31px;

    color:
        #111217;

    background:
        #f4f5f7;
}


.auth-phone__top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    font-size:
        9px;

    font-weight:
        800;
}


.auth-phone__avatar {
    width:
        25px;
    height:
        25px;

    display: grid;
    place-items: center;

    border-radius:
        50%;

    color:
        #fff;

    background:
        #191a20;

    font-size:
        9px;
}


.auth-phone__label {
    margin-top:
        27px;

    color:
        #92969e;

    font-size:
        8px;
}


.auth-phone__balance {
    margin-top:
        3px;

    font-size:
        23px;

    font-weight:
        900;

    letter-spacing:
        -.05em;
}


.auth-phone__card {
    height:
        105px;

    margin-top:
        15px;

    padding:
        14px;

    border-radius:
        17px;

    color:
        #fff;

    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(223, 255, 89, .22),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #17181d,
            #3d315f
        );
}


.auth-phone__card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    font-size:
        8px;

    font-weight:
        900;
}


.auth-phone__brand {
    width:
        25px;
    height:
        25px;

    display: grid;
    place-items: center;

    border-radius:
        9px;

    color:
        #111217;

    background:
        var(--lime);

    font-size:
        11px;
}


.auth-phone__card strong {
    display: block;

    margin-top:
        17px;

    font-size:
        13px;
}


.auth-phone__card small {
    display: block;

    margin-top:
        4px;

    color:
        rgba(
            255,
            255,
            255,
            .5
        );

    font-size:
        7px;
}


.auth-phone__quick {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap:
        7px;

    margin-top:
        12px;
}


.auth-phone__quick div {
    text-align:
        center;
}


.auth-phone__quick span {
    width:
        33px;
    height:
        33px;

    margin:
        0
        auto
        5px;

    display: grid;
    place-items: center;

    border-radius:
        11px;

    background:
        #fff;

    box-shadow:
        0 6px 14px
        rgba(
            0,
            0,
            0,
            .04
        );

    font-size:
        12px;

    font-weight:
        900;
}


.auth-phone__quick small {
    color:
        #90949c;

    font-size:
        6px;
}


.auth-phone__activity {
    margin-top:
        18px;
}


.auth-phone__activity-head {
    display: flex;
    justify-content: space-between;

    font-size:
        8px;
}


.auth-phone__activity-head span {
    color:
        var(--accent);
}


.auth-phone__operation {
    display: grid;

    grid-template-columns:
        28px
        1fr
        auto;

    align-items: center;

    gap:
        7px;

    margin-top:
        11px;
}


.auth-phone__operation-icon {
    width:
        28px;
    height:
        28px;

    display: grid;
    place-items: center;

    border-radius:
        9px;

    background:
        #fff;

    font-size:
        8px;

    font-weight:
        900;
}


.auth-phone__operation div {
    display: flex;
    flex-direction: column;

    gap:
        2px;
}


.auth-phone__operation strong,
.auth-phone__operation b {
    font-size:
        7px;
}


.auth-phone__operation small {
    color:
        #989ca3;

    font-size:
        6px;
}


.auth-phone__operation .positive {
    color:
        #659a35;
}


.auth-floating {
    position: absolute;

    z-index:
        7;

    min-width:
        170px;

    display: flex;
    align-items: center;

    gap:
        10px;

    padding:
        11px
        13px;

    border-radius:
        15px;

    color:
        #111217;

    background:
        rgba(
            255,
            255,
            255,
            .94
        );

    box-shadow:
        0 16px 38px
        rgba(
            0,
            0,
            0,
            .18
        );

    backdrop-filter:
        blur(12px);
}


.auth-floating--top {
    left:
        -34px;

    top:
        54px;
}


.auth-floating--bottom {
    left:
        -2px;

    bottom:
        100px;
}


.auth-floating__icon {
    width:
        32px;
    height:
        32px;

    flex:
        0 0
        32px;

    display: grid;
    place-items: center;

    border-radius:
        10px;

    background:
        var(--lime);

    font-size:
        11px;

    font-weight:
        900;
}


.auth-floating__icon--soft {
    color:
        #654bd9;

    background:
        #eeeaff;
}


.auth-floating > div {
    display: flex;
    flex-direction: column;

    gap:
        2px;
}


.auth-floating strong {
    font-size:
        9px;
}


.auth-floating small {
    color:
        #898e96;

    font-size:
        7px;
}


/* ======================================
   RIGHT PANEL
   ====================================== */


.auth-form-panel {
    display: flex;
    align-items: center;

    padding:
        54px
        60px;

    background:
        #fff;
}


.auth-form-wrap {
    width:
        min(
            100%,
            470px
        );

    margin:
        auto;
}


.security-line {
    display: flex;
    align-items: center;

    gap:
        10px;

    margin-bottom:
        34px;

    padding:
        12px
        14px;

    border:
        1px solid
        var(--line);

    border-radius:
        15px;

    background:
        #f8f9fa;
}


.security-line__icon {
    width:
        34px;
    height:
        34px;

    flex:
        0 0
        34px;

    display: grid;
    place-items: center;

    border-radius:
        11px;

    color:
        #684ed8;

    background:
        #eeeaff;
}


.security-line__icon svg {
    width:
        17px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.8;
}


.security-line > div {
    display: flex;
    flex-direction: column;

    gap:
        3px;
}


.security-line strong {
    font-size:
        10px;
}


.security-line small {
    color:
        #91969e;

    font-size:
        8px;
}


.auth-title h2 {
    margin:
        0;

    font-size:
        clamp(
            34px,
            3.4vw,
            47px
        );

    line-height:
        1;

    letter-spacing:
        -.055em;
}


.auth-title p {
    max-width:
        420px;

    margin:
        17px
        0
        0;

    color:
        #7d828b;

    font-size:
        12px;

    line-height:
        1.6;
}


.form-alert {
    position: relative;

    margin-top:
        22px;

    padding:
        13px
        44px
        13px
        45px;

    display: flex;
    align-items: center;

    min-height:
        50px;

    border:
        1px solid
        rgba(
            232,
            78,
            98,
            .16
        );

    border-radius:
        15px;

    color:
        #b63446;

    background:
        var(--danger-soft);

    font-size:
        11px;
}


.form-alert__icon {
    position: absolute;

    left:
        14px;

    width:
        23px;
    height:
        23px;

    display: grid;
    place-items: center;

    border-radius:
        8px;

    color:
        #fff;

    background:
        var(--danger);

    font-size:
        10px;

    font-weight:
        900;
}


.form-alert__close {
    position: absolute;

    right:
        13px;

    width:
        25px;
    height:
        25px;

    border:
        0;

    border-radius:
        8px;

    color:
        #a2505c;

    background:
        transparent;

    cursor:
        pointer;

    font-size:
        18px;
}


.auth-form {
    margin-top:
        31px;
}


.field {
    display: block;
}


.field + .field {
    margin-top:
        19px;
}


.field__label,
.field__label-row {
    font-size:
        10px;

    font-weight:
        800;
}


.field__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom:
        8px;
}


.field > .field__label {
    display: block;

    margin-bottom:
        8px;
}


.link-button {
    padding:
        0;

    border:
        0;

    color:
        #684ed8;

    background:
        transparent;

    cursor:
        pointer;

    font-size:
        9px;

    font-weight:
        800;
}


.field__control {
    position: relative;

    display: flex;
    align-items: center;
}


.field__control input {
    width:
        100%;

    height:
        54px;

    padding:
        0
        48px;

    border:
        1px solid
        #dfe2e6;

    outline:
        none;

    border-radius:
        16px;

    color:
        #111217;

    background:
        #f8f9fa;

    font-size:
        12px;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;
}


.field__control input::placeholder {
    color:
        #a3a7ae;
}


.field__control input:focus {
    border-color:
        rgba(
            118,
            91,
            233,
            .65
        );

    background:
        #fff;

    box-shadow:
        0 0 0 4px
        rgba(
            118,
            91,
            233,
            .08
        );
}


.field__icon {
    position: absolute;

    left:
        16px;

    z-index:
        2;

    color:
        #8f949d;
}


.field__icon svg {
    width:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.7;

    stroke-linejoin:
        round;
}


.password-toggle {
    position: absolute;

    right:
        12px;

    width:
        34px;
    height:
        34px;

    display: grid;
    place-items: center;

    border:
        0;

    border-radius:
        10px;

    color:
        #90949d;

    background:
        transparent;

    cursor:
        pointer;
}


.password-toggle:hover {
    background:
        #eef0f2;
}


.password-toggle svg {
    width:
        18px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin:
        17px
        0
        23px;
}


.remember {
    display: inline-flex;
    align-items: center;

    gap:
        8px;

    cursor:
        pointer;
}


.remember input {
    display:
        none;
}


.remember > span {
    position: relative;

    width:
        18px;
    height:
        18px;

    border:
        1px solid
        #d2d5da;

    border-radius:
        6px;

    background:
        #fff;

    transition:
        .2s ease;
}


.remember input:checked + span {
    border-color:
        var(--accent);

    background:
        var(--accent);
}


.remember input:checked + span::after {
    content: "";

    position: absolute;

    width:
        7px;
    height:
        4px;

    left:
        4px;
    top:
        4px;

    border-left:
        2px solid
        #fff;

    border-bottom:
        2px solid
        #fff;

    transform:
        rotate(-45deg);
}


.remember b {
    font-size:
        9px;

    font-weight:
        700;

    color:
        #747982;
}


.auth-register-mobile {
    display:
        none;

    margin-top:
        18px;

    text-align:
        center;

    font-size:
        10px;

    color:
        #858a92;
}


.auth-register-mobile a {
    margin-left:
        5px;

    color:
        #684ed8;

    font-weight:
        800;
}


.auth-trust {
    display: flex;
    align-items: center;

    gap:
        11px;

    margin-top:
        30px;

    padding-top:
        22px;

    border-top:
        1px solid
        var(--line);
}


.auth-trust__icon {
    width:
        32px;
    height:
        32px;

    flex:
        0 0
        32px;

    display: grid;
    place-items: center;

    border-radius:
        10px;

    color:
        #654bd8;

    background:
        #eeeaff;
}


.auth-trust__icon svg {
    width:
        17px;

    fill:
        none;

    stroke:
        currentColor;

    stroke-width:
        1.7;

    stroke-linecap:
        round;

    stroke-linejoin:
        round;
}


.auth-trust p {
    margin:
        0;

    color:
        #8c9199;

    font-size:
        8px;

    line-height:
        1.55;
}


/* ======================================
   FOOTER
   ====================================== */


.auth-footer {
    padding:
        9px
        0
        24px;
}


.auth-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap:
        30px;

    color:
        #92969e;

    font-size:
        8px;
}


.auth-footer__right {
    display: flex;
    align-items: center;

    gap:
        18px;
}


.auth-footer__right > a:hover {
    color:
        #111217;
}


.language-select {
    position: relative;

    display: inline-flex;
    align-items: center;

    gap:
        6px;
}


.language-select span {
    font-weight:
        800;
}


.language-select select {
    max-width:
        90px;

    border:
        0;

    color:
        #777c85;

    background:
        transparent;

    cursor:
        pointer;

    font-size:
        8px;
}


/* ======================================
   RECOVERY MODAL
   ====================================== */


.modal-backdrop {
    position: fixed;

    z-index:
        1000;

    inset:
        0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding:
        20px;

    background:
        rgba(
            10,
            11,
            15,
            .55
        );

    backdrop-filter:
        blur(10px);
}


.recovery-modal {
    position: relative;

    width:
        min(
            100%,
            440px
        );

    padding:
        35px;

    border-radius:
        28px;

    background:
        #fff;

    box-shadow:
        0 30px 90px
        rgba(
            0,
            0,
            0,
            .24
        );

    animation:
        modalIn .23s ease;
}


@keyframes modalIn {

    from {
        opacity:
            0;

        transform:
            translateY(10px)
            scale(.98);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0)
            scale(1);
    }

}


.modal-close {
    position: absolute;

    right:
        17px;

    top:
        17px;

    width:
        34px;
    height:
        34px;

    display: grid;
    place-items: center;

    border:
        0;

    border-radius:
        11px;

    color:
        #777c84;

    background:
        #f1f2f4;

    cursor:
        pointer;

    font-size:
        20px;
}


.modal-icon {
    width:
        54px;
    height:
        54px;

    margin-bottom:
        21px;

    display: grid;
    place-items: center;

    border-radius:
        17px;

    color:
        #111217;

    background:
        var(--lime);

    font-size:
        18px;

    font-weight:
        900;
}


.recovery-modal h3 {
    margin:
        0;

    font-size:
        31px;

    line-height:
        1.05;

    letter-spacing:
        -.045em;
}


.recovery-modal > p:not(.form-error) {
    margin:
        13px
        0
        25px;

    color:
        #7d828b;

    font-size:
        11px;

    line-height:
        1.6;
}


.field__control--code input {
    padding:
        0
        15px;

    text-align:
        center;

    letter-spacing:
        .3em;

    font-size:
        20px;

    font-weight:
        900;
}


.modal-loader {
    min-height:
        54px;

    margin-top:
        4px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap:
        10px;

    border-radius:
        15px;

    color:
        #71767f;

    background:
        #f2f3f5;

    font-size:
        10px;
}


.modal-loader span {
    width:
        17px;
    height:
        17px;

    border:
        2px solid
        #d7d9dd;

    border-top-color:
        var(--accent);

    border-radius:
        50%;

    animation:
        spin .65s linear infinite;
}


@keyframes spin {

    to {
        transform:
            rotate(360deg);
    }

}


.form-error {
    min-height:
        16px;

    margin:
        10px
        0
        0;

    color:
        var(--danger);

    font-size:
        9px;
}


/* ======================================
   RESPONSIVE
   ====================================== */


@media (max-width: 1100px) {

    .auth-shell {
        grid-template-columns:
            1fr
            .95fr;
    }


    .auth-visual__content {
        padding:
            55px
            42px;
    }


    .auth-device {
        right:
            5px;

        transform:
            scale(.9);

        transform-origin:
            bottom right;
    }


    .auth-form-panel {
        padding:
            45px
            40px;
    }

}


@media (max-width: 860px) {

    .auth-main {
        align-items:
            flex-start;

        padding-top:
            4px;
    }


    .auth-shell {
        min-height:
            auto;

        grid-template-columns:
            1fr;
    }


    .auth-visual {
        min-height:
            510px;
    }


    .auth-visual__content {
        padding:
            46px
            37px;
    }


    .auth-visual h1 {
        max-width:
            560px;
    }


    .auth-benefits {
        max-width:
            380px;
    }


    .auth-device {
        right:
            12px;

        bottom:
            -138px;

        transform:
            scale(.72);

        transform-origin:
            bottom right;
    }


    .auth-form-panel {
        padding:
            55px
            42px;
    }


    .auth-form-wrap {
        max-width:
            570px;
    }

}


@media (max-width: 600px) {

    .auth-container {
        width:
            min(
                calc(100% - 22px),
                var(--container)
            );
    }


    .auth-header {
        padding:
            13px
            0;
    }


    .auth-header__question,
    .auth-header .btn {
        display:
            none;
    }


    .auth-main {
        padding-bottom:
            17px;
    }


    .auth-shell {
        border-radius:
            27px;
    }


    .auth-visual {
        min-height:
            410px;
    }


    .auth-visual__content {
        padding:
            36px
            24px;
    }


    .auth-visual h1 {
        font-size:
            43px;
    }


    .auth-visual__content > p {
        font-size:
            13px;
    }


    .auth-benefits {
        display:
            none;
    }


    .auth-device {
        right:
            -49px;

        bottom:
            -189px;

        transform:
            scale(.58);
    }


    .auth-floating {
        display:
            none;
    }


    .auth-form-panel {
        padding:
            38px
            22px;
    }


    .security-line {
        margin-bottom:
            28px;
    }


    .auth-title h2 {
        font-size:
            38px;
    }


    .auth-title p {
        font-size:
            11px;
    }


    .auth-register-mobile {
        display:
            block;
    }


    .auth-footer__inner {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            12px;
    }


    .auth-footer__right {
        width:
            100%;

        flex-wrap:
            wrap;
    }


    .recovery-modal {
        padding:
            29px
            22px;

        border-radius:
            24px;
    }

}