/* H5-first dark fintech auth skin
   PC: centered mobile shell
   H5: full-screen app page
*/
* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    width: 100%;
    min-height: 100%;
    font-size: 13.333333vw;
}

@media (min-width: 750px) {
    html {
        font-size: 55.2px;
    }
}

body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    color: #eef5ff;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
    background:
        radial-gradient(circle at top left, rgba(43, 126, 255, .26), transparent 34%),
        radial-gradient(circle at bottom right, rgba(35, 211, 255, .16), transparent 34%),
        #080d18;
}

p,h1,h2,h3,ul,li {
    padding: 0;
    margin: 0;
}

ul,li {
    list-style: none;
}

button,input {
    font: inherit;
}

button {
    border: 0;
    cursor: pointer;
}

img {
    -webkit-touch-callout: none;
    user-select: none;
}

a {
    color: inherit;
    text-decoration: none;
}

.auth-page {
    min-height: 100vh;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(20, 43, 88, .92) 0%, rgba(8, 13, 24, .98) 46%, #080d18 100%);
}

.auth-shell {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    padding: .28rem .26rem .46rem;
}

.auth-shell:before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(255,255,255,.08) 0 1px, transparent 1px 28px),
        radial-gradient(circle at 70% 16%, rgba(109, 172, 255, .22), transparent 22%),
        radial-gradient(circle at 18% 74%, rgba(63, 231, 255, .12), transparent 24%);
    opacity: .72;
    pointer-events: none;
}

.auth-header,
.hero-card,
.auth-panel,
.fastim-button-container {
    position: relative;
    z-index: 2;
}

.auth-header {
    min-height: 1.55rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding-top: .12rem;
}

.auth-lang {
    width: .72rem;
    height: .72rem;
    border-radius: .26rem;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 .18rem .46rem rgba(0,0,0,.25);
}

.auth-lang img {
    width: .42rem;
    height: .42rem;
    border-radius: 50%;
}

.auth-brand {
    text-align: right;
}

.logo {
    margin-left: auto;
    width: 2.2rem;
    height: .76rem;
    background-image: url('../img/welcome.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center;
}

.auth-brand p {
    margin-top: .08rem;
    color: rgba(238,245,255,.68);
    font-size: .22rem;
    font-weight: 500;
}

.hero-card {
    margin-top: .08rem;
    min-height: 2.62rem;
    border-radius: .34rem;
    padding: .38rem .34rem;
    background:
        linear-gradient(135deg, rgba(83, 140, 255, .96), rgba(65, 214, 255, .62)),
        linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0));
    box-shadow:
        0 .36rem .8rem rgba(0,0,0,.32),
        inset 0 1px 0 rgba(255,255,255,.32);
    overflow: hidden;
}

.hero-card:before {
    content: "";
    position: absolute;
    right: -.55rem;
    top: -.42rem;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    background: rgba(255,255,255,.16);
}

.hero-card:after {
    content: "";
    position: absolute;
    right: .38rem;
    bottom: -.62rem;
    width: 1.8rem;
    height: 1.8rem;
    border: .22rem solid rgba(255,255,255,.14);
    border-radius: 50%;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    height: .48rem;
    padding: 0 .22rem;
    border-radius: .24rem;
    font-size: .22rem;
    font-weight: 700;
    color: #17325f;
    background: rgba(255,255,255,.86);
}

.hero-copy h1 {
    margin-top: .22rem;
    font-size: .56rem;
    line-height: 1.08;
    letter-spacing: -.02rem;
    color: #fff;
    font-weight: 900;
}

.hero-copy p {
    max-width: 4.8rem;
    margin-top: .16rem;
    color: rgba(255,255,255,.82);
    font-size: .24rem;
    line-height: 1.5;
}

.sponsorGroup {
    position: relative;
    z-index: 1;
    margin-top: .26rem;
    width: 3.6rem;
    height: .62rem;
    background-image: url('../img/sponsor.7cad03a5.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left center;
    opacity: .9;
}

.auth-panel {
    margin-top: -.32rem;
    border-radius: .38rem;
    background: rgba(10, 17, 31, .92);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 .4rem 1rem rgba(0,0,0,.42);
    backdrop-filter: blur(18px);
    overflow: hidden;
}

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .12rem;
    padding: .18rem;
    background: rgba(255,255,255,.04);
}

.auth-tab {
    height: .76rem;
    border-radius: .24rem;
    background: transparent;
    color: rgba(238,245,255,.62);
    font-size: .28rem;
    font-weight: 800;
}

.auth-tab.active {
    background: linear-gradient(135deg, #fff, #dbeafe);
    color: #10234a;
    box-shadow: 0 .14rem .32rem rgba(31,113,255,.28);
}

.entryMain {
    width: 200%;
    display: flex;
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
}

.entryMain.loginAnimated {
    transform: translateX(0);
}

.entryMain.registerAnimated {
    transform: translateX(-50%);
}

.formContainer {
    width: 50%;
    padding: .28rem .28rem .34rem;
}

.registerTitle {
    color: #fff;
    font-size: .38rem;
    line-height: 1.3;
    font-weight: 900;
    margin-bottom: .24rem;
}

.inputBox {
    display: flex;
    flex-direction: column;
    gap: .22rem;
}

.inputGroup {
    display: flex;
    align-items: center;
    min-height: .98rem;
    padding: 0 .22rem;
    border-radius: .28rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    transition: border-color .2s, background-color .2s, box-shadow .2s;
}

.inputGroup:focus-within {
    border-color: rgba(90, 164, 255, .8);
    background: rgba(255,255,255,.12);
    box-shadow: 0 0 0 .06rem rgba(90,164,255,.14);
}

.inputIcon {
    width: .42rem;
    height: .42rem;
    flex: 0 0 .42rem;
    margin-right: .18rem;
    border-radius: .14rem;
    background:
        linear-gradient(135deg, rgba(106,181,255,.9), rgba(61,234,255,.74));
    position: relative;
}

.inputIcon:after {
    content: "";
    position: absolute;
    inset: .11rem;
    border-radius: .08rem;
    background: rgba(255,255,255,.82);
    opacity: .9;
}

.passwordIcon:after {
    inset: .13rem .1rem;
    border-radius: .09rem;
}

.phoneIcon:after,
.codeIcon:after,
.inviteIcon:after {
    border-radius: 50%;
}

.inputMain {
    flex: 1;
    min-width: 0;
    position: relative;
}

.inputMain input {
    display: block;
    width: 100%;
    height: .72rem;
    border: 0;
    outline: 0;
    padding: 0;
    background: transparent;
    color: #fff;
    font-size: .28rem;
}

.inputMain input::placeholder {
    color: rgba(238,245,255,.42);
}

.has-toggle input {
    padding-right: .58rem;
}

.toggle-password-icon {
    position: absolute;
    right: 0;
    top: 50%;
    width: .48rem;
    height: .48rem;
    transform: translateY(-50%);
    border-radius: 50%;
    cursor: pointer;
}

.toggle-password-icon:before {
    content: "●";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(238,245,255,.5);
    font-size: .24rem;
}

.toggle-password-icon.active:before {
    content: "◉";
    color: #65d8ff;
}

.inputCaptcha {
    flex: 0 0 1.72rem;
    height: .68rem;
    margin-left: .12rem;
    border-radius: .18rem;
    background: #fff;
    overflow: hidden;
}

.inputCaptcha img {
    width: 100%;
    height: 100%;
    display: block;
}

.captchaGroup {
    display: flex;
    align-items: center;
    gap: .12rem;
}

.captchaGroup input {
    min-width: 0;
}

.sendCaptchaButton {
    flex: 0 0 1.18rem;
    height: .58rem;
    border-radius: .18rem;
    background: linear-gradient(135deg, #54e4ff, #5d7cff);
    color: #fff;
    font-size: .22rem;
    font-weight: 800;
}

.sendCaptchaButton.disabled,
.sendCaptchaButton:disabled {
    background: rgba(255,255,255,.18);
    color: rgba(255,255,255,.5);
}

.otherOperate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: .26rem;
    color: rgba(238,245,255,.68);
    font-size: .24rem;
}

.rememberPwdBox {
    display: inline-flex;
    align-items: center;
    gap: .1rem;
    cursor: pointer;
}

.rememberPwdBox input {
    display: none;
}

.remember-switch {
    width: .36rem;
    height: .36rem;
    border-radius: .12rem;
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.08);
    position: relative;
}

.rememberPwdBox input:checked + .remember-switch {
    background: linear-gradient(135deg, #53dcff, #6c7cff);
    border-color: transparent;
}

.rememberPwdBox input:checked + .remember-switch:after {
    content: "";
    position: absolute;
    left: .1rem;
    top: .06rem;
    width: .1rem;
    height: .18rem;
    border-right: .04rem solid #fff;
    border-bottom: .04rem solid #fff;
    transform: rotate(45deg);
}

.Forget-password {
    background: transparent;
    color: #70d8ff;
    font-size: .24rem;
    font-weight: 700;
}

.btnGroup {
    margin-top: .34rem;
}

.btnGroup button {
    width: 100%;
    height: .96rem;
    border-radius: .28rem;
    color: #fff;
    background: linear-gradient(135deg, #4b7cff, #44dfff);
    font-size: .32rem;
    font-weight: 900;
    box-shadow: 0 .18rem .46rem rgba(65, 138, 255, .34);
}

.visitorBtn {
    margin-top: .22rem;
    text-align: center;
}

.visitorBtn a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.4rem;
    height: .58rem;
    padding: 0 .24rem;
    border-radius: .29rem;
    color: rgba(238,245,255,.62);
    background: rgba(255,255,255,.06);
    font-size: .24rem;
}

.panel-switch {
    width: 100%;
    margin-top: .22rem;
    height: .74rem;
    border-radius: .24rem;
    color: #94dfff;
    font-weight: 800;
    font-size: .24rem;
    background: rgba(112,216,255,.1);
    border: 1px solid rgba(112,216,255,.16);
}

.legacy-lang-select {
    display: none;
}

/* language popup */
.van-overlay {
    position: fixed;
    inset: 0;
    z-index: 2027;
    background: rgba(0,0,0,.62);
}

.van-popup {
    position: fixed;
    left: 50%;
    top: .26rem;
    width: min(92vw, 440px);
    transform: translateX(-50%);
    z-index: 2030;
    padding: .22rem;
    border-radius: .3rem;
    background: rgba(13, 24, 43, .96);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 .32rem .9rem rgba(0,0,0,.4);
}

.languages {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .12rem;
}

.languages .item {
    height: 1.18rem;
    border-radius: .22rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .08rem;
    color: rgba(238,245,255,.68);
    background: rgba(255,255,255,.06);
    cursor: pointer;
}

.languages .item.active {
    background: rgba(87, 145, 255, .22);
    color: #fff;
    outline: 1px solid rgba(117,195,255,.42);
}

.languages .item img {
    width: .46rem;
    height: .46rem;
    border-radius: 50%;
}

.languages .item p {
    font-size: .2rem;
    font-weight: 700;
}

/* floating customer service */
.fastim-button-container {
    position: fixed;
    right: .3rem;
    bottom: .42rem;
    width: .98rem;
    height: .98rem;
    border-radius: 50%;
    z-index: 50;
}

.fastim-button {
    width: .98rem;
    height: .98rem;
    border-radius: 50%;
    box-shadow: 0 .18rem .46rem rgba(0,0,0,.35);
}

.close-button {
    position: absolute;
    top: -.1rem;
    right: -.08rem;
    width: .36rem;
    height: .36rem;
    border-radius: 50%;
    color: #fff;
    background: rgba(0,0,0,.55);
    font-size: .18rem;
}

.fastim-orbit {
    position: absolute;
    inset: -.08rem;
    border-radius: 50%;
    border: 1px solid rgba(89, 213, 255, .55);
    animation: pulse 1.5s infinite;
}

.fastim-point {
    width: .12rem;
    height: .12rem;
    border-radius: 50%;
    background: #54e4ff;
}

@keyframes pulse {
    0% { transform: scale(.94); opacity: .9; }
    100% { transform: scale(1.16); opacity: 0; }
}

@keyframes shake {
    0%,100% { transform: translateX(0); }
    20% { transform: translateX(-.08rem); }
    40% { transform: translateX(.08rem); }
    60% { transform: translateX(-.05rem); }
    80% { transform: translateX(.05rem); }
}

.shake {
    animation: shake .35s;
}

/* PC adaption: show mobile shell */
@media (min-width: 768px) {
    body {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 32px 0;
        background:
            radial-gradient(circle at 18% 12%, rgba(75, 124, 255, .28), transparent 34%),
            radial-gradient(circle at 82% 84%, rgba(68, 223, 255, .18), transparent 32%),
            #060b14;
    }

    .auth-page {
        width: 430px;
        min-height: 820px;
        max-height: calc(100vh - 64px);
        overflow: hidden;
        border-radius: 34px;
        box-shadow:
            0 40px 120px rgba(0,0,0,.55),
            0 0 0 1px rgba(255,255,255,.08);
    }

    .auth-shell {
        min-height: 820px;
        max-height: calc(100vh - 64px);
        overflow-y: auto;
    }

    .fastim-button-container {
        position: absolute;
    }
}

@media (max-width: 360px) {
    .auth-shell {
        padding-left: .2rem;
        padding-right: .2rem;
    }

    .hero-copy h1 {
        font-size: .48rem;
    }

    .formContainer {
        padding-left: .22rem;
        padding-right: .22rem;
    }
}