body{
    margin:0;
    font-family:'Segoe UI', sans-serif;
    background:#eef2f7;
}

.main{
    height:100vh;
    display:flex;
}

/* LEFT SIDE */
.left{
    width:50%;
    display:flex;
    flex-direction:column;
}

.left-top{
    flex:1;
    background:url('../lab-img/login.jpg') center/cover;
}

.left-bottom{
    background:#2f55d4;
    color:#fff;
    padding:40px;
}

.left-bottom h2{
    font-weight:600;
}

/* RIGHT SIDE */
.right{
    width:50%;
    background:#f7f9fc;
    display:flex;
    align-items:center;
    justify-content:center;
    position:relative;
}

.login-box{
    width:100%;
    max-width:420px;
    animation:fadeIn 0.7s ease;
}

@keyframes fadeIn{
    from{opacity:0; transform:translateY(20px);}
    to{opacity:1; transform:translateY(0);}
}

.logo{
    font-weight:700;
    color:#2f55d4;
    margin-bottom:10px;
    display:flex;
    align-items:center;
    gap:10px;
}

.form-control{
    height:45px;
    border-radius:8px;
}

.password-box{
    position:relative;
}

.password-box i{
    position:absolute;
    right:15px;
    top:12px;
    cursor:pointer;
}

.btn-primary{
    background:#2f55d4;
    border:none;
    height:45px;
    border-radius:8px;
    font-weight:600;
}

.btn-primary:hover{
    background:#1d3bb3;
}

.dark-toggle{
    position:absolute;
    top:20px;
    right:20px;
    cursor:pointer;
}

/* DARK MODE */
body.dark{
    background:#121212;
}
body.dark .right{
    background:#1e1e1e;
}
body.dark .form-control{
    background:#2a2a2a;
    color:#fff;
    border:none;
}

/* MOBILE */
@media(max-width:768px){
    .main{
        flex-direction:column;
    }
    .left,.right{
        width:100%;
    }
}