.login-v2 {
    min-height: 100vh;
    background: var(--color-dark-neutral);
    color: var(--color-text-primary);
    overflow: hidden;
}

.login-v2__background {
    position: fixed;
    inset: 0;
    background-image: var(--login-background-image);
    background-position: center;
    background-size: cover;
    transform: scale(1.02);
}

.login-v2__background::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, .4);
}

.login-v2__shell {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(220px, .85fr) minmax(320px, 440px) minmax(220px, .75fr);
    align-items: center;
    gap: 5vw;
    padding: clamp(1.5rem, 4vw, 4rem);
}

.login-v2__brand {
    position: fixed;
    top: clamp(1.25rem, 3vw, 2.5rem);
    left: clamp(4rem, 10vw, 12.5rem);
    z-index: 2;
    width: min(260px, 70vw);
    height: auto;
}

.login-v2__form-area {
    grid-column: 2;
}

.login-v2__panel {
    width: 100%;
    max-width: 430px;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(255, 255, 255, .86);
    border-radius: 8px;
    box-shadow:
        0 36px 90px rgba(0, 59, 113, .3),
        0 18px 42px rgba(33, 37, 41, .18),
        0 4px 12px rgba(33, 37, 41, .12),
        inset 0 1px 0 rgba(255, 255, 255, .75);
    backdrop-filter: blur(12px);
}

.login-v2__eyebrow {
    color: var(--color-secondary);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08rem;
    text-transform: uppercase;
    margin-bottom: .75rem;
}

.login-v2__title {
    color: var(--color-primary);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    margin-bottom: .75rem;
}

.login-v2__hint {
    color: var(--color-text-secondary);
    margin-bottom: 1.75rem;
}

.login-v2__label {
    color: var(--color-text-primary);
    font-size: .875rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.login-v2__input,
.login-v2__password {
    width: 100%;
    min-height: 48px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.login-v2__input {
    padding: .75rem .875rem;
}

.login-v2__password {
    display: flex;
    align-items: center;
}

.login-v2__password .leftInput {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    padding: .75rem .875rem;
    outline: 0;
}

.login-v2__password .rightBtn {
    width: 48px;
    height: 48px;
    border: 0;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.login-v2__input:focus,
.login-v2__password.newFocused {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(11, 95, 165, .15);
    outline: 0;
}

.login-v2__submit,
.login-v2__quick {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 8px;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    transition: background-color .15s ease, transform .15s ease;
}

.login-v2__submit:hover,
.login-v2__quick:hover {
    background: var(--color-secondary);
    transform: translateY(-1px);
}

.login-v2__link,
.login-v2__switch {
    color: var(--color-secondary);
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

.login-v2__link:hover,
.login-v2__switch:hover {
    color: var(--color-primary);
}

.login-v2__security-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: var(--color-primary);
    box-shadow: 0 16px 32px rgba(0, 59, 113, .26);
}

.login-v2__security-icon svg {
    width: 28px;
    height: 32px;
    fill: currentColor;
}

.login-v2__otp-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: .5rem;
    margin: 1.75rem 0 1.25rem;
}

.login-v2__otp-input {
    width: 100%;
    aspect-ratio: 1;
    min-height: 52px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-primary);
    font-family: "Courier Prime", "Courier New", Courier, monospace;
    font-size: 1.35rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.login-v2__otp-input:focus {
    border-color: var(--color-secondary);
    box-shadow: 0 0 0 3px rgba(11, 95, 165, .15);
    outline: 0;
    transform: translateY(-1px);
}

.bind-v2 {
    overflow-y: auto;
}

.bind-v2 .login-v2__shell {
    align-items: center;
}

.bind-v2 .login-v2__panel {
    max-width: 520px;
}

.bind-v2__options {
    display: grid;
    gap: .75rem;
    margin-top: .5rem;
}

.bind-v2__option {
    width: 100%;
    min-height: 76px;
    display: flex;
    align-items: center;
    gap: .875rem;
    padding: .875rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: rgba(255, 255, 255, .9);
    color: var(--color-text-primary);
    text-align: left;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.bind-v2__option:hover,
.bind-v2__option:focus-visible {
    border-color: var(--color-secondary);
    box-shadow: 0 12px 28px rgba(0, 59, 113, .12);
    outline: 0;
    transform: translateY(-1px);
}

.bind-v2__option-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border-radius: 8px;
    background: rgba(0, 59, 113, .08);
    color: var(--color-primary);
    font-size: 1.35rem;
}

.bind-v2__option-copy {
    min-width: 0;
    display: grid;
    gap: .125rem;
}

.bind-v2__option-title {
    color: var(--color-primary);
    font-size: .95rem;
    font-weight: 700;
    line-height: 1.3;
}

.bind-v2__option-text {
    color: var(--color-text-secondary);
    font-size: .8rem;
    font-weight: 400;
    line-height: 1.45;
}

.bind-v2__qr {
    margin-top: 1.25rem;
}

.bind-v2__scan-text {
    margin: 0 0 .875rem;
    color: var(--color-primary);
    font-size: .875rem;
    font-weight: 700;
}

.bind-v2__qr-frame {
    width: min(248px, 100%);
    margin: 0 auto;
    padding: .75rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    box-shadow: 0 12px 28px rgba(0, 59, 113, .12);
}

.bind-v2__qr-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}

.bind-v2__verify {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(0, 59, 113, .12);
}

.bind-v2__verify-hint {
    margin-bottom: 0;
}

.bind-v2__otp-row {
    margin-top: 1rem;
}

.login-v2 ~ .modal {
    --bs-modal-width: min(420px, calc(100vw - 2rem));
}

.modal-backdrop.show {
    opacity: 1;
    background: rgba(0, 59, 113, .36);
    backdrop-filter: blur(4px);
}

.login-v2 ~ .modal.fade .modal-dialog {
    transform: translateY(12px) scale(.98);
    transition: transform .18s ease, opacity .18s ease;
}

.login-v2 ~ .modal.show .modal-dialog {
    transform: none;
}

.login-v2 ~ .modal .modal-content {
    overflow: hidden;
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, .94);
    border: 1px solid rgba(255, 255, 255, .86);
    border-radius: 8px;
    box-shadow:
        0 30px 80px rgba(0, 59, 113, .26),
        0 14px 36px rgba(33, 37, 41, .18),
        0 4px 12px rgba(33, 37, 41, .12),
        inset 0 1px 0 rgba(255, 255, 255, .75);
    backdrop-filter: blur(12px);
}

.login-v2 ~ .modal .modal-header,
.login-v2 ~ .modal .modal-body,
.login-v2 ~ .modal .modal-footer {
    border: 0;
}

.login-v2 ~ .modal .modal-header {
    align-items: flex-start;
    padding: 1.5rem 1.5rem .75rem;
}

.login-v2 ~ .modal .modal-title {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--color-primary);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
}

.login-v2 ~ .modal .modal-title::before {
    content: "!";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--color-accent);
    background: rgba(240, 75, 47, .12);
    font-size: 1rem;
    font-weight: 700;
}

.login-v2 ~ .modal .btn-close {
    position: relative;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 8px;
    opacity: 1;
    background-color: rgba(0, 59, 113, .06);
    background-image: none;
    background-size: .75rem;
    transition: background-color .15s ease, transform .15s ease;
}

.login-v2 ~ .modal .btn-close::before {
    content: "x";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.login-v2 ~ .modal .btn-close:hover {
    background-color: rgba(0, 59, 113, .12);
    transform: translateY(-1px);
}

.login-v2 ~ .modal .modal-body {
    padding: .25rem 1.5rem 1.5rem;
}

.login-v2 ~ .modal #modal-message {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: .95rem;
    line-height: 1.625;
}

.login-v2 ~ .modal .modal-footer {
    justify-content: stretch;
    padding: 0 1.5rem 1.5rem;
}

.login-v2 ~ .modal .modal-footer .btn {
    width: 100%;
    min-height: 44px;
    margin: 0;
    border: 0;
    border-radius: 8px;
    background: var(--color-primary);
    box-shadow: none;
    color: #fff;
    font-weight: 700;
    transition: background-color .15s ease, transform .15s ease;
}

.login-v2 ~ .modal .modal-footer .btn:hover {
    background: var(--color-secondary);
    transform: translateY(-1px);
}

@media (max-width: 991.98px) {
    .login-v2__shell {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .login-v2__form-area {
        grid-column: auto;
    }
}

@media (max-width: 575.98px) {
    .login-v2__background::after {
        background: rgba(255, 255, 255, .4);
    }

    .login-v2__shell {
        padding: 1rem;
        align-items: start;
    }

    .login-v2__brand {
        position: relative;
        top: auto;
        left: auto;
        display: block;
        margin: 1rem 0 1.5rem;
    }

    .login-v2__panel {
        padding: 1.25rem;
    }

    .bind-v2 .login-v2__shell {
        align-items: start;
    }

    .bind-v2__option {
        min-height: 72px;
        padding: .75rem;
    }
}