.signin-page *,.signin-page :after,.signin-page :before{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',Helvetica,Arial,sans-serif}
.signin-page{position:relative;background:#000 url('../../images/REGISTERPAGE.png') center/cover no-repeat;color:#fff;overflow:hidden;height:100vh;display:flex;flex-direction:column;align-items:center}
.signin-page::before{content:'';position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.4);z-index:0}

.signin-page .comet-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}
.signin-page .comet-particle{position:absolute;border-radius:50%;pointer-events:none;will-change:transform,opacity}
.signin-page a{text-decoration:none;color:inherit}
.signin-page input,.signin-page button{outline:none;font-family:inherit}
.signin-page ::selection{background-color:transparent}

.signin-page .signin-container{position:relative;z-index:1;width:100%;max-width:4.2rem;padding:0 .4rem;display:flex;flex-direction:column;align-items:center;height:100vh;justify-content:center;padding-top:.15rem;padding-bottom:.15rem}

.signin-page .signin-header{width:100%;display:flex;flex-direction:column;align-items:center;margin-bottom:.1rem;flex-shrink:0}
.signin-page .signin-logo{width:3.6rem;height:3.6rem;margin-bottom:0;opacity:.9}
.signin-page .signin-logo img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 .02rem .06rem rgba(0,0,0,.45))}

.signin-page .signin-title{font-size:.48rem;font-weight:900;color:#fff;margin-bottom:0;letter-spacing:-.004em;text-align:center;font-family:'SF Pro Display','Helvetica Neue',Helvetica,Arial,sans-serif;font-style:italic;line-height:1.1;margin-top:-.1rem}
.signin-page .signin-subtitle{font-size:.12rem;color:rgba(255,255,255,.4);text-align:center;font-weight:700;font-style:italic;margin-bottom:0;line-height:1.2;margin-top:0}

.signin-page .signin-title,.signin-page .signin-subtitle{position:relative}
.signin-page .signin-subtitle{margin-top:0}

.signin-page .signin-tabs{display:flex;gap:.06rem;margin-top:.08rem}
.signin-page .signin-tab{height:.3rem;padding:0 .14rem;background:rgba(255,255,255,.08);border:none;border-radius:.06rem;color:rgba(255,255,255,.4);font-size:.1rem;font-weight:500;cursor:pointer;transition:all .3s}
.signin-page .signin-tab:hover{background:rgba(255,255,255,.14);color:rgba(255,255,255,.7)}
.signin-page .signin-tab.active{background:#32c864;color:#000}

.signin-page .signin-form{width:100%;display:flex;flex-direction:column;gap:.15rem;margin-top:.2rem;position:relative}

.signin-page .input-group{position:relative;width:100%;display:flex;align-items:center}

.signin-page .input-field{width:100%;height:.36rem;background:#333;border:none;border-radius:.08rem;padding:0 .12rem;padding-right:.38rem;font-size:.11rem;color:#fff;transition:border-color .3s,background .3s,box-shadow .3s;-webkit-appearance:none;box-shadow:0 .04rem .12rem rgba(0,0,0,.5)}
.signin-page .input-field::placeholder{color:rgba(255,255,255,.25);font-weight:400}
.signin-page .input-field:hover{box-shadow:0 .06rem .16rem rgba(0,0,0,.7)}
.signin-page .input-field:focus{box-shadow:0 .06rem .2rem rgba(0,0,0,.8);outline:none}
.signin-page .input-field.error{border:2px solid rgba(255,80,80,.8)!important;animation:signinShake .4s ease}
.signin-page .input-field.valid{border:2px solid rgba(50,200,100,.5)}

@keyframes signinShake{
    0%,100%{transform:translateX(0)}
    15%{transform:translateX(-6px)}
    30%{transform:translateX(5px)}
    45%{transform:translateX(-4px)}
    60%{transform:translateX(3px)}
    75%{transform:translateX(-2px)}
}

.signin-page .validation-icon{position:absolute;right:.12rem;top:0;transform:translateY(0) scale(0);width:.18rem;height:.36rem;transition:transform .25s cubic-bezier(.34,1.56,.64,1);pointer-events:none;display:flex;align-items:center;justify-content:center}
.signin-page .validation-icon.show{transform:translateY(0) scale(1)}
.signin-page .validation-icon svg{width:100%;height:100%;display:block}

.signin-page .password-toggle{position:absolute;right:.08rem;top:0;transform:translateY(0);width:.28rem;height:.36rem;background:none;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.35);transition:color .2s;padding:0;z-index:2}
.signin-page .password-toggle:hover{color:rgba(255,255,255,.7)}
.signin-page .password-toggle svg{width:.2rem;height:.2rem;display:block}

.signin-page .input-group.has-toggle .input-field{padding-right:.4rem}
.signin-page .input-group.has-toggle .validation-icon{right:.36rem}

.signin-page .forgot-link{display:block;text-align:right;font-size:.09rem;color:rgba(255,255,255,.3);transition:color .2s;margin-top:-.06rem}
.signin-page .forgot-link:hover{color:rgba(255,255,255,.6)}

.signin-page .signin-btn{width:100%;height:.46rem;margin-top:.06rem;background:#32c864;border:none;border-radius:.08rem;color:#000;font-size:.17rem;font-weight:600;cursor:pointer;transition:all .3s;letter-spacing:.01em;box-shadow:0 .04rem .12rem rgba(0,0,0,.5)}
.signin-page .signin-btn:hover{box-shadow:0 .06rem .16rem rgba(0,0,0,.7)}
.signin-page .signin-btn:disabled{background:#1a6632;box-shadow:0 .02rem .06rem rgba(0,0,0,.3);color:rgba(255,255,255,.25);cursor:not-allowed}

.signin-page .signup-link{margin-top:.12rem;font-size:.13rem;color:rgba(255,255,255,.3);text-align:center}
.signin-page .signup-link a{color:rgba(255,255,255,.55);transition:color .2s}
.signin-page .signup-link a:hover{color:#fff}

.signin-page .email-code-group{display:flex;gap:.15rem;align-items:center}
.signin-page .email-code-group .input-field{flex:1}
.signin-page .send-code-btn{height:.36rem;padding:0 .12rem;background:#000;border:none;border-radius:.08rem;color:rgba(255,255,255,.7);font-size:.1rem;font-weight:500;cursor:pointer;transition:all .3s;white-space:nowrap;flex-shrink:0;box-shadow:0 .04rem .12rem rgba(0,0,0,.5)}
.signin-page .send-code-btn:hover{box-shadow:0 .06rem .16rem rgba(0,0,0,.7);color:#fff}
.signin-page .send-code-btn:disabled{background:#000;box-shadow:0 .02rem .06rem rgba(0,0,0,.3);color:rgba(255,255,255,.2);cursor:not-allowed}
.signin-page .send-code-btn.active{background:#32c864;color:#000}
.signin-page .send-code-btn.active:hover{box-shadow:0 .06rem .16rem rgba(0,0,0,.7)}
.signin-page .send-code-btn.active:disabled{background:#1a6632;color:rgba(255,255,255,.25)}

.signin-page .send-tip{font-size:.1rem;color:rgba(50,200,100,.85);text-align:center;margin-top:.04rem;opacity:0;transition:opacity .3s;pointer-events:none}
.signin-page .send-tip.show{opacity:1}

.signin-page .copyright{position:fixed;bottom:.1rem;left:.1rem;font-size:.09rem;color:rgba(255,255,255,.25);z-index:10}

.signin-page .back-link{position:absolute;top:.3rem;left:.3rem;width:.36rem;height:.36rem;background:rgba(0,0,0,.75);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 .04rem .12rem rgba(0,0,0,.5);transition:background .2s,box-shadow .2s;z-index:2}
.signin-page .back-link:hover{background:rgba(0,0,0,.9);box-shadow:0 .06rem .18rem rgba(0,0,0,.7)}
.signin-page .back-link svg{width:.18rem;height:.18rem;color:#fff}

@media(max-width:768px){
    .signin-page .signin-container{max-width:100%;padding:0 .4rem;height:100vh;padding-top:.2rem;padding-bottom:.2rem}
    .signin-page .signin-logo{width:3rem;height:3rem}
    .signin-page .signin-title{font-size:.4rem}
}