*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    min-height:100vh;
    font-family:
        "Segoe UI",
        sans-serif;
}

.auth-wrapper{
    min-height:100vh;
    display:flex;
}

.auth-left{
    flex:1;
    background:
        linear-gradient(
            135deg,
            #0f172a,
            #1e293b,
            #312e81
        );

    color:white;

    position:relative;

    overflow:hidden;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:60px;
}

.brand-content{
    max-width:500px;
    z-index:2;
}

.brand-logo{
    font-size:2rem;
    font-weight:700;
    margin-bottom:30px;
}

.brand-content h1{
    font-size:4rem;
    font-weight:800;
    line-height:1.1;
    margin-bottom:20px;
}

.brand-content p{
    font-size:1.15rem;
    opacity:.9;
}

.glow{
    position:absolute;
    border-radius:50%;
    filter:blur(100px);
}

.glow-1{
    width:300px;
    height:300px;

    background:#4f46e5;

    top:-50px;
    left:-50px;
}

.glow-2{
    width:250px;
    height:250px;

    background:#9333ea;

    bottom:-50px;
    right:-50px;
}

.auth-right{
    flex:1;
    background:#f8fafc;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:30px;
}

.auth-card{
    width:100%;
    max-width:500px;

    background:white;

    border-radius:30px;

    padding:40px;

    box-shadow:
        0 20px 60px
        rgba(0,0,0,.08);
}

.auth-title{
    text-align:center;
    margin-bottom:10px;

    font-weight:700;
}

.auth-subtitle{
    text-align:center;
    color:#64748b;
    margin-bottom:30px;
}

.auth-input{
    height:55px;
    border-radius:14px;
}

.auth-btn{
    height:55px;
    border-radius:14px;
    font-weight:600;
}

.google-btn{
    height:55px;
    border-radius:14px;
    font-weight:600;
}

.divider{
    display:flex;
    align-items:center;
    margin:25px 0;
}

.divider::before,
.divider::after{
    content:'';
    flex:1;
    height:1px;
    background:#e2e8f0;
}

.divider span{
    padding:0 15px;
    color:#64748b;
    font-size:.9rem;
}

.password-wrapper{
    position:relative;
}

.password-toggle{
    position:absolute;

    top:50%;
    right:18px;

    transform:
        translateY(-50%);

    cursor:pointer;

    color:#64748b;
}

.auth-links{
    text-align:center;
    margin-top:20px;
}

.auth-links a{
    text-decoration:none;
}

@media(max-width:991px){

    .auth-wrapper{
        flex-direction:column;
    }

    .auth-left{
        min-height:250px;
        text-align:center;
    }

    .brand-content h1{
        font-size:2.5rem;
    }

    .back-home-btn{
        top: 20px;
        left: 20px;
    }

}

@media(max-width:576px){

    .auth-right{
        padding:20px;
    }

    .auth-card{
        padding:25px;
        border-radius:20px;
    }

    .brand-content h1{
        font-size:2rem;
    }

}

.back-home-btn{

    position:absolute;

    top:30px;
    left:30px;

    z-index:100;

    color:white;

    text-decoration:none;

    font-weight:600;

    display:flex;

    align-items:center;

    gap:8px;

    transition:.3s;
}

.back-home-btn:hover{

    color:#cbd5e1;

    transform:translateX(-3px);
}