/* member_center 前台认证卡片（登录 / 注册 / 找回密码）—— 自包含，不依赖主题样式 */

.mcenter-auth {
    --mcenter-lg-text: #1f2937;
    --mcenter-lg-mute: #6b7280;
    --mcenter-lg-line: #e5e7eb;
    --mcenter-lg-bg: #ffffff;
    --mcenter-lg-soft: #f8fafc;
    --mcenter-lg-pri: #2563eb;
    --mcenter-lg-pri2: #1d4ed8;
    --mcenter-lg-err: #dc2626;
    --mcenter-lg-ok: #16a34a;
    display: block;
    max-width: 380px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    font-size: 14px;
    color: var(--mcenter-lg-text);
    -webkit-font-smoothing: antialiased;
}

html[data-theme="dark"] .mcenter-auth {
    --mcenter-lg-text: #e5e7eb;
    --mcenter-lg-mute: #9ca3af;
    --mcenter-lg-line: #2b303b;
    --mcenter-lg-bg: #171a21;
    --mcenter-lg-soft: #1e222b;
    --mcenter-lg-pri: #3b82f6;
    --mcenter-lg-pri2: #2563eb;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .mcenter-auth {
        --mcenter-lg-text: #e5e7eb;
        --mcenter-lg-mute: #9ca3af;
        --mcenter-lg-line: #2b303b;
        --mcenter-lg-bg: #171a21;
        --mcenter-lg-soft: #1e222b;
        --mcenter-lg-pri: #3b82f6;
        --mcenter-lg-pri2: #2563eb;
    }
}

.mcenter-auth *,
.mcenter-auth *::before,
.mcenter-auth *::after { box-sizing: border-box; }

/* 标签页 */
.mcenter-auth-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    margin-bottom: 18px;
    background: var(--mcenter-lg-soft);
    border: 1px solid var(--mcenter-lg-line);
    border-radius: 12px;
}

.mcenter-auth-tab {
    flex: 1 1 0;
    height: 38px;
    padding: 0 6px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--mcenter-lg-mute);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}

.mcenter-auth-tab:hover { color: var(--mcenter-lg-text); }

.mcenter-auth-tab.is-active {
    background: var(--mcenter-lg-bg);
    color: var(--mcenter-lg-pri);
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .10);
}

.mcenter-auth-panel { display: none; }
.mcenter-auth-panel.is-active { display: block; }

/* 密码 / 验证码 切换：紧凑胶囊，与顶部标签条区分层级 */
.mcenter-auth-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: max-content;
    margin: 0 auto 14px;
    padding: 3px;
    background: var(--mcenter-lg-soft);
    border-radius: 999px;
}

.mcenter-auth-switch a {
    padding: 5px 13px;
    border-radius: 999px;
    color: var(--mcenter-lg-mute);
    font-size: 12.5px;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.mcenter-auth-switch a.is-active {
    background: var(--mcenter-lg-bg);
    color: var(--mcenter-lg-pri);
    font-weight: 600;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .10);
}

.mcenter-auth-pane[hidden] { display: none; }

/* 找回密码是次级流程：进入后隐藏顶部标签，给一条返回链接即可 */
.mcenter-auth[data-mc-view="reset"] .mcenter-auth-tabs { display: none; }

.mcenter-login-back {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin: 0 0 12px -4px;
    padding: 3px 4px;
    border-radius: 7px;
    color: var(--mcenter-lg-mute);
    font-size: 13px;
    text-decoration: none;
    transition: color .15s ease, background .15s ease;
}
.mcenter-login-back:hover { color: var(--mcenter-lg-pri); background: var(--mcenter-lg-soft); }
.mcenter-login-back svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* 字段 */
.mcenter-login-field { margin-bottom: 12px; }

.mcenter-login-field.is-icon { position: relative; }

.mcenter-login-ico {
    position: absolute;
    left: 14px;
    top: 50%;
    width: 18px;
    height: 18px;
    transform: translateY(-50%);
    color: var(--mcenter-lg-mute);
    pointer-events: none;
    transition: color .15s ease;
}
.mcenter-login-ico svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.mcenter-login-field.is-icon:focus-within .mcenter-login-ico { color: var(--mcenter-lg-pri); }

.mcenter-login-field input[type="text"],
.mcenter-login-field input[type="password"],
.mcenter-login-field input[type="email"] {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--mcenter-lg-line);
    border-radius: 10px;
    background: var(--mcenter-lg-bg);
    color: var(--mcenter-lg-text);
    font-size: 14px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.mcenter-login-field.is-icon > input { padding-left: 42px; }
.mcenter-login-field.has-eye > input { padding-right: 46px; }

.mcenter-login-field input::placeholder { color: var(--mcenter-lg-mute); opacity: .72; }

.mcenter-login-field input:focus {
    border-color: var(--mcenter-lg-pri);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}

/* 密码可见性切换 */
.mcenter-login-eye {
    position: absolute;
    right: 6px;
    top: 50%;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--mcenter-lg-mute);
    cursor: pointer;
    transform: translateY(-50%);
    transition: color .15s ease, background .15s ease;
}
.mcenter-login-eye:hover { color: var(--mcenter-lg-text); background: var(--mcenter-lg-soft); }
.mcenter-login-eye svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* 明文状态下用「带斜杠的眼睛」提示再点一次会隐藏 */
.mcenter-login-eye.is-on svg path:first-child { opacity: .35; }

.mcenter-login-field.is-captcha,
.mcenter-login-field.is-code {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.mcenter-login-field.is-captcha input,
.mcenter-login-field.is-code input { flex: 1 1 auto; min-width: 0; }

.mcenter-login-captcha {
    flex: none;
    width: 108px;
    height: 46px;
    border: 1px solid var(--mcenter-lg-line);
    border-radius: 10px;
    cursor: pointer;
    object-fit: cover;
    background: #fff;
}

/* 获取验证码按钮 */
.mcenter-auth-send {
    flex: none;
    padding: 0 14px;
    height: 46px;
    border: 1px solid var(--mcenter-lg-pri);
    border-radius: 10px;
    background: transparent;
    color: var(--mcenter-lg-pri);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.mcenter-auth-send:hover { background: var(--mcenter-lg-pri); color: #fff; }
.mcenter-auth-send:disabled { opacity: .55; cursor: default; background: transparent; color: var(--mcenter-lg-mute); border-color: var(--mcenter-lg-line); }

/* 记住我 + 忘记密码 */
.mcenter-login-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 2px 0 12px;
}

.mcenter-login-remember {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--mcenter-lg-mute);
    cursor: pointer;
    user-select: none;
}

.mcenter-login-remember input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--mcenter-lg-pri);
    cursor: pointer;
}

.mcenter-login-forgot {
    flex: none;
    font-size: 13px;
    color: var(--mcenter-lg-pri);
    text-decoration: none;
    border-radius: 6px;
    transition: opacity .15s ease;
}
.mcenter-login-forgot:hover { opacity: .78; text-decoration: underline; }

.mcenter-login-msg {
    min-height: 18px;
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--mcenter-lg-err);
}

.mcenter-login-msg[hidden] { display: block; visibility: hidden; }
.mcenter-login-msg.is-ok { color: var(--mcenter-lg-ok); }

.mcenter-login-submit {
    display: block;
    position: relative;
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: 10px;
    background: var(--mcenter-lg-pri);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .15s ease, opacity .15s ease, box-shadow .15s ease;
}

.mcenter-login-submit:hover { background: var(--mcenter-lg-pri2); box-shadow: 0 8px 18px -8px rgba(37, 99, 235, .6); }
.mcenter-login-submit:active { box-shadow: none; }
.mcenter-login-submit:disabled { opacity: .6; cursor: default; box-shadow: none; }

/* 提交中：文字让位给转圈 */
.mcenter-login-submit.is-loading { color: transparent !important; }
.mcenter-login-submit.is-loading::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 17px;
    height: 17px;
    margin: -8.5px 0 0 -8.5px;
    border: 2px solid rgba(255, 255, 255, .42);
    border-top-color: #fff;
    border-radius: 50%;
    animation: mcenterLgSpin .68s linear infinite;
}

@keyframes mcenterLgSpin { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
    .mcenter-auth { max-width: 100%; }
}

/* ------------------------------------------------------------------ */
/* 微信扫码登录面板（登录卡内嵌，不再单开一个页面）                    */
/* 这一块是独立的一条登录路径：切到微信时下面那套「免登录 / 忘记密码 /  */
/* 登录」会整块收起，避免两个「登录」按钮并列让人不知道点哪个。        */
/* ------------------------------------------------------------------ */

.mcenter-wx-pane { padding-top: 2px; }

.mcenter-wx { text-align: center; }

/* 二维码框：白底 + 大圆角 + 微信绿浅光晕，右下角挂一枚微信角标 */
.mcenter-wx-qrbox {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 184px;
    height: 184px;
    padding: 10px;
    margin: 2px auto 12px;
    border: 1px solid var(--mcenter-lg-line);
    border-radius: 16px;
    background: #fff;   /* 二维码必须压在浅底上，深色模式也不例外 */
    box-shadow: 0 8px 22px rgba(7, 193, 96, .13);
}

.mcenter-wx-qr { display: block; width: 162px; height: 162px; border-radius: 8px; }
.mcenter-wx-qr[hidden] { display: none; }

.mcenter-wx-badge {
    position: absolute;
    right: -8px;
    bottom: -8px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 3px solid var(--mcenter-lg-bg);
    background: #07c160;
    color: #fff;
    box-shadow: 0 4px 12px rgba(7, 193, 96, .38);
}
.mcenter-wx-badge svg { display: block; width: 18px; height: 18px; fill: currentColor; stroke: none; }

.mcenter-wx-load { font-size: 12.5px; color: var(--mcenter-lg-mute); }

.mcenter-wx-tip { margin: 0; font-size: 12.5px; line-height: 1.75; color: var(--mcenter-lg-mute); }
.mcenter-wx-tip b {
    display: inline-block;
    padding: 0 6px;
    border-radius: 6px;
    background: rgba(7, 193, 96, .12);
    color: #059a4c;
    font-weight: 600;
}
.mcenter-wx-tip-mini { display: block; margin-top: 3px; font-size: 11.5px; opacity: .8; }

.mcenter-wx-err { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--mcenter-lg-err); }
.mcenter-wx-err[hidden] { display: none; }

.mcenter-wx-note {
    margin: 8px 0 0;
    padding: 7px 10px;
    border-radius: 9px;
    background: rgba(217, 119, 6, .1);
    color: #b45309;
    font-size: 12px;
    line-height: 1.6;
    text-align: left;
}
.mcenter-wx-note[hidden] { display: none; }

html[data-theme="dark"] .mcenter-wx-note { background: rgba(217, 119, 6, .16); color: #fbbf24; }

/* 验证码区：一条带标题的虚线隔开，说明这是「已经关注过」的通道 */
.mcenter-wx-code {
    position: relative;
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px dashed var(--mcenter-lg-line);
}
.mcenter-wx-code[hidden] { display: none; }
.mcenter-wx-code::before {
    content: '已关注公众号？把验证码填在这里';
    position: absolute;
    left: 0;
    right: 0;
    top: -9px;
    width: max-content;
    margin: 0 auto;
    padding: 0 10px;
    background: var(--mcenter-lg-bg);
    font-size: 11.5px;
    color: var(--mcenter-lg-mute);
}

.mcenter-wx-code input { text-align: center; letter-spacing: 4px; font-size: 16px; font-weight: 600; }
.mcenter-wx-code input::placeholder { letter-spacing: 0; font-weight: 400; }

/* 本面板唯一的主按钮：实心微信绿（与上面的「获取验证码」描边按钮区分开） */
.mcenter-wx-code .mcenter-auth-send {
    height: 46px;
    padding: 0 18px;
    border-color: #07c160;
    background: #07c160;
    color: #fff;
}
.mcenter-wx-code .mcenter-auth-send:hover { background: #06ad56; border-color: #06ad56; color: #fff; }
.mcenter-wx-code .mcenter-auth-send:disabled {
    background: var(--mcenter-lg-soft);
    border-color: var(--mcenter-lg-line);
    color: var(--mcenter-lg-mute);
}

/* 微信登录时，账号密码流程的收尾（免登录 / 忘记密码 / 图形验证码 / 提示 / 登录按钮）整块收起 */
[data-mc-panel="signin"][data-mc-type="wx"] [data-mc-form="login"] > .mcenter-login-row,
[data-mc-panel="signin"][data-mc-type="wx"] [data-mc-form="login"] > .mcenter-login-submit,
[data-mc-panel="signin"][data-mc-type="wx"] [data-mc-form="login"] > .mcenter-login-field.is-captcha,
[data-mc-panel="signin"][data-mc-type="wx"] [data-mc-form="login"] > .mcenter-login-msg {
    display: none;
}

@media (max-width: 400px) {
    .mcenter-wx-qrbox { width: 168px; height: 168px; }
    .mcenter-wx-qr { width: 148px; height: 148px; }
    .mcenter-wx-code::before { font-size: 11px; padding: 0 8px; }
}