*{

margin:0;
padding:0;
box-sizing:border-box;

font-family:'Poppins',sans-serif;

}



body{

min-height:100vh;

}



.admin-wrapper{

display:grid;

grid-template-columns:1.2fr 1fr;

min-height:100vh;

}




.admin-brand{


background:

linear-gradient(
rgba(14,92,70,.8),
rgba(16,42,34,.9)
),

url("../images/admin-bg.jpg");


background-size:cover;

background-position:center;


display:flex;

align-items:center;

padding:60px;


color:white;


}





.brand-content img{

width:120px;

margin-bottom:30px;

}





.brand-content h1{

font-size:45px;

}





.brand-content h2{

color:#D6A63A;

font-size:28px;

margin-bottom:20px;

}





.brand-content p{

max-width:450px;

line-height:1.8;

font-size:18px;

}




.features{

margin-top:40px;

display:flex;

flex-direction:column;

gap:20px;

}




.features div{

display:flex;

gap:15px;

align-items:center;

}



.features i{

color:#D6A63A;

}







.login-area{


display:flex;

align-items:center;

justify-content:center;


padding:40px;


background:#f7f8f8;

}




.login-box{


width:100%;

max-width:420px;


}




.welcome{


font-size:13px;

letter-spacing:3px;

color:#D6A63A;

font-weight:700;


}




.login-box h2{

font-size:40px;

color:#102A22;

margin:15px 0;

}





.login-box p{

color:#777;

margin-bottom:40px;

}





.input-box{


display:flex;

align-items:center;

gap:15px;


background:white;

padding:16px;

border-radius:12px;


margin-bottom:20px;


border:1px solid #ddd;

}




.input-box i{

color:#0E5C46;

}




.input-box input{

border:none;

outline:none;

width:100%;

font-size:15px;

}






button{


width:100%;


padding:17px;


border:none;


border-radius:12px;


background:#0E5C46;


color:white;


font-size:16px;


font-weight:600;


cursor:pointer;


transition:.3s;

}



button:hover{

background:#D6A63A;

color:#102A22;

}




.back{


display:block;

text-align:center;

margin-top:30px;

color:#0E5C46;

text-decoration:none;

}





.mobile-logo{

display:none;

}





@media(max-width:900px){


.admin-wrapper{

grid-template-columns:1fr;

}



.admin-brand{

display:none;

}



.mobile-logo{

display:block;

text-align:center;

margin-bottom:30px;

}



.mobile-logo img{

width:90px;

}


}
@media(max-width:480px){


body{

background:#f7f8f8;

}



.login-area{

padding:25px 18px;

}




.login-box h2{

font-size:32px;

}



.login-box p{

font-size:14px;

margin-bottom:30px;

}



.input-box{

padding:14px;

border-radius:10px;

}



button{

padding:15px;

font-size:15px;

}




.welcome{

font-size:11px;

letter-spacing:2px;

}




}


@media(max-width:360px){


.login-box h2{

font-size:28px;

}


.mobile-logo img{

width:75px;

}


.input-box{

padding:12px;

}


}
.login-error{


    background:#fee2e2;

    color:#b91c1c;

    border-left:5px solid #dc2626;

    padding:15px 18px;

    border-radius:12px;

    margin-bottom:20px;

    font-size:14px;

    font-weight:500;

    animation:shake .4s ease;


}



@keyframes shake{


0%{
transform:translateX(0);
}


25%{
transform:translateX(-8px);
}


50%{
transform:translateX(8px);
}


75%{
transform:translateX(-5px);
}


100%{
transform:translateX(0);
}


}
.login-success{


background:#dcfce7;

color:#166534;

border-left:5px solid #16a34a;

padding:15px;

border-radius:12px;

margin-bottom:20px;

font-size:14px;

}