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

body{
height:100vh;
overflow:hidden;
display:flex;
justify-content:center;
align-items:center;
background:#050505;
color:#fff;
position:relative;
}

/* Animated Background */

body::before{
content:"";
position:fixed;
inset:0;
background:
radial-gradient(circle at 20% 20%,rgba(0,255,170,.15),transparent 35%),
radial-gradient(circle at 80% 80%,rgba(0,180,255,.12),transparent 35%),
radial-gradient(circle at 50% 50%,rgba(170,0,255,.10),transparent 45%);
animation:bgmove 12s linear infinite alternate;
z-index:-2;
}

@keyframes bgmove{

0%{
transform:scale(1);
}

100%{
transform:scale(1.15);
}

}

/* Grid */

.grid{
position:fixed;
inset:0;
background-image:
linear-gradient(rgba(0,255,120,.05) 1px,transparent 1px),
linear-gradient(90deg,rgba(0,255,120,.05) 1px,transparent 1px);

background-size:40px 40px;

z-index:-1;
}

/* Login Card */

.login-card{

width:430px;

padding:45px;

background:rgba(20,20,20,.72);

backdrop-filter:blur(18px);

border:1px solid rgba(0,255,150,.35);

border-radius:26px;

box-shadow:
0 0 40px rgba(0,255,150,.22);

animation:card 3s ease-in-out infinite;

}

@keyframes card{

0%{
transform:translateY(0);
}

50%{
transform:translateY(-6px);
}

100%{
transform:translateY(0);
}

}
/* Logo */

.logo{

font-size:42px;

font-weight:800;

letter-spacing:3px;

text-align:center;

margin-bottom:8px;

color:#00ff99;

text-shadow:
0 0 10px #00ff99,
0 0 25px #00ff99;

}

.subtitle{

text-align:center;

color:#9aa0a6;

margin-bottom:35px;

font-size:15px;

}

/* Inputs */

.input-group{

margin-bottom:18px;

}

.input-group input{

width:100%;

padding:16px;

border-radius:14px;

border:1px solid rgba(0,255,153,.35);

background:#111;

color:#fff;

font-size:16px;

outline:none;

transition:.3s;

}

.input-group input:focus{

border-color:#00ff99;

box-shadow:0 0 18px rgba(0,255,153,.45);

}

/* Button */

.login-btn{

width:100%;

padding:16px;

border:none;

border-radius:14px;

background:#00ff99;

color:#000;

font-size:17px;

font-weight:bold;

cursor:pointer;

transition:.35s;

}

.login-btn:hover{

transform:translateY(-2px);

box-shadow:
0 0 20px #00ff99,
0 0 40px rgba(0,255,153,.45);

}

/* Status */

.status{

margin-top:30px;

display:flex;

justify-content:space-between;

font-size:13px;

color:#aaa;

}

.online{

color:#00ff99;

font-weight:bold;

}