body {
        min-height: 100vh;
        background:
            radial-gradient(circle at top left, rgba(13, 110, 253, .16), transparent 34%),
            linear-gradient(135deg, #f8fbff 0%, #eef5ff 48%, #f7fffb 100%);
    }

    .login-page {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 2rem 1rem;
    }

    .login-card {
        width: 100%;
        max-width: 460px;
        border: 0;
        border-radius: 1.25rem;
        box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, .12);
    }

    .brand-icon {
        width: 56px;
        height: 56px;
        border-radius: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #e7f1ff;
        color: #0d6efd;
        font-size: 1.55rem;
    }

    .form-floating > .form-control {
        min-height: 58px;
        border-radius: .9rem;
        border-color: #e5e7eb;
    }

    .form-floating > .form-control:focus {
        border-color: #86b7fe;
        box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .14);
    }

    .password-field .form-control {
        padding-right: 3.25rem;
    }

    .toggle-password {
        position: absolute;
        right: 1rem;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        color: #6c757d;
        z-index: 10;
    }

    .btn-login,
    .btn-thaid {
        min-height: 48px;
        border-radius: .9rem;
    }

    .separator {
        display: flex;
        align-items: center;
        gap: .75rem;
        width: 100%;
        color: #94a3b8;
        font-size: .9rem;
        font-weight: 500;
    }

    .separator::before,
    .separator::after {
        content: "";
        flex: 1;
        height: 1px;
        background: #e5e7eb;
    }