body{

margin:0;

min-height:100vh;

background:
linear-gradient(
135deg,
#2563eb,
#9333ea
);

font-family:'Segoe UI',sans-serif;

display:flex;

flex-direction:column;

}


.login-container{

flex:1;

display:flex;

align-items:center;

justify-content:center;

}



.login-card{


width:400px;

background:white;

padding:35px;

border-radius:20px;


box-shadow:
0 20px 40px rgba(0,0,0,.2);


}



.logo-area{

text-align:center;

margin-bottom:25px;

}


.logo-area h1{

margin:0;

font-size:32px;

color:#2563eb;

}



.logo-area p{

color:#64748b;

}



.login-card h2{

text-align:center;

margin-bottom:5px;

}



.subtitle{

text-align:center;

color:#64748b;

margin-bottom:25px;

}




.input-group{

position:relative;

margin-bottom:20px;

}



.input-group input{


width:100%;

padding:14px 45px;

border-radius:10px;

border:1px solid #ddd;

font-size:15px;

}



.input-group input:focus{

outline:none;

border-color:#2563eb;

}




.input-group i{

position:absolute;

left:15px;

top:15px;

color:#64748b;

}




.show-password{

position:absolute;

right:15px;

top:15px;

cursor:pointer;

}




.login-options{

display:flex;

justify-content:space-between;

font-size:14px;

margin-bottom:20px;

}


.login-options a{

text-decoration:none;

color:#2563eb;

}



.login-btn{


width:100%;

padding:14px;

border:none;

border-radius:10px;

background:#2563eb;

color:white;

font-size:17px;

cursor:pointer;

}



.login-btn:hover{

background:#1d4ed8;

}



.error{

margin-top:15px;

background:#fee2e2;

color:#b91c1c;

padding:12px;

border-radius:8px;

text-align:center;

}



footer{

background:rgba(0,0,0,.2);

color:white;

text-align:center;

padding:15px;

font-size:14px;

}