*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Inter,Arial,sans-serif;
}


body{

height:100vh;
background:
radial-gradient(circle at top,#18234d,#020617 55%);
display:flex;
justify-content:center;
align-items:center;
color:white;

}



.login-container{

width:100%;
text-align:center;

}



.login-card{

width:450px;
margin:auto;
padding:32px;

background:rgba(15,23,42,.85);

border:1px solid rgba(255,255,255,.08);

border-radius:18px;

box-shadow:
0 20px 50px rgba(0,0,0,.4);

}



.logo{

width:55px;
height:55px;
object-fit:contain;
margin-bottom:15px;

}



h1{

font-size:26px;
font-weight:700;
margin-bottom:10px;

}



.subtitle{

font-size:14px;
color:#94a3b8;
margin-bottom:35px;

}



form{

text-align:left;

}



label{

display:block;

font-size:12px;

font-weight:600;

color:#cbd5e1;

margin-bottom:8px;

margin-top:20px;

}



input{

width:100%;

height:50px;

background:#020617;

border:1px solid #1e293b;

border-radius:10px;

padding:0 16px;

color:white;

font-size:14px;

}



input:focus{

outline:none;

border-color:#2563eb;

}



button{

width:100%;

height:52px;

margin-top:35px;

border:none;

border-radius:10px;

background:#ffffff;

color:#0f172a;

font-size:15px;

font-weight:700;

cursor:pointer;

}



button:hover{

background:#e2e8f0;

}



.footer{

margin-top:35px;

font-size:12px;

color:#64748b;

}


.footer a {
    color: #b5b5b5;   /* halka grey */
    text-decoration: none;  /* underline remove */
    font-weight: 500;  /* halka bold */
}



@media(max-width:600px){

.login-card{

width:90%;

}

}