.member-auth [hidden] { display: none !important; }

.public-page:has(.member-auth) {
    padding-top: 0;
    padding-bottom: 0;
    min-height: 0;
    display: flow-root;
}

.member-auth {
    --auth-accent: var(--red);
    --auth-accent-hover: #d92022;
    --auth-accent-soft: #fff0f2;
    --auth-accent-border: #f5c4c6;
    --auth-ink: #172b4d;
    --auth-muted: #68768b;
    --auth-line: #e5eaf2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 460px;
    align-items: center;
    gap: 100px;
    max-width: 1060px;
    min-height: 720px;
    margin: 0 auto;
    padding: 64px 0;
}

.member-auth-brand { text-align: center; }
.member-auth-brand > img {
    display: block;
    width: 300px;
    max-width: 100%;
    margin: 0 auto 36px;
    object-fit: contain;
}
.member-auth-brand > .site-wordmark-text { display: block; margin-bottom: 36px; }
.member-auth-brand h2 { font-size: 32px; line-height: 1.5; margin: 0; letter-spacing: -.5px; }
.member-auth-brand p { color: #73829b; line-height: 1.9; margin: 20px 0 0; font-size: 15px; }
.member-auth-brand > div { display: flex; justify-content: center; gap: 32px; margin-top: 38px; color: #e46e70; font-size: 34px; }

.member-auth-form {
    position: relative;
    padding: 36px 36px 0;
    border: 1px solid var(--auth-line);
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 20px 60px -16px rgb(30 58 104 / 16%), 0 2px 8px rgb(30 58 104 / 3%);
}
#phone-login {
    --auth-accent: #d9363e;
    --auth-accent-hover: #c42b33;
    --auth-ink: #252c36;
    --auth-muted: #6b7280;
}
.member-auth-form:has(#phone-login:not([hidden])) { border-color: #e5e7eb; box-shadow: 0 16px 48px -18px rgb(17 24 39 / 14%), 0 2px 8px rgb(17 24 39 / 3%); }
.auth-heading { text-align: center; margin-bottom: 28px; }
.member-auth-form h1 { color: var(--auth-ink); font-size: 28px; line-height: 1.4; letter-spacing: .5px; margin: 0 0 10px; }
.member-auth-form .muted { font-size: 13px; margin: 0; color: var(--auth-muted); line-height: 1.8; }
.auth-field { margin: 0 0 20px; }
.auth-field > label { display: block; margin-bottom: 8px; color: #454b54; font-size: 13px; font-weight: 600; line-height: 1.5; }
.auth-input {
    display: flex;
    align-items: center;
    height: 52px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #f7f7f8;
    transition: background .16s, border-color .16s, box-shadow .16s;
}
.auth-input > .bi { flex: none; margin-left: 16px; color: #9399a2; font-size: 18px; line-height: 1; }
.auth-input:hover { border-color: #c9cdd3; }
.auth-input:focus-within { border-color: #9199a3; background: #fff; box-shadow: 0 0 0 3px rgb(31 41 55 / 7%); }
.auth-input:focus-within > .bi { color: #626a75; }
.auth-field input {
    display: block;
    flex: 1;
    width: 100%;
    min-width: 0;
    height: 100%;
    border: 0;
    border-radius: 10px;
    padding: 0 12px;
    outline: 0;
    font: inherit;
    font-size: 14px;
    color: var(--auth-ink);
    background: transparent;
}
.auth-field input::placeholder { color: #757c87; }
.auth-input:has(input:disabled) { background: #f1f2f4; }
.auth-code {
    flex: none;
    min-width: 112px;
    min-height: 30px;
    padding: 5px 14px;
    margin-right: 3px;
    border: 0;
    border-left: 1px solid #dfe2e6;
    border-radius: 0;
    background: transparent;
    color: #4b5563;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
    cursor: pointer;
    transition: color .16s;
}
.auth-code:hover:not(:disabled) { color: #1f2937; }
.auth-code:disabled { color: #969da7; cursor: not-allowed; }
.member-auth :is(button, a, input[type=checkbox]):focus-visible { outline: 3px solid #f69a9c; outline-offset: 3px; }
#phone-login :is(.auth-code, .auth-consent a, .auth-remember input):focus-visible { outline-color: #b9c0c9; }
.auth-consent { font-size: 12px; color: var(--auth-muted); line-height: 1.8; margin: 0 0 20px; }
.auth-remember input { flex: none; width: 15px; height: 15px; margin: 3px 0 0; accent-color: var(--auth-accent); cursor: pointer; }
.auth-remember-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 14px; line-height: 1.8; }
.auth-remember { display: flex; align-items: flex-start; gap: 8px; color: #53627a; font-size: 13px; cursor: pointer; }
#phone-login .auth-remember { color: #606874; }
#phone-login .auth-remember input { accent-color: #626a75; }
.auth-consent a { color: #4b5563; text-decoration: underline; text-decoration-color: #cbd0d7; text-underline-offset: 3px; }
.auth-consent a:hover { color: #1f2937; text-decoration-color: currentColor; }
.member-auth-form .button { min-height: 50px; border-radius: 10px; font-size: 14px; font-weight: 600; transition: background .16s, border-color .16s, box-shadow .16s; }
.member-auth-form .button.primary {
    border-color: var(--auth-accent);
    background: var(--auth-accent);
    color: #fff;
    font-size: 15px;
    letter-spacing: 1px;
    box-shadow: none;
}
.member-auth-form .button.primary:hover:not(:disabled) { background: var(--auth-accent-hover); border-color: var(--auth-accent-hover); }
.member-auth-form .button.primary:disabled { box-shadow: none; }
.member-auth-form .local-hint { margin: -6px 0 18px; padding: 10px 12px; border: 1px solid #dbece2; border-radius: 8px; background: #f1f8f4; color: #287447; font-size: 13px; line-height: 1.7; }
.auth-feedback { font-size: 13px; color: #65748d; line-height: 1.8; }
.member-auth-form .form-error { font-size: 13px; color: #b92532; line-height: 1.8; margin: 14px 0 0; padding: 10px 12px; background: #fff4f4; border: 1px solid #f5dfe2; border-radius: 8px; white-space: pre-wrap; }
.auth-session-check { padding: 0; border: 0; background: transparent; color: var(--auth-accent); font: inherit; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.login-divider { display: flex; align-items: center; gap: 14px; color: var(--auth-muted); font-size: 12px; line-height: 1.8; margin: 22px 0 14px; }
.login-divider::before, .login-divider::after { content: ""; height: 1px; background: #eeeff1; flex: 1; }
.wechat-login { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 46px; border-radius: 10px; cursor: pointer; background: #078744; border: 1px solid #078744; color: #fff; font: inherit; font-size: 14px; font-weight: 500; transition: background .16s, border-color .16s; }
.wechat-login:hover:not(:disabled) { background: #066f38; border-color: #066f38; }
.member-auth button.wechat-login:focus-visible { outline-color: #80dda8; }
.wechat-login .bi { color: currentColor; font-size: 23px; line-height: 1; }
.wechat-login:disabled { opacity: .55; cursor: not-allowed; }
.auth-footer { margin: 28px -36px 0; padding: 17px 36px; border-top: 1px solid #edf0f5; border-radius: 0 0 22px 22px; background: #f8fafc; }
.member-auth-form:has(#phone-login:not([hidden])) .auth-footer { border-color: #eeeff1; background: #fff; }
.member-auth-form:has(#phone-login:not([hidden])) .auth-skip { color: #6b7280; }
.member-auth-form:has(#phone-login:not([hidden])) .auth-skip:hover { color: #252c36; }
.auth-skip { display: flex; align-items: center; justify-content: center; gap: 8px; width: fit-content; margin: 0 auto; color: #68768b; font-size: 12px; line-height: 1.8; }
.auth-skip .bi { font-size: 14px; transition: transform .16s; }
.auth-skip:hover { color: var(--auth-accent); }
.auth-skip:hover .bi { transform: translateX(3px); }
.member-auth-form:has(#wechat-panel:not([hidden])) { box-shadow: 0 16px 48px -18px rgb(17 24 39 / 14%), 0 2px 8px rgb(17 24 39 / 3%); }
#wechat-panel {
    --auth-accent: #078744;
    --auth-accent-hover: #066f38;
    --auth-accent-soft: #effaf3;
    --auth-accent-border: #d4e9dd;
}
#wechat-panel :is(button, a, input[type=checkbox]):focus-visible { outline-color: #80dda8; }
.wechat-heading { margin-bottom: 24px; }
.wechat-heading-title { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px; }
.wechat-heading-title > .bi { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #07c160; background: #edf8f1; font-size: 27px; line-height: 1; }
.wechat-heading-title h1 { font-size: 26px; letter-spacing: 0; margin: 0; }
.wechat-authorization { text-align: center; margin: 24px 0; padding: 26px 20px; border: 1px solid var(--auth-accent-border); border-radius: 12px; background: var(--auth-accent-soft); color: var(--auth-accent); min-height: 256px; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.wechat-authorization i { font-size: 42px; line-height: 1.2; }
.wechat-authorization p { font-size: 13px; line-height: 1.8; max-width: 280px; margin: 16px 0 0; color: var(--auth-muted); }
.wechat-authorization[data-wechat-authorization] { position: relative; width: 256px; height: 256px; margin: 0 auto 24px; padding: 0; border: 0; border-radius: 0; background: #fff; overflow: hidden; }
/* QR and status typography are sized independently in wechat-login-frame.css. */
#wechat-qrcode { flex: none; width: 256px; height: 256px; }
#wechat-qrcode iframe { display: block; width: 256px; height: 256px; border: 0; }
.wechat-qr-status { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; color: #07c160; background: #f8fafc; }
.wechat-qr-corners { position: absolute; inset: 0; pointer-events: none; }
.wechat-qr-corners > span { position: absolute; width: 20px; height: 20px; border: 0 solid var(--auth-accent); }
.wechat-qr-corners > span:nth-child(1) { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 4px; }
.wechat-qr-corners > span:nth-child(2) { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 4px; }
.wechat-qr-corners > span:nth-child(3) { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 4px; }
.wechat-qr-corners > span:nth-child(4) { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 4px; }
.wechat-qr-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; line-height: 1.8; }
.wechat-qr-actions .auth-remember { align-items: center; }
.wechat-qr-actions .auth-remember input { margin: 0; accent-color: var(--auth-accent); }
.wechat-qr-actions button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 4px 0 4px 8px; border: 0; border-radius: 5px; background: transparent; color: var(--auth-accent); font: inherit; font-size: 13px; cursor: pointer; transition: color .16s; }
.wechat-qr-actions button > .bi { font-size: 16px; line-height: 1; }
.wechat-qr-actions button:hover:not(:disabled) { color: var(--auth-accent-hover); }
.wechat-qr-actions button:disabled { opacity: .55; cursor: wait; }
.wechat-terms { margin: 18px 0 0; color: var(--auth-muted); font-size: 12px; line-height: 1.9; text-align: center; }
.wechat-terms a { color: #53627a; text-underline-offset: 3px; }
.wechat-terms > span { margin: 0 7px; }
.wechat-terms a:hover { color: var(--auth-accent); text-decoration: underline; }
.member-auth-form [data-phone-login] { display: flex; gap: 8px; margin-top: 22px; color: #455365; border-color: #e1e6eb; background: #f7f8fa; font-weight: 500; }
.member-auth-form [data-phone-login] > .bi-phone { color: currentColor; font-size: 18px; }
.member-auth-form [data-phone-login] > .bi-arrow-right { margin-left: auto; color: currentColor; font-size: 16px; }
.member-auth-form [data-phone-login]:hover { color: var(--auth-ink); background: #f0f3f5; border-color: #c8d2dc; }
.member-auth-form:has(#wechat-panel:not([hidden])) .auth-footer { margin-top: 24px; padding-top: 15px; padding-bottom: 15px; background: #fff; }
.member-auth-form:has(#wechat-panel:not([hidden])) .auth-skip:hover { color: #078744; }
.member-auth-form:has(#wechat-panel:not([hidden])) .auth-skip:focus-visible { outline-color: #80dda8; }
.member-auth-form [data-session-check] { margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
    .auth-input, .auth-code, .member-auth-form .button, .wechat-login, .wechat-qr-actions button, .auth-skip .bi { transition: none; }
}