:root {
    --title-color: rgba(0,0,0,1);
    --ad-gradient-start: rgba(255,243,231,1);
    --ad-gradient-end: rgba(192,240,253,1);
    --login-form-bg: rgba(255,255,255,1);
    --nav-link-active: rgba(0,76,161,1);
    --nav-link-color: rgba(0,0,0,.5);
    --tab-active-gradient-start: rgba(130,190,248,1);
    --tab-active-gradient-end: rgba(40,110,233,1);
    --btn-primary-bg: rgba(0,76,161,1);
    --btn-primary-color: rgba(255,255,255,1);
    --btn-primary-hover-bg: rgba(6,50,90,1);
    --btn-outline-border: rgba(206,212,218,1);
    --useragree-color: rgba(255,77,79,1);
    --useragree-hover: rgba(191,52,10,1);
    --smscode-border: rgba(206,212,218,1);
    --border-right: rgba(220,241,243,1);
    --loginad-image: url('../img/appalliconbg.png');
}

@media (prefers-color-scheme: dark) {
    .appicon {
        content: url(../img/appdarkallicon.png);
    }

    :root {
        --title-color: rgba(255,255,255,.7);
        --ad-gradient-start: rgba(60,70,80,.8);
        --ad-gradient-end: rgba(0,0,0,.9);
        --login-form-bg: rgba(18, 22, 30, .95);
        --nav-link-active: rgba(130, 180, 255, 1);
        --nav-link-color: rgba(200, 210, 230, .7);
        --tab-active-gradient-start: rgba(90, 150, 255, .9); /* 亮蓝 */
        --tab-active-gradient-end: rgba(130, 100, 255, .9); /* 紫蓝色 */
        /* 主要按钮 */
        --btn-primary-bg: rgba(50, 100, 200, .9); /* 中等亮度蓝色 */
        --btn-primary-color: rgba(255, 255, 255, 1); /* 纯白文字 */
        --btn-primary-hover-bg: rgba(70, 130, 240, 1); /* 更亮的悬停蓝色 */
        /* 边框与分割线 */
        --btn-outline-border: rgba(70, 80, 100, .8); /* 深灰蓝边框 */
        --smscode-border: rgba(70, 80, 100, .8); /* 同样用于验证码分割线 */
        --border-right: rgba(60, 60, 60, 1); /* 广告区右边框 - 半透明 */
        /* 用户协议提示 - 柔和的红色系 */
        --useragree-color: rgba(255, 130, 130, .9); /* 柔和的浅红色 */
        --useragree-hover: rgba(255, 160, 160, 1); /* 更亮的悬停红色 */
        --bs-dark-rgb: rgba(255, 255, 255, .7);
        --headermenu-hover-bg: rgba(255, 255, 225, .2);
        --headermenu-hover-color: rgba(255, 255, 225, 1);
        --header-color-hover: rgba(255, 255, 225);
        --headerlayout-bottom-color: rgba(255, 255, 225, .3);
        --headermenu-color: rgba(255,255,255,.7);
        --loginad-image: url('../img/appdarkalliconbg.png');
    }

    .btn-outline-primary {
        --btn-outline-border: rgba(160, 160, 160, .8);
        color: var(--title-color);
    }

    .text-decoration-none {
        color: var(--nav-link-color);
    }

        .text-decoration-none:hover {
            color: var(--nav-link-active);
        }
}

.card {
    background-color: transparent !important;
}

/* AD */
.login-ad {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 50%;
    background: linear-gradient(339deg, var(--ad-gradient-start) 10%, var(--ad-gradient-end) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--border-right);
}

.loginad {
    width: clamp(1rem,100%,29.375rem);
    content: var(--loginad-image);
}

.login-form {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 50%;
    /*    padding-left: clamp(1rem, 16.667vw, 20rem);*/
    z-index: 1;
    display: flex;
    background: var(--login-form-bg);
    flex-direction: row;
    justify-content: center;
    min-width: 20.625rem; /* 330px → 20.625rem (330/16=20.625) */
}

    .login-form .col {
        min-width: .5rem
    }

    .login-form h1 {
        font-size: 2.125rem;
        font-weight: bold;
        margin: 1.2rem 0;
        color:var(--title-color);
    }

.languageslect {
    margin-right: 1rem
}

/* 品牌区 */
.auth-header {
    position: absolute;
    top: 1rem;
    right: 1rem;
    align-items: center;
    z-index: 10;
    display: flex
}

@media (max-width: 37.5rem) { /* 600px → 37.5rem (600/16=37.5) */
    .auth-header .appicon {
        content: url(../img/icon.png);
        width: 2rem; /* 32px → 2rem (32/16=2) */
        height: 2rem; /* 32px → 2rem */
    }
}

/* 卡片内容样式 */
.tab-pane {
    display: none;
}

    .tab-pane.active {
        display: block
    }

.login-card {
    border: transparent;
    justify-content: center;
    min-width: 20rem; /* 320px → 20rem (320/16=20) */
}

.nav-tabs .nav-link.active {
    color: var(--nav-link-active);
    border-color: transparent;
    background-color: transparent;
    font-weight: bold;
}

.nav-tabs {
    border-color: transparent;
}

.nav-link {
    color: var(--nav-link-color);
    padding: .5rem 0;
    margin-right: 1rem
}

.nav-tabs .nav-link.active ~ span {
    background: linear-gradient(90deg, var(--tab-active-gradient-start), var(--tab-active-gradient-end));
    height: .3125rem; /* 5px → .3125rem (5/16=.3125) */
    width: 2.625rem; /* 42px → 2.625rem (42/16=2.625) */
    display: block;
    margin: 0 auto;
    border-radius: .5rem; /* 8px → .5rem (8/16=.5) */
}

.nav-tabs .nav-link:hover {
    color: var(--nav-link-active);
    border-color: transparent;
}

.nav-justified .nav-item {
    flex-basis: auto;
    flex-grow: initial;
}

.form-control, .btn {
    padding: .5rem .875rem; /* 8px 14px → .5rem .875rem (8/16=.5, 14/16=.875) */
    border-radius: .375rem; /* 6px → .375rem (6/16=.375) */
    font-size: 1rem;
    transition: border-color 0.2s;
}

    .btn-primary, .btn.w-100 {
        background: var(--btn-primary-bg);
        color: var(--btn-primary-color);
        font-weight: bold;
    }

        .btn-primary:hover, .btn.w-100:hover {
            background: var(--btn-primary-hover-bg);
        }

.btn-outline-primary {
    border-color: var(--btn-outline-border);
}

.useragree, .useragree a {
    font-size: .875rem; /* 14px → .875rem (14/16=.875) */
    color: var(--useragree-color);
}

    .useragree a:hover {
        color: var(--useragree-hover);
    }

    .useragree .form-check-label {
        padding-left: .25rem; /* 4px → .25rem (4/16=.25) */
        opacity: .8;
        cursor: pointer
    }

        .useragree .form-check-label:hover {
            opacity: 1
        }

.usersmscode {
    border-right-color: transparent
}

.usersmscoderight {
    height: 1.2rem; /* 约19px → 1.2rem (19.2/16=1.2) */
    background: var(--smscode-border);
    width: 1px;
    display: block;
    margin-top: .75rem; /* 12px → .75rem (12/16=.75) */
}

.sendsmsbtn {
    border-left-color: transparent
}

.resetsecret {
    display: inline-block;
    font-size: .875rem; /* 14px → .875rem */
}

.wechat-login {
    width: 1.75rem; /* 28px → 1.75rem (28/16=1.75) */
    height: 1.75rem; /* 28px → 1.75rem */
    border-radius: 50%;
    display: inline-block;
    background: url(../img/wechat/login.png) no-repeat center;
    background-size: 100%;
}