/**
 * 登录页 12 栏栅格 + 响应式（断点 768px）
 * auth.php / member/auth、auth.htm、member/auth_all
 * PC：仅外壳栅格与背景；表单样式完全由 member_auth.css + 模板内联负责
 * 移动：≤767.98px 内全部自适应规则
 */
:root {
    --member-auth-cols: 12;
    --member-auth-gap: 24px;
    --member-auth-container-max: 1000px;
    --member-auth-brand: #10C090;
    --member-auth-brand-hover: #12D9A3;
    /* 移动端辅助色：与主色同色相、低饱和中性色 */
    --member-auth-mobile-bg: #f6f9f8;
    --member-auth-mobile-card: #ffffff;
    --member-auth-mobile-input-bg: #ffffff;
    --member-auth-mobile-border: #dfe8e4;
    --member-auth-mobile-text: #334155;
    --member-auth-mobile-text-strong: #1e293b;
    --member-auth-mobile-muted: #64748b;
    --member-auth-mobile-subtle: #94a3b8;
    --member-auth-mobile-placeholder: #a8b4b0;
    --member-auth-mobile-pipe: #c5d4ce;
    --member-auth-mobile-divider: rgba(30, 41, 59, 0.07);
    --member-auth-brand-soft: rgba(16, 192, 144, 0.12);
    --member-auth-brand-softer: rgba(16, 192, 144, 0.06);
    --member-auth-brand-mist: rgba(16, 192, 144, 0.035);
    --member-auth-mobile-accent-1: rgba(16, 192, 144, 0.09);
    --member-auth-mobile-accent-2: rgba(16, 192, 144, 0.055);
    --member-auth-mobile-accent-3: rgba(16, 192, 144, 0.03);
    --member-auth-mobile-shadow: rgba(16, 192, 144, 0.08);
}

/* 全页防横滚（PC/移动均安全） */
body.pg_auth {
    overflow-x: hidden;
    max-width: 100%;
}

/* ========== PC：≥768px，双栏栅格 + 背景，不改表单内部 ========== */
@media (min-width: 768px) {
    body.pg_auth .member-auth-page-bg {
        width: 100%;
        max-width: 100%;
        min-height: 516px;
        height: auto;
        overflow: visible;
        box-sizing: border-box;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        margin: 35px auto;
    }

    body.pg_auth #topbar .wp.container,
    body.pg_auth #topbar .top_bar_simple {
        width: 100% !important;
        max-width: var(--member-auth-container-max);
        box-sizing: border-box;
        padding-left: 16px;
        padding-right: 16px;
    }

    .member-auth-container {
        width: 100%;
        max-width: var(--member-auth-container-max);
        margin-left: auto;
        margin-right: auto;
        padding: 0 16px;
        box-sizing: border-box;
    }

    .member-auth-grid {
        display: grid;
        grid-template-columns: repeat(var(--member-auth-cols), minmax(0, 1fr));
        column-gap: var(--member-auth-gap);
        row-gap: 16px;
        align-items: start;
        width: 100%;
    }

    .member-auth-grid-promo {
        grid-column: 1 / span 7;
        min-width: 0;
    }

    .member-auth-grid-main {
        grid-column: 8 / span 5;
        min-width: 0;
    }

    .member-auth-promo.click-div-handle {
        width: 100%;
        min-height: 365px;
        margin-top: 100px;
        cursor: pointer;
        float: none;
    }

    /* 仅定位登录卡，不覆盖 member_auth.css 内 input/tab/li 规则 */
    .member-auth-main #member_auth,
    .member-auth-grid-main #member_auth {
        float: right;
        margin-top: 100px;
        width: 400px;
        max-width: 400px;
        margin-left: auto;
        margin-right: 0;
        box-sizing: border-box;
    }

    .member-auth-mobile-brand {
        display: none !important;
    }

    .member-auth-mobile-kefu {
        display: none !important;
    }

    /* auth_all：单 Tab「欢迎回来」PC 居中占满 Tab 栏 */
    div#member_auth ul.tab li.tab_one_title:only-child {
        width: 100%;
        text-align: center;
    }

    /* Tab 切换时表单区高度一致（超管/分管字段行数相同） */
    div#member_auth div.authlogin {
        min-height: 300px;
        box-sizing: border-box;
    }

    /*
     * PC：member-auth-field 仅用于移动断点内的栅格；此处恢复 member_auth.css 横排（标签 + 输入同一行）
     * 避免移动端的 display:grid / span{display:block} 在部分环境下影响桌面表单
     */
    /* 默认隐藏验证码行（勿用 li.member-auth-field 通配 display:block，否则会盖掉 display:none） */
    div#member_auth ul#uid_login li.verification.member-auth-field:not(.member-auth-verification-on) {
        display: none !important;
    }

    div#member_auth ul#uid_login li.member-auth-field:not(.verification) {
        display: block;
        white-space: nowrap;
    }

    div#member_auth ul#uid_login li.member-auth-field:not(.verification) > span:not(.get-verification) {
        display: inline-block;
        padding-right: inherit;
        font-size: 14px;
        color: #444;
        font-weight: normal;
        vertical-align: middle;
    }

    div#member_auth ul#uid_login li.member-auth-field:not(.verification) input[type="text"],
    div#member_auth ul#uid_login li.member-auth-field:not(.verification) input[type="password"] {
        width: 265px !important;
        max-width: none;
        height: 33px;
        line-height: 33px;
        margin-bottom: 10px;
        margin-left: 10px !important;
        min-height: 0;
        padding: 0 8px;
        font-size: 14px;
        border-radius: 0;
        border: 1px solid #ddd;
        background: #fff;
        box-shadow: none;
        vertical-align: middle;
        box-sizing: content-box;
    }

    /* 验证码登录：标签 + 输入 + 按钮同一行（flex，避免 float 换行） */
    div#member_auth ul#uid_login li.verification.member-auth-field.member-auth-verification-on {
        display: flex !important;
        flex-wrap: nowrap;
        align-items: center;
        white-space: nowrap;
        gap: 0;
    }

    div#member_auth ul#uid_login li.verification.member-auth-field.member-auth-verification-on > span:not(.get-verification) {
        flex: 0 0 auto;
        display: inline-block;
    }

    div#member_auth ul#uid_login li.verification.member-auth-field.member-auth-verification-on input[type="text"] {
        flex: 0 0 120px;
        width: 120px !important;
        max-width: 120px;
        margin-left: 10px !important;
        margin-bottom: 10px;
    }

    div#member_auth ul#uid_login li.verification.member-auth-field.member-auth-verification-on .get-verification {
        flex: 0 0 140px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        float: none;
        width: 140px;
        min-width: 140px;
        max-width: 140px;
        min-height: 37px;
        height: 37px;
        margin-left: auto;
        margin-bottom: 10px;
        box-sizing: border-box;
    }

    /* 分级管理员：PC 与超管同款横排字段，避免 Tab 切换一高一低 */
    div#member_auth ul#student_login li.member-auth-field {
        display: block;
        white-space: nowrap;
    }

    div#member_auth ul#student_login li.member-auth-field > span {
        display: inline-block;
        padding-right: inherit;
        font-size: 14px;
        color: #444;
        font-weight: normal;
        vertical-align: middle;
    }

    div#member_auth ul#student_login li.member-auth-field input[type="text"],
    div#member_auth ul#student_login li.member-auth-field input[type="password"] {
        width: 265px !important;
        max-width: none;
        height: 33px;
        line-height: 33px;
        margin-bottom: 10px;
        margin-left: 10px !important;
        min-height: 0;
        padding: 0 8px;
        font-size: 14px;
        border-radius: 0;
        border: 1px solid #ddd;
        background: #fff;
        box-shadow: none;
        vertical-align: middle;
        box-sizing: content-box;
    }
}

/* ========== 移动端：≤767.98px ========== */
@media (max-width: 767.98px) {
    body.pg_auth {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        min-height: 100dvh;
        -webkit-tap-highlight-color: transparent;
        background-color: var(--member-auth-mobile-bg) !important;
        background-image:
            radial-gradient(ellipse 88% 58% at 96% 2%, var(--member-auth-mobile-accent-1) 0%, transparent 56%),
            radial-gradient(ellipse 78% 52% at 4% 98%, var(--member-auth-mobile-accent-2) 0%, transparent 54%),
            radial-gradient(ellipse 65% 42% at 50% 42%, var(--member-auth-mobile-accent-3) 0%, transparent 60%);
        background-repeat: no-repeat;
        background-attachment: fixed;
    }

    body.pg_auth .member-auth-page-bg {
        flex: 1 0 auto;
        display: flex;
        flex-direction: column;
        background: transparent !important;
        height: auto !important;
        min-height: 0;
        margin: 0 !important;
        overflow: visible;
        padding: env(safe-area-inset-top, 0px) 0 0;
        overscroll-behavior-y: contain;
    }

    body.pg_auth div#w-footer {
        display: block !important;
        visibility: visible !important;
        flex-shrink: 0;
        width: 100% !important;
        max-width: 100%;
        margin-top: auto;
        padding: 20px 16px calc(16px + env(safe-area-inset-bottom, 0px));
        box-sizing: border-box;
        background: transparent !important;
        border-top: none;
    }

    /* footer.htm 在 w-footer 外还有空 #ft，移动端隐藏避免占位异常 */
    body.pg_auth > #ft.wp.container {
        display: none !important;
    }

    /* 移动端不用顶栏 Logo，改由表单上方居中展示 */
    body.pg_auth #topbar {
        display: none !important;
    }

    .member-auth-mobile-brand {
        display: block;
        text-align: center;
        padding: 24px 20px 24px 20px;
        box-sizing: border-box;
    }

    .member-auth-mobile-brand__link {
        display: inline-block;
        line-height: 0;
    }

    .member-auth-mobile-brand__img {
        width: auto;
        max-width: 120px;
        height: auto;
        vertical-align: middle;
    }

    /* 右侧悬浮在线客服（与站点右侧栏同款图标，调用 OpenKefuWindow） */
    .member-auth-mobile-kefu {
        display: block;
        position: fixed;
        right: 12px;
        bottom: calc(108px + env(safe-area-inset-bottom, 0px));
        z-index: 350;
        width: 48px;
        height: 48px;
        padding: 0;
        margin: 0;
        border: 1px solid var(--member-auth-mobile-border);
        border-radius: 50%;
        background: var(--member-auth-mobile-card);
        box-shadow: 0 4px 18px var(--member-auth-mobile-shadow), 0 1px 4px rgba(30, 41, 59, 0.04);
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
        transition: box-shadow 0.2s ease, background-color 0.2s ease;
    }

    .member-auth-mobile-kefu:active {
        background-color: var(--member-auth-mobile-bg);
        box-shadow: 0 2px 10px var(--member-auth-mobile-shadow);
    }

    .member-auth-mobile-kefu__icon {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: url("../../../static/image/pxb/tool/nav_right_960.png") center -6px no-repeat;
        background-size: auto;
    }

    /* 页脚文字「在线客服」改由悬浮按钮承担 */
    body.pg_auth #w-footer .member-auth-footer-kefu,
    body.pg_auth #w-footer .member-auth-footer-kefu + .pipe {
        display: none !important;
    }

    /* 在线客服已悬浮时，电话号码右侧竖线无需展示 */
    body.pg_auth #w-footer #flk.links > span:first-child + span.pipe {
        display: none !important;
    }

    body.pg_auth #w-footer #ft,
    body.pg_auth #w-footer #ft.wp,
    body.pg_auth #w-footer .wp.container {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        border: none !important;
        box-sizing: border-box;
    }

    body.pg_auth #flk.links {
        float: none !important;
        width: 100% !important;
        max-width: 100%;
        padding: 0 !important;
        text-align: center;
        box-sizing: border-box;
    }

    body.pg_auth #flk.links span,
    body.pg_auth #flk.links a {
        display: inline-block;
        margin: 4px 6px;
        white-space: normal;
        word-break: break-word;
        font-size: 13px;
        line-height: 1.5;
    }

    /* 页脚文案与链接统一灰色（覆盖模板内 a 品牌色） */
    body.pg_auth #w-footer #flk.links span,
    body.pg_auth #w-footer #flk.links a {
        color: var(--member-auth-mobile-muted) !important;
    }

    body.pg_auth #w-footer #flk.links .pipe {
        color: var(--member-auth-mobile-pipe);
    }

    body.pg_auth #w-footer #flk.links dl,
    body.pg_auth #w-footer #flk.links dl a {
        color: var(--member-auth-mobile-subtle) !important;
    }

    .member-auth-container {
        padding: 0 24px 24px;
        max-width: 420px;
        margin-left: auto;
        margin-right: auto;
    }

    .member-auth-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        column-gap: 0;
        row-gap: 0;
    }

    .member-auth-grid-promo {
        display: none !important;
    }

    .member-auth-grid-main {
        grid-column: 1 / -1;
    }

    .member-auth-main #member_auth,
    .member-auth-grid-main #member_auth,
    div#member_auth {
        float: none;
        margin: 0 auto;
        max-width: 100%;
        width: 100%;
        min-height: 0;
        background: transparent;
        border: none;
        border-radius: 0;
        box-shadow: none;
        overflow: visible;
    }

    body.pg_auth div#member_auth div.authtop {
        height: auto !important;
        min-height: 0;
        overflow: visible !important;
        border-bottom: none;
        background: transparent;
        padding: 0 0 16px;
        margin: 0;
    }

    /* 轻量 Tab：纯文字 + 居中短下划线（参考登录/注册切换样式） */
    div#member_auth ul.tab {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: 48px;
        margin: 0 !important;
        padding: 0 !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        list-style: none;
        background: none;
        border: none;
        border-radius: 0;
    }

    div#member_auth ul.tab li {
        float: none !important;
        flex: 0 0 auto;
        width: auto !important;
        height: auto !important;
        min-height: 44px;
        line-height: 1.35 !important;
        padding: 0 2px 12px !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        text-align: center;
        position: relative;
        font-size: 16px;
        font-weight: 400;
        letter-spacing: 0.02em;
        color: var(--member-auth-mobile-subtle);
        cursor: pointer;
        touch-action: manipulation;
        box-sizing: border-box;
        border: none !important;
        border-bottom: none !important;
        border-radius: 0;
        background: transparent !important;
        box-shadow: none !important;
        transition: color 0.2s ease;
    }

    div#member_auth ul.tab li::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 0;
        height: 3px;
        border-radius: 2px;
        background: var(--member-auth-brand);
        transform: translateX(-50%);
        transition: width 0.2s ease;
    }

    div#member_auth ul.tab li.cur {
        color: var(--member-auth-mobile-text-strong) !important;
        font-weight: 600;
        background: transparent !important;
        box-shadow: none !important;
    }

    div#member_auth ul.tab li.cur::after {
        width: 28px;
    }

    /* auth_all：仅一个 Tab 时缩小 Tab 区间距 */
    div#member_auth ul.tab:has(li.tab_one_title:only-child) {
        gap: 0;
    }

    div#member_auth div.authlogin {
        padding-top: 4px;
        clear: both;
    }

    div#member_auth ul#uid_login,
    div#member_auth ul#student_login,
    div#member_auth ul#company_login {
        width: 100% !important;
        max-width: 100%;
        margin: 0;
        padding: 4px 0 8px;
    }

    div#member_auth li {
        margin: 10px 16px;
        clear: both;
        font-size: 14px;
        color: var(--member-auth-mobile-text);
    }

    .member-auth-field {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 6px;
        align-items: stretch;
    }

    /* 仅字段标签，不含「获取验证码」按钮（同为 span） */
    .member-auth-field > span:not(.get-verification) {
        display: block;
        margin-bottom: 0;
        padding-right: 0;
        font-size: 14px;
        font-weight: 500;
        color: var(--member-auth-mobile-text);
        line-height: 1.4;
    }

    .member-auth-field input[type="text"],
    .member-auth-field input[type="password"] {
        width: 100% !important;
        max-width: 100%;
        margin-left: 0 !important;
        box-sizing: border-box;
    }

    div#member_auth li input[type=text],
    div#member_auth li input[type=password] {
        width: 100% !important;
        max-width: 100%;
        margin-left: 0 !important;
        margin-bottom: 0 !important;
        min-height: 44px;
        padding: 10px 12px;
        font-size: 16px;
        line-height: 1.4;
        border: 1px solid var(--member-auth-mobile-border);
        border-radius: 8px;
        background: var(--member-auth-mobile-input-bg);
        color: var(--member-auth-mobile-text-strong);
        box-sizing: border-box;
        -webkit-appearance: none;
        appearance: none;
    }

    div#member_auth li input[type=text]::placeholder,
    div#member_auth li input[type=password]::placeholder {
        color: var(--member-auth-mobile-placeholder);
    }

    div#member_auth li input[type=text]:focus,
    div#member_auth li input[type=password]:focus {
        border-color: var(--member-auth-brand);
        outline: none;
        box-shadow: 0 0 0 3px var(--member-auth-brand-soft);
    }

    div#member_auth li label {
        font-size: 13px;
        line-height: 1.5;
        color: var(--member-auth-mobile-muted);
        touch-action: manipulation;
    }

    div#member_auth li label a {
        touch-action: manipulation;
    }

    /* 复选框：保持小尺寸、与文案同一行（勿套用文本框 100% 宽规则） */
    div#member_auth li input[type="checkbox"],
    div#member_auth li input[type="radio"] {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        max-width: 18px !important;
        margin: 2px 8px 0 0 !important;
        padding: 0 !important;
        flex-shrink: 0;
        vertical-align: top;
        -webkit-appearance: checkbox;
        appearance: auto;
        border-radius: 4px;
        box-sizing: border-box;
    }

    div#member_auth li:has(input[type="checkbox"]),
    div#member_auth li:has(input[type="radio"]) {
        display: block;
    }

    div#member_auth li:has(input[type="checkbox"]) > span,
    div#member_auth li:has(input[type="radio"]) > span {
        display: block;
    }

    /* 分级管理员：checkbox 与 label 为兄弟节点时横向排列 */
    div#member_auth li > span:has(> input[type="checkbox"] + label) {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    div#member_auth li > span:has(> input[type="checkbox"] + label) input[type="checkbox"] {
        float: none;
        flex-shrink: 0;
        margin: 0 !important;
    }

    /* 协议等：label 内联流式排版，整句自然换行 */
    div#member_auth li label:has(input[type="checkbox"]),
    div#member_auth li label:has(input[type="radio"]) {
        display: block;
        line-height: 1.55;
        font-size: 13px;
        color: var(--member-auth-mobile-muted);
        overflow: hidden;
    }

    div#member_auth li label:has(input[type="checkbox"]) input,
    div#member_auth li label:has(input[type="radio"]) input {
        float: left;
        margin: 1px 8px 0 0 !important;
    }

    div#member_auth li label:has(input[type="checkbox"]) a,
    div#member_auth li label:has(input[type="radio"]) a {
        display: inline;
        white-space: normal;
    }

    div#member_auth li button {
        min-height: 48px;
        height: auto;
        line-height: 1.3;
        padding: 12px 16px;
        font-size: 16px;
        letter-spacing: 0.05em;
        border-radius: 8px;
        touch-action: manipulation;
    }

    .member-auth-links-row {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-top: 4px;
        min-height: 88px;
        box-sizing: border-box;
    }

    #toggle-login-type {
        float: none;
        display: block;
        padding: 4px 0;
        font-size: 14px;
        touch-action: manipulation;
    }

    .member-auth-links-r {
        float: none;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        text-align: left;
        font-size: 14px;
    }

    .member-auth-links-r a {
        touch-action: manipulation;
    }

    /* 验证码登录：默认隐藏；展示时用 grid，避免 jQuery .show() 的 display:block 破坏布局 */
    #uid_login li.verification.member-auth-field {
        display: none !important;
    }

    #uid_login li.verification.member-auth-field.member-auth-verification-on {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        gap: 6px 8px;
        align-items: stretch;
    }

    #uid_login li.verification.member-auth-field.member-auth-verification-on > span:not(.get-verification) {
        grid-column: 1 / -1;
        display: block;
    }

    #uid_login li.verification.member-auth-field.member-auth-verification-on input[type="text"] {
        grid-column: 1;
        grid-row: 2;
        width: 100% !important;
        max-width: 100%;
        min-height: 44px;
        margin-left: 0 !important;
        padding: 10px 12px;
        font-size: 16px;
        border: 1px solid var(--member-auth-mobile-border);
        border-radius: 8px;
        background: var(--member-auth-mobile-input-bg);
        box-sizing: border-box;
        -webkit-appearance: none;
        appearance: none;
    }

    #uid_login li.verification.member-auth-field.member-auth-verification-on .get-verification {
        grid-column: 2;
        grid-row: 2;
        float: none;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        align-self: stretch;
        width: auto;
        min-width: 104px;
        max-width: 38%;
        min-height: 44px;
        height: auto;
        line-height: 1.3;
        padding: 0 10px;
        margin: 0;
        font-size: 13px;
        white-space: nowrap;
        text-align: center;
        border: 1px solid var(--member-auth-mobile-border);
        border-radius: 8px;
        background: var(--member-auth-mobile-input-bg);
        color: var(--member-auth-mobile-muted);
        box-sizing: border-box;
        cursor: pointer;
        touch-action: manipulation;
    }

    #uid_login li.verification.member-auth-field.member-auth-verification-on .get-verification.success {
        color: var(--member-auth-brand) !important;
        border-color: var(--member-auth-brand) !important;
        background: var(--member-auth-brand-mist);
    }

    div#member_auth li .auth-seccode {
        width: 100% !important;
        max-width: 100%;
        margin-right: 0;
        margin-bottom: 8px;
        min-height: 44px;
    }

    div#member_auth li .seccode-img {
        float: none;
        display: block;
        margin-top: 8px;
        max-width: 100%;
        height: auto;
    }

    #student_login li.member-auth-footer-ad {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
        margin-top: 4px;
        margin-bottom: 12px;
        padding-bottom: 8px;
        min-height: 88px;
        box-sizing: border-box;
    }

    #student_login li.member-auth-footer-ad .member-auth-links-r {
        align-items: flex-end;
        text-align: right;
        width: 100%;
    }

    .member-auth-input-sms {
        width: 100%;
    }
}