*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial;
}

body{

background:black;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
color:white;
overflow-x:none;

}

/*.login-top{width:400px;height:225px;background:url(/static/123/login.webp);*/
/*background-size:100% 100%;*/
/*box-sizing:border-box;*/
/*text-align:center;*/
/*margin:0 auto;*/
/*position:relative;*/
/*margin-top:15px}*/
/*.logo{width:80px;height:67px;background:url(/static/123/logo.gif);*/
/*background-size:100% 100%;margin-top:20px}.login-tab[data-v-3f7d6012]{margin:0 auto;width:300px;height:50px;border:1px solid transparent;background-clip:padding-box,border-box;background-origin:padding-box,border-box;background-image:linear-gradient(90deg,#030303,#1f1e1e),linear-gradient(90deg,#39ddbb,#745fc9);border-radius:15px;display:flex;align-items:center;justify-content:space-between;padding:0 5px;box-sizing:border-box;margin-bottom:25px;-webkit-animation:mymove1-data-v-3f7d6012 5s infinite;animation:mymove1-data-v-3f7d6012 5s infinite;margin-top:20px}.login-tab .login-tab-i[data-v-3f7d6012]{width:150px;height:40px;text-align:center;line-height:40px;color:#505050;font-size:17px}.login-tab .login-tab-i.active[data-v-3f7d6012]{color:#fff;background-image:url(/static/123/grab_bl.webp);background-size:100% 100%}*/

.logo img{
height:35px;
}
.container{
width:360px;
text-align:center;
padding:10px;
/*margin-top:30%;*/
margin-top: 60px;
    font-size: 14px;
}


.welcome{
margin-bottom:20px;
font-weight:500;
}


/* SWITCH BUTTON */

.switch{

display:flex;
border-radius:25px;
overflow:hidden;
margin-bottom:20px;

border:2px solid transparent;

background:
linear-gradient(#050505,#050505) padding-box,
linear-gradient(120deg,#00f7ff,#8f00ff,#00f7ff) border-box;

animation:borderGlow 4s linear infinite;
}

.switch button{

flex:1;
padding:10px;
background:transparent;
border:none;
color:#aaa;
cursor:pointer;
}

.switch .active{

background:linear-gradient(90deg,#00f7ff,#00ffb7);
color:black;
font-weight:bold;

}


/* LOGIN BOX */

.login-box{

padding:25px;
border-radius:15px;

border:2px solid transparent;

background:
linear-gradient(#0a0a0a,#0a0a0a) padding-box,
linear-gradient(120deg,#00f7ff,#8f00ff,#00f7ff) border-box;

animation:borderGlow 4s linear infinite;

}


/* HEADER */

.header{

display:flex;
justify-content:space-between;
margin-bottom:20px;
font-size:14px;

}

.header a{

color:#00f7ff;
text-decoration:none;

}


/* INPUT */

.input-group{

text-align:left;
margin-bottom:18px;

}

.input-group label{

font-size:13px;
color:#00f7ff;
margin-bottom:4px;
display:block;

}

.input-group input{

width:100%;
padding:10px;
border:none;
border-bottom:1px solid #333;
background:transparent;
color:white;
outline:none;

}


/* PASSWORD ICON */

.password-box{

position:relative;

}

.password-box i{

position:absolute;
right:10px;
top:35px;
cursor:pointer;
color:#00f7ff;

}


/* OPTIONS */

.options{

display:flex;
justify-content:space-between;
font-size:12px;
margin-bottom:25px;

}

.options a{

color:#00f7ff;
text-decoration:none;

}


/* LOGIN BUTTON */

.login-btn{
display:flex;
justify-content:center;
align-items:center;
width:55px;
height:55px;

border-radius:50%;
border:none;

margin:20px auto 0;
display:block;

cursor:pointer;
font-size:20px;
color:white;

background:linear-gradient(135deg,#00f7ff,#008cff);

box-shadow:0 0 15px #00f7ff;

transition:0.3s;

}

.login-btn:hover{

box-shadow:
0 0 20px #00f7ff,
0 0 40px #00f7ff,
0 0 60px #00f7ff;

transform:scale(1.1);

}


/* BORDER ANIMATION */

@keyframes borderGlow{

0%{

background:
linear-gradient(#0a0a0a,#0a0a0a) padding-box,
linear-gradient(0deg,#00f7ff,#8f00ff,#00f7ff) border-box;

}

100%{

background:
linear-gradient(#0a0a0a,#0a0a0a) padding-box,
linear-gradient(360deg,#00f7ff,#8f00ff,#00f7ff) border-box;

}

}


/* FOOTER */

.copyright{

margin-top:25px;
font-size:12px;
color:#777;

}