.member-auth-page{
    min-height:calc(100vh - 78px);
    display:grid;
    place-items:center;
    padding:58px 16px 80px;
    background:
        radial-gradient(circle at 25% 15%,rgba(255,68,93,.08),transparent 30%),
        radial-gradient(circle at 82% 10%,rgba(108,114,255,.11),transparent 26%);
}

.member-auth-card{
    width:min(560px,100%);
    padding:34px;
    border:1px solid var(--line);
    border-radius:26px;
    background:linear-gradient(180deg,rgba(23,31,52,.98),rgba(12,18,31,.99));
    box-shadow:0 32px 100px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.025);
}

.member-auth-heading>span{
    color:#ff7d8f;
    font-size:11px;
    font-weight:700;
    letter-spacing:.13em;
}

.member-auth-heading h1{
    margin:7px 0 7px;
    font-size:38px;
    letter-spacing:-.035em;
}

.member-auth-heading p{
    margin:0 0 24px;
    color:var(--muted);
}

.member-email-form label{
    display:block;
    margin-bottom:7px;
    font-size:13px;
    font-weight:600;
}

.member-email-form input{
    width:100%;
    height:50px;
    padding:0 14px;
    border:1px solid var(--line);
    border-radius:14px;
    outline:none;
    background:#090f19;
    color:#fff;
    margin-bottom:14px;
}

.member-email-form input:focus,
.member-otp-digit:focus{
    border-color:rgba(255,68,93,.75);
    box-shadow:0 0 0 4px rgba(255,68,93,.08);
}

.member-primary{
    width:100%;
    min-height:50px;
    border:0;
    border-radius:14px;
    background:linear-gradient(135deg,var(--red),var(--red2));
    color:#fff;
    font-weight:700;
    cursor:pointer;
}

.member-primary:disabled{
    opacity:.65;
    cursor:not-allowed;
}

.member-email-form small{
    display:block;
    margin-top:9px;
    text-align:center;
    color:var(--muted);
    font-size:11px;
}

.auth-divider{
    position:relative;
    margin:25px 0;
    text-align:center;
}

.auth-divider::before{
    content:"";
    position:absolute;
    top:50%;
    left:0;
    right:0;
    height:1px;
    background:var(--line);
}

.auth-divider span{
    position:relative;
    z-index:1;
    padding:0 12px;
    background:#111827;
    color:var(--muted);
    font-size:12px;
}

.social-auth-list{
    display:grid;
    grid-template-columns:1fr;
    gap:12px;
    width:100%;
}

.social-auth-list--two{
    grid-template-columns:1fr;
}

.member-auth-card .social-login{
    position:relative;
    width:100%;
    min-height:58px;
    padding:0 18px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:14px;
    font-weight:800;
    font-size:15px;
    line-height:1.2;
    text-decoration:none;
    overflow:hidden;
    isolation:isolate;
    transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease;
}

.member-auth-card .social-login::after{
    content:"›";
    margin-left:auto;
    font-size:24px;
    font-weight:500;
    line-height:1;
    opacity:.42;
    transform:translateY(-1px);
}

.member-auth-card .social-login:hover{
    transform:translateY(-2px);
}

.member-auth-card .social-login:active{
    transform:translateY(0) scale(.995);
}

.member-auth-card .social-login__icon{
    flex:0 0 36px;
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    border-radius:11px;
    font-size:18px;
    font-weight:900;
    line-height:1;
}

.member-auth-card .social-login__icon--google{
    background:#fff;
    color:#4285f4;
    border:1px solid #e5e7eb;
    box-shadow:0 2px 8px rgba(0,0,0,.10);
}

.member-auth-card .social-login__icon--line{
    color:#06c755;
    background:#fff;
    border:1px solid rgba(255,255,255,.45);
    box-shadow:0 2px 8px rgba(0,0,0,.10);
}

.member-auth-card .social-login__icon--line svg{
    width:30px;
    height:30px;
    display:block;
}

.member-auth-card .social-login__label{
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:left;
    letter-spacing:-.01em;
}

.member-auth-card .social-login.google{
    background:linear-gradient(180deg,#ffffff 0%,#f7f9fc 100%);
    color:#16181d;
    border:1px solid #e5e7eb;
    box-shadow:0 10px 24px rgba(0,0,0,.16);
}

.member-auth-card .social-login.google:hover{
    border-color:#cfd5dd;
    box-shadow:0 14px 30px rgba(0,0,0,.20);
}

.member-auth-card .social-login.line{
    background:linear-gradient(135deg,#06c755 0%,#05b84e 100%);
    color:#fff;
    border:1px solid rgba(255,255,255,.10);
    box-shadow:0 12px 28px rgba(6,199,85,.22);
}

.member-auth-card .social-login.line:hover{
    box-shadow:0 16px 34px rgba(6,199,85,.29);
}

.register-callout{
    margin-top:24px;
    padding-top:20px;
    border-top:1px solid var(--line);
    display:flex;
    justify-content:center;
    gap:6px;
    color:var(--muted);
    font-size:14px;
}

.register-callout a{
    color:#ff7f8e;
    font-weight:700;
}

.name-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.otp-notice{
    margin:3px 0 18px;
    padding:13px 14px;
    border:1px solid rgba(108,114,255,.2);
    border-radius:13px;
    background:rgba(108,114,255,.07);
}

.otp-notice strong,
.otp-notice span{
    display:block;
}

.otp-notice strong{
    font-size:13px;
}

.otp-notice span{
    margin-top:3px;
    color:var(--muted);
    font-size:12px;
    line-height:1.6;
}

.member-alert{
    padding:12px 14px;
    margin-bottom:16px;
    border-radius:13px;
    font-size:13px;
}

.member-alert.error{
    background:rgba(255,68,93,.11);
    border:1px solid rgba(255,68,93,.3);
}

.member-alert.success{
    background:rgba(49,211,143,.1);
    border:1px solid rgba(49,211,143,.28);
}

.member-otp-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:4px;
    margin:24px 0 20px;
}

.member-otp-row>span{
    color:#526077;
}

.member-otp-digit{
    width:53px;
    height:62px;
    border:1px solid var(--line);
    border-radius:14px;
    outline:none;
    text-align:center;
    background:#080e17;
    color:#fff;
    font-size:25px;
    font-weight:700;
}

.member-resend{
    margin-top:13px;
    text-align:center;
}

.member-resend button{
    width:100%;
    min-height:46px;
    border:0;
    border-radius:13px;
    background:#222d41;
    color:#fff;
    font-weight:700;
    cursor:pointer;
}

.member-resend small{
    display:block;
    color:var(--muted);
    font-size:11px;
    margin-top:8px;
}

@media(max-width:650px){
    .member-auth-page{
        padding:30px 12px 54px;
        place-items:start center;
    }

    .member-auth-card{
        padding:22px 16px;
        border-radius:18px;
    }

    .member-auth-heading h1{
        font-size:31px;
    }

    .social-auth-list--two{
        grid-template-columns:1fr;
    }

    .name-grid{
        grid-template-columns:1fr;
        gap:0;
    }

    .member-otp-digit{
        width:43px;
        height:55px;
        border-radius:11px;
        font-size:21px;
    }
}