/* ======================================
   NOVA BANK — REGISTER
   ====================================== */

:root {
    --bg: #f4f5f7;
    --surface: #ffffff;
    --text: #111217;
    --muted: #737983;

    --accent: #765be9;
    --accent-soft: #eeeaff;
    --lime: #dfff59;

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

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

    --radius-xl: 36px;
    --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;
}


.step {
    display: none;
}


.step.active {
    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;
}


.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--full {
    width: 100%;

    min-height: 54px;
}


/* MAIN */


.auth-main {
    flex: 1;

    display: flex;
    align-items: center;

    padding: 14px 0 30px;
}


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

    display: grid;

    grid-template-columns:
        1.03fr
        .97fr;

    overflow: hidden;

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

    background: #fff;

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


/* VISUAL */


.auth-visual {
    position: relative;

    isolation: isolate;

    overflow: hidden;

    color: #fff;

    background:
        radial-gradient(
            circle at 79% 23%,
            rgba(223, 255, 89, .16),
            transparent 28%
        ),
        radial-gradient(
            circle at 15% 90%,
            rgba(118, 91, 233, .55),
            transparent 37%
        ),
        linear-gradient(
            135deg,
            #14151b,
            #21183f 53%,
            #3b268f
        );
}


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

    position: absolute;

    width: 620px;
    height: 620px;

    right: -270px;
    bottom: -300px;

    border-radius: 50%;

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


.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, .3);
}


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

    left: 8%;
    bottom: -160px;

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


.auth-visual__content {
    position: relative;

    z-index: 4;

    max-width: 620px;

    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: 485px;

    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;
}


/* CARD VISUAL */


.auth-device {
    position: absolute;

    right: 38px;
    bottom: 44px;

    width: 370px;
    height: 260px;
}


.register-card {
    position: absolute;

    width: 315px;
    height: 197px;

    padding: 24px;

    border-radius: 27px;

    box-shadow:
        0 34px 65px
        rgba(0, 0, 0, .28);
}


.register-card--back {
    right: -66px;
    top: 15px;

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

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

    transform: rotate(13deg);

    backdrop-filter: blur(12px);
}


.register-card--front {
    right: 18px;
    top: 34px;

    color: #111217;

    background:
        radial-gradient(
            circle at 83% 17%,
            rgba(255, 255, 255, .72),
            transparent 24%
        ),
        linear-gradient(
            135deg,
            #dfff59,
            #c8ef43
        );

    transform: rotate(-9deg);
}


.register-card__top,
.register-card__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.register-card__top {
    font-size: 11px;
    font-weight: 900;
}


.register-card__logo {
    width: 32px;
    height: 32px;

    display: grid;
    place-items: center;

    border-radius: 10px;

    color: #fff;

    background: #111217;
}


.register-card__chip {
    width: 42px;
    height: 30px;

    margin-top: 24px;

    border-radius: 8px;

    background:
        linear-gradient(
            135deg,
            #e3d79c,
            #b3a55f
        );
}


.register-card strong {
    display: block;

    margin-top: 20px;

    font-size: 15px;

    letter-spacing: .05em;
}


.register-card__bottom {
    margin-top: 19px;

    color: rgba(17, 18, 23, .55);

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

    letter-spacing: .08em;
}


.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: -40px;
    top: -5px;
}


.auth-floating--bottom {
    left: -12px;
    bottom: 0;
}


.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;
}


/* FORM PANEL */


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

    padding: 48px 56px;

    background: #fff;
}


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

    margin: auto;
}


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

    gap: 10px;

    margin-bottom: 29px;

    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: var(--accent-soft);
}


.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(
            35px,
            3.4vw,
            47px
        );

    line-height: 1;

    letter-spacing: -.055em;
}


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

    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;
}


.register-form {
    margin-top: 28px;
}


.fields-row {
    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 12px;
}


.field {
    display: block;
}


.field + .field,
.fields-row + .field {
    margin-top: 17px;
}


.fields-row .field + .field {
    margin-top: 0;
}


.field__label {
    display: block;

    margin-bottom: 8px;

    font-size: 10px;
    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-linecap: round;
    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;
}


.password-hint {
    display: block;

    margin-top: 7px;

    color: #999da5;

    font-size: 8px;
}


.agreement {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin: 20px 0 22px;
}


.agreement__check {
    position: relative;

    flex: 0 0 20px;

    cursor: pointer;
}


.agreement__check input {
    position: absolute;

    opacity: 0;
    pointer-events: none;
}


.agreement__box {
    width: 20px;
    height: 20px;

    display: grid;
    place-items: center;

    border: 1px solid #d4d7dc;
    border-radius: 7px;

    background: #fff;

    transition: .2s ease;
}


.agreement__box svg {
    width: 13px;

    fill: none;

    stroke: #fff;
    stroke-width: 2.5;

    opacity: 0;

    transition: .2s ease;
}


.agreement__check input:checked + .agreement__box {
    border-color: var(--accent);
    background: var(--accent);
}


.agreement__check input:checked + .agreement__box svg {
    opacity: 1;
}


.agreement p {
    margin: 1px 0 0;

    color: #858a92;

    font-size: 9px;
    line-height: 1.55;
}


.agreement a {
    color: #674ed7;

    font-weight: 700;
}


.form-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;
}


.form-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);
    }
}


.auth-login-mobile {
    display: none;

    margin-top: 18px;

    text-align: center;

    color: #858a92;

    font-size: 10px;
}


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

    color: #684ed8;

    font-weight: 800;
}


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

    gap: 11px;

    margin-top: 27px;

    padding-top: 21px;

    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: var(--accent-soft);
}


.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;
}


.language-select {
    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;
}


/* INVITE 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);
}


.invite-modal {
    width: min(100%, 430px);

    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-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;
}


.invite-modal h3 {
    margin: 0;

    font-size: 31px;
    line-height: 1.05;

    letter-spacing: -.045em;
}


.invite-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: .12em;

    font-size: 16px;
    font-weight: 900;
}


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

    margin: 10px 0 0;

    color: var(--danger);

    font-size: 9px;
}


/* TOAST */


.toast-container {
    position: fixed;

    z-index: 2000;

    right: 22px;
    bottom: 22px;

    display: flex;
    flex-direction: column;

    gap: 10px;
}


.nova-toast {
    min-width: 260px;
    max-width: 360px;

    padding: 14px 16px;

    border-radius: 15px;

    color: #111217;

    background: #fff;

    box-shadow:
        0 18px 50px
        rgba(0, 0, 0, .17);

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

    opacity: 0;

    transform: translateY(8px);

    transition: .2s ease;
}


.nova-toast--success {
    background: var(--lime);
}


.nova-toast--error {
    color: #a42d3e;

    background: #fff0f2;
}


.nova-toast.is-visible {
    opacity: 1;

    transform: translateY(0);
}


/* RESPONSIVE */


@media (max-width: 1100px) {

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


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


    .auth-device {
        right: 0;

        transform: scale(.88);
        transform-origin: bottom right;
    }


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

}


@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: 500px;
    }


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


    .auth-device {
        right: 18px;
        bottom: 0;

        transform: scale(.72);
        transform-origin: bottom right;
    }


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


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

}


@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: 390px;
    }


    .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: -84px;
        bottom: -16px;

        transform: scale(.58);
    }


    .auth-floating {
        display: none;
    }


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


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


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


    .fields-row {
        grid-template-columns: 1fr;
    }


    .fields-row .field + .field {
        margin-top: 17px;
    }


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


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

        flex-direction: column;

        gap: 12px;
    }


    .auth-footer__right {
        width: 100%;

        flex-wrap: wrap;
    }


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

        border-radius: 24px;
    }


    .toast-container {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }


    .nova-toast {
        min-width: 0;
        max-width: none;
        width: 100%;
    }

}