*{
box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto;
}

body{
margin:0;
height:100vh;
background:#020617;
color:white;

display:flex;
justify-content:center;
align-items:center;

overflow:hidden;
}

/* floating lights */

.orb{
position:absolute;
width:240px;
height:240px;
border-radius:50%;
filter:blur(80px);
opacity:.35;
animation:float 12s infinite ease-in-out;
}

.orb1{background:#6366f1; top:10%; left:10%;}
.orb2{background:#7c3aed; bottom:10%; right:10%; animation-delay:3s;}
.orb3{background:#3b82f6; top:60%; left:60%; animation-delay:6s;}

@keyframes float{
0%{transform:translateY(0)}
50%{transform:translateY(-40px)}
100%{transform:translateY(0)}
}

/* container */

.container{
width:100%;
max-width:340px;
padding:24px;
text-align:center;
position:relative;
z-index:2;
}

/* logo */

.logo{
font-size:42px;
font-weight:700;
margin-bottom:30px;
letter-spacing:.5px;
}

/* form */

form{
display:flex;
flex-direction:column;
gap:14px;
}

/* inputs */

input{
padding:16px;
border-radius:14px;
border:none;
background:#0f172a;
color:white;
font-size:15px;
}

input:focus{
outline:none;
box-shadow:0 0 0 2px #6366f1;
}

/* button */

button{
padding:16px;
border:none;
border-radius:40px;
font-size:16px;
font-weight:600;
cursor:pointer;

background:linear-gradient(135deg,#4f7df3,#7c3aed);

box-shadow:
0 0 30px rgba(99,102,241,.6),
0 10px 40px rgba(124,58,237,.35);

color:white;

transition:.25s;
}

button:hover{
transform:translateY(-2px);
}

/* footer links */

.footer{
margin-top:26px;
color:#94a3b8;
font-size:14px;
}

.footer a{
color:#6366f1;
text-decoration:none;
}

/* username check */

.username-status{
font-size:13px;
height:16px;
text-align:left;
padding-left:4px;
}