@font-face{
    font-family:"Peyda";
    src:url("../fonts/PeydaWeb-Black.woff2") format("woff2"),
        url("../fonts/PeydaWeb-Black.woff") format("woff"),
        url("../fonts/PeydaWeb-Black.ttf") format("truetype"),
        url("../fonts/PeydaWeb-Black.eot") format("embedded-opentype"),
        url("../fonts/PeydaWeb-Black.svg") format("svg");
    font-weight:900;
    font-style:normal;
}

@font-face{
    font-family:"Vazirmatn";
    src:url("../fonts/Vazirmatn-Regular.ttf") format("truetype");
    font-weight:400;
    font-style:normal;
}

body{
direction:rtl;
margin:0;
font-family:'Vazirmatn';
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(135deg,#6a11cb,#2575fc);
overflow:hidden;
}

body, button, input{
    font-family:'Vazirmatn';
}
.bg{
position:absolute;
border-radius:50%;
filter:blur(40px);
opacity:.4;
animation:float 6s infinite ease-in-out;
}

.b1{width:220px;height:220px;background:#ff4ecd;top:10%;left:10%;}
.b2{width:300px;height:300px;background:#00d4ff;bottom:10%;right:10%;}
.b3{width:160px;height:160px;background:#ffd166;top:50%;left:65%;}

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

.auth-box{
width:380px;
padding:22px;
border-radius:18px;
background:rgba(255,255,255,0.12);
backdrop-filter:blur(20px);
color:#fff;
z-index:10;
position:relative;
}

.tabs{
display:flex;
margin-bottom:15px;
}

.tab{
flex:1;
text-align:center;
padding:10px;
cursor:pointer;
border-bottom:2px solid transparent;
}

.tab.active{
border-bottom:2px solid #fff;
}

.form{
display:none;
}

.form.active{
display:block;
}

input{
width:94%;
padding:12px;
margin:7px 0;
border:none;
border-radius:10px;
outline:none;
font-family:Vazirmatn;
}

.input{
position:relative;
}

.input i{
position:absolute;
left:10px;
top:12px;
cursor:pointer;
color:#333;
}

button{
width:100%;
padding:12px;
margin-top:10px;
border:none;
border-radius:10px;
background:#fff;
color:#000;
font-weight:bold;
cursor:pointer;
}

#msg{
margin-bottom:10px;
font-size:13px;
text-align:center;
opacity:.9;
min-height:18px;
}

.link{
text-align:center;
margin-top:10px;
font-size:12px;
cursor:pointer;
opacity:.8;
}

.explosion{
position:fixed;
inset:0;
pointer-events:none;
overflow:hidden;
display:none;
}

.icon{
position:absolute;
width:22px;
height:22px;
animation:burst 3s linear forwards;
opacity:0.9;
}

@keyframes burst{
0%{transform:translate(0,0) scale(1);opacity:1}
100%{transform:translate(var(--x),var(--y)) scale(.2);opacity:0}
}