/* ==========================================================================
   登录 / 注册页 · 武侠视觉（auth-wuxia.css）
   配合 assets/css/wuxia.css 的 --wx-* 设计令牌使用：
   - 日间模式：宣纸（白 + 主题色浅调）底 + 朱印/鎏金描边（令牌由 render_page_head 注入）
   - 夜间 / 护眼模式：宣纸 + 朱红 + 墨棕 + 鎏金（令牌由 wuxia.css 的 [data-theme] 覆盖）
   仅作用于 .auth-page（登录 / 注册两页共用），不改动其它页面。
   ========================================================================== */

/* ================= 一、页面氛围（水墨云雾 + 笺纸格纹） ================= */
.auth-page {
    position: relative;
    overflow: hidden;
    /* 上提一个页头高度并补回顶部内边距：让页面氛围（水墨云雾 / 笺纸格纹）
       铺到页头之后，页头因此保持全透明；滚动时由全站 .header.scrolled
       切换为半透明毛玻璃，与首页顶部导航表现一致 */
    margin-top: calc(-1 * var(--header-height));
    padding: calc(var(--header-height) + 56px) 24px 56px;
    /* 撑满「视口 − 页脚」的剩余高度（body 为纵向 flex 容器、min-height:100vh）：
       内容不超高时页面总高恰好等于视口高度，全屏下不出现多余的竖直滚动条 */
    flex: 1 0 auto;
    min-height: 0;
    --auth-kai: "STKaiti", "KaiTi", "楷体", "Kaiti SC", "STSong", "SimSun", serif;
}

/* 淡淡的水墨云雾与朱砂 / 鎏金光晕 */
.auth-page::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(130% 72% at 50% -10%, var(--wx-gold-soft), transparent 62%),
        radial-gradient(90% 60% at 6% 106%, var(--wx-red-soft), transparent 58%),
        radial-gradient(80% 55% at 102% 100%, var(--wx-gold-soft), transparent 58%);
}

/* 隐约的笺纸格纹（向四周淡出） */
.auth-page::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.32;
    background-image:
        repeating-linear-gradient(0deg, var(--wx-line) 0 1px, transparent 1px 46px),
        repeating-linear-gradient(90deg, var(--wx-line) 0 1px, transparent 1px 46px);
    -webkit-mask-image: radial-gradient(68% 62% at 50% 46%, #000, transparent 78%);
    mask-image: radial-gradient(68% 62% at 50% 46%, #000, transparent 78%);
}

/* ================= 二、牌匾式卡片 ================= */
.auth-box {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 442px;
    padding: 40px 42px 34px;
    border-radius: 18px;
    background: linear-gradient(180deg, var(--wx-paper), var(--wx-paper-2));
    border: 1px solid var(--wx-line-strong);
    box-shadow:
        0 24px 56px var(--wx-plaque-shadow, rgba(90, 62, 27, 0.18)),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5),
        inset 0 0 70px var(--wx-gold-soft);
    animation: authRise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

[data-theme="dark"] .auth-box,
[data-theme="eye-care"] .auth-box {
    background: linear-gradient(180deg, var(--wx-paper), var(--wx-paper-2));
    box-shadow:
        0 24px 56px rgba(40, 26, 12, 0.4),
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 0 70px var(--wx-gold-soft);
}

/* 内层描金细线 */
.auth-box::before {
    content: '';
    position: absolute;
    inset: 9px;
    border: 1px solid var(--wx-line);
    border-radius: 12px;
    pointer-events: none;
}

/* 右下角大字水印（由 data-wm 提供，如「江湖」「侠盟」） */
.auth-box::after {
    content: attr(data-wm);
    position: absolute;
    right: 4px;
    bottom: -30px;
    font-family: var(--auth-kai);
    font-size: 104px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 6px;
    color: var(--wx-gold);
    opacity: 0.09;
    pointer-events: none;
    user-select: none;
}

/* 四角描金角饰 */
.auth-corner {
    position: absolute;
    width: 16px;
    height: 16px;
    border: 1.5px solid var(--wx-line-strong);
    pointer-events: none;
}
.auth-corner.tl { top: 4px; left: 4px; border-right: 0; border-bottom: 0; border-top-left-radius: 14px; }
.auth-corner.tr { top: 4px; right: 4px; border-left: 0; border-bottom: 0; border-top-right-radius: 14px; }
.auth-corner.bl { bottom: 4px; left: 4px; border-right: 0; border-top: 0; border-bottom-left-radius: 14px; }
.auth-corner.br { bottom: 4px; right: 4px; border-left: 0; border-top: 0; border-bottom-right-radius: 14px; }

/* ================= 三、题额（印章 + 楷体标题 + 云纹分隔） ================= */
/* 手机 / 平板：作为卡片顶部的题额区块；电脑端（≥992px）升级为左侧墨色面板 */
.auth-aside {
    position: relative;
    z-index: 1;
    text-align: center;
    margin-bottom: 26px;
}

/* 题诗（仅电脑端横向视图显示） */
.auth-verse { display: none; }

.auth-seal {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--auth-kai);
    font-size: 28px;
    font-weight: 700;
    color: var(--wx-seal-text);
    transform: rotate(-6deg);
    background: linear-gradient(150deg, var(--wx-seal-hi), var(--wx-seal-lo));
    box-shadow: 0 8px 18px rgba(var(--wx-seal-rgb), 0.34), inset 0 0 0 2px rgba(255, 240, 220, 0.28);
    animation: authSeal 3.6s ease-in-out infinite;
}

.auth-title {
    font-family: var(--auth-kai);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 8px;
    text-indent: 8px;
    color: var(--wx-ink);
    margin: 0 0 10px;
}

.auth-subtitle {
    font-size: 13.5px;
    letter-spacing: 0.6px;
    line-height: 1.7;
    color: var(--wx-muted);
    margin: 0;
}

.auth-subtitle span {
    color: var(--wx-red-text);
    font-weight: 600;
}

/* 云纹分隔（两侧淡金细线 + 中心菱形） */
.auth-flourish {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 14px;
    color: var(--wx-gold);
}
.auth-flourish::before,
.auth-flourish::after {
    content: '';
    height: 1px;
    width: 62px;
}
.auth-flourish::before { background: linear-gradient(90deg, transparent, var(--wx-line-strong)); }
.auth-flourish::after { background: linear-gradient(270deg, transparent, var(--wx-line-strong)); }
.auth-flourish b { font-size: 10px; font-weight: 400; opacity: 0.85; }

/* ================= 四、表单（令牌式标签 + 宣纸输入框） ================= */
.auth-page .form-group { margin-bottom: 18px; }

.auth-page .form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    color: var(--wx-ink-soft);
    margin-bottom: 9px;
}
.auth-page .form-label::before {
    content: '';
    flex: 0 0 auto;
    width: 5px;
    height: 5px;
    transform: rotate(45deg);
    background: var(--wx-red);
    opacity: 0.7;
}
.auth-page .form-label small { letter-spacing: 0; font-weight: 400; }

.auth-page .form-input {
    width: 100%;
    height: 46px;
    padding: 0 14px;
    border-radius: 10px;
    border: 1px solid var(--wx-line);
    background: var(--wx-paper);
    color: var(--wx-ink);
    font-size: 14.5px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.auth-page .form-input::placeholder { color: var(--wx-muted); opacity: 0.8; }
.auth-page .form-input:focus {
    outline: none;
    border-color: var(--wx-line-strong);
    background: var(--wx-paper);
    box-shadow: 0 0 0 3px var(--wx-gold-soft);
}

/* 协议勾选 */
.auth-page .form-check { font-size: 13px; color: var(--wx-muted); }
.auth-page .form-check a { color: var(--wx-red-text); font-weight: 600; }
.auth-page .form-check a:hover { text-decoration: underline; }
.auth-page .form-check input[type="checkbox"] { accent-color: var(--wx-red); }

/* 提示文字 */
.auth-page .text-light { color: var(--wx-muted); }
.auth-page .text-danger { color: var(--wx-red-text); }

/* 错误提示：朱砂告示条 */
.auth-page .alert-danger {
    border: 1px solid rgba(var(--wx-seal-rgb, 143, 28, 28), 0.32);
    border-left: 3px solid var(--wx-seal-hi);
    border-radius: 10px;
    background: var(--wx-red-soft);
    color: var(--wx-red-text);
    font-size: 13.5px;
}

/* ================= 五、按钮 ================= */
/* 主按钮：朱印实底 */
.auth-page .btn-primary {
    width: 100%;
    padding: 13px 20px;
    border: 1px solid var(--wx-line-strong);
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 8px;
    text-indent: 8px;
    color: var(--wx-seal-text);
    background: linear-gradient(150deg, var(--wx-seal-hi), var(--wx-seal-lo));
    box-shadow: 0 10px 24px rgba(var(--wx-seal-rgb), 0.3), inset 0 0 0 1px rgba(255, 240, 220, 0.18);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.auth-page .btn-primary:hover {
    color: var(--wx-seal-text);
    transform: translateY(-2px);
    filter: brightness(1.06);
    box-shadow: 0 14px 30px rgba(var(--wx-seal-rgb), 0.4), inset 0 0 0 1px rgba(255, 240, 220, 0.22);
}
.auth-page .btn-primary:active { transform: translateY(0); filter: brightness(0.98); }

/* 描边按钮（获取验证码）：金线令牌 */
.auth-page .btn-outline {
    height: 46px;
    padding: 0 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    border: 1px solid var(--wx-line-strong);
    border-radius: 10px;
    background: var(--wx-paper);
    color: var(--wx-red-text);
    letter-spacing: 1px;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.auth-page .btn-outline:hover {
    background: var(--wx-red-soft);
    border-color: var(--wx-seal-hi);
    color: var(--wx-red-text);
}
.auth-page .btn-outline:disabled { opacity: 0.55; cursor: not-allowed; }

/* 微信登录：保留品牌绿，边角与站点风格统一 */
.auth-page .wx-login-btn {
    border-radius: 12px;
    padding: 11px;
    font-size: 14.5px;
    letter-spacing: 2px;
    box-shadow: 0 8px 20px rgba(7, 193, 96, 0.24);
}

/* ================= 六、分隔与页脚 ================= */
.auth-page .auth-divider {
    margin: 22px 0 18px;
    font-size: 12.5px;
    letter-spacing: 2px;
    color: var(--wx-muted);
}
.auth-page .auth-divider::before,
.auth-page .auth-divider::after {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--wx-line), transparent);
}
.auth-page .auth-divider span { padding: 0 12px; }

.auth-page .auth-footer {
    margin-top: 22px;
    font-size: 13px;
    letter-spacing: 0.3px;
    color: var(--wx-muted);
}
.auth-page .auth-footer a { color: var(--wx-red-text); font-weight: 600; letter-spacing: 1px; }
.auth-page .auth-footer a:hover { text-decoration: underline; }

/* ================= 七、动画与响应式 ================= */
@keyframes authRise {
    from { opacity: 0; transform: translateY(18px) scale(0.985); }
    to { opacity: 1; transform: none; }
}
@keyframes authSeal {
    0%, 100% { transform: rotate(-6deg) translateY(0); }
    50% { transform: rotate(-6deg) translateY(-3px); }
}

@media (max-width: 768px) {
    .auth-page { padding: calc(var(--header-height) + 40px) 18px 40px; }
    .auth-box { padding: 32px 26px 28px; }
}

@media (max-width: 640px) {
    .auth-page { padding: calc(var(--header-height) + 30px) 16px 30px; }
    .auth-box { padding: 28px 22px 26px; border-radius: 16px; }
    .auth-title { font-size: 24px; letter-spacing: 5px; text-indent: 5px; }
    .auth-seal { width: 48px; height: 48px; font-size: 24px; }
    .auth-box::after { font-size: 78px; bottom: -20px; }
    .auth-page .btn-primary { letter-spacing: 6px; text-indent: 6px; }
    .auth-page .auth-flourish::before,
    .auth-page .auth-flourish::after { width: 46px; }
}

@media (prefers-reduced-motion: reduce) {
    .auth-box, .auth-seal { animation: none; }
}

/* ================= 八、电脑端 · 水平横向视图（左题额面板 · 右表单） =================
   手机 / 平板仍为原「上下堆叠」竖版卡片，仅 ≥992px 切换为左右两栏 */
.auth-main { position: relative; z-index: 1; }

@media (min-width: 992px) {
    .auth-box {
        max-width: 900px;
        display: grid;
        grid-template-columns: 348px minmax(0, 1fr);
        padding: 0;
        overflow: hidden;
    }
    /* 卡片右下角水印改由左侧面板承担 */
    .auth-box::after { display: none; }

    /* 左栏：墨色题额面板 */
    .auth-aside {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-bottom: 0;
        padding: 48px 34px;
        overflow: hidden;
        border-right: 1px solid rgba(200, 162, 74, 0.4);
        background: linear-gradient(160deg, var(--wx-deep-1) 0%, var(--wx-deep-2) 55%, var(--wx-deep-3) 100%);
        color: #f3e7cd;
    }
    /* 面板斜纹质感 */
    .auth-aside::before {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        opacity: 0.6;
        background: repeating-linear-gradient(97deg, rgba(255, 255, 255, 0.028) 0 2px, transparent 2px 10px);
    }
    /* 面板大字水印（由 data-wm 提供） */
    .auth-aside::after {
        content: attr(data-wm);
        position: absolute;
        right: -8px;
        bottom: -34px;
        font-family: var(--auth-kai);
        font-size: 120px;
        font-weight: 700;
        line-height: 1;
        letter-spacing: 6px;
        color: var(--wx-gold);
        opacity: 0.13;
        pointer-events: none;
        user-select: none;
    }

    .auth-aside .auth-seal { position: relative; z-index: 1; }
    .auth-aside .auth-title { position: relative; z-index: 1; color: #f6ecd6; }
    .auth-aside .auth-subtitle { position: relative; z-index: 1; color: rgba(243, 231, 205, 0.72); }
    .auth-aside .auth-subtitle span { color: #f0d68e; }
    .auth-aside .auth-flourish { position: relative; z-index: 1; color: rgba(200, 162, 74, 0.9); }
    .auth-aside .auth-flourish::before { background: linear-gradient(90deg, transparent, rgba(200, 162, 74, 0.55)); }
    .auth-aside .auth-flourish::after { background: linear-gradient(270deg, transparent, rgba(200, 162, 74, 0.55)); }

    .auth-verse {
        display: block;
        position: relative;
        z-index: 1;
        margin: 22px 0 0;
        font-family: var(--auth-kai);
        font-size: 13.5px;
        line-height: 2.1;
        letter-spacing: 3px;
        color: rgba(243, 231, 205, 0.62);
    }

    /* 右栏：表单区垂直居中 */
    .auth-main {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 40px 42px 34px;
    }
}

@media (min-width: 992px) and (max-width: 1100px) {
    .auth-box { grid-template-columns: 300px minmax(0, 1fr); }
    .auth-aside { padding: 38px 26px; }
    .auth-main { padding: 32px 28px 28px; }
    .auth-aside::after { font-size: 96px; }
}