.login-layout{

    display:grid;

    grid-template-columns:1fr 520px;

    min-height:100vh;

}

.login-brand{

    display:flex;

    justify-content:center;

    align-items:center;

    padding:70px;

    background:var(--primary-gradient);

}

.brand-content{

    max-width:520px;

}

.brand-logo{

    width:260px;

    margin-bottom:45px;

}

.brand-content h2{

    color:#FFF;

    font-size:2.6rem;

    line-height:1.2;

    margin-bottom:22px;

}

.brand-content p{

    color:rgba(255,255,255,.90);

    font-size:1.15rem;

    line-height:1.8;

}

.login-content{

    display:flex;

    justify-content:center;

    align-items:center;

    background:var(--background);

    padding:40px;

}

.login-card{

    width:100%;

    max-width:460px;

    background:var(--surface);

    border-radius:22px;

    padding:50px;

    box-shadow:var(--shadow);

}

.login-success {
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #eaf8f0;
    color: #176b3a;
    border: 1px solid #b9e5ca;
    font-size: 14px;
    line-height: 1.4;
}

.login-logo{

    display:flex;

    justify-content:center;

    margin-bottom:28px;

}

.login-logo img{

    width:220px;

}

.subtitle{

    text-align:center;

    margin-bottom:35px;

}

.form-group{

    margin-bottom:22px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

}

.remember{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:28px;

}

.remember input{

    width:auto;

    accent-color:var(--primary);

}

.btn{

    margin-top:8px;

}

.forgot{

    display:block;

    text-align:center;

    margin-top:24px;

    color:#D96A36;

    text-decoration:none;

}

.forgot:hover{

    color:#C85A28;

}

.login-error{

    margin-bottom:20px;

    padding:14px;

    border-radius:var(--radius);

    background:rgba(220,38,38,.08);

    color:var(--danger);

    font-size:.95rem;

}


.auth-icon{

    width:72px;
    height:72px;

    margin:0 auto 20px;

    border-radius:50%;

    background:#eefaf8;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--primary);

}

.auth-icon svg{

    width:34px;

    height:34px;

}

.auth-page{
    max-width: 500px;
    margin: 0 auto;
    text-align: center;
    margin-top: 20px;
}

.auth-logo{
    text-align: center;
}

.auth-page h1{
    color: #ee703f;
}

.auth-logo img{
    margin: 0 auto;
}

.auth-page form{
    margin-top: 20px;
}


.password-feedback{

    margin-top:8px;
    min-height:18px;
    font-size:13px;
    transition:.2s;
    min-height:18px;

}

.password-feedback.success{

    color:#1fa971;

}

.password-feedback.error{

    color:#dc3545;

}

button:disabled{

    opacity:.5;

    cursor:not-allowed;

}

@media (max-width:960px){

    .login-layout{

        grid-template-columns:1fr;

    }

    .login-brand{

        display:none;

    }

    .login-content{

        padding:30px;

    }

    .auth-page{
        margin:0px 10px ;
    }

}