/* =====================================================
   auth.css — 登录 / 注册 / 忘记密码 / 重置密码 / 错误页（404·500）专用样式
   ------------------------------------------------------------
   配色全部使用全站主题变量（variables.css + 后台生成的 theme.css），
   本文件不再自带 :root 变量定义 —— 页面随站点主题（后台可自定义主色）自动变化。
   以上页面均包裹在统一外壳 base.html 内，故 variables.css / theme.css 始终可用。
   ===================================================== */

/* ---------- 外壳适配：卡片居中于主内容区 ---------- */
/* 不让 body 变 flex，避免破坏全站 header/sidebar/footer 布局 */
.auth-page .app-main { position: relative; }
.auth-page .app-main-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    position: relative;
    z-index: 1;
    padding: 28px 32px;
}

/* =====================================================
   登录 / 注册页（body.auth-fullscreen）：
   隐藏全站外壳（顶部菜单栏 / 左侧栏 / 右侧栏 / 页脚 / 抽屉 / 移动底栏），卡片全屏居中。
   仅登录、注册两页带此 class；忘记密码、重置密码、404/500 仍保留外壳。
   ===================================================== */
.auth-fullscreen .app-header,
.auth-fullscreen .app-header-mobile,
.auth-fullscreen .app-side-col,
.auth-fullscreen .app-right,
.auth-fullscreen .app-footer,
.auth-fullscreen .app-drawer,
.auth-fullscreen .app-drawer-mask,
.auth-fullscreen .app-bottomnav {
    display: none !important;
}
/* 外壳退化为块级单列，主内容铺满整屏 */
.auth-fullscreen .app-shell { display: block; max-width: none; }
.auth-page.auth-fullscreen .app-main-inner { min-height: 100vh; }

/* ---------- 装饰背景（随主题浅/深自动切换） ---------- */
.auth-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: linear-gradient(160deg, var(--color-bg-page) 0%, var(--color-bg-card-2) 100%); }
.auth-bg-grid { position: absolute; inset: 0; background-image: linear-gradient(color-mix(in srgb, var(--color-text-title) 8%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--color-text-title) 8%, transparent) 1px, transparent 1px); background-size: 40px 40px; }
.auth-bg-glow { position: absolute; width: 420px; height: 420px; border-radius: 50%; filter: blur(80px); opacity: .5; }
.auth-bg-glow--a { top: -120px; left: -80px; background: var(--color-accent); }
.auth-bg-glow--b { bottom: -140px; right: -100px; background: var(--color-accent-dark); }

/* ---------- 登录 / 注册 卡片 ---------- */
.auth-wrap { position: relative; z-index: 1; width: 100%; max-width: 480px; padding: 20px; }
.auth-card { position: relative; background: var(--color-bg-card); border-radius: 20px; padding: 36px 32px 30px; box-shadow: 0 20px 60px color-mix(in srgb, var(--color-text-title) 20%, transparent); overflow: hidden; }
.auth-card-bar { position: absolute; top: 0; left: 0; right: 0; height: 5px; background: var(--color-accent-gradient); }
/* 登录 / 注册页（.auth-fullscreen）：卡片顶部方角、底部保留圆角（用户要求上方不要圆角） */
.auth-fullscreen .auth-card { border-radius: 0 0 20px 20px; }
.auth-back { position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 4px; font-size: 15px; color: var(--color-text-secondary); text-decoration: none; white-space: nowrap; }
.auth-back:hover { color: var(--color-accent); }
.auth-head { text-align: center; margin: 18px 0 22px; }
.auth-logo { margin-bottom: 12px; }
.auth-logo-mark { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; background: var(--color-accent-gradient); color: var(--color-accent-ink); font-size: 24px; font-weight: 800; box-shadow: 0 6px 18px color-mix(in srgb, var(--color-accent) 40%, transparent); }
/* ---------- 图片版 LOGO（后台配了 site_logo 时）---------- */
/* 与顶栏 .app-logo-img 同款处理：
   - 容器同时挂 .auth-logo-mark（写死 52×52 方块），本类必须排在它之后并显式释放宽高/底色/
     圆角/投影，否则透明 PNG 被压回方块、且后面会露出渐变底；
   - 高度定档、宽度随源图比例（height 定值 + width:auto），任何比例都完整显示、不变形不裁切；
   - 微光复用 --logo-glow-* 变量（多层 blur 递增的 drop-shadow 叠出扩散感）。
     呼吸相位与 hover 亮度的**声明**在 header.css 的 `.app-logo-img, .auth-logo-img`
     规则里（本文件只负责消费，不重复声明，否则两处各跑一条同名动画会互相覆盖）；
     ⚠️ 禁用 drop-shadow 第 4 个 spread 参数——本机 Chromium 会把整条 filter 判为无效（见 header.css）。 */
.auth-logo-img { width: auto; height: auto; background: none; box-shadow: none; border-radius: 0; }
.auth-logo-img img {
    height: 52px; width: auto; display: block;
    filter:
        drop-shadow(0 0 calc(var(--logo-glow-blur) * .22 * var(--logo-glow-boost)) color-mix(in srgb, var(--logo-glow-color) calc(var(--logo-glow-alpha) * 100% * var(--logo-glow-boost)), transparent))
        drop-shadow(0 0 calc(var(--logo-glow-blur) * .55 * var(--logo-glow-boost)) color-mix(in srgb, var(--logo-glow-color) calc(var(--logo-glow-alpha) * 68% * var(--logo-glow-boost)), transparent))
        drop-shadow(0 0 calc(var(--logo-glow-blur) * var(--logo-glow-boost)) color-mix(in srgb, var(--logo-glow-color) calc(var(--logo-glow-alpha) * 40% * var(--logo-glow-boost)), transparent))
        drop-shadow(0 0 calc(var(--logo-glow-blur) * 1.9 * var(--logo-glow-boost)) color-mix(in srgb, var(--logo-glow-color) calc(var(--logo-glow-alpha) * 20% * var(--logo-glow-boost)), transparent))
        drop-shadow(0 1px 2px color-mix(in srgb, #000 14%, transparent));
}
.auth-title { font-size: 22px; font-weight: 800; color: var(--color-text-title); margin: 0 0 4px; }
.auth-sub { font-size: 13px; color: var(--color-text-secondary); margin: 0; }
.auth-form { display: flex; flex-direction: column; gap: 16px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; }
/* 注册页「邮箱验证码」字段：默认隐藏，点「发送验证码」后才出现（双类提升特异性以盖过 .auth-field 的 flex） */
.auth-field.auth-field--hidden { display: none; }
.auth-label { font-size: 13px; font-weight: 500; color: var(--color-text-primary); }
.auth-input-wrap { position: relative; display: flex; align-items: center; }
.auth-input-icon { position: absolute; left: 12px; width: 18px; height: 18px; color: var(--color-text-dim); pointer-events: none; }
.auth-input { width: 100%; height: 46px; padding: 0 14px 0 40px; border: 1px solid var(--color-border); border-radius: 10px; background: var(--color-bg-card); color: var(--color-text-primary); font-size: 14px; outline: none; transition: border-color .2s, box-shadow .2s; }
.auth-input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.auth-eye { position: absolute; right: 10px; background: none; border: none; color: var(--color-text-dim); cursor: pointer; padding: 4px; display: inline-flex; }
.auth-eye:hover { color: var(--color-text-primary); }
/* 眼睛图标统一为 16px —— 此前该 SVG 未设宽高被拉伸得很大；与会员资料页 .pf-eye 同尺寸 */
.auth-eye svg { width: 16px; height: 16px; flex-shrink: 0; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.auth-check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; color: var(--color-text-secondary); }
.auth-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.auth-check-box { width: 18px; height: 18px; border-radius: 6px; border: 1px solid var(--color-border-strong); background: var(--color-bg-card); flex-shrink: 0; transition: all .2s; }
.auth-check input:checked + .auth-check-box { background: var(--color-accent); border-color: var(--color-accent); }
.auth-check input:checked + .auth-check-box::after { content: "\2713"; display: flex; align-items: center; justify-content: center; color: var(--color-accent-ink); font-size: 12px; font-weight: 700; height: 100%; }
.auth-link-soft { color: var(--color-accent); text-decoration: none; }
.auth-link-soft:hover { text-decoration: underline; }
.auth-submit { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; border: none; border-radius: 12px; background: var(--color-accent-gradient); color: var(--color-accent-ink); font-size: 15px; font-weight: 700; cursor: pointer; box-shadow: 0 6px 18px color-mix(in srgb, var(--color-accent) 35%, transparent); transition: transform .2s, box-shadow .2s; }
.auth-submit:hover { transform: translateY(-2px); box-shadow: 0 10px 26px color-mix(in srgb, var(--color-accent) 45%, transparent); }
.auth-submit svg { width: 18px; height: 18px; flex-shrink: 0; }
.auth-submit span { flex-shrink: 0; }
.auth-foot { text-align: center; margin-top: 18px; font-size: 13px; color: var(--color-text-secondary); }
.auth-foot a { color: var(--color-accent); text-decoration: none; font-weight: 500; }
.auth-foot a:hover { text-decoration: underline; }

/* ---------- 前台关闭注册时显示的「暂停注册」提示块 ---------- */
/* 主题变量驱动，跟随浅/深主题自动切换；复用卡片已有令牌，避免硬编码色值 */
.auth-closed { text-align: center; padding: 22px 16px; margin-top: 4px; border: 1px dashed var(--color-border-strong); border-radius: 14px; background: color-mix(in srgb, var(--color-bg-card-2) 60%, transparent); }
.auth-closed-badge { display: inline-block; padding: 6px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--color-danger-ink, #fff); background: var(--color-danger, #ef4444); }
.auth-closed-tip { font-size: 18px; font-weight: 700; color: var(--color-text-title); margin: 16px 0 0; }

/* ---------- 登录页面响应式（≤767px / ≤479px / 矮屏横屏）已收敛至 responsive.css（⑦ 登录注册断点） ---------- */

/* =====================================================
   错误页面样式 (404 / 500)
   ===================================================== */
.error-page .auth-wrap { display: flex; align-items: center; justify-content: center; }
.error-wrap { width: 100%; max-width: 480px; text-align: center; }
.error-card { background: var(--color-bg-card); border-radius: 20px; padding: 48px 32px; box-shadow: 0 20px 60px color-mix(in srgb, var(--color-text-title) 20%, transparent); }
.error-icon { font-size: 64px; margin-bottom: 20px; }
.error-icon.flash { color: var(--color-accent); text-shadow: 0 0 20px color-mix(in srgb, var(--color-accent) 35%, transparent), 0 0 60px color-mix(in srgb, var(--color-accent) 15%, transparent); }
.error-title { font-size: 28px; font-weight: 800; color: var(--color-text-title); margin: 0 0 12px; }
.error-sub { font-size: 14px; color: var(--color-text-secondary); margin: 0 0 28px; line-height: 1.6; }
/* 感叹号：主题危险色 + 放大（相对字号） */
.error-bang { color: var(--color-danger); font-size: 1.5em; font-weight: 800; line-height: 0; vertical-align: -0.14em; }
.error-btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 32px; border: none; border-radius: 12px; background: var(--color-accent-gradient); color: var(--color-accent-ink); font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer; box-shadow: 0 6px 18px color-mix(in srgb, var(--color-accent) 35%, transparent); transition: transform .2s, box-shadow .2s; }
.error-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px color-mix(in srgb, var(--color-accent) 45%, transparent); }

/* 灰色小字说明（如「验证码发送至 xx」「收不到？」行） */
.auth-note { font-size: 12px; line-height: 1.7; color: var(--color-text-dim); margin: -4px 0 0; }
/* 验证码输入：等宽数字，居中 */
.auth-input--code { letter-spacing: .4em; text-align: center; font-family: ui-monospace, Consolas, monospace; font-size: 18px; }

/* ============================================================
 * 移动端巡检修复：触控目标扩大 + 密码输入避让可见性按钮
 * ============================================================ */
.auth-eye { width: 36px; height: 36px; right: 4px; top: 50%; transform: translateY(-50%); align-items: center; justify-content: center; padding: 0; }
input[type="password"].auth-input { padding-right: 46px; }
.auth-back { padding: 8px 10px; margin: -8px 0 0 -10px; border-radius: 8px; }
.auth-back:hover { background: var(--color-accent-soft); }
.auth-link-soft { display: inline-block; padding: 8px 6px; }

/* ---------- 图形验证码 ---------- */
/* 2026-10-03 自register.html 的内联 style 迁出（模板禁内联 style）。
   高度 38px 与 .auth-input 同高，圆角走 --radius-sm 以跟随主题圆角体系。 */
.auth-captcha-img {
    height: 38px;
    border-radius: var(--radius-sm);
    margin-left: 8px;
    flex: 0 0 auto;      /* 不被输入框挤压 */
    cursor: pointer;
    user-select: none;
}

/* 注册页「发送验证码」按钮：与 .auth-input 同高同圆角、与 .auth-submit 同强调色系，
   作为输入框后方的实心按钮，贴合注册页视觉语言 */
.auth-code-btn {
    flex: 0 0 auto;
    margin-left: 8px;
    height: 46px;                 /* 与 .auth-input 同高，垂直对齐 */
    padding: 0 16px;
    border: none;
    border-radius: 10px;          /* 与 .auth-input 同圆角 */
    background: var(--color-accent-gradient);
    color: var(--color-accent-ink);
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--color-accent) 30%, transparent);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: box-shadow .2s, opacity .2s;
}
.auth-code-btn:hover:not(:disabled) {
    box-shadow: 0 6px 18px color-mix(in srgb, var(--color-accent) 42%, transparent);
}
.auth-code-btn:disabled { opacity: .55; cursor: not-allowed; }

/* =====================================================
 * 移动端：登录 / 注册（.auth-fullscreen）收紧间距
 * ------------------------------------------------------------
 * 根因：`.auth-page .app-main-inner { padding: 28px 32px }`（0,2,0，无媒体查询）
 *   压过 responsive.css 的 `@media(max-width:991px){.app-main-inner{padding:20px 16px}}`
 *   （0,1,0），导致手机端左右各 32px；再叠加 .auth-wrap(20) + .auth-card(32)，
 *   375 视口下内容仅 ~207px。本段用等特异性 + 后声明 + 媒体查询覆盖，仅作用于全屏页。
 * ===================================================== */
@media (max-width: 767px) {
    .auth-fullscreen .app-main-inner { padding: 12px 0; }
    .auth-fullscreen .auth-wrap { padding: 4px 0; }
    .auth-fullscreen .auth-card { padding: 24px 16px 20px; border-radius: 0 0 18px 18px; }
    .auth-fullscreen .auth-head { margin: 12px 0 16px; }
}
@media (max-width: 479px) {
    .auth-fullscreen .app-main-inner { padding: 8px 0; }
    .auth-fullscreen .auth-card { padding: 20px 14px 18px; }
    .auth-fullscreen .auth-title { font-size: 20px; }
    .auth-fullscreen .auth-head { margin: 10px 0 14px; }
}

/* ---------- 注册页加宽 + 必填红色星号 ---------- */
/* 注册比登录多一个邮箱字段，桌面卡片稍宽（仅注册页，登录保持 480） */
.auth-fullscreen .auth-wrap.auth-wrap--reg { max-width: 520px; }
/* 必填标记：红色星号，无额外说明文字 */
.auth-label .req { color: var(--color-danger); font-weight: 700; margin-left: 2px; }