body{

margin:0;

font-family:Segoe UI,sans-serif;

background:
linear-gradient(
135deg,
#0d47a1,
#2b6ee5
);

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

}



.login-container{

width:100%;

padding:20px;

}



.login-box{

max-width:420px;

margin:auto;

background:white;

padding:45px;

border-radius:30px;

box-shadow:
0 15px 45px rgba(0,0,0,.15);

text-align:center;

}



.login-logo{

width:120px;

margin-bottom:20px;

}



.login-box h1{

margin-bottom:10px;

color:#0d47a1;

}



.login-box p{

color:#777;

margin-bottom:30px;

}



.login-box form{

display:flex;

flex-direction:column;

gap:18px;

}



.login-box input{

padding:16px;

border:1px solid #ddd;

border-radius:12px;

outline:none;

}



.login-box button{

padding:16px;

border:none;

border-radius:12px;

background:#0d47a1;

color:white;

font-size:16px;

font-weight:bold;

cursor:pointer;

}



.login-box button:hover{

opacity:.9;

}



.error{

background:#ffe5e5;

color:#cc0000;

padding:15px;

margin-bottom:20px;

border-radius:10px;

}

@media(max-width:520px){

.login-container{

padding:16px;

}

.login-box{

padding:32px 22px;

border-radius:20px;

}

.login-logo{

width:96px;

}

}