body{
margin:0;
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:#0a0a0a;
font-family:Arial,sans-serif
}

.login-panel{
background:#1a0a3c;
padding:40px;
border-radius:12px;
width:320px;
box-shadow:0 0 20px rgba(166,79,255,.5);
color:#fff
}

.login-panel h2{
text-align:center;
margin-bottom:30px;
color:#a64fff
}

.login-panel input{
width:100%;
padding:10px;
margin-bottom:20px;
border-radius:6px;
border:none;
outline:none;
font-size:16px
}

#loginBtn{
width:100%;
padding:10px;
background:#a64fff;
border:none;
border-radius:6px;
font-size:16px;
font-weight:bold;
color:#fff;
cursor:pointer;
transition:.3s
}

#loginBtn:hover{
background:#8f3fff
}

#status{
text-align:center;
margin-top:10px;
font-weight:bold;
color:#a64fff;
transition:.3s
}

#status.invalid{
color:#ff4f4f;
animation:shake .3s
}

@keyframes shake{
0%{transform:translateX(0)}
25%{transform:translateX(-5px)}
50%{transform:translateX(5px)}
75%{transform:translateX(-5px)}
100%{transform:translateX(0)}
}