/* =========================================
   明珠果苑 - WordPress 登录 / 注册 / 找回密码 统一样式
   配色：数字平台默认一套（浅米白纸面 + 深咖卡 + 鎏金边）
   版本：5.1   （改样式必须同步升 functions.php 里的版本号，否则吃缓存）
   v5.1：登录卡片垂直居中对齐数字平台——body.login 上下 padding 由 76/28 非对称改为 32/32 对称。
   ========================================= */

/* 1. 基础背景：与数字平台登录页同构——左半浅米白 #FAF7F0、右半纯白 #FFFFFF，
   50% 处硬切；方格左右各一档浓度，44px 网格（对应 auth.vue 的 --zone-l/--zone-r）
   布局用单列网格：装得下竖直居中，装不下自动退化为可滚动，
   避免 absolute 居中 + overflow:hidden 在 1366×768 / 手机上把卡片上下切掉 */
body.login {
    /* ---- 配色变量（由登录页工具条按色板写入，下面括号内是米白默认套的兜底） ----
       与数字平台 login-theme.ts 完全同构：
       --mz-h 色相 / --mz-s 饱和度 / --mz-l 卡面明度 / --zone-l 左区 / --zone-r 右区 */
    --mz-h: 36;
    --mz-s: 14%;
    --mz-l: 35%;
    --zone-l: #FAF7F0;
    --zone-r: #FFFFFF;
    --mz-shift: 0px;                  /* 登录框水平位移：居左 -25vw / 居中 0 / 居右 +25vw */
    --mz-gold: #C9A96A;
    --mz-gold-soft: #E3C88C;

    background-color: var(--zone-l) !important;
    background-image: linear-gradient(90deg, var(--zone-l) 0 50%, var(--zone-r) 50% 100%) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: 0 0 !important;
    font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    min-height: 100vh !important;
    display: grid !important;               /* 单列网格：卡片横向位置交给 justify-self 精确控制 */
    grid-template-columns: 1fr !important;
    align-content: safe center !important;  /* 装得下竖直居中；装不下自动退化为顶部对齐，不会被推出屏幕 */
    justify-items: center !important;
    position: relative !important;          /* 方格层、品牌区、工具条、署名都以此层为定位基准 */
    margin: 0 !important;
    padding: 32px 0 !important;            /* v5.1 上下对称 32px：与数字平台 auth.vue 严格垂直居中一致。
                                              工具条/品牌区都是 fixed 不占文档流，无需再为切换条预留 76px 顶距；
                                              原 76/28 非对称把卡片中心下推了 24px，是看着偏低的根因。 */
    box-sizing: border-box !important;
    overflow: auto !important;
}

/* 1.0 登录框位置：居左 / 居中 / 居右
      卡片位置只看 justify-self + 单侧 margin。
      绝不再用 justify-content 配 margin:auto——body 里只要还有第二个在流元素，
      margin:auto 就会先把自由空间吃干净，justify-content 一点空间都分不到，点了等于没点
      （4.7 及以前「位置怎么点都不变」就是这个原因，见 1.2）。
      间距取「卡片中心落在视口 25% / 75% 处」，220 是卡片半宽；
      max() 兜住 24px 下限，窗口再窄也只会贴边，不会出界 */
body.login[data-align="left"] {
    padding-left: 0 !important;
}

body.login[data-align="right"] {
    padding-right: 0 !important;
}

body.login #login {
    justify-self: center !important;
}

body.login[data-align="left"] #login {
    justify-self: start !important;
    margin-left: max(24px, calc(25vw - 220px)) !important;
    margin-right: 0 !important;
}

body.login[data-align="right"] #login {
    justify-self: end !important;
    margin-left: 0 !important;
    margin-right: max(24px, calc(25vw - 220px)) !important;
}

/* 1.2 语言切换器（WordPress 自带 .language-switcher）必须脱离文档流。
      它是 body 的直接子元素，宽 0、高 24，会作为第二个网格项参与布局。
      4.7 及以前用 flex + #login{margin:auto} 时，它和卡片一共四个 auto 边距平分自由空间，
      卡片被硬挤到偏左 290px；点居左/居右时 justify-content 无空间可分配，卡片几乎不动
      ——这才是「位置怎么点都不变」的真正原因，与缓存无关。
      这里保留 DOM（无障碍仍可读），只把它移出布局。 */
body.login > .language-switcher {
    position: absolute !important;
    left: -9999px !important;
    top: 0 !important;
    width: 1px !important;
    margin: 0 !important;
}

/* 1.1 方格层：左区 7.5%、右区 5.5%，用 clip-path 在 50% 硬切，
      与数字平台一致（卡片居中压在中线上，接缝不可见） */
body.login::before,
body.login::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--mz-grid) 0 1px, transparent 1px),
        linear-gradient(to bottom, var(--mz-grid) 0 1px, transparent 1px);
    background-position: -1px -1px;
    background-size: 44px 44px;
}
body.login::before { --mz-grid: rgb(31 42 30 / 7.5%); clip-path: inset(0 50% 0 0); }
body.login::after  { --mz-grid: rgb(31 42 30 / 5.5%); clip-path: inset(0 0 0 50%); }

/* 2. 原深绿光晕圆圈 —— 浅底上会变三团脏灰，整体停用（保留选择器做兜底） */
.bg-circle { display: none !important; }

/* 3. 卡片容器：深咖卡面 + 14px 深色垫层 + 四级自然投影
      卡面 / 垫层全由 --mz-h/--mz-s/--mz-l 派生，与 login.vue 的 .mz-inner / .mz-mat 同公式 */
body.login #login {
    position: relative !important;
    top: auto !important; left: auto !important;
    transform: none !important;            /* 位置改用网格对齐 + 侧边距控制，不用位移 */
    transition: none !important;           /* 切换位置不做动画，避免截到中间态 */
    margin: 0 !important;                  /* 不能用 auto：auto 边距会吸收自由空间，把对齐规则架空 */
    float: none !important;
    flex: none !important;
    background:
        linear-gradient(168deg,
            hsl(var(--mz-h) calc(var(--mz-s) + 3%) var(--mz-l)) 0%,
            hsl(var(--mz-h) calc(var(--mz-s) + 2%) calc(var(--mz-l) - 2%)) 52%,
            hsl(var(--mz-h) calc(var(--mz-s) + 2%) calc(var(--mz-l) - 4%)) 100%) !important;
    border: 1px solid rgb(201 169 106 / 46%);
    border-radius: 24px;
    box-shadow:
        0 0 0 14px hsl(var(--mz-h) calc(var(--mz-s) + 5%) calc(var(--mz-l) * 0.58)),
        0 5px 16px rgb(33 24 14 / 26%),
        0 16px 32px -8px rgb(33 24 14 / 30%),
        0 36px 62px -18px rgb(33 24 14 / 32%),
        0 64px 110px -46px rgb(33 24 14 / 36%);
    padding: 34px 34px 26px 34px;
    width: calc(100% - 48px) !important;   /* 两侧留出垫层 14px + 余量 */
    max-width: 440px !important;
    box-sizing: border-box !important;
    z-index: 10;
    color: rgba(247, 242, 232, .92);
}

/* 3.1 卡面鎏金跑马灯：一道金色亮弧沿边框绕圈，7 秒一圈，无限循环
       与数字平台 .mz-card::before 同参数（196° 起亮、348° 最亮 #fff7e4、7s linear infinite） */
@property --mz-ang {
    inherits: false;
    initial-value: 0deg;
    syntax: '<angle>';
}

body.login #login::before {
    position: absolute;
    inset: -1px;
    z-index: 3;
    padding: 1.6px;
    content: '';
    pointer-events: none;
    background: conic-gradient(
        from var(--mz-ang),
        rgb(201 169 106 / 0%) 0deg,
        rgb(201 169 106 / 0%) 196deg,
        rgb(206 178 116 / 28%) 296deg,
        rgb(224 194 136 / 85%) 330deg,
        #fff7e4 348deg,
        rgb(224 194 136 / 45%) 356deg,
        rgb(201 169 106 / 0%) 360deg
    );
    border-radius: 25px;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: mz-ang-rot 7s linear infinite;
}

@keyframes mz-ang-rot {
    to { --mz-ang: 360deg; }
}

/* 系统开了「减少动态效果」时停转，只留静态金边 */
@media (prefers-reduced-motion: reduce) {
    body.login #login::before { animation: none; }
}

/* 4. Logo */
body.login #login h1 { display: flex; justify-content: center; margin-bottom: 16px; padding: 0; }
body.login #login h1 a {
    background-image: url('../images/logo.png');
    background-size: 74%; background-repeat: no-repeat; background-position: center;
    background-color: rgba(255, 250, 240, .10);
    width: 96px; height: 96px; display: block; text-indent: -9999px;
    border-radius: 22px;
    box-shadow: inset 0 0 0 1px rgba(201, 169, 106, .45), 0 10px 22px -12px rgba(0, 0, 0, .50);
    transition: all .3s ease;
}
body.login #login h1 a:hover { background-color: rgba(255, 250, 240, .18); transform: translateY(-2px); }
body.login #login h1 a:focus { box-shadow: inset 0 0 0 1px rgba(201, 169, 106, .75), 0 10px 22px -12px rgba(0, 0, 0, .50); outline: none; }

/* 5. WordPress 原生提示框 —— 彻底清除外壳，只留文字 */
body.login .message,
body.login #login_error,
body.login .success,
body.login .notice {
    background: transparent !important;
    border: none !important;
    border-left: none !important;
    box-shadow: none !important;
    padding: 0 0 12px 0 !important;
    margin: 0 0 12px 0 !important;
    color: rgba(247, 242, 232, .78) !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}
body.login .message p,
body.login #login_error p { color: inherit !important; margin: 0 !important; }
body.login .message a { color: #C9A96A !important; }

/* 6. 自定义标题与副标题 */
.login-custom-header { text-align: center; margin-bottom: 16px; }
.login-custom-header h2 { color: #FAF5EA; font-size: 26px; font-weight: 700; margin: 0 0 8px 0; letter-spacing: 1px; text-shadow: none; }
.login-custom-header p { color: rgba(201, 169, 106, .92); font-size: 14px; margin: 0; letter-spacing: 1.5px; }

/* 7. 系统提示框 —— 一行排完：字号收到 11px、内边距与图标同步收档，
      文案同时改成真实有效期（见 functions.php 4.2），440px 卡宽下实测一行不折 */
.login-custom-notice {
    background: rgba(0, 0, 0, .16); border: 1px solid rgba(201, 169, 106, .26);
    border-radius: 12px; padding: 10px 12px; margin-bottom: 18px;
    font-size: 11px; color: rgba(247, 242, 232, .84);
    display: flex; align-items: center; gap: 8px; line-height: 1.5;
    letter-spacing: .2px;
    text-align: left;
}
.login-custom-notice strong { color: #E3C88C; font-weight: 600; }
.login-custom-notice .dashicons { font-size: 17px; width: 17px; height: 17px; color: #C9A96A; margin-top: 0; flex-shrink: 0; }

/* 8. 所有表单 —— 彻底透明化 */
body.login form {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin-top: 0;
}

body.login form label {
    color: rgba(250, 245, 234, .90) !important;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

body.login form input[type="text"],
body.login form input[type="email"],
body.login form input[type="password"],
body.login form input[type="search"],
body.login form input[type="url"] {
    color: #FAF5EA;
    border: 1px solid rgba(201, 169, 106, .30);
    border-radius: 10px;
    padding: 0 16px;
    font-size: 15px;
    height: 52px;
    line-height: 52px;
    background: var(--mz-in, #3D3529);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
    transition: border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
    width: 100%;
    box-sizing: border-box;
}

body.login form input[type="text"]:focus,
body.login form input[type="email"]:focus,
body.login form input[type="password"]:focus,
body.login form input[type="search"]:focus,
body.login form input[type="url"]:focus {
    border-color: rgba(201, 169, 106, .78);
    background: var(--mz-in-focus, #40382B);
    box-shadow: 0 0 0 3px rgba(201, 169, 106, .16);
    outline: none;
}

body.login form input::placeholder { color: rgba(250, 245, 234, .35); }

/* 8.1 密码框容器 —— 高度固定 52px */
body.login .wp-pwd {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 52px !important;
}
body.login .wp-pwd input[type="password"],
body.login .wp-pwd input[type="text"] {
    padding-right: 52px !important;
    height: 52px !important;
    line-height: 52px !important;
}

/* 8.2 小眼睛按钮 —— 精确 50% + translateY(-50%) */
body.login .wp-hide-pw,
body.login .button.wp-hide-pw,
body.login .wp-hide-pw:hover,
body.login .wp-hide-pw:focus,
body.login .wp-hide-pw:active {
    position: absolute !important;
    top: 50% !important;
    bottom: auto !important;
    right: 10px !important;
    left: auto !important;
    margin: 0 !important;
    transform: translateY(-50%) !important;   /* ★ 关键，用 transform 精确定位 */
    width: 32px !important;
    height: 32px !important;
    min-height: 0 !important;
    max-height: none !important;
    line-height: 32px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
body.login .wp-hide-pw .dashicons,
body.login .button.wp-hide-pw .dashicons {
    color: rgba(250, 245, 234, .55) !important;
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;
    transition: color .3s ease;
}
body.login .wp-hide-pw:hover .dashicons,
body.login .button.wp-hide-pw:hover .dashicons {
    color: #E3C88C !important;
}
body.login .wp-hide-pw .dashicons-hidden {
    color: rgba(201, 169, 106, .90) !important;
}

/* 9. 记住我 */
body.login #loginform .forgetmenot {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    margin-top: 4px;
}
body.login #loginform .forgetmenot label {
    display: flex !important;
    align-items: center !important;
    color: rgba(250, 245, 234, .80) !important;
    font-weight: normal;
    font-size: 14px;
    line-height: 1 !important;
    margin: 0 !important;
    cursor: pointer;
}
body.login #loginform .forgetmenot input[type="checkbox"],
body.login form input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    border: 1.5px solid rgba(201, 169, 106, .55) !important;
    border-radius: 4px !important;
    background: rgba(0, 0, 0, .22) !important;
    background-image: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    margin: 0 8px 0 0 !important;
    position: relative !important;
    vertical-align: middle !important;
    transition: all .3s !important;
}
body.login #loginform .forgetmenot input[type="checkbox"]::before,
body.login #loginform .forgetmenot input[type="checkbox"]::after,
body.login form input[type="checkbox"]::before,
body.login form input[type="checkbox"]::after {
    content: none !important;
    display: none !important;
}
body.login #loginform .forgetmenot input[type="checkbox"]:checked,
body.login form input[type="checkbox"]:checked {
    background: #C9A96A !important;
    border-color: #C9A96A !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3e%3cpath fill='none' stroke='%233B352D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 5l3.5 3.5L11 1.5'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 11px 9px !important;
}

/* 9.1 "记住我"旁边的问号图标 */
body.login #loginform .forgetmenot .dashicons-editor-help,
body.login #loginform .forgetmenot .dashicons-info,
body.login #loginform .forgetmenot .dashicons {
    color: rgba(250, 245, 234, .45) !important;
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
    transition: color .3s ease;
}
body.login #loginform .forgetmenot .dashicons-editor-help:hover,
body.login #loginform .forgetmenot .dashicons-info:hover,
body.login #loginform .forgetmenot .dashicons:hover {
    color: #E3C88C !important;
}

/* 10. 主按钮 */
body.login form .button-primary,
body.login form #wp-submit,
body.login form .submit .button,
body.login form input[type="submit"] {
    background: var(--mz-btn, #494237) !important;
    border: 1px solid rgba(201, 169, 106, .45) !important;
    border-radius: 10px;
    height: 50px;
    line-height: 48px;
    font-size: 16px;
    font-weight: 600;
    text-shadow: none;
    color: #FBF6EA !important;
    box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .70), inset 0 1px 0 rgba(255, 255, 255, .07);
    transition: all .3s ease;
    width: 100%;
    margin-top: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    float: none !important;
    padding: 0 20px;
    box-sizing: border-box;
}
body.login form .button-primary:hover,
body.login form #wp-submit:hover,
body.login form .submit .button:hover,
body.login form input[type="submit"]:hover {
    background: var(--mz-btn-hover, #544C40) !important;
    border-color: rgba(201, 169, 106, .78) !important;
    transform: translateY(-1px);
    box-shadow: 0 14px 26px -14px rgba(0, 0, 0, .78), inset 0 1px 0 rgba(255, 255, 255, .09);
}
body.login form .button-primary:focus,
body.login form #wp-submit:focus,
body.login form input[type="submit"]:focus {
    outline: none;
    border-color: rgba(201, 169, 106, .95) !important;
    box-shadow: 0 0 0 3px rgba(201, 169, 106, .20);
}

/* 11. 注册 / 找回密码说明文字 */
body.login #reg_passmail,
body.login #lostpasswordform p.description {
    color: rgba(250, 245, 234, .58) !important;
    font-size: 13px;
    text-align: center;
    margin-top: 20px;
    line-height: 1.6;
}

/* 12. 底部链接 */
body.login #nav, body.login #backtoblog {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 0 !important;
    margin: 20px 0 0 0 !important;
    font-size: 13px !important;
    color: rgba(250, 245, 234, .30) !important;
}
body.login #nav a, body.login #backtoblog a {
    color: rgba(250, 245, 234, .62) !important;
    text-decoration: none !important;
    transition: color .3s;
}
body.login #nav a:hover, body.login #backtoblog a:hover { color: #E3C88C !important; }

.custom-login-footer { margin-top: 20px; text-align: center; font-size: 12px; color: rgba(250, 245, 234, .42); line-height: 1.8; }
.custom-login-footer p { margin: 0 0 2px 0; color: inherit; }
.custom-login-footer a { color: rgba(201, 169, 106, .85); text-decoration: none; transition: color .3s; }
.custom-login-footer a:hover { color: #E3C88C; }
.custom-login-footer .dashicons { color: rgba(201, 169, 106, .85); }

/* 12.1 技术开发署名 —— 在登录框内，紧跟版权那一行
       它在 .custom-login-footer 里，随版权块一起被脚本搬进 #login，
       所以这里按「卡内深底浅字」配色，不再做定位 */
.mz-dev-credit {
    margin: 4px 0 0;
    text-align: center;
    font-size: 11.5px;
    line-height: 16px;
    letter-spacing: .08em;
    color: rgba(250, 245, 234, .40);
    white-space: nowrap;
}

/* WordPress 自带提示被过滤掉后会留下一个空容器，别让它占出 24px 空白 */
body.login #login-message:empty { display: none !important; }

/* 13. 隐藏多余元素 */
body.login #language-switcher,
body.login .privacy-policy-page-link { display: none !important; }

/* 14. 密码强度提示 */
body.login .pw-weak .pw-weak-text,
body.login #pass-strength-result {
    background: rgba(0, 0, 0, .22) !important;
    border: 1px solid rgba(201, 169, 106, .25) !important;
    color: rgba(250, 245, 234, .82) !important;
    border-radius: 8px;
    padding: 8px 12px;
}

/* 15. 覆盖 Chrome 自动填充白底（内阴影色必须与输入框一致，否则会闪一版白） */
body.login form input:-webkit-autofill,
body.login form input:-webkit-autofill:hover,
body.login form input:-webkit-autofill:focus,
body.login form input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--mz-in, #3D3529) inset !important;
    -webkit-text-fill-color: #FAF5EA !important;
    caret-color: #FAF5EA !important;
    transition: background-color 5000s ease-in-out 0s !important;
    border: 1px solid rgba(201, 169, 106, .30) !important;
    border-radius: 10px !important;
}
body.login form input[type="password"]:not(:placeholder-shown),
body.login form input[type="password"]:valid {
    background: var(--mz-in, #3D3529) !important;
    color: #FAF5EA !important;
}

/* =========================================
   16. 舞台件：左侧品牌区 + 顶部切换条
       结构与取值全部照 apps/web-antd/src/layouts/auth.vue、components/auth-toolbar.vue
   ========================================= */

/* 16.1 品牌区：与登录框反向站位，保证两者永不重叠、任何宽度都不出界
       居中 / 居右 → 品牌区在左；居左 → 品牌区在右
       位置用 left/right + max() 兜底，不用「百分比减固定值」（那套会在窄屏把品牌区推出屏幕） */
.mz-brand {
    position: fixed;
    top: 50%;
    left: clamp(24px, 7vw, 148px);
    right: auto;
    z-index: 2;
    width: 400px;
    color: #1f2a1e;
    pointer-events: none;
    transform: translateY(-50%);
    transition: none;
}
body.login[data-align="right"] .mz-brand {
    left: clamp(24px, 7vw, 148px);
    right: auto;
}
body.login[data-align="left"] .mz-brand {
    left: auto;
    right: max(clamp(24px, 7vw, 148px), calc(25vw - 200px));
}

.mz-eyebrow {
    display: flex;
    gap: 12px;
    align-items: center;
    margin: 0 0 20px;
    font-size: .74rem;
    color: #5a6b58;
    text-transform: uppercase;
    letter-spacing: .22em;
    animation: mz-fade-up 1s cubic-bezier(.19, 1, .22, 1) .15s both;
}
.mz-eyebrow::before {
    width: 34px;
    height: 1px;
    content: '';
    background: #b0544a;
}
/* 居左时品牌区移到右侧，仍左对齐（与默认一致，不做文字镜像） */

.mz-brand-logo {
    display: flex;
    align-items: center;
    animation: mz-fade-up 1s cubic-bezier(.19, 1, .22, 1) .25s both;
}

.mz-mark {
    font-family: 'Poppins', 'Inter', -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: clamp(38px, 3.7vw, 56px);
    font-weight: 900;
    line-height: 1;
    color: #1f2a1e;
    text-transform: lowercase;
    letter-spacing: -.05em;
    /* 错版压印立体效果：与数字平台 .mzgy-mark、官网首页 .logo-mark 同参数。
       用 em 等比，字号随屏幕变化时阴影同步缩放，不会脱节 */
    text-shadow:
        0.058em 0.058em 0 rgb(203 195 175 / 95%),
        0.117em 0.117em 0 rgb(203 195 175 / 45%);
}
.mz-mark .mz { color: #b0544a; }

.mz-cn {
    display: flex;
    align-items: center;
    margin-left: 18px;
    font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'SimSun', serif;
    font-size: clamp(15px, 1.15vw, 19px);
    font-weight: 400;
    line-height: 1;
    color: #5a6b58;
    letter-spacing: .3em;
    transform: translateY(.33em);
}
.mz-cn::before {
    flex: none;
    width: 1px;
    height: 1.15em;
    margin-right: 18px;
    content: '';
    background: rgb(31 42 30 / 16%);
    transform: translateY(1px);
}

.mz-brand-sub {
    margin: 20px 0 0;
    font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'SimSun', serif;
    font-size: .72rem;
    color: #5a6b58;
    letter-spacing: .32em;
    opacity: .72;
    animation: mz-fade-up 1s cubic-bezier(.19, 1, .22, 1) .6s both;
}

@keyframes mz-fade-up {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 16.2 顶部切换条：配色 / 位置 / 语言 / 明暗 */
.mz-tb-bar {
    position: fixed;
    z-index: 30;
    top: clamp(16px, 2.6vh, 32px);
    left: 50%;
    display: flex;
    gap: 2px;
    align-items: center;
    padding: 4px 6px;
    background: rgb(255 255 255 / 86%);
    border: 1px solid #e7e1d2;
    border-radius: 999px;
    box-shadow: 0 8px 20px -12px rgb(70 90 70 / 34%);
    transform: translateX(-50%);
    backdrop-filter: blur(10px);
}
.mz-tb-wrap { position: relative; display: flex; align-items: center; height: 30px; }

.mz-tb {
    position: relative;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    color: #5c6b5e;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: 999px;
    transition: background .18s, color .18s;
}
.mz-tb:hover { color: #3f4d42; background: #f2efe4; }
.mz-tb.is-on { color: #8a7334; background: #f7f1e0; }
.mz-tb svg { width: 17px; height: 17px; }

/* 弹层：配色在图标左侧垂直居中；位置在图标下方一排水平居中 */
.mz-pop {
    position: absolute;
    z-index: 40;
    display: none;
    background: #fff;
    border: 1px solid #e7e1d2;
    border-radius: 14px;
    box-shadow: 0 18px 40px -22px rgb(70 90 70 / 45%);
}
.mz-pop.is-open { display: flex; }
.mz-pop-side {
    top: 50%;
    right: calc(100% + 10px);
    padding: 10px;
    transform: translateY(-50%);
}
.mz-pop-row {
    top: calc(100% + 10px);
    left: 50%;
    gap: 4px;
    padding: 6px;
    transform: translateX(-50%);
}

.mz-swatches {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 7px;
}
.mz-sw {
    position: relative;
    width: 18px;
    height: 18px;
    padding: 0;
    cursor: pointer;
    border: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgb(31 42 30 / 12%);
    transition: transform .16s;
}
.mz-sw:hover { transform: scale(1.12); }
.mz-sw.is-on::after {
    position: absolute;
    inset: -4px;
    content: '';
    border: 1.5px solid #8a7334;
    border-radius: 50%;
}

.mz-pop-item {
    padding: 6px 12px;
    font-size: 12.5px;
    color: #4d5c4f;
    white-space: nowrap;
    cursor: pointer;
    background: transparent;
    border: 0;
    border-radius: 9px;
}
.mz-pop-item:hover { background: #f4f1e6; }
.mz-pop-item.is-on { color: #8a7334; background: #f7f1e0; }

/* 1520px 以下：品牌区各档字号收一档，避免长英文行压到登录卡（平台原值在 1366 会重叠 33px） */
@media (max-width: 1520px) {
    .mz-mark { font-size: clamp(34px, 3vw, 44px); }
    .mz-cn { margin-left: 14px; font-size: clamp(13px, 1vw, 16px); letter-spacing: .22em; }
    .mz-brand-sub { font-size: .64rem; letter-spacing: .2em; }
}

/* 窄屏：品牌区隐藏，登录框贴边留 24px（同 auth.vue 断点） */
@media (max-width: 1080px) {
    .mz-brand { display: none; }
    .mz-pop-side { right: calc(100% + 6px); }
}

/* 手机：标题字号收一档，避免「明珠果苑内容管理系统」被拆成「管理系 / 统」两行 */
@media (max-width: 480px) {
    .login-custom-header h2 { font-size: 21px; letter-spacing: .5px; }
}

/* =========================================
   17. 深色模式（body.mz-dark）
   ========================================= */
body.login.mz-dark {
    background-image: linear-gradient(90deg,
        hsl(var(--mz-h) 9% 15%) 0 50%,
        hsl(var(--mz-h) 7% 8%) 50% 100%) !important;
    color: #e6eee0;
}
body.login.mz-dark::before { --mz-grid: rgb(226 234 220 / 7%); }
body.login.mz-dark::after  { --mz-grid: rgb(226 234 220 / 4.5%); }

body.login.mz-dark #login {
    background: linear-gradient(168deg,
        hsl(var(--mz-h) 10% 20%) 0%,
        hsl(var(--mz-h) 12% 16%) 52%,
        hsl(var(--mz-h) 10% 14%) 100%) !important;
    box-shadow:
        0 0 0 14px hsl(var(--mz-h) 12% 9%),
        0 6px 18px rgb(0 0 0 / 42%),
        0 18px 34px -8px rgb(0 0 0 / 44%),
        0 38px 64px -18px rgb(0 0 0 / 46%),
        0 66px 112px -46px rgb(0 0 0 / 50%);
}
body.login.mz-dark #login h1 a { background-color: rgb(226 234 220 / 8%); }
body.login.mz-dark #login h1 a:hover { background-color: rgb(226 234 220 / 14%); }
body.login.mz-dark form input[type="text"],
body.login.mz-dark form input[type="email"],
body.login.mz-dark form input[type="password"],
body.login.mz-dark form input[type="search"],
body.login.mz-dark form input[type="url"] {
    background: var(--mz-in, #232a26);
}
body.login.mz-dark form input[type="text"]:focus,
body.login.mz-dark form input[type="email"]:focus,
body.login.mz-dark form input[type="password"]:focus,
body.login.mz-dark form input[type="search"]:focus,
body.login.mz-dark form input[type="url"]:focus {
    background: var(--mz-in-focus, #28302b);
}
body.login.mz-dark form .button-primary,
body.login.mz-dark form #wp-submit,
body.login.mz-dark form .submit .button,
body.login.mz-dark form input[type="submit"] {
    background: var(--mz-btn, #333c35) !important;
}
body.login.mz-dark form .button-primary:hover,
body.login.mz-dark form #wp-submit:hover,
body.login.mz-dark form .submit .button:hover,
body.login.mz-dark form input[type="submit"]:hover {
    background: var(--mz-btn-hover, #3b453d) !important;
}
body.login.mz-dark .login-custom-notice { background: rgb(0 0 0 / .22); }
body.login.mz-dark #nav,
body.login.mz-dark #backtoblog { color: rgb(226 234 220 / .30) !important; }
body.login.mz-dark #nav a,
body.login.mz-dark #backtoblog a { color: rgb(226 234 220 / .62) !important; }

/* 深色下的品牌区 */
body.login.mz-dark .mz-brand { color: #e6eee0; }
body.login.mz-dark .mz-eyebrow { color: #8b9a88; }
body.login.mz-dark .mz-eyebrow::before { background: #c96a5c; }
body.login.mz-dark .mz-mark {
    color: #e8efe2;
    /* 深色下同款错版压印，改用墨绿硬影，否则浅褐在深底上会发灰 */
    text-shadow:
        0.058em 0.058em 0 rgb(6 12 6 / 55%),
        0.117em 0.117em 0 rgb(6 12 6 / 28%);
}
body.login.mz-dark .mz-mark .mz { color: #c96a5c; }
body.login.mz-dark .mz-cn { color: #8b9a88; }
body.login.mz-dark .mz-cn::before { background: rgb(226 234 220 / 18%); }
body.login.mz-dark .mz-brand-sub { color: #7a8878; }

/* 深色下的署名与工具条 */
body.login.mz-dark .mz-dev-credit { color: rgb(226 234 220 / 45%); }
body.login.mz-dark .mz-tb-bar {
    background: rgb(30 38 30 / 82%);
    border-color: rgb(226 234 220 / 14%);
}
body.login.mz-dark .mz-tb { color: #9aa896; }
body.login.mz-dark .mz-tb:hover { color: #dfe9d8; background: rgb(226 234 220 / 10%); }
body.login.mz-dark .mz-tb.is-on { color: #e0c884; background: rgb(226 234 220 / 12%); }
body.login.mz-dark .mz-pop {
    background: #232b25;
    border-color: rgb(226 234 220 / 14%);
}
body.login.mz-dark .mz-pop-item { color: #b9c6b4; }
body.login.mz-dark .mz-pop-item:hover { background: rgb(226 234 220 / 8%); }
body.login.mz-dark .mz-pop-item.is-on { color: #e0c884; background: rgb(226 234 220 / 12%); }

@media (prefers-reduced-motion: reduce) {
    .mz-brand, .mz-eyebrow, .mz-brand-logo, .mz-brand-sub,
    body.login #login { transition: none !important; animation: none !important; }
}

/* ============================================================================
   14. 卡面尺寸统一 —— 登录 / 注册 / 找回密码 三个页面共用同一个 #login
       基准：数字管理平台 .mz-card，实测 440 × 793.2，
             1080 高视口下卡顶边落在 143.4px。
       做法：三个页面的内容块数量不同（登录 7 块、注册 6 块），
             所以不能靠固定边距对齐；这里把高度定在 793.2，
             先清掉顶层子块的外边距，再由 flex 把余量均分，
             避免某一段被撑出一大块空档。
   ============================================================================ */
@media (min-width: 1000px) {
    body.login #login {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        /* 视口够高时就是 793.2；笔记本屏不够高时按视口收一点，不撑出滚动条 */
        min-height: min(793.2px, calc(100vh - 32px));
    }
    body.login #login > * {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    /* logo 底到标题 16px，与平台 .mz-logo 的 margin 一致 */
    body.login #login h1 a { margin-bottom: 0; }
}