/* ===== LingVerse - 古风修仙主题 ===== */

:root {
    --bg-primary: #f8f8f5;
    --bg-secondary: #eeeeea;
    --bg-card: #fcfcf9;
    --bg-card-hover: #f0f0ec;
    --bg-panel: #f6f6f2;
    --border-color: rgba(42, 42, 38, 0.13);
    --border-gold: rgba(183, 120, 31, 0.18);

    --text-primary: #2f2f2b;
    --text-secondary: #56564f;
    --text-muted: #79786f;
    /* 反馈 #5971 曾降饱和为 #7a5f2e；2026-09-13 依轮回盘设计图拍板切回琥珀金（=「经典」预设主色） */
    --text-gold: #b7781f;
    --text-jade: #2e7464;
    --text-red: #a84842;
    --text-blue: #546c78;

    --accent-gold: #b7781f;
    --accent-jade: #2e7464;
    --accent-crimson: #a84842;
    --accent-purple: #726c78;
    --accent-blue: #5c7380;

    --gradient-gold: rgba(183, 120, 31, 0.08);
    --gradient-jade: rgba(46, 116, 100, 0.10);
    --gradient-bg: #f8f8f5;

    /* 衬线后补 emoji，避免自创技能名（1️⃣ 等）在宋体/楷体里落成 □□ */
    --font-serif: "Songti SC", STSong, SimSun, "Noto Serif SC", "Source Han Serif SC", FZSong-Z01S, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", serif;
    --font-display: KaiTi, 楷体, STKaiti, BiauKai, "Noto Serif SC", "Source Han Serif SC", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", serif;
    /* 无衬线：数字/%/UI 指标等需清晰字形时使用（衬线环境下 % 易异常） */
    --font-sans: system-ui, -apple-system, "Segoe UI", "PingFang SC", "Hiragino Sans GB",
        "Microsoft YaHei", "Noto Sans SC", sans-serif;
    /* 文字大小档位（设置 → 显示外观）；与 App lv_text_scale 倍率一致 */
    --lv-text-scale: 1;

    /* ===== LingVerse 统一尺寸 token =====
       高信息密度游戏界面采用克制尺度；全部页面和动态 HTML 都引用这些 token。
       字号在 token 层统一乘用户倍率，页面不得再次自行乘 --lv-text-scale。 */
    --font-micro: calc(10px * var(--lv-text-scale));
    --font-caption: calc(11px * var(--lv-text-scale));
    --font-label: calc(12px * var(--lv-text-scale));
    --font-body: calc(13px * var(--lv-text-scale));
    --font-body-lg: calc(14px * var(--lv-text-scale));
    --font-action: calc(15px * var(--lv-text-scale));
    --font-title: calc(16px * var(--lv-text-scale));
    --font-heading: calc(18px * var(--lv-text-scale));
    --font-page-title: calc(22px * var(--lv-text-scale));
    --font-hero: calc(28px * var(--lv-text-scale));
    --font-hero-lg: calc(36px * var(--lv-text-scale));
    --font-hero-xl: calc(44px * var(--lv-text-scale));

    --space-2: 2px;
    --space-4: 4px;
    --space-6: 6px;
    --space-8: 8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-14: 14px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;
    --space-48: 48px;

    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;

    /* ===== 跨端 pattern 尺寸 =====
       与 Flutter LingMetrics 一一对应。页面只能消费这些模式值，不得另造一套
       卡片、字段或弹窗密度；基础阶梯仍由上方 --space-* / --radius-* 提供。 */
    --pattern-page-inline: var(--space-12);
    --pattern-card-inline: var(--space-12);
    --pattern-card-block: var(--space-10);
    --pattern-field-inline: var(--space-12);
    --pattern-field-block: var(--space-10);
    --pattern-touch-target: 44px;
    --pattern-control-height-compact: 40px;
    --pattern-control-radius: var(--radius-md);
    --pattern-field-radius: var(--radius-sm);
    --pattern-dialog-width: 90vw;
    --pattern-dialog-compact-max-width: 392px;
    --pattern-dialog-medium-max-width: 520px;
    /* 桌面 standard 档；generic/确认类必须消费 compact，手机各档统一回收至 392px。 */
    --pattern-dialog-max-width: 640px;
    --pattern-dialog-wide-max-width: 720px;
    --pattern-dialog-xwide-max-width: 960px;
    --pattern-dialog-max-height: 92dvh;
    --pattern-dialog-head-inline: var(--space-20);
    --pattern-dialog-head-top: var(--space-20);
    --pattern-dialog-close-reserve: var(--space-48);
    --pattern-dialog-mid-inline: var(--space-16);
    --pattern-dialog-mid-top: var(--space-16);
    --pattern-dialog-foot-inline: var(--space-16);
    --pattern-dialog-foot-top: var(--space-14);
    --pattern-dialog-foot-bottom: var(--space-16);
    --pattern-dialog-action-gap: var(--space-10);
    --pattern-dialog-title-size: var(--font-heading);
    --pattern-dialog-close-visual: 32px;

    /* 新代码使用语义颜色；旧 token 保留为兼容层。 */
    --color-bg-page: var(--bg-primary);
    --color-bg-surface: var(--bg-card);
    --color-bg-subtle: var(--bg-panel);
    --color-bg-hover: var(--bg-card-hover);
    --color-text-primary: var(--text-primary);
    --color-text-secondary: var(--text-secondary);
    --color-text-muted: var(--text-muted);
    --color-border-default: var(--border-color);
    --color-border-emphasis: var(--border-gold);
    --color-action-primary: var(--accent-gold);
    --color-action-secondary: var(--accent-jade);
    --color-status-danger: var(--accent-crimson);

    --text-on-gold: #fffaf0;
    --text-on-jade: #ffffff;

    --rarity-1: #6a6a6a;
    --rarity-2: #2e7464;
    --rarity-3: #b7781f;
    --rarity-4: #8668b5;
    --rarity-5: #a84842;

    /* 铭文七阶专用语义色：凡/灵/宝/仙/神/圣/天。明暗原色只在基础层定义。 */
    --color-inscription-light-1: #5f625e;
    --color-inscription-light-2: #2a7160;
    --color-inscription-light-3: #3a6a84;
    --color-inscription-light-4: #5a5e96;
    --color-inscription-light-5: #74608a;
    --color-inscription-light-6: #a44842;
    --color-inscription-light-7: #7a5e20;
    --color-inscription-dark-1: #b3bdc7;
    --color-inscription-dark-2: #50c4a3;
    --color-inscription-dark-3: #67b7de;
    --color-inscription-dark-4: #9fa5ff;
    --color-inscription-dark-5: #d598e8;
    --color-inscription-dark-6: #ff7468;
    --color-inscription-dark-7: #f2c14e;
    --color-inscription-1: var(--color-inscription-light-1);
    --color-inscription-2: var(--color-inscription-light-2);
    --color-inscription-3: var(--color-inscription-light-3);
    --color-inscription-4: var(--color-inscription-light-4);
    --color-inscription-5: var(--color-inscription-light-5);
    --color-inscription-6: var(--color-inscription-light-6);
    --color-inscription-7: var(--color-inscription-light-7);


    --shadow-sm: 0 1px 4px rgba(42, 42, 38, 0.06);
    --shadow-md: 0 6px 20px rgba(42, 42, 38, 0.08);
    --shadow-glow-gold: 0 0 0 1px rgba(183, 120, 31, 0.06);

    /* 补充缺失语义色 */
    --text-orange: #8f6a42;
    --text-gray: #7e7468;
    --text-green-light: #3a7a6c;
    --accent-orange: #8f6a42;
    --text-danger: var(--text-red);
    --text-purple: var(--accent-purple);
    --accent-danger: var(--accent-crimson);
    --accent-cyan: #3a7782;
    --text-color: var(--text-primary);

    /* 文本灰阶别名：统一历史代码里的近义命名，避免 var() 回退到 inherit 导致文字不可读 */
    --text-dim: var(--text-muted);
    --text-light: var(--text-muted);
    --text-info: var(--text-secondary);
    --text-warn: var(--text-orange);
    --text-warning: var(--text-orange);
    --text-cyan: var(--accent-cyan);

    /* 装饰 token 别名：统一历史代码里的近义命名 */
    --border-main: var(--border-color);
    --border-subtle: var(--border-color);
    --accent-gold-dim: var(--border-gold);
    --accent-red: var(--accent-crimson);
    --bg-main: var(--bg-primary);
    --bg-elevated: var(--bg-card);
    --border-soft: var(--border-color);
    --shadow-lg: var(--shadow-md);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.25);
    --font-mono: "SF Mono", "Fira Code", "JetBrains Mono", Consolas, "Liberation Mono", Menlo, monospace;

    /* 统一主色 / 文本主色别名（保证 light/excel/dark 全主题都有定义） */
    --primary: var(--accent-jade);
    --text-main: var(--text-primary);
    --bg-active: rgba(42, 42, 38, 0.06);
    --bg-lighter: var(--bg-card-hover);
    --bg-input: rgba(42, 42, 38, 0.04);
    --bg-body: var(--bg-primary);

    /* 语义状态色（success/danger 统一入口，避免硬编码 #4caf50/#f44336） */
    --success-color: #3a7a6c;
    --color-success: var(--success-color);
    --danger-color: var(--accent-crimson);

    /* 通用半透明背景 */
    --bg-glass: rgba(255, 255, 255, 0.66);
    --bg-glass-jade: rgba(46, 116, 100, 0.07);
    --border-jade: rgba(46, 116, 100, 0.20);
    --border-orange: rgba(143, 106, 66, 0.22);
    --bg-orange-glass: rgba(143, 106, 66, 0.055);

    /* 玻璃质感半透明(暗色主题下白色微透,亮色主题下改为深色微透) */
    --glass-white-1: rgba(255, 255, 255, 0.08);
    --glass-white-2: rgba(255, 255, 255, 0.04);
    --glass-white-3: rgba(255, 255, 255, 0.025);

    /* 幽魂塔/铭文紫色族(暗色默认;亮色主题下由 theme-light 覆盖为低饱和) */
    --ghost-purple: #c8a8ff;
    --ghost-purple-soft: #d8c8f0;
    --ghost-purple-deep: #a088d6;
    --ghost-purple-bg: #3a2a58;
    --ghost-purple-muted: #8a7ab0;
    --ghost-purple-line: rgba(168, 136, 214, 0.3);
    /* 紫色族补充(game-systems 鬼塔专用深紫底/亮紫文字) */
    --ghost-purple-accent: #6a4a90;
    --ghost-purple-dark: #2a2040;
    --ghost-purple-glow: #e8d8ff;

    /* 炼器/修炼金色族(比 accent-gold 更亮的修炼系金色,暗色默认;亮色主题降饱和) */
    --craft-gold: #c9993a;
    --craft-gold-bright: #d4a843;
    --craft-gold-soft: #d9c878;

    /* 通用阴影黑(暗色默认;亮色主题下改为更浅的投影) */
    --shadow-black-1: rgba(0, 0, 0, 0.5);
    --shadow-black-2: rgba(0, 0, 0, 0.3);
    --shadow-black-3: rgba(0, 0, 0, 0.15);

    /* 弹窗 z-index 统一层级 */
    --z-overlay-base: 100000;
    --z-overlay-high: 110000;
    --z-overlay-top: 120000;
    /* Toast 必须高于所有 overlay，避免被祭炼/上供等 modal-overlay--top 面板遮挡 */
    --z-toast: 130000;

    /* APP WebView 中部分 Android 挖孔屏不会正确上报 safe-area，移动端浮层保底下移 */
    --mobile-popup-safe-top: max(44px, calc(env(safe-area-inset-top, 0px) + 18px));
    --mobile-popup-safe-bottom: max(16px, env(safe-area-inset-bottom, 0px));
}

@media (max-width: 640px) {
    :root {
        --pattern-dialog-compact-max-width: 392px;
        --pattern-dialog-medium-max-width: 392px;
        --pattern-dialog-max-width: 392px;
        --pattern-dialog-wide-max-width: 392px;
        --pattern-dialog-xwide-max-width: 392px;
        --pattern-dialog-max-height: 94dvh;
        --pattern-dialog-head-inline: var(--space-14);
        --pattern-dialog-head-top: var(--space-16);
        --pattern-dialog-mid-inline: var(--space-14);
        --pattern-dialog-mid-top: var(--space-14);
        --pattern-dialog-foot-inline: var(--space-14);
        --pattern-dialog-foot-top: var(--space-12);
        --pattern-dialog-foot-bottom: var(--space-14);
        --pattern-dialog-title-size: var(--font-title);
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* #9758：禁双击放大；双指缩放与 iOS 聚焦输入框自动放大由 viewport maximum-scale=1 锁死 */
    touch-action: manipulation;
}

body {
    font-size: var(--font-body-lg);
    line-height: 1.5;
    /* wrap：中文短句/列表须铺满行宽。pretty 会为「避孤行」提前断行，手机端右侧空出一大块（#6007）。 */
    text-wrap: wrap;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

button,
input,
select,
textarea {
    font: inherit;
}

input,
select,
textarea {
    font-size: var(--font-body-lg);
}

/* 全局键盘焦点可见性：替代各文件里 outline:none 移除的焦点指示 */
:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* 减少动态偏好：系统开启「减弱动态效果」时收敛全局过渡与动画 */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ===== 共享基类（设计系统统一入口） =====
   新的卡片/按钮应优先复用 .lv-card / .lv-btn 并用修饰符区分变体，
   避免像历史代码那样为每个语义场景重新定义完整视觉样式。 */

/* 卡片基类：统一背景/边框/圆角/内边距，替代 15+ 个各自重复定义的卡片类 */
.lv-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--pattern-card-block) var(--pattern-card-inline);
}

/* 按钮基类：统一字号/圆角/内边距/过渡，修饰符 .lv-btn--gold/.lv-btn--jade/.lv-btn--danger/.lv-btn--outline 控制配色 */
.lv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    font-family: var(--font-serif);
    font-size: var(--font-body);
    line-height: 1.4;
    padding: var(--space-8) var(--space-16);
    min-height: 36px;
    border: 1px solid var(--border-color);
    border-radius: var(--pattern-control-radius);
    background: var(--bg-card);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s, opacity 0.18s;
    -webkit-tap-highlight-color: transparent;
}
.lv-btn:hover { background: var(--bg-card-hover); }
.lv-btn:active { transform: translateY(1px); }
.lv-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.lv-btn--gold {
    background: var(--accent-gold);
    border-color: var(--accent-gold);
    color: var(--text-on-gold);
}
.lv-btn--gold:hover { filter: brightness(1.08); background: var(--accent-gold); }
.lv-btn--jade {
    background: var(--accent-jade);
    border-color: var(--accent-jade);
    color: var(--text-on-gold);
}
.lv-btn--jade:hover { filter: brightness(1.08); background: var(--accent-jade); }
.lv-btn--danger {
    background: var(--accent-crimson);
    border-color: var(--accent-crimson);
    color: var(--text-on-gold);
}
.lv-btn--danger:hover { filter: brightness(1.08); background: var(--accent-crimson); }
.lv-btn--outline {
    background: transparent;
    border-color: var(--border-gold);
    color: var(--text-gold);
}
.lv-btn--outline:hover { background: var(--gradient-gold); }
.lv-btn--sm { padding: var(--space-4) var(--space-10); min-height: 28px; font-size: var(--font-label); }
.lv-btn--lg { padding: var(--space-12) var(--space-24); min-height: 44px; font-size: var(--font-body-lg); }

/* 按钮家族共享声明：历史按钮类(.btn-action/.btn-icon/.pager-btn/.btn-ink-soft 等)各自重复
   定义了 font-family/cursor/transition/tap-highlight。此处统一注入这些公共属性，
   各类只需保留自己差异化的 padding/字号/配色。各类的源定义里重复的这些属性已可被覆盖，
   保留源定义仅为安全 fallback。 */
.btn-action, .btn-icon, .pager-btn, .btn-ink-soft, .cave-inline-btn,
.panel-title-action, .btn-send-code, .mailbox-btn, .modal-btn, .modal-action-btn,
.btn-panel-close, .btn-chat-pin, .btn-chat-refresh, .btn-craft, .btn-batch, .btn-quickbuy,
.chat-send-btn, .cs-btn, .btn-task-claim {
    font-family: var(--font-serif);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, opacity 0.2s, transform 0.2s;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    font-family: var(--font-serif);
    background-color: var(--bg-primary);
    background-image: none;
    color: var(--text-primary);
    min-height: 100vh;
    overflow: hidden;
}

button, a, [onclick] {
    touch-action: manipulation;
}

/* ===== Toast ===== */
.toast-container {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 14px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    width: min(480px, calc(100vw - 32px));
    pointer-events: none;
}

.toast {
    /* #7050：半透明，避免挡住探索/战斗界面 */
    background: color-mix(in srgb, var(--bg-card) 78%, transparent);
    /* 单层描边：去掉 border-gold + glow 叠成的「双黄线」感 */
    border: 1px solid var(--border-color);
    color: var(--text-gold);
    padding: var(--space-12) var(--space-20);
    border-radius: var(--radius-md);
    font-size: var(--font-body-lg);
    box-shadow: var(--shadow-sm);
    /* 短句停留 3s（淡入 0.3 + 停留 3 → 3.3s 起淡出）。长句由 showToast 按字数改 delay。 */
    animation: toastIn 0.3s ease, toastOut 0.3s ease 3.3s forwards;
    max-width: 320px;
    /* 容器保持 none 不挡下方内容；toast 自身可点（#9432 点按即关，api.js showToast 挂 click） */
    pointer-events: auto;
}

.toast.toast--important {
    color: #ffd166;
    font-weight: 700;
    border-color: rgba(255, 209, 102, 0.55);
    background: color-mix(in srgb, color-mix(in srgb, var(--bg-card) 86%, #3b2200 14%) 78%, transparent);
    /* 仅柔阴影，不再叠 0 0 0 1px 黄环（与 border 形成双线） */
    box-shadow: 0 8px 22px rgba(255, 152, 0, 0.18);
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toastOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* ===== 隐藏 ===== */
.hidden {
    display: none !important;
}

/* ===== 通用品质 (Rarity) 颜色样式 ===== */
.rarity-1 { color: var(--rarity-1); border-color: var(--rarity-1); }
.rarity-2 { color: var(--rarity-2); border-color: var(--rarity-2); }
.rarity-3 { color: var(--rarity-3); border-color: var(--rarity-3); }
.rarity-4 { color: var(--rarity-4); border-color: var(--rarity-4); }
.rarity-5 { color: var(--rarity-5); border-color: var(--rarity-5); }



/* ===== 登录页 ===== */
.login-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100vh;
    overflow: auto;
    position: relative;
    padding-top: var(--space-40);
}

.login-bg-overlay {
    position: fixed;
    inset: 0;
    background: var(--gradient-bg);
    z-index: 0;
}

/* ===== 登录页双栏英雄区 ===== */
.login-hero {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: var(--space-48);
    align-items: start;
    width: min(100%, 1100px);
    padding: 0 var(--space-24);
}

/* 桌面端：branding 与 features 合并在左栏 */
.hero-branding {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-16);
}

.hero-left {
    grid-column: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
}

.hero-right {
    grid-column: 2;
    grid-row: 1 / 3;
    position: sticky;
    top: 40px;
}

.login-logo {
    text-align: left;
}

.logo-title {
    font-family: var(--font-display);
    font-size: var(--font-hero-xl);
    color: var(--text-gold);
    text-shadow: 0 0 40px rgba(183, 120, 31, 0.3), 0 2px 4px rgba(0, 0, 0, 0.5);
    letter-spacing: 12px;
    margin-bottom: var(--space-4);
}

.logo-subtitle {
    font-size: var(--font-title);
    color: var(--text-secondary);
    letter-spacing: 6px;
    font-weight: 300;
}

.logo-tagline {
    font-size: var(--font-body-lg);
    color: var(--text-muted);
    margin-top: var(--space-8);
    letter-spacing: 4px;
}

.logo-intro {
    color: var(--text-secondary);
    line-height: 1.9;
    font-size: var(--font-action);
}

/* 公共文本样式 */
.text-warn { color: var(--color-status-danger); }
.text-warn-bold { color: var(--color-status-danger); font-weight: bold; }

/* ===== 玩法亮点 ===== */
.login-features {
    text-align: left;
}

.features-headline {
    font-family: var(--font-display);
    font-size: var(--font-heading);
    color: var(--text-gold);
    letter-spacing: 3px;
    margin-bottom: var(--space-8);
}

.features-sub {
    font-size: var(--font-body);
    color: var(--text-secondary);
    line-height: 1.8;
    margin-bottom: var(--space-20);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-10);
}

.feature-item {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--space-12) var(--space-14);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    transition: border-color 0.2s;
}

.feature-item:hover {
    border-color: var(--border-gold);
}

.feature-title {
    font-size: var(--font-body);
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 1px;
}

.feature-desc {
    font-size: var(--font-label);
    color: var(--text-secondary);
    line-height: 1.7;
}

.features-footer {
    margin-top: var(--space-14);
    font-size: var(--font-body);
    color: var(--text-jade);
    letter-spacing: 1px;
}

/* ===== 身份码输入框 ===== */
.input-code {
    text-transform: uppercase;
    letter-spacing: 4px;
    text-align: center;
    font-family: monospace;
    font-size: var(--font-heading);
}

.form-switch-spaced {
    margin-top: var(--space-20);
}

.login-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    padding: var(--space-40) var(--space-40);
    width: 380px;
    box-shadow: var(--shadow-md);
}

.card-title {
    text-align: center;
    font-size: var(--font-heading);
    color: var(--text-gold);
    margin-bottom: var(--space-32);
    font-weight: 600;
    letter-spacing: 2px;
}

.form-group {
    margin-bottom: var(--space-20);
}

.form-group label {
    display: block;
    font-size: var(--font-body);
    color: var(--text-secondary);
    margin-bottom: var(--space-6);
    letter-spacing: 1px;
}

.form-group input {
    width: 100%;
    padding: var(--space-12) var(--space-16);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-primary);
    font-family: var(--font-serif);
    font-size: var(--font-action);
    transition: border-color 0.2s;
    outline: none;
}

.form-group input:focus {
    border-color: var(--accent-gold);
    box-shadow: 0 0 0 2px rgba(183, 120, 31, 0.1);
}

.form-group input::placeholder {
    color: var(--text-muted);
}

/* 通用应用级输入框与下拉框 */
.app-input, .app-select {
    width: 100%;
    box-sizing: border-box;
    padding: var(--pattern-field-block) var(--pattern-field-inline);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--pattern-field-radius);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--font-body-lg);
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.app-input:focus, .app-select:focus {
    border-color: var(--text-gold);
    box-shadow: 0 0 0 2px rgba(183, 120, 31, 0.15);
}

.app-input::placeholder {
    color: var(--text-muted);
}

.input-with-btn {
    display: flex;
    gap: var(--space-8);
}

.input-with-btn input {
    flex: 1;
}

.btn-send-code {
    padding: var(--space-10) var(--space-14);
    background: var(--bg-card);
    border: 1px solid var(--border-gold);
    border-radius: var(--radius-sm);
    color: var(--text-gold);
    font-family: var(--font-serif);
    font-size: var(--font-body);
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, opacity 0.2s, transform 0.2s;
    flex-shrink: 0;
}

.btn-send-code:hover {
    background: rgba(183, 120, 31, 0.15);
}

.btn-send-code:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 入世主钮：扁平描边（对齐 modal-btn--gold / jade，无渐变实心） */
.btn-primary {
    width: 100%;
    padding: var(--space-14);
    background: color-mix(in srgb, var(--accent-gold) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-gold) 42%, transparent);
    border-radius: var(--radius-sm);
    color: var(--text-gold);
    font-family: var(--font-serif);
    font-size: var(--font-title);
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 4px;
    box-shadow: none;
    filter: none;
    text-shadow: none;
    transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease, opacity 0.12s ease;
    margin-top: var(--space-8);
}

.btn-primary:hover {
    background: color-mix(in srgb, var(--accent-gold) 18%, transparent);
    border-color: color-mix(in srgb, var(--accent-gold) 55%, transparent);
    opacity: 1;
}

.btn-primary:active {
    opacity: 0.88;
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-primary.btn-guest {
    background: color-mix(in srgb, var(--accent-jade) 12%, transparent);
    border-color: color-mix(in srgb, var(--accent-jade) 42%, transparent);
    color: var(--text-jade);
}

.btn-primary.btn-guest:hover {
    background: color-mix(in srgb, var(--accent-jade) 18%, transparent);
    border-color: color-mix(in srgb, var(--accent-jade) 55%, transparent);
    color: var(--text-jade);
}

.form-switch {
    text-align: center;
    margin-top: var(--space-20);
    font-size: var(--font-body);
    color: var(--text-muted);
}

.form-switch a {
    color: var(--text-jade);
    text-decoration: none;
    margin-left: var(--space-4);
}

.form-switch a:hover {
    text-decoration: underline;
}

.form-switch .switch-sep {
    margin: 0 var(--space-8);
    color: var(--text-muted);
}

.card-desc {
    text-align: center;
    font-size: var(--font-body);
    color: var(--text-muted);
    margin-bottom: var(--space-20);
    line-height: 1.6;
}

.role-compare {
    margin-bottom: var(--space-16);
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.compare-item {
    display: flex;
    align-items: center;
    gap: var(--space-10);
    padding: var(--space-8) var(--space-12);
    font-size: var(--font-label);
    background: rgba(255, 255, 255, 0.02);
}

.compare-item+.compare-item {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.compare-item.compare-highlight {
    background: rgba(183, 120, 31, 0.06);
}

.compare-label {
    flex-shrink: 0;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 56px;
}

.compare-highlight .compare-label {
    color: var(--text-gold);
}

.compare-list {
    color: var(--text-muted);
    line-height: 1.4;
}

.compare-highlight .compare-list {
    color: var(--text-secondary);
}

.form-divider {
    display: flex;
    align-items: center;
    margin: var(--space-20) 0;
    color: var(--text-muted);
    font-size: var(--font-label);
}

.form-divider::before,
.form-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.form-divider span {
    padding: 0 var(--space-12);
}

.form-switch-btns {
    display: flex;
    justify-content: center;
    gap: var(--space-12);
    flex-wrap: wrap;
}

.switch-link {
    color: var(--text-jade);
    text-decoration: none;
    font-size: var(--font-body-lg);
    padding: var(--space-8) var(--space-14);
    border: 1px solid rgba(22, 128, 106, 0.2);
    border-radius: var(--radius-sm);
    transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s, opacity 0.2s, transform 0.2s;
    white-space: nowrap;
}

.switch-link:hover {
    background: rgba(22, 128, 106, 0.1);
    border-color: var(--accent-jade);
}

.btn-guest {
    background: var(--gradient-jade);
    letter-spacing: 6px;
}

.login-footer {
    position: relative;
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-label);
    z-index: 1;
    margin: 0 0 var(--space-32);
}

.landing-content {
    position: relative;
    z-index: 1;
    width: min(100%, 1020px);
    display: grid;
    gap: var(--space-16);
    padding: var(--space-24) var(--space-16) var(--space-48);
}

.landing-quick-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-12);
}

.anchor-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 var(--space-16);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(183, 120, 31, 0.22);
    background:
        linear-gradient(180deg, rgba(183, 120, 31, 0.08), rgba(13, 21, 40, 0.6)),
        rgba(13, 21, 40, 0.56);
    color: var(--text-gold);
    text-decoration: none;
    transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

.anchor-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(183, 120, 31, 0.45);
    background:
        linear-gradient(180deg, rgba(183, 120, 31, 0.14), rgba(20, 34, 53, 0.82)),
        rgba(20, 34, 53, 0.82);
}

.landing-section {
    background: rgba(13, 21, 40, 0.78);
    border: 1px solid rgba(183, 120, 31, 0.12);
    border-radius: var(--radius-xl);
    padding: var(--space-24);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(10px);
}

.landing-section-hero {
    background:
        radial-gradient(circle at top right, rgba(183, 120, 31, 0.15), transparent 32%),
        radial-gradient(circle at bottom left, rgba(22, 128, 106, 0.08), transparent 28%),
        rgba(13, 21, 40, 0.82);
}

.hero-banner {
    display: flex;
    align-items: center;
    gap: var(--space-12);
    margin-bottom: var(--space-12);
}

.hero-banner-line {
    width: 56px;
    height: 1px;
    background: linear-gradient(90deg, rgba(183, 120, 31, 0.7), rgba(183, 120, 31, 0));
}

.hero-banner-text {
    color: var(--text-muted);
    font-size: var(--font-label);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.hero-title {
    max-width: 760px;
    font-size: var(--font-hero-lg);
    line-height: 1.28;
    margin-bottom: var(--space-10);
}

.hero-stage {
    display: block;
    margin-top: var(--space-12);
}

.hero-copy {
    display: grid;
    gap: var(--space-14);
}

.hero-marks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-10);
}

.hero-mark {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 var(--space-14);
    border-radius: var(--radius-md);
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-secondary);
    font-size: var(--font-body);
    letter-spacing: 0.5px;
}

.hero-mark strong {
    color: var(--text-gold);
    margin-right: var(--space-8);
    font-weight: 700;
}

.lore-quote {
    margin: 0;
    padding: var(--space-20) var(--space-20);
    border-left: 3px solid rgba(183, 120, 31, 0.5);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-primary);
    line-height: 1.9;
    font-size: var(--font-action);
}

.section-eyebrow {
    color: var(--text-jade);
    font-size: var(--font-label);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: var(--space-10);
}

.landing-section h2 {
    font-size: var(--font-page-title);
    line-height: 1.4;
    color: var(--text-gold);
    margin-bottom: var(--space-12);
}

.section-intro {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: var(--font-action);
}

.info-pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-10);
    margin-top: var(--space-20);
}

.info-pill {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 var(--space-14);
    border-radius: var(--radius-md);
    border: 1px solid rgba(183, 120, 31, 0.12);
    background:
        linear-gradient(180deg, rgba(183, 120, 31, 0.08), rgba(255, 255, 255, 0.02)),
        rgba(183, 120, 31, 0.06);
    color: var(--text-gold);
    font-size: var(--font-body);
    letter-spacing: 1px;
}

.ai-fact-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-14);
}

.ai-fact-item {
    padding: var(--space-20) var(--space-20);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(183, 120, 31, 0.04), rgba(255, 255, 255, 0.02)),
        rgba(255, 255, 255, 0.02);
}

.ai-fact-item dt {
    color: var(--text-gold);
    font-size: var(--font-action);
    font-weight: 700;
    margin-bottom: var(--space-8);
    letter-spacing: 1px;
}

.ai-fact-item dd {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: var(--font-body-lg);
}

.source-note {
    margin-top: var(--space-16);
    color: var(--text-muted);
    font-size: var(--font-body);
    line-height: 1.8;
}

.world-stage {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-12);
}

.world-lore-card,
.region-card,
.faction-card {
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(180deg, rgba(183, 120, 31, 0.05), rgba(255, 255, 255, 0.02)),
        rgba(255, 255, 255, 0.02);
}

.world-lore-card {
    padding: var(--space-20);
}

.world-lore-card h3,
.region-card h3,
.faction-card h3 {
    color: var(--text-primary);
    font-size: var(--font-heading);
    margin-bottom: var(--space-10);
}

.world-lore-card p,
.region-card p,
.faction-card p {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: var(--font-body-lg);
}

.highlight-grid,
.realm-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12);
}

.highlight-card,
.realm-stat,
.loop-step,
.community-box,
.faq-list details {
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    border-radius: var(--radius-lg);
}

.highlight-card {
    padding: var(--space-20);
    position: relative;
    overflow: hidden;
}

.highlight-card::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, rgba(183, 120, 31, 0.55), transparent);
}

.highlight-card h3,
.loop-step h3 {
    color: var(--text-primary);
    font-size: var(--font-heading);
    margin-bottom: var(--space-10);
}

.highlight-card p,
.loop-step p,
.realm-stat span,
.community-box p,
.faq-list p {
    color: var(--text-secondary);
    line-height: 1.8;
    font-size: var(--font-body-lg);
}

.region-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12);
}

.region-card {
    padding: var(--space-20);
}

.region-kicker,
.faction-label {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 var(--space-10);
    border-radius: var(--radius-pill);
    background: rgba(22, 128, 106, 0.12);
    color: var(--text-jade);
    font-size: var(--font-label);
    letter-spacing: 1px;
    margin-bottom: var(--space-12);
}

.faction-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12);
    margin-top: var(--space-12);
}

.faction-card {
    padding: var(--space-20);
}

.play-loop {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-14);
    margin-bottom: var(--space-14);
}

.loop-step {
    padding: var(--space-20);
}

.loop-step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-14);
    background: rgba(22, 128, 106, 0.12);
    color: var(--text-jade);
    font-weight: 700;
    letter-spacing: 1px;
}

.realm-stat {
    padding: var(--space-20);
    background:
        linear-gradient(180deg, rgba(22, 128, 106, 0.05), rgba(255, 255, 255, 0.02)),
        rgba(255, 255, 255, 0.02);
}

.realm-stat strong {
    display: block;
    color: var(--text-gold);
    font-size: var(--font-heading);
    margin-bottom: var(--space-8);
}

.community-box {
    padding: var(--space-20);
}

.community-box p + p {
    margin-top: var(--space-12);
}

.community-highlight {
    color: var(--text-gold);
    font-weight: 700;
    letter-spacing: 1px;
}

.faq-list {
    display: grid;
    gap: var(--space-12);
}

.faq-list details {
    padding: var(--space-16) var(--space-20);
    background:
        linear-gradient(180deg, rgba(183, 120, 31, 0.04), rgba(255, 255, 255, 0.02)),
        rgba(255, 255, 255, 0.02);
}

.faq-list summary {
    cursor: pointer;
    color: var(--text-primary);
    font-weight: 600;
    list-style: none;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list p {
    margin-top: var(--space-12);
}

.beta-group-info {
    margin-bottom: var(--space-6);
    font-size: var(--font-body-lg);
    color: var(--text-gold);
    letter-spacing: 1px;
}

.beta-group-number {
    font-family: monospace;
    font-weight: 700;
    font-size: var(--font-title);
    color: var(--accent-gold);
    letter-spacing: 2px;
    text-shadow: 0 0 8px rgba(183, 120, 31, 0.4);
    user-select: all;
    cursor: text;
}

.global-banner-container {
    width: 100%;
    z-index: 100;
    flex-shrink: 0;
    /* 与下方炼造弹窗/顶栏重绘隔离，避免走马灯 CSS 动画被连带重开 */
    contain: layout style;
    transform: translateZ(0);
}

.beta-banner-content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    text-align: center;
    /* 右侧给关闭钮留足空间，避免挤成贴边小 x */
    padding: var(--space-8) var(--space-48) var(--space-8) var(--space-16);
    min-height: 36px;
    background: linear-gradient(90deg, rgba(183, 120, 31, 0.12) 0%, rgba(183, 120, 31, 0.2) 50%, rgba(183, 120, 31, 0.12) 100%);
    border-bottom: 1px solid rgba(183, 120, 31, 0.2);
    color: var(--text-gold);
    font-size: var(--font-body);
    letter-spacing: 1px;
    flex-shrink: 0;
    animation: betaBannerGlow 3s ease-in-out infinite;
    box-sizing: border-box;
}

/* 文案可点：打开加群讨论弹窗；外观保持原横幅文字，不做按钮壳 */
.beta-banner-main {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: center;
    cursor: pointer;
    max-width: 100%;
    line-height: 1.45;
}

.beta-banner-main:hover .beta-group-number,
.beta-banner-main:focus-visible .beta-group-number {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.beta-banner-main:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent-gold) 55%, transparent);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* 加群横幅关闭：与 .btn-panel-close 同尺寸语汇，保留横幅金色语境 */
.beta-banner-close {
    position: absolute;
    right: 8px;
    /* 不用 transform 垂直居中：主题里 transform:none 会盖掉 translateY(-50%) */
    top: 0;
    bottom: 0;
    margin: auto 0;
    width: 30px;
    height: 30px;
    min-width: 30px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid color-mix(in srgb, var(--accent-gold) 40%, transparent);
    color: var(--text-gold);
    font-size: var(--font-action);
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    font-family: inherit;
    box-sizing: border-box;
    flex-shrink: 0;
    -webkit-appearance: none;
    appearance: none;
}

.beta-banner-close:hover {
    color: var(--accent-crimson);
    border-color: color-mix(in srgb, var(--accent-crimson) 36%, transparent);
    background: color-mix(in srgb, var(--accent-crimson) 7%, transparent);
}

/* ════════════════════════════════════════════════════════════════
 * Design Token 化说明（UI 全面优化交付文档）
 * ════════════════════════════════════════════════════════════════
 * 本项目已建立完整 design token 体系，全站 token 覆盖率约 86%。
 *
 * 已建立的 token 族（均带亮/暗主题覆盖，定义在 :root + game-themes.css）：
 *   - 基础语义：--primary / --bg-* / --text-* / --accent-* / --success-color / --danger-color
 *   - 紫色族：--ghost-purple{-soft,-deep,-bg,-muted,-line,-accent,-dark,-glow}
 *   - 炼器金：--craft-gold{-bright,-soft}
 *   - 玻璃质感：--glass-white-{1,2,3}（亮色主题自动切深色微透）
 *   - 阴影黑：--shadow-black-{1,2,3}（亮色主题自动切暖灰）
 *   - 郡域色：--beihuang-blue / --wanyao-gold / --youming-purple 等 9 郡（game-map.css）
 *   - 战斗特效：--combat-damage / --combat-crit / --combat-shield / --combat-wound（game-combat.css）
 *   - 水墨登录：--login-cinnabar / --login-ink-* / --login-paper-*（login-ink-scene.css）
 *
 * 剩余约 14% 硬编码的保留理由：
 *   1. 各文件中出现 1-2 次的纯装饰色（如特定图标的高光、渐变中间色、
 *      一次性阴影微调），抽 token 无实际收益且增加命名负担；
 *   2. 部分领域特定的细微色差（如不同品质装备的边框高光、技能特效
 *      的瞬时闪光），这些颜色在设计上需要保持独立调校能力；
 *   3. login-ink-scene.css 中少量宣纸纹理变体色，是水墨场景独有的
 *      一次性氛围色，不适合抽象为通用 token。
 *
 * 这些剩余硬编码均经过 review，确认不影响主题切换一致性（主题相关的
 * 核心色已全部 token 化），且每个都有明确的视觉用途。
 * ════════════════════════════════════════════════════════════════ */

/* ==========================================================================
   FixedSelect · 自定义下拉（#4629 原生 select 被 overflow 裁切）
   菜单 portal 到 body + position:fixed，见 ui.js FixedSelect

   升级注意（全站统一）：
   1) 箭头只走 .fx-select__btn::after，清掉原 select 类上的 background 箭头（否则双 ▾）
   2) 父级容器若有装饰 ::after（洞府 cw-field、仙榜 ranking-picker），含 .fx-select 时关掉
   3) 原 select 多为 width:100%/flex:1 时，wrap 也要吃满，避免缩成内容宽
   ========================================================================== */
.fx-select {
    position: relative;
    display: inline-flex;
    min-width: 0;
    flex: 0 0 auto;
    vertical-align: middle;
}
.fx-select__btn {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    min-width: 72px;
    max-width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.2;
    font-family: inherit;
    /* 继承了 ranking-root-select / inv-extra-filter-select 等类时，去掉其 CSS 背景箭头 */
    background-image: none !important;
}
.fx-select__btn::after {
    content: '';
    flex: 0 0 auto;
    width: 0;
    height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4.5px solid currentColor;
    opacity: 0.55;
    transition: transform 0.15s ease;
}
.fx-select.is-open .fx-select__btn {
    border-color: color-mix(in srgb, var(--accent-gold, #c9a227) 48%, var(--border-color, #444));
    color: var(--text-gold, var(--accent-gold, #c9a227));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-gold, #c9a227) 14%, transparent);
}
.fx-select.is-open .fx-select__btn::after {
    transform: rotate(180deg);
}
.fx-select__label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fx-select__menu {
    box-sizing: border-box;
    margin: 0;
    padding: var(--space-4);
    border: 1px solid color-mix(in srgb, var(--accent-gold, #c9a227) 28%, var(--border-color, #444));
    border-radius: var(--radius-md);
    background: var(--bg-panel, var(--bg-card, #1a1a1a));
    box-shadow: 0 10px 28px color-mix(in srgb, #000 42%, transparent);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.fx-select__menu[hidden] {
    display: none !important;
}
.fx-select__opt {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: var(--space-8) var(--space-10);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-primary, #eee);
    font: inherit;
    font-size: var(--font-label);
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}
.fx-select__opt:hover,
.fx-select__opt:focus-visible {
    background: color-mix(in srgb, var(--accent-gold, #c9a227) 12%, transparent);
    color: var(--text-gold, var(--accent-gold, #c9a227));
}
.fx-select__opt.is-on {
    color: var(--text-gold, var(--accent-gold, #c9a227));
    background: color-mix(in srgb, var(--accent-gold, #c9a227) 14%, transparent);
    font-weight: 600;
}
.fx-select__opt.is-disabled,
.fx-select__opt:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
/* 宽表单 / 筛选行：原 select 常 width:100% 或 flex:1，升级后 wrap 跟着吃满 */
.fx-select.fx-select--block,
.fx-select.fx-select--grow,
.sgb-toolbar .fx-select,
.fx-select:has(> .fx-select__btn.app-select),
.fx-select:has(> .fx-select__btn.ps-select),
.fx-select:has(> .fx-select__btn.cw-field__control),
.fx-select:has(> .fx-select__btn.inv-extra-filter-select),
.fx-select:has(> .fx-select__btn.sect-shop-select),
.fx-select:has(> .fx-select__btn.friend-sort-select),
.fx-select:has(> .fx-select__btn.market-sort-inline),
.fx-select:has(> .fx-select__btn.rp-lim-select) {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.fx-select.fx-select--block .fx-select__btn,
.fx-select.fx-select--grow .fx-select__btn,
.fx-select:has(> .fx-select__btn.app-select) .fx-select__btn,
.fx-select:has(> .fx-select__btn.ps-select) .fx-select__btn,
.fx-select:has(> .fx-select__btn.cw-field__control) .fx-select__btn,
.fx-select:has(> .fx-select__btn.inv-extra-filter-select) .fx-select__btn,
.fx-select:has(> .fx-select__btn.sect-shop-select) .fx-select__btn,
.fx-select:has(> .fx-select__btn.friend-sort-select) .fx-select__btn,
.fx-select:has(> .fx-select__btn.market-sort-inline) .fx-select__btn,
.fx-select:has(> .fx-select__btn.rp-lim-select) .fx-select__btn {
    width: 100%;
    max-width: none;
    min-width: 0;
}

/*
 * 侧栏/工作台筛选区：不依赖 :has()（旧 WebView 无 :has 时拍卖/坊市 FixedSelect 会缩成内容宽，像点不动）。
 * 排行榜灵根等紧凑胶囊在下方用更高优先级覆盖回内容宽。
 */
.side-panel .market-filter-grid .fx-select,
.side-panel .auction-filter-grid .fx-select,
.side-panel .inventory-workbench__filter-panel .fx-select,
.side-panel .transmit-workbench__toolbar .fx-select,
.side-panel .sect-shop-toolbar .fx-select,
.side-panel .sect-donate-toolbar .fx-select,
#sidePanel .market-filter-grid .fx-select,
#sidePanel .auction-filter-grid .fx-select,
#sidePanel .inventory-workbench__filter-panel .fx-select,
#sidePanel .transmit-workbench__toolbar .fx-select,
#marketFilter .fx-select,
#marketFilterGrid .fx-select,
#invFilterPanel .fx-select,
#auctionBrowseFilter .fx-select,
#auctionHistoryFilter .fx-select,
#transmitBrowseToolbar .fx-select,
#transmitListToolbar .fx-select {
    display: flex;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.side-panel .market-filter-grid .fx-select__btn,
.side-panel .auction-filter-grid .fx-select__btn,
.side-panel .inventory-workbench__filter-panel .fx-select__btn,
.side-panel .transmit-workbench__toolbar .fx-select__btn,
#marketFilter .fx-select__btn,
#marketFilterGrid .fx-select__btn,
#invFilterPanel .fx-select__btn,
#auctionBrowseFilter .fx-select__btn,
#auctionHistoryFilter .fx-select__btn,
#transmitBrowseToolbar .fx-select__btn,
#transmitListToolbar .fx-select__btn {
    width: 100%;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
}
/* 紧凑胶囊筛选项：保持内容宽，不要被上面的 100% 规则拉满 */
.fx-select:has(> .fx-select__btn.ranking-root-select),
.fx-select:has(> .fx-select__btn.transmit-select) {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
}
.fx-select:has(> .fx-select__btn.ranking-root-select) {
    max-width: 96px;
}
.fx-select:has(> .fx-select__btn.transmit-select) {
    max-width: 88px;
}
.fx-select:has(> .fx-select__btn.ranking-root-select) .fx-select__btn,
.fx-select:has(> .fx-select__btn.transmit-select) .fx-select__btn {
    width: auto;
    max-width: 100%;
}
/* 传功筛选器：旧 WebView 不支持 :has() 时，仍须保持紧凑胶囊宽度。
 * 否则三个筛选器会按 100% 参与 flex 收缩，把搜索框挤成零宽，左侧留下两个圆弧。
 */
#transmitBrowseToolbar #transmitTypeFilterWrap,
#transmitBrowseToolbar #transmitGradeFilterWrap,
#transmitBrowseToolbar #transmitRealmFilterWrap,
#transmitListToolbar #transmitListTypeFilterWrap,
#transmitListToolbar #transmitListRealmFilterWrap {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto;
    max-width: 88px;
}
#transmitBrowseToolbar #transmitTypeFilterWrap .fx-select__btn,
#transmitBrowseToolbar #transmitGradeFilterWrap .fx-select__btn,
#transmitBrowseToolbar #transmitRealmFilterWrap .fx-select__btn,
#transmitListToolbar #transmitListTypeFilterWrap .fx-select__btn,
#transmitListToolbar #transmitListRealmFilterWrap .fx-select__btn {
    width: auto;
    max-width: 100%;
}
/* 父容器装饰箭头：升级后由按钮自带 ▾，容器 ::after 会悬空（仙榜/洞府） */
.ranking-picker:has(.fx-select)::after,
.cw-field--select:has(.fx-select)::after,
#caveContent .cw-field--select:has(.fx-select)::after {
    content: none !important;
    display: none !important;
}
#caveContent .cw-field--select:has(.fx-select) {
    padding-right: var(--space-10); /* 原 28px 留给容器箭头，升级后收回 */
}

/* ===== 文字大小（设置 → 显示外观 · lv_text_scale） =====
 * standard=1 / large=1.2 / xlarge=1.35
 * 只放大字号，绝不 zoom/transform 整页（否则右/底被裁）。
 * 主阅读区 + 常用控件用 calc(基准px * var(--lv-text-scale))。
 */
html {
    --lv-text-scale: 1;
}
html[data-lv-text-scale="large"] {
    --lv-text-scale: 1.2;
}
html[data-lv-text-scale="xlarge"] {
    --lv-text-scale: 1.35;
}
html[data-lv-text-scale="standard"] {
    --lv-text-scale: 1;
}

/* 未放大时不套下面规则，避免无意义覆盖 */
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page {
    /* 继承型正文随 body 走；显式 px 的关键区在下面逐项放大 */
    font-size: var(--font-body-lg);
}

/* —— 修炼日志 —— */
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .log-content p {
    font-size: var(--font-body-lg) !important;
    line-height: 1.75;
}
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .log-content .log-time {
    font-size: var(--font-caption) !important;
}
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .log-mid-tab {
    font-size: var(--font-label) !important;
}

/* —— 传音 —— */
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .chat-msg-text,
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .chat-msg-content {
    font-size: var(--font-body-lg) !important;
}
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .chat-msg-name,
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .chat-msg-name a,
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .chat-msg-name .chat-player-link {
    font-size: var(--font-label) !important;
}
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .chat-tabs .chat-tab,
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .chat-filter-tab {
    font-size: var(--font-caption) !important;
}
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .chat-input-field,
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .chat-input-bar :is(input, textarea),
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .inline-chat .chat-input-field {
    font-size: var(--font-body-lg) !important;
}
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .chat-title-main,
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .inline-chat-title {
    font-size: var(--font-title) !important;
}

/* —— 按钮 / 表单 / 设置 —— */
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .lv-btn,
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .modal-btn,
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .btn-send,
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .font-select-btn,
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .theme-btn,
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .ui-palette-btn {
    font-size: var(--font-body) !important;
}
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .lv-btn--sm,
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .font-select-btn {
    font-size: var(--font-label) !important;
}
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .fw-setting-row > label,
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .settings-group__title,
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .settings-row-hint {
    font-size: var(--font-body) !important;
}
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .app-input,
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page input[type="text"],
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page input[type="number"],
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page textarea,
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page select {
    font-size: var(--font-body-lg) !important;
}

/* —— 顶栏 / 面板标题 / Toast —— */
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .panel-title,
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .gc-title,
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .gc-q {
    font-size: var(--font-title) !important;
}
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .toast {
    font-size: var(--font-body-lg) !important;
}
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .header-realm,
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .header-gametime,
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .player-name,
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .stat-label,
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .stat-value {
    font-size: var(--font-label) !important;
}

/* —— 操作栏 / 列表行常用字 —— */
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .btn-action,
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .action-bar button,
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .fn-grid-item,
html:is([data-lv-text-scale="large"], [data-lv-text-scale="xlarge"]) body.game-page .fn-grid-item span {
    font-size: var(--font-caption) !important;
}

/* ===== 功能检索（#10466）：全功能直达弹窗 ===== */
.fs-overlay .modal-content { width: min(90vw, 392px); }
#fsInput { width: 100%; padding: 10px 12px; border-radius: var(--radius-input, 6px); }
.fs-results { margin-top: var(--space-8); max-height: min(52vh, 380px); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-4); }
.fs-row { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 8px 10px; background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; text-align: left; }
.fs-row:hover { border-color: var(--accent-gold); }
.fs-row__name { font-size: var(--font-label); color: var(--text-primary); display: flex; align-items: center; gap: var(--space-4); }
.fs-row__path { font-size: var(--font-caption); color: var(--text-muted); }
.fs-new-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; background: var(--accent-gold); color: #fff; font-size: 10px; line-height: 1; }
.fs-group { font-size: var(--font-caption); color: var(--text-muted); margin-top: var(--space-4); }
.fs-empty { padding: var(--space-12) 0; text-align: center; font-size: var(--font-label); color: var(--text-muted); }
.fs-badge { position: absolute; top: -4px; right: -4px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 999px; background: var(--accent-gold); color: #fff; font-size: 10px; line-height: 15px; text-align: center; }