*{

box-sizing:border-box;

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

}



body{

margin:0;

height:100vh;

display:flex;

justify-content:center;

align-items:center;


background:

linear-gradient(
rgba(0,10,30,.85),
rgba(0,10,30,.9)
),

url('../images/cyber-bg.jpg');


background-size:cover;

background-position:center;


color:white;

}



.login-container{


width:420px;


padding:40px;


background:

rgba(255,255,255,.08);



border:

1px solid rgba(255,255,255,.2);



border-radius:25px;



backdrop-filter:blur(15px);



box-shadow:


0 0 40px rgba(0,200,255,.5);



}



.logo-security{


text-align:center;


font-size:70px;


filter:

drop-shadow(0 0 20px cyan);


}



h1{


text-align:center;


font-size:28px;


letter-spacing:4px;


color:#00d9ff;


margin:10px 0;


}



.subtitle{


text-align:center;


color:#ddd;


font-size:14px;


letter-spacing:2px;


margin-bottom:35px;


}





.input-box{


display:flex;


align-items:center;


background:

rgba(255,255,255,.15);


border-radius:12px;


margin-bottom:20px;


padding:12px;


}



.input-box span{


font-size:20px;


margin-right:10px;


}



.input-box input{


background:none;


border:none;


outline:none;


color:white;


width:100%;


font-size:15px;


}



.input-box input::placeholder{


color:#ddd;


}




.show-pass{


background:none;


border:none;


cursor:pointer;


color:white;


}



.remember{


display:flex;


justify-content:space-between;


font-size:13px;


margin-bottom:25px;


}



.remember a{


color:#00d9ff;


text-decoration:none;


}



.login-btn{


width:100%;


padding:14px;


border:none;


border-radius:10px;



background:

linear-gradient(
90deg,
#00c6ff,
#0072ff
);



color:white;


font-size:16px;


font-weight:bold;


cursor:pointer;



box-shadow:

0 0 25px rgba(0,200,255,.8);



transition:.3s;


}



.login-btn:hover{


transform:scale(1.03);


}




.system-status{


margin-top:30px;


padding-top:20px;


border-top:

1px solid rgba(255,255,255,.2);



font-size:12px;


line-height:2;


color:#00ff99;


}




@media(max-width:500px){


.login-container{


width:90%;


padding:30px;


}


}