/* ============================================================
 * 灵界登录页 · 夜观天象 · 泼墨写意 v3.0
 * 暗调玄秘 · 一轮孤月 · 泼墨远山云海 · 登录台浮于云雾
 * 删除所有卷宗框/印章/双线表达，换成气象与留黑
 * ============================================================ */

/* ===========================================================
 * 一、暗调底色（日间也是低饱和灰青，非宣纸白）
 * =========================================================== */

body.login-ink-page {
    /* ===== 登录水墨场景专属 token（封装本文件高频色，便于统一调色） ===== */
    /* 朱砂红族（主色，按钮/印章/强调） */
    --login-cinnabar: #b7352d;
    --login-cinnabar-bright: #e85a4d;
    --login-cinnabar-deep: #962d22;
    --login-cinnabar-soft: rgba(192, 57, 43, 0.5);
    /* 墨色族（文字/远山/泼墨） */
    --login-ink-black: #1f1f1c;
    --login-ink-night: #12161a; /* 对齐游戏页 --bg-primary,切换页面时背景不跳 */
    --login-ink-mist: #d8dde0;
    --login-ink-shadow: rgba(42, 42, 38, 0.1);
    /* 前景文字专用 token：深色=浅雾灰(可见),浅色=深墨。
       注意:不要用 --login-paper 作前景——它在深色下会被翻转为背景夜空色,
       导致深底叠深字隐形。此处 default 走暗调(=--login-ink-mist)。 */
    --login-ink-fg: var(--login-ink-mist);
    /* 宣纸/雾色族（日间主题底色） */
    --login-paper: #eef0f2;
    --login-paper-warm: #e8e6df;
    --login-paper-soft: #2a2a26;
    /* 玻璃质感（与全局对齐） */
    --login-glass-light: rgba(255, 255, 255, 0.5);
    --login-glass-dark: rgba(42, 42, 38, 0.65);

    /* 默认走暗调：黛墨夜空感。日间主题用更浅的灰青 */
    background-color: var(--login-ink-night);
    background-image:
        /* 夜空顶部深，底部略亮的纵向渐变 */
        linear-gradient(180deg, color-mix(in srgb, var(--login-ink-night) 80%, black) 0%, color-mix(in srgb, var(--login-ink-night) 90%, var(--login-ink-mist)) 45%, color-mix(in srgb, var(--login-ink-night) 75%, var(--login-ink-mist)) 100%);
    background-attachment: fixed;
    min-height: 100vh;
    color: var(--login-ink-mist);
}

/* 日间主题：浅灰青雾，仍保留写意气象，不回纯白 */
html.theme-light body.login-ink-page {
    background-color: var(--login-paper-warm);
    background-image:
        linear-gradient(180deg, color-mix(in srgb, var(--login-paper-warm) 85%, var(--login-paper)) 0%, color-mix(in srgb, var(--login-paper-warm) 92%, var(--login-paper)) 45%, color-mix(in srgb, var(--login-paper-warm) 80%, var(--login-paper) 20%) 100%);
    color: var(--login-paper-soft);
    /* 浅色下前景文字走深墨 */
    --login-ink-fg: var(--login-ink-black);
}

/* 旧 ink-bg 层全部隐藏（不再用细线远山，改用下面的泼墨大色块） */
body.login-ink-page .login-ink-bg,
body.login-ink-page .login-ink-bg .login-ink-mountain,
body.login-ink-page .login-ink-bg .login-ink-cloud,
body.login-ink-page .login-ink-bg .login-ink-stroke,
body.login-ink-page .login-bg-overlay {
    display: none !important;
}

/* ===========================================================
 * 二、泼墨远山云海（满屏主视觉 · 真正的写意大色块）
 * 用两层 fixed 背景叠出云海 + 远山，贯穿整页
 * =========================================================== */

body.login-ink-page::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* 远山：底部泼墨剪影，多层浓淡 */
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 520' preserveAspectRatio='xMidYMax slice'><g fill='%23000'><path d='M0,520 L0,360 Q120,250 260,300 T520,300 Q660,230 820,290 T1100,290 Q1260,240 1440,300 L1440,520 Z' opacity='0.5'/><path d='M0,520 L0,410 Q160,340 320,370 T620,375 Q780,330 940,365 T1240,360 Q1340,340 1440,370 L1440,520 Z' opacity='0.38'/><path d='M0,520 L0,455 Q200,425 400,440 T780,438 Q980,425 1180,438 T1440,435 L1440,520 Z' opacity='0.26'/></g></svg>"),
        /* 云雾：底部往上的一层雾气 */
        linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--text-primary) 40%, transparent) 80%, color-mix(in srgb, var(--combat-dark) 70%, transparent) 100%);
    background-repeat: no-repeat;
    background-position: center bottom, center;
    background-size: 100% auto, 100% 100%;
}

/* 第二层：中部云海横向飘带，增加纵深 */
body.login-ink-page::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    top: 42%;
    height: 30%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 100% at 30% 50%, color-mix(in srgb, var(--bg-secondary) 6%, transparent) 0%, transparent 60%),
        radial-gradient(ellipse 60% 90% at 75% 60%, color-mix(in srgb, var(--bg-secondary) 5%, transparent) 0%, transparent 65%);
    filter: blur(8px);
}

/* 日间：远山用墨色，云雾用暖白 */
html.theme-light body.login-ink-page::before {
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 520' preserveAspectRatio='xMidYMax slice'><g fill='%232a2a26'><path d='M0,520 L0,360 Q120,250 260,300 T520,300 Q660,230 820,290 T1100,290 Q1260,240 1440,300 L1440,520 Z' opacity='0.16'/><path d='M0,520 L0,410 Q160,340 320,370 T620,375 Q780,330 940,365 T1240,360 Q1340,340 1440,370 L1440,520 Z' opacity='0.12'/><path d='M0,520 L0,455 Q200,425 400,440 T780,438 Q980,425 1180,438 T1440,435 L1440,520 Z' opacity='0.08'/></g></svg>"),
        linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--text-secondary) 8%, transparent) 80%, color-mix(in srgb, var(--text-primary) 15%, transparent) 100%);
}

html.theme-light body.login-ink-page::after {
    background:
        radial-gradient(ellipse 70% 100% at 30% 50%, var(--login-glass-light) 0%, transparent 60%),
        radial-gradient(ellipse 60% 90% at 75% 60%, color-mix(in srgb, var(--bg-card) 40%, transparent) 0%, transparent 65%);
    filter: blur(10px);
}

/* ===========================================================
 * 三、一轮孤月（纯 CSS，左上高悬，让开右上主题切换）
 * =========================================================== */

body.login-ink-page .ink-moon {
    position: fixed;
    top: 7%;
    left: 8%;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    z-index: 1;
    background: radial-gradient(circle at 38% 35%, color-mix(in srgb, var(--login-paper) 92%, var(--login-paper-warm)) 0%, color-mix(in srgb, var(--login-paper-warm) 80%, var(--login-paper)) 50%, color-mix(in srgb, var(--login-paper-warm) 60%, var(--login-paper)) 100%);
    box-shadow:
        0 0 60px 12px color-mix(in srgb, var(--bg-secondary) 12%, transparent),
        0 0 120px 40px color-mix(in srgb, var(--bg-secondary) 6%, transparent),
        inset -8px -10px 20px color-mix(in srgb, var(--text-muted) 18%, transparent);
    pointer-events: none;
    opacity: 0.9;
}
/* 深色:--login-paper 被翻转为背景夜空色,月亮会塌成深灰融入夜空。
   此处强制用月白冷调(浅雾灰→暖米),让孤月在暗调夜空上重新成为视觉主体。 */
html.theme-dark body.login-ink-page .ink-moon {
    background: radial-gradient(circle at 38% 35%, color-mix(in srgb, var(--login-ink-mist) 95%, var(--login-paper-warm)) 0%, color-mix(in srgb, var(--login-ink-mist) 80%, var(--login-paper-warm)) 50%, color-mix(in srgb, var(--login-paper-warm) 65%, var(--login-ink-mist)) 100%);
    box-shadow:
        0 0 70px 16px color-mix(in srgb, var(--login-ink-mist) 18%, transparent),
        0 0 140px 50px color-mix(in srgb, var(--login-ink-mist) 8%, transparent),
        inset -8px -10px 22px color-mix(in srgb, var(--canghai-teal) 16%, transparent);
    opacity: 0.85;
}

/* 日间：月亮变成淡日/隐入天光的浅盘 */
html.theme-light body.login-ink-page .ink-moon {
    background: radial-gradient(circle at 38% 35%, var(--login-paper) 0%, color-mix(in srgb, var(--login-paper) 85%, var(--login-paper-warm)) 50%, color-mix(in srgb, var(--login-paper-warm) 72%, var(--login-paper)) 100%);
    box-shadow:
        0 0 50px 10px color-mix(in srgb, var(--login-glass-light) 60%, transparent),
        inset -8px -10px 20px color-mix(in srgb, var(--canghai-teal) 14%, transparent);
    opacity: 0.7;
}

/* ===========================================================
 * 四、hero 容器 + 卷首：书法大字「灵界」+ 落款
 * =========================================================== */

body.login-ink-page .login-hero {
    /* 强制覆盖 login-admin.css 多条遗留的窄 hero / 两列 grid / 卷宗卡片框 */
    width: min(1040px, calc(100vw - 40px)) !important;
    max-width: min(1040px, calc(100vw - 40px)) !important;
    margin: 0 auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 0 !important;
    padding: 48px 0 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    position: relative;
    z-index: 2;
}

/* 卷首 header：无背景框，纯排印，浮于夜空 */
body.login-ink-page .hero-scroll-head {
    position: relative;
    text-align: center;
    padding: 0 20px 36px;
    margin-bottom: 8px;
}

body.login-ink-page .scroll-head-kicker {
    color: color-mix(in srgb, var(--login-ink-mist) 50%, transparent);
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 6px;
    font-weight: 500;
    margin: 0 0 18px;
}
html.theme-light body.login-ink-page .scroll-head-kicker {
    color: color-mix(in srgb, var(--login-ink-black) 42%, transparent);
}

/* 书法大字「灵界」——用行书/书法字体栈，大字，朱砂只点「界」字 */
body.login-ink-page .scroll-head-title {
    font-family: "STXingkai", "Xingkai SC", "STKaiti", KaiTi, 楷体, "Noto Serif SC", serif;
    font-size: clamp(56px, 9vw, 96px);
    font-weight: 400;
    color: var(--login-ink-fg);
    letter-spacing: 0.12em;
    line-height: 1;
    margin: 0;
    text-shadow: 0 4px 30px var(--shadow-black-2);
}
html.theme-light body.login-ink-page .scroll-head-title {
    color: var(--login-ink-black);
    text-shadow: 0 2px 10px var(--login-glass-light);
}

/* 朱砂落点：只让「界」字变朱砂红，一处即可 */
body.login-ink-page .title-accent {
    color: var(--login-cinnabar);
    text-shadow: 0 0 24px color-mix(in srgb, var(--login-cinnabar) 35%, transparent);
}
html.theme-light body.login-ink-page .title-accent {
    color: var(--login-cinnabar);
    text-shadow: none;
}

/* 卷首宣言：一行小字，留白 */
body.login-ink-page .scroll-head-manifesto {
    margin: 20px 0 0;
    font-family: "Songti SC", STSong, "Noto Serif SC", serif;
    font-size: 15px;
    letter-spacing: 8px;
    color: color-mix(in srgb, var(--login-ink-mist) 62%, transparent);
    text-indent: 8px;
}
html.theme-light body.login-ink-page .scroll-head-manifesto {
    color: color-mix(in srgb, var(--login-ink-black) 55%, transparent);
}

/* 主题切换：右上，极简 */
body.login-ink-page .scroll-head-theme {
    position: absolute;
    top: 0;
    right: 20px;
}

/* ===========================================================
 * 五、登录台 stage：单列居中，浮在云海正中（扁舟意象）
 * =========================================================== */

body.login-ink-page .hero-scroll-stage {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 0 20px 48px;
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

/* 去掉左引语（错位元凶，单列不需要） */
body.login-ink-page .hero-scroll-stage::before {
    content: none;
}

body.login-ink-page .hero-scroll-stage > .login-quick-actions,
body.login-ink-page .hero-scroll-stage > .login-card {
    width: 100%;
    max-width: 400px;
}

/* ===========================================================
 * 六、登录框：底线式极简，融入夜空（非卡片）
 * 无背景、无边框、无阴影，只有输入框底部一条线
 * =========================================================== */

body.login-ink-page .login-card {
    position: relative;
    padding: 4px 8px 4px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
html.theme-light body.login-ink-page .login-card {
    background: transparent;
    border: none;
    box-shadow: none;
}
/* 清除 login-admin.css 的内框 ::before */
body.login-ink-page .login-card::before { content: none !important; }
body.login-ink-page .login-card::after { content: none !important; }

/* 标题区：极简，小字，左对齐 */
body.login-ink-page .login-card .card-kicker {
    color: var(--login-cinnabar);
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 5px;
    margin-bottom: 4px;
    opacity: 0.85;
}
html.theme-light body.login-ink-page .login-card .card-kicker { color: var(--login-cinnabar); }

body.login-ink-page .login-card .card-title {
    font-family: "STKaiti", KaiTi, 楷体, "Noto Serif SC", serif;
    font-size: 22px;
    color: var(--login-ink-fg);
    letter-spacing: 4px;
    margin-bottom: 6px;
    padding-left: 0;
    text-align: left;
}
html.theme-light body.login-ink-page .login-card .card-title { color: var(--login-ink-black); }
body.login-ink-page .login-card .card-title::before { content: none; }

body.login-ink-page .login-card .card-desc {
    color: color-mix(in srgb, var(--login-ink-mist) 50%, transparent);
    font-size: 13px;
    letter-spacing: 1px;
    margin-bottom: 22px;
}
html.theme-light body.login-ink-page .login-card .card-desc { color: color-mix(in srgb, var(--login-ink-black) 50%, transparent); }

/* 表单组：底线式 */
body.login-ink-page .login-card .form-group {
    position: relative;
    margin-bottom: 22px;
}

/* 聚焦时左端朱砂小点（朱批引线意象） */
body.login-ink-page .login-card .form-group:focus-within::before {
    content: "";
    position: absolute;
    left: -10px;
    bottom: 14px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--login-cinnabar);
    box-shadow: 0 0 6px var(--login-cinnabar-soft);
    animation: inkDot 0.3s ease;
}
@keyframes inkDot {
    from { opacity: 0; transform: scale(0.3); }
    to { opacity: 1; transform: scale(1); }
}
html.theme-light body.login-ink-page .login-card .form-group:focus-within::before {
    background: var(--login-cinnabar);
}

body.login-ink-page .login-card .form-group label {
    color: color-mix(in srgb, var(--login-ink-mist) 45%, transparent);
    font-size: 12px;
    letter-spacing: 2px;
    margin-bottom: 6px;
    display: block;
}
html.theme-light body.login-ink-page .login-card .form-group label { color: color-mix(in srgb, var(--login-ink-black) 45%, transparent); }

/* 输入框：只有底线，无背景无边框 */
body.login-ink-page .login-card .form-group input,
body.login-ink-page .login-card .input-code {
    background: transparent;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--login-ink-mist) 22%, transparent);
    border-radius: 0;
    color: var(--login-ink-fg);
    padding: 8px 2px 10px;
    font-size: 15px;
    letter-spacing: 1px;
    box-shadow: none;
    transition: border-color 0.3s;
}
html.theme-light body.login-ink-page .login-card .form-group input,
html.theme-light body.login-ink-page .login-card .input-code {
    background: transparent;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--login-ink-black) 20%, transparent);
    color: var(--login-ink-black);
}

body.login-ink-page .login-card .form-group input::placeholder {
    color: color-mix(in srgb, var(--login-ink-mist) 28%, transparent);
}
html.theme-light body.login-ink-page .login-card .form-group input::placeholder {
    color: color-mix(in srgb, var(--login-ink-black) 30%, transparent);
}

/* 聚焦：底线变朱砂，左端浮起一个小朱点（朱批意象） */
body.login-ink-page .login-card .form-group input:focus {
    outline: none;
    border-bottom-color: var(--login-cinnabar);
    box-shadow: none;
    background: transparent;
}
html.theme-light body.login-ink-page .login-card .form-group input:focus {
    border-bottom-color: var(--login-cinnabar);
}

/* 验证码输入框的输入+按钮组：底线适配 */
body.login-ink-page .login-card .input-with-btn {
    align-items: flex-end;
}
body.login-ink-page .login-card .input-with-btn input {
    flex: 1;
}
body.login-ink-page .login-card .btn-send-code {
    background: transparent;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--login-cinnabar) 60%, transparent);
    border-radius: 0;
    color: var(--login-cinnabar-bright);
    padding: 8px 2px 10px;
    font-size: 12px;
    letter-spacing: 1px;
    box-shadow: none;
}
html.theme-light body.login-ink-page .login-card .btn-send-code {
    background: transparent;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--login-cinnabar) 60%, transparent);
    color: var(--login-cinnabar);
}
body.login-ink-page .login-card .btn-send-code:hover {
    background: transparent;
    opacity: 0.7;
    transform: none;
}

/* ===========================================================
 * 七、tab / 按钮：朱砂为唯一跳色
 * =========================================================== */

body.login-ink-page .quick-action {
    background: color-mix(in srgb, white 4%, transparent);
    border: 1px solid color-mix(in srgb, white 10%, transparent);
    color: color-mix(in srgb, var(--login-ink-mist) 70%, transparent);
    border-radius: 3px;
    transition: all 0.2s;
}
html.theme-light body.login-ink-page .quick-action {
    background: var(--login-glass-light);
    border: 1px solid color-mix(in srgb, var(--login-ink-black) 12%, transparent);
    color: var(--login-glass-dark);
}

body.login-ink-page .quick-action:hover {
    border-color: color-mix(in srgb, var(--login-cinnabar) 40%, transparent);
    color: var(--login-ink-fg);
}
html.theme-light body.login-ink-page .quick-action:hover {
    border-color: color-mix(in srgb, var(--login-cinnabar) 40%, transparent);
    color: var(--login-ink-black);
}

body.login-ink-page .quick-action.active {
    background: color-mix(in srgb, var(--login-cinnabar) 16%, transparent);
    border-color: var(--login-cinnabar-soft);
    color: var(--login-cinnabar-bright);
}
html.theme-light body.login-ink-page .quick-action.active {
    background: color-mix(in srgb, var(--login-cinnabar) 10%, transparent);
    border-color: color-mix(in srgb, var(--login-cinnabar) 45%, transparent);
    color: var(--login-cinnabar);
}

/* 主按钮：实心（底线风里需要一个视觉重量锚点，按钮承担）
   深色=翡翠→金渐变(--login-cinnabar 系映射),浅色=朱砂渐变(原水墨签名) */
body.login-ink-page .btn-primary {
    background: linear-gradient(135deg, var(--login-cinnabar) 0%, var(--login-cinnabar-deep) 100%);
    border: 1px solid var(--login-cinnabar-deep);
    color: var(--login-ink-fg);
    border-radius: 3px;
    letter-spacing: 6px;
    text-indent: 6px;
    margin-top: 10px;
    padding: 13px 20px;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--login-cinnabar) 28%, transparent);
    transition: all 0.2s;
}
body.login-ink-page .btn-primary:hover {
    background: linear-gradient(135deg, var(--login-cinnabar) 0%, var(--login-cinnabar) 100%);
    box-shadow: 0 6px 22px color-mix(in srgb, var(--login-cinnabar) 40%, transparent);
    transform: translateY(-1px);
}
body.login-ink-page .btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--login-cinnabar) 30%, transparent);
}

body.login-ink-page .btn-guest {
    background: linear-gradient(135deg, color-mix(in srgb, var(--login-ink-black) 60%, var(--accent-jade)) 0%, color-mix(in srgb, var(--login-ink-black) 70%, var(--accent-jade)) 100%);
    border-color: color-mix(in srgb, var(--hundun-gray) 30%, transparent);
}
body.login-ink-page .btn-guest:hover {
    background: linear-gradient(135deg, color-mix(in srgb, var(--login-ink-black) 50%, var(--accent-jade)) 0%, color-mix(in srgb, var(--login-ink-black) 60%, var(--accent-jade)) 100%);
}

/* 角色对比区：去掉卡片背景，改成底线分隔的极简列表 */
body.login-ink-page .login-card .role-compare {
    border: none;
    border-radius: 0;
    margin-bottom: 22px;
}
body.login-ink-page .login-card .compare-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--login-ink-mist) 12%, transparent);
    border-radius: 0;
    padding: 10px 0;
}
html.theme-light body.login-ink-page .login-card .compare-item {
    border-bottom-color: color-mix(in srgb, var(--login-ink-black) 12%, transparent);
}
body.login-ink-page .login-card .compare-item:last-child {
    border-bottom: none;
}
body.login-ink-page .login-card .compare-item + .compare-item {
    border-top: none;
}
body.login-ink-page .login-card .compare-highlight {
    background: transparent;
}

/* 其他链接/分隔 */
body.login-ink-page .login-card .form-switch a,
body.login-ink-page .login-card .switch-link {
    color: var(--login-cinnabar-bright);
}
html.theme-light body.login-ink-page .login-card .form-switch a,
html.theme-light body.login-ink-page .login-card .switch-link { color: var(--login-cinnabar); }

body.login-ink-page .login-card .switch-sep,
body.login-ink-page .login-card .form-divider span {
    color: color-mix(in srgb, var(--login-ink-mist) 30%, transparent);
}
html.theme-light body.login-ink-page .login-card .switch-sep {
    /* 覆盖 login-admin.css:530-533 的 --login-400（浅色下偏淡） */
    color: color-mix(in srgb, var(--login-ink-black) 30%, transparent) !important;
}
html.theme-light body.login-ink-page .login-card .form-divider span {
    color: color-mix(in srgb, var(--login-ink-black) 30%, transparent);
    /* 清掉 login-admin.css:548 继承的深色 --login-paper-soft 背景，
       露出卡片底（transparent）；加横向 padding 让分隔线在文字两侧断开 */
    background: transparent;
    padding: 0 12px;
}

body.login-ink-page .login-card .form-divider::before,
body.login-ink-page .login-card .form-divider::after {
    background: color-mix(in srgb, white 10%, transparent);
}
html.theme-light body.login-ink-page .login-card .form-divider::before,
html.theme-light body.login-ink-page .login-card .form-divider::after { background: color-mix(in srgb, var(--login-ink-black) 12%, transparent); }

body.login-ink-page .login-card .card-note {
    background: color-mix(in srgb, var(--login-cinnabar) 8%, transparent);
    border-color: color-mix(in srgb, var(--login-cinnabar) 25%, transparent);
    color: var(--login-cinnabar-bright);
}
html.theme-light body.login-ink-page .login-card .card-note {
    background: color-mix(in srgb, var(--login-cinnabar) 5%, transparent);
    border-color: color-mix(in srgb, var(--login-cinnabar) 20%, transparent);
    color: var(--login-cinnabar);
}

/* 角色对比、发送验证码按钮 */
body.login-ink-page .login-card .compare-item,
body.login-ink-page .login-card .btn-send-code {
    background: var(--shadow-black-3);
    border-color: color-mix(in srgb, white 8%, transparent);
    color: color-mix(in srgb, var(--login-ink-mist) 80%, transparent);
}
html.theme-light body.login-ink-page .login-card .compare-item,
html.theme-light body.login-ink-page .login-card .btn-send-code {
    background: var(--login-glass-light);
    border-color: color-mix(in srgb, var(--login-ink-black) 12%, transparent);
    color: color-mix(in srgb, var(--login-ink-black) 70%, transparent);
}
body.login-ink-page .login-card .btn-send-code { color: var(--login-cinnabar-bright); }
html.theme-light body.login-ink-page .login-card .btn-send-code { color: var(--login-cinnabar); }

/* ===========================================================
 * 八、移动端
 * =========================================================== */

@media (max-width: 880px) {
    body.login-ink-page .hero-scroll-stage {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 0 32px;
    }
    body.login-ink-page .hero-scroll-stage::before { display: none; }
    body.login-ink-page .hero-scroll-stage > .login-quick-actions,
    body.login-ink-page .hero-scroll-stage > .login-card { grid-column: 1; }

    body.login-ink-page .ink-moon {
        width: 80px;
        height: 80px;
        top: 5%;
        right: 6%;
    }

    body.login-ink-page .login-hero { padding: 36px 0 0; }
    body.login-ink-page .hero-scroll-head { padding: 0 16px 24px; }
    body.login-ink-page .scroll-head-title { font-size: 56px; }
    body.login-ink-page .scroll-head-theme {
        position: static;
        margin-top: 18px;
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    body.login-ink-page .scroll-head-title { font-size: 48px; }
    body.login-ink-page .login-card { padding: 22px 18px; }
}

@media (prefers-reduced-motion: reduce) {
    body.login-ink-page .btn-primary,
    body.login-ink-page .btn-primary:hover,
    body.login-ink-page .btn-primary:active,
    body.login-ink-page .quick-action {
        transition: none;
        transform: none;
    }
}

/* ============================================================
 * 九、落地页暗调适配 · 让下滚内容与首屏同一套语言
 * 解决「首屏暗调泼墨 / 下面亮色卷宗」割裂问题
 * 所有 .landing-* / hero-banner / 卡片 / 页脚统一改暗调写意
 * ============================================================ */

/* —— 版心 —— */
body.login-ink-page .landing-content {
    width: min(1040px, calc(100vw - 40px));
    padding: 32px 0 56px;
    position: relative;
    z-index: 2;
}

/* —— 顶部锚点导航 —— */
body.login-ink-page .landing-quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 36px;
    padding-bottom: 24px;
    border-bottom: 1px solid color-mix(in srgb, var(--login-ink-mist) 10%, transparent);
}
html.theme-light body.login-ink-page .landing-quick-links {
    border-bottom-color: var(--login-ink-shadow);
}

body.login-ink-page .anchor-chip {
    background: color-mix(in srgb, white 4%, transparent);
    border: 1px solid color-mix(in srgb, white 10%, transparent);
    border-radius: 3px;
    color: color-mix(in srgb, var(--login-ink-mist) 70%, transparent);
    padding: 7px 14px;
    font-size: 12px;
    letter-spacing: 2px;
    box-shadow: none;
    transition: all 0.2s;
}
html.theme-light body.login-ink-page .anchor-chip {
    background: var(--login-glass-light);
    border-color: color-mix(in srgb, var(--login-ink-black) 12%, transparent);
    color: var(--login-glass-dark);
}
body.login-ink-page .anchor-chip:hover {
    border-color: color-mix(in srgb, var(--login-cinnabar) 45%, transparent);
    color: var(--login-cinnabar-bright);
    transform: none;
}
html.theme-light body.login-ink-page .anchor-chip:hover {
    border-color: color-mix(in srgb, var(--login-cinnabar) 45%, transparent);
    color: var(--login-cinnabar);
}

/* —— section 容器：对齐游戏页实心面板色阶(不再用半透明玻璃) —— */
body.login-ink-page .landing-section {
    background: var(--login-paper-soft);
    border: 1px solid var(--login-line);
    border-radius: 3px;
    padding: 32px 30px;
    margin-bottom: 22px;
    box-shadow: 0 16px 44px var(--shadow-black-3);
    overflow: hidden;
}
/* 清除 login-admin.css 的内框 ::before */
body.login-ink-page .landing-section::before { content: none !important; }

html.theme-light body.login-ink-page .landing-section {
    background: var(--login-glass-light);
    border-color: var(--login-ink-shadow);
    box-shadow: 0 16px 44px color-mix(in srgb, var(--login-ink-black) 8%, transparent);
}

/* hero 板块:沿用 .landing-section 的实心面板,深色不再单独做半透明玻璃 */
html.theme-light body.login-ink-page .landing-section-hero {
    /* 浅色:清掉 login-admin.css:597 继承的深色 --login-paper-soft 背景,
       露出页面浅米底,与 .login-card / .info-pill 等浅色语言统一 */
    background: transparent;
}

/* —— eyebrow 小标签 —— */
body.login-ink-page .section-eyebrow,
body.login-ink-page .hero-banner-text {
    color: var(--login-cinnabar);
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: 11px;
    letter-spacing: 5px;
    opacity: 0.85;
}
html.theme-light body.login-ink-page .section-eyebrow,
html.theme-light body.login-ink-page .hero-banner-text { color: var(--login-cinnabar); }

body.login-ink-page .hero-banner-line {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--login-cinnabar) 40%, transparent), transparent);
}
html.theme-light body.login-ink-page .hero-banner-line {
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--login-cinnabar) 35%, transparent), transparent);
}

/* —— 大标题（各 section 的 h2）—— */
body.login-ink-page .landing-section h2,
body.login-ink-page .hero-title {
    color: var(--login-ink-fg);
    font-family: "STKaiti", KaiTi, 楷体, "Noto Serif SC", "Songti SC", serif;
    font-weight: 500;
    letter-spacing: 3px;
    margin: 14px 0 20px;
    text-shadow: 0 2px 16px var(--shadow-black-2);
}
html.theme-light body.login-ink-page .landing-section h2,
html.theme-light body.login-ink-page .hero-title {
    color: var(--login-ink-black);
    text-shadow: none;
}

/* —— 正文 / 引言 —— */
body.login-ink-page .section-intro,
body.login-ink-page .hero-copy p,
body.login-ink-page .source-note,
body.login-ink-page .community-box p {
    color: color-mix(in srgb, var(--login-ink-mist) 72%, transparent);
    line-height: 1.9;
}
html.theme-light body.login-ink-page .section-intro,
html.theme-light body.login-ink-page .hero-copy p,
html.theme-light body.login-ink-page .source-note,
html.theme-light body.login-ink-page .community-box p {
    color: color-mix(in srgb, var(--login-ink-black) 68%, transparent);
}

/* hero-mark 标记 */
body.login-ink-page .hero-mark {
    background: color-mix(in srgb, white 4%, transparent);
    border: 1px solid color-mix(in srgb, white 8%, transparent);
    color: color-mix(in srgb, var(--login-ink-mist) 70%, transparent);
    border-radius: 3px;
    box-shadow: none;
}
html.theme-light body.login-ink-page .hero-mark {
    background: var(--login-glass-light);
    border-color: var(--login-ink-shadow);
    color: var(--login-glass-dark);
}
body.login-ink-page .hero-mark strong { color: var(--login-cinnabar-bright); }
html.theme-light body.login-ink-page .hero-mark strong { color: var(--login-cinnabar); }

/* lore-quote 引语 */
body.login-ink-page .lore-quote {
    background: var(--shadow-black-3);
    border-left: 2px solid var(--login-cinnabar-soft);
    color: color-mix(in srgb, var(--login-ink-mist) 80%, transparent);
    border-radius: 0 3px 3px 0;
    font-family: "Songti SC", STSong, "Noto Serif SC", serif;
}
html.theme-light body.login-ink-page .lore-quote {
    background: color-mix(in srgb, var(--login-ink-black) 4%, transparent);
    border-left-color: color-mix(in srgb, var(--login-cinnabar) 45%, transparent);
    color: color-mix(in srgb, var(--login-ink-black) 75%, transparent);
}

/* info-pill 卖点标签 */
body.login-ink-page .info-pill {
    background: color-mix(in srgb, var(--bg-card) 5%, transparent);
    border: 1px solid color-mix(in srgb, white 10%, transparent);
    color: color-mix(in srgb, var(--login-ink-mist) 80%, transparent);
    border-radius: 3px;
    box-shadow: none;
}
html.theme-light body.login-ink-page .info-pill {
    background: var(--login-glass-light);
    border-color: var(--login-ink-shadow);
    color: color-mix(in srgb, var(--login-ink-black) 70%, transparent);
}

/* —— 世界观卡片 / 区域卡片 / 阵营卡片：统一暗调 —— */
body.login-ink-page .world-lore-card,
body.login-ink-page .region-card,
body.login-ink-page .faction-card {
    background: var(--shadow-black-3);
    border: 1px solid color-mix(in srgb, white 7%, transparent);
    border-radius: 3px;
    box-shadow: none;
    padding: 20px;
    transition: border-color 0.2s;
}
body.login-ink-page .world-lore-card::before,
body.login-ink-page .region-card::before,
body.login-ink-page .faction-card::before { content: none !important; }

html.theme-light body.login-ink-page .world-lore-card,
html.theme-light body.login-ink-page .region-card,
html.theme-light body.login-ink-page .faction-card {
    background: var(--login-glass-light);
    border-color: var(--login-ink-shadow);
}

body.login-ink-page .world-lore-card:hover,
body.login-ink-page .region-card:hover,
body.login-ink-page .faction-card:hover {
    border-color: color-mix(in srgb, var(--login-cinnabar) 35%, transparent);
}
html.theme-light body.login-ink-page .world-lore-card:hover,
html.theme-light body.login-ink-page .region-card:hover,
html.theme-light body.login-ink-page .faction-card:hover {
    border-color: color-mix(in srgb, var(--login-cinnabar) 35%, transparent);
}

body.login-ink-page .world-lore-card h3,
body.login-ink-page .region-card h3,
body.login-ink-page .faction-card h3 {
    color: var(--login-ink-fg);
    font-family: "STKaiti", KaiTi, 楷体, "Noto Serif SC", serif;
    letter-spacing: 2px;
}
html.theme-light body.login-ink-page .world-lore-card h3,
html.theme-light body.login-ink-page .region-card h3,
html.theme-light body.login-ink-page .faction-card h3 { color: var(--login-ink-black); }

body.login-ink-page .world-lore-card p,
body.login-ink-page .region-card p,
body.login-ink-page .faction-card p {
    color: color-mix(in srgb, var(--login-ink-mist) 62%, transparent);
}
html.theme-light body.login-ink-page .world-lore-card p,
html.theme-light body.login-ink-page .region-card p,
html.theme-light body.login-ink-page .faction-card p { color: color-mix(in srgb, var(--login-ink-black) 60%, transparent); }

body.login-ink-page .region-kicker,
body.login-ink-page .faction-label {
    color: var(--login-cinnabar);
    background: transparent;
    border: none;
    box-shadow: none;
    font-size: 11px;
    letter-spacing: 3px;
}
html.theme-light body.login-ink-page .region-kicker,
html.theme-light body.login-ink-page .faction-label { color: var(--login-cinnabar); }

/* —— 山门告示 community-box —— */
body.login-ink-page .community-box {
    background: var(--shadow-black-3);
    border: 1px solid color-mix(in srgb, white 7%, transparent);
    border-radius: 3px;
    box-shadow: none;
    padding: 22px;
}
body.login-ink-page .community-box::before { content: none !important; }
html.theme-light body.login-ink-page .community-box {
    background: var(--login-glass-light);
    border-color: var(--login-ink-shadow);
}

body.login-ink-page .community-box .text-warn,
body.login-ink-page .community-box strong.text-warn {
    color: var(--login-cinnabar-bright);
}
html.theme-light body.login-ink-page .community-box .text-warn,
html.theme-light body.login-ink-page .community-box strong.text-warn { color: var(--login-cinnabar); }

body.login-ink-page .community-highlight {
    color: var(--login-cinnabar-bright);
    font-weight: 600;
}
html.theme-light body.login-ink-page .community-highlight { color: var(--login-cinnabar); }

body.login-ink-page .source-note a,
body.login-ink-page .community-box a {
    color: var(--login-cinnabar-bright);
}
html.theme-light body.login-ink-page .source-note a,
html.theme-light body.login-ink-page .community-box a { color: var(--login-cinnabar); }

/* —— 页脚 —— */
body.login-ink-page .login-footer {
    color: color-mix(in srgb, var(--login-ink-mist) 40%, transparent);
    border-top: 1px solid color-mix(in srgb, white 8%, transparent);
    padding: 24px 0 40px;
    text-align: center;
    position: relative;
    z-index: 2;
}
html.theme-light body.login-ink-page .login-footer {
    color: color-mix(in srgb, var(--login-ink-black) 40%, transparent);
    border-top-color: var(--login-ink-shadow);
}
body.login-ink-page .beta-group-number {
    color: var(--login-cinnabar-bright);
}
html.theme-light body.login-ink-page .beta-group-number { color: var(--login-cinnabar); }

/* —— toast:暗调玻璃(与页面对话,不做刺眼亮块);文字用前景 token —— */
body.login-ink-page .toast {
    background: color-mix(in srgb, var(--login-ink-black) 72%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid color-mix(in srgb, var(--login-cinnabar) 35%, transparent);
    color: var(--login-ink-fg);
    box-shadow: 0 12px 36px var(--shadow-black-2);
}
html.theme-light body.login-ink-page .toast {
    background: var(--login-glass-light);
    border-color: color-mix(in srgb, var(--login-cinnabar) 30%, transparent);
    color: var(--login-ink-black);
}

/* —— 移动端落地页 —— */
@media (max-width: 768px) {
    body.login-ink-page .landing-section {
        padding: 22px 18px;
        margin-bottom: 16px;
    }
    body.login-ink-page .landing-quick-links {
        justify-content: flex-start;
        gap: 8px;
    }
    body.login-ink-page .anchor-chip {
        padding: 6px 11px;
        font-size: 11px;
    }
}

/* ============================================================
 * 细节打磨 v3.3 · 质感提升（不改结构）
 * ============================================================ */

/* —— A3. tab 间距：4 tab 在 400px 里更舒展 —— */
body.login-ink-page .login-quick-actions {
    gap: 10px;
}
body.login-ink-page .quick-action {
    min-height: 42px;
    font-size: 14px;
    letter-spacing: 3px;
    text-indent: 3px;
}

/* —— A5. 月亮与标题呼应：月亮下方加一缕极淡云气，连接标题区 —— */
body.login-ink-page .ink-moon {
    transition: opacity 0.6s ease;
}
body.login-ink-page .ink-moon::after {
    content: "";
    position: absolute;
    left: -30%;
    right: -30%;
    bottom: -8px;
    height: 14px;
    background: radial-gradient(ellipse 60% 100% at 50% 0%, color-mix(in srgb, var(--bg-secondary) 8%, transparent) 0%, transparent 70%);
    pointer-events: none;
}

/* —— B6. 注册卡字段间距匀化：字段多时更透气 —— */
body.login-ink-page #registerCard .form-group,
body.login-ink-page #resetCard .form-group {
    margin-bottom: 20px;
}

/* —— B7. 散修对比层次：两行对比更清晰，登记行加朱砂左边线 —— */
body.login-ink-page .login-card .compare-item.compare-highlight {
    position: relative;
    padding-left: 12px;
}
body.login-ink-page .login-card .compare-item.compare-highlight::before {
    content: "";
    position: absolute;
    left: 0;
    top: 12px;
    bottom: 12px;
    width: 2px;
    background: var(--login-cinnabar-soft);
    border-radius: 1px;
}
html.theme-light body.login-ink-page .login-card .compare-item.compare-highlight::before {
    background: color-mix(in srgb, var(--login-cinnabar) 50%, transparent);
}
body.login-ink-page .login-card .compare-item.compare-highlight .compare-label {
    color: var(--login-cinnabar-bright);
}
html.theme-light body.login-ink-page .login-card .compare-item.compare-highlight .compare-label {
    color: var(--login-cinnabar);
}

/* —— C8. section 节奏：奇数 section 加大下间距，避免太匀 —— */
body.login-ink-page .landing-section + .landing-section {
    margin-top: 6px;
}
body.login-ink-page .landing-section-hero {
    margin-bottom: 28px;
}

/* —— C9. 卡片 hover：极轻上浮 + 背景微亮 —— */
body.login-ink-page .world-lore-card,
body.login-ink-page .region-card,
body.login-ink-page .faction-card {
    transition: border-color 0.25s, transform 0.25s, background 0.25s;
}
body.login-ink-page .world-lore-card:hover,
body.login-ink-page .region-card:hover,
body.login-ink-page .faction-card:hover {
    transform: translateY(-2px);
    background: color-mix(in srgb, var(--bg-card) 6%, transparent);
}
html.theme-light body.login-ink-page .world-lore-card:hover,
html.theme-light body.login-ink-page .region-card:hover,
html.theme-light body.login-ink-page .faction-card:hover {
    background: color-mix(in srgb, var(--login-ink-black) 6%, transparent);
}

/* —— C10. 大标题字距拉开，更舒展 —— */
body.login-ink-page .landing-section h2,
body.login-ink-page .hero-title {
    letter-spacing: 4px;
    line-height: 1.5;
}

/* —— D11. 主题切换按钮：跟暗调语言统一 —— */
body.login-ink-page .theme-switch-group {
    border: 1px solid color-mix(in srgb, var(--bg-card) 12%, transparent);
    border-radius: 3px;
    overflow: hidden;
    background: var(--shadow-black-3);
}
html.theme-light body.login-ink-page .theme-switch-group {
    border-color: color-mix(in srgb, var(--login-ink-black) 12%, transparent);
    background: var(--login-glass-light);
}
body.login-ink-page .theme-btn {
    color: color-mix(in srgb, var(--login-ink-mist) 55%, transparent);
    border-radius: 0;
    transition: all 0.2s;
}
html.theme-light body.login-ink-page .theme-btn {
    /* 清掉基础样式继承的深色 --bg-card（= --login-paper-soft #2a2a26），
       露出 .theme-switch-group 的半透明白底，避免深底叠深字 */
    color: color-mix(in srgb, var(--login-ink-black) 55%, transparent);
    background: transparent;
}
body.login-ink-page .theme-btn:hover {
    color: var(--login-ink-fg);
}
html.theme-light body.login-ink-page .theme-btn:hover {
    color: var(--login-ink-black);
    background: color-mix(in srgb, var(--login-ink-black) 6%, transparent);
}
body.login-ink-page .theme-btn.active {
    background: color-mix(in srgb, var(--login-cinnabar) 20%, transparent);
    color: var(--login-cinnabar-bright);
}
html.theme-light body.login-ink-page .theme-btn.active {
    background: color-mix(in srgb, var(--login-cinnabar) 12%, transparent);
    color: var(--login-cinnabar);
}

/* —— 收尾：card-desc / card-kicker 间距微调 —— */
body.login-ink-page .login-card .card-kicker {
    margin-bottom: 2px;
}

/* —— 减少动效 —— */
@media (prefers-reduced-motion: reduce) {
    body.login-ink-page .world-lore-card:hover,
    body.login-ink-page .region-card:hover,
    body.login-ink-page .faction-card:hover,
    body.login-ink-page .login-card .form-group:focus-within::before {
        transform: none;
        animation: none;
    }
}