/*login.css */

        .login-card {
            overflow: hidden;
        }

        .login-logo-wrap {
            width: 100%;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: .75rem 0 .35rem 0;
        }

        .login-logo-wrap a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 100%;
        }

        .login-logo-wrap img {
            display: block;
            max-width: 240px;
            width: 100%;
            height: auto;
            margin: 0 auto;
        }

        .login-title {
            color: #2f3b52;
            letter-spacing: -.02em;
        }

        .login-tabs.nav-tabs {
            border-bottom: 1px solid #ebeef3;
            margin-bottom: 1.5rem;
        }

        .login-tabs .nav-link {
            border: 0;
            border-bottom: 2px solid transparent;
            border-radius: 0;
            color: #7a8291;
            font-weight: 600;
            padding: .9rem .75rem;
            background: transparent;
        }

        .login-tabs .nav-link:hover {
            color: #4e73df;
        }

        .login-tabs .nav-link.active {
            color: #4e73df;
            background: transparent;
            border-bottom-color: #4e73df;
        }

        .login-subtle {
            font-size: .86rem;
            color: #7d8797;
            line-height: 1.55;
        }

        .login-form-card {
            border: 1px solid #edf0f5;
            border-radius: .85rem;
            background: #fff;
            padding: 1rem;
        }

        .code-login-shell {
            background: linear-gradient(180deg, #fcfbfd 0%, #ffffff 100%);
            border: 1px solid #ece7ef;
            border-radius: 1rem;
            padding: 1rem;
        }

        .code-login-badge {
            width: 52px;
            height: 52px;
            margin: 0 auto 1rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(178, 59, 127, 0.10);
            color: #b23b7f;
            font-size: 1.15rem;
        }

        .code-login-title {
            text-align: center;
            font-weight: 700;
            color: #344054;
            margin-bottom: .35rem;
        }

        .code-login-text {
            text-align: center;
            font-size: .88rem;
            color: #7a8291;
            line-height: 1.55;
            margin-bottom: 1.25rem;
        }

        .code-step {
            font-size: .73rem;
            font-weight: 700;
            color: #b23b7f;
            text-transform: uppercase;
            letter-spacing: .08em;
            margin-bottom: .55rem;
        }

        .soft-divider {
            border-top: 1px dashed #e6e9ef;
            margin: 1.25rem 0;
        }

        .otp-input {
            text-align: center;
            letter-spacing: .38em;
            font-size: 1.35rem;
            font-weight: 700;
            color: #2f3b52;
            padding-left: 1.05rem !important;
        }

        .otp-input::placeholder {
            letter-spacing: .25em;
            color: #b8bfca;
            font-weight: 600;
        }

        .btn-lhps-outline {
            border-color: #b23b7f;
            color: #b23b7f;
            font-weight: 600;
        }

        .btn-lhps-outline:hover,
        .btn-lhps-outline:focus {
            background: #b23b7f;
            border-color: #b23b7f;
            color: #fff;
        }

        .btn-lhps-solid {
            background: linear-gradient(135deg, #b23b7f 0%, #8f2d66 100%);
            border: 0;
            color: #fff;
            font-weight: 600;
            box-shadow: 0 8px 18px rgba(178, 59, 127, 0.18);
        }

        .btn-lhps-solid:hover,
        .btn-lhps-solid:focus {
            color: #fff;
            opacity: .96;
        }

        .helper-chip {
            display: inline-flex;
            align-items: center;
            padding: .35rem .6rem;
            border-radius: 999px;
            background: #f6f7fb;
            color: #667085;
            font-size: .76rem;
            font-weight: 600;
            margin-top: .85rem;
        }

        .helper-chip i {
            margin-right: .35rem;
        }

        .small-link-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: .75rem;
            flex-wrap: wrap;
        }

        @media (max-width: 575.98px) {
            .login-tabs .nav-link {
                font-size: .9rem;
                padding: .8rem .45rem;
            }

            .otp-input {
                font-size: 1.15rem;
                letter-spacing: .28em;
            }
        }

        .otp-email-sent-actions {
            margin-top: .55rem;
        }

        .otp-change-email-link {
            color: #b23b7f;
            font-weight: 600;
            text-decoration: none;
        }

        .otp-change-email-link:hover,
        .otp-change-email-link:focus {
            color: #8f2d66;
            text-decoration: underline;
        }

        .auth-links {
            display: flex;
            flex-direction: column;
            gap: 0;
            margin-top: 1rem;
            border-top: 1px dashed #e6e9ef;
        }

        .auth-link-item {
            padding-top: .2rem;
        }

        .auth-link-item a {
            color: #4e73df;
            font-weight: 500;
            text-decoration: none;
        }

        .auth-link-item + .auth-link-item {
            border-top: 1px dashed #e6e9ef;
            padding-top: .8rem;
        }

        .otp-send-btn[disabled] {
            opacity: .9;
            cursor: not-allowed;
        }

        .otp-send-btn-loading {
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }