*{
    box-sizing:border-box;
}

html,
body{
    min-height:100%;
    margin:0;
}

body{
    font-family:Inter,Arial,sans-serif;
    background:var(--member-login-bg,#10213f);
    color:#10213f;
}

.member-login-page{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    background:
        linear-gradient(
            135deg,
            rgba(0,0,0,.07),
            rgba(255,255,255,.015)
        );
}

.member-login-card{
    width:min(100%,400px);
    background:#fff;
    border-radius:18px;
    padding:28px;
    box-shadow:0 20px 60px rgba(0,0,0,.22);
}

/* ==================================
   FORCE BRANDING TO CENTER
   ================================== */

.member-login-branding{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

.member-login-logo{
    width:100%;
    min-height:82px;

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

    margin:0 auto 13px auto;
    text-align:center;
}

.member-login-logo img{
    display:block;

    width:auto;
    height:auto;

    max-width:180px;
    max-height:82px;

    margin:0 auto;

    object-fit:contain;

    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    padding:0 !important;
}

.member-login-fallback{
    width:56px;
    height:56px;

    border-radius:12px;

    background:#d9b75a;
    color:#10213f;

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

    font-weight:900;

    margin:0 auto;
}

.member-login-branding h1{
    width:100%;
    margin:0 auto 8px auto;

    text-align:center !important;

    color:#10213f;
    font-size:30px;
    line-height:1.2;
}

.member-login-description{
    width:100%;
    max-width:310px;

    margin:0 auto 20px auto;

    text-align:center !important;

    color:#6e7b8f;
    line-height:1.5;
}

/* FORM stays left-aligned */
.member-login-field{
    margin-bottom:14px;
    text-align:left;
}

.member-login-field label{
    display:block;

    margin-bottom:6px;

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

    text-align:left;
}

.member-login-field input{
    width:100%;
    height:44px;

    border:1px solid #ccd6e3;
    border-radius:9px;

    padding:0 11px;

    background:#f8fafc;

    font:inherit;
}

.member-login-field input:focus{
    outline:2px solid rgba(13,110,253,.18);
    border-color:#0d6efd;
}

.member-login-button{
    width:100%;

    border:0;
    border-radius:9px;

    padding:12px;

    background:#10213f;
    color:#fff;

    font-weight:800;
    text-align:center;

    cursor:pointer;
}

.member-login-error{
    background:#fdecec;
    color:#991b1b;

    border-radius:9px;

    padding:10px 12px;
    margin-bottom:13px;

    font-size:12px;
}

.member-login-footer{
    width:100%;

    margin-top:17px;

    text-align:center !important;

    color:#929cab;
    font-size:10px;
}

@media(max-width:520px){
    .member-login-page{
        padding:15px;
    }

    .member-login-card{
        padding:22px;
    }

    .member-login-branding h1{
        font-size:26px;
    }

    .member-login-logo img{
        max-width:155px;
        max-height:72px;
    }
}