*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;
}

body{

height:100vh;

display:flex;

justify-content:center;

align-items:center;

background:linear-gradient(135deg,#eef5ff,#d8e8ff);

}

.login-wrapper{

width:100%;

display:flex;

justify-content:center;

padding:30px;

}

.login-card{

width:430px;

background:#fff;

padding:45px;

border-radius:22px;

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

animation:fade .5s;

}

.logo{

width:82px;

display:block;

margin:auto;

margin-bottom:20px;

}

h1{

text-align:center;

font-size:34px;

margin-bottom:5px;

color:#222;

}

.subtitle{

text-align:center;

color:#777;

margin-bottom:35px;

}

label{

font-weight:600;

display:block;

margin-bottom:8px;

margin-top:15px;

}

.input-box{

position:relative;

}

.input-box i:first-child{

position:absolute;

left:18px;

top:18px;

color:#888;

}

.input-box input{

width:100%;

padding:16px 48px;

border-radius:12px;

border:1px solid #ddd;

font-size:15px;

transition:.2s;

}

.input-box input:focus{

outline:none;

border-color:#2563eb;

box-shadow:0 0 0 4px rgba(37,99,235,.15);

}

.eye{

position:absolute;

right:15px;

top:12px;

background:none;

border:none;

cursor:pointer;

font-size:18px;

color:#666;

}

.login-btn{

width:100%;

margin-top:28px;

padding:15px;

border:none;

border-radius:12px;

background:#2563eb;

color:white;

font-size:17px;

font-weight:bold;

cursor:pointer;

transition:.2s;

}

.login-btn:hover{

background:#1d4ed8;

}

.forgot{

display:block;

margin-top:12px;

text-align:right;

text-decoration:none;

font-size:14px;

color:#2563eb;

}

.footer{

margin-top:30px;

text-align:center;

font-size:13px;

color:#999;

}

.error{

background:#ffe7e7;

color:#c62828;

padding:12px;

border-radius:10px;

margin-bottom:20px;

}

@keyframes fade{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:none;

}

}