.auth-layout{
    display:grid;

    grid-template-columns:1fr 520px;

    min-height:100vh;

    background:var(--bg);
}

/* LEFT */

.auth-left{
    display:flex;

    align-items:center;

    justify-content:center;

    padding:80px;

    background:
        linear-gradient(
            135deg,
            var(--primary),
            var(--primary-dark)
        );

    position:relative;

    overflow:hidden;
}

.auth-left::before{
    content:"";

    position:absolute;

    width:500px;
    height:500px;

    background:rgba(255,255,255,.05);

    border-radius:50%;

    top:-180px;
    left:-180px;
}

.auth-left::after{
    content:"";

    position:absolute;

    width:400px;
    height:400px;

    background:rgba(255,255,255,.04);

    border-radius:50%;

    bottom:-150px;
    right:-120px;
}

.auth-brand{
    position:relative;

    z-index:2;

    max-width:520px;

    color:var(--white);
}

.auth-brand img{
    width:220px;

    margin-bottom:50px;
}

.auth-brand h1{
    font-size:68px;

    line-height:1.1;

    margin-bottom:24px;

    font-weight:700;
}

.auth-brand p{
    font-size:20px;

    line-height:1.8;

    opacity:.9;
}

/* RIGHT */

.auth-right{
    display:flex;

    align-items:center;

    justify-content:center;

    padding:40px;

    min-height:100vh;
}

/* CARD */

.login-card{
    width:100%;

    max-width:420px;

    background:var(--white);

    padding:36px;

    border-radius:24px;

    border:1px solid var(--border);

    box-shadow:
        0 15px 35px rgba(0,0,0,.06);
}
/* HEADER */

.login-header{
    margin-bottom:28px;
}

.login-header h2{
    font-size:32px;

    color:var(--text);

    margin-bottom:10px;

    line-height:1.2;
}

.login-header p{
    color:var(--text-light);

    line-height:1.5;

    font-size:14px;
}

/* FORM */

.form-group input{
    box-sizing:border-box;
}

.form-group label{
    display:block;

    margin-bottom:10px;

    color:var(--text);

    font-size:14px;

    font-weight:700;
}

.form-group input{
    width:100%;

    height:52px;

    padding:0 16px;

    border-radius:14px;

    border:1px solid var(--border);

    background:var(--bg);

    outline:none;

    transition:.2s;

    font-size:14px;
}

.form-group input:focus{
    border-color:var(--primary);

    background:var(--white);

    box-shadow:
        0 0 0 4px var(--primary-soft-hover);
}

.input-error{
    display:block;

    margin-top:8px;

    color:var(--danger);

    font-size:13px;

    font-weight:600;
}

/* BUTTON */

.login-btn{
    width:100%;

    height:54px;

    border:none;

    border-radius:14px;

    background:linear-gradient(
        135deg,
        var(--primary),
        var(--primary-dark)
    );

    color:var(--white);

    font-size:15px;

    font-weight:700;

    cursor:pointer;

    transition:.2s;

    margin-top:4px;
}

.login-btn:hover{
    background:linear-gradient(
        135deg,
        var(--primary-dark),
        color-mix(in srgb,var(--accent) 30%,var(--primary))
    );

    transform:translateY(-2px);

    box-shadow:var(--shadow-md);
}

/* ERROR */

.error-box{
    margin-bottom:24px;

    padding:18px;

    border-radius:14px;

    background:var(--danger-bg);

    border:1px solid var(--danger-border);
}

.error-box h3{
    color:var(--danger);

    margin-bottom:10px;

    font-size:15px;
}

.error-box p{
    color:var(--danger);

    font-size:14px;

    line-height:1.5;
}

/* RESPONSIVE */

@media(max-width:1100px){

    .auth-layout{
        grid-template-columns:1fr;
    }

    .auth-left{
        display:none;
    }

}