/* ============================================================
 * 灵界登录页 · 天道司同款水墨后台 UI
 * 仅作用于 index.html 的 body.login-ink-page
 * ============================================================ */

body.login-ink-page {
    --login-paper: var(--bg-primary);
    --login-paper-2: var(--bg-secondary);
    --login-paper-3: var(--bg-secondary);
    --login-paper-soft: var(--bg-card);
    --login-black: var(--text-primary);
    --login-700: var(--text-primary);
    --login-500: var(--text-secondary);
    --login-400: var(--text-muted);
    --login-300: var(--ghost-purple-muted);
    --login-cinnabar: var(--accent-crimson);
    --login-cinnabar-deep: var(--accent-crimson);
    --login-jade: var(--accent-jade);
    
    
    --login-line: var(--shadow-black-3);
    --login-line-soft: var(--shadow-black-3);
    --login-shadow-sm: 0 1px 4px var(--shadow-black-3);
    --login-shadow-md: 0 6px 22px var(--shadow-black-3);
    

    /* 登录页只建立 --login-* 语义别名；全局主题 token 必须保持从 html 继承。
       若在这里反向声明 --bg-* / --text-* / --accent-*，会与上面的别名形成
       A -> B -> A 循环，浏览器会把相关颜色解析为 invalid。 */

    background: var(--login-paper);
    background-image: none;
    color: var(--login-black);
    font-family: var(--font-serif, "Songti SC", STSong, SimSun, "Noto Serif SC", "Source Han Serif SC", serif);
    padding: var(--space-20) 0 0;
}

body.login-ink-page .login-bg-overlay {
    display: none;
}

body.login-ink-page .login-ink-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--login-paper);
}

body.login-ink-page .login-ink-bg::before {
    display: none;
}

body.login-ink-page .login-ink-mountain {
    display: none;
}

body.login-ink-page .login-ink-cloud {
    display: none;
}

body.login-ink-page .login-ink-cloud--top { top: 6%; }
body.login-ink-page .login-ink-cloud--bottom { bottom: 18%; }

body.login-ink-page .login-ink-stroke {
    display: none;
}

body.login-ink-page .login-hero {
    width: min(1160px, calc(100vw - 40px));
    grid-template-columns: minmax(0, 1fr) 392px;
    gap: var(--space-16);
    padding: 0;
}

body.login-ink-page .login-theme-switch {
    flex: 0 0 auto;
    width: 138px;
}

body.login-ink-page .text-warn,
body.login-ink-page .text-warn-bold {
    color: var(--login-cinnabar);
}

body.login-ink-page .login-card,
body.login-ink-page .landing-section,
body.login-ink-page .community-box,
body.login-ink-page .world-lore-card,
body.login-ink-page .region-card,
body.login-ink-page .faction-card {
    position: relative;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    background: var(--login-paper-soft);
    border: 1px solid var(--login-line);
    border-radius: var(--radius-xs);
    box-shadow: var(--login-shadow-md);
}

body.login-ink-page .login-card::before,
body.login-ink-page .landing-section::before,
body.login-ink-page .community-box::before,
body.login-ink-page .world-lore-card::before,
body.login-ink-page .region-card::before,
body.login-ink-page .faction-card::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid var(--login-line-soft);
    border-radius: var(--radius-xs);
    pointer-events: none;
}

body.login-ink-page .card-title,
body.login-ink-page .landing-section h2 {
    color: var(--login-black);
    letter-spacing: 3px;
    text-shadow: none;
    overflow-wrap: anywhere;
    font-family: var(--font-display, KaiTi, 楷体, serif);
}

body.login-ink-page .card-desc,
body.login-ink-page .section-intro,
body.login-ink-page .world-lore-card p,
body.login-ink-page .region-card p,
body.login-ink-page .faction-card p,
body.login-ink-page .community-box p,
body.login-ink-page .source-note {
    color: var(--login-500);
    overflow-wrap: anywhere;
}

body.login-ink-page .login-card {
    width: 100%;
    padding: var(--space-24);
}

body.login-ink-page .card-title {
    margin-bottom: var(--space-12);
    text-align: left;
}

body.login-ink-page .card-kicker {
    color: var(--login-jade);
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--font-caption);
    line-height: 1;
    letter-spacing: 3px;
}

body.login-ink-page .login-quick-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-8);
}

body.login-ink-page .quick-action {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--login-line);
    border-radius: var(--radius-xs);
    background: white;
    color: var(--login-700);
    font-size: var(--font-body);
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 2px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

body.login-ink-page .quick-action:hover,
body.login-ink-page .quick-action.active {
    background: color-mix(in srgb, var(--accent-jade) 8%, transparent);
    border-color: color-mix(in srgb, var(--accent-jade) 34%, transparent);
    color: var(--login-jade);
}

body.login-ink-page .card-kicker {
    margin-bottom: var(--space-8);
}

body.login-ink-page .card-note {
    margin: var(--space-12) 0 0;
    padding: var(--space-10) var(--space-10);
    border: 1px solid color-mix(in srgb, var(--accent-crimson) 20%, transparent);
    border-radius: var(--radius-xs);
    background: color-mix(in srgb, var(--accent-crimson) 5%, transparent);
    font-size: var(--font-label);
    line-height: 1.5;
}

body.login-ink-page .form-group label {
    color: var(--login-500);
}

body.login-ink-page .form-group input {
    background: white;
    border: 1px solid var(--login-line);
    border-radius: var(--radius-xs);
    color: var(--login-black);
    box-shadow: inset 0 1px 0 color-mix(in srgb, white 45%, transparent);
}

body.login-ink-page .form-group input:focus {
    border-color: color-mix(in srgb, var(--accent-jade) 34%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-jade) 8%, transparent);
}

body.login-ink-page .form-group input::placeholder {
    color: var(--login-300);
}

body.login-ink-page .btn-primary,
body.login-ink-page .btn-send-code {
    border-radius: var(--radius-xs);
    font-family: inherit;
}

body.login-ink-page .btn-send-code {
    background: white;
    border: 1px solid var(--login-line);
    color: var(--login-jade);
}

body.login-ink-page .btn-send-code:hover {
    background: var(--login-paper-soft);
    border-color: color-mix(in srgb, var(--accent-jade) 24%, transparent);
    color: var(--login-jade);
    transform: translateY(-1px);
}

body.login-ink-page .form-switch,
body.login-ink-page .form-switch .switch-sep {
    color: var(--login-400);
}

body.login-ink-page .form-switch a,
body.login-ink-page .community-highlight,
body.login-ink-page .section-eyebrow {
    color: var(--login-jade);
}

body.login-ink-page .form-divider::before,
body.login-ink-page .form-divider::after {
    background: var(--login-line);
}

body.login-ink-page .form-divider span {
    background: var(--login-paper-soft);
    color: var(--login-400);
}

body.login-ink-page .landing-content {
    width: min(1040px, calc(100vw - 40px));
    padding: var(--space-24) 0 var(--space-48);
}

body.login-ink-page .info-pill,
body.login-ink-page .hero-mark,
body.login-ink-page .region-kicker,
body.login-ink-page .faction-label {
    background: white;
    border: 1px solid var(--login-line);
    border-radius: var(--radius-xs);
    color: var(--login-500);
    box-shadow: var(--login-shadow-sm);
}

body.login-ink-page .landing-section {
    padding: var(--space-24) var(--space-32);
    backdrop-filter: none;
}

body.login-ink-page .landing-section-hero {
    background: var(--login-paper-soft);
}

body.login-ink-page .hero-banner-line {
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent-jade) 28%, transparent), transparent);
}

body.login-ink-page .hero-banner-text,
body.login-ink-page .section-eyebrow {
    color: var(--login-400);
}

body.login-ink-page .hero-title {
    color: var(--login-black);
}

body.login-ink-page .hero-mark strong,
body.login-ink-page .info-pill,
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-black);
}

body.login-ink-page .lore-quote {
    background: white;
    border-left-color: color-mix(in srgb, var(--accent-jade) 34%, transparent);
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
    color: var(--login-black);
}

body.login-ink-page .login-footer {
    color: var(--login-400);
}

body.login-ink-page .toast {
    background: var(--login-paper-soft);
    border-color: color-mix(in srgb, var(--jimo-crimson) 32%, transparent);
    color: var(--login-cinnabar);
    box-shadow: var(--login-shadow-md);
}

@media (max-width: 768px) {
    body.login-ink-page {
        padding-top: var(--space-14);
    }

    body.login-ink-page .login-hero,
    body.login-ink-page .landing-content {
        width: calc(100vw - 32px);
        max-width: calc(100vw - 32px);
    }

    body.login-ink-page .login-hero {
        grid-template-columns: 1fr;
        gap: var(--space-14);
    }

    body.login-ink-page .login-card {
        width: 100%;
        max-width: none;
        padding: var(--space-24) var(--space-20);
    }

    body.login-ink-page .landing-section {
        padding: var(--space-20) var(--space-16);
    }

    body.login-ink-page .login-quick-actions {
        grid-template-columns: repeat(2, 1fr);
    }

    body.login-ink-page .card-title {
        letter-spacing: 2px;
    }

    body.login-ink-page .input-with-btn {
        flex-wrap: wrap;
    }

    body.login-ink-page .input-with-btn input,
    body.login-ink-page .btn-send-code {
        width: 100%;
    }

    body.login-ink-page .form-switch-btns {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    body.login-ink-page .world-stage,
body.login-ink-page .region-grid,
body.login-ink-page .faction-row {
        grid-template-columns: 1fr;
    }
}

/* ===== 登录页暗色模式 · 与游戏页配色对齐(翡翠+古铜金) ===== */
html.theme-dark body.login-ink-page {
    --login-paper: var(--login-ink-night);
    /* 容器/卡片直接读取全局深色语义色；本作用域不反向定义 --bg-*，无循环。 */
    --login-paper-2: var(--bg-secondary);
    --login-paper-3: var(--bg-card);
    --login-paper-soft: var(--bg-panel);

    --login-black: var(--login-ink-mist);
    /* 次要文字 token 走中性灰,对齐游戏页 --text-secondary/--text-muted,
       不再用 ghost-purple 紫色(与翡翠+金体系割裂) */
    --login-700: var(--text-primary);
    --login-500: var(--text-secondary);
    --login-400: var(--text-muted);
    --login-300: var(--text-muted);

    /* 朱砂红族 → 古铜金体系，对齐游戏页深色主色(金色族)：
       游戏页 .btn-primary/.modal-btn--gold/.theme-btn.active 全用 --accent-gold var(--accent-gold),
       翡翠(--accent-jade)只是 .btn-guest/聊天的次级色。
       直接硬编码游戏页金色族 hex,绕开 login-admin.css:18/44 的 --login-jade<->--accent-jade 循环。
       金色族: 主金var(--accent-gold),亮金var(--craft-gold-bright),深金#9c8558 */
    --login-cinnabar: var(--accent-gold);
    --login-cinnabar-bright: var(--craft-gold-bright);
    --login-cinnabar-deep: #9c8558;
    --login-cinnabar-soft: rgba(203, 168, 102, 0.45);
    --login-jade: var(--accent-jade);
    
    

    --login-line: rgba(172, 186, 196, 0.13);
    --login-line-soft: rgba(172, 186, 196, 0.07);
    --login-shadow-sm: none;
    --login-shadow-md: none;
    

    background: var(--login-paper);
    color: var(--login-black);
    color-scheme: dark;
}

/* 暗色背景 */
html.theme-dark body.login-ink-page .login-ink-bg {
    background:
        radial-gradient(ellipse 90% 60% at 50% 0%, color-mix(in srgb, var(--bg-secondary) 3%, transparent) 0%, transparent 70%),
        radial-gradient(ellipse 80% 50% at 50% 100%, color-mix(in srgb, var(--hundun-gray) 2%, transparent) 0%, transparent 70%),
        var(--login-paper);
}

html.theme-dark body.login-ink-page .login-ink-bg::before {
    opacity: 0.3;
}

html.theme-dark body.login-ink-page .login-ink-mountain {
    background:
        linear-gradient(180deg, transparent 50%, color-mix(in srgb, var(--ghost-purple) 3%, transparent) 70%, color-mix(in srgb, var(--ghost-purple) 5%, transparent) 95%);
    opacity: 0.6;
}

html.theme-dark body.login-ink-page .login-ink-cloud {
    background:
        radial-gradient(ellipse 60% 40% at 25% 50%, color-mix(in srgb, var(--bg-secondary) 4%, transparent) 0%, transparent 70%),
        radial-gradient(ellipse 70% 50% at 75% 60%, color-mix(in srgb, var(--bg-secondary) 3%, transparent) 0%, transparent 75%);
    opacity: 0.42;
}

html.theme-dark body.login-ink-page .login-ink-stroke {
    background:
        radial-gradient(circle, color-mix(in srgb, var(--text-red) 6%, transparent) 0%, color-mix(in srgb, var(--text-red) 2%, transparent) 50%, transparent 70%);
    opacity: 0.5;
}

/* 暗色登录卡片 */
html.theme-dark body.login-ink-page .login-card {
    background: var(--login-paper-soft);
    border-color: var(--login-line);
    box-shadow: var(--login-shadow-md);
}

/* 暗色表单:输入框沿用 login-ink-scene 的底线极简风(transparent 底),
   不再强行加实心背景(--login-paper-2/3 是错乱值) */
html.theme-dark body.login-ink-page .login-card input[type="email"],
html.theme-dark body.login-ink-page .login-card input[type="password"],
html.theme-dark body.login-ink-page .login-card input[type="text"] {
    background: transparent;
    border-color: var(--login-line);
    color: var(--login-ink-fg);
}

html.theme-dark body.login-ink-page .login-card input::placeholder {
    color: var(--text-muted);
}

html.theme-dark body.login-ink-page .login-card input:focus {
    border-color: var(--login-cinnabar);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--login-cinnabar) 18%, transparent);
}

html.theme-dark body.login-ink-page .login-card label {
    color: var(--text-secondary);
}

html.theme-dark body.login-ink-page .btn-primary {
    background: linear-gradient(135deg, var(--login-cinnabar) 0%, var(--login-cinnabar-deep) 100%);
    border-color: var(--login-cinnabar-deep);
    color: var(--login-ink-fg);
}

html.theme-dark body.login-ink-page .btn-primary:hover {
    box-shadow: none;
}

html.theme-dark body.login-ink-page .btn-primary:disabled {
    opacity: 0.5;
}

html.theme-dark body.login-ink-page .btn-send-code {
    background: var(--login-paper-3);
    border-color: var(--login-line);
    color: var(--login-cinnabar);
}

html.theme-dark body.login-ink-page .btn-send-code:hover {
    background: color-mix(in srgb, var(--login-cinnabar) 8%, transparent);
}

html.theme-dark body.login-ink-page .btn-send-code:disabled {
    color: var(--login-400);
}

html.theme-dark body.login-ink-page .form-switch a {
    color: var(--login-cinnabar);
}

html.theme-dark body.login-ink-page .switch-sep {
    color: var(--login-400);
}

/* 暗色分割线 */
html.theme-dark body.login-ink-page .form-divider {
    border-color: var(--login-line);
}

html.theme-dark body.login-ink-page .form-divider span {
    background: var(--login-paper-soft);
    color: var(--login-400);
}

/* 暗色落地页 */
html.theme-dark body.login-ink-page .landing-content {
    background: transparent;
}

html.theme-dark body.login-ink-page .section-eyebrow {
    color: var(--login-jade);
}

html.theme-dark body.login-ink-page .hero-title,
html.theme-dark body.login-ink-page .hero-banner-text {
    color: var(--login-black);
}

html.theme-dark body.login-ink-page .hero-banner-line {
    background: var(--login-line);
}

html.theme-dark body.login-ink-page .section-intro {
    color: var(--login-700);
}

html.theme-dark body.login-ink-page .hero-mark {
    color: var(--login-500);
}

html.theme-dark body.login-ink-page .hero-mark strong {
    color: var(--login-black);
}

html.theme-dark body.login-ink-page .lore-quote {
    color: var(--login-500);
    border-color: var(--login-line);
}

html.theme-dark body.login-ink-page .info-pill {
    background: var(--login-paper-2);
    border-color: var(--login-line);
    color: var(--login-700);
}

/* 暗色世界卡片 */
html.theme-dark body.login-ink-page .world-lore-card,
html.theme-dark body.login-ink-page .region-card,
html.theme-dark body.login-ink-page .faction-card {
    background: var(--login-paper-soft);
    border-color: var(--login-line);
}

html.theme-dark body.login-ink-page .world-lore-card h3,
html.theme-dark body.login-ink-page .region-card h3,
html.theme-dark body.login-ink-page .faction-card h3 {
    color: var(--login-black);
}

html.theme-dark body.login-ink-page .world-lore-card p,
html.theme-dark body.login-ink-page .region-card p,
html.theme-dark body.login-ink-page .faction-card p {
    color: var(--login-700);
}

html.theme-dark body.login-ink-page .region-kicker,
html.theme-dark body.login-ink-page .faction-label {
    color: var(--login-jade);
}

/* 暗色社区框 */
html.theme-dark body.login-ink-page .community-box {
    background: var(--login-paper-soft);
    border-color: var(--login-line);
}

html.theme-dark body.login-ink-page .community-highlight {
    color: var(--login-cinnabar);
}

html.theme-dark body.login-ink-page .source-note {
    color: var(--login-400);
}

html.theme-dark body.login-ink-page .source-note a {
    color: var(--login-cinnabar);
}

/* 暗色页脚 */
html.theme-dark body.login-ink-page .login-footer {
    color: var(--login-400);
}

html.theme-dark body.login-ink-page .beta-group-number {
    color: var(--login-cinnabar);
}

/* 暗色警告文字 */
html.theme-dark body.login-ink-page .text-warn-bold {
    color: var(--login-cinnabar);
}

html.theme-dark body.login-ink-page .quick-action {
    background: var(--login-paper-2);
    border-color: var(--login-line);
    color: var(--login-700);
}

html.theme-dark body.login-ink-page .quick-action:hover,
html.theme-dark body.login-ink-page .quick-action.active {
    background: color-mix(in srgb, var(--hundun-gray) 8%, transparent);
    border-color: color-mix(in srgb, var(--hundun-gray) 22%, transparent);
    color: var(--login-jade);
}

html.theme-dark body.login-ink-page .card-note {
    background: color-mix(in srgb, var(--text-red) 6%, transparent);
    border-color: color-mix(in srgb, var(--text-red) 18%, transparent);
}

/* ============================================================
 * 登录页重制版 · 命盘式入世入口
 * ============================================================ */

body.login-ink-page {
    padding: 0;
    background: var(--login-paper);
}

body.login-ink-page .login-hero {
    width: min(1180px, calc(100vw - 32px));
    min-height: calc(100svh - 36px);
    margin: var(--space-20) auto;
    display: grid;
    grid-template-columns: 148px minmax(0, 1fr) minmax(340px, 416px);
    grid-template-rows: minmax(620px, calc(100svh - 36px));
    gap: 0;
    align-items: stretch;
    background: var(--login-paper-soft);
    border: 1px solid var(--login-line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: none;
}

body.login-ink-page .login-theme-switch {
    width: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

body.login-ink-page .theme-btn {
    min-height: 34px;
    width: 100%;
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-xs);
    font-size: var(--font-label);
    letter-spacing: 0;
}

body.login-ink-page .card-kicker {
    color: var(--login-jade);
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--font-caption);
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
}

body.login-ink-page .quick-action {
    min-height: 38px;
    padding: 0 var(--space-8);
    border: 1px solid var(--login-line);
    border-radius: var(--radius-xs);
    background: var(--login-paper-soft);
    color: var(--login-700);
    font-family: inherit;
    font-size: var(--font-body);
    font-weight: 700;
    letter-spacing: 0;
    cursor: pointer;
}

body.login-ink-page .quick-action:hover,
body.login-ink-page .quick-action.active {
    background: color-mix(in srgb, var(--accent-jade) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent-jade) 34%, transparent);
    color: var(--login-jade);
}

body.login-ink-page .login-card {
    width: 100%;
    max-height: calc(100svh - 128px);
    overflow-y: auto;
    padding: var(--space-24);
    background: var(--login-paper-soft);
    border: 1px solid var(--login-line);
    border-radius: var(--radius-sm);
    box-shadow: none;
}

body.login-ink-page .login-card::before {
    display: none;
}

body.login-ink-page .card-title {
    margin: 0 0 var(--space-8);
    color: var(--login-black);
    font-size: var(--font-hero);
    line-height: 1.2;
    letter-spacing: 0;
}

body.login-ink-page .card-desc {
    margin: 0 0 var(--space-20);
    text-align: left;
    color: var(--login-500);
    font-size: var(--font-body);
    line-height: 1.7;
}

body.login-ink-page .form-group {
    margin-bottom: var(--space-14);
}

body.login-ink-page .form-group label {
    margin-bottom: var(--space-8);
    color: var(--login-700);
    font-size: var(--font-body);
    letter-spacing: 0;
}

body.login-ink-page .form-group input {
    min-height: 44px;
    padding: var(--space-10) var(--space-12);
    background: white;
    border-color: var(--login-line);
    border-radius: var(--radius-xs);
    font-size: var(--font-action);
}

body.login-ink-page .btn-primary {
    min-height: 46px;
    margin-top: var(--space-6);
    background: var(--login-black);
    border-color: var(--login-black);
    border-radius: var(--radius-xs);
    color: var(--login-paper-soft);
    letter-spacing: 0;
}

body.login-ink-page .btn-primary:hover {
    background: var(--login-cinnabar);
    border-color: var(--login-cinnabar);
}

body.login-ink-page .btn-send-code {
    border-radius: var(--radius-xs);
    letter-spacing: 0;
}

body.login-ink-page .card-note {
    color: var(--login-cinnabar);
}

body.login-ink-page .landing-content {
    width: min(1180px, calc(100vw - 32px));
}

@media (max-width: 980px) {
    body.login-ink-page .login-hero {
        min-height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    body.login-ink-page .login-theme-switch {
        grid-template-columns: repeat(3, 1fr);
    }

    body.login-ink-page .login-card {
        max-height: none;
        padding: var(--space-20) var(--space-16);
    }
}

@media (max-width: 560px) {
    body.login-ink-page .login-hero,
    body.login-ink-page .landing-content {
        width: calc(100vw - 20px);
    }

    body.login-ink-page .theme-btn,
body.login-ink-page .quick-action {
        min-width: 0;
    }

    body.login-ink-page .input-with-btn {
        flex-wrap: wrap;
    }

    body.login-ink-page .input-with-btn input,
    body.login-ink-page .btn-send-code {
        width: 100%;
    }
}

html.theme-dark body.login-ink-page .login-hero,
html.theme-dark body.login-ink-page .login-card {
    background: transparent;
}

html.theme-dark body.login-ink-page .quick-action,
html.theme-dark body.login-ink-page .form-group input {
    background: transparent;
    border-color: var(--login-line);
}

/* ============================================================
 * 登录页第四版 · 紧凑开局面板
 * 收敛桌面端空白和错位感，登录表单重新成为主角。
 * ============================================================ */

body.login-ink-page .login-hero {
    width: min(980px, calc(100vw - 32px));
    min-height: auto;
    margin: var(--space-32) auto var(--space-16);
    grid-template-columns: minmax(0, 1fr) 420px;
    grid-template-rows: auto auto;
}

body.login-ink-page .login-theme-switch {
    width: 142px;
}

body.login-ink-page .quick-action {
    min-height: 36px;
}

body.login-ink-page .login-card {
    padding: var(--space-24);
}

body.login-ink-page .card-title {
    font-size: var(--font-page-title);
}

body.login-ink-page .form-group input {
    min-height: 42px;
}

body.login-ink-page .btn-primary {
    min-height: 44px;
}

body.login-ink-page .landing-content {
    width: min(980px, calc(100vw - 32px));
}

@media (max-width: 900px) {
    body.login-ink-page .login-hero {
        width: min(560px, calc(100vw - 20px));
        margin: var(--space-10) auto;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    body.login-ink-page .login-theme-switch {
        width: min(220px, 100%);
    }
}

html.theme-dark body.login-ink-page .btn-primary {
    background: var(--login-cinnabar);
    border-color: var(--login-cinnabar-deep);
    color: var(--login-ink-fg);
}

html.theme-dark body.login-ink-page .btn-primary:hover {
    background: var(--login-cinnabar-deep);
}

/* ============================================================
 * 登录页第三版 · 稳定游戏开局界面
 * ============================================================ */

body.login-ink-page .login-hero {
    width: min(1100px, calc(100vw - 32px));
    min-height: min(720px, calc(100svh - 36px));
    margin: var(--space-20) auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 400px;
    grid-template-rows: auto minmax(0, 1fr);
    background: var(--login-paper-soft);
    border: 1px solid var(--login-line);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: none;
}

body.login-ink-page .login-theme-switch {
    width: 150px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}

body.login-ink-page .theme-btn {
    min-height: 32px;
    width: auto;
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-xs);
    font-size: var(--font-label);
    letter-spacing: 0;
    white-space: nowrap;
}

body.login-ink-page .card-kicker {
    color: var(--login-jade);
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--font-caption);
    font-weight: 700;
    letter-spacing: 1px;
}

body.login-ink-page .quick-action {
    min-height: 38px;
    padding: 0 var(--space-8);
    background: var(--login-paper-soft);
    border: 1px solid var(--login-line);
    border-radius: var(--radius-xs);
    color: var(--login-700);
    font-family: inherit;
    font-size: var(--font-body);
    font-weight: 700;
    letter-spacing: 0;
    cursor: pointer;
}

body.login-ink-page .quick-action:hover,
body.login-ink-page .quick-action.active {
    background: color-mix(in srgb, var(--accent-jade) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent-jade) 34%, transparent);
    color: var(--login-jade);
}

body.login-ink-page .login-card {
    width: 100%;
    max-height: none;
    padding: var(--space-24);
    background: var(--login-paper-soft);
    border: 1px solid var(--login-line);
    border-radius: var(--radius-sm);
    box-shadow: none;
}

body.login-ink-page .login-card::before {
    display: none;
}

body.login-ink-page .card-title {
    margin: 0 0 var(--space-8);
    color: var(--login-black);
    font-size: var(--font-page-title);
    line-height: 1.2;
    letter-spacing: 0;
}

body.login-ink-page .card-desc {
    margin: 0 0 var(--space-20);
    color: var(--login-500);
    text-align: left;
}

body.login-ink-page .form-group {
    margin-bottom: var(--space-14);
}

body.login-ink-page .form-group input {
    min-height: 44px;
    padding: var(--space-10) var(--space-12);
}

@media (max-width: 900px) {
    body.login-ink-page .login-hero {
        min-height: auto;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }

    body.login-ink-page .login-theme-switch {
        width: 100%;
    }
}

@media (max-width: 768px) {

    body.login-ink-page .login-theme-switch {
        width: 132px;
        flex: 0 0 132px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-4);
    }

    body.login-ink-page .theme-btn {
        min-height: 28px;
        padding: var(--space-4) var(--space-8);
        font-size: var(--font-caption);
    }
}

@media (max-width: 560px) {
    body.login-ink-page .login-hero,
    body.login-ink-page .landing-content {
        width: calc(100vw - 20px);
        margin: var(--space-10) auto;
    }

    body.login-ink-page .login-theme-switch {
        width: min(100%, 220px);
        flex-basis: min(100%, 220px);
    }

    body.login-ink-page .quick-action {
        min-height: 38px;
    }

    body.login-ink-page .login-card {
        padding: var(--space-20) var(--space-16);
    }

    body.login-ink-page .input-with-btn {
        flex-wrap: wrap;
    }

    body.login-ink-page .input-with-btn input,
    body.login-ink-page .btn-send-code {
        width: 100%;
    }
}

html.theme-dark body.login-ink-page .login-hero,
html.theme-dark body.login-ink-page .login-card {
    background: transparent;
}

html.theme-dark body.login-ink-page .quick-action,
html.theme-dark body.login-ink-page .form-group input {
    background: transparent;
    border-color: var(--login-line);
}

/* ============================================================
 * 登录页第五版 · 表单优先入世台
 * 最后一层覆盖旧布局：收窄舞台、压实顶部、让登录表单成为首屏焦点。
 * ============================================================ */

body.login-ink-page {
    padding: max(var(--space-12), env(safe-area-inset-top)) 0 var(--space-24);
}

body.login-ink-page .login-hero {
    width: min(760px, calc(100vw - 32px));
    min-height: 0;
    margin: var(--space-20) auto var(--space-14);
    display: grid;
    grid-template-columns: minmax(260px, 300px) minmax(360px, 460px);
    grid-template-rows: auto auto;
    justify-content: center;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: var(--login-paper-soft);
    border: 1px solid var(--login-line);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: 0 14px 42px var(--shadow-black-3);
}

body.login-ink-page .login-theme-switch {
    width: 138px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}

body.login-ink-page .theme-btn {
    min-height: 30px;
    width: auto;
    padding: var(--space-6) var(--space-8);
    border-radius: var(--radius-xs);
    font-size: var(--font-label);
    letter-spacing: 0;
    white-space: nowrap;
}

body.login-ink-page .card-kicker {
    margin: 0;
    color: var(--login-jade);
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: var(--font-caption);
    font-weight: 700;
    letter-spacing: 1px;
}

body.login-ink-page .quick-action {
    min-height: 36px;
    padding: 0 var(--space-8);
    background: var(--login-paper-soft);
    border: 1px solid var(--login-line);
    border-radius: var(--radius-xs);
    color: var(--login-700);
    font-size: var(--font-body);
    font-weight: 700;
    letter-spacing: 0;
}

body.login-ink-page .quick-action:hover,
body.login-ink-page .quick-action.active {
    background: color-mix(in srgb, var(--accent-jade) 10%, transparent);
    border-color: color-mix(in srgb, var(--accent-jade) 34%, transparent);
    color: var(--login-jade);
}

body.login-ink-page .login-card {
    width: 100%;
    max-height: none;
    padding: var(--space-24);
    background: var(--login-paper-soft);
    border: 1px solid var(--login-line);
    border-radius: var(--radius-sm);
    box-shadow: none;
}

body.login-ink-page .login-card::before {
    display: none;
}

body.login-ink-page .card-title {
    margin: 0 0 var(--space-8);
    color: var(--login-black);
    font-size: var(--font-page-title);
    line-height: 1.2;
    letter-spacing: 0;
}

body.login-ink-page .card-desc {
    margin: 0 0 var(--space-16);
    color: var(--login-500);
    text-align: left;
}

body.login-ink-page .form-group {
    margin-bottom: var(--space-14);
}

body.login-ink-page .form-group input {
    min-height: var(--pattern-touch-target);
    padding: var(--pattern-field-block) var(--pattern-field-inline);
    border-radius: var(--pattern-field-radius);
    font-size: var(--font-body-lg);
}

body.login-ink-page .landing-content {
    width: min(760px, calc(100vw - 32px));
}

@media (max-width: 900px) {
    body.login-ink-page {
        padding: max(var(--space-6), env(safe-area-inset-top)) 0 var(--space-16);
    }

    body.login-ink-page .login-hero {
        width: min(500px, calc(100vw - 16px));
        margin: var(--space-8) auto var(--space-12);
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        border-radius: var(--radius-md);
    }

    body.login-ink-page .login-theme-switch {
        width: 100%;
        max-width: none;
    }

    body.login-ink-page .theme-btn,
    body.login-ink-page .quick-action {
        min-height: var(--pattern-touch-target);
    }
}

@media (max-width: 560px) {
    body.login-ink-page .login-hero,
    body.login-ink-page .landing-content {
        width: calc(100vw - 14px);
        margin-left: auto;
        margin-right: auto;
    }

    body.login-ink-page .quick-action {
        min-height: var(--pattern-touch-target);
        padding: 0 var(--space-4);
        font-size: var(--font-label);
    }

    body.login-ink-page .login-card {
        padding: var(--space-20) var(--space-14);
    }

    body.login-ink-page .input-with-btn {
        flex-wrap: wrap;
    }

    body.login-ink-page .input-with-btn input,
    body.login-ink-page .btn-send-code {
        width: 100%;
    }
}

html.theme-dark body.login-ink-page .login-hero,
html.theme-dark body.login-ink-page .login-card {
    background: transparent;
}

/* ---- TapTap 扫码入世：登录卡入口与二维码弹窗（gc-dialog 几何之外的局部样式） ---- */

body.login-ink-page .login-alt-entry {
    margin-top: var(--space-12);
}

body.login-ink-page .alt-divider {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    margin-bottom: var(--space-10);
    color: var(--login-400);
    font-size: var(--font-label);
}

body.login-ink-page .alt-divider::before,
body.login-ink-page .alt-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--login-line);
}

body.login-ink-page .btn-taptap {
    width: 100%;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    background: white;
    border: 1px solid var(--login-line);
    border-radius: var(--radius-xs);
    color: var(--login-700);
    font-family: inherit;
    font-size: var(--font-body);
    font-weight: 700;
    letter-spacing: 2px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

body.login-ink-page .btn-taptap:hover {
    background: var(--login-paper-soft);
    border-color: color-mix(in srgb, var(--accent-jade) 24%, transparent);
    color: var(--login-jade);
}

body.login-ink-page .btn-taptap svg {
    width: 58px;
    height: 16px;
    color: var(--login-black);
    flex: none;
}

/* 二维码框：任何主题都保持白底，保证扫码对比度 */
body.login-ink-page .taptap-qr-box {
    width: 208px;
    height: 208px;
    margin: 0 auto var(--space-8);
    padding: var(--space-8);
    background: white;
    border: 1px solid var(--login-line);
    border-radius: var(--radius-xs);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

body.login-ink-page .taptap-qr-box svg {
    width: 100%;
    height: 100%;
    display: block;
}

body.login-ink-page .taptap-qr-loading {
    font-size: var(--font-label);
    color: var(--login-400);
}

body.login-ink-page .taptap-qr-dialog .gc-sub,
body.login-ink-page .taptap-qr-dialog .gc-note {
    text-align: center;
}

html.theme-dark body.login-ink-page .btn-taptap {
    background: var(--login-paper-soft);
}

html.theme-dark body.login-ink-page .btn-taptap svg {
    color: var(--login-paper);
}

html.theme-dark body.login-ink-page .taptap-qr-box {
    background: white;
}