/* ============================================================
 * 灵界登录页 · 夜观天象 · 泼墨写意 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: var(--text-primary);
    --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 的全局主题 token，
   不在 body 上重新声明同名 --bg-* / --text-* 变量，避免自引用循环。 */
html.theme-light body.login-ink-page {
    /* 主题别名只向上读取全局 token，勿再互相 var() 回指。 */
    --login-paper: var(--bg-primary);
    --login-paper-warm: #f3f1ea;
    --login-paper-2: var(--bg-secondary);
    --login-paper-3: var(--bg-card-hover);
    --login-paper-soft: var(--bg-card);
    --login-ink-fg: #1f1f1c;
    --login-ink-black: #1f1f1c;
    --login-line: rgba(42, 42, 38, 0.12);
    --login-line-soft: rgba(42, 42, 38, 0.08);
    --login-glass-light: rgba(255, 255, 255, 0.72);

    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-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: var(--space-48) 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 var(--space-20) var(--space-40);
    margin-bottom: var(--space-8);
}

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: var(--font-caption);
    letter-spacing: 6px;
    font-weight: 500;
    margin: 0 0 var(--space-20);
}
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(var(--font-hero-xl), 9vw, var(--font-hero-xl));
    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: var(--space-20) 0 0;
    font-family: "Songti SC", STSong, "Noto Serif SC", serif;
    font-size: var(--font-action);
    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: var(--space-24);
    padding: 0 var(--space-20) var(--space-48);
    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: var(--space-4) var(--space-8) var(--space-4);
    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: var(--font-caption);
    letter-spacing: 5px;
    margin-bottom: var(--space-4);
    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: var(--font-page-title);
    color: var(--login-ink-fg);
    letter-spacing: 4px;
    margin-bottom: var(--space-6);
    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: var(--font-body);
    letter-spacing: 1px;
    margin-bottom: var(--space-24);
}
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: var(--space-24);
}

/* 聚焦时左端朱砂小点（朱批引线意象） */
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: var(--font-label);
    letter-spacing: 2px;
    margin-bottom: var(--space-6);
    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 {
    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: var(--space-8) var(--space-2) var(--space-10);
    font-size: var(--font-action);
    letter-spacing: 1px;
    box-shadow: none;
    transition: border-color 0.3s;
}
html.theme-light body.login-ink-page .login-card .form-group input {
    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);
}

html.theme-dark body.login-ink-page .login-card .form-group input {
    color-scheme: dark;
    background: transparent;
    color: var(--login-ink-fg);
    border-bottom-color: color-mix(in srgb, var(--login-ink-mist) 22%, transparent);
    box-shadow: none;
}
html.theme-dark body.login-ink-page .login-card .form-group input:-webkit-autofill,
html.theme-dark body.login-ink-page .login-card .form-group input:-webkit-autofill:hover,
html.theme-dark body.login-ink-page .login-card .form-group input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--login-ink-fg);
    caret-color: var(--login-ink-fg);
    box-shadow: 0 0 0 1000px var(--login-ink-night) inset;
    transition: background-color 99999s ease-out;
    border-bottom-color: color-mix(in srgb, var(--login-ink-mist) 22%, transparent);
}

/* 验证码输入框的输入+按钮组：底线适配 */
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: var(--space-8) var(--space-2) var(--space-10);
    font-size: var(--font-label);
    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: var(--radius-xs);
    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: var(--radius-xs);
    letter-spacing: 6px;
    text-indent: 6px;
    margin-top: var(--space-10);
    padding: var(--space-14) var(--space-20);
    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 .login-card .form-switch a {
    color: var(--login-cinnabar-bright);
}
html.theme-light body.login-ink-page .login-card .form-switch a { 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 var(--space-12);
}

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 .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 .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: var(--space-20);
        padding: 0 0 var(--space-32);
    }
    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: var(--space-40) 0 0; }
    body.login-ink-page .hero-scroll-head { padding: 0 var(--space-16) var(--space-24); }
    body.login-ink-page .scroll-head-title { font-size: var(--font-hero-xl); }
    body.login-ink-page .scroll-head-theme {
        position: static;
        margin-top: var(--space-20);
        display: flex;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    body.login-ink-page .scroll-head-title { font-size: var(--font-hero-xl); }
    body.login-ink-page .login-card { padding: var(--space-24) var(--space-20); }
}

@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: var(--space-32) 0 var(--space-48);
    position: relative;
    z-index: 2;
}

/* —— section 容器：对齐游戏页实心面板色阶(不再用半透明玻璃) —— */
body.login-ink-page .landing-section {
    background: var(--login-paper-soft);
    border: 1px solid var(--login-line);
    border-radius: var(--radius-xs);
    padding: var(--space-32) var(--space-32);
    margin-bottom: var(--space-24);
    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: var(--font-caption);
    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: var(--space-14) 0 var(--space-20);
    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: var(--radius-xs);
    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 var(--radius-xs) var(--radius-xs) 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: var(--radius-xs);
    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: var(--radius-xs);
    box-shadow: none;
    padding: var(--space-20);
    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: var(--font-caption);
    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: var(--radius-xs);
    box-shadow: none;
    padding: var(--space-24);
}
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: var(--space-24) 0 var(--space-40);
    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: var(--space-24) var(--space-20);
        margin-bottom: var(--space-16);
    }
}

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

/* —— A3. tab 间距：4 tab 在 400px 里更舒展 —— */
body.login-ink-page .login-quick-actions {
    gap: var(--space-10);
}
body.login-ink-page .quick-action {
    min-height: var(--pattern-touch-target);
    font-size: var(--font-body-lg);
    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: var(--space-20);
}

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

/* —— 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,
body.login-ink-page .login-theme-switch {
    display: flex !important;
    gap: var(--space-4) !important;
    width: auto !important;
    border: none !important;
    background: transparent !important;
    overflow: visible !important;
    box-shadow: none !important;
    grid-template-columns: none !important;
}
body.login-ink-page .theme-btn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-height: var(--pattern-touch-target) !important;
    padding: var(--space-6) var(--space-10) !important;
    font-size: var(--font-label) !important;
    letter-spacing: 0 !important;
    border-radius: var(--radius-sm, var(--radius-xs)) !important;
    border: 1px solid rgba(172, 186, 196, 0.16) !important;
    background: var(--bg-card) !important;
    color: color-mix(in srgb, var(--login-ink-mist, var(--text-primary)) 70%, transparent) !important;
    box-shadow: none !important;
    transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}
html.theme-light body.login-ink-page .theme-btn {
    background: var(--bg-card) !important;
    border-color: rgba(42, 42, 38, 0.13) !important;
    color: var(--text-secondary) !important;
}
body.login-ink-page .theme-btn:hover {
    background: #222a32 !important;
    border-color: color-mix(in srgb, var(--accent-gold, var(--accent-gold)) 40%, transparent) !important;
    color: var(--login-ink-mist, var(--text-primary)) !important;
}
html.theme-light body.login-ink-page .theme-btn:hover {
    background: var(--bg-card-hover) !important;
    border-color: rgba(138, 94, 30, 0.28) !important;
    color: var(--text-primary) !important;
}
body.login-ink-page .theme-btn.active {
    background: color-mix(in srgb, var(--accent-gold, var(--accent-gold)) 16%, var(--bg-card)) !important;
    border-color: color-mix(in srgb, var(--accent-gold, var(--accent-gold)) 45%, transparent) !important;
    color: var(--text-gold, var(--accent-gold)) !important;
}
html.theme-light body.login-ink-page .theme-btn.active {
    background: rgba(138, 94, 30, 0.1) !important;
    border-color: rgba(138, 94, 30, 0.4) !important;
    color: var(--accent-gold) !important;
}

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

/* —— 减少动效 —— */
@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;
    }
}

/* Tab 三列（无散修） */
body.login-ink-page .login-quick-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
}
body.login-ink-page .quick-action.active {
    background: color-mix(in srgb, var(--accent-jade, var(--accent-jade)) 14%, transparent);
    border-color: color-mix(in srgb, var(--accent-jade, var(--accent-jade)) 42%, transparent);
    color: var(--text-jade, var(--accent-jade, var(--accent-jade)));
}
html.theme-light body.login-ink-page .quick-action.active {
    background: color-mix(in srgb, var(--accent-jade, var(--accent-jade)) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent-jade, var(--accent-jade)) 40%, transparent);
    color: var(--text-jade, var(--accent-jade, var(--accent-jade)));
}

body.login-ink-page .login-card .form-group input {
    background: var(--bg-secondary, color-mix(in srgb, var(--login-ink-mist) 8%, transparent));
    border: 1px solid color-mix(in srgb, var(--login-ink-mist) 18%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--login-ink-mist) 18%, transparent);
    border-radius: var(--radius-sm, var(--radius-xs));
    padding: var(--space-12) var(--space-12);
    min-height: 44px;
    box-sizing: border-box;
}
html.theme-light body.login-ink-page .login-card .form-group input {
    background: var(--bg-secondary, var(--bg-secondary));
    border-color: var(--border-color, rgba(42, 42, 38, 0.13));
}
body.login-ink-page .login-card .form-group input:focus {
    border-color: var(--accent-gold, var(--accent-gold));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-gold, var(--accent-gold)) 12%, transparent);
    background: var(--bg-secondary, transparent);
}
html.theme-light body.login-ink-page .login-card .form-group input:focus {
    border-color: var(--accent-gold, var(--accent-gold));
    background: var(--bg-card, var(--bg-card));
}
body.login-ink-page .login-card .form-group:focus-within::before {
    display: none;
}

/* 主钮：翠色实心；圆角与输入框一致 radius-md(8px) */
body.login-ink-page .btn-primary,
body.login-ink-page .login-card .btn-primary {
    background: var(--accent-jade, var(--accent-jade)) !important;
    border: 1px solid var(--accent-jade, var(--accent-jade)) !important;
    color: var(--text-on-jade, #fff) !important;
    border-radius: var(--radius-md, var(--radius-md)) !important;
    letter-spacing: 4px !important;
    text-indent: 4px !important;
    box-shadow: none !important;
    min-height: 44px !important;
    padding: var(--space-12) var(--space-16) !important;
}
body.login-ink-page .btn-primary:hover,
body.login-ink-page .login-card .btn-primary:hover {
    background: var(--accent-jade, var(--accent-jade)) !important;
    filter: brightness(1.08);
    box-shadow: none !important;
    transform: none !important;
}
html.theme-dark body.login-ink-page .btn-primary,
html.theme-dark body.login-ink-page .login-card .btn-primary {
    background: var(--accent-jade, var(--accent-jade)) !important;
    border-color: var(--accent-jade, var(--accent-jade)) !important;
    color: var(--text-on-gold, #101418) !important;
}

/* 落地说明：段落 / 栅格 / meta chip */
body.login-ink-page .section-intro {
    font-size: var(--font-body-lg);
    line-height: 1.85;
    color: color-mix(in srgb, var(--login-ink-mist) 78%, transparent);
    margin: 0 0 var(--space-14);
}
html.theme-light body.login-ink-page .section-intro {
    color: var(--text-secondary, var(--text-secondary));
}
body.login-ink-page .section-note {
    font-size: var(--font-label);
    line-height: 1.65;
    color: color-mix(in srgb, var(--login-ink-mist) 48%, transparent);
    margin: var(--space-12) 0 0;
}
html.theme-light body.login-ink-page .section-note {
    color: var(--text-muted, var(--text-muted));
}
body.login-ink-page .world-stage,
body.login-ink-page .region-grid,
body.login-ink-page .play-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
}
@media (min-width: 720px) {
    body.login-ink-page .world-stage {
        grid-template-columns: repeat(3, 1fr);
    }
    body.login-ink-page .region-grid,
    body.login-ink-page .play-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
body.login-ink-page .play-card {
    background: color-mix(in srgb, white 4%, transparent);
    border: 1px solid color-mix(in srgb, white 10%, transparent);
    border-radius: var(--radius-xs);
    padding: var(--space-14) var(--space-14) var(--space-12);
}
html.theme-light body.login-ink-page .play-card {
    background: var(--login-glass-light);
    border-color: var(--login-ink-shadow);
}
body.login-ink-page .play-card h3,
body.login-ink-page .world-lore-card h3,
body.login-ink-page .region-card h3,
body.login-ink-page .faction-card h3 {
    font-family: "STKaiti", KaiTi, 楷体, "Noto Serif SC", serif;
    font-size: var(--font-action);
    letter-spacing: 0.06em;
    margin: 0 0 var(--space-8);
    color: var(--login-ink-fg);
}
html.theme-light body.login-ink-page .play-card h3,
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 .play-card p,
body.login-ink-page .world-lore-card p,
body.login-ink-page .region-card p,
body.login-ink-page .faction-card p {
    font-size: var(--font-body);
    line-height: 1.7;
    margin: 0;
    color: color-mix(in srgb, var(--login-ink-mist) 70%, transparent);
}
html.theme-light body.login-ink-page .play-card p,
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: var(--text-secondary, var(--text-secondary));
}
body.login-ink-page .play-label,
body.login-ink-page .region-kicker,
body.login-ink-page .faction-label {
    display: block;
    font-size: var(--font-caption);
    letter-spacing: 0.15em;
    color: var(--login-cinnabar);
    margin-bottom: var(--space-6);
}
html.theme-light body.login-ink-page .play-label,
html.theme-light body.login-ink-page .region-kicker,
html.theme-light body.login-ink-page .faction-label {
    color: var(--text-gold, var(--login-cinnabar));
}
body.login-ink-page .region-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin-top: var(--space-10);
}
body.login-ink-page .region-meta span {
    font-size: var(--font-caption);
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-xs);
    border: 1px solid color-mix(in srgb, white 10%, transparent);
    background: color-mix(in srgb, white 4%, transparent);
    color: color-mix(in srgb, var(--login-ink-mist) 55%, transparent);
}
html.theme-light body.login-ink-page .region-meta span {
    border-color: var(--login-ink-shadow);
    background: var(--login-glass-light);
    color: var(--text-muted, var(--text-muted));
}
body.login-ink-page .region-meta span.is-open {
    color: var(--text-jade, var(--text-jade));
    border-color: color-mix(in srgb, var(--accent-jade, var(--accent-jade)) 40%, transparent);
    background: color-mix(in srgb, var(--accent-jade, var(--accent-jade)) 12%, transparent);
}
html.theme-light body.login-ink-page .region-meta span.is-open {
    color: var(--text-jade, var(--accent-jade));
    border-color: color-mix(in srgb, var(--accent-jade, var(--accent-jade)) 35%, transparent);
    background: color-mix(in srgb, var(--accent-jade, var(--accent-jade)) 8%, transparent);
}
body.login-ink-page .faction-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-10);
    margin-top: var(--space-12);
}
@media (min-width: 720px) {
    body.login-ink-page .faction-row {
        grid-template-columns: repeat(2, 1fr);
    }
}
body.login-ink-page .landing-content {
    width: min(720px, calc(100vw - 40px));
}
body.login-ink-page .lore-quote {
    font-family: "STKaiti", KaiTi, 楷体, "Noto Serif SC", serif;
}

/* ============================================================
 * v3.6 · 圆角对齐游戏页 token + v3.7 浅色/间距修复
 * --radius-sm 4  控件 / 按钮 / chip
 * --radius-md 8  内卡
 * --radius-lg 12 大 section
 * 登录壳 14（对齐 .gc-dialog）
 * ============================================================ */
body.login-ink-page {
    --login-radius-ctrl: var(--radius-sm, 4px);
    --login-radius-card: var(--radius-md, 8px);
    --login-radius-panel: var(--radius-lg, 12px);
    --login-radius-shell: var(--radius-lg);
}

/* 登录卡：问劫笺壳（深/浅分别写死底色，避免 token 循环回落到夜空） */
body.login-ink-page .login-card {
    border-radius: var(--login-radius-shell) !important;
    overflow: hidden;
}
body.login-ink-page .hero-scroll-stage > .login-card {
    background: var(--bg-card);
    border: 1px solid rgba(172, 186, 196, 0.13);
    padding: var(--space-20) var(--space-20) var(--space-16);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}
html.theme-light body.login-ink-page .hero-scroll-stage > .login-card {
    background: var(--bg-card);
    border: 1px solid rgba(42, 42, 38, 0.13);
    box-shadow: 0 6px 20px rgba(42, 42, 38, 0.08);
}

body.login-ink-page .quick-action,
body.login-ink-page .theme-btn,
body.login-ink-page .info-pill,
body.login-ink-page .hero-mark,
body.login-ink-page .region-meta span {
    border-radius: var(--login-radius-ctrl) !important;
}
/* 入世主钮 / 输入 / 发送验证码：统一 radius-md(8px) */

/* 落地大 section */
body.login-ink-page .landing-section:not(.landing-section-hero) {
    border-radius: var(--login-radius-panel) !important;
    margin-bottom: var(--space-20) !important;
    padding: var(--space-24) var(--space-24) !important;
}
html.theme-light body.login-ink-page .landing-section:not(.landing-section-hero) {
    background: var(--bg-card) !important;
    border: 1px solid rgba(42, 42, 38, 0.12) !important;
    box-shadow: 0 6px 20px rgba(42, 42, 38, 0.06) !important;
}
html.theme-light body.login-ink-page .landing-section-hero {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* 内卡：底色 + 圆角 + 栅格间距（恢复卡片之间的空隙） */
body.login-ink-page .world-stage,
body.login-ink-page .region-grid,
body.login-ink-page .play-grid,
body.login-ink-page .faction-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--space-12) !important;
    margin-top: var(--space-12);
}
@media (min-width: 720px) {
    body.login-ink-page .world-stage {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    body.login-ink-page .region-grid,
    body.login-ink-page .play-grid,
    body.login-ink-page .faction-row {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
body.login-ink-page .world-lore-card,
body.login-ink-page .region-card,
body.login-ink-page .faction-card,
body.login-ink-page .play-card,
body.login-ink-page .community-box,
body.login-ink-page .lore-quote {
    border-radius: var(--login-radius-card) !important;
    padding: var(--space-14) var(--space-14) var(--space-12) !important;
    margin: 0 !important;
    background: #181e24;
    border: 1px solid rgba(172, 186, 196, 0.12);
}
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,
html.theme-light body.login-ink-page .play-card,
html.theme-light body.login-ink-page .community-box,
html.theme-light body.login-ink-page .lore-quote {
    background: var(--bg-panel) !important;
    border: 1px solid rgba(42, 42, 38, 0.1) !important;
    box-shadow: none;
}
/* login-admin 的内框 inset 会让卡面发闷且吃掉视觉间距：浅色关掉 */
html.theme-light body.login-ink-page .world-lore-card::before,
html.theme-light body.login-ink-page .region-card::before,
html.theme-light body.login-ink-page .faction-card::before,
html.theme-light body.login-ink-page .community-box::before,
html.theme-light body.login-ink-page .landing-section::before,
html.theme-light body.login-ink-page .login-card::before {
    content: none !important;
    display: none !important;
}

body.login-ink-page .card-note {
    border-radius: var(--login-radius-card) !important;
}

body.login-ink-page .toast {
    border-radius: var(--login-radius-card) !important;
}

/* 输入框消费共享 field pattern；发送验证码与主操作按钮保持 radius-md。 */
body.login-ink-page .login-card .btn-send-code,
body.login-ink-page .login-card .btn-primary,
body.login-ink-page .btn-primary {
    border-radius: var(--radius-md, var(--radius-md)) !important;
    min-height: 44px !important;
    box-sizing: border-box !important;
    font-family: var(--font-serif, inherit) !important;
}

body.login-ink-page .login-card .form-group input {
    width: 100% !important;
    padding: var(--pattern-field-block) var(--pattern-field-inline) !important;
    border-radius: var(--pattern-field-radius) !important;
    font-size: var(--font-body-lg) !important;
    background: #171c21 !important;
    border: 1px solid rgba(172, 186, 196, 0.16) !important;
    border-bottom: 1px solid rgba(172, 186, 196, 0.16) !important;
    color: var(--login-ink-mist, var(--text-primary)) !important;
    box-shadow: none !important;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
}
body.login-ink-page .login-card .form-group input:focus {
    outline: none !important;
    border-color: color-mix(in srgb, var(--accent-gold, var(--accent-gold)) 55%, transparent) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-gold, var(--accent-gold)) 14%, transparent) !important;
    background: var(--bg-card) !important;
}
body.login-ink-page .login-card .form-group input::placeholder {
    color: color-mix(in srgb, var(--login-ink-mist, var(--text-primary)) 42%, transparent) !important;
}

/* 验证码行：等高、同圆角 */
body.login-ink-page .login-card .input-with-btn {
    display: flex !important;
    align-items: stretch !important;
    gap: var(--space-8) !important;
}
body.login-ink-page .login-card .input-with-btn input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
body.login-ink-page .login-card .btn-send-code {
    flex: 0 0 auto !important;
    padding: 0 var(--space-14) !important;
    font-size: var(--font-body) !important;
    letter-spacing: 1px !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    background: var(--bg-card) !important;
    border: 1px solid color-mix(in srgb, var(--accent-gold, var(--accent-gold)) 40%, transparent) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--accent-gold, var(--accent-gold)) 40%, transparent) !important;
    color: var(--text-gold, var(--accent-gold)) !important;
    box-shadow: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: background 0.15s, border-color 0.15s, color 0.15s !important;
}
body.login-ink-page .login-card .btn-send-code:hover {
    background: color-mix(in srgb, var(--accent-gold, var(--accent-gold)) 14%, var(--bg-card)) !important;
    border-color: color-mix(in srgb, var(--accent-gold, var(--accent-gold)) 55%, transparent) !important;
    opacity: 1 !important;
    transform: none !important;
}
body.login-ink-page .login-card .btn-send-code:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

html.theme-light body.login-ink-page .login-card .form-group input {
    background: var(--bg-secondary) !important;
    border: 1px solid rgba(42, 42, 38, 0.13) !important;
    border-bottom: 1px solid rgba(42, 42, 38, 0.13) !important;
    color: var(--text-primary) !important;
}
html.theme-light body.login-ink-page .login-card .form-group input:focus {
    background: var(--bg-card) !important;
    border-color: var(--accent-gold) !important;
    box-shadow: 0 0 0 2px rgba(138, 94, 30, 0.12) !important;
}
html.theme-light body.login-ink-page .login-card .form-group input::placeholder {
    color: rgba(42, 42, 38, 0.38) !important;
}
html.theme-light body.login-ink-page .login-card .btn-send-code {
    background: var(--bg-card) !important;
    border: 1px solid rgba(138, 94, 30, 0.35) !important;
    border-bottom: 1px solid rgba(138, 94, 30, 0.35) !important;
    color: var(--accent-gold) !important;
}
html.theme-light body.login-ink-page .login-card .btn-send-code:hover {
    background: rgba(138, 94, 30, 0.1) !important;
    border-color: rgba(138, 94, 30, 0.5) !important;
}

body.login-ink-page .quick-action,
body.login-ink-page .login-quick-actions .quick-action,
body.login-ink-page .theme-btn,
body.login-ink-page .theme-switch-group .theme-btn,
body.login-ink-page .info-pill,
body.login-ink-page .hero-mark,
body.login-ink-page .region-meta span {
    border-radius: var(--radius-sm, var(--radius-xs)) !important;
}

body.login-ink-page .login-card .form-group input,
body.login-ink-page .login-card .btn-send-code,
body.login-ink-page .login-card .btn-primary,
body.login-ink-page .btn-primary {
    border-radius: var(--radius-md, var(--radius-md)) !important;
}

body.login-ink-page .login-card .form-group input {
    border-radius: var(--pattern-field-radius) !important;
}

body.login-ink-page .login-card,
body.login-ink-page .hero-scroll-stage > .login-card {
    border-radius: var(--radius-lg) !important;
}

body.login-ink-page .landing-section:not(.landing-section-hero) {
    border-radius: var(--radius-lg, var(--radius-lg)) !important;
}

body.login-ink-page .world-lore-card,
body.login-ink-page .region-card,
body.login-ink-page .faction-card,
body.login-ink-page .play-card,
body.login-ink-page .community-box,
body.login-ink-page .card-note,
body.login-ink-page .toast {
    border-radius: var(--radius-md, var(--radius-md)) !important;
}

/* 引语：四角圆角，不再用 0 3px 3px 0 的直角侧 */
body.login-ink-page .lore-quote {
    border-radius: var(--radius-md, var(--radius-md)) !important;
    border-left-width: 1px !important; /* 与全边框一致，去掉加粗左轨观感 */
}

/* 主题组容器本身不要成块（避免双层底） */
body.login-ink-page .theme-switch-group,
body.login-ink-page .login-theme-switch {
    border-radius: 0 !important;
    background: transparent !important;
}

/* ============================================================
 * 十、TapTap 客户端下载入口
 * 登录台尾部的品牌徽章按钮；悬停/键盘聚焦时向上浮出
 * 白底二维码卡；触屏无 hover，点击直达 tap.cn 短链。
 * ============================================================ */

body.login-ink-page .login-taptap {
    /* TapTap 官方品牌绿，取自 taptap.io 官方 CSS 的 --green-primary
       亮/深两档；第三方品牌标识色仅在此作用域使用，不进全局 token。 */
    --taptap-brand: #28c290;
    --taptap-brand-deep: #12d181;
    position: relative;
    width: 100%;
    max-width: 400px;
}

body.login-ink-page .taptap-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-10);
    width: 100%;
    min-height: var(--pattern-touch-target);
    background: var(--taptap-brand);
    border: 1px solid var(--taptap-brand);
    border-radius: var(--radius-sm, var(--radius-xs)) !important;
    color: white;
    font-size: var(--font-body);
    font-weight: 700;
    letter-spacing: 2px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}

body.login-ink-page .taptap-btn .taptap-logo {
    width: 50px;
    height: 14px;
    flex: 0 0 auto;
    color: white;
}

body.login-ink-page .taptap-btn .taptap-label {
    line-height: 1;
}

body.login-ink-page .taptap-btn:hover,
body.login-ink-page .taptap-btn:focus-visible {
    background: var(--taptap-brand-deep);
    border-color: var(--taptap-brand-deep);
    color: white;
    transform: translateY(-1px);
    outline: none;
}

body.login-ink-page .taptap-btn:active {
    transform: translateY(0);
}

/* 二维码浮层：白底实物卡（扫码刚需，深浅主题同底），默认收起 */
body.login-ink-page .taptap-qr {
    position: absolute;
    left: 50%;
    bottom: calc(100% + var(--space-6));
    transform: translate(-50%, var(--space-4));
    display: grid;
    justify-items: center;
    gap: var(--space-8);
    width: 180px;
    padding: var(--space-12) var(--space-12) var(--space-10);
    background: white;
    border: 1px solid color-mix(in srgb, var(--login-ink-black) 12%, transparent);
    border-radius: var(--radius-md, var(--radius-md)) !important;
    box-shadow: 0 16px 44px var(--shadow-black-3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 3;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}

body.login-ink-page .taptap-qr img {
    display: block;
    width: 132px;
    height: 132px;
}

body.login-ink-page .taptap-qr p {
    margin: 0;
    color: color-mix(in srgb, var(--login-ink-black) 65%, transparent);
    font-size: var(--font-caption);
    letter-spacing: 1px;
    text-align: center;
}

/* 显示态：容器悬停（浮层为容器子元素，可把鼠标移到码上）或聚焦按钮。
   透明桥 ::after 覆盖浮层与按钮之间的间隙，避免鼠标穿行时提前收起。 */
body.login-ink-page .login-taptap:hover .taptap-qr,
body.login-ink-page .login-taptap:focus-within .taptap-qr {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    pointer-events: auto;
}

body.login-ink-page .taptap-qr::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: var(--space-6);
}

@media (prefers-reduced-motion: reduce) {
    body.login-ink-page .taptap-btn,
    body.login-ink-page .taptap-qr {
        transition: none;
        transform: none;
    }
}

/* ============================================================
 * v3.16 · 观星图录（方向 A · design-demos/login/roulette-starr-atlas）
 * 星图背景（SVG 星轨/星官/散点星/被标注的太阴）+ 登录框图录符牌化
 * 登录卡 = 奶油纸面符牌：墨线双框（box-shadow 内线，卡级伪元素已被
 * 前版 content:none 封禁）+ 悬挂页签 + 朱砂印章 + 图录编号 + 朱砂主钮
 * 朱砂在纸面上为登录场景专属跳色，用 --atlas-* 局部 token 承载，
 * 不复用 --login-cinnabar（暗色下已被映射为金，会破坏纸面色彩纪律）
 * ============================================================ */

/* —— 图录局部 token（默认 = 夜间） —— */
body.login-ink-page {
    /* 纸面 / 墨框 */
    --atlas-blue: #2B4F91;              /* 图录编号：钴蓝（纸面上） */
    --atlas-cinnabar: #b7352d;          /* 纸面朱砂跳色（不复用 --login-cinnabar） */
    --atlas-seal-radius: 2px;           /* 印章特殊绘图件业务圆角，不走通用阶梯 */
    --atlas-stamp-radius: 3px;          /* 朱砂大印特殊绘图件业务圆角，不走通用阶梯 */
    --atlas-optical-hairline: 1px;      /* 光学校正 1px 细线 */
    --atlas-cinnabar-deep: #962d22;
    --atlas-paper-a: #f6f3ea;
    --atlas-paper-b: #f3f1ea;
    --atlas-paper-c: #ece8db;
    --atlas-pl-border: rgba(31, 31, 28, 0.5);
    --atlas-pl-inner: rgba(31, 31, 28, 0.2);
    --atlas-field-bg: #faf8f1;
    --atlas-field-focus-bg: #fffdf7;
    --atlas-tab-bg: rgba(238, 240, 242, 0.06);
    --atlas-tab-border: rgba(238, 240, 242, 0.16);
    --atlas-tab-hover: rgba(238, 240, 242, 0.35);
    --atlas-tab-text: rgba(238, 240, 242, 0.68);
    --atlas-pm-line: rgba(43, 79, 145, 0.16);
    --atlas-pm-dot: rgba(43, 79, 145, 0.22);
    /* TapTap 线框徽章（图录三色纪律：月白线框，logo 单色 currentColor） */
    --atlas-tt-border: rgba(238, 240, 242, 0.26);
    --atlas-tt-hover: rgba(238, 240, 242, 0.55);
    --atlas-tt-text: rgba(238, 240, 242, 0.85);
    --atlas-tt-hover-bg: rgba(238, 240, 242, 0.05);
    /* 星图（沧海青夜空） */
    --atlas-orbit: rgba(103, 183, 222, 0.16);
    --atlas-orbit-soft: rgba(103, 183, 222, 0.09);
    --atlas-orbit-dot: rgba(103, 183, 222, 0.14);
    --atlas-radial: rgba(103, 183, 222, 0.06);
    --atlas-star-c: #e8e6df;
    --atlas-star-b: #67b7de;
    --atlas-cons-line: rgba(103, 183, 222, 0.26);
    --atlas-moon-fill: #e8e6df;
    --atlas-moon-crater: rgba(18, 22, 26, 0.07);
    --atlas-moon-ring: rgba(103, 183, 222, 0.38);
    --atlas-moon-tick: rgba(103, 183, 222, 0.5);
    --atlas-moon-stroke: transparent;
    --atlas-anno: rgba(154, 187, 214, 0.9);
    --atlas-leader: rgba(103, 183, 222, 0.4);
    --atlas-leader-dot: rgba(103, 183, 222, 0.6);
    --atlas-pole-x: rgba(232, 230, 223, 0.35);
    --atlas-pole-dot: #e8e6df;
}

/* —— 图录局部 token（日间：暖纸 / 墨青图录线 / 淡日） —— */
html.theme-light body.login-ink-page {
    --atlas-blue: #3a6a84;              /* 深墨青，纸上对比 ≥4.5:1 */
    --atlas-cinnabar: #b7352d;
    --atlas-cinnabar-deep: #962d22;
    --atlas-paper-a: #fdfbf6;
    --atlas-paper-b: #faf7ee;
    --atlas-paper-c: #f2eee1;
    --atlas-pl-border: rgba(42, 42, 38, 0.55);
    --atlas-pl-inner: rgba(42, 42, 38, 0.3);
    --atlas-field-bg: #fffdf7;
    --atlas-field-focus-bg: #fffffc;
    --atlas-tab-bg: rgba(255, 255, 255, 0.45);
    --atlas-tab-border: rgba(42, 42, 38, 0.25);
    --atlas-tab-hover: rgba(42, 42, 38, 0.45);
    --atlas-tab-text: rgba(31, 31, 28, 0.68);
    --atlas-pm-line: rgba(58, 106, 132, 0.2);
    --atlas-pm-dot: rgba(58, 106, 132, 0.26);
    --atlas-tt-border: rgba(42, 42, 38, 0.32);
    --atlas-tt-hover: rgba(42, 42, 38, 0.55);
    --atlas-tt-text: rgba(31, 31, 28, 0.85);
    --atlas-tt-hover-bg: rgba(42, 42, 38, 0.05);
    /* 星图转墨青图录线，低饱和 */
    --atlas-orbit: rgba(58, 106, 132, 0.3);
    --atlas-orbit-soft: rgba(58, 106, 132, 0.16);
    --atlas-orbit-dot: rgba(58, 106, 132, 0.22);
    --atlas-radial: rgba(58, 106, 132, 0.12);
    --atlas-star-c: rgba(42, 42, 38, 0.35);
    --atlas-star-b: rgba(58, 106, 132, 0.45);
    --atlas-cons-line: rgba(58, 106, 132, 0.32);
    --atlas-moon-fill: #f8f2e4;         /* 淡日浅盘 */
    --atlas-moon-crater: rgba(42, 42, 38, 0.05);
    --atlas-moon-ring: rgba(58, 106, 132, 0.35);
    --atlas-moon-tick: rgba(58, 106, 132, 0.45);
    --atlas-moon-stroke: rgba(42, 42, 38, 0.16);
    --atlas-anno: rgba(42, 42, 38, 0.62);
    --atlas-leader: rgba(58, 106, 132, 0.45);
    --atlas-leader-dot: rgba(58, 106, 132, 0.55);
    --atlas-pole-x: rgba(42, 42, 38, 0.4);
    --atlas-pole-dot: rgba(42, 42, 38, 0.55);
}

/* ============ 一、星图背景 ============ */
body.login-ink-page .login-atlas-sky {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}
body.login-ink-page .atlas-ln   { fill: none; stroke: var(--atlas-orbit); stroke-width: 1; }
body.login-ink-page .atlas-ln.s { stroke: var(--atlas-orbit-soft); }
body.login-ink-page .atlas-ln.d { stroke: var(--atlas-orbit-dot); stroke-dasharray: 1 7; stroke-linecap: round; }
body.login-ink-page .atlas-ecl     { fill: none; stroke: var(--atlas-orbit-soft); stroke-width: 1; stroke-dasharray: 7 9; }
body.login-ink-page .atlas-radial  { stroke: var(--atlas-radial); stroke-width: 1; }
body.login-ink-page .atlas-pole-x  { stroke: var(--atlas-pole-x); stroke-width: 1; fill: none; }
body.login-ink-page .atlas-pole-dot { fill: var(--atlas-pole-dot); }
body.login-ink-page .atlas-star.c { fill: var(--atlas-star-c); }
body.login-ink-page .atlas-star.b { fill: var(--atlas-star-b); }
body.login-ink-page .atlas-cons   { fill: none; stroke: var(--atlas-cons-line); stroke-width: 1; }
body.login-ink-page .atlas-mbody   { fill: var(--atlas-moon-fill); stroke: var(--atlas-moon-stroke); stroke-width: 1; }
body.login-ink-page .atlas-mcrater { fill: var(--atlas-moon-crater); }
body.login-ink-page .atlas-mring   { fill: none; stroke: var(--atlas-moon-ring); stroke-width: 1; stroke-dasharray: 2 6; }
body.login-ink-page .atlas-mtick   { stroke: var(--atlas-moon-tick); stroke-width: 1; fill: none; }
body.login-ink-page .atlas-mlead   { stroke: var(--atlas-leader); stroke-width: 1; fill: none; }
body.login-ink-page .atlas-mleaddot { fill: var(--atlas-leader-dot); }
body.login-ink-page .atlas-anno text { fill: var(--atlas-anno); }
/* 散点星闪烁（日间 / 减动效停闪） */
body.login-ink-page .atlas-tw { animation: atlasTwinkle var(--d, 3.2s) ease-in-out var(--dl, 0s) infinite; }
@keyframes atlasTwinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}
html.theme-light body.login-ink-page .atlas-tw { animation: none; }
html.theme-light body.login-ink-page .atlas-moon-d { opacity: 0.78; }
body.login-ink-page .atlas-moon-m { display: none; }
@media (max-width: 880px) {
    body.login-ink-page .atlas-moon-d { display: none; }
    body.login-ink-page .atlas-moon-m { display: block; }
}
@media (prefers-reduced-motion: reduce) {
    body.login-ink-page .atlas-tw { animation: none; }
}
/* 旧 CSS 月亮退场：太阴移入星图 SVG（带虚线测量环与古籍注记） */
body.login-ink-page .ink-moon { display: none !important; }

/* ============ 二、桌面双栏图录构图（左卷首 / 右符牌） ============ */
@media (min-width: 881px) {
    body.login-ink-page .login-hero {
        grid-template-columns: 1fr 404px !important;
        column-gap: var(--space-48) !important;
        align-items: center !important;
        width: min(1128px, calc(100vw - 40px)) !important;
        max-width: min(1128px, calc(100vw - 40px)) !important;
        min-height: calc(100vh - var(--space-48)) !important;
        padding-top: var(--space-48) !important;
    }
    body.login-ink-page .hero-scroll-head {
        text-align: left;
        padding: var(--space-24) 0 var(--space-40);
        margin-bottom: 0;
    }
    body.login-ink-page .scroll-head-manifesto { text-indent: 0; }
    body.login-ink-page .hero-scroll-stage {
        max-width: none;
        padding: 0 0 var(--space-48);
    }
}
/* 主题切换：挂到 hero 右上（DOM 已移出卷首 header） */
body.login-ink-page .login-hero > .scroll-head-theme {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
}
/* 卷首标题行：书法大字 + 小方印 */
body.login-ink-page .scroll-head-title-row {
    display: flex;
    align-items: flex-end;
    gap: var(--space-16);
}
/* 印章为特殊绘图件：2px/3px 印章圆角不取通用阶梯 */
body.login-ink-page .scroll-head-seal {
    width: 22px;
    height: 22px;
    margin-bottom: var(--space-10);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--atlas-cinnabar);
    color: var(--atlas-paper-b, #f3f1ea);
    border-radius: var(--atlas-seal-radius);
    font-family: "STKaiti", KaiTi, 楷体, "Noto Serif SC", serif;
    font-size: var(--font-caption);
    line-height: 1;
    user-select: none;
}

/* ============ 三、TapTap：图录线框徽章（卷首下） ============ */
/* width: fit-content 让二维码浮层的 left:50% 参照徽章实际宽度（否则相对
   全栏宽取中点，浮层会错位到徽章右侧），见 .taptap-qr 的定位依赖 */
body.login-ink-page .hero-scroll-head .login-taptap {
    width: fit-content;
    max-width: none;
    margin-top: var(--space-32);
}
body.login-ink-page .hero-scroll-head .taptap-btn {
    display: inline-flex;
    width: auto;
    min-height: 48px;
    padding: 0 var(--space-20);
    background: transparent;
    border: 1px solid var(--atlas-tt-border);
    color: var(--atlas-tt-text);
    font-weight: 400;
    letter-spacing: 2px;
}
body.login-ink-page .hero-scroll-head .taptap-btn:hover,
body.login-ink-page .hero-scroll-head .taptap-btn:focus-visible {
    background: var(--atlas-tt-hover-bg);
    border-color: var(--atlas-tt-hover);
    color: var(--login-ink-fg);
    transform: none;
}
body.login-ink-page .hero-scroll-head .taptap-btn .taptap-logo {
    width: 56px;
    height: 16px;
    color: currentColor;
}

/* ============ 四、登录框 = 图录符牌（纸面） ============ */
body.login-ink-page .hero-scroll-stage > .login-card {
    position: relative;
    background: linear-gradient(180deg, var(--atlas-paper-a) 0%, var(--atlas-paper-b) 55%, var(--atlas-paper-c) 100%) !important;
    border: 1px solid var(--atlas-pl-border) !important;
    border-radius: var(--radius-sm) !important;
    padding: var(--space-24) var(--space-24) var(--space-20) !important;
    /* 双线图录框：inset 4px 纸色 + 5px 墨线 = 距边 4px 处一圈 1px 细墨线
       （卡级 ::before/::after 已被前版 content:none 封禁，故用 box-shadow 画内线） */
    box-shadow:
        inset 0 0 0 4px var(--atlas-paper-a),
        inset 0 0 0 5px var(--atlas-pl-inner),
        0 2px 0 rgba(31, 31, 28, 0.22),
        0 28px 64px rgba(0, 0, 0, 0.55),
        0 8px 20px rgba(0, 0, 0, 0.4) !important;
    overflow: visible !important;
}
html.theme-light body.login-ink-page .hero-scroll-stage > .login-card {
    box-shadow:
        inset 0 0 0 4px var(--atlas-paper-a),
        inset 0 0 0 5px var(--atlas-pl-inner),
        0 2px 0 rgba(42, 42, 38, 0.12),
        0 24px 48px rgba(42, 42, 38, 0.16),
        0 6px 14px rgba(42, 42, 38, 0.08) !important;
}

/* 纸面星图残片（印刷在符牌右下的淡色星图） */
body.login-ink-page .login-plaque-mark {
    position: absolute;
    right: 12px;
    bottom: 10px;
    width: 92px;
    height: 72px;
    z-index: 0;
    pointer-events: none;
    opacity: 0.8;
}
body.login-ink-page .login-plaque-mark .pm-l  { fill: none; stroke: var(--atlas-pm-line); stroke-width: 1; }
body.login-ink-page .login-plaque-mark .pm-ld { fill: none; stroke: var(--atlas-pm-line); stroke-width: 1; stroke-dasharray: 1 5; stroke-linecap: round; }
body.login-ink-page .login-plaque-mark circle { fill: var(--atlas-pm-dot); }

/* 符牌头：图录编号 kicker + 楷体标题 + 朱砂印章 */
body.login-ink-page .login-card-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-16);
}
body.login-ink-page .login-card .card-kicker {
    display: flex;
    align-items: center;
    gap: var(--space-8);
    color: var(--atlas-blue) !important;
    font-family: system-ui, -apple-system, "PingFang SC", sans-serif;
    letter-spacing: 4px;
    opacity: 1;
    margin-bottom: var(--space-2);
}
body.login-ink-page .login-card .card-kicker::before {
    content: "";
    width: 16px;
    height: 1px;
    background: var(--atlas-blue);
    flex: 0 0 auto;
}
body.login-ink-page .login-card .card-title {
    color: #1f1f1c !important;
    font-size: var(--font-page-title);
    letter-spacing: 6px;
    margin-bottom: 0;
    padding-left: 0;
    text-align: left;
}
html.theme-light body.login-ink-page .login-card .card-title { color: #1f1f1c !important; }
body.login-ink-page .login-card .card-desc {
    position: relative;
    z-index: 1;
    color: rgba(31, 31, 28, 0.64) !important;
    margin: var(--space-12) 0 var(--space-20);
}
html.theme-light body.login-ink-page .login-card .card-desc { color: rgba(31, 31, 28, 0.64) !important; }

/* 朱砂方印（特殊绘图件：印章圆角 3px、-2° 手工盖印斜度） */
body.login-ink-page .login-card-seal {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--atlas-cinnabar);
    border-radius: var(--atlas-stamp-radius);
    color: var(--atlas-cinnabar);
    font-family: "STKaiti", KaiTi, 楷体, "Noto Serif SC", serif;
    font-size: var(--font-action);
    line-height: 1.2;
    letter-spacing: 1px;
    transform: rotate(-2deg);
    box-shadow: inset 0 0 0 1px rgba(183, 53, 45, 0.28);
    user-select: none;
}
body.login-ink-page .login-card-seal i { font-style: normal; }

/* ============ 五、悬挂页签：贴在符牌顶边的图录索引签 ============ */
body.login-ink-page .hero-scroll-stage > .login-quick-actions {
    display: flex;
    grid-template-columns: none;
    gap: var(--space-8);
    width: 100%;
    max-width: 400px;
    /* 吃掉 stage 的 24px 间隙并下压 1px，咬合符牌顶边墨线 */
    margin-bottom: calc(-1 * var(--space-24) + var(--atlas-optical-hairline));
    position: relative;
    z-index: 2;
}
body.login-ink-page .login-quick-actions .quick-action {
    min-height: 44px;
    padding: 0 var(--space-20);
    background: var(--atlas-tab-bg) !important;
    border: 1px solid var(--atlas-tab-border) !important;
    border-bottom: none !important;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0 !important;
    color: var(--atlas-tab-text) !important;
    letter-spacing: 4px;
    text-indent: 4px;
    font-size: var(--font-action);
    transition: color 0.2s, border-color 0.2s, background 0.2s !important;
}
body.login-ink-page .login-quick-actions .quick-action:hover {
    color: var(--login-ink-fg) !important;
    border-color: var(--atlas-tab-hover) !important;
    background: var(--atlas-tab-bg) !important;
}
body.login-ink-page .login-quick-actions .quick-action.active {
    /* 激活页签与符牌同纸面，压住顶边墨线连成一体 */
    margin-bottom: calc(-1 * var(--atlas-optical-hairline));
    background: var(--atlas-paper-b) !important;
    border-color: var(--atlas-pl-border) !important;
    color: var(--atlas-cinnabar-deep) !important;
    box-shadow: none !important;
}
html.theme-light body.login-ink-page .login-quick-actions .quick-action.active {
    background: var(--atlas-paper-b) !important;
    border-color: var(--atlas-pl-border) !important;
    color: var(--atlas-cinnabar-deep) !important;
}

/* ============ 六、表单：图录填写栏（纸面墨字） ============ */
body.login-ink-page .login-card .form-group { position: relative; z-index: 1; }
body.login-ink-page .login-card .form-group label {
    color: rgba(31, 31, 28, 0.74) !important;
    margin-bottom: var(--space-6);
}
html.theme-light body.login-ink-page .login-card .form-group label {
    color: rgba(31, 31, 28, 0.74) !important;
}
body.login-ink-page .login-card .form-group label .fnum {
    margin-right: var(--space-6);
    font-family: "Songti SC", STSong, "Noto Serif SC", serif;
    font-size: var(--font-caption);
    color: var(--atlas-blue);
}
body.login-ink-page .login-card .form-group input {
    background: var(--atlas-field-bg) !important;
    border: 1px solid rgba(31, 31, 28, 0.28) !important;
    border-bottom: 1px solid rgba(31, 31, 28, 0.28) !important;
    color: #1f1f1c !important;
}
html.theme-light body.login-ink-page .login-card .form-group input {
    background: var(--atlas-field-bg) !important;
    border-color: rgba(42, 42, 38, 0.3) !important;
    border-bottom-color: rgba(42, 42, 38, 0.3) !important;
    color: #1f1f1c !important;
}
body.login-ink-page .login-card .form-group input:focus {
    outline: none !important;
    border-color: var(--atlas-cinnabar) !important;
    background: var(--atlas-field-focus-bg) !important;
    box-shadow: 0 0 0 3px rgba(183, 53, 45, 0.13) !important;
}
html.theme-light body.login-ink-page .login-card .form-group input:focus {
    border-color: var(--atlas-cinnabar) !important;
    background: var(--atlas-field-focus-bg) !important;
    box-shadow: 0 0 0 3px rgba(183, 53, 45, 0.13) !important;
}
body.login-ink-page .login-card .form-group input::placeholder {
    color: rgba(31, 31, 28, 0.4) !important;
    font-size: var(--font-body);
    letter-spacing: 1px;
}
html.theme-light body.login-ink-page .login-card .form-group input::placeholder {
    color: rgba(31, 31, 28, 0.4) !important;
}

/* 发送验证码：纸面墨描边 */
body.login-ink-page .login-card .btn-send-code {
    background: transparent !important;
    border: 1px solid rgba(31, 31, 28, 0.42) !important;
    border-bottom: 1px solid rgba(31, 31, 28, 0.42) !important;
    color: rgba(31, 31, 28, 0.85) !important;
}
html.theme-light body.login-ink-page .login-card .btn-send-code {
    background: transparent !important;
    border-color: rgba(42, 42, 38, 0.45) !important;
    border-bottom-color: rgba(42, 42, 38, 0.45) !important;
    color: rgba(31, 31, 28, 0.85) !important;
}
body.login-ink-page .login-card .btn-send-code:hover {
    background: rgba(31, 31, 28, 0.06) !important;
    border-color: rgba(31, 31, 28, 0.6) !important;
}
html.theme-light body.login-ink-page .login-card .btn-send-code:hover {
    background: rgba(42, 42, 38, 0.06) !important;
}

/* ============ 七、主按钮：朱砂实心（符牌上唯一跳色） ============ */
body.login-ink-page .login-card .btn-primary,
body.login-ink-page .btn-primary,
html.theme-dark body.login-ink-page .login-card .btn-primary,
html.theme-dark body.login-ink-page .btn-primary {
    background: linear-gradient(180deg, #c23b31 0%, var(--atlas-cinnabar) 45%, #a53026 100%) !important;
    border: 1px solid var(--atlas-cinnabar-deep) !important;
    color: #f8f4ec !important;
    border-radius: var(--radius-sm) !important;
    font-family: "STKaiti", KaiTi, 楷体, "Noto Serif SC", serif !important;
    font-size: var(--font-title) !important;
    letter-spacing: 12px !important;
    text-indent: 12px !important;
    box-shadow: 0 8px 20px rgba(183, 53, 45, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
    min-height: 48px !important;
    margin-top: var(--space-8) !important;
}
body.login-ink-page .login-card .btn-primary:hover,
body.login-ink-page .btn-primary:hover,
html.theme-dark body.login-ink-page .login-card .btn-primary:hover,
html.theme-dark body.login-ink-page .btn-primary:hover {
    background: linear-gradient(180deg, #c84136 0%, var(--atlas-cinnabar) 45%, #a53026 100%) !important;
    filter: none;
    box-shadow: 0 10px 24px rgba(183, 53, 45, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
    transform: none !important;
}

body.login-ink-page .login-card .form-switch a {
    color: var(--atlas-cinnabar-deep) !important;
}
html.theme-light body.login-ink-page .login-card .form-switch a {
    color: var(--atlas-cinnabar-deep) !important;
}

/* 警示：符牌末行的朱批（顶细线 + 朱点） */
body.login-ink-page .login-card .card-note {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    background: transparent !important;
    border: none !important;
    border-top: 1px solid rgba(31, 31, 28, 0.14) !important;
    border-radius: 0 !important;
    color: var(--atlas-cinnabar-deep) !important;
    padding: var(--space-12) 0 0 !important;
    margin: var(--space-16) 0 0 !important;
    box-shadow: none !important;
}
body.login-ink-page .login-card .card-note::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--atlas-cinnabar);
    border-radius: 50%;
    flex: 0 0 auto;
}
html.theme-light body.login-ink-page .login-card .card-note {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid rgba(42, 42, 38, 0.14) !important;
    color: var(--atlas-cinnabar-deep) !important;
    box-shadow: none !important;
}

/* ============ 八、移动端（≤880px）：上下堆叠 ============ */
@media (max-width: 880px) {
    body.login-ink-page .login-hero {
        width: min(440px, calc(100vw - 32px)) !important;
        max-width: min(440px, calc(100vw - 32px)) !important;
    }
    body.login-ink-page .hero-scroll-head {
        text-align: center;
        padding: 0 var(--space-16) var(--space-24);
    }
    body.login-ink-page .scroll-head-title-row {
        justify-content: center;
    }
    body.login-ink-page .scroll-head-seal {
        width: 20px;
        height: 20px;
        font-size: var(--font-micro);
        margin-bottom: var(--space-6);
    }
    body.login-ink-page .hero-scroll-head .login-taptap {
        /* 手机端同样收缩到徽章宽并整体居中，保证二维码浮层对位 */
        width: fit-content;
        margin: var(--space-16) auto 0;
    }
    body.login-ink-page .hero-scroll-head .taptap-btn {
        min-height: 44px;
        padding: 0 var(--space-16);
    }
    /* stage 间隙在 880 内为 20px，页签负 margin 同步 */
    body.login-ink-page .hero-scroll-stage > .login-quick-actions {
        margin-bottom: calc(-1 * var(--space-20) + var(--atlas-optical-hairline));
    }
    body.login-ink-page .login-quick-actions .quick-action {
        padding: 0 var(--space-16);
        letter-spacing: 3px;
        text-indent: 3px;
    }
    body.login-ink-page .hero-scroll-stage > .login-card {
        padding: var(--space-20) var(--space-16) var(--space-16) !important;
    }
    body.login-ink-page .login-card .card-title { letter-spacing: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    body.login-ink-page .login-card-seal,
    body.login-ink-page .quick-action {
        transition: none !important;
    }
}