/* ============================================
   知微阁 - 中西占卜 | Mobile-First Design System
   Aesthetic: Luxury/refined - Dark Mystical
   Designed for mobile phones, scaled up to tablet/desktop
   ============================================ */

/* --- CSS Variables ---
   主题系统：通过 data-theme 属性切换
   - 知微金 (默认, data-theme="zhiwei" 或无属性)
   - 太极水墨 (data-theme="taiji")  明色·宣纸水墨
   - 紫微星辰 (data-theme="ziwei")  暗色·紫微星河
   - 玄机墨金 (data-theme="xuanji") 暗色·深海墨金
   RGB 三元组变量供 rgba() 函数引用，随主题切换
*/
:root {
    /* 知微金 - Luxury/refined Dark Mystical */
    --color-bg: #0A0A0F;
    --color-surface: #1A1A24;
    --color-surface-light: #242430;
    --color-gold: #C9A961;
    --color-gold-light: #E8C77E;
    --color-gold-dark: #8A7440;
    --color-red: #8B2C2C;
    --color-red-light: #B04545;
    --color-danger: #C0392B;
    --color-success: #27AE60;
    --color-orange: #D4883A;
    --color-text: #E8E0D0;
    --color-muted: #8A8270;
    --color-border: #3A3A48;

    /* 别名变量（兼容页面内联引用，随主题切换） */
    --color-accent: var(--color-gold);
    --color-card: var(--color-surface);
    --color-gold-rgb: 201, 169, 97;       /* 兼容 --color-gold-rgb 引用 */
    --color-text-muted: var(--color-muted);

    /* RGB 三元组（供 rgba() 引用，随主题切换） */
    --accent-rgb: 201, 169, 97;          /* = --color-gold */
    --accent-light-rgb: 232, 199, 126;    /* = --color-gold-light */
    --gold-rgb: 201, 169, 97;             /* 兼容旧引用 */
    --gold-light-rgb: 232, 199, 126;      /* = --color-gold-light */
    --gold-dark-rgb: 138, 116, 64;        /* = --color-gold-dark */
    --bg-rgb: 10, 10, 15;                 /* = --color-bg */
    --bg-deep-rgb: 10, 10, 15;            /* 最深背景层 */
    --surface-rgb: 26, 26, 36;            /* = --color-surface */
    --surface-deep-rgb: 18, 18, 26;       /* 导航栏背景 */
    --surface-darker-rgb: 15, 15, 22;     /* 下拉菜单背景 */
    --border-rgb: 58, 58, 72;             /* = --color-border */
    --overlay-rgb: 255, 255, 255;         /* 叠加层色（暗色主题用白色微透） */

    --font-display: 'Cinzel', 'Noto Serif SC', serif;
    --font-body: 'Noto Serif SC', 'Cinzel', serif;
    --font-mono: 'Courier New', monospace;

    /* Mobile-first radii — larger for touch friendliness */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;

    --transition: 300ms cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-spring: cubic-bezier(0.22, 1, 0.36, 1);

    /* 扎实暗色面板变量 */
    --glass-blur: 0px;
    --glass-saturate: 100%;
    --glass-bg: rgba(var(--surface-rgb), 0.92);
    --glass-bg-hover: rgba(36, 36, 50, 0.95);
    --glass-bg-active: rgba(42, 42, 58, 0.97);
    --glass-border: rgba(var(--border-rgb), 0.80);
    --glass-border-hover: rgba(var(--accent-rgb), 0.50);
    --glass-highlight: transparent;
    --glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.40);
    --glass-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.50), 0 0 15px rgba(var(--accent-rgb), 0.12);
    --glass-radius: 14px;

    --starfield-opacity: 1;

    /* Mobile layout tokens */
    --topbar-h: 52px;
    --tabbar-h: 60px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ===== 太极水墨 - Brutalist/Editorial 明色宣纸 ===== */
html[data-theme="taiji"] {
    --color-bg: #F5F1E8;
    --color-surface: #FFFFFF;
    --color-surface-light: #ECE6D9;
    --color-gold: #2B2B2B;
    --color-gold-light: #3D3D3D;
    --color-gold-dark: #0A0A0A;
    --color-red: #9B2D2D;
    --color-red-light: #C04545;
    --color-danger: #C0392B;
    --color-success: #2D8B57;
    --color-orange: #B8702A;
    --color-text: #1A1A1A;
    --color-muted: #6A6258;
    --color-border: #C9C0AC;

    /* 别名变量（兼容页面内联引用，随主题切换） */
    --color-accent: var(--color-gold);
    --color-card: var(--color-surface);
    --color-gold-rgb: 43, 43, 43;
    --color-text-muted: var(--color-muted);

    --accent-rgb: 43, 43, 43;
    --accent-light-rgb: 61, 61, 61;
    --gold-rgb: 43, 43, 43;
    --gold-light-rgb: 61, 61, 61;
    --gold-dark-rgb: 10, 10, 10;
    --bg-rgb: 245, 241, 232;
    --bg-deep-rgb: 245, 241, 232;
    --surface-rgb: 255, 255, 255;
    --surface-deep-rgb: 240, 235, 225;
    --surface-darker-rgb: 235, 228, 216;
    --border-rgb: 201, 192, 172;
    --overlay-rgb: 0, 0, 0;               /* 叠加层色（明色主题用黑色微透） */

    --glass-bg: rgba(255, 255, 255, 0.88);
    --glass-bg-hover: rgba(236, 230, 217, 0.95);
    --glass-bg-active: rgba(229, 223, 209, 0.97);
    --glass-border: rgba(var(--border-rgb), 0.80);
    --glass-border-hover: rgba(var(--accent-rgb), 0.45);
    --glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --glass-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12), 0 0 15px rgba(var(--accent-rgb), 0.06);

    --starfield-opacity: 0.4;

    /* 芯片/徽章在太极主题下使用深色 */
    --chip-gold: #2B2B2B;
    --chip-gold-light: #4A4A4A;
    --chip-gold-dark: #0A0A0A;
    --chip-glow-rgb: 43, 43, 43;
    --chip-glow-light-rgb: 74, 74, 74;

    /* 紫微盘辅助星小字变量（暗色主题用浅色回退值，明色主题补深色定义） */
    --color-purple-light: #6B4E9E;
    --color-cyan-light: #2E5F8F;
    --color-orange-light: #8C6D1F;
}

html[data-theme="taiji"] .mobile-topbar,
html[data-theme="taiji"] .mobile-drawer,
html[data-theme="taiji"] .method-card,
html[data-theme="taiji"] .info-table,
html[data-theme="taiji"] .result-section,
html[data-theme="taiji"] .sc-dial {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10) !important;
}
html[data-theme="taiji"] .qn-gender-btn:hover,
html[data-theme="taiji"] .qn-cal-group {
    background: rgba(0, 0, 0, 0.04);
}

/* ===== 太极水墨主题：时辰盘文字可见性修正（盘面已改为宣纸浅色，文字须用深色） ===== */
html[data-theme="taiji"] .sc-pos-name {
    color: rgba(43, 43, 43, 0.88);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}
html[data-theme="taiji"] .sc-pos-time {
    color: rgba(122, 114, 104, 0.7);
}
html[data-theme="taiji"] .sc-center-name {
    color: #2B2B2B;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}
html[data-theme="taiji"] .sc-center-hint {
    color: rgba(122, 114, 104, 0.5);
}
html[data-theme="taiji"] .sc-pos.sc-active .sc-pos-name {
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
html[data-theme="taiji"] .sc-pos.sc-active .sc-pos-time {
    color: rgba(255, 255, 255, 0.72);
}
html[data-theme="taiji"] .sc-gan-char {
    color: rgba(var(--accent-rgb), 0.24);
}
/* 选中态按钮背景保持深色金，确保浅色文字可读 */
html[data-theme="taiji"] .sc-pos.sc-active {
    background:
        radial-gradient(circle at 38% 24%,
            rgba(140, 120, 70, 0.95) 0%,
            rgba(90, 76, 40, 0.9) 40%,
            rgba(50, 42, 22, 0.85) 100%);
}
html[data-theme="taiji"] .sc-confirm-btn {
    background:
        linear-gradient(180deg,
            rgba(140, 120, 70, 0.98) 0%,
            rgba(100, 86, 46, 0.92) 45%,
            rgba(60, 50, 26, 0.88) 100%);
    color: #FFFFFF;
}
/* 确认弹窗按钮在太极主题下确保对比 */
html[data-theme="taiji"] .confirm-btn.yes {
    background: #2B2B2B;
    color: #F5F1E8;
    border-color: #2B2B2B;
}
/* tab-center-icon 在太极主题下保持深色金底浅色图标 */
html[data-theme="taiji"] .tab-center-icon {
    color: rgba(255, 255, 255, 0.92);
}
html[data-theme="taiji"] .tab-center-icon i {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
/* 性别/历法按钮激活态在太极主题下确保可读 */
html[data-theme="taiji"] .qn-gender-btn.active,
html[data-theme="taiji"] .qn-cal-btn.active {
    color: #1A1A1A;
    background: rgba(43, 43, 43, 0.12);
}
/* 方法选项卡激活态 */
html[data-theme="taiji"] .method-tab.active,
html[data-theme="taiji"] .yao-selector-btn.selected,
html[data-theme="taiji"] .ai-style-btn.active,
html[data-theme="taiji"] .ai-depth-btn.active,
html[data-theme="taiji"] .ai-dim-chip.active,
html[data-theme="taiji"] .ai-persp-chip.active {
    color: #1A1A1A;
}
/* 抽签/牌卡选中的高亮在太极主题下 */
html[data-theme="taiji"] .method-choice.selected .choice-icon,
html[data-theme="taiji"] .method-choice.selected .tab-name {
    color: #1A1A1A;
}
/* ===== 太极/朱砂 · 明色主题对比度修正（导览注释 · 20260915f） =====
   明色主题（宣纸底）下"暗底深字/暗底浅字"硬编码的修正分三处，各管一段：
   · ~15952「明色主题适配」：首页基础组件（宜忌标签/吉凶芯片/签到状态色）
     —— 吉色系已压深至 #1E6B3C（宣纸上 ≈5.8:1，AA 达标）；
   · ~16903「ZW-CLASSIC 双钮排」：经典视图手机端「开始占卜/入阁」双钮；
   · 文件末尾「ZW-APP 移动端对比度修正」：简约视图手机端
     （宜忌徽标/标签胶囊/签到钮/法印圆钮/视图切换胶囊）。
   注意：ZW-APP 移动端块（~16244 起）的 html:not(.zw-classic) 规则与本区
   同优先级且位置靠后，会反压本区同名规则 —— 简约视图相关修正必须置于
   文件末尾并以 html[data-theme]:not(.zw-classic) 提权，勿在此追加。 */
/* 签到积分小徽（经典视图/桌面端）：徽底随金变量变墨/朱，原深字 #14100A
   压深底仅 ~1.3:1 → 宣纸字（太极 ≈7.7:1 / 朱砂 ≈5:1）；
   简约视图的衬底强化由文件末尾移动端块接管（此规则对两视图均无害） */
html[data-theme="taiji"] .checkin-btn-reward,
html[data-theme="zhusha"] .checkin-btn-reward {
    color: #F5F1E8;
}
/* ===== 太极主题：十二时辰盘改为宣纸水墨风（原大漆深底在明色主题下文字不可见） ===== */
html[data-theme="taiji"] .sc-dial {
    background:
        radial-gradient(circle at 50% 32%,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(245, 241, 232, 0.92) 30%,
            rgba(220, 212, 195, 0.88) 72%,
            rgba(200, 192, 172, 0.85) 100%);
    box-shadow:
        inset 0 0 60px rgba(0, 0, 0, 0.06),
        inset 0 2px 4px rgba(var(--gold-rgb), 0.05),
        0 0 0 1px rgba(var(--gold-rgb), 0.22),
        0 0 0 3px rgba(0, 0, 0, 0.08),
        0 0 0 4px rgba(var(--gold-rgb), 0.06),
        0 20px 56px rgba(0, 0, 0, 0.12),
        0 8px 24px rgba(0, 0, 0, 0.08);
}
html[data-theme="taiji"] .sc-center-medallion {
    background:
        radial-gradient(circle at 44% 28%,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(240, 235, 225, 0.85) 50%,
            rgba(220, 212, 195, 0.8) 100%);
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.06),
        inset 0 2px 6px rgba(0, 0, 0, 0.04),
        0 4px 16px rgba(0, 0, 0, 0.1),
        0 0 20px rgba(var(--accent-rgb), 0.04);
}
html[data-theme="taiji"] .sc-pos {
    background:
        radial-gradient(circle at 40% 28%,
            rgba(255, 255, 255, 0.7) 0%,
            rgba(240, 235, 225, 0.6) 45%,
            rgba(210, 202, 185, 0.5) 100%);
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
html[data-theme="taiji"] .sc-pos:hover,
html[data-theme="taiji"] .sc-pos:active {
    background:
        radial-gradient(circle at 40% 28%,
            rgba(var(--accent-light-rgb), 0.12) 0%,
            rgba(var(--accent-rgb), 0.05) 45%,
            rgba(230, 225, 215, 0.8) 100%);
    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.1),
        0 0 12px rgba(var(--gold-rgb), 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
html[data-theme="taiji"] .sc-pos.sc-preview {
    background:
        radial-gradient(circle at 40% 28%,
            rgba(var(--accent-light-rgb), 0.15) 0%,
            rgba(var(--accent-rgb), 0.06) 45%,
            rgba(230, 225, 215, 0.8) 100%);
    box-shadow:
        0 0 18px rgba(var(--gold-rgb), 0.15),
        0 4px 12px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

/* ===== 太极水墨主题：全局可读性修复 ===== */

/* 红色按钮 hover：白字深红底（原深字深底看不清） */
html[data-theme="taiji"] .btn-red:hover,
html[data-theme="taiji"] .btn-red:active {
    background: var(--color-red);
    color: #FFFFFF;
    box-shadow: 0 0 16px rgba(155, 45, 45, 0.3);
}

/* 基础按钮阴影减轻 */
html[data-theme="taiji"] .btn {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}
html[data-theme="taiji"] .btn:hover,
html[data-theme="taiji"] .btn:active {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

/* 表单容器阴影减轻（原 rgba(0,0,0,0.30) 过重） */
html[data-theme="taiji"] .divination-form {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

/* 结果区边框减轻（原 --color-gold-dark #0A0A0A 过重） */
html[data-theme="taiji"] .result-section {
    border-color: var(--color-border);
}

/* qn-cast-form 容器阴影 */
html[data-theme="taiji"] .qn-cast-form {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

/* 链接颜色加深（原 --color-gold-light #5A5A5A 对比不足） */
html[data-theme="taiji"] a {
    color: #2B5B8A;
}
html[data-theme="taiji"] a:hover {
    color: #1A4A7A;
}

/* 抽签签条容器阴影 */
html[data-theme="taiji"] .lot-container {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
}

/* 信息表格阴影 */
html[data-theme="taiji"] .info-table {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
}

/* 方法卡片阴影 */
html[data-theme="taiji"] .method-card {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
}

/* 导航栏/顶栏阴影减轻 */
html[data-theme="taiji"] .mobile-topbar {
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06) !important;
}
html[data-theme="taiji"] .mobile-tabbar {
    box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.06) !important;
}

/* 古籍卡片阴影 */
html[data-theme="taiji"] .guji-card {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
}

/* 历史记录卡片 */
html[data-theme="taiji"] .history-card {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important;
}

/* 工具标签页 */
html[data-theme="taiji"] .tool-tab {
    color: var(--color-muted);
}
html[data-theme="taiji"] .tool-tab.active {
    color: #1A1A1A;
    background: rgba(43, 43, 43, 0.08);
}

/* 输入框聚焦态 */
html[data-theme="taiji"] .form-group input:focus,
html[data-theme="taiji"] .form-group select:focus,
html[data-theme="taiji"] .form-group textarea:focus {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 2px rgba(43, 43, 43, 0.08);
}

/* 关系徽章 */
html[data-theme="taiji"] .relation-badge.auspicious {
    color: #2D5F2D;
    background: rgba(45, 139, 87, 0.1);
    border-color: rgba(45, 139, 87, 0.3);
}
html[data-theme="taiji"] .relation-badge.inauspicious {
    color: #8B2C2C;
    background: rgba(155, 45, 45, 0.1);
    border-color: rgba(155, 45, 45, 0.3);
}

/* 起卦动画遮罩在太极主题下使用深色文字 */
html[data-theme="taiji"] .cast-text {
    color: #2B2B2B;
}
html[data-theme="taiji"] .cast-subtext {
    color: #6A6258;
}

/* 性别/历法按钮非激活态：提高文字不透明度（原 rgba(43,43,43,0.5) 在浅底上看不清） */
html[data-theme="taiji"] .qn-gender-btn,
html[data-theme="taiji"] .qn-cal-btn {
    color: rgba(43, 43, 43, 0.85);
}

/* 横幅副标题提高不透明度 */
html[data-theme="taiji"] .qn-cast-banner .banner-sub {
    color: rgba(61, 61, 61, 0.9);
}

/* 文本输入框使用正文色（原 --color-gold-light 偏灰） */
html[data-theme="taiji"] .qn-text-input {
    color: var(--color-text);
}
html[data-theme="taiji"] .qn-text-input::placeholder {
    color: rgba(106, 98, 88, 0.5);
}

/* 下拉选择卡片文字加深 */
html[data-theme="taiji"] .qn-select-card {
    color: var(--color-text);
}

/* 日期单元格文字 */
html[data-theme="taiji"] .qn-date-cell {
    color: var(--color-text);
}
html[data-theme="taiji"] .qn-date-cell-label {
    color: var(--color-muted);
}

/* 知命盘雷达图：JS 生成的 SVG 顶点/文字使用硬编码金色，浅底上看不清 → 覆盖为深鎏金 */
html[data-theme="taiji"] .zhiji-radar-svg circle[fill="#C9A961"] {
    fill: #8C6D1F;
}
html[data-theme="taiji"] .zhiji-radar-svg text[fill="#C9A961"] {
    fill: #2B2B2B;
}
/* 奇门命理宫位表内联金色标记（★日干 等）：浅底上金色看不清 → 深鎏金 */
html[data-theme="taiji"] span[style*="color:#C9A961"] {
    color: #8C6D1F !important;
}
/* SVG 内联金色描边/填充统一适配（浅底可读性）
   注意：.zhiji-awaken-svg（觉醒动画）底色恒为深色，必须排除，避免误伤 */
html[data-theme="taiji"] svg:not(.zhiji-awaken-svg) [stroke="#C9A961"] { stroke: #6B5210; }
html[data-theme="taiji"] svg:not(.zhiji-awaken-svg) [stroke="#E8C77E"] { stroke: #6B5210; }
html[data-theme="taiji"] svg:not(.zhiji-awaken-svg) [stroke="#F5D67B"] { stroke: #6B5210; }
html[data-theme="taiji"] svg:not(.zhiji-awaken-svg) [fill="#E8C77E"]   { fill: #6B5210; }
html[data-theme="taiji"] svg:not(.zhiji-awaken-svg) [fill="#F5D67B"]   { fill: #6B5210; }
/* 白色/米白 SVG 元素在浅底上不可见 → 深墨色 */
html[data-theme="taiji"] svg:not(.zhiji-awaken-svg) [fill="#FFF8E7"]   { fill: #2B2B2B; }
html[data-theme="taiji"] svg:not(.zhiji-awaken-svg) [stroke="#FFF8E7"] { stroke: #2B2B2B; }
/* 纯黑描边在浅底上过重，柔化为深灰 */
html[data-theme="taiji"] svg:not(.zhiji-awaken-svg) [stroke="#0A0A0F"] { stroke: #3D3D3D; }

/* ===== 朱砂宣纸 - 明色·宣纸朱砂（米白宣纸底 + 暖灰墨字 + 朱红点睛 + 浅褐界线）=====
   主色 #F7F4F0 大面积背景（宣纸质感）｜辅色 #4A4540 正文标题
   点缀 #B83A2A 按钮高亮链接（东方朱砂）｜辅助线 #E5DFD9 分割边框 */
html[data-theme="zhusha"] {
    --color-bg: #F7F4F0;
    --color-surface: #FFFFFF;
    --color-surface-light: #F0EBE4;
    --color-gold: #B83A2A;
    --color-gold-light: #C05240;
    --color-gold-dark: #922D1F;
    --color-red: #9C2F22;
    --color-red-light: #B5402F;
    --color-danger: #C0392B;
    --color-success: #2D7D52;
    --color-orange: #B26A28;
    --color-text: #4A4540;
    --color-muted: #7A7268;
    --color-border: #E5DFD9;

    /* 别名变量（兼容页面内联引用，随主题切换） */
    --color-accent: var(--color-gold);
    --color-card: var(--color-surface);
    --color-gold-rgb: 184, 58, 42;
    --color-text-muted: var(--color-muted);

    --accent-rgb: 184, 58, 42;
    --accent-light-rgb: 192, 82, 64;
    --gold-rgb: 184, 58, 42;
    --gold-light-rgb: 192, 82, 64;
    --gold-dark-rgb: 146, 45, 31;
    --bg-rgb: 247, 244, 240;
    --bg-deep-rgb: 247, 244, 240;
    --surface-rgb: 255, 255, 255;
    --surface-deep-rgb: 243, 239, 234;
    --surface-darker-rgb: 238, 233, 227;
    --border-rgb: 229, 223, 217;
    --overlay-rgb: 0, 0, 0;               /* 叠加层色（明色主题用黑色微透） */

    --glass-bg: rgba(255, 255, 255, 0.90);
    --glass-bg-hover: rgba(240, 235, 228, 0.95);
    --glass-bg-active: rgba(234, 229, 222, 0.97);
    --glass-border: rgba(var(--border-rgb), 0.85);
    --glass-border-hover: rgba(var(--accent-rgb), 0.45);
    --glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    --glass-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.12), 0 0 15px rgba(var(--accent-rgb), 0.08);

    --starfield-opacity: 0.4;

    /* 芯片/徽章在朱砂主题下使用朱红 */
    --chip-gold: #B83A2A;
    --chip-gold-light: #C05240;
    --chip-gold-dark: #922D1F;
    --chip-glow-rgb: 184, 58, 42;
    --chip-glow-light-rgb: 192, 82, 64;

    /* 紫微盘辅助星小字变量（暗色主题用浅色回退值，明色主题补深色定义） */
    --color-purple-light: #8A4A7E;
    --color-cyan-light: #33567A;
    --color-orange-light: #9C6B1F;
}

/* ===== 朱砂宣纸：明色主题可读性适配（阴影减淡 / 深底组件宣纸化 / 硬编码金色 SVG 转朱砂） ===== */
html[data-theme="zhusha"] .mobile-topbar,
html[data-theme="zhusha"] .mobile-drawer,
html[data-theme="zhusha"] .method-card,
html[data-theme="zhusha"] .info-table,
html[data-theme="zhusha"] .result-section,
html[data-theme="zhusha"] .sc-dial {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10) !important;
}
html[data-theme="zhusha"] .qn-gender-btn:hover,
html[data-theme="zhusha"] .qn-cal-group {
    background: rgba(0, 0, 0, 0.04);
}

/* 十二时辰盘：宣纸底 + 暖灰字（原大漆深底在明色主题下文字不可见） */
html[data-theme="zhusha"] .sc-pos-name {
    color: rgba(74, 69, 64, 0.92);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}
html[data-theme="zhusha"] .sc-pos-time {
    color: rgba(122, 114, 104, 0.75);
}
html[data-theme="zhusha"] .sc-center-name {
    color: #4A4540;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}
html[data-theme="zhusha"] .sc-center-hint {
    color: rgba(122, 114, 104, 0.6);
}
html[data-theme="zhusha"] .sc-pos.sc-active .sc-pos-name {
    color: #FFFFFF;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
html[data-theme="zhusha"] .sc-pos.sc-active .sc-pos-time {
    color: rgba(255, 255, 255, 0.75);
}
/* 天干底纹：浅朱砂水印字 */
html[data-theme="zhusha"] .sc-gan-char {
    color: rgba(184, 58, 42, 0.18);
}
html[data-theme="zhusha"] .sc-dial {
    background:
        radial-gradient(circle at 50% 32%,
            rgba(255, 255, 255, 0.96) 0%,
            rgba(247, 244, 240, 0.94) 30%,
            rgba(232, 224, 213, 0.92) 72%,
            rgba(219, 210, 197, 0.90) 100%);
    box-shadow:
        inset 0 0 60px rgba(0, 0, 0, 0.05),
        inset 0 2px 4px rgba(184, 58, 42, 0.06),
        0 0 0 1px rgba(184, 58, 42, 0.30),
        0 0 0 3px rgba(0, 0, 0, 0.06),
        0 0 0 4px rgba(184, 58, 42, 0.08),
        0 20px 56px rgba(0, 0, 0, 0.12),
        0 8px 24px rgba(0, 0, 0, 0.08);
}
html[data-theme="zhusha"] .sc-center-medallion {
    background:
        radial-gradient(circle at 44% 28%,
            rgba(255, 255, 255, 0.92) 0%,
            rgba(243, 239, 233, 0.88) 50%,
            rgba(226, 218, 207, 0.85) 100%);
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.05),
        inset 0 2px 6px rgba(0, 0, 0, 0.03),
        0 4px 16px rgba(0, 0, 0, 0.1),
        0 0 20px rgba(184, 58, 42, 0.05);
}
html[data-theme="zhusha"] .sc-pos {
    background:
        radial-gradient(circle at 40% 28%,
            rgba(255, 255, 255, 0.75) 0%,
            rgba(244, 240, 235, 0.65) 45%,
            rgba(224, 217, 208, 0.55) 100%);
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
html[data-theme="zhusha"] .sc-pos:hover,
html[data-theme="zhusha"] .sc-pos:active {
    background:
        radial-gradient(circle at 40% 28%,
            rgba(192, 82, 64, 0.14) 0%,
            rgba(184, 58, 42, 0.06) 45%,
            rgba(232, 224, 213, 0.85) 100%);
    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.1),
        0 0 12px rgba(184, 58, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
html[data-theme="zhusha"] .sc-pos.sc-preview {
    background:
        radial-gradient(circle at 40% 28%,
            rgba(192, 82, 64, 0.17) 0%,
            rgba(184, 58, 42, 0.07) 45%,
            rgba(232, 224, 213, 0.85) 100%);
    box-shadow:
        0 0 18px rgba(184, 58, 42, 0.16),
        0 4px 12px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* 选中态：朱红底白字（基础金 RGB 变量已驱动为朱红，此处收敛阴影的纸上观感） */
html[data-theme="zhusha"] .sc-pos.sc-active {
    box-shadow:
        0 0 20px rgba(184, 58, 42, 0.25),
        0 4px 12px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
html[data-theme="zhusha"] .sc-confirm-btn {
    box-shadow:
        0 4px 14px rgba(184, 58, 42, 0.28),
        0 2px 6px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

/* 红色按钮 hover：朱红底白字（原正文深灰字压在红底上对比不足） */
html[data-theme="zhusha"] .btn-red:hover,
html[data-theme="zhusha"] .btn-red:active {
    color: #FFFFFF;
    box-shadow: 0 0 16px rgba(184, 58, 42, 0.3);
}

/* 基础按钮阴影减轻 */
html[data-theme="zhusha"] .btn {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}
html[data-theme="zhusha"] .btn:hover,
html[data-theme="zhusha"] .btn:active {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

/* 表单容器阴影减轻（原 rgba(0,0,0,0.30) 过重） */
html[data-theme="zhusha"] .divination-form {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}
html[data-theme="zhusha"] .qn-cast-form {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}

/* 链接：朱红点缀（浅底上 gold-light 对比不足 → 用主朱红） */
html[data-theme="zhusha"] a {
    color: #B83A2A;
}
html[data-theme="zhusha"] a:hover {
    color: #922D1F;
}

/* 各类卡片/表格阴影减淡 */
html[data-theme="zhusha"] .lot-container { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important; }
html[data-theme="zhusha"] .info-table   { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important; }
html[data-theme="zhusha"] .method-card  { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important; }
html[data-theme="zhusha"] .mobile-topbar { box-shadow: 0 1px 8px rgba(0, 0, 0, 0.06) !important; }
html[data-theme="zhusha"] .mobile-tabbar { box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.06) !important; }
html[data-theme="zhusha"] .guji-card    { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important; }
html[data-theme="zhusha"] .history-card { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06) !important; }

/* 工具标签页激活态：暖灰字 */
html[data-theme="zhusha"] .tool-tab {
    color: var(--color-muted);
}
html[data-theme="zhusha"] .tool-tab.active {
    color: #4A4540;
    background: rgba(74, 69, 64, 0.08);
}

/* 输入框聚焦态：朱红描边 */
html[data-theme="zhusha"] .form-group input:focus,
html[data-theme="zhusha"] .form-group select:focus,
html[data-theme="zhusha"] .form-group textarea:focus {
    border-color: var(--color-gold);
    box-shadow: 0 0 0 2px rgba(184, 58, 42, 0.10);
}

/* 关系徽章：吉红凶灰语义分色（朱红主题下两色会撞色，沿用绿/红语义） */
html[data-theme="zhusha"] .relation-badge.auspicious {
    color: #256B45;
    background: rgba(45, 125, 82, 0.10);
    border-color: rgba(45, 125, 82, 0.35);
}
html[data-theme="zhusha"] .relation-badge.inauspicious {
    color: #9C2F22;
    background: rgba(156, 47, 34, 0.10);
    border-color: rgba(156, 47, 34, 0.35);
}

/* 性别/历法按钮：激活态朱红加深保证可读、非激活态暖灰加深 */
html[data-theme="zhusha"] .qn-gender-btn.active,
html[data-theme="zhusha"] .qn-cal-btn.active {
    color: #A83423;
}
html[data-theme="zhusha"] .qn-gender-btn,
html[data-theme="zhusha"] .qn-cal-btn {
    color: rgba(74, 69, 64, 0.85);
}

/* 横幅副标题加深 */
html[data-theme="zhusha"] .qn-cast-banner .banner-sub {
    color: rgba(74, 69, 64, 0.9);
}

/* 文本输入框占位符：暖灰半透 */
html[data-theme="zhusha"] .qn-text-input::placeholder {
    color: rgba(122, 114, 104, 0.55);
}

/* AI 追问按钮：朱红底 → 白字（原固定深棕黑字与朱红底对比不足） */
html[data-theme="zhusha"] .ai-followup-btn,
html[data-theme="zhusha"] .ai-followup-btn:hover,
html[data-theme="zhusha"] .ai-followup-btn:active {
    color: #FFFFFF !important;
}
html[data-theme="zhusha"] .ai-followup-btn i { color: #FFFFFF !important; }

/* 知命盘雷达图：JS 生成的 SVG 顶点/文字硬编码金色，宣纸底上看不清 → 深朱砂 */
html[data-theme="zhusha"] .zhiji-radar-svg circle[fill="#C9A961"] {
    fill: #922D1F;
}
html[data-theme="zhusha"] .zhiji-radar-svg text[fill="#C9A961"] {
    fill: #4A4540;
}
/* 奇门命理宫位表内联金色标记（★日干 等）：宣纸底上金色看不清 → 深朱砂 */
html[data-theme="zhusha"] span[style*="color:#C9A961"] {
    color: #922D1F !important;
}
/* SVG 内联金色描边/填充统一适配（宣纸底可读性），.zhiji-awaken-svg 底色恒深必须排除 */
html[data-theme="zhusha"] svg:not(.zhiji-awaken-svg) [stroke="#C9A961"] { stroke: #A83423; }
html[data-theme="zhusha"] svg:not(.zhiji-awaken-svg) [stroke="#E8C77E"] { stroke: #A83423; }
html[data-theme="zhusha"] svg:not(.zhiji-awaken-svg) [stroke="#F5D67B"] { stroke: #A83423; }
html[data-theme="zhusha"] svg:not(.zhiji-awaken-svg) [fill="#E8C77E"]   { fill: #A83423; }
html[data-theme="zhusha"] svg:not(.zhiji-awaken-svg) [fill="#F5D67B"]   { fill: #A83423; }
/* 白色/米白 SVG 元素在宣纸底上不可见 → 暖灰墨色 */
html[data-theme="zhusha"] svg:not(.zhiji-awaken-svg) [fill="#FFF8E7"]   { fill: #4A4540; }
html[data-theme="zhusha"] svg:not(.zhiji-awaken-svg) [stroke="#FFF8E7"] { stroke: #4A4540; }
/* 纯黑描边在宣纸底上过重，柔化为暖灰 */
html[data-theme="zhusha"] svg:not(.zhiji-awaken-svg) [stroke="#0A0A0F"] { stroke: #6B655D; }

/* ===== 朱砂宣纸：组件级浅色适配（阴影/输入字色/主题菜单/会员标签） ===== */
/* 主题切换菜单：浅底面板投影减淡、边框改暖褐 */
html[data-theme="zhusha"] .theme-menu {
    border-color: rgba(184, 58, 42, 0.28);
    box-shadow:
        0 18px 50px rgba(74, 69, 64, 0.18),
        0 4px 14px rgba(74, 69, 64, 0.10),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
/* 会员标签：默认硬编码金字在浅底菜单上看不清 → 深朱红 */
html[data-theme="zhusha"] .theme-member-tag {
    color: #922D1F;
    background: linear-gradient(135deg, rgba(184, 58, 42, 0.16), rgba(146, 45, 31, 0.10));
    border-color: rgba(146, 45, 31, 0.55);
}
html[data-theme="zhusha"] .theme-member-tag i { color: #922D1F; }
html[data-theme="zhusha"] .theme-option-member {
    border-color: rgba(146, 45, 31, 0.4);
}
html[data-theme="zhusha"] .theme-option-member.active {
    border-color: rgba(146, 45, 31, 0.7);
}
/* 文本输入框：gold-light(#C05240) 正文对比临界 → 暖灰正文色 */
html[data-theme="zhusha"] .qn-text-input {
    color: var(--color-text);
}
html[data-theme="zhusha"] .qn-text-input::placeholder {
    color: rgba(122, 114, 104, 0.55);
}
/* 下拉选择卡片文字加深 */
html[data-theme="zhusha"] .qn-select-card {
    color: var(--color-text);
}
html[data-theme="zhusha"] .qn-select-card select {
    color: #4A4540;
}
/* 日期单元格文字 */
html[data-theme="zhusha"] .qn-date-cell {
    color: var(--color-text);
}
html[data-theme="zhusha"] .qn-date-cell-label {
    color: var(--color-muted);
}

/* ===== 紫微星辰 - Luxury/Retro-futuristic 暗色星河 ===== */
html[data-theme="ziwei"] {
    --color-bg: #0B0820;
    --color-surface: #181230;
    --color-surface-light: #241C42;
    --color-gold: #C4B5E0;
    --color-gold-light: #E5DEF5;
    --color-gold-dark: #8A7FB5;
    --color-red: #8B47A8;
    --color-red-light: #B070C8;
    --color-danger: #B070C8;
    --color-success: #5DAE8B;
    --color-orange: #D4953A;
    --color-text: #E5E1F0;
    --color-muted: #8C82A8;
    --color-border: #322A55;

    /* 别名变量（兼容页面内联引用，随主题切换） */
    --color-accent: var(--color-gold);
    --color-card: var(--color-surface);
    --color-gold-rgb: 196, 181, 224;
    --color-text-muted: var(--color-muted);

    --accent-rgb: 196, 181, 224;
    --accent-light-rgb: 229, 222, 245;
    --gold-rgb: 196, 181, 224;
    --gold-light-rgb: 229, 222, 245;
    --gold-dark-rgb: 138, 127, 181;
    --bg-rgb: 11, 8, 32;
    --bg-deep-rgb: 11, 8, 32;
    --surface-rgb: 24, 18, 48;
    --surface-deep-rgb: 20, 15, 40;
    --surface-darker-rgb: 16, 12, 34;
    --border-rgb: 50, 42, 85;
    --overlay-rgb: 255, 255, 255;         /* 叠加层色（暗色主题用白色微透） */

    --glass-bg: rgba(var(--surface-rgb), 0.92);
    --glass-bg-hover: rgba(36, 28, 66, 0.95);
    --glass-bg-active: rgba(42, 32, 76, 0.97);
    --glass-border: rgba(var(--border-rgb), 0.80);
    --glass-border-hover: rgba(var(--accent-rgb), 0.50);
    --glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
    --glass-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.55), 0 0 15px rgba(var(--accent-rgb), 0.14);

    --starfield-opacity: 1;

    /* 芯片/徽章在紫微主题下使用紫色调 */
    --chip-gold: #C4B5E0;
    --chip-gold-light: #E5DEF5;
    --chip-gold-dark: #8A7FB5;
    --chip-glow-rgb: 196, 181, 224;
    --chip-glow-light-rgb: 229, 222, 245;
}

/* ===== 玄机墨金 - 深海墨金·暗色奢华 ===== */
html[data-theme="xuanji"] {
    --color-bg: #0D0E14;
    --color-surface: #16181F;
    --color-surface-light: #1E2129;
    --color-gold: #C9B896;
    --color-gold-light: #D4C4A0;
    --color-gold-dark: #8A7E6B;
    --color-red: #8B3A3A;
    --color-red-light: #B05555;
    --color-danger: #C0392B;
    --color-success: #3A9B6E;
    --color-orange: #D4953A;
    --color-text: #D4D0C8;
    --color-muted: #7A7468;
    --color-border: #2A2D35;

    /* 别名变量（兼容页面内联引用，随主题切换） */
    --color-accent: var(--color-gold);
    --color-card: var(--color-surface);
    --color-gold-rgb: 201, 184, 150;
    --color-text-muted: var(--color-muted);

    --accent-rgb: 201, 184, 150;
    --accent-light-rgb: 212, 196, 160;
    --gold-rgb: 201, 184, 150;
    --gold-light-rgb: 212, 196, 160;
    --gold-dark-rgb: 138, 126, 107;
    --bg-rgb: 13, 14, 20;
    --bg-deep-rgb: 13, 14, 20;
    --surface-rgb: 22, 24, 31;
    --surface-deep-rgb: 18, 20, 26;
    --surface-darker-rgb: 15, 16, 22;
    --border-rgb: 42, 45, 53;
    --overlay-rgb: 255, 255, 255;

    --glass-bg: rgba(var(--surface-rgb), 0.92);
    --glass-bg-hover: rgba(30, 33, 41, 0.95);
    --glass-bg-active: rgba(36, 39, 49, 0.97);
    --glass-border: rgba(var(--border-rgb), 0.80);
    --glass-border-hover: rgba(var(--accent-rgb), 0.50);
    --glass-shadow: 0 4px 20px rgba(0, 0, 0, 0.45);
    --glass-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.55), 0 0 15px rgba(var(--accent-rgb), 0.12);

    --starfield-opacity: 1;

    /* 芯片/徽章使用香槟金 */
    --chip-gold: #C9B896;
    --chip-gold-light: #D4C4A0;
    --chip-gold-dark: #8A7E6B;
    --chip-glow-rgb: 201, 184, 150;
    --chip-glow-light-rgb: 212, 196, 160;
}

/* 玄机墨金：面板微光增强 + 边框高光 */
html[data-theme="xuanji"] .method-card,
html[data-theme="xuanji"] .result-section,
html[data-theme="xuanji"] .info-table {
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(201, 184, 150, 0.04);
}
html[data-theme="xuanji"] .mobile-topbar,
html[data-theme="xuanji"] .mobile-drawer,
html[data-theme="xuanji"] .mobile-tabbar {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
/* 玄机墨金：按钮悬停时香槟金辉光 */
html[data-theme="xuanji"] .btn:hover,
html[data-theme="xuanji"] .btn-red:hover {
    box-shadow: 0 0 12px rgba(201, 184, 150, 0.15);
}
/* 玄机墨金：选中态使用香槟金 */
html[data-theme="xuanji"] .method-tab.active,
html[data-theme="xuanji"] .yao-selector-btn.selected,
html[data-theme="xuanji"] .ai-style-btn.active,
html[data-theme="xuanji"] .ai-depth-btn.active,
html[data-theme="xuanji"] .ai-dim-chip.active,
html[data-theme="xuanji"] .ai-persp-chip.active,
html[data-theme="xuanji"] .qn-gender-btn.active,
html[data-theme="xuanji"] .qn-cal-btn.active,
html[data-theme="xuanji"] .method-choice.selected .choice-icon,
html[data-theme="xuanji"] .method-choice.selected .tab-name {
    border-color: rgba(201, 184, 150, 0.5);
}

/* ===== 御品鎏金 - 会员专属·帝王奢华（玄墨绛红 + 鎏金流光 + 朱砂宝气） ===== */
html[data-theme="liujin"] {
    --color-bg: #150D0B;
    --color-surface: #261511;
    --color-surface-light: #35201A;
    --color-gold: #D4AF37;
    --color-gold-light: #F5D67B;
    --color-gold-dark: #8C6D1F;
    --color-red: #A32135;
    --color-red-light: #C43B52;
    --color-danger: #C0392B;
    --color-success: #3A9B6E;
    --color-orange: #D4953A;
    --color-text: #F7EFE2;
    --color-muted: #B79B88;
    --color-border: #5C3A32;

    /* 别名变量（兼容页面内联引用，随主题切换） */
    --color-accent: var(--color-gold);
    --color-card: var(--color-surface);
    --color-gold-rgb: 212, 175, 55;
    --color-text-muted: var(--color-muted);

    --accent-rgb: 212, 175, 55;
    --accent-light-rgb: 245, 214, 123;
    --gold-rgb: 212, 175, 55;
    --gold-light-rgb: 245, 214, 123;
    --gold-dark-rgb: 140, 109, 31;
    --bg-rgb: 21, 13, 11;
    --bg-deep-rgb: 21, 13, 11;
    --surface-rgb: 38, 21, 17;
    --surface-deep-rgb: 31, 17, 14;
    --surface-darker-rgb: 25, 13, 11;
    --border-rgb: 92, 58, 50;
    --overlay-rgb: 255, 255, 255;

    --glass-bg: rgba(var(--surface-rgb), 0.94);
    --glass-bg-hover: rgba(53, 32, 26, 0.96);
    --glass-bg-active: rgba(63, 40, 32, 0.97);
    --glass-border: rgba(var(--border-rgb), 0.85);
    --glass-border-hover: rgba(var(--accent-rgb), 0.55);
    --glass-shadow: 0 4px 24px rgba(0, 0, 0, 0.55), 0 0 12px rgba(212, 175, 55, 0.05);
    --glass-shadow-hover: 0 8px 34px rgba(0, 0, 0, 0.6), 0 0 22px rgba(212, 175, 55, 0.16);

    --starfield-opacity: 1;

    /* 芯片/徽章使用鎏金 */
    --chip-gold: #D4AF37;
    --chip-gold-light: #F5D67B;
    --chip-gold-dark: #8C6D1F;
    --chip-glow-rgb: 212, 175, 55;
    --chip-glow-light-rgb: 245, 214, 123;
}

/* 御品鎏金：背景鎏金辉光（页面底层的帝王金晕） */
html[data-theme="liujin"] body {
    background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(212, 175, 55, 0.10), transparent 60%),
        radial-gradient(ellipse 60% 40% at 50% 110%, rgba(142, 31, 47, 0.10), transparent 65%),
        var(--color-bg);
}
/* 御品鎏金：面板鎏金描边 + 高光 */
html[data-theme="liujin"] .method-card,
html[data-theme="liujin"] .result-section,
html[data-theme="liujin"] .info-table {
    box-shadow:
        0 2px 18px rgba(0, 0, 0, 0.55),
        inset 0 1px 0 rgba(212, 175, 55, 0.10),
        0 0 0 1px rgba(212, 175, 55, 0.12);
}
html[data-theme="liujin"] .mobile-topbar,
html[data-theme="liujin"] .mobile-drawer,
html[data-theme="liujin"] .mobile-tabbar {
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(212, 175, 55, 0.12);
}
/* 御品鎏金：标题鎏金渐变 */
html[data-theme="liujin"] .page-header h1,
html[data-theme="liujin"] .result-section h2,
html[data-theme="liujin"] .ai-section h2,
html[data-theme="liujin"] #result-area h2,
html[data-theme="liujin"] #ai-container h2,
html[data-theme="liujin"] .cast-result h2 {
    background: linear-gradient(120deg, #F5D67B 0%, #D4AF37 45%, #F8E7A8 70%, #B8912B 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #D4AF37;
}
/* 御品鎏金：按钮鎏金悬停辉光 */
html[data-theme="liujin"] .btn:hover,
html[data-theme="liujin"] .btn:active {
    box-shadow: 0 0 18px rgba(212, 175, 55, 0.30), 0 0 0 1px rgba(212, 175, 55, 0.40);
}
html[data-theme="liujin"] .btn-red:hover,
html[data-theme="liujin"] .btn-red:active {
    box-shadow: 0 0 16px rgba(192, 57, 74, 0.35);
}
/* 御品鎏金：选中态鎏金描边 */
html[data-theme="liujin"] .method-tab.active,
html[data-theme="liujin"] .yao-selector-btn.selected,
html[data-theme="liujin"] .ai-style-btn.active,
html[data-theme="liujin"] .ai-depth-btn.active,
html[data-theme="liujin"] .ai-persp-chip.active,
html[data-theme="liujin"] .qn-gender-btn.active,
html[data-theme="liujin"] .qn-cal-btn.active,
html[data-theme="liujin"] .method-choice.selected .choice-icon,
html[data-theme="liujin"] .method-choice.selected .tab-name {
    border-color: rgba(212, 175, 55, 0.60);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.18);
}
/* 御品鎏金：输入框聚焦鎏金 */
html[data-theme="liujin"] .form-group input:focus,
html[data-theme="liujin"] .form-group select:focus,
html[data-theme="liujin"] .form-group textarea:focus {
    border-color: rgba(212, 175, 55, 0.65);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.12), 0 0 14px rgba(212, 175, 55, 0.15);
}
/* 御品鎏金：链接鎏金 */
html[data-theme="liujin"] a { color: #E8C565; }
html[data-theme="liujin"] a:hover { color: #F5D67B; }
/* 御品鎏金：顶部栏/标签栏底部鎏金饰线 */
html[data-theme="liujin"] .mobile-topbar::after,
html[data-theme="liujin"] .mobile-tabbar::before {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.55), transparent);
    pointer-events: none;
}
html[data-theme="liujin"] .mobile-tabbar::before { top: 0; }
html[data-theme="liujin"] .mobile-topbar::after { bottom: 0; }

/* ---------- 御品鎏金 · 帝王差异化层（与知微金拉开显著差距） ---------- */

/* 1) 绛红玄墨底：菱格织锦 + 帝王金晕 + 朱砂宝气（无紫色） */
html[data-theme="liujin"] body {
    background:
        repeating-linear-gradient(45deg,  rgba(212, 175, 55, 0.022) 0 2px, transparent 2px 26px),
        repeating-linear-gradient(-45deg, rgba(212, 175, 55, 0.022) 0 2px, transparent 2px 26px),
        radial-gradient(ellipse 90% 55% at 50% -12%, rgba(212, 175, 55, 0.14), transparent 62%),
        radial-gradient(ellipse 70% 45% at 50% 112%, rgba(163, 33, 53, 0.22), transparent 66%),
        radial-gradient(ellipse 45% 30% at 12% 42%, rgba(120, 30, 34, 0.10), transparent 72%),
        linear-gradient(185deg, #1C0F0C 0%, #150D0B 42%, #100908 100%);
    background-attachment: fixed;
}

/* 2) 顶栏 / 抽屉 / 底栏：绛红漆器 + 金箔压边 */
html[data-theme="liujin"] .mobile-topbar {
    background: linear-gradient(180deg, #31180F 0%, #241009 55%, #1B0B07 100%);
    border-bottom: 1px solid rgba(212, 175, 55, 0.45);
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(212, 175, 55, 0.22);
}
html[data-theme="liujin"] .mobile-drawer {
    background: linear-gradient(200deg, #2D150E 0%, #221009 60%, #180A06 100%);
    border-right: 1px solid rgba(212, 175, 55, 0.40);
}
html[data-theme="liujin"] .mobile-tabbar {
    background: linear-gradient(0deg, #31180F 0%, #26120A 60%, #1B0B07 100%);
    border-top: 1px solid rgba(212, 175, 55, 0.45);
    box-shadow: 0 -3px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(212, 175, 55, 0.20);
}
/* 底栏 Tab 激活态：宫墙红宝印 */
html[data-theme="liujin"] .mobile-tabbar .tab-item.active i { color: #F5D67B; }
html[data-theme="liujin"] .mobile-tabbar .tab-item.active .tab-label { color: #F5D67B; }
html[data-theme="liujin"] .mobile-tabbar .tab-item.active::before {
    background: linear-gradient(90deg, transparent, #A32135 30%, #F5D67B 50%, #A32135 70%, transparent);
}

/* 3) 主按钮：鎏金实心（知微金为描边样式，鎏金为金箔实心，差异显著）
      渐变暗端提亮，确保深棕图标/文字在整个按钮面上对比均匀 */
html[data-theme="liujin"] .btn {
    background: linear-gradient(160deg, #F7DA82 0%, #DDB43C 42%, #C9992F 72%, #E9CD6C 100%);
    border: 1px solid rgba(245, 214, 123, 0.85);
    color: #1F0D02 !important;
    font-weight: 700;
    text-shadow: 0 1px 0 rgba(255, 244, 214, 0.55);
    box-shadow: 0 3px 14px rgba(212, 175, 55, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
html[data-theme="liujin"] .btn:hover {
    background: linear-gradient(160deg, #FCE69B 0%, #E4C04C 42%, #CFA435 72%, #F2D475 100%);
    box-shadow: 0 5px 22px rgba(212, 175, 55, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55);
}
html[data-theme="liujin"] .btn:active { transform: translateY(1px); }
html[data-theme="liujin"] .btn-red {
    background: linear-gradient(165deg, #A83248 0%, #8E1F33 48%, #6E1626 100%);
    border: 1px solid rgba(245, 214, 123, 0.40);
    color: #FBEDEE !important;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
    box-shadow: 0 3px 14px rgba(110, 22, 38, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}
html[data-theme="liujin"] .btn-red:hover {
    background: linear-gradient(165deg, #BC4058 0%, #A02A3F 48%, #7E1B2D 100%);
}
/* 描边危险按钮（注销账号）：鎏金主题下保持描边红语义，不被金实心覆盖 */
html[data-theme="liujin"] .btn-outline-red {
    background: transparent !important;
    border: 1px solid rgba(196, 59, 82, 0.75) !important;
    color: #E8A5B0 !important;
    text-shadow: none;
    box-shadow: none;
}
html[data-theme="liujin"] .btn-outline-red:hover {
    background: rgba(163, 33, 53, 0.18) !important;
}
/* 5) 分享按钮（分享结果/分享解读）：与"重新起卦"主按钮完全同款金箔样式
      （.text-center.mt-2 > .btn-share 特异性更高、AI分享按钮带内联样式，故需 !important 统一） */
html[data-theme="liujin"] .btn-share,
html[data-theme="liujin"] a.btn-share,
html[data-theme="liujin"] .text-center.mt-2 > .btn-share,
html[data-theme="liujin"] .text-center.mt-2 > a.btn-share,
html[data-theme="liujin"] .ai-share-btn {
    background: linear-gradient(160deg, #F7DA82 0%, #DDB43C 42%, #C9992F 72%, #E9CD6C 100%) !important;
    border: 1px solid rgba(245, 214, 123, 0.85) !important;
    color: #1F0D02 !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 0 rgba(255, 244, 214, 0.55) !important;
    box-shadow: 0 3px 14px rgba(212, 175, 55, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}
html[data-theme="liujin"] .btn-share:hover,
html[data-theme="liujin"] a.btn-share:hover,
html[data-theme="liujin"] .text-center.mt-2 > .btn-share:hover,
html[data-theme="liujin"] .text-center.mt-2 > a.btn-share:hover,
html[data-theme="liujin"] .ai-share-btn:hover {
    background: linear-gradient(160deg, #FCE69B 0%, #E4C04C 42%, #CFA435 72%, #F2D475 100%) !important;
    border-color: rgba(245, 214, 123, 0.95) !important;
    color: #1F0D02 !important;
    box-shadow: 0 5px 22px rgba(212, 175, 55, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.55) !important;
}

/* 4) 标题鎏金流光扫过（鎏金独有动效） */
@keyframes ljShimmer {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
html[data-theme="liujin"] .page-header h1,
html[data-theme="liujin"] .result-section h2,
html[data-theme="liujin"] .ai-section h2,
html[data-theme="liujin"] #result-area h2,
html[data-theme="liujin"] #ai-container h2,
html[data-theme="liujin"] .cast-result h2 {
    background-size: 250% auto;
    animation: ljShimmer 6s linear infinite;
    letter-spacing: 0.08em;
    /* 性能优化：流光为 background-position 动画（重绘型），contain 将重绘范围
       隔离在标题元素自身，避免扩散到整页布局与绘制（御品鎏金重度优化） */
    contain: layout paint;
}
/* 页头：双线描金 + 宫墙红宝点 */
html[data-theme="liujin"] .page-header {
    border-bottom: none;
    background: none;
    position: relative;
    padding-bottom: 0.9rem;
}
html[data-theme="liujin"] .page-header::after {
    content: '';
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: 0;
    height: 5px;
    background:
        radial-gradient(circle at 50% 50%, #A32135 0 2.2px, #F5D67B 2.2px 4px, transparent 4.2px) center / 14px 5px no-repeat,
        linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.85) 18%, rgba(212, 175, 55, 0.85) 82%, transparent) center / 100% 1px no-repeat,
        linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.35) 22%, rgba(212, 175, 55, 0.35) 78%, transparent) center / 100% 100% no-repeat;
    pointer-events: none;
}
html[data-theme="liujin"] .page-header .page-subtitle { color: #B39B7D; letter-spacing: 0.32em; }

/* 5) 卡片：外离式描金双线框（御赐诏书裱框效果） */
html[data-theme="liujin"] .method-card,
html[data-theme="liujin"] .result-section,
html[data-theme="liujin"] .info-table,
html[data-theme="liujin"] .credits-card {
    outline: 1px solid rgba(212, 175, 55, 0.30);
    outline-offset: 4px;
}
html[data-theme="liujin"] .method-card:hover,
html[data-theme="liujin"] .result-section:hover {
    outline-color: rgba(212, 175, 55, 0.60);
}

/* 6) 金色滚动条 + 奶金选区 */
html[data-theme="liujin"] ::selection { background: rgba(212, 175, 55, 0.38); color: #FFF8E1; }
html[data-theme="liujin"] ::-webkit-scrollbar { width: 9px; height: 9px; }
html[data-theme="liujin"] ::-webkit-scrollbar-track { background: #150D0B; }
html[data-theme="liujin"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #8C6D1F, #D4AF37);
    border-radius: 8px;
    border: 2px solid #150D0B;
}

/* 7) 桌面导航：金底宝座式激活态 */
html[data-theme="liujin"] .desktop-nav {
    background: rgba(42, 18, 14, 0.75);
    border: 1px solid rgba(212, 175, 55, 0.35);
}
html[data-theme="liujin"] .desktop-nav-item.active {
    background: linear-gradient(160deg, rgba(212, 175, 55, 0.30), rgba(163, 33, 53, 0.22));
    box-shadow: inset 0 -2px 0 #D4AF37;
    color: #F5D67B;
}
html[data-theme="liujin"] .desktop-nav-item:hover { color: #F5D67B; }

/* 8) 输入控件：鎏金内衬 */
html[data-theme="liujin"] .form-group input,
html[data-theme="liujin"] .form-group select,
html[data-theme="liujin"] .form-group textarea {
    background: rgba(30, 15, 12, 0.92);
}
html[data-theme="liujin"] .form-group input:focus,
html[data-theme="liujin"] .form-group select:focus,
html[data-theme="liujin"] .form-group textarea:focus {
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.16), 0 0 16px rgba(212, 175, 55, 0.20), inset 0 0 12px rgba(212, 175, 55, 0.05);
}

/* 8.5) 图标可见性修复：鎏金主题下"金图标 + 金调底"对比不足 → 统一提亮为亮金并加微光晕 */
/* 首页术法卡片图标 */
html[data-theme="liujin"] .method-card .card-icon {
    color: #F8E7A8;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.40), 0 1px 2px rgba(0, 0, 0, 0.6);
}
/* 术法选择列表图标与勾选标记 */
html[data-theme="liujin"] .method-choice .choice-icon {
    color: #F8E7A8;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.30);
}
html[data-theme="liujin"] .method-choice .choice-check {
    color: #F8E7A8;
    text-shadow: 0 0 6px rgba(212, 175, 55, 0.35);
}
/* 结果/资料卡片内的小图标 */
html[data-theme="liujin"] .result-section h2 i,
html[data-theme="liujin"] .ai-section h2 i,
html[data-theme="liujin"] .info-table i,
html[data-theme="liujin"] .credits-card i,
html[data-theme="liujin"] .daily-fortune h2 i,
html[data-theme="liujin"] .section-title i {
    color: #F5D67B;
    text-shadow: 0 0 8px rgba(212, 175, 55, 0.30);
}
/* 金底实心按钮内图标：深棕刻印 + 金面高光刻痕（提高与金箔底色的对比）
   !important：压制 header.php 内联样式块 .text-center.mt-2 .btn i / .btn-share i 的通用金色规则（其特异性更高） */
html[data-theme="liujin"] .btn i,
html[data-theme="liujin"] .btn-share i,
html[data-theme="liujin"] a.btn-share i,
html[data-theme="liujin"] .ai-share-btn i,
html[data-theme="liujin"] .text-center.mt-2 .btn i,
html[data-theme="liujin"] .result-section .btn i,
html[data-theme="liujin"] .ai-section .btn i {
    color: #1F0D02 !important;
    text-shadow: 0 1px 0 rgba(255, 244, 214, 0.55) !important;
}
/* 登录页游客体验按钮（试试小六壬/雷诺曼）图标：同款深棕刻印（!important 压制 gate.php 内联金色规则） */
html[data-theme="liujin"] .guest-trial-btn i {
    color: #1F0D02 !important;
    text-shadow: 0 1px 0 rgba(255, 244, 214, 0.55) !important;
}
/* 绛红实心按钮内图标提亮（!important 同理压制内联 .text-center.mt-2 .btn-red i 规则） */
html[data-theme="liujin"] .btn-red i,
html[data-theme="liujin"] .text-center.mt-2 .btn-red i { color: #FBEDEE !important; }
/* 底部 Tab 未选中图标：暖亮金 + 暗描边，与暗棕底拉开层次 */
html[data-theme="liujin"] .mobile-tabbar .tab-item i {
    color: #D9BC7A;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}
html[data-theme="liujin"] .mobile-tabbar .tab-item.active i {
    color: #F5D67B;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.55);
}
/* 中心「全部」按钮：金色圆底上改深棕刻印，避免金叠金看不清 */
html[data-theme="liujin"] .mobile-tabbar .tab-center .tab-center-icon,
html[data-theme="liujin"] .mobile-tabbar .tab-center .tab-center-icon i {
    color: #2D1508;
    text-shadow: 0 1px 0 rgba(255, 240, 200, 0.5);
}
html[data-theme="liujin"] .mobile-tabbar .tab-center .tab-label {
    color: #D9BC7A;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
}
/* 桌面导航图标与副标题提亮 */
html[data-theme="liujin"] .desktop-nav-item i { color: #E8C565; }
html[data-theme="liujin"] .page-header .page-subtitle { color: #D4AF37; letter-spacing: 0.32em; }

/* 9) 主题选择器色卡同步为绛红漆器+金 */
.swatch-liujin {
    background:
        radial-gradient(circle at 30% 25%, rgba(212, 175, 55, 0.55), transparent 55%),
        linear-gradient(150deg, #31180F 0%, #150D0B 70%) !important;
    border: 1px solid rgba(212, 175, 55, 0.55) !important;
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

*, *::before, *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Universal button reset — prevent mobile browsers from applying native white button styling */
button {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background: transparent;
    border: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

html {
    scroll-behavior: auto;
    font-size: 16px;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* 禁止双指缩放 */
    touch-action: pan-x pan-y;
    -ms-touch-action: pan-x pan-y;
}

body {
    font-family: var(--font-body);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.7;
    min-height: 100vh;
    overflow-x: hidden;
    /* Padding for top bar + bottom tab bar */
    padding-top: calc(var(--topbar-h) + var(--safe-top));
    padding-bottom: calc(var(--tabbar-h) + var(--safe-bottom));
}

/* ===== 页面入场过渡（全主题统一）=====
   page-ready 后内容淡入，消除页面切换时的生硬跳变与"内容突然弹出"；
   纯 opacity 动画走合成器，不触发重排，fixed 定位的顶栏/底栏不受影响 */
@keyframes zwgPageIn { from { opacity: 0; } to { opacity: 1; } }
.page-ready body { animation: zwgPageIn 0.3s ease-out both; }
/* 20260915h：移动端轻量内容抬升 —— 纯 transform+opacity 合成器动画，
   替代桌面 qnInkIn/fadeInUp 的 filter:blur 与 0.4s+ 错峰延迟版本
   （blur 逐帧重绘是真机卡顿根源，长延迟是「标题迟现」根源） */
@keyframes zwgMobileRise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ===== 跨文档视图过渡（Chromium 渐进增强，20260915g）=====
   打开任意功能时由浏览器原生完成"旧页保持 → 交叉淡化 → 新页"，旧页
   快照在导航瞬间即上屏，同时掩盖新页的网络加载白屏；再与上面的
   page-ready 入场动画接力。Firefox/Safari 等暂不支持的浏览器自动忽略
   本规则，仍有入场淡入兜底，行为无回退。系统开启"减少动态效果"时禁用
   （下方 9628 区的全局 reduced-motion 兜底同样作用于入场动画）。 */
/* VT-DISABLED-FOR-EXPERIMENT */

/* Subtle starfield texture */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(var(--accent-rgb), 0.15), transparent),
        radial-gradient(1px 1px at 60% 70%, rgba(var(--accent-rgb), 0.10), transparent),
        radial-gradient(1px 1px at 80% 10%, rgba(var(--accent-rgb), 0.12), transparent),
        radial-gradient(1px 1px at 40% 90%, rgba(var(--accent-rgb), 0.08), transparent),
        radial-gradient(1px 1px at 10% 50%, rgba(var(--accent-rgb), 0.10), transparent);
    background-size: 250px 250px;
    pointer-events: none;
    z-index: 0;
    opacity: var(--starfield-opacity, 1);
    transition: opacity 0.5s ease;
}

a { color: var(--color-gold-light); text-decoration: none; transition: color var(--transition); }

/* ============================================
   MOBILE TOP BAR
   ============================================ */
.mobile-topbar {
    position: fixed;
    top: var(--safe-top);
    left: 0;
    right: 0;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.7rem;
    background: rgba(var(--surface-deep-rgb), 0.95);
    border-bottom: 1px solid var(--color-border);
    z-index: 1000;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-gold);
    letter-spacing: 0.06em;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}
.topbar-brand svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--color-gold); }
.topbar-brand-name { font-family: var(--font-display); letter-spacing: 0.06em; }

/* Topbar logo — 品牌图标，高清 logo 四主题适配 */
.topbar-logo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    border: 1.5px solid rgba(var(--accent-rgb), 0.5);
    box-shadow:
        0 0 0 3px rgba(var(--accent-rgb), 0.06),
        0 0 10px rgba(var(--accent-rgb), 0.15);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.topbar-brand:hover .topbar-logo {
    border-color: rgba(var(--accent-rgb), 0.75);
    box-shadow:
        0 0 0 3px rgba(var(--accent-rgb), 0.10),
        0 0 14px rgba(var(--accent-rgb), 0.25);
}
/* 太极明色主题：浅色背景上加深圆环与投影 */
html[data-theme="taiji"] .topbar-logo {
    border-color: rgba(var(--accent-rgb), 0.4);
    box-shadow:
        0 0 0 3px rgba(var(--accent-rgb), 0.04),
        0 1px 8px rgba(0, 0, 0, 0.15);
}
html[data-theme="taiji"] .topbar-brand:hover .topbar-logo {
    border-color: rgba(var(--accent-rgb), 0.65);
    box-shadow:
        0 0 0 3px rgba(var(--accent-rgb), 0.08),
        0 2px 12px rgba(0, 0, 0, 0.2);
}
/* 紫微星辰主题 */
html[data-theme="ziwei"] .topbar-logo {
    border-color: rgba(var(--accent-rgb), 0.55);
    box-shadow:
        0 0 0 3px rgba(var(--accent-rgb), 0.08),
        0 0 12px rgba(var(--accent-rgb), 0.2);
}
/* 玄机墨金主题 */
html[data-theme="xuanji"] .topbar-logo {
    border-color: rgba(var(--accent-rgb), 0.5);
    box-shadow:
        0 0 0 3px rgba(var(--accent-rgb), 0.07),
        0 0 11px rgba(var(--accent-rgb), 0.18);
}
/* 御品鎏金主题：帝王金辉光 */
html[data-theme="liujin"] .topbar-logo {
    border-color: rgba(212, 175, 55, 0.65);
    box-shadow:
        0 0 0 3px rgba(212, 175, 55, 0.12),
        0 0 16px rgba(212, 175, 55, 0.35),
        inset 0 0 6px rgba(212, 175, 55, 0.10);
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* Icon buttons — 40px touch target */
.topbar-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--color-surface-light);
    border: 1px solid var(--color-border);
    color: var(--color-gold-light, #E8C77E);
    font-size: 0.95rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: all var(--transition);
    text-decoration: none;
}
.topbar-icon-btn:hover, .topbar-icon-btn:active {
    border-color: var(--color-gold);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.2);
    color: var(--color-gold-light);
}

/* ============================================
   主题切换按钮「灵珠」（重设计 v2）
   - 珠核：当前主题配色的琉璃预览球（随主题实时换色）
   - 星轨：缓慢公转的虚线环，隐喻周天星斗
   - 灵光：右上四芒星呼吸微闪
   - 菜单：OS 式迷你界面色卡 + 弹性逐条入场
   ============================================ */
.theme-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--color-surface-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition),
        transform 180ms ease;
}
.theme-btn:hover, .theme-btn:active {
    border-color: rgba(var(--accent-rgb), 0.65);
    box-shadow:
        0 0 0 3px rgba(var(--accent-rgb), 0.10),
        0 0 16px rgba(var(--accent-rgb), 0.26);
}
.theme-btn:active { transform: scale(0.92); }
/* 菜单展开态：按钮点亮 */
.theme-btn.theme-btn-open {
    border-color: rgba(var(--accent-rgb), 0.7);
    background: rgba(var(--accent-rgb), 0.08);
    box-shadow:
        0 0 0 3px rgba(var(--accent-rgb), 0.12),
        0 0 18px rgba(var(--accent-rgb), 0.3);
}

/* --- 珠核：当前主题琉璃预览球 --- */
.theme-orb {
    position: relative;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.theme-orb-core {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%,
        var(--orb-hi, #E8C77E),
        var(--orb-mid, #C9A961) 42%,
        var(--orb-lo, #0A0A0F) 84%);
    box-shadow:
        0 0 8px rgba(var(--accent-rgb), 0.35),
        inset 0 -1px 2px rgba(0, 0, 0, 0.45),
        inset 0 1px 1px rgba(255, 255, 255, 0.28);
}
/* 切换主题瞬间：脉冲灵光放大，掩盖渐变瞬切 */
.theme-orb-core.orb-pulse { animation: orbPulse 640ms var(--ease-spring); }
@keyframes orbPulse {
    0%   { transform: scale(1);   box-shadow: 0 0 0 rgba(var(--accent-rgb), 0); }
    35%  { transform: scale(1.4);  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.7); }
    100% { transform: scale(1);   box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.35); }
}

/* --- 星轨：缓慢公转的虚线环 --- */
.theme-orb-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--color-gold-light, #E8C77E);
    opacity: 0.75;
    animation: orbRingSpin 16s linear infinite;
}
.theme-btn:hover .theme-orb-ring,
.theme-btn.theme-btn-open .theme-orb-ring { opacity: 1; }
@keyframes orbRingSpin { to { transform: rotate(360deg); } }

/* --- 灵光：右上四芒星微闪 --- */
.theme-orb-spark {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 6px;
    height: 6px;
    background: var(--color-gold-light, #E8C77E);
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    animation: orbSparkTwinkle 2.8s ease-in-out infinite;
}
@keyframes orbSparkTwinkle {
    0%, 100% { opacity: 0.25; transform: scale(0.65); }
    50%      { opacity: 1;    transform: scale(1.05); }
}

/* Theme switcher */
.theme-switcher { position: relative; }

/* --- 主题菜单面板：自右上角弹性展开 --- */
.theme-menu {
    position: absolute;
    top: calc(100% + 0.55rem);
    right: 0;
    width: 252px;
    background: rgba(var(--surface-darker-rgb), 0.97);
    border: 1px solid rgba(var(--accent-rgb), 0.22);
    border-radius: var(--radius-lg);
    padding: 0.4rem;
    box-shadow:
        0 18px 50px rgba(0, 0, 0, 0.55),
        0 4px 14px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(var(--overlay-rgb), 0.05);
    z-index: 1002;
    transform-origin: top right;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px) scale(0.94);
    transition:
        opacity 220ms var(--ease-out-expo),
        transform 280ms var(--ease-spring),
        visibility 0s linear 280ms;
    -webkit-tap-highlight-color: transparent;
}
.theme-menu-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition:
        opacity 180ms var(--ease-out-expo),
        transform 260ms var(--ease-spring),
        visibility 0s;
}

/* 菜单头部：标题 + 当前主题指示 */
.theme-menu-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.35rem 0.6rem 0.55rem;
    margin-bottom: 0.2rem;
    border-bottom: 1px solid rgba(var(--border-rgb), 0.65);
}
.theme-menu-title {
    font-family: var(--font-display);
    font-size: 0.64rem;
    letter-spacing: 0.26em;
    color: var(--color-muted);
    text-transform: uppercase;
    white-space: nowrap;
}
.theme-menu-current {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 150px;
    font-size: 0.75rem;
    color: var(--color-gold-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.theme-menu-current::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-gold);
    box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.8);
    flex-shrink: 0;
}

.theme-menu-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-top: 0.15rem;
}

/* 主题选项行 */
.theme-option {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    min-height: 48px;
    padding: 0.42rem 0.5rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 0.88rem;
    cursor: pointer;
    transition: background 200ms ease, border-color 200ms ease, color 200ms ease;
    text-align: left;
}
.theme-option:hover, .theme-option:active {
    background: rgba(var(--accent-rgb), 0.07);
    border-color: rgba(var(--accent-rgb), 0.2);
    color: var(--color-gold-light);
}
.theme-option.active {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.16), rgba(var(--accent-rgb), 0.05));
    border-color: rgba(var(--accent-rgb), 0.38);
    color: var(--color-gold);
    font-weight: 600;
}
.theme-name {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 迷你界面色卡：主题底色画布 + 卡片面 + 点睛灵珠 */
.theme-preview {
    position: relative;
    width: 46px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 7px;
    overflow: hidden;
    background: var(--pv-bg);
    border: 1px solid rgba(var(--overlay-rgb), 0.18);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
    transition: transform 280ms var(--ease-spring);
}
.theme-option:hover .theme-preview,
.theme-option.active .theme-preview { transform: scale(1.06); }
/* 卡片面（表面层） */
.theme-preview::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 5px;
    width: 20px;
    height: 13px;
    border-radius: 3px;
    background: var(--pv-surface);
}
/* 点睛灵珠（主题主色，与按钮灵珠同源） */
.theme-preview::after {
    content: '';
    position: absolute;
    right: 6px;
    bottom: 5px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, var(--pv-hi), var(--pv-accent) 75%);
    box-shadow: 0 0 5px var(--pv-accent);
}
.pv-zhiwei { --pv-bg: #0A0A0F; --pv-surface: #242430; --pv-accent: #C9A961; --pv-hi: #E8C77E; }
.pv-taiji  { --pv-bg: #F5F1E8; --pv-surface: #FFFFFF; --pv-accent: #2B2B2B; --pv-hi: #6A6258; }
.pv-ziwei  { --pv-bg: #0B0820; --pv-surface: #241C42; --pv-accent: #C4B5E0; --pv-hi: #E5DEF5; }
.pv-xuanji { --pv-bg: #0D0E14; --pv-surface: #262B38; --pv-accent: #C9B896; --pv-hi: #D4C4A0; }
.pv-zhusha { --pv-bg: #F7F4F0; --pv-surface: #FFFFFF; --pv-accent: #B83A2A; --pv-hi: #C05240; }
.pv-liujin {
    --pv-bg: #150D0B; --pv-surface: #35201A; --pv-accent: #D4AF37; --pv-hi: #F5D67B;
    background: radial-gradient(circle at 30% 22%, rgba(212, 175, 55, 0.4), transparent 62%), #150D0B;
    border-color: rgba(212, 175, 55, 0.5);
}

/* 选中态对勾（弹性缩放入场） */
.theme-check {
    font-size: 0.72rem;
    color: var(--color-gold-light);
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 220ms var(--ease-out-expo), transform 300ms var(--ease-spring);
    flex-shrink: 0;
}
.theme-option.active .theme-check { opacity: 1; transform: scale(1); }

/* 菜单展开：选项逐条弹性入场 */
.theme-menu-open .theme-menu-list .theme-option { animation: themeOptIn 360ms var(--ease-spring) backwards; }
.theme-menu-open .theme-menu-list .theme-option:nth-child(1) { animation-delay: 45ms; }
.theme-menu-open .theme-menu-list .theme-option:nth-child(2) { animation-delay: 85ms; }
.theme-menu-open .theme-menu-list .theme-option:nth-child(3) { animation-delay: 125ms; }
.theme-menu-open .theme-menu-list .theme-option:nth-child(4) { animation-delay: 165ms; }
.theme-menu-open .theme-menu-list .theme-option:nth-child(5) { animation-delay: 205ms; }
@keyframes themeOptIn {
    from { opacity: 0; transform: translateY(-7px); }
}

/* 会员专属主题选项（御品鎏金） */
.theme-option-member {
    border: 1px solid rgba(212, 175, 55, 0.32);
    margin-top: 3px;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.07), rgba(142, 31, 47, 0.06));
}
.theme-option-member:hover, .theme-option-member:active {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(142, 31, 47, 0.10));
    border-color: rgba(212, 175, 55, 0.55);
}
.theme-option-member.active {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(142, 31, 47, 0.12));
    border-color: rgba(212, 175, 55, 0.75);
    box-shadow: 0 0 12px rgba(212, 175, 55, 0.16);
}
.theme-member-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.22rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #F5D67B;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.22), rgba(142, 31, 47, 0.25));
    border: 1px solid rgba(212, 175, 55, 0.55);
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
}
.theme-member-tag i { font-size: 0.58rem; color: #F5D67B; }
/* 非会员：主题选项降为不可用态 */
.theme-option-member.theme-locked {
    opacity: 0.55;
}
.theme-option-member.theme-locked .theme-member-tag {
    color: #B09A72;
    border-color: rgba(176, 154, 114, 0.45);
    background: rgba(120, 100, 70, 0.12);
}
.theme-option-member.theme-locked .theme-member-tag i { color: #B09A72; }
/* 太极水墨：主题菜单为浅底，会员标签改用深鎏金保证可读 */
html[data-theme="taiji"] .theme-member-tag {
    color: #6B5210;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.35), rgba(140, 109, 31, 0.18));
    border-color: rgba(140, 109, 31, 0.65);
}
html[data-theme="taiji"] .theme-member-tag i { color: #8C6D1F; }
html[data-theme="taiji"] .theme-option-member {
    border-color: rgba(140, 109, 31, 0.45);
}
html[data-theme="taiji"] .theme-option-member.active {
    border-color: rgba(140, 109, 31, 0.75);
}
/* 太极浅底：菜单投影改暖褐色调、边界加深 */
html[data-theme="taiji"] .theme-menu {
    border-color: rgba(43, 43, 43, 0.35);
    box-shadow:
        0 18px 50px rgba(60, 50, 30, 0.25),
        0 4px 14px rgba(60, 50, 30, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ============================================
   MOBILE DRAWER (Slide-out menu)
   ============================================ */
.drawer-mask {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 1001;
    pointer-events: none;
    transition: background 0.3s ease;
}
body.nav-open .drawer-mask {
    background: rgba(0, 0, 0, 0.6);
    pointer-events: auto;
}

.mobile-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 82%;
    max-width: 340px;
    background: rgba(var(--surface-darker-rgb), 0.98);
    border-left: 1px solid var(--color-border);
    box-shadow: -4px 0 30px rgba(0, 0, 0, 0.5);
    z-index: 1002;
    transform: translateX(100%);
    transition: transform 0.35s var(--ease-out-expo);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
body.nav-open .mobile-drawer {
    transform: translateX(0);
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: calc(var(--safe-top) + 0.8rem) 1rem 0.8rem;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.drawer-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-gold);
    letter-spacing: 0.08em;
}
.drawer-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--color-surface-light);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font-size: 1rem;
    cursor: pointer;
    border-radius: var(--radius-sm);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: all var(--transition);
}
.drawer-close:active { transform: scale(0.92); }

.drawer-nav {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem 0.6rem calc(var(--safe-bottom) + 1rem);
}

.drawer-group {
    margin-bottom: 0.8rem;
}
.drawer-group-title {
    font-family: var(--font-display);
    font-size: 0.72rem;
    color: var(--color-muted);
    letter-spacing: 0.15em;
    padding: 0.6rem 0.5rem 0.3rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 0.3rem;
}
.drawer-group-items {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
}
.drawer-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 44px;
    padding: 0.5rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    background: rgba(var(--surface-rgb), 0.4);
    border: 1px solid var(--color-border);
    font-size: 0.85rem;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: all var(--transition);
}
.drawer-item i {
    color: var(--color-gold);
    font-size: 0.9rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.drawer-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.drawer-free-badge {
    font-size: 0.6rem;
    background: rgb(var(--accent-rgb));
    color: var(--color-bg);
    padding: 1px 5px;
    border-radius: 3px;
    flex-shrink: 0;
}
.drawer-item:active,
.drawer-item.active {
    color: var(--color-gold);
    background: rgba(var(--accent-rgb), 0.15);
    border-color: var(--color-gold-dark);
}
/* 点击反馈：边框高亮 + 光晕 */
.drawer-item.drawer-item-clicked {
    border-color: var(--color-gold) !important;
    background: rgba(var(--accent-rgb), 0.18) !important;
    box-shadow:
        0 0 0 1px var(--color-gold),
        0 0 16px rgba(var(--accent-rgb), 0.4) !important;
    transform: scale(0.97);
    transition: none !important;
}

/* Tab center button (全部) — 玄金太极印 */
.mobile-tabbar .tab-center {
    background: none;
    border: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}
.tab-center-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    flex-shrink: 0;
    background:
        radial-gradient(circle at 40% 28%,
            rgba(var(--gold-light-rgb), 0.98) 0%,
            rgba(var(--gold-rgb), 0.9) 45%,
            rgba(var(--gold-dark-rgb), 0.85) 100%);
    color: rgba(var(--bg-rgb), 0.92);
    font-size: 0.95rem;
    box-shadow:
        0 4px 14px rgba(var(--accent-rgb), 0.3),
        0 2px 6px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.36),
        inset 0 -1px 2px rgba(0, 0, 0, 0.1);
    margin-bottom: 2px;
    margin-top: -12px;
    position: relative;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.tab-center-icon i {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 2;
    position: relative;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
/* 外环光晕 — conic gradient 轨道 */
.tab-center-icon::before {
    content: '';
    position: absolute;
    inset: -5px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(var(--gold-rgb), 0) 0deg,
        rgba(var(--gold-rgb), 0.18) 80deg,
        rgba(var(--gold-rgb), 0.35) 140deg,
        rgba(var(--gold-rgb), 0.1) 200deg,
        rgba(var(--gold-rgb), 0.22) 280deg,
        rgba(var(--gold-rgb), 0) 360deg
    );
    -webkit-mask: radial-gradient(circle, transparent 56%, black 58%);
    mask: radial-gradient(circle, transparent 56%, black 58%);
    pointer-events: none;
    animation: tabCenterOrbit 10s linear infinite;
    opacity: 0.7;
}
/* 内层金线 */
.tab-center-icon::after {
    content: '';
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    pointer-events: none;
    z-index: 1;
}
@keyframes tabCenterOrbit {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.mobile-tabbar .tab-center:hover .tab-center-icon {
    box-shadow:
        0 6px 20px rgba(var(--accent-rgb), 0.4),
        0 3px 8px rgba(0, 0, 0, 0.4),
        0 0 16px rgba(var(--gold-rgb), 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 2px rgba(0, 0, 0, 0.08);
}
.mobile-tabbar .tab-center:hover .tab-center-icon i {
    transform: rotate(180deg);
}
.tab-center:active .tab-center-icon {
    transform: scale(0.88);
    transition: transform 120ms ease;
    box-shadow:
        0 2px 8px rgba(var(--accent-rgb), 0.22),
        0 1px 4px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* Tabbar spacer — prevents content from being hidden behind tab bar */
.tabbar-spacer {
    height: calc(var(--tabbar-h) + var(--safe-bottom));
    flex-shrink: 0;
}

/* ============================================
   BOTTOM TAB BAR (NEW — qingnang-inspired)
   ============================================ */
.mobile-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--tabbar-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    display: flex;
    align-items: stretch;
    background: rgba(var(--surface-deep-rgb), 0.97);
    border-top: 1px solid var(--color-border);
    z-index: 1000;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.3);
}
.mobile-tabbar .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 6px 0;
    color: var(--color-muted);
    font-size: 0.65rem;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: color 200ms ease;
    position: relative;
    /* 长按自定义支持：阻止 iOS 长按系统菜单/链接预览/拖拽 */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
}
.mobile-tabbar .tab-item i {
    font-size: 1.2rem;
    transition: transform 200ms ease;
}
.mobile-tabbar .tab-label {
    font-size: 0.6rem;
    line-height: 1;
    letter-spacing: 0.02em;
}
.mobile-tabbar .tab-item.active {
    color: var(--color-gold);
}
.mobile-tabbar .tab-item.active i {
    transform: translateY(-2px);
}
.mobile-tabbar .tab-item.active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 2px;
    background: var(--color-gold);
    border-radius: 0 0 2px 2px;
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5);
}
.mobile-tabbar .tab-item:active i {
    transform: scale(0.88);
}
/* 点击回弹反馈（JS 拦截跳转，短暂高亮后再导航） */
.mobile-tabbar .tab-item.tab-clicked {
    color: var(--color-gold) !important;
    transition: none !important;
}
.mobile-tabbar .tab-item.tab-clicked i {
    transform: scale(0.82) !important;
    transition: none !important;
}
.mobile-tabbar .tab-item.tab-clicked::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(var(--accent-rgb), 0.12);
    border-radius: var(--radius-sm);
}

/* Hide tab bar when modal open */
body.modal-open .mobile-tabbar {
    transform: translateY(100%);
    transition: transform 300ms ease;
}

/* ============================================
   CONTAINER & MAIN CONTENT
   ============================================ */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    position: relative;
    z-index: 1;
}

.main-content {
    min-height: calc(100vh - var(--topbar-h) - var(--tabbar-h));
    position: relative;
    overflow-x: hidden;
}

.diagonal-bg { position: relative; }

/* Section divider */
.section-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    padding: 0 1rem;
    height: 40px;
    overflow: hidden;
}
.section-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--color-gold) 50%, transparent);
    transform-origin: left center;
    transform: scaleX(0);
}
.section-divider-line:last-child { transform-origin: right center; }
.section-divider-diamond {
    color: var(--color-gold);
    font-size: 0.9rem;
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
    text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.5);
}
.page-ready .section-divider-line { animation: dividerExtendL 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both; }
.page-ready .section-divider-line:last-child { animation-name: dividerExtendR; }
.page-ready .section-divider-diamond { opacity: 1; transform: scale(1); transition-delay: 1.4s; }
@keyframes dividerExtendL { 0% { transform: scaleX(0); transform-origin: left center; } 100% { transform: scaleX(1); transform-origin: left center; } }
@keyframes dividerExtendR { 0% { transform: scaleX(0); transform-origin: right center; } 100% { transform: scaleX(1); transform-origin: right center; } }

/* ============================================
   HERO LOGO — 首页徽记（zw-emblem 内使用；旧版居中 hero 容器样式已随首页重构清理）
   ============================================ */
.hero-logo {
    display: block;
    margin: 0 auto 0.5rem;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    /* 三层光环：外层主题色弥散 + 中层金色细环 + 内层暗色收边 */
    border: 3px solid rgba(var(--accent-rgb), 0.5);
    box-shadow:
        0 0 0 6px rgba(var(--accent-rgb), 0.08),
        0 0 40px rgba(var(--accent-rgb), 0.2),
        inset 0 0 0 1px rgba(0, 0, 0, 0.3);
    transition: box-shadow var(--transition), border-color var(--transition);
}
/* 太极明色主题：浅色背景上深色 logo 需柔和过渡 */
html[data-theme="taiji"] .hero-logo {
    border-color: rgba(var(--accent-rgb), 0.35);
    box-shadow:
        0 0 0 8px rgba(var(--accent-rgb), 0.06),
        0 2px 24px rgba(0, 0, 0, 0.15),
        inset 0 0 0 1px rgba(0, 0, 0, 0.2);
}
/* 紫微星辰主题：紫金辉光 */
html[data-theme="ziwei"] .hero-logo {
    border-color: rgba(var(--accent-rgb), 0.55);
    box-shadow:
        0 0 0 6px rgba(var(--accent-rgb), 0.10),
        0 0 48px rgba(var(--accent-rgb), 0.25),
        inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}
/* 玄机墨金主题：墨金沉稳辉光 */
html[data-theme="xuanji"] .hero-logo {
    border-color: rgba(var(--accent-rgb), 0.5);
    box-shadow:
        0 0 0 6px rgba(var(--accent-rgb), 0.08),
        0 0 44px rgba(var(--accent-rgb), 0.22),
        inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}
/* 御品鎏金主题：鎏金圣辉 */
html[data-theme="liujin"] .hero-logo {
    border-color: rgba(212, 175, 55, 0.70);
    box-shadow:
        0 0 0 7px rgba(212, 175, 55, 0.10),
        0 0 56px rgba(212, 175, 55, 0.32),
        0 0 100px rgba(212, 175, 55, 0.12),
        inset 0 0 0 1px rgba(0, 0, 0, 0.3);
}
/* Hero legend button — 已由 zw-btn 按钮体系替代，旧样式清理 */

/* ============================================
   METHOD GRID — Bento Organic Layout
   星罗棋布 · Bento 非对称有机排版
   feature(2×2) / wide(2×1) / tall(1×2) / standard(1×1)
   ============================================ */
.method-grid.bento-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-flow: dense;
    gap: 0.6rem;
    padding: 0.5rem 0;
    overflow: visible;
}

/* ---- Card Base ---- */
.method-card {
    background: rgba(var(--surface-deep-rgb), 0.85);
    background-image: linear-gradient(180deg, rgba(var(--accent-rgb), 0.03) 0%, transparent 50%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.9rem 0.8rem;
    transition: transform 400ms var(--ease-out-expo), box-shadow 400ms var(--ease-out-expo), border-color 300ms ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.22);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-height: 100px;
}

/* ---- Top accent line ---- */
.method-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
    opacity: 0.5;
    transition: opacity 300ms ease;
}
.method-card:hover::before { opacity: 1; }

/* ---- Mouse-follow glow ---- */
.method-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(var(--accent-rgb), 0.15), transparent 50%);
    opacity: 0;
    transition: opacity 250ms ease;
    pointer-events: none;
    z-index: 0;
}
.method-card:hover::after { opacity: 1; }

/* ---- Hover lift ---- */
.method-card:hover {
    border-color: var(--color-gold);
    transform: translateY(-4px) translateZ(0);
    box-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 0 18px rgba(var(--accent-rgb), 0.15);
    z-index: 2;
}

/* ---- Card glow overlay ---- */
.card-glow { display: none; }

/* ---- Card body wrapper ---- */
.card-body {
    position: relative;
    z-index: 1;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

/* Legacy span fallback (qimen.php etc.) */
.method-card.span-6, .method-card.span-8 { grid-column: 1 / -1; }
.method-card .interpretation-block p {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
}

/* ============================================
   BENTO SIZES — Mobile (2 cols)
   feature=2×2  wide=2×1  tall=1×2  standard=1×1
   ============================================ */
.method-card.layout-feature { grid-column: span 2; grid-row: span 2; }
.method-card.layout-wide    { grid-column: span 2; }
.method-card.layout-tall    { grid-column: span 1; grid-row: span 2; }
.method-card.layout-standard{ grid-column: span 1; }

/* ---- FEATURE (2×2): visual focal point ---- */
.method-card.layout-feature {
    background-image:
        radial-gradient(ellipse at 80% 0%, rgba(var(--accent-rgb), 0.08) 0%, transparent 50%),
        linear-gradient(180deg, rgba(var(--accent-rgb), 0.04) 0%, transparent 50%);
    border-color: rgba(var(--gold-rgb), 0.18);
    min-height: 200px;
    padding: 1.2rem 1rem;
}
.method-card.layout-feature .card-body {
    justify-content: center;
}
.method-card.layout-feature::before { opacity: 0.7; }
.method-card.layout-feature .card-glow {
    display: block;
    position: absolute;
    top: -30px; right: -30px;
    width: 100px; height: 100px;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.method-card.layout-feature .card-icon { font-size: 2rem; }
.method-card.layout-feature h3 { font-size: 1.1rem; }
.method-card.layout-feature .card-en { font-size: 0.62rem; opacity: 0.85; }
.method-card.layout-feature p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- WIDE (2×1): horizontal icon+content ---- */
.method-card.layout-wide {
    flex-direction: row;
    align-items: center;
    gap: 0.8rem;
    min-height: 90px;
    padding: 0.8rem 1rem;
}
.method-card.layout-wide .card-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-bottom: 0;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: rgba(var(--accent-rgb), 0.06);
    border: 1px solid rgba(var(--gold-rgb), 0.1);
}
.method-card.layout-wide .card-body { flex: 1; min-width: 0; }
.method-card.layout-wide h3 { font-size: 0.95rem; }
.method-card.layout-wide .card-en { font-size: 0.58rem; margin-bottom: 0.15rem; }
.method-card.layout-wide p {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.72rem;
}
.method-card.layout-wide .card-link { flex-shrink: 0; margin-top: 0; font-size: 0.65rem; }

/* ---- TALL (1×2): vertical emphasis ---- */
.method-card.layout-tall {
    min-height: 200px;
    padding: 0.9rem 0.7rem;
}
.method-card.layout-tall .card-icon { font-size: 1.5rem; }
.method-card.layout-tall h3 { font-size: 0.9rem; }
.method-card.layout-tall .card-en { font-size: 0.55rem; }
.method-card.layout-tall p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.72rem;
}

/* ---- STANDARD (1×1): compact ---- */
.method-card.layout-standard {
    min-height: 100px;
    padding: 0.8rem 0.7rem;
}
.method-card.layout-standard .card-icon { font-size: 1.3rem; }
.method-card.layout-standard h3 { font-size: 0.85rem; }
.method-card.layout-standard .card-en { font-size: 0.55rem; }
.method-card.layout-standard p { display: none; }

/* ---- Shared card elements ---- */
.method-card .card-icon {
    font-size: 1.3rem;
    color: var(--color-gold);
    margin-bottom: 0.3rem;
    position: relative;
    z-index: 1;
}
.method-card .card-icon svg { width: 32px; height: 32px; }

.method-card h3 {
    color: var(--color-gold);
    font-size: 0.9rem;
    margin-bottom: 0.15rem;
}

.method-card .card-free-badge {
    display: inline-block;
    font-size: 0.55rem;
    background: rgb(var(--accent-rgb));
    color: var(--color-bg);
    padding: 1px 4px;
    border-radius: 3px;
    margin-left: 3px;
    vertical-align: middle;
    line-height: 1.4;
}

.method-card .card-en {
    font-family: var(--font-display);
    font-size: 0.58rem;
    color: var(--color-muted);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.3rem;
    opacity: 0.7;
}

.method-card p {
    color: var(--color-text);
    font-size: 0.78rem;
    line-height: 1.5;
    flex-grow: 1;
    display: none;
}

.method-card .card-link {
    margin-top: 0.4rem;
    color: var(--color-gold-light);
    font-size: 0.7rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    position: relative;
    z-index: 1;
    opacity: 0.7;
    transition: opacity 300ms ease;
}
.method-card:hover .card-link { opacity: 1; }
.method-card .card-link i {
    transition: transform 300ms var(--ease-out-expo);
}
.method-card:hover .card-link i {
    transform: translateX(3px);
}

/* ============================================
   PAGE HEADER (sub pages)
   ============================================ */
.page-header {
    padding: 1rem 0 0.8rem;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 1rem;
    position: relative;
}
.page-header h1 {
    color: var(--color-gold) !important;
    font-size: clamp(1.3rem, 6vw, 2rem);
    margin-bottom: 0.2rem;
}
.page-header h1 > i { color: var(--color-gold) !important; }
.page-header .page-subtitle {
    color: var(--color-muted);
    font-size: 0.8rem;
    font-family: var(--font-display);
    letter-spacing: 0.1em;
}

/* ============================================
   FORMS — Mobile Touch-Optimized
   ============================================ */

/* Legacy form */
.divination-form {
    background: rgba(var(--surface-deep-rgb), 0.88);
    border: 1px solid var(--color-border);
    border-top: 1px solid rgba(var(--accent-rgb), 0.20);
    border-radius: var(--radius-lg);
    padding: 1.2rem;
    margin-bottom: 1.2rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.30);
    overflow: hidden;
}
.divination-form form { max-width: 100%; box-sizing: border-box; }

.form-group { margin-bottom: 1.2rem; position: relative; min-width: 0; }

.form-group label {
    display: block;
    color: var(--color-gold-light);
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.7rem 0.8rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 16px; /* Prevents iOS zoom */
    transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
    min-height: 44px;
}
/* Prevent date/time input overflow on mobile — remove native picker indicator
   that adds intrinsic min-width, causing the input to overflow its container.
   The native picker still opens on tap; only the visual indicator is removed. */
.form-group input[type="date"],
.form-group input[type="time"],
.form-group input[type="datetime-local"],
input[type="date"],
input[type="time"],
input[type="datetime-local"] {
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
    appearance: none !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: block;
}
/* Hide native calendar/clock indicator (Webkit/Chrome) */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    display: none;
}
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover,
.qn-date-cell input:hover,
.qn-date-cell select:hover,
textarea:hover,
.sc-minute-field:hover {
    border-color: var(--color-gold-dark);
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.15);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus,
.qn-date-cell input:focus,
.qn-date-cell select:focus,
textarea:focus,
.sc-minute-field:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12), 0 0 12px rgba(var(--accent-rgb), 0.2);
    background-color: rgba(var(--accent-rgb), 0.03);
}

/* Native <select> inside .form-group: drop native chrome, add themed chevron, keep arrow on focus.
   Note: the :focus rule above now uses background-color (longhand) so the custom arrow is not wiped. */
.form-group select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    /* custom dropdown arrow (gold chevron) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10' fill='none' stroke='%23C9A961' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 2.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 0.7rem;
    padding-right: 2.2rem; /* room for the arrow */
}
/* Themed <option> list: dark surface + light text so it is readable in dark themes */
.form-group select option {
    background: var(--color-surface);
    color: var(--color-text);
}

/* ShichenClock */
.qn-shichen-clock {
    position: relative;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: stretch;
}
.sc-minute-field {
    width: 56px;
    padding: 0.7rem 0.3rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    text-align: center;
    font-size: 16px;
    font-family: var(--font-body);
    transition: border-color var(--transition), box-shadow var(--transition);
    -moz-appearance: textfield;
    min-height: 44px;
}
.sc-minute-field::-webkit-outer-spin-button,
.sc-minute-field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Form row — single column on mobile
   minmax(0, 1fr) 防止 date/time 等替换元素的固有最小宽度撑大网格轨道，
   导致表单内容溢出 .divination-form 的 overflow:hidden 被裁切 */
.form-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.8rem;
}
.form-row > .form-group { min-width: 0; }

/* ============================================
   QN-CAST-FORM (Bazi/Ziwei/Qimen style)
   ============================================ */
.qn-cast-form {
    background: rgba(var(--surface-deep-rgb), 0.88);
    border: 1px solid var(--color-border);
    border-top: 1px solid rgba(var(--accent-rgb), 0.20);
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin-bottom: 1.2rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.30);
}

.qn-cast-banner {
    background: linear-gradient(135deg, var(--color-bg) 0%, var(--color-surface-light) 100%);
    padding: 1.5rem 1rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.qn-cast-banner::before {
    content: '';
    position: absolute;
    top: 10%; left: 8%;
    width: 180px; height: 180px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.06), transparent 70%);
    /* 性能优化：径向渐变本身即为软边光晕，移除冗余 blur(50px) 滤镜（每帧重绘成本极高） */
}
.qn-cast-banner .banner-sub {
    font-family: var(--font-display);
    color: rgba(var(--accent-light-rgb), 0.7);
    letter-spacing: 0.25em;
    font-size: 0.7rem;
    margin-bottom: 0.3rem;
}
.qn-cast-banner h1 {
    color: var(--color-gold);
    font-size: clamp(1.3rem, 6vw, 2rem);
    letter-spacing: 0.12em;
    margin: 0.2rem 0;
    animation: qnGlowBreathe 4.5s ease-in-out infinite;
}
.qn-cast-banner .banner-desc {
    color: var(--color-muted);
    font-size: 0.78rem;
}
.qn-cast-body { animation: qnInkIn 0.7s ease-out both; animation-delay: 0.15s; padding: 1.2rem; }

.qn-field-label {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    color: var(--color-gold-light);
    font-size: 0.85rem;
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: 0.05em;
    margin-bottom: 0.4rem;
}
.qn-field-label::before { content: '◇'; color: var(--color-gold); font-size: 0.65rem; }

.qn-text-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.2);
    outline: none;
    padding: 0.7rem 0.3rem;
    color: var(--color-gold-light);
    font-family: var(--font-body);
    font-size: 16px;
    min-height: 44px;
    transition: border-color var(--transition);
}
.qn-text-input:focus { border-bottom-color: var(--color-gold); box-shadow: 0 2px 0 -1px var(--color-gold); }
.qn-text-input::placeholder { color: rgba(var(--accent-rgb), 0.25); }

/* Gender toggle */
.qn-gender-group {
    display: flex;
    gap: 0.3rem;
    background: rgba(var(--overlay-rgb), 0.04);
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: var(--radius-sm);
    padding: 0.2rem;
}
.qn-gender-btn {
    flex: 1;
    padding: 0.6rem;
    min-height: 44px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: rgba(var(--accent-rgb), 0.5);
    font-family: var(--font-body);
    font-size: 0.9rem;
    cursor: pointer;
    transition: all var(--transition);
    text-align: center;
    -webkit-tap-highlight-color: transparent;
}
.qn-gender-btn:hover, .qn-gender-btn:active { color: var(--color-gold-light); background: rgba(var(--overlay-rgb), 0.04); }
.qn-gender-btn.active {
    background: rgba(var(--accent-rgb), 0.18);
    color: var(--color-gold-light);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(var(--accent-rgb), 0.2);
}

/* Calendar toggle */
.qn-cal-group {
    display: flex;
    gap: 0.2rem;
    background: rgba(var(--overlay-rgb), 0.04);
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: var(--radius-sm);
    padding: 0.2rem;
}
.qn-cal-btn {
    flex: 1;
    padding: 0.5rem 0.8rem;
    min-height: 40px;
    background: transparent;
    border: none;
    border-radius: 4px;
    color: rgba(var(--accent-rgb), 0.5);
    font-family: var(--font-body);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all var(--transition);
    -webkit-tap-highlight-color: transparent;
}
.qn-cal-btn:hover, .qn-cal-btn:active { color: var(--color-gold-light); }
.qn-cal-btn.active {
    background: rgba(var(--accent-rgb), 0.18);
    color: var(--color-gold-light);
    font-weight: 600;
}

/* Card-style select */
.qn-select-card {
    background: rgba(var(--overlay-rgb), 0.04);
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: var(--radius-sm);
    padding: 0.3rem;
    transition: border-color var(--transition), background var(--transition);
    position: relative;
    min-width: 0;
}
.qn-select-card:hover, .qn-select-card:active { border-color: var(--color-gold); background: rgba(var(--overlay-rgb), 0.06); }
.qn-select-card select {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    color: var(--color-gold-light);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    padding: 0.5rem;
    min-height: 36px;
}
.qn-select-card select option { background: var(--color-surface); color: var(--color-text); }
.qn-select-card::after {
    content: '▾';
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gold-dark);
    font-size: 0.65rem;
    pointer-events: none;
}

/* Profile picker bar (生辰档案选择) */
.profile-picker-bar {
    background: rgba(var(--accent-rgb), 0.06);
    border: 1px dashed var(--color-gold-dark);
    border-radius: var(--radius-md);
    padding: 0.8rem !important;
    margin-bottom: 0.8rem;
}
.qn-profile-select {
    width: 100%;
    padding: 0.6rem 0.8rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 16px;
    min-height: 44px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%23C9A961' stroke-width='1.5'%3E%3Cpath d='M2 2.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.85rem center;
    background-size: 0.7rem;
    padding-right: 2.2rem;
}
.qn-profile-select option { background: var(--color-surface); color: var(--color-text); }

/* 抖音图标（footer 交流群按钮） */
.icon-douyin { display: inline-block; vertical-align: middle; }

/* Topbar credits badge */
.topbar-credits {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.55rem;
    background: rgba(var(--accent-rgb), 0.12);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 12px;
    font-size: 0.72rem;
    color: var(--color-gold-light);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background var(--transition);
}
.topbar-credits:active { background: rgba(var(--accent-rgb), 0.2); }
.topbar-credits i { font-size: 0.65rem; color: var(--color-gold); }


.qn-date-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.5rem;
}
.qn-date-cell { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.qn-date-cell .cell-label {
    font-size: 0.7rem;
    color: var(--color-muted);
    text-align: center;
    font-family: var(--font-display);
}
.qn-date-cell-time { grid-column: 1 / -1; }
.qn-time-mode-group { width: 100%; display: flex; }
.qn-time-mode-group .qn-cal-btn { flex: 1; }
.qn-shichen-wrap { width: 100%; }
.qn-exact-time-wrap { width: 100%; }
.qn-exact-time-row { display: flex; align-items: center; gap: 0.3rem; }
.qn-time-colon { color: var(--color-muted); font-size: 0.85rem; font-family: var(--font-display); flex-shrink: 0; }
.qn-exact-hint { font-size: 0.7rem; color: var(--color-muted); margin-top: 0.3rem; }
.qn-tst-toggle-wrap {
    margin-top: 0.6rem;
    padding: 0.5rem 0.7rem;
    background: rgba(var(--surface-deep-rgb), 0.5);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}
/* 用更高优先级覆盖 .form-group label 的 display:block / color / margin */
.qn-tst-toggle-wrap label.qn-tst-toggle {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin-bottom: 0;
    color: var(--color-text);
}
.qn-tst-toggle input[type="checkbox"] { display: none !important; }
.qn-tst-toggle-track {
    width: 40px; height: 22px;
    background: rgba(var(--accent-rgb), 0.15);
    border: 1px solid var(--color-border);
    border-radius: 11px;
    position: relative;
    transition: background 200ms ease, border-color 200ms ease;
    flex-shrink: 0;
    box-sizing: border-box;
}
.qn-tst-toggle-thumb {
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: var(--color-text);
    border-radius: 50%;
    transition: transform 200ms ease, background 200ms ease;
    z-index: 1;
}
.qn-tst-toggle input:checked + .qn-tst-toggle-track { background: rgba(var(--accent-rgb), 0.4); border-color: var(--color-gold-dark); }
.qn-tst-toggle input:checked + .qn-tst-toggle-track .qn-tst-toggle-thumb { transform: translateX(18px); background: var(--color-gold-light); }
.qn-tst-toggle-label { font-size: 0.85rem; color: var(--color-text); white-space: nowrap; }
.qn-tst-desc { font-size: 0.72rem; color: var(--color-muted); margin-top: 0.3rem; }

/* ===== 神煞设置分组 ===== */
.qn-shensha-group {
    padding: 0.5rem 0.7rem;
    background: rgba(var(--surface-deep-rgb, 10, 10, 20), 0.35);
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.qn-shensha-group-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-gold-light);
    margin-bottom: 0.45rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.qn-shensha-group-title i { font-size: 0.72rem; }

/* ===== 高级流派折叠 ===== */
.qn-advanced-toggle {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--color-text-secondary, #b0b0b0);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0;
    transition: color 0.2s;
}
.qn-advanced-toggle:hover { color: var(--color-gold-light); }
.qn-advanced-toggle i:first-child { font-size: 0.75rem; }
.qn-advanced-chevron {
    margin-left: auto;
    font-size: 0.7rem;
    transition: transform 0.3s ease;
}
.qn-advanced-body {
    padding: 0.5rem 0 0.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    margin-top: 0.3rem;
}

/* ===== Qimen form extensions ===== */
.form-hint {
    font-size: 0.75rem;
    color: var(--color-muted);
    line-height: 1.5;
    margin-top: 0.3rem;
}
.qm-current-toggle-wrap {
    margin: 0.6rem 0;
    padding: 0.5rem 0.7rem;
    background: rgba(var(--surface-deep-rgb), 0.5);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}
/* 用更高优先级覆盖 .form-group label 的 display:block / color / margin（与 qn-tst-toggle 对等） */
.qm-current-toggle-wrap label.qm-current-toggle {
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    margin-bottom: 0;
    color: var(--color-text);
}
.qm-current-toggle input[type="checkbox"] { display: none !important; }
.qm-current-toggle-track {
    width: 40px; height: 22px;
    background: rgba(var(--accent-rgb), 0.15);
    border: 1px solid var(--color-border);
    border-radius: 11px;
    position: relative;
    transition: background 200ms ease, border-color 200ms ease;
    flex-shrink: 0;
    box-sizing: border-box;
}
.qm-current-toggle-thumb {
    position: absolute;
    top: 2px; left: 2px;
    width: 16px; height: 16px;
    background: var(--color-text);
    border-radius: 50%;
    transition: transform 200ms ease, background 200ms ease;
    z-index: 1;
}
.qm-current-toggle input:checked + .qm-current-toggle-track { background: rgba(var(--accent-rgb), 0.4); border-color: var(--color-gold-dark); }
.qm-current-toggle input:checked + .qm-current-toggle-track .qm-current-toggle-thumb { transform: translateX(18px); background: var(--color-gold-light); }
.qm-current-toggle-label { font-size: 0.85rem; color: var(--color-text); white-space: nowrap; }
.qm-datetime-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    transition: opacity 200ms ease;
}
.qm-datetime-cell { min-width: 0; }
.qm-datetime-cell input[type="date"],
.qm-datetime-cell input[type="time"] {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 0.85rem;
    padding: 0.6rem 0.5rem;
}
.qm-location-row {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    align-items: stretch;
}

/* CTA button */
.qn-cta-btn {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, #8A7440, #C9A961, #E8C77E);
    color: #0A0A0F;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.5em;
    text-indent: 0.5em;
    cursor: pointer;
    transition: all var(--transition);
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.25);
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.qn-cta-btn:hover, .qn-cta-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 10px 28px rgba(var(--accent-rgb), 0.35);
}
.qn-cta-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(var(--overlay-rgb),0.4) 50%, transparent 70%);
    transform: translateX(-180%) skewX(-18deg);
    transition: transform 0.6s ease;
}
.qn-cta-btn:hover::after, .qn-cta-btn:active::after { transform: translateX(340%) skewX(-18deg); }

/* ===== 合盘共享布局（姻缘/友谊合盘输入与结果区共用，原内置于姻缘合盘页） ===== */
/* 双人表单上下堆叠 */
.hepan-form-stack { display: flex; flex-direction: column; gap: 0; }
.hepan-party { padding: 1rem 1.2rem; border-radius: var(--radius-md); background: rgba(var(--overlay-rgb),0.03); border: 1px solid var(--color-border); }
.hepan-party-a { border-left: 3px solid var(--color-gold); }
.hepan-party-b { border-left: 3px solid var(--color-red-light); }
.hepan-party-header { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; font-size: 1.05rem; }
.hepan-party-header i { font-size: 0.9rem; opacity: 0.8; }
.hepan-divider { display: flex; align-items: center; justify-content: center; padding: 0.8rem 0; position: relative; }
.hepan-divider::before, .hepan-divider::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--color-border), transparent); }
.hepan-divider span { width: 36px; height: 36px; border-radius: 50%; background: var(--color-surface); border: 2px solid var(--color-gold); display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--color-gold); margin: 0 0.8rem; font-weight: bold; }
/* 合盘结果评分卡 */
.hepan-score { display: flex; align-items: center; gap: 2rem; padding: 1.5rem; background: var(--color-bg); border-radius: var(--radius-md); }
.hepan-circle { width: 100px; height: 100px; border-radius: 50%; border: 3px solid var(--color-gold); display: flex; flex-direction: column; align-items: center; justify-content: center; flex-shrink: 0; }
.hepan-num { font-size: 2rem; color: var(--color-gold); font-weight: bold; }
.hepan-label { font-size: 0.75rem; color: var(--color-muted); }
.hepan-level { flex: 1; }
.hepan-table td, .hepan-table th { text-align: center; }
/* 五行力量对比条 */
.element-compare { display: flex; flex-direction: column; gap: 0.6rem; max-width: 500px; }
.elem-compare-row { display: flex; align-items: center; gap: 0.8rem; }
.elem-compare-bar { flex: 1; height: 16px; display: flex; background: var(--color-bg); border-radius: 2px; overflow: hidden; }
.elem-bar-left { background: var(--color-gold); transition: width 500ms ease; }
.elem-bar-right { background: var(--color-red-light); margin-left: auto; transition: width 500ms ease; }
/* 合盘印证列表 */
.hepan-reasons { list-style: none; padding: 0; }
.hepan-reasons li { padding: 0.4rem 0; border-bottom: 1px dashed var(--color-border); color: var(--color-text); font-size: 0.9rem; }
.hepan-reasons li::before { content: '◆ '; color: var(--color-gold); }
/* 合盘页移动端：双人日期行三列（第4格时辰自然换行），评分卡与五行对比换行收敛 */
@media (max-width: 768px) {
    .hepan-score { flex-wrap: wrap; justify-content: center; }
    .element-compare { flex-wrap: wrap; }
}

.qn-form-section { margin-bottom: 1.2rem; }

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.65rem 1.2rem;
    background: rgba(var(--surface-deep-rgb), 0.85);
    border: 1px solid var(--color-gold);
    color: var(--color-gold);
    font-family: var(--font-display);
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: all var(--transition);
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-height: 42px;
}
.btn:hover, .btn:active {
    background: var(--color-gold);
    color: var(--color-bg);
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.3);
}

.btn-red {
    border-color: var(--color-red-light);
    color: var(--color-red-light);
}
.btn-red:hover, .btn-red:active {
    background: var(--color-red);
    color: var(--color-text);
    box-shadow: 0 0 16px rgba(139,44,44,0.3);
}

.btn-share {
    border-color: var(--color-gold-light);
    color: var(--color-gold-light);
    background: rgba(var(--accent-rgb), 0.08);
}
.btn-share:hover, .btn-share:active {
    background: var(--color-gold);
    color: var(--color-bg);
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.35);
}

.btn-gold {
    border-color: var(--color-gold);
    color: var(--color-gold);
    background: rgba(var(--accent-rgb), 0.12);
}
.btn-gold:hover, .btn-gold:active {
    background: var(--color-gold);
    color: var(--color-bg);
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.4);
}

/* 大号按钮修饰（刻名演卦 / 命理合参等主 CTA） */
.btn-lg {
    padding: 0.85rem 1.9rem;
    font-size: 0.95rem;
    letter-spacing: 0.1em;
    min-height: 50px;
}

/* 描边按钮修饰（返回修改 / 再选术式等次级操作） */
.btn-outline {
    background: transparent;
    color: var(--color-gold-light);
    border-color: var(--color-gold-dark);
}
.btn-outline:hover, .btn-outline:active {
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--color-gold-light);
    border-color: var(--color-gold);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.22);
}

.share-area {
    padding-top: 0.5rem;
    border-top: 1px dashed var(--color-border);
}

/* ============================================
   RESULT DISPLAY
   ============================================ */
.result-section {
    background: rgba(var(--surface-deep-rgb), 0.88);
    border: 1px solid var(--color-gold-dark);
    border-top: 1px solid rgba(var(--accent-rgb), 0.20);
    border-radius: var(--radius-lg);
    padding: 1.2rem;
    margin-bottom: 1.2rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.30);
}
.result-section h2 {
    color: var(--color-gold) !important;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.4rem;
    margin-bottom: 1rem;
    font-size: clamp(1.1rem, 5vw, 1.5rem);
}
.result-section h3 {
    color: var(--color-gold-light) !important;
    font-size: clamp(0.95rem, 4vw, 1.15rem);
}
.result-section h4 { color: var(--color-gold-light) !important; }
/* AI 解读区标题 */
.ai-section h2 { color: var(--color-gold) !important; margin-bottom: 0.8rem; font-size: clamp(1.05rem, 5vw, 1.4rem); }
/* 页面标题 */
.page-header h1 { color: var(--color-gold) !important; }

/*
 * === 标题图标颜色修复（核心·强化版） ===
 * 所有 h1~h4 内的 Font Awesome 图标强制继承父标题颜色
 * 使用极高特异性选择器 + !important 确保覆盖所有主题和第三方 CSS
 * 同时覆盖 FA5 (fas/far/fab) 和 FA6 (fa-solid/fa-regular/fa-brands) 语法
 * 以及无类名的 <i> 图标
 */
h1 > i, h2 > i, h3 > i, h4 > i,
h1 > i.fas, h2 > i.fas, h3 > i.fas, h4 > i.fas,
h1 > i.far, h2 > i.far, h3 > i.far, h4 > i.far,
h1 > i.fab, h2 > i.fab, h3 > i.fab, h4 > i.fab,
h1 > i.fa-solid, h2 > i.fa-solid, h3 > i.fa-solid, h4 > i.fa-solid,
h1 > i.fa-regular, h2 > i.fa-regular, h3 > i.fa-regular, h4 > i.fa-regular,
h1 > i.fa-brands, h2 > i.fa-brands, h3 > i.fa-brands, h4 > i.fa-brands,
.result-section h2 > i, .result-section h3 > i, .result-section h4 > i,
.ai-section h2 > i, .page-header h1 > i,
.result-section h2 > i.fas, .result-section h2 > i.far, .result-section h2 > i.fab,
.result-section h2 > i.fa-solid, .result-section h2 > i.fa-regular, .result-section h2 > i.fa-brands,
.result-section h3 > i.fas, .result-section h3 > i.far, .result-section h3 > i.fab,
.result-section h3 > i.fa-solid, .result-section h3 > i.fa-regular, .result-section h3 > i.fa-brands,
.result-section h4 > i.fas, .result-section h4 > i.far, .result-section h4 > i.fab,
.result-section h4 > i.fa-solid, .result-section h4 > i.fa-regular, .result-section h4 > i.fa-brands,
.ai-section h2 > i.fas, .ai-section h2 > i.far, .ai-section h2 > i.fab,
.ai-section h2 > i.fa-solid, .ai-section h2 > i.fa-regular, .ai-section h2 > i.fa-brands,
.page-header h1 > i.fas, .page-header h1 > i.far, .page-header h1 > i.fab,
.page-header h1 > i.fa-solid, .page-header h1 > i.fa-regular, .page-header h1 > i.fa-brands,
/* 动态注入的结果区也覆盖 */
#result-area h2 > i, #result-area h3 > i, #result-area h4 > i,
#ai-container h2 > i, #ai-container h3 > i,
.cast-result h2 > i, .cast-result h3 > i, .cast-result h4 > i {
    color: inherit !important;
}
/* 结果区内非标题图标确保有颜色 */
.result-section i.fas, .result-section i.far, .result-section i.fab,
.result-section i.fa-solid, .result-section i.fa-regular, .result-section i.fa-brands,
.ai-section i.fas, .ai-section i.far, .ai-section i.fab,
.ai-section i.fa-solid, .ai-section i.fa-regular, .ai-section i.fa-brands {
    color: var(--color-gold-light);
}
/* 确保标题文字本身也有颜色（防止 AJAX 注入的标题无颜色） */
.result-section h2, .result-section h3, .result-section h4,
.ai-section h2, .ai-section h3, .page-header h1,
#result-area h2, #result-area h3, #result-area h4,
#ai-container h2, #ai-container h3,
.cast-result h2, .cast-result h3, .cast-result h4 {
    color: var(--color-gold) !important;
}
.result-section h3, .result-section h4,
#result-area h3, #result-area h4,
.cast-result h3, .cast-result h4 {
    color: var(--color-gold-light) !important;
}

/* ============================================
   HEXAGRAM DISPLAY
   ============================================ */
.hexagram-display {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 5px;
    padding: 1rem;
    margin: 0.8rem auto;
    max-width: 280px;
}
.yao-line {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: center;
}
.yao-label { font-size: 0.7rem; color: var(--color-muted); width: 48px; text-align: right; }
.yao-bar {
    height: 10px;
    background: var(--color-gold);
    border-radius: 1px;
    transition: all 300ms ease;
}
.yao-bar.yang { width: 160px; }
.yao-bar.yin { width: 160px; display: flex; gap: 10px; background: transparent; }
.yao-bar.yin::before, .yao-bar.yin::after {
    content: '';
    display: block;
    width: 75px;
    height: 10px;
    background: var(--color-gold);
    border-radius: 1px;
}
.yao-bar.changing { animation: pulse 1.5s ease infinite; }
.yao-info { font-size: 0.7rem; color: var(--color-gold-light); width: 48px; text-align: left; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.hexagram-name { text-align: center; margin: 0.8rem 0; }
.hexagram-name .name-cn { font-size: clamp(1.5rem, 7vw, 2rem); color: var(--color-gold); font-family: var(--font-display); }
.hexagram-name .name-num { font-size: 0.8rem; color: var(--color-muted); }

/* ============================================
   PALACE GRIDS (奇门/紫微)
   ============================================ */
.palace-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    max-width: 560px;
    margin: 1rem auto;
}
.palace {
    background: var(--color-surface-light);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.45rem 0.4rem;
    font-size: 0.72rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    position: relative;
    overflow: hidden;
    min-height: 7.5rem;
}
.palace .palace-num {
    position: absolute; top: 2px; right: 5px;
    font-size: 0.58rem; color: var(--color-muted); opacity: 0.7;
    font-weight: bold;
}
.palace .palace-item {
    display: flex; gap: 0.25rem; align-items: baseline;
    line-height: 1.35;
}
.palace .item-label {
    color: var(--color-muted); font-size: 0.58rem; min-width: 0.9rem;
    opacity: 0.8;
}
.palace .item-value { color: var(--color-text); font-size: 0.72rem; }
.palace .item-value.gold { color: var(--color-gold-light); font-weight: 600; }
.palace .item-value.red { color: var(--color-red-light); font-weight: 600; }
.palace.palace-center {
    background: rgba(var(--accent-rgb), 0.1);
    border-color: var(--color-gold-dark);
    border-width: 1.5px;
}

.ziwei-chart {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    gap: 2px;
    max-width: 600px;
    margin: 0.8rem auto;
    aspect-ratio: 1;
}
.ziwei-palace {
    background: var(--color-surface-light);
    border: 1px solid var(--color-border);
    padding: 0.35rem;
    font-size: 0.62rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 70px;
}
.ziwei-palace .palace-name { color: var(--color-gold); font-weight: 700; font-size: 0.68rem; border-bottom: 1px solid var(--color-border); padding-bottom: 0.15rem; margin-bottom: 0.2rem; }
.ziwei-palace .palace-branch { color: var(--color-muted); font-size: 0.58rem; }
.ziwei-palace .star { font-size: 0.62rem; margin: 1px 0; }
.ziwei-palace .star.main { color: var(--color-gold-light); font-weight: 600; }
.ziwei-palace .star.aux { color: var(--color-text); }
.ziwei-palace .star.killer { color: var(--color-red-light); }
.ziwei-palace.palace-ming { border: 2px solid var(--color-gold); box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.3); }
.ziwei-palace.palace-shen { border: 2px solid var(--color-orange); }
.ziwei-palace.center {
    grid-column: 2 / 4;
    grid-row: 2 / 4;
    background: rgba(var(--accent-rgb), 0.05);
    border-color: var(--color-gold-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

/* ============================================
   TAROT / LENORMAND CARDS
   ============================================ */
.card-spread {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
    padding: 1rem 0;
}
.tarot-card {
    width: 100px;
    height: 160px;
    perspective: 1200px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    animation: cardDealIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
    opacity: 0;
}
.tarot-card:nth-child(1) { animation-delay: 0.15s; }
.tarot-card:nth-child(2) { animation-delay: 0.30s; }
.tarot-card:nth-child(3) { animation-delay: 0.45s; }
.tarot-card:nth-child(4) { animation-delay: 0.60s; }
.tarot-card:nth-child(5) { animation-delay: 0.75s; }
.tarot-card:nth-child(6) { animation-delay: 0.90s; }
.tarot-card:nth-child(7) { animation-delay: 1.05s; }
.tarot-card:nth-child(8) { animation-delay: 1.20s; }
.tarot-card:nth-child(9) { animation-delay: 1.35s; }
.tarot-card:nth-child(n+10) { animation-delay: 1.50s; }
@keyframes cardDealIn {
    0% {
        opacity: 0;
        transform: perspective(1000px) translateZ(-300px) rotateY(20deg) scale(0.6);
        filter: blur(4px) brightness(0.6);
    }
    40% {
        opacity: 0.7;
        transform: perspective(1000px) translateZ(-50px) rotateY(-5deg) scale(1.05);
        filter: blur(0) brightness(1.15);
    }
    70% {
        opacity: 1;
        transform: perspective(1000px) translateZ(0) rotateY(2deg) scale(0.98);
        filter: brightness(1.05);
    }
    100% {
        opacity: 1;
        transform: perspective(1000px) translateZ(0) rotateY(0) scale(1);
        filter: brightness(1);
    }
}
.tarot-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.tarot-card.flipped .tarot-card-inner { transform: rotateY(180deg); }
.tarot-card:active .tarot-card-inner { transform: scale(0.93) translateY(-4px); }
.tarot-card.flipped:active .tarot-card-inner { transform: rotateY(180deg) scale(0.93) translateY(-4px); }
.tarot-card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border: 2px solid var(--color-gold-dark);
    border-radius: var(--radius-sm);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.6rem;
    text-align: center;
    overflow: hidden;
}
.tarot-card-back {
    background: linear-gradient(135deg, var(--color-surface), var(--color-surface-light));
    background-image:
        radial-gradient(circle at 50% 50%, rgba(var(--accent-rgb), 0.18), transparent 65%),
        repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(var(--accent-rgb), 0.05) 10px, rgba(var(--accent-rgb), 0.05) 20px);
    box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.35);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.tarot-card.flipped .tarot-card-back,
.lenormand-card.flipped .tarot-card-back {
    opacity: 0;
    visibility: hidden;
    transition: opacity 300ms ease, visibility 300ms ease;
}
.tarot-card-back::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: calc(var(--radius-sm) - 2px);
    pointer-events: none;
}
.tarot-card-back::after {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px dashed rgba(var(--accent-rgb), 0.15);
    border-radius: calc(var(--radius-sm) - 4px);
    pointer-events: none;
    animation: cardBackRotate 12s linear infinite;
}
@keyframes cardBackRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.tarot-card-back .card-back-symbol {
    font-size: 2rem;
    color: var(--color-gold);
    opacity: 0.6;
    text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.5);
    animation: cardBackPulse 3s ease-in-out infinite;
    z-index: 1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}
.tarot-card.flipped .card-back-symbol,
.lenormand-card.flipped .card-back-symbol {
    animation: none;
}
@keyframes cardBackPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.3); }
    50% { opacity: 0.75; transform: scale(1.08); text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.5); }
}
.tarot-card-front {
    background: linear-gradient(180deg, var(--color-surface), rgba(var(--surface-deep-rgb), 0.9));
    transform: rotateY(180deg);
    box-shadow: inset 0 0 16px rgba(var(--accent-rgb), 0.08);
}
.tarot-card.flipped .tarot-card-front {
    box-shadow: inset 0 0 16px rgba(var(--accent-rgb), 0.15), 0 0 20px rgba(var(--accent-rgb), 0.2);
    animation: cardRevealGlow 0.6s ease-out;
}
@keyframes cardRevealGlow {
    0% { box-shadow: inset 0 0 40px rgba(var(--accent-rgb), 0.5), 0 0 30px rgba(var(--accent-rgb), 0.4); transform: rotateY(180deg) scale(1.08); }
    40% { box-shadow: inset 0 0 24px rgba(var(--accent-rgb), 0.3), 0 0 20px rgba(var(--accent-rgb), 0.3); transform: rotateY(180deg) scale(1.03); }
    100% { box-shadow: inset 0 0 16px rgba(var(--accent-rgb), 0.15), 0 0 20px rgba(var(--accent-rgb), 0.2); transform: rotateY(180deg) scale(1); }
}
.tarot-card-front .card-num { font-family: var(--font-display); font-size: 0.65rem; color: var(--color-muted); letter-spacing: 0.12em; }
.tarot-card-front .card-name { font-family: var(--font-display); color: var(--color-gold); font-size: 0.82rem; margin: 0.3rem 0; text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.2); }
.tarot-card-front .card-keyword { font-size: 0.68rem; color: var(--color-text); }
.tarot-card-front .card-reversed { color: var(--color-red-light); font-size: 0.62rem; margin-top: 0.2rem; }

.lenormand-card {
    width: 80px;
    height: 124px;
    perspective: 1000px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    animation: cardDealIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    opacity: 0;
}
.lenormand-card:nth-child(1) { animation-delay: 0.12s; }
.lenormand-card:nth-child(2) { animation-delay: 0.24s; }
.lenormand-card:nth-child(3) { animation-delay: 0.36s; }
.lenormand-card:nth-child(4) { animation-delay: 0.48s; }
.lenormand-card:nth-child(5) { animation-delay: 0.60s; }
.lenormand-card:nth-child(6) { animation-delay: 0.72s; }
.lenormand-card:nth-child(7) { animation-delay: 0.84s; }
.lenormand-card:nth-child(8) { animation-delay: 0.96s; }
.lenormand-card:nth-child(9) { animation-delay: 1.08s; }
.lenormand-card.flipped .tarot-card-inner { transform: rotateY(180deg); }
.lenormand-card .tarot-card-face { padding: 0.4rem; }
.lenormand-card .tarot-card-front .card-name { font-size: 0.72rem; }
.lenormand-card .tarot-card-front .card-keyword { font-size: 0.6rem; }

.lenormand-grid-3x3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding: 1rem 0;
    justify-items: center;
    max-width: 100%;
    margin: 0 auto;
}
.lenormand-cell { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; }
.lenormand-cell .pos-label { font-size: 0.7rem; color: var(--color-gold-light); letter-spacing: 0.05em; white-space: nowrap; }

/* ============================================
   DRAWING LOTS (抽签)
   ============================================ */
.lot-container { text-align: center; padding: 1.5rem 0; }
.lot-stick {
    display: inline-block;
    width: 28px;
    height: 140px;
    background: linear-gradient(180deg, var(--color-gold-dark), var(--color-gold), var(--color-gold-dark));
    border-radius: 4px;
    margin: 0 3px;
    position: relative;
    cursor: pointer;
    transition: transform 300ms ease;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    -webkit-tap-highlight-color: transparent;
}
.lot-stick::before {
    content: '';
    position: absolute;
    top: -6px; left: 50%;
    transform: translateX(-50%);
    width: 14px; height: 14px;
    background: var(--color-red);
    border-radius: 50%;
}
.lot-stick:hover, .lot-stick:active { transform: translateY(-8px); }

/* 摇签中动画（JS 添加 .drawing 类触发） */
.lot-stick.drawing {
    animation: lotShake 0.45s ease-in-out infinite;
}
.lot-stick.drawing:nth-child(2n) { animation-delay: 0.07s; }
.lot-stick.drawing:nth-child(3n) { animation-delay: 0.13s; }
.lot-stick.drawing:nth-child(5n) { animation-delay: 0.19s; }
@keyframes lotShake {
    0%, 100% { transform: rotate(0deg) translateY(0); }
    25% { transform: rotate(3.5deg) translateY(-3px); }
    50% { transform: rotate(-2deg) translateY(0); }
    75% { transform: rotate(2.5deg) translateY(-2px); }
}
.lot-result {
    background: var(--color-surface);
    border: 1px solid var(--color-gold-dark);
    border-radius: var(--radius-md);
    padding: 1.2rem;
    margin: 1rem auto;
    max-width: 100%;
}
.lot-result .lot-num { font-family: var(--font-display); font-size: 1.2rem; color: var(--color-gold); margin-bottom: 0.6rem; }
.lot-result .lot-poem { font-size: 1rem; line-height: 2; color: var(--color-text); text-align: center; margin: 1rem 0; font-style: italic; }
.lot-result .lot-interpretation { color: var(--color-muted); font-size: 0.85rem; border-top: 1px solid var(--color-border); padding-top: 0.8rem; margin-top: 0.8rem; }

/* ============================================
   COINS / YAO PROGRESS (六爻)
   ============================================ */
.coin-toss-area { text-align: center; padding: 1rem 0; }
.coins-container { display: flex; justify-content: center; gap: 0.8rem; perspective: 800px; }
.coin {
    width: 48px; height: 48px;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.6s ease;
}
.coin.tossing { animation: coinTossSmall 0.9s ease-in-out infinite; }
.coin-face {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
}
.coin-front {
    background: radial-gradient(circle, var(--color-gold), var(--color-gold-dark));
    color: var(--color-bg);
    border: 2px solid var(--color-gold-light);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.3);
}
.coin-back {
    background: radial-gradient(circle, var(--color-surface-light), var(--color-surface));
    color: var(--color-gold);
    border: 2px solid var(--color-gold-dark);
    transform: rotateY(180deg);
}
.coin-result { margin-top: 0.8rem; font-size: 0.9rem; color: var(--color-gold-light); }

.yao-progress { margin: 1rem 0; }
.yao-progress-line { display: flex; align-items: center; gap: 8px; margin: 6px 0; opacity: 0.4; }
.yao-progress-line.done { opacity: 1; }
.yao-progress-bar { height: 10px; background: var(--color-gold); border-radius: 1px; }
.yao-progress-bar.yang { width: 140px; }
.yao-progress-bar.yin { width: 140px; display: flex; gap: 8px; background: transparent; }
.yao-progress-bar.yin::before, .yao-progress-bar.yin::after { content: ''; display: block; width: 66px; height: 10px; background: var(--color-gold); border-radius: 1px; }
.yao-progress-bar.changing { animation: pulse 1.5s ease infinite; }
.yao-progress-label { font-size: 0.65rem; color: var(--color-muted); width: 44px; text-align: right; }
.yao-progress-slots { display: flex; gap: 4px; justify-content: center; margin-top: 0.5rem; }
.yao-progress-slot {
    width: 24px; height: 24px;
    border: 1px dashed var(--color-border);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    color: var(--color-muted);
    opacity: 0.5;
}
.yao-progress-slot.filled { opacity: 1; border-color: var(--color-gold); border-style: solid; }

/* Method tabs */
.method-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin-bottom: 1rem; }
.method-tab {
    padding: 0.6rem 0.4rem;
    background: rgba(var(--surface-deep-rgb), 0.6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    cursor: pointer;
    text-align: center;
    transition: all var(--transition);
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.method-tab:hover, .method-tab:active { border-color: var(--color-gold-dark); background: rgba(var(--surface-deep-rgb), 0.95); }
.method-tab.active { border-color: var(--color-gold); background: rgba(var(--accent-rgb), 0.12); color: var(--color-gold); }
.method-tab .tab-icon { font-size: 1.2rem; color: var(--color-gold); margin-bottom: 0.2rem; }
.method-tab .tab-name { color: var(--color-gold); font-weight: 600; font-size: 0.8rem; }
.method-tab .tab-desc { color: var(--color-muted); font-size: 0.65rem; margin-top: 0.1rem; }

/* Direct cast yao selector (六爻 direct input) */
.yao-selector { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.8rem 0; }
.yao-selector-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}
.yao-selector-label {
    width: 48px;
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--color-muted);
    font-family: var(--font-display);
    text-align: right;
}
.yao-selector-btn {
    flex: 1;
    min-width: 60px;
    padding: 0.5rem 0.4rem;
    background: rgba(var(--surface-deep-rgb), 0.6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    font-size: 0.75rem;
    cursor: pointer;
    text-align: center;
    transition: all var(--transition);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    min-height: 40px;
}
.yao-selector-btn:hover { border-color: var(--color-gold-dark); }
.yao-selector-btn.selected {
    border-color: var(--color-gold);
    background: rgba(var(--accent-rgb), 0.15);
    color: var(--color-gold);
    font-weight: 600;
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.2);
}
.direct-cast-area {
    padding: 0.8rem;
    background: rgba(var(--surface-deep-rgb), 0.4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-top: 0.5rem;
}

/* Method choice cards — radio group used by 起卦方式 / 历法 etc. (qigua, nayin) */
.method-choices { display: flex; flex-direction: column; gap: 0.5rem; }
.method-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 0.85rem;
    min-height: 48px;
    background: rgba(var(--surface-deep-rgb), 0.6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), transform 200ms ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
/* visually-hidden radio, still focusable */
.method-choice input[type="radio"] {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    opacity: 0; pointer-events: none;
}
.method-choice .choice-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-gold);
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    transition: background var(--transition), border-color var(--transition);
}
.method-choice .choice-body { flex: 1; min-width: 0; }
.method-choice .choice-title { color: var(--color-gold-light); font-size: 0.9rem; font-weight: 600; line-height: 1.2; }
.method-choice .choice-desc { color: var(--color-muted); font-size: 0.72rem; margin-top: 0.15rem; line-height: 1.3; }
.method-choice .choice-check {
    flex-shrink: 0;
    color: var(--color-gold);
    font-size: 0.95rem;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 200ms ease, transform 200ms ease;
}
.method-choice:hover { border-color: var(--color-gold-dark); background: rgba(var(--surface-deep-rgb), 0.9); }
.method-choice:active { transform: scale(0.98); transition: transform 120ms ease; }
.method-choice.selected {
    border-color: var(--color-gold);
    background: rgba(var(--accent-rgb), 0.1);
    box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.14);
}
.method-choice.selected .choice-icon { background: rgba(var(--accent-rgb), 0.18); border-color: var(--color-gold); }
.method-choice.selected .choice-check { opacity: 1; transform: scale(1); }

/* yao-selector 样式见上方统一定义 */

/* ============================================
   INFO TABLE
   ============================================ */
.info-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.8rem 0;
    font-size: 0.82rem;
    background: rgba(var(--overlay-rgb), 0.02);
    border-radius: var(--radius-sm);
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}
.info-table thead, .info-table tbody { display: table; width: 100%; }
.info-table th, .info-table td {
    padding: 0.5rem 0.6rem;
    text-align: left;
    border-bottom: 1px solid rgba(var(--overlay-rgb), 0.06);
    word-break: break-word;
    overflow-wrap: break-word;
}
.info-table th {
    color: var(--color-gold);
    font-weight: 600;
    font-family: var(--font-display);
    font-size: 0.78rem;
    background: rgba(var(--overlay-rgb), 0.04);
}
.info-table td { color: var(--color-text); white-space: normal; }
.info-table tr:hover td, .info-table tr:active td { background: rgba(var(--accent-rgb), 0.06); }

.info-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* info-table 滚动条美化（移动端视觉提示） */
.info-table::-webkit-scrollbar,
.info-table-wrap::-webkit-scrollbar { height: 5px; }
.info-table::-webkit-scrollbar-track,
.info-table-wrap::-webkit-scrollbar-track { background: rgba(var(--overlay-rgb), 0.04); border-radius: 3px; }
.info-table::-webkit-scrollbar-thumb,
.info-table-wrap::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.3); border-radius: 3px; }
.info-table::-webkit-scrollbar-thumb:hover,
.info-table-wrap::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), 0.5); }
.info-table { scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb), 0.3) rgba(var(--overlay-rgb), 0.04); }

/* ============================================
   MOBILE RESPONSIVE OVERRIDES (max-width: 768px)
   ============================================ */
@media (max-width: 768px) {
    .info-table { font-size: 0.75rem; white-space: normal; }
    .info-table th { white-space: normal !important; word-break: break-word; }
    .info-table th, .info-table td { padding: 0.3rem 0.35rem; }
    .result-section { padding: 0.7rem !important; }
    .result-section h2 { font-size: 1.05rem; }
    .result-section h3 { font-size: 0.95rem; }
    .result-section h4 { font-size: 0.85rem; }
    .interpretation-block { padding: 0.6rem !important; margin-bottom: 0.5rem !important; }
    .interpretation-block p { font-size: 0.8rem !important; line-height: 1.6 !important; }
}
@media (max-width: 480px) {
    .info-table { font-size: 0.7rem; }
    .info-table th, .info-table td { padding: 0.25rem 0.3rem; }
    .result-section { padding: 0.6rem !important; }
    .result-section h2 { font-size: 1rem; }
    .result-section h3 { font-size: 0.9rem; }
    .interpretation-block p { font-size: 0.75rem !important; line-height: 1.55 !important; }
}

/* Hexagram display grid — mobile stacks, desktop side-by-side */
.hex-display-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    align-items: start;
    margin: 1rem 0 2rem;
}
.hex-display-grid.dashed-top {
    border-top: 1px dashed var(--color-border);
    padding-top: 1.5rem;
    margin-top: 1rem;
}
@media (min-width: 768px) {
    .hex-display-grid { grid-template-columns: 5fr 7fr; gap: 2.5rem; }
    .hex-display-grid.reverse { grid-template-columns: 7fr 5fr; }
}

/* ============================================
   INTERPRETATION BLOCK
   ============================================ */
.interpretation-block {
    background: rgba(var(--overlay-rgb), 0.04);
    border-left: 3px solid var(--color-gold);
    border-top: 1px solid rgba(var(--accent-rgb), 0.20);
    border-right: 1px solid rgba(var(--overlay-rgb), 0.08);
    border-bottom: 1px solid rgba(var(--overlay-rgb), 0.08);
    padding: 0.8rem 1rem;
    margin: 0.8rem 0;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.interpretation-block h4 { color: var(--color-gold); margin-bottom: 0.4rem; font-size: 0.9rem; }
.interpretation-block p { color: var(--color-text); font-size: 0.85rem; margin-bottom: 0.4rem; line-height: 1.7; }

/* Result disclaimer */
.result-disclaimer {
    margin-top: 1.2rem;
    padding: 0.8rem 1rem;
    border-top: 1px solid rgba(var(--border-rgb), 0.4);
    text-align: center;
}
.result-disclaimer .disclaimer-line {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: var(--color-gold-light);
    letter-spacing: 0.08em;
    line-height: 1.8;
    margin-bottom: 0.4rem;
    opacity: 0.9;
}
.result-disclaimer .disclaimer-line i { color: var(--color-gold); margin-right: 0.4rem; opacity: 0.8; }
.result-disclaimer .source-line { font-size: 0.75rem; color: var(--color-muted); letter-spacing: 0.05em; }
.result-disclaimer .source-line i { color: var(--color-gold-dark); margin-right: 0.3rem; }

/* ============================================
   GUJI (古籍典藏)
   ============================================ */
.guji-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
    margin-top: 1rem;
}
.guji-card {
    background: rgba(var(--surface-rgb), 0.6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    cursor: pointer;
    transition: transform 0.3s var(--ease-out-expo), border-color 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo);
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}
.guji-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-gold-dark), transparent);
    opacity: 0;
    transition: opacity 0.3s;
}
.guji-card:hover, .guji-card:active {
    transform: translateY(-2px);
    border-color: var(--color-gold-dark);
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.12);
}
.guji-card:hover::before, .guji-card:active::before { opacity: 1; }
.guji-card-cat {
    display: inline-block;
    font-size: 0.68rem;
    color: var(--color-gold);
    border: 1px solid var(--color-gold-dark);
    border-radius: 3px;
    padding: 0.1rem 0.4rem;
    margin-bottom: 0.4rem;
    letter-spacing: 0.1em;
}
.guji-card-title { font-family: var(--font-display); font-size: 1rem; color: var(--color-gold-light); margin-bottom: 0.2rem; letter-spacing: 0.03em; }
.guji-card-meta { font-size: 0.72rem; color: var(--color-muted); margin-bottom: 0.4rem; }
.guji-card-desc { font-size: 0.8rem; color: var(--color-text); line-height: 1.7; opacity: 0.85; }
.guji-card-arrow { margin-top: 0.5rem; font-size: 0.72rem; color: var(--color-gold-dark); }
.guji-card-arrow i { margin-left: 0.2rem; }

/* ============================================
   BODY-USE DISPLAY (梅花易数)
   ============================================ */
.body-use-display {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
    margin: 0.8rem 0;
}
.body-use-card {
    background: var(--color-surface-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
    text-align: center;
}
.body-use-card h4 { color: var(--color-gold); margin-bottom: 0.3rem; font-size: 0.9rem; }
.body-use-card .element { font-size: 1.5rem; color: var(--color-gold-light); margin: 0.3rem 0; }
.body-use-card .trigram-name { font-size: 1rem; color: var(--color-text); }

.relation-badge {
    display: inline-block;
    padding: 0.25rem 0.8rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    margin: 0.4rem 0;
}
.relation-badge.auspicious { background: rgba(var(--accent-rgb), 0.2); color: var(--color-gold-light); border: 1px solid var(--color-gold-dark); }
.relation-badge.unauspicious { background: rgba(139,44,44,0.2); color: var(--color-red-light); border: 1px solid var(--color-red); }

/* 小六壬 relation badges (xlr- prefixed variants) */
.xlr-relations { margin: 0.6rem 0; }
.xlr-relation-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0;
    font-size: 0.85rem;
    border-bottom: 1px solid rgba(var(--border-rgb), 0.3);
}
.xlr-relation-item:last-child { border-bottom: none; }
.xlr-relation-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}
.xlr-relation-badge.auspicious { background: rgba(var(--accent-rgb), 0.2); color: var(--color-gold-light); border: 1px solid var(--color-gold-dark); }
.xlr-relation-badge.unauspicious { background: rgba(139,44,44,0.2); color: var(--color-red-light); border: 1px solid var(--color-red); }

/* ============================================
   LIUREN (大六壬)
   ============================================ */
.liuren-display { display: grid; grid-template-columns: 1fr; gap: 0.8rem; margin: 0.8rem 0; }
.lessons-grid, .transmissions-grid {
    background: var(--color-surface-light);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 1rem;
}
.lessons-grid h3, .transmissions-grid h3 { text-align: center; margin-bottom: 0.6rem; font-size: 0.95rem; }
.lesson-item, .transmission-item {
    display: flex;
    justify-content: space-between;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.82rem;
}
.lesson-item:last-child, .transmission-item:last-child { border-bottom: none; }
.lesson-item .label, .transmission-item .label { color: var(--color-muted); }
.lesson-item .value, .transmission-item .value { color: var(--color-gold-light); font-weight: 600; }

/* ============================================
   SITE FOOTER
   ============================================ */
.site-footer {
    border-top: 1px solid var(--color-border);
    padding: 1.2rem 1rem 1.15rem;
    text-align: center;
    color: var(--color-muted);
    font-size: 0.75rem;
    position: relative;
    z-index: 1;
    margin-top: 1.5rem;
}
.site-footer .footer-decoration {
    color: var(--color-gold);
    margin-bottom: 0.4rem;
    font-size: 0.7rem;
    opacity: 0.6;
}
.site-footer .footer-decoration span { letter-spacing: 0.2em; }
.footer-tagline {
    font-family: var(--font-display);
    font-size: 0.85rem;
    color: var(--color-gold);
    letter-spacing: 0.1em;
    margin-bottom: 0.2rem;
}
.site-footer .disclaimer {
    max-width: 320px;
    margin: 0.3rem auto;
    font-size: 0.68rem;
    opacity: 0.6;
    line-height: 1.5;
}
.footer-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin-top: 0.8rem;
    flex-wrap: wrap;
}
.btn-contact, .btn-join {
    background: transparent;
    border: 1px solid var(--color-gold-dark);
    color: var(--color-gold-light);
    font-size: 0.75rem;
    padding: 0.5rem 0.9rem;
    -webkit-tap-highlight-color: transparent;
    min-height: 40px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    /* 等宽：两按钮文字长度不一，统一最小宽度保持页脚对称 */
    min-width: 122px;
}
.btn-contact:hover, .btn-contact:active,
.btn-join:hover, .btn-join:active {
    background: var(--color-gold-dark);
    color: var(--color-bg);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.3);
}
.btn-join i, .btn-contact i { margin-right: 0; }
.footer-copyright {
    margin-top: 0.6rem;
    font-size: 0.65rem;
    color: var(--color-muted);
    opacity: 0.5;
    letter-spacing: 0.05em;
}

/* ============================================
   MODALS — Bottom Sheet Style (mobile)
   ============================================ */

/* Contact modal */
.contact-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: flex-end;
    justify-content: center;
}
.contact-modal.show { display: flex; }
.contact-modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.7);
    -webkit-animation: contactFadeIn 0.3s ease;
    animation: contactFadeIn 0.3s ease;
}
@keyframes contactFadeIn { from { opacity: 0; } to { opacity: 1; } }

.contact-modal-box {
    position: relative;
    z-index: 1;
    background: rgba(var(--surface-rgb), 0.98);
    border: 1px solid var(--color-border);
    border-bottom: none;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 1.5rem 1.2rem calc(1.5rem + var(--safe-bottom));
    width: 100%;
    max-width: 480px;
    text-align: center;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
    -webkit-animation: contactBoxIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    animation: contactBoxIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
@keyframes contactBoxIn {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
}
.contact-modal-close {
    position: absolute;
    top: 0.6rem;
    right: 0.9rem;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    color: var(--color-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
}
.contact-modal-close:hover, .contact-modal-close:active { color: var(--color-gold); }
.contact-modal-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 0.8rem;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid var(--color-gold-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-gold);
}
.contact-modal-box h3 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.contact-modal-desc { color: var(--color-text); font-size: 0.85rem; line-height: 1.7; margin-bottom: 1.2rem; padding: 0 0.3rem; }
.contact-wechat-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.7rem 0.8rem;
    margin-bottom: 0.6rem;
    flex-wrap: wrap;
}
.contact-wechat-label { color: var(--color-muted); font-size: 0.78rem; white-space: nowrap; }
.contact-wechat-label i { color: #07C160; }
.contact-wechat-id { color: var(--color-gold-light); font-family: var(--font-mono); font-size: 1rem; font-weight: 700; letter-spacing: 0.05em; user-select: all; }
.btn-copy {
    background: var(--color-gold-dark);
    border: none;
    color: var(--color-bg);
    font-family: var(--font-display);
    font-size: 0.75rem;
    padding: 0.35rem 0.7rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all var(--transition);
    white-space: nowrap;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
}
.btn-copy:hover, .btn-copy:active { background: var(--color-gold); box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.4); }
.contact-modal-tip { color: var(--color-muted); font-size: 0.72rem; margin-top: 0.3rem; }

/* Copy toast */
.copy-toast {
    position: fixed;
    bottom: calc(var(--tabbar-h) + var(--safe-bottom) + 1rem);
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    background: var(--color-surface);
    border: 1px solid var(--color-gold);
    border-radius: var(--radius-md);
    padding: 0.8rem 1.4rem;
    color: var(--color-gold-light);
    font-size: 0.85rem;
    z-index: 10002;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 0 20px rgba(var(--accent-rgb), 0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.05s ease, transform 0.05s ease;
    white-space: nowrap;
}
.copy-toast.show { opacity: 1; transform: translateX(-50%) scale(1); }
.copy-toast i { color: #07C160; font-size: 1.1rem; }

/* Legend modal (二十法通玄) */
.legend-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: flex-end;
    justify-content: center;
}
.legend-modal.show { display: flex; }
.legend-modal-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
}
.legend-modal-box {
    position: relative;
    background: rgba(var(--surface-deep-rgb), 0.98);
    border: 1px solid var(--color-gold-dark);
    border-bottom: none;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    width: 100%;
    max-width: 560px;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 1.5rem 1.2rem calc(1.5rem + var(--safe-bottom));
    box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
    -webkit-animation: legendBoxIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    animation: legendBoxIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes legendBoxIn {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
}
.legend-modal-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-gold), var(--color-gold-light), var(--color-gold), transparent);
}
.legend-modal-header { text-align: center; margin-bottom: 1rem; }
.legend-modal-header h3 { font-size: 1.2rem; color: var(--color-gold); }
.legend-modal-header .lm-sub { font-size: 0.68rem; color: var(--color-muted); letter-spacing: 0.2em; margin-top: 0.2rem; }
.legend-modal-body p { font-size: 0.85rem; line-height: 1.8; margin-bottom: 0.8rem; color: var(--color-text); }
.legend-modal-body p .hl { color: var(--color-gold-light); font-weight: 600; }
.legend-modal-body::-webkit-scrollbar { width: 4px; }
.legend-modal-body::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }
.legend-modal-close {
    position: absolute;
    top: 0.6rem;
    right: 0.9rem;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    color: var(--color-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition);
}
.legend-modal-close:hover, .legend-modal-close:active { color: var(--color-gold); }

/* Confirm modal (积分确认等 — 统一 legend-modal 风格) */
.confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 10010;
    display: none;
    align-items: flex-end;
    justify-content: center;
}
.confirm-modal.show { display: flex; }
.confirm-modal-mask { position: absolute; inset: 0; background: rgba(0,0,0,0.7); }
.confirm-modal-box {
    position: relative;
    background: rgba(var(--surface-deep-rgb), 0.98);
    border: 1px solid var(--color-gold-dark);
    border-bottom: none;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 1.5rem 1.2rem calc(1.5rem + var(--safe-bottom) + var(--tabbar-h));
    width: 100%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.5);
    -webkit-animation: confirmBoxIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    animation: confirmBoxIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 10011;
}
.confirm-modal-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-gold), var(--color-gold-light), var(--color-gold), transparent);
}
@keyframes confirmBoxIn {
    from { opacity: 0; transform: translateY(100%); }
    to { opacity: 1; transform: translateY(0); }
}
.confirm-modal-close {
    position: absolute;
    top: 0.6rem;
    right: 0.9rem;
    width: 36px;
    height: 36px;
    background: none;
    border: none;
    color: var(--color-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color var(--transition);
    z-index: 1;
}
.confirm-modal-close:hover, .confirm-modal-close:active { color: var(--color-gold); }
.confirm-modal-header {
    text-align: center;
    margin-bottom: 0.8rem;
}
.confirm-modal-header h3 { font-size: 1.15rem; color: var(--color-gold); margin-bottom: 0.2rem; }
.confirm-modal-header .cm-sub { font-size: 0.68rem; color: var(--color-muted); letter-spacing: 0.2em; }
.confirm-modal-icon {
    width: 56px; height: 56px;
    margin: 0 auto 0.8rem;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid var(--color-gold-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-gold);
}
.confirm-modal-box h3 { font-size: 1.1rem; margin-bottom: 0.4rem; color: var(--color-gold); }
.confirm-modal-desc { color: var(--color-text); font-size: 0.82rem; line-height: 1.7; margin-bottom: 1.2rem; }
.confirm-modal-btns { display: flex; gap: 0.6rem; }
.confirm-btn {
    flex: 1;
    padding: 0.7rem;
    min-height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 0.9rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all var(--transition);
}
.confirm-btn.yes { background: var(--color-gold-dark); color: var(--color-bg); border-color: var(--color-gold-dark); }
.confirm-btn.yes:hover, .confirm-btn.yes:active { background: var(--color-gold); box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.3); }
.confirm-btn.no { background: transparent; color: var(--color-muted); }
.confirm-btn.no:hover, .confirm-btn.no:active { background: rgba(var(--overlay-rgb), 0.05); color: var(--color-text); }

/* Guji modal */
.guji-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: flex-end;
    justify-content: center;
}
.guji-modal.show { display: flex; }
.guji-modal-mask { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); }
.guji-modal-box {
    position: relative;
    max-width: 700px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: rgba(var(--surface-deep-rgb), 0.98);
    border: 1px solid var(--color-gold-dark);
    border-bottom: none;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    padding: 1.5rem 1.2rem calc(1.5rem + var(--safe-bottom));
}
.guji-modal-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-gold), var(--color-gold-light), var(--color-gold), transparent);
}
.guji-modal-close {
    position: absolute;
    top: 0.6rem; right: 0.9rem;
    width: 36px; height: 36px;
    background: none;
    border: none;
    color: var(--color-muted);
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

/* ============================================
   AI INTERPRETATION SECTION
   ============================================ */
.ai-section {
    background: rgba(var(--surface-deep-rgb), 0.88);
    border: 1px solid rgba(var(--border-rgb), 0.6);
    border-radius: var(--radius-lg);
    padding: 1.2rem;
    margin: 1.2rem 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0,0,0,0.30);
    transition: border-color 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo);
}
.ai-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-gold), var(--color-gold-light), var(--color-gold), transparent);
    opacity: 0.15;
    transition: opacity 0.5s var(--ease-out-expo);
}
.ai-section:hover, .ai-section:active {
    border-color: rgba(var(--accent-rgb), 0.35);
    box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 0 20px rgba(var(--accent-rgb), 0.12);
}
.ai-section:hover::before, .ai-section:active::before { opacity: 1; }
/* .ai-section h2 rules moved to RESULT DISPLAY section with !important */

/* ============================================
   AI 芯片图标 — 科技感·炫酷芯片
   暗色硅基主体 + 四面引脚(QFP) + 内部电路走线
   + pin1 圆点 + 中心脉冲核心 + 扫描光 + 呼吸光晕
   引脚/边框使用固定金色，确保四套主题下均可清晰辨识为芯片
   ============================================ */
.ai-chip-icon {
    --chip-gold: #C9A961;
    --chip-gold-light: #E8C77E;
    --chip-gold-dark: #8A7440;
    --chip-glow-rgb: 201, 169, 97;
    --chip-glow-light-rgb: 232, 199, 126;
    display: inline-block;
    width: 1.4em;
    height: 1.4em;
    position: relative;
    vertical-align: -0.32em;
    margin: 0 0.5em 0 0.1em;
    border-radius: 3px;
    overflow: hidden;  /* 裁剪扫描线溢出，不影响 box-shadow 引脚 */
    /* 暗色硅基主体 + 顶部高光 + 内部电路走线 + pin1 圆点 */
    background:
        /* pin1 指示圆点（左上角，真实 IC 标识） */
        radial-gradient(circle at 17% 17%, var(--chip-gold-light) 0 0.9px, transparent 1.3px),
        /* 顶部高光（立体感） */
        linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 35%),
        /* 内部电路 — 横向走线 */
        linear-gradient(rgba(var(--chip-glow-rgb), 0.32), rgba(var(--chip-glow-rgb), 0.32)) 28% 40% / 44% 0.8px no-repeat,
        linear-gradient(rgba(var(--chip-glow-rgb), 0.32), rgba(var(--chip-glow-rgb), 0.32)) 28% 60% / 44% 0.8px no-repeat,
        /* 内部电路 — 纵向走线 */
        linear-gradient(rgba(var(--chip-glow-rgb), 0.32), rgba(var(--chip-glow-rgb), 0.32)) 42% 34% / 0.8px 32% no-repeat,
        linear-gradient(rgba(var(--chip-glow-rgb), 0.32), rgba(var(--chip-glow-rgb), 0.32)) 58% 34% / 0.8px 32% no-repeat,
        /* 硅基主体渐变（深色科技蓝调） */
        linear-gradient(145deg, #1d2843 0%, #0a0e18 100%);
    border: 1px solid var(--chip-gold);
    box-shadow:
        /* 外发光晕（静态） */
        0 0 6px rgba(var(--chip-glow-rgb), 0.30),
        /* 顶部引脚 ×4 */
        -0.42em -0.76em 0 -0.64em var(--chip-gold),
        -0.14em -0.76em 0 -0.64em var(--chip-gold),
         0.14em -0.76em 0 -0.64em var(--chip-gold),
         0.42em -0.76em 0 -0.64em var(--chip-gold),
        /* 底部引脚 ×4 */
        -0.42em 0.76em 0 -0.64em var(--chip-gold),
        -0.14em 0.76em 0 -0.64em var(--chip-gold),
         0.14em 0.76em 0 -0.64em var(--chip-gold),
         0.42em 0.76em 0 -0.64em var(--chip-gold),
        /* 左侧引脚 ×3 */
        -0.76em -0.35em 0 -0.64em var(--chip-gold),
        -0.76em 0       0 -0.64em var(--chip-gold),
        -0.76em 0.35em  0 -0.64em var(--chip-gold),
        /* 右侧引脚 ×3 */
         0.76em -0.35em 0 -0.64em var(--chip-gold),
         0.76em 0       0 -0.64em var(--chip-gold),
         0.76em 0.35em  0 -0.64em var(--chip-gold),
        /* 落地阴影（浅色主题下增加立体感，深色主题下不可见） */
        0 2px 5px rgba(0, 0, 0, 0.45);
    flex-shrink: 0;
    z-index: 0;
    animation: chipGlow 3s ease-in-out infinite;
}
/* 中心脉冲核心 — 模拟处理器运行 */
.ai-chip-icon::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 26%;
    height: 26%;
    border-radius: 1.5px;
    background: linear-gradient(135deg, var(--chip-gold-light), #fff6d8);
    box-shadow:
        0 0 5px var(--chip-gold-light),
        0 0 11px rgba(var(--chip-glow-rgb), 0.65);
    animation: chipCorePulse 1.6s ease-in-out infinite;
    z-index: 1;
}
/* 扫描光线 — 从上至下扫过芯片表面 */
.ai-chip-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 32%;
    background: linear-gradient(180deg, rgba(var(--chip-glow-light-rgb), 0.40), transparent);
    border-radius: 3px 3px 0 0;
    animation: chipScan 2.4s linear infinite;
    z-index: 2;
    pointer-events: none;
    mix-blend-mode: screen;
}
@keyframes chipGlow {
    0%, 100% { filter: drop-shadow(0 0 3px rgba(var(--chip-glow-rgb), 0.40)); }
    50%      { filter: drop-shadow(0 0 8px rgba(var(--chip-glow-rgb), 0.75)); }
}
@keyframes chipCorePulse {
    0%, 100% { opacity: 0.55; transform: translate(-50%, -50%) scale(0.80);
               box-shadow: 0 0 4px var(--chip-gold-light), 0 0 8px rgba(var(--chip-glow-rgb), 0.40); }
    50%      { opacity: 1;    transform: translate(-50%, -50%) scale(1.18);
               box-shadow: 0 0 7px var(--chip-gold-light), 0 0 15px rgba(var(--chip-glow-rgb), 0.85); }
}
@keyframes chipScan {
    0%   { top: 0;    opacity: 0.9; }
    50%  { top: 68%;  opacity: 0.5; }
    100% { top: 100%; opacity: 0; }
}

.ai-lock-card { text-align: center; padding: 1.5rem 1rem; }
.ai-lock-icon { font-size: 2rem; color: var(--color-gold); margin-bottom: 0.6rem; }
.ai-lock-title { font-size: 1rem; color: var(--color-gold-light); margin-bottom: 0.4rem; }
.ai-lock-desc { font-size: 0.8rem; color: var(--color-muted); margin-bottom: 1rem; line-height: 1.7; }
.ai-lock-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.6rem 1.4rem;
    background: rgba(var(--accent-rgb), 0.12);
    border: 1px solid var(--color-gold-dark);
    color: var(--color-gold-light);
    font-family: var(--font-display);
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all var(--transition);
    min-height: 44px;
}
.ai-lock-btn:hover, .ai-lock-btn:active { background: rgba(var(--accent-rgb), 0.2); border-color: var(--color-gold); }

.ai-controls { margin-bottom: 0.8rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ai-control-group { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.ai-control-group label { font-size: 0.78rem; color: var(--color-muted); white-space: nowrap; }
.ai-style-btn, .ai-depth-btn {
    padding: 0.35rem 0.7rem;
    min-height: 36px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    font-size: 0.75rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all var(--transition);
}
.ai-style-btn:hover, .ai-depth-btn:hover,
.ai-style-btn:active, .ai-depth-btn:active { border-color: var(--color-gold-dark); color: var(--color-text); }
.ai-style-btn.active, .ai-depth-btn.active { border-color: var(--color-gold); background: rgba(var(--accent-rgb), 0.12); color: var(--color-gold); }

/* AI 解读 · 视角选择（非命理类型）：八人格 chips 单选 */
.ai-persp-group { align-items: flex-start; }
.ai-persp-group > label { padding-top: 0.45rem; }
.ai-persp-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    flex: 1;
    min-width: 0;
}
.ai-persp-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.3rem 0.62rem;
    min-height: 32px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-muted);
    font-size: 0.72rem;
    font-family: var(--font-display);
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all var(--transition);
}
.ai-persp-chip i { font-size: 0.68rem; opacity: 0.85; transition: transform 0.25s ease; }
.ai-persp-chip:hover { border-color: var(--color-gold-dark); color: var(--color-text); }
.ai-persp-chip:hover i { transform: scale(1.15); }
.ai-persp-chip:active { transform: scale(0.96); }
.ai-persp-chip.active {
    border-color: var(--color-gold);
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--color-gold);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.15);
}
.ai-persp-chip.active i { opacity: 1; text-shadow: 0 0 6px rgba(var(--accent-rgb), 0.5); }

.ai-start-btn {
    width: 100%;
    padding: 0.75rem;
    background: linear-gradient(135deg, #8A7440, #C9A961, #E8C77E);
    color: #0A0A0F;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.25em;
    text-indent: 0.25em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all var(--transition);
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.25);
    min-height: 48px;
}
.ai-start-row { display: flex; gap: 0.6rem; align-items: center; margin-bottom: 0.8rem; }
.ai-start-row .ai-start-btn { margin-bottom: 0; width: 100%; flex: 1 1 100%; }
.ai-eta { font-size: 0.72rem; color: var(--color-muted); white-space: nowrap; }
.ai-eta i { color: var(--color-gold); animation: aiPulse 1.5s ease infinite; }
.ai-start-btn:hover, .ai-start-btn:active { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(var(--accent-rgb), 0.35); }
.ai-start-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.ai-share-btn {
    margin-top: 0.8rem;
    padding: 0.5rem 1.2rem;
    font-size: 0.8rem;
    width: 100%;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    background: rgba(var(--accent-rgb), 0.06);
    color: var(--color-gold-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition);
    -webkit-tap-highlight-color: transparent;
}
.ai-share-btn:hover, .ai-share-btn:active {
    background: rgba(var(--accent-rgb), 0.12);
    border-color: rgba(var(--accent-rgb), 0.45);
    transform: translateY(-1px);
}
.ai-output { margin-top: 0.8rem; }
.ai-result-box {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.8rem;
    margin-top: 0.6rem;
    background: rgba(var(--surface-deep-rgb), 0.3);
    position: relative;
}
.ai-result-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    opacity: 0.6;
}
.ai-status { font-size: 0.8rem; color: var(--color-muted); margin-bottom: 0.6rem; }
.ai-error { color: var(--color-red-light); }

/* ============================================
   AI 解读 · 字号无极滑块（结果出来后显示于结果上方）
   ============================================ */
.ai-fs-bar {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.9rem;
    margin-bottom: 0.55rem;
    background: rgba(var(--surface-deep-rgb), 0.45);
    border: 1px solid rgba(var(--accent-rgb), 0.28);
    border-radius: 999px;
    animation: aiFsBarIn 0.45s cubic-bezier(0.34, 1.3, 0.64, 1) both;
}
.ai-fs-bar[hidden] { display: none; }
@keyframes aiFsBarIn {
    0% { opacity: 0; transform: translateY(-8px); }
    100% { opacity: 1; transform: translateY(0); }
}
.ai-fs-glyph {
    flex: none;
    font-family: var(--font-display);
    color: var(--color-gold);
    line-height: 1;
    user-select: none;
}
.ai-fs-glyph-sm { font-size: 0.66rem; opacity: 0.75; }
.ai-fs-glyph-lg { font-size: 0.98rem; }
.ai-fs-range {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.55), rgba(var(--accent-rgb), 0.18));
    outline: none;
    cursor: pointer;
    margin: 0;
}
.ai-fs-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: var(--color-gold);
    border: 2px solid var(--color-surface);
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6);
    transition: transform 0.15s ease;
}
.ai-fs-range::-webkit-slider-thumb:hover { transform: scale(1.18); }
.ai-fs-range::-webkit-slider-thumb:active { transform: scale(1.05); }
.ai-fs-range::-moz-range-thumb {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--color-gold);
    border: 2px solid var(--color-surface);
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6);
}
.ai-fs-reset {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    background: rgba(var(--accent-rgb), 0.08);
    color: var(--color-gold);
    font-size: 0.68rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.2s ease;
}
.ai-fs-reset:hover { background: rgba(var(--accent-rgb), 0.2); transform: rotate(-60deg); }
.ai-fs-reset:active { transform: scale(0.92); }
.ai-content {
    position: relative;
    /* 字号无极可调：滑块通过 --ai-fs 覆盖（设于 .ai-section 行内样式），历史页等无滑块场景走回退值 */
    font-size: var(--ai-fs, 15.5px);
    line-height: 1.85;
    color: var(--color-text);
    padding: 1.5rem 1.2rem 1.2rem;
    background: rgba(var(--surface-deep-rgb), 0.6);
    border: 2px solid var(--color-gold-dark);
    border-radius: var(--radius-md);
    margin-top: 0;
    box-shadow: inset 0 0 24px rgba(var(--accent-rgb), 0.04), 0 2px 12px rgba(0, 0, 0, 0.15);
}
.ai-content::after {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: calc(var(--radius-md) - 3px);
    pointer-events: none;
}
.ai-content::before {
    content: 'AI 解读结果';
    position: absolute;
    top: -0.62rem;
    left: 1rem;
    background: var(--color-surface);
    color: var(--color-gold);
    font-size: 0.72rem;
    font-weight: 700;
    font-family: var(--font-display);
    padding: 0.1rem 0.7rem;
    letter-spacing: 0.08em;
    border: 1px solid rgba(var(--accent-rgb), 0.4);
    border-radius: var(--radius-sm);
    line-height: 1.4;
    white-space: nowrap;
}
/* AI 解读历史作用域：历史记录页复用 ai-content 内部元素样式（卡片/徽章/标题），
   但不带 .ai-content 的大框外观（避免与历史页容器双框叠加） */
.ai-history-scope {
    font-size: 0.9rem;
    line-height: 1.85;
    color: var(--color-text);
}
:is(.ai-content, .ai-history-scope) .ai-h3, :is(.ai-content, .ai-history-scope) .ai-h4 { color: var(--color-gold); margin: 0.8rem 0 0.4rem; }
:is(.ai-content, .ai-history-scope) .ai-h3 {
    font-size: calc(var(--ai-fs, 15.5px) * 1.12);
    font-weight: 700;
    padding: 0.3rem 0.6rem;
    border-left: 3px solid var(--color-gold);
    background: rgba(var(--accent-rgb), 0.06);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    line-height: 1.5;
}
:is(.ai-content, .ai-history-scope) .ai-h4 { font-size: calc(var(--ai-fs, 15.5px) * 1.04); font-weight: 600; padding-left: 0.4rem; border-left: 2px solid rgba(var(--accent-rgb), 0.4); }
:is(.ai-content, .ai-history-scope) strong { color: var(--color-gold-light); font-weight: 600; }
:is(.ai-content, .ai-history-scope) .ai-p { margin: 0.3rem 0; padding: 0; }
:is(.ai-content, .ai-history-scope) br + br { display: block; margin-top: 0.4rem; }

/* AI 解读 ·【盘面核心】数据卡片：AI 输出首段的盘面复述，独立成卡与后文解读区分 */
:is(.ai-content, .ai-history-scope) .ai-pancore {
    margin: 0.4rem 0 1rem;
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    border-radius: var(--radius-sm);
    background: rgba(var(--surface-deep-rgb), 0.45);
    overflow: hidden;
}
:is(.ai-content, .ai-history-scope) .ai-pancore-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.45rem 0.8rem;
    background: rgba(var(--accent-rgb), 0.1);
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.25);
    color: var(--color-gold);
    font-size: 0.78rem;
    font-family: var(--font-display);
    letter-spacing: 0.18em;
}
:is(.ai-content, .ai-history-scope) .ai-pancore-head i { font-size: 0.72rem; opacity: 0.85; }
:is(.ai-content, .ai-history-scope) .ai-pancore-body {
    padding: 0.6rem 0.85rem;
    font-size: calc(var(--ai-fs, 15.5px) * 0.92);
    line-height: 1.85;
    color: var(--color-text);
    font-family: var(--font-display);
}
:is(.ai-content, .ai-history-scope) .ai-pancore-body strong { color: var(--color-gold-light); }

/* AI 解读 ·【标签】行内徽章：句中【】标记的轻量美化（淡底细边金字，克制不抢戏） */
:is(.ai-content, .ai-history-scope) .ai-tag {
    display: inline-block;
    padding: 0 0.45em;
    margin: 0 0.15em;
    border-radius: 4px;
    background: rgba(var(--accent-rgb), 0.10);
    border: 1px solid rgba(var(--accent-rgb), 0.30);
    color: var(--color-gold-light);
    font-weight: 600;
    font-size: 0.92em;
    line-height: 1.7;
    vertical-align: baseline;
}

/* AI 解读 ·【小节标题】卡片：行首【开运首饰】【事业财运】等框式呈现（盘面核心同族轻量版） */
:is(.ai-content, .ai-history-scope) .ai-sec-card {
    margin: 0.65rem 0;
    border: 1px solid rgba(var(--accent-rgb), 0.38);
    border-radius: var(--radius-sm);
    background: rgba(var(--surface-deep-rgb), 0.45);
    overflow: hidden;
}
:is(.ai-content, .ai-history-scope) .ai-sec-card-head {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.38rem 0.85rem;
    background: rgba(var(--accent-rgb), 0.10);
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.22);
    color: var(--color-gold);
    font-weight: 700;
    font-family: var(--font-display);
    font-size: 0.9em;
    letter-spacing: 0.04em;
    line-height: 1.5;
}
:is(.ai-content, .ai-history-scope) .ai-sec-card-tab {
    flex: none;
    width: 3px;
    height: 0.95em;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--color-gold-light), var(--color-gold-dark, rgba(var(--accent-rgb), 0.6)));
}
:is(.ai-content, .ai-history-scope) .ai-sec-card-body {
    padding: 0.5rem 0.9rem;
    font-size: 0.95em;
    line-height: 1.85;
    color: var(--color-text);
}
:is(.ai-content, .ai-history-scope) .ai-sec-card-body strong { color: var(--color-gold-light); }

.ai-followup { margin-top: 1rem; }
.ai-followup-divider { text-align: center; margin: 1rem 0; position: relative; }
.ai-followup-divider span {
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: var(--color-gold-light);
    background: var(--color-surface);
    padding: 4px 14px;
    position: relative;
    z-index: 1;
    border-radius: 12px;
    border: 1px solid rgba(var(--gold-rgb, 201,169,97), 0.25);
    text-shadow: 0 0 8px rgba(201,169,97,0.2);
    box-shadow: 0 0 12px rgba(201,169,97,0.06);
}
.ai-followup-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--color-border) 20%, var(--color-border) 80%, transparent); }
.ai-followup-list { margin-top: 0.6rem; }
/* 追问字号跟随主解读（--ai-fs 由滑块设于 .ai-section，继承生效） */
.ai-followup-q, .ai-followup-a { padding: 0.5rem 0; font-size: calc(var(--ai-fs, 15.5px) * 0.96); }
.ai-followup-q { color: var(--color-gold-light); border-bottom: 1px solid rgba(var(--border-rgb), 0.3); }
.ai-followup-q i { color: var(--color-gold); margin-right: 0.3rem; }
.ai-followup-a { color: var(--color-text); padding: 0.6rem 0.8rem; background: rgba(var(--surface-deep-rgb), 0.4); border: 1px solid rgba(var(--accent-rgb), 0.2); border-radius: var(--radius-sm); margin: 0.3rem 0; }
.ai-followup-a strong { color: var(--color-gold-light); }
.ai-followup-typing { font-size: 0.78rem; color: var(--color-muted); }
.ai-followup-typing i { margin-right: 0.3rem; }
.ai-followup-input-row { display: flex; gap: 0.4rem; margin-top: 0.8rem; align-items: stretch; }
.ai-followup-input {
    flex: 0 1 auto;
    width: calc(100% - 100px);
    max-width: 240px;
    min-width: 0;
    padding: 0.6rem 0.7rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 16px;
    min-height: 48px;
}
.ai-followup-input:focus { outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12); }
.ai-followup-input::placeholder { color: var(--color-muted); }
.ai-followup-btn {
    flex-shrink: 0;
    min-width: 88px;
    min-height: 48px;
    padding: 0 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    background: #C9A961;
    background: var(--color-gold, #C9A961) !important;
    border: 1px solid var(--color-gold) !important;
    color: #1a1208 !important;  /* 固定深棕黑，确保金色背景上高对比 */
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-family: var(--font-body);
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: all var(--transition);
}
.ai-followup-btn:hover, .ai-followup-btn:active {
    background: var(--color-gold-light);
    border-color: var(--color-gold-light);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.3);
}
.ai-followup-btn:active { transform: scale(0.94); }
.ai-followup-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.ai-followup-btn i { font-size: 0.95rem; color: #1a1208 !important; }  /* 纸飞机图标固定深色，与金色背景高对比 */
.ai-followup-btn span { margin-left: 0.3rem; color: inherit; }
/* 太极水墨主题：该主题 --color-gold 为深墨黑（#2B2B2B），按钮呈深墨底，
   原固定深棕黑文字/图标与底色重合无法辨认 → 改为宣纸浅色（含纸飞机图标） */
html[data-theme="taiji"] .ai-followup-btn,
html[data-theme="taiji"] .ai-followup-btn:hover,
html[data-theme="taiji"] .ai-followup-btn:active {
    color: #F5F1E8 !important;
}
html[data-theme="taiji"] .ai-followup-btn i { color: #F5F1E8 !important; }

/* AI Thinking animation (loading state) */
@keyframes aiPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.92); }
}
@keyframes aiOrbGlow {
    0%, 100% { box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.3), inset 0 0 8px rgba(var(--accent-rgb), 0.2); }
    50% { box-shadow: 0 0 24px rgba(var(--accent-rgb), 0.6), inset 0 0 16px rgba(var(--accent-rgb), 0.4); }
}
@keyframes aiCoreSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes aiGlyphFloat {
    0%, 100% { opacity: 0.3; transform: translateY(0); }
    50% { opacity: 0.9; transform: translateY(-4px); }
}
.ai-thinking {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
    padding: 1.5rem 1rem;
}
.ai-thinking-orb {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid var(--color-gold);
    background: rgba(var(--accent-rgb), 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: aiOrbGlow 2s ease-in-out infinite;
    position: relative;
}
.ai-thinking-core {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-gold);
    animation: aiCoreSpin 3s linear infinite, aiPulse 1.5s ease infinite;
}
.ai-thinking-glyphs {
    display: flex;
    gap: 0.6rem;
    font-family: var(--font-display);
    font-size: 0.85rem;
}
.ai-thinking-glyphs span {
    color: var(--color-gold);
    opacity: 0.3;
    animation: aiGlyphFloat 2s ease-in-out infinite;
}
.ai-thinking-glyphs span:nth-child(1) { animation-delay: 0s; }
.ai-thinking-glyphs span:nth-child(2) { animation-delay: 0.2s; }
.ai-thinking-glyphs span:nth-child(3) { animation-delay: 0.4s; }
.ai-thinking-glyphs span:nth-child(4) { animation-delay: 0.6s; }
.ai-thinking-glyphs span:nth-child(5) { animation-delay: 0.8s; }
.ai-thinking-label {
    font-size: 0.78rem;
    color: var(--color-muted);
    letter-spacing: 0.1em;
    font-family: var(--font-display);
}

/* ============================================
   AI 解读 · 维度设置（可折叠多选）
   ============================================ */
.ai-dim-wrap { margin-bottom: 0.8rem; }
.ai-dim-toggle {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    padding: 0.55rem 0.8rem;
    min-height: 40px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    font-size: 0.78rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all var(--transition);
}
.ai-dim-toggle:hover, .ai-dim-toggle:active { border-color: var(--color-gold-dark); }
.ai-dim-toggle > i:first-child { color: var(--color-gold); font-size: 0.8rem; }
.ai-dim-toggle-label { white-space: nowrap; color: var(--color-text); }
.ai-dim-summary {
    flex: 1;
    min-width: 0;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-gold);
    font-size: 0.74rem;
}
.ai-dim-summary-empty { color: var(--color-muted); }
.ai-dim-chevron { font-size: 0.7rem; transition: transform var(--transition); }
.ai-dim-toggle[aria-expanded="true"] .ai-dim-chevron { transform: rotate(180deg); }
.ai-dim-panel {
    padding: 0.7rem 0.8rem;
    margin-top: 0.45rem;
    background: rgba(var(--surface-deep-rgb), 0.4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}
.ai-dim-hint { font-size: 0.7rem; color: var(--color-muted); margin-bottom: 0.55rem; }
.ai-dim-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ai-dim-chip {
    padding: 0.32rem 0.7rem;
    min-height: 32px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-muted);
    font-size: 0.74rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all var(--transition);
}
.ai-dim-chip:hover, .ai-dim-chip:active { border-color: var(--color-gold-dark); color: var(--color-text); }
.ai-dim-chip.active {
    border-color: var(--color-gold);
    background: rgba(var(--accent-rgb), 0.12);
    color: var(--color-gold);
}
/* 已选满 3 项：其余普通维度置灰不可点（「全面解读」不置灰，可随时切换） */
.ai-dim-chip.dim-max {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}
.ai-dim-alert {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding: 0.45rem 0.7rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-danger);
    border-radius: var(--radius-sm);
    color: var(--color-danger);
    font-size: 0.74rem;
}
/* 修复：display:flex 会覆盖 hidden 属性的 UA 样式(display:none)，
   导致「请选择维度设置」提示在用户选择后不消失 */
.ai-dim-alert[hidden] { display: none; }
@keyframes aiDimShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}
.ai-dim-shake { animation: aiDimShake 0.4s ease; }

/* ============================================
   AI 解读 · 启微（联网检索增强）开关行
   内置于维度设置面板（chips 之下），随面板收起展开
   交互动画：弹性旋钮 / 雷达扫描 / 流动光带 / 开启冲击波
   ============================================ */
.ai-qw-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.65rem 0.85rem;
    margin-top: 0.65rem;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), transform 0.2s ease;
}
.ai-qw-row:hover { border-color: rgba(var(--accent-rgb), 0.45); }
.ai-qw-row:active { transform: scale(0.985); }
.ai-qw-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex: none;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    color: var(--color-gold);
    font-size: 0.75rem;
    font-family: var(--font-display);
    white-space: nowrap;
    transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.ai-qw-badge i { transition: text-shadow 0.4s ease; }
.ai-qw-desc {
    flex: 1;
    min-width: 0;
    font-size: 0.72rem;
    color: var(--color-muted);
    line-height: 1.45;
    transition: color var(--transition);
}
/* 开关轨道 */
.ai-qw-switch {
    flex: none;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: var(--color-border);
    position: relative;
    transition: background 0.45s ease, box-shadow 0.45s ease;
}
/* 旋钮：弹性回弹缓动（过冲回落，灵动质感） */
.ai-qw-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.35s ease, box-shadow 0.35s ease;
}
/* 旋钮能量核心：开启时弹出白色光点 */
.ai-qw-knob::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.45s 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===== 开启态 ===== */
.ai-qw-row.ai-qw-on {
    border-color: rgba(var(--accent-rgb), 0.55);
    background: rgba(var(--accent-rgb), 0.06);
    animation: aiQwGlowPulse 2.6s ease-in-out infinite;
}
.ai-qw-row.ai-qw-on .ai-qw-badge {
    background: rgba(var(--accent-rgb), 0.18);
    border-color: rgba(var(--accent-rgb), 0.65);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.25);
}
/* 雷达扫描：卫星图标匀速旋转 */
.ai-qw-row.ai-qw-on .ai-qw-badge i {
    animation: aiQwRadar 3s linear infinite;
    text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.8);
}
.ai-qw-row.ai-qw-on .ai-qw-desc { color: var(--color-text); }
/* 轨道：金色流光带循环流动 */
.ai-qw-row.ai-qw-on .ai-qw-switch {
    background: linear-gradient(100deg,
        rgba(var(--accent-rgb), 0.35) 0%,
        rgba(var(--accent-rgb), 0.75) 30%,
        rgba(var(--accent-rgb), 0.45) 55%,
        rgba(var(--accent-rgb), 0.8) 100%);
    background-size: 200% 100%;
    animation: aiQwShimmer 2.2s linear infinite;
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.35), inset 0 0 4px rgba(255, 255, 255, 0.15);
}
.ai-qw-row.ai-qw-on .ai-qw-knob {
    transform: translateX(20px);
    background: var(--color-gold);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.7), 0 1px 3px rgba(0, 0, 0, 0.35);
}
.ai-qw-row.ai-qw-on .ai-qw-knob::after { transform: translate(-50%, -50%) scale(1); }

/* 开启瞬间：冲击波光环从开关行扩散一圈 */
.ai-qw-row.ai-qw-burst { animation: aiQwBurst 0.85s cubic-bezier(0.16, 1, 0.3, 1) 1; }
.ai-qw-row.ai-qw-burst.ai-qw-on {
    animation: aiQwBurst 0.85s cubic-bezier(0.16, 1, 0.3, 1) 1,
               aiQwGlowPulse 2.6s ease-in-out 0.85s infinite;
}
.ai-qw-row.ai-qw-disabled { opacity: 0.55; cursor: not-allowed; }

/* ===== 开启确认卡片（点开关弹出，二次确认） ===== */
.ai-qw-confirm {
    margin-top: 0.55rem;
    padding: 0.7rem 0.8rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    border-left: 3px solid var(--color-gold);
    background: rgba(var(--accent-rgb), 0.06);
}
.ai-qw-confirm[hidden] { display: none; }
.ai-qw-confirm.ai-qw-confirm-in { animation: aiQwConfirmIn 0.45s cubic-bezier(0.34, 1.3, 0.64, 1) both; }
.ai-qw-confirm-tip {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.72rem;
    line-height: 1.55;
    color: var(--color-text);
}
.ai-qw-confirm-tip i {
    flex: none;
    margin-top: 2px;
    color: var(--color-gold);
    animation: aiQwTipPulse 1.6s ease-in-out infinite;
}
.ai-qw-confirm-btns {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.6rem;
}
.ai-qw-cancel,
.ai-qw-agree {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-family: var(--font-display);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: all 0.25s ease;
}
.ai-qw-cancel {
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-muted);
}
.ai-qw-cancel:hover { border-color: var(--color-muted); color: var(--color-text); }
.ai-qw-agree {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.9), rgba(var(--accent-rgb), 0.65));
    border: 1px solid rgba(var(--accent-rgb), 0.8);
    color: var(--color-bg);
    font-weight: 600;
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.3);
}
.ai-qw-agree i { animation: aiQwBoltJitter 1.8s ease-in-out infinite; }
.ai-qw-agree:hover { transform: translateY(-1px); box-shadow: 0 3px 16px rgba(var(--accent-rgb), 0.5); }
.ai-qw-agree:active { transform: translateY(0) scale(0.96); }

/* ===== 启微开关关键帧 ===== */
@keyframes aiQwRadar {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes aiQwShimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}
@keyframes aiQwGlowPulse {
    0%, 100% { box-shadow: 0 0 8px 0 rgba(var(--accent-rgb), 0.12); }
    50% { box-shadow: 0 0 16px 2px rgba(var(--accent-rgb), 0.3); }
}
@keyframes aiQwBurst {
    0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55); }
    100% { box-shadow: 0 0 0 16px rgba(var(--accent-rgb), 0); }
}
@keyframes aiQwConfirmIn {
    0% { opacity: 0; transform: translateY(-10px) scale(0.96); }
    60% { opacity: 1; transform: translateY(3px) scale(1.012); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes aiQwTipPulse {
    0%, 100% { opacity: 0.75; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.15); }
}
@keyframes aiQwBoltJitter {
    0%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-10deg) scale(1.08); }
    50% { transform: rotate(6deg) scale(1); }
    75% { transform: rotate(-4deg) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
    .ai-qw-row.ai-qw-on,
    .ai-qw-row.ai-qw-on .ai-qw-badge i,
    .ai-qw-row.ai-qw-on .ai-qw-switch,
    .ai-qw-confirm-tip i,
    .ai-qw-agree i { animation: none; }
}

/* 追问区 · 启微锁定徽标（主解读启微后追问不可关闭联网） */
.ai-followup-divider .ai-followup-qw {
    font-size: 0.66rem;
    letter-spacing: 1px;
    padding: 2px 10px;
    border-radius: 999px;
    border-color: rgba(var(--accent-rgb), 0.45);
    color: var(--color-gold);
    margin-left: 0.5rem;
}
.ai-followup-divider .ai-followup-qw i { margin-right: 0.25rem; font-size: 0.62rem; }

/* ============================================
   AI 解读 · 启微专属等待动画（天机星轨 v2）
   雷达扫描扇形 + 罗盘刻度环 + 双轨星点环绕 +
   「微」核呼吸 + 卦字漂浮 + 三段阶段文案
   多层差速运动（快扫描/中轨道/慢刻度）营造灵动感
   ============================================ */
.ai-thinking-qiwei {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.6rem 1rem;
}
.qw-scene {
    position: relative;
    width: 128px;
    height: 128px;
}
/* 底衬细环：锚定构图 */
.qw-scene::before {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 50%;
    border: 1px solid rgba(var(--accent-rgb), 0.16);
}
/* 雷达扫描：彗尾扇形光束绕心巡视（联网检索的具象） */
.qw-sweep {
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        rgba(var(--accent-rgb), 0) 0deg,
        rgba(var(--accent-rgb), 0.42) 52deg,
        rgba(var(--accent-rgb), 0) 68deg);
    -webkit-mask: radial-gradient(circle, transparent 26%, #000 27%);
    mask: radial-gradient(circle, transparent 26%, #000 27%);
    animation: qwSpinCW 2.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
/* 罗盘刻度环：两种粒度刻度叠出星盘刻度盘质感，极慢反向旋转 */
.qw-tickring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        repeating-conic-gradient(rgba(var(--accent-rgb), 0.72) 0deg 1.3deg, transparent 1.3deg 30deg),
        repeating-conic-gradient(rgba(var(--accent-rgb), 0.34) 0deg 1deg, transparent 1deg 7.5deg);
    -webkit-mask: radial-gradient(circle, transparent 91%, #000 92%);
    mask: radial-gradient(circle, transparent 91%, #000 92%);
    animation: qwSpinCCW 46s linear infinite;
}
/* 星点轨道：双轨道差速（内轨快而带脉动节奏、外轨慢而线性反向） */
.qw-orbit { position: absolute; border-radius: 50%; }
.qw-orbit::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(var(--accent-rgb), 0.13);
}
.qw-orbit-a { inset: 16px; animation: qwSpinCW 3.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; }
.qw-orbit-b { inset: 4px; animation: qwSpinCCW 6.2s linear infinite; }
.qw-dot {
    position: absolute;
    top: -3.5px;
    left: 50%;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    border-radius: 50%;
    background: var(--color-gold);
    box-shadow: 0 0 10px 2px rgba(var(--accent-rgb), 0.65);
}
.qw-dot-2 {
    top: 88%;
    left: 82%;
    width: 5px;
    height: 5px;
    margin: -2px 0 0 -2px;
    opacity: 0.72;
}
@keyframes qwSpinCW { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes qwSpinCCW { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }
/* 「微」核：呼吸胀缩 + 光晕强弱律动 */
.qw-core {
    position: absolute;
    inset: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%,
        rgba(var(--accent-rgb), 0.28),
        rgba(var(--accent-rgb), 0.06) 62%);
    border: 1px solid rgba(var(--accent-rgb), 0.5);
    box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.28), inset 0 0 12px rgba(var(--accent-rgb), 0.14);
    color: var(--color-gold);
    font-family: var(--font-display);
    font-size: 1.2rem;
    text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.8);
    animation: qwCoreBreath 2.2s ease-in-out infinite;
}
@keyframes qwCoreBreath {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 18px rgba(var(--accent-rgb), 0.28), inset 0 0 12px rgba(var(--accent-rgb), 0.14);
    }
    50% {
        transform: scale(1.07);
        box-shadow: 0 0 30px rgba(var(--accent-rgb), 0.5), inset 0 0 18px rgba(var(--accent-rgb), 0.26);
    }
}
/* 卦字漂浮：呼应普通态的卦字浮动，绕场景四缘升腾隐现 */
.qw-glyphs {
    position: absolute;
    inset: -14px;
    pointer-events: none;
}
.qw-glyphs span {
    position: absolute;
    color: var(--color-gold);
    font-family: var(--font-display);
    font-size: 0.8rem;
    opacity: 0;
    text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6);
    animation: qwGlyphDrift 4.2s ease-in-out infinite;
}
.qw-glyphs span:nth-child(1) { top: 8%; left: -6%; animation-delay: 0s; }
.qw-glyphs span:nth-child(2) { top: -9%; left: 38%; animation-delay: 0.85s; }
.qw-glyphs span:nth-child(3) { top: 12%; right: -8%; animation-delay: 1.7s; }
.qw-glyphs span:nth-child(4) { bottom: -11%; right: 22%; animation-delay: 2.55s; }
.qw-glyphs span:nth-child(5) { bottom: 6%; left: -10%; animation-delay: 3.4s; }
@keyframes qwGlyphDrift {
    0% { opacity: 0; transform: translateY(5px) scale(0.85); }
    30% { opacity: 0.95; }
    60% { opacity: 0.55; }
    100% { opacity: 0; transform: translateY(-13px) scale(1.02); }
}
/* 三段阶段文案：天机推演中 → 启微中… → 参详中… */
.qw-stages {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.1rem;
    font-family: var(--font-display);
    font-size: 0.78rem;
}
.qw-stage {
    color: var(--color-muted);
    opacity: 0.4;
    padding: 0.15rem 0.1rem;
    transition: color 0.45s ease, opacity 0.45s ease;
}
.qw-stage + .qw-stage::before {
    content: '·';
    margin: 0 0.5rem;
    color: var(--color-border);
}
.qw-stage.active {
    color: var(--color-gold);
    opacity: 1;
    text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.5);
    animation: qwStageBreath 1.8s ease-in-out infinite;
}
@keyframes qwStageBreath {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}
/* reduced-motion：装饰性动画全部停用，元素保持静态可见 */
@media (prefers-reduced-motion: reduce) {
    .qw-sweep, .qw-glyphs { display: none; }
    .qw-tickring, .qw-orbit-a, .qw-orbit-b, .qw-core { animation: none; }
    .qw-stage.active { animation: none; opacity: 1; }
}

/* ============================================
   SMALL SIX-REN (小六壬)
   ============================================ */
.xlr-overview {
    margin: 0.8rem 0;
    padding: 0.8rem;
    background: rgba(var(--surface-deep-rgb), 0.4);
    border-radius: var(--radius-md);
}
.cast-panel {
    padding: 0.8rem;
    background: rgba(var(--surface-deep-rgb), 0.3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    margin-top: 0.5rem;
}
.xlr-gods-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.8rem;
    margin: 1rem 0;
}
.xlr-god-card {
    background: rgba(var(--surface-deep-rgb), 0.6);
    border: 1px solid rgba(var(--border-rgb), 0.6);
    border-radius: var(--radius-md);
    padding: 1rem 0.8rem;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: border-color 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo), transform 0.4s var(--ease-out-expo);
}
.xlr-god-card:hover, .xlr-god-card:active { border-color: rgba(var(--accent-rgb), 0.35); box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.1); transform: translateY(-2px); }
.xlr-god-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--color-gold), transparent); opacity: 0.3; }
.xlr-god-stage { font-size: 0.75rem; color: var(--color-muted); letter-spacing: 0.15em; margin-bottom: 0.3rem; }
.xlr-god-name { font-size: 1.5rem; font-weight: 700; color: var(--color-gold-light); margin-bottom: 0.3rem; font-family: var(--font-display); text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.25); }
.xlr-god-meta { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 0.5rem; font-size: 0.8rem; }
.xlr-element { display: inline-block; padding: 0.1rem 0.4rem; border: 1px solid var(--color-border); border-radius: 4px; font-weight: 600; font-size: 0.72rem; }
.xlr-direction { color: var(--color-muted); font-size: 0.75rem; }
.xlr-god-trait { font-size: 0.9rem; color: var(--color-gold); font-weight: 600; margin-bottom: 0.2rem; }
.xlr-god-keyword { font-size: 0.75rem; color: var(--color-muted); margin-bottom: 0.5rem; }
.xlr-god-meaning { font-size: 0.8rem; line-height: 1.7; color: var(--color-text); opacity: 0.85; }

/* ============================================
   BACKGROUND EFFECTS
   ============================================ */
.qn-glyph-layer { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.qn-glyph {
    position: absolute;
    font-family: var(--font-display);
    color: var(--color-gold);
    opacity: 0;
    user-select: none;
    white-space: nowrap;
    animation: qnGlyphFloat var(--glyph-duration, 10s) ease-in-out infinite;
    animation-delay: var(--glyph-delay, 0s);
}
@keyframes qnGlyphFloat {
    0% { opacity: 0; transform: translateY(16px) scale(0.92); }
    18% { opacity: var(--glyph-peak, 0.10); }
    60% { opacity: calc(var(--glyph-peak, 0.10) * 0.7); }
    85% { opacity: 0; }
    100% { opacity: 0; transform: translateY(-30px) scale(1.05); }
}
.qn-particle {
    position: absolute;
    width: 3px; height: 3px;
    background: var(--color-gold-light);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
    box-shadow: 0 0 6px rgba(var(--accent-light-rgb), 0.5);
    animation: qnFloatParticle var(--p-duration, 12s) ease-in-out infinite;
    animation-delay: var(--p-delay, 0s);
}
@keyframes qnFloatParticle {
    0%, 100% { opacity: 0; transform: translateY(0) translateX(0); }
    10% { opacity: 0.5; }
    50% { transform: translateY(-80px) translateX(20px); }
    90% { opacity: 0.5; }
}
@keyframes qnFloatParticleAlt {
    0%, 100% { opacity: 0; transform: translateY(0) translateX(0); }
    10% { opacity: 0.35; }
    50% { transform: translateY(-60px) translateX(-15px); }
    90% { opacity: 0.35; }
}
.qn-glow {
    position: absolute;
    width: 256px; height: 256px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.06), transparent 70%);
    /* 性能优化：径向渐变本身即为软边光晕，移除冗余 blur(60px)（大面积滤镜每帧重绘是卡顿主源之一） */
    pointer-events: none;
    z-index: 0;
}
.qn-glow-breathe { animation: qnGlowBreathe 4s ease-in-out infinite; }
@keyframes qnGlowBreathe {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.3)); text-shadow: 0 0 10px rgba(var(--accent-rgb), 0.15); }
    50% { filter: drop-shadow(0 0 24px rgba(var(--accent-rgb), 0.6)); text-shadow: 0 0 30px rgba(var(--accent-rgb), 0.3); }
}

/* ============================================
   朱砂宣纸专属背景：八卦罗盘 + 太极印 + 朱砂洇晕 + 宣纸肌理
   （区别于其他主题的"漂浮字 + 金粉"通用层：zhusha 隐藏漂浮字，
    改以双八卦罗盘缓慢旋转为骨，朱砂洇晕呼吸为韵，宣纸纤维为底）
   ============================================ */
.zs-bg-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    display: none;              /* 其余主题零开销；仅朱砂主题点亮 */
}
html[data-theme="zhusha"] .zs-bg-layer { display: block; }
/* 朱砂主题隐藏通用漂浮术数字符（金粉粒子保留，主题下自动呈朱砂色） */
html[data-theme="zhusha"] .qn-glyph { display: none; }

/* 宣纸肌理：替换通用星点纹理 → 纸纤维斑驳 + 陈年茶渍 */
html[data-theme="zhusha"] body::before {
    background-image:
        radial-gradient(ellipse 520px 400px at 16% 18%, rgba(184, 58, 42, 0.028), transparent 70%),
        radial-gradient(ellipse 560px 420px at 86% 76%, rgba(146, 45, 31, 0.024), transparent 70%),
        radial-gradient(ellipse 460px 340px at 55% 108%, rgba(128, 96, 74, 0.030), transparent 70%),
        radial-gradient(circle at 30% 60%, rgba(146, 100, 80, 0.05) 0.5px, transparent 1.6px),
        radial-gradient(circle at 72% 38%, rgba(146, 100, 80, 0.04) 0.5px, transparent 1.6px),
        radial-gradient(circle at 48% 86%, rgba(146, 100, 80, 0.045) 0.5px, transparent 1.6px),
        repeating-linear-gradient(93deg, rgba(122, 104, 86, 0.017) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(2deg, rgba(122, 104, 86, 0.013) 0 1px, transparent 1px 5px);
    background-size: 100% 100%, 100% 100%, 100% 100%, 260px 260px, 320px 320px, 280px 280px, 100% 100%, 100% 100%;
    opacity: 1;                 /* 渐变本身已极淡，无需再乘 starfield 透明度 */
}

/* 八卦罗盘：外实环 + 内虚环 + 八卦字环 + 中央太极印，超慢旋转 */
.zs-bagua {
    position: absolute;
    border-radius: 50%;
    animation: zsSpin 320s linear infinite;
}
.zs-bagua-sm { animation-direction: reverse; animation-duration: 260s; }
.zs-bagua::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(184, 58, 42, 0.09);
}
.zs-bagua::after {
    content: '';
    position: absolute;
    inset: 13%;
    border-radius: 50%;
    border: 1px dashed rgba(184, 58, 42, 0.07);
}
/* 大盘：右上角探出；小盘：左下角探出（对角构图） */
.zs-bagua-lg { width: 520px; height: 520px; top: -140px; right: -150px; --zs-ring-r: 232px; }
.zs-bagua-sm { width: 330px; height: 330px; bottom: 4%; left: -118px; --zs-ring-r: 146px; }
.zs-trigram {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1em; height: 1em;
    margin: -0.5em 0 0 -0.5em;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 26px;
    line-height: 1;
    color: rgba(146, 45, 31, 0.14);
    /* 先天八卦序：乾0 兑1 离2 震3 坤4 艮5 坎6 巽7，径向排布 */
    transform: rotate(calc(var(--i) * 45deg)) translateY(calc(var(--zs-ring-r) * -1));
}
.zs-bagua-sm .zs-trigram { font-size: 17px; }
.zs-taiji {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-size: 64px;
    line-height: 1;
    color: rgba(184, 58, 42, 0.11);
    text-shadow: 0 0 24px rgba(184, 58, 42, 0.10);
}
.zs-bagua-sm .zs-taiji { font-size: 38px; }
@keyframes zsSpin { to { transform: rotate(360deg); } }

/* 朱砂洇晕：纸上朱砂洇开的暖斑，缓慢呼吸 */
.zs-ink {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 42% 46%, rgba(184, 58, 42, 0.052), rgba(184, 58, 42, 0.024) 46%, transparent 70%);
    animation: zsInkBreathe 15s ease-in-out infinite;
}
.zs-ink-1 { width: 430px; height: 430px; left: 52%; top: 56%; }
.zs-ink-2 { width: 300px; height: 300px; left: 10%; top: 10%; animation-delay: -5s; animation-duration: 19s; }
.zs-ink-3 { width: 240px; height: 240px; left: 76%; top: 4%; animation-delay: -9s; animation-duration: 16s; }
@keyframes zsInkBreathe {
    0%, 100% { opacity: 0.55; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.12); }
}
/* 低端机型：中低端屏不加旋转洇晕动画只保留静态水印 */
@media (max-width: 420px) {
    .zs-bagua, .zs-ink { animation: none !important; }
}

/* Ink spread effects */
.qn-ink-spread { position: relative; }
.qn-ink-spread::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.15), transparent 70%);
    opacity: 0;
    animation: qnInkSpread 1.5s ease-out forwards;
    pointer-events: none;
}
@keyframes qnInkSpread {
    0% { opacity: 0.8; transform: scale(0); filter: blur(0); }
    40% { opacity: 0.5; filter: blur(4px); }
    100% { opacity: 0; filter: blur(12px); transform: scale(2.5); }
}
@keyframes qnInkSpreadDelayed {
    0%, 30% { opacity: 0; transform: scale(0); }
    31% { opacity: 0.6; }
    100% { opacity: 0; filter: blur(10px); transform: scale(2); }
}
@keyframes qnInkIn {
    0% { opacity: 0.12; filter: blur(3px); transform: translateY(4px); }
    100% { opacity: 1; filter: blur(0); transform: none; }
}
.qn-ink-in { animation: qnInkIn 0.7s ease-out both; }
@keyframes qnAnchorRadiate {
    0% { opacity: 0.55; transform: scale(1); }
    85% { opacity: 0; }
    100% { opacity: 0; transform: scale(1.14); }
}

/* ============================================
   PAGE LOADER
   ============================================ */
.page-loader {
    position: fixed;
    inset: 0;
    background: var(--color-bg);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
.page-loader.loader-hide { opacity: 0; visibility: hidden; }
.loader-inner { text-align: center; width: 260px; max-width: 80vw; }
.loader-taiji {
    width: 56px;
    height: 56px;
    margin: 0 auto 1.2rem;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--color-bg) 50%, var(--color-gold) 50%);
    border: 1px solid var(--color-gold-dark);
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.25);
    animation: loaderSpin 1.6s linear infinite;
    position: relative;
}
.loader-taiji-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-gold);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px var(--color-gold-light);
}
@keyframes loaderSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.loader-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--color-gold);
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    margin-bottom: 0.2rem;
    text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.4);
}
.loader-subtitle {
    font-family: var(--font-display);
    font-size: 0.65rem;
    color: var(--color-muted);
    letter-spacing: 0.35em;
    margin-bottom: 1.5rem;
}
.loader-bar-wrap { width: 100%; height: 2px; background: rgba(var(--border-rgb), 0.6); border-radius: 1px; overflow: hidden; margin-bottom: 0.5rem; }
.loader-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold), var(--color-gold-light)); border-radius: 1px; transition: width 0.25s ease-out; box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6); }
.loader-pct { font-family: var(--font-mono); font-size: 0.75rem; color: var(--color-gold-light); margin-bottom: 0.6rem; }
.loader-status { font-family: var(--font-display); font-size: 0.72rem; color: var(--color-muted); letter-spacing: 0.15em; transition: opacity 0.3s ease; }

/* ============================================
   CAST ANIMATIONS (full-screen overlay)
   ============================================ */
.cast-overlay {
    position: fixed;
    inset: 0;
    background: rgba(var(--bg-deep-rgb), 0.92);
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 2rem;
    overflow: visible;
    padding: 1rem;
}
.cast-overlay.cast-show { display: flex; }
.cast-anim {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible !important;
}
.cast-compass {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    animation: qnRingRotate 8s linear infinite;
}
.cast-compass::before, .cast-compass::after { content: ''; position: absolute; border-radius: 50%; }
.cast-compass::before { inset: 8px; border: 1px dashed rgba(var(--accent-rgb), 0.15); }
.cast-compass::after { inset: 28px; animation: qnRingRotate 8s linear infinite; border-style: solid; border-color: transparent rgba(var(--accent-rgb), 0.3) transparent rgba(var(--accent-rgb), 0.3); }
@keyframes qnRingRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.cast-bagua { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.cast-bagua span { position: absolute; font-family: var(--font-display); font-size: 0.9rem; color: rgba(var(--accent-rgb), 0.5); transform-origin: center; }
.cast-taiji { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(90deg, var(--color-bg) 50%, var(--color-gold) 50%); position: relative; animation: loaderSpin 2s linear infinite; box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.3); }
.cast-taiji::before, .cast-taiji::after { content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%; }
.cast-taiji::before { top: 0; left: 11px; background: var(--color-gold); }
.cast-taiji::after { bottom: 0; left: 11px; background: var(--color-bg); }
/* ============================================
   TAROT 抽牌动画 — 鸽尾式洗牌 · 扇形展开 · 翻牌揭示
   4.0s 循环：洗牌(0-25%) → 扇形(25-45%) → 选牌(45-58%) → 翻牌(58-85%) → 重置(85-100%)
   ============================================ */
.cast-tarot-anim { width: 280px; height: 280px; overflow: visible !important; }
.cast-tarot-scene {
    position: relative;
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    overflow: visible !important;
}

/* --- 装饰光环 --- */
.cast-tarot-ring {
    position: absolute;
    width: 200px; height: 200px;
    border: 1px solid rgba(var(--gold-rgb), 0.12);
    border-radius: 50%;
    animation: tarotRingSpin 12s linear infinite;
}
.cast-tarot-ring::before {
    content: '';
    position: absolute;
    inset: 10px;
    border: 1px dashed rgba(var(--gold-rgb), 0.06);
    border-radius: 50%;
}
.cast-tarot-ring::after {
    content: '';
    position: absolute;
    top: -3px; left: 50%;
    width: 6px; height: 6px;
    margin-left: -3px;
    border-radius: 50%;
    background: rgba(var(--gold-rgb), 0.4);
    box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.5);
}
.cast-tarot-ring-2 {
    position: absolute;
    width: 240px; height: 240px;
    border: 1px solid rgba(var(--gold-rgb), 0.06);
    border-radius: 50%;
    animation: tarotRingSpin 20s linear infinite reverse;
}
.cast-tarot-ring-2::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px solid rgba(var(--gold-rgb), 0.04);
    border-radius: 50%;
}

/* --- Phase 1: 鸽尾式洗牌（两叠交错合一） --- */
.cast-tarot-riffle {
    position: absolute;
    top: 50%; left: 50%;
    width: 62px; height: 104px;
    margin: -52px 0 0 -31px;
    z-index: 4;
}
.cast-tarot-riffle-half {
    position: absolute;
    inset: 0;
}
.cast-tarot-riffle-card {
    position: absolute;
    inset: 0;
    width: 62px; height: 104px;
    border-radius: 5px;
    background:
        repeating-linear-gradient(45deg,
            transparent 0, transparent 5px,
            rgba(var(--gold-rgb), 0.025) 5px,
            rgba(var(--gold-rgb), 0.025) 6px),
        linear-gradient(135deg, rgba(var(--surface-rgb), 0.98), rgba(var(--surface-deep-rgb), 0.85));
    border: 1px solid rgba(var(--gold-rgb), 0.4);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(var(--overlay-rgb), 0.08);
    opacity: 1;
    animation-fill-mode: backwards;
}
.cast-tarot-riffle-card:nth-child(1) { margin-top: 0; }
.cast-tarot-riffle-card:nth-child(2) { margin-top: -1px; }
.cast-tarot-riffle-card:nth-child(3) { margin-top: -2px; }
.cast-tarot-riffle-card:nth-child(4) { margin-top: -3px; }
.cast-tarot-riffle-card::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(var(--gold-rgb), 0.2);
    border-radius: 3px;
}
.cast-tarot-riffle-card::after {
    content: '✦';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.9rem;
    color: rgba(var(--gold-rgb), 0.45);
    text-shadow: 0 0 6px rgba(var(--gold-rgb), 0.3);
}
.cast-tarot-riffle-l {
    animation-name: tarotRiffleL;
    animation-duration: 4s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
}
.cast-tarot-riffle-r {
    animation-name: tarotRiffleR;
    animation-duration: 4s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
}

/* --- Phase 2: 扇形展开 --- */
.cast-tarot-fan {
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    z-index: 3;
}
.cast-tarot-fan-card {
    position: absolute;
    top: 0; left: 0;
    width: 58px; height: 96px;
    margin: -48px 0 0 -29px;
    border-radius: 5px;
    background:
        repeating-linear-gradient(45deg,
            transparent 0, transparent 4px,
            rgba(var(--gold-rgb), 0.02) 4px,
            rgba(var(--gold-rgb), 0.02) 5px),
        linear-gradient(135deg, rgba(var(--surface-rgb), 0.95), rgba(var(--surface-deep-rgb), 0.8));
    border: 1px solid rgba(var(--gold-rgb), 0.35);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
    transform-origin: bottom center;
    opacity: 1;
    animation-duration: 4s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
    /* animation-name set via inline style: tarotFanSpread0..6 */
}
.cast-tarot-fan-card::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px solid rgba(var(--gold-rgb), 0.15);
    border-radius: 3px;
}
.cast-tarot-fan-card::after {
    content: '✦';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8rem;
    color: rgba(var(--gold-rgb), 0.4);
}

/* --- Phase 3-4: 选牌抽出 + 翻面揭示 --- */
.cast-tarot-reveal {
    position: absolute;
    top: 50%; left: 50%;
    width: 70px; height: 116px;
    margin: -58px 0 0 -35px;
    perspective: 700px;
    z-index: 8;
    opacity: 1;
    animation: tarotRevealLift 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    animation-fill-mode: backwards;
}
.cast-tarot-reveal-inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    animation: tarotRevealFlip 4s ease-in-out infinite;
}
.cast-tarot-reveal-back {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background:
        repeating-linear-gradient(45deg,
            transparent 0, transparent 5px,
            rgba(var(--gold-rgb), 0.025) 5px,
            rgba(var(--gold-rgb), 0.025) 6px),
        linear-gradient(135deg, rgba(var(--surface-rgb), 0.98), rgba(var(--surface-deep-rgb), 0.85));
    border: 1px solid rgba(var(--gold-rgb), 0.4);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.cast-tarot-reveal-back::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(var(--gold-rgb), 0.2);
    border-radius: 4px;
}
.cast-tarot-reveal-back::after {
    content: '✦';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.1rem;
    color: rgba(var(--gold-rgb), 0.5);
    text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.3);
}
.cast-tarot-reveal-face {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background:
        radial-gradient(circle at 50% 35%, rgba(var(--gold-rgb), 0.25), transparent 65%),
        linear-gradient(135deg, rgba(var(--surface-rgb), 0.9), rgba(var(--surface-deep-rgb), 0.8));
    border: 1px solid var(--color-gold);
    box-shadow: 0 0 20px rgba(var(--gold-rgb), 0.4), 0 4px 16px rgba(0, 0, 0, 0.6);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: rotateY(180deg);
}
.cast-tarot-reveal-face::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(var(--gold-rgb), 0.3);
    border-radius: 4px;
}
.cast-tarot-reveal-face::after {
    content: '✦';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1.7rem;
    color: var(--color-gold);
    text-shadow: 0 0 12px rgba(var(--gold-rgb), 0.8), 0 0 24px rgba(var(--gold-rgb), 0.4);
}
.cast-tarot-reveal-glow {
    position: absolute;
    inset: -15px;
    border-radius: 14px;
    background: radial-gradient(circle, rgba(var(--gold-rgb), 0.25) 0%, transparent 70%);
    opacity: 0;
    animation: tarotRevealGlow 4s ease-in-out infinite;
    z-index: -1;
}

/* --- 粒子 --- */
.cast-tarot-spark {
    position: absolute;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--color-gold);
    box-shadow: 0 0 8px var(--color-gold), 0 0 16px rgba(var(--gold-rgb), 0.5);
    opacity: 0;
    z-index: 6;
}
.cast-tarot-spark-1 { top: 15%; left: 18%; animation: tarotSparkFloat 3s ease-in-out 0.3s infinite; }
.cast-tarot-spark-2 { top: 25%; right: 12%; animation: tarotSparkFloat 3.5s ease-in-out 0.8s infinite; }
.cast-tarot-spark-3 { bottom: 20%; left: 25%; animation: tarotSparkFloat 3.2s ease-in-out 1.3s infinite; }
.cast-tarot-spark-4 { bottom: 30%; right: 20%; animation: tarotSparkFloat 2.8s ease-in-out 0.5s infinite; }
.cast-tarot-spark-5 { top: 50%; left: 8%; animation: tarotSparkFloat 3.3s ease-in-out 1.8s infinite; }
.cast-tarot-spark-6 { top: 40%; right: 8%; animation: tarotSparkFloat 3.1s ease-in-out 2.2s infinite; }

/* --- Keyframes (pure 2D, mobile-safe, no calc(var()) in transform) --- */
@keyframes tarotRiffleL {
    0% { transform: translateX(-28px) translateY(0) rotate(-5deg); }
    15% { transform: translateX(-18px) translateY(-1px) rotate(-3deg); }
    30% { transform: translateX(-4px) translateY(-2px) rotate(-1deg); }
    45% { transform: translateX(-12px) translateY(-1px) rotate(-2deg); }
    60% { transform: translateX(-22px) translateY(0) rotate(-4deg); }
    75% { transform: translateX(-14px) translateY(-1px) rotate(-2.5deg); }
    100% { transform: translateX(-28px) translateY(0) rotate(-5deg); }
}
@keyframes tarotRiffleR {
    0% { transform: translateX(28px) translateY(0) rotate(5deg); }
    15% { transform: translateX(18px) translateY(-1px) rotate(3deg); }
    30% { transform: translateX(4px) translateY(-2px) rotate(1deg); }
    45% { transform: translateX(12px) translateY(-1px) rotate(2deg); }
    60% { transform: translateX(22px) translateY(0) rotate(4deg); }
    75% { transform: translateX(14px) translateY(-1px) rotate(2.5deg); }
    100% { transform: translateX(28px) translateY(0) rotate(5deg); }
}
@keyframes tarotFanSpread0 {
    0% { transform: rotate(0deg) translateY(0) scale(0.85); opacity: 0; }
    20% { transform: rotate(0deg) translateY(-4px) scale(0.9); opacity: 0.5; }
    40% { transform: rotate(-24deg) translateY(-12px) scale(1); opacity: 1; }
    60% { transform: rotate(-24deg) translateY(-12px) scale(1); opacity: 1; }
    80% { transform: rotate(0deg) translateY(-4px) scale(0.9); opacity: 0.5; }
    100% { transform: rotate(0deg) translateY(0) scale(0.85); opacity: 0; }
}
@keyframes tarotFanSpread1 {
    0% { transform: rotate(0deg) translateY(0) scale(0.85); opacity: 0; }
    20% { transform: rotate(0deg) translateY(-4px) scale(0.9); opacity: 0.5; }
    40% { transform: rotate(-16deg) translateY(-12px) scale(1); opacity: 1; }
    60% { transform: rotate(-16deg) translateY(-12px) scale(1); opacity: 1; }
    80% { transform: rotate(0deg) translateY(-4px) scale(0.9); opacity: 0.5; }
    100% { transform: rotate(0deg) translateY(0) scale(0.85); opacity: 0; }
}
@keyframes tarotFanSpread2 {
    0% { transform: rotate(0deg) translateY(0) scale(0.85); opacity: 0; }
    20% { transform: rotate(0deg) translateY(-4px) scale(0.9); opacity: 0.5; }
    40% { transform: rotate(-8deg) translateY(-12px) scale(1); opacity: 1; }
    60% { transform: rotate(-8deg) translateY(-12px) scale(1); opacity: 1; }
    80% { transform: rotate(0deg) translateY(-4px) scale(0.9); opacity: 0.5; }
    100% { transform: rotate(0deg) translateY(0) scale(0.85); opacity: 0; }
}
@keyframes tarotFanSpread3 {
    0% { transform: rotate(0deg) translateY(0) scale(0.85); opacity: 0; }
    20% { transform: rotate(0deg) translateY(-4px) scale(0.9); opacity: 0.5; }
    40% { transform: rotate(0deg) translateY(-12px) scale(1); opacity: 1; }
    60% { transform: rotate(0deg) translateY(-12px) scale(1); opacity: 1; }
    80% { transform: rotate(0deg) translateY(-4px) scale(0.9); opacity: 0.5; }
    100% { transform: rotate(0deg) translateY(0) scale(0.85); opacity: 0; }
}
@keyframes tarotFanSpread4 {
    0% { transform: rotate(0deg) translateY(0) scale(0.85); opacity: 0; }
    20% { transform: rotate(0deg) translateY(-4px) scale(0.9); opacity: 0.5; }
    40% { transform: rotate(8deg) translateY(-12px) scale(1); opacity: 1; }
    60% { transform: rotate(8deg) translateY(-12px) scale(1); opacity: 1; }
    80% { transform: rotate(0deg) translateY(-4px) scale(0.9); opacity: 0.5; }
    100% { transform: rotate(0deg) translateY(0) scale(0.85); opacity: 0; }
}
@keyframes tarotFanSpread5 {
    0% { transform: rotate(0deg) translateY(0) scale(0.85); opacity: 0; }
    20% { transform: rotate(0deg) translateY(-4px) scale(0.9); opacity: 0.5; }
    40% { transform: rotate(16deg) translateY(-12px) scale(1); opacity: 1; }
    60% { transform: rotate(16deg) translateY(-12px) scale(1); opacity: 1; }
    80% { transform: rotate(0deg) translateY(-4px) scale(0.9); opacity: 0.5; }
    100% { transform: rotate(0deg) translateY(0) scale(0.85); opacity: 0; }
}
@keyframes tarotFanSpread6 {
    0% { transform: rotate(0deg) translateY(0) scale(0.85); opacity: 0; }
    20% { transform: rotate(0deg) translateY(-4px) scale(0.9); opacity: 0.5; }
    40% { transform: rotate(24deg) translateY(-12px) scale(1); opacity: 1; }
    60% { transform: rotate(24deg) translateY(-12px) scale(1); opacity: 1; }
    80% { transform: rotate(0deg) translateY(-4px) scale(0.9); opacity: 0.5; }
    100% { transform: rotate(0deg) translateY(0) scale(0.85); opacity: 0; }
}
@keyframes tarotRevealLift {
    0% { transform: translateY(0) scale(0.9); }
    20% { transform: translateY(-8px) scale(0.95); }
    40% { transform: translateY(-18px) scale(1.05); }
    60% { transform: translateY(-18px) scale(1.05); }
    80% { transform: translateY(-8px) scale(0.95); }
    100% { transform: translateY(0) scale(0.9); }
}
@keyframes tarotRevealFlip {
    0%, 30% { transform: rotateY(0deg); }
    50% { transform: rotateY(180deg); }
    80% { transform: rotateY(180deg); }
    100% { transform: rotateY(0deg); }
}
@keyframes tarotRevealGlow {
    0%, 100% { opacity: 0.3; }
    40% { opacity: 0.8; }
    60% { opacity: 1; }
    80% { opacity: 0.5; }
}
@keyframes tarotSparkFloat {
    0% { opacity: 0; transform: translate(0, 0) scale(0.3); }
    25% { opacity: 0.8; transform: translate(8px, -15px) scale(1); }
    50% { opacity: 0.5; transform: translate(16px, -30px) scale(0.8); }
    75% { opacity: 0.2; transform: translate(24px, -45px) scale(0.5); }
    100% { opacity: 0; transform: translate(32px, -60px) scale(0.2); }
}
@keyframes tarotRingSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ============================================
   LENORMAND 抽牌动画 — 过手洗牌 · 切牌 · 依次发牌 · 逐张翻面
   3.8s 循环：洗牌(0-22%) → 切牌(22-35%) → 发牌(35-60%) → 翻牌(60-90%) → 重置(90-100%)
   ============================================ */
.cast-leno-anim { width: 280px; height: 220px; overflow: visible !important; }
.cast-leno-scene {
    position: relative;
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    overflow: visible !important;
}

/* --- 装饰光环 --- */
.cast-leno-ring {
    position: absolute;
    width: 180px; height: 180px;
    border: 1px solid rgba(var(--gold-rgb), 0.1);
    border-radius: 50%;
    animation: lenoRingSpin 14s linear infinite;
}
.cast-leno-ring::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 1px dashed rgba(var(--gold-rgb), 0.05);
    border-radius: 50%;
}
.cast-leno-ring::after {
    content: '';
    position: absolute;
    top: -2px; left: 50%;
    width: 5px; height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: rgba(var(--gold-rgb), 0.35);
    box-shadow: 0 0 6px rgba(var(--gold-rgb), 0.4);
}

/* --- Phase 1: 过手洗牌 --- */
.cast-leno-shuffle {
    position: relative;
    width: 42px; height: 64px;
    margin-bottom: 10px;
    z-index: 4;
}
.cast-leno-deck {
    position: absolute;
    inset: 0;
    width: 42px; height: 64px;
    border-radius: 4px;
    background:
        repeating-linear-gradient(45deg,
            transparent 0, transparent 4px,
            rgba(var(--gold-rgb), 0.02) 4px,
            rgba(var(--gold-rgb), 0.02) 5px),
        linear-gradient(135deg, rgba(var(--surface-rgb), 0.95), rgba(var(--surface-deep-rgb), 0.8));
    border: 1px solid rgba(var(--gold-rgb), 0.35);
    box-shadow:
        -3px 1px 0 rgba(var(--surface-deep-rgb), 0.7),
        -5px 2px 0 rgba(var(--surface-deep-rgb), 0.5),
        0 3px 10px rgba(0, 0, 0, 0.4);
    opacity: 1;
    animation: lenoDeckShow 3.8s ease-in-out infinite;
    animation-fill-mode: backwards;
}
.cast-leno-deck::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(var(--gold-rgb), 0.18);
    border-radius: 3px;
}
.cast-leno-deck::after {
    content: '✦';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.7rem;
    color: rgba(var(--gold-rgb), 0.4);
}
.cast-leno-pull-card {
    position: absolute;
    top: 0; left: 50%;
    margin-left: -21px;
    width: 42px; height: 64px;
    border-radius: 4px;
    background:
        repeating-linear-gradient(45deg,
            transparent 0, transparent 4px,
            rgba(var(--gold-rgb), 0.02) 4px,
            rgba(var(--gold-rgb), 0.02) 5px),
        linear-gradient(135deg, rgba(var(--surface-rgb), 0.95), rgba(var(--surface-deep-rgb), 0.8));
    border: 1px solid rgba(var(--gold-rgb), 0.35);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    opacity: 1;
    animation-duration: 3.8s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
}
.cast-leno-pull-card::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(var(--gold-rgb), 0.18);
    border-radius: 3px;
}
.cast-leno-pull-card::after {
    content: '✦';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.7rem;
    color: rgba(var(--gold-rgb), 0.4);
}
.cast-leno-pull-l {
    animation-name: lenoPullL;
}
.cast-leno-pull-r {
    animation-name: lenoPullR;
}

/* --- Phase 2: 切牌 --- */
.cast-leno-cut {
    position: relative;
    width: 42px; height: 64px;
    margin-bottom: 10px;
    z-index: 5;
    opacity: 1;
    animation: lenoCutLift 3.8s ease-in-out infinite;
    animation-fill-mode: backwards;
}
.cast-leno-cut-card {
    position: absolute;
    left: 0;
    width: 42px; height: 64px;
    border-radius: 4px;
    background:
        repeating-linear-gradient(45deg,
            transparent 0, transparent 4px,
            rgba(var(--gold-rgb), 0.02) 4px,
            rgba(var(--gold-rgb), 0.02) 5px),
        linear-gradient(135deg, rgba(var(--surface-rgb), 0.95), rgba(var(--surface-deep-rgb), 0.8));
    border: 1px solid rgba(var(--gold-rgb), 0.35);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
}
.cast-leno-cut-card:nth-child(1) { top: 0; z-index: 5; }
.cast-leno-cut-card:nth-child(2) { top: -1.5px; z-index: 4; }
.cast-leno-cut-card:nth-child(3) { top: -3px; z-index: 3; }
.cast-leno-cut-card::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(var(--gold-rgb), 0.18);
    border-radius: 3px;
}
.cast-leno-cut-card::after {
    content: '✦';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.7rem;
    color: rgba(var(--gold-rgb), 0.4);
}

/* --- Phase 3-4: 依次发牌 + 翻面 --- */
.cast-leno-draw-row {
    display: flex;
    gap: 5px;
    justify-content: center;
    align-items: center;
    z-index: 3;
    min-height: 64px;
}
.cast-leno-draw-card {
    width: 40px; height: 60px;
    perspective: 500px;
    opacity: 1;
    transform: translateY(-25px) scale(0.6);
    animation-name: lenoDrawSlide;
    animation-duration: 3.8s;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
}
.cast-leno-draw-inner {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    animation-name: lenoDrawFlip;
    animation-duration: 3.8s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
}
.cast-leno-draw-back {
    position: absolute;
    inset: 0;
    border-radius: 4px;
    background:
        repeating-linear-gradient(45deg,
            transparent 0, transparent 4px,
            rgba(var(--gold-rgb), 0.02) 4px,
            rgba(var(--gold-rgb), 0.02) 5px),
        linear-gradient(135deg, rgba(var(--surface-rgb), 0.95), rgba(var(--surface-deep-rgb), 0.8));
    border: 1px solid rgba(var(--gold-rgb), 0.35);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.cast-leno-draw-back::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(var(--gold-rgb), 0.18);
    border-radius: 3px;
}
.cast-leno-draw-back::after {
    content: '✦';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.65rem;
    color: rgba(var(--gold-rgb), 0.4);
}
.cast-leno-draw-face {
    position: absolute;
    inset: 0;
    border-radius: 4px;
    background:
        radial-gradient(circle at 50% 40%, rgba(var(--gold-rgb), 0.18), transparent 60%),
        linear-gradient(135deg, rgba(var(--surface-rgb), 0.9), rgba(var(--surface-deep-rgb), 0.8));
    border: 1px solid rgba(var(--gold-rgb), 0.5);
    box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.3), 0 3px 10px rgba(0, 0, 0, 0.5);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: rotateY(180deg);
}
.cast-leno-draw-face::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(var(--gold-rgb), 0.25);
    border-radius: 3px;
}
.cast-leno-draw-face::after {
    content: '✦';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
    color: var(--color-gold);
    text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.6);
}

/* --- 粒子 --- */
.cast-leno-spark {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--color-gold);
    box-shadow: 0 0 6px var(--color-gold), 0 0 12px rgba(var(--gold-rgb), 0.4);
    opacity: 0;
    z-index: 5;
}
.cast-leno-spark-1 { top: 20%; left: 22%; animation: lenoSparkFloat 2.8s ease-in-out 0.3s infinite; }
.cast-leno-spark-2 { top: 30%; right: 18%; animation: lenoSparkFloat 3.2s ease-in-out 0.9s infinite; }
.cast-leno-spark-3 { bottom: 25%; left: 45%; animation: lenoSparkFloat 3s ease-in-out 1.5s infinite; }
.cast-leno-spark-4 { bottom: 35%; right: 35%; animation: lenoSparkFloat 2.6s ease-in-out 2s infinite; }

/* --- Keyframes (pure 2D, mobile-safe, no calc(var()) in transform) --- */
@keyframes lenoDeckShow {
    0% { transform: translateY(0) scale(1); }
    25% { transform: translateY(-2px) scale(0.98); }
    50% { transform: translateY(2px) scale(1); }
    75% { transform: translateY(-1px) scale(0.99); }
    100% { transform: translateY(0) scale(1); }
}
@keyframes lenoPullL {
    0% { transform: translateX(0) translateY(0) rotate(0deg); }
    20% { transform: translateX(-48px) translateY(-8px) rotate(-14deg); }
    40% { transform: translateX(-29px) translateY(-4px) rotate(-7deg); }
    60% { transform: translateX(-14px) translateY(-2px) rotate(-3deg); }
    80% { transform: translateX(-24px) translateY(-5px) rotate(-4deg); }
    100% { transform: translateX(0) translateY(0) rotate(0deg); }
}
@keyframes lenoPullR {
    0% { transform: translateX(0) translateY(0) rotate(0deg); }
    20% { transform: translateX(48px) translateY(-8px) rotate(14deg); }
    40% { transform: translateX(29px) translateY(-4px) rotate(7deg); }
    60% { transform: translateX(14px) translateY(-2px) rotate(3deg); }
    80% { transform: translateX(24px) translateY(-5px) rotate(4deg); }
    100% { transform: translateX(0) translateY(0) rotate(0deg); }
}
@keyframes lenoCutLift {
    0% { transform: translateY(0) translateX(0) rotate(0deg); }
    20% { transform: translateY(-18px) translateX(0) rotate(-2deg); }
    40% { transform: translateY(-18px) translateX(14px) rotate(2deg); }
    60% { transform: translateY(-10px) translateX(6px) rotate(1deg); }
    80% { transform: translateY(-4px) translateX(2px) rotate(0deg); }
    100% { transform: translateY(0) translateX(0) rotate(0deg); }
}
@keyframes lenoDrawSlide {
    0% { transform: translateY(-20px) scale(0.7); opacity: 0; }
    15% { transform: translateY(0) scale(1); opacity: 1; }
    85% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-20px) scale(0.7); opacity: 0; }
}
@keyframes lenoDrawFlip {
    0%, 25% { transform: rotateY(0deg); }
    45% { transform: rotateY(180deg); }
    80% { transform: rotateY(180deg); }
    100% { transform: rotateY(0deg); }
}
@keyframes lenoSparkFloat {
    0% { opacity: 0; transform: translate(0, 0) scale(0.3); }
    30% { opacity: 1; transform: translate(6px, -12px) scale(1); }
    70% { opacity: 0.5; transform: translate(12px, -24px) scale(0.6); }
    100% { opacity: 0; transform: translate(18px, -36px) scale(0.2); }
}
@keyframes lenoRingSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.cast-text { text-align: center; font-family: var(--font-display); font-size: 1.2rem; color: var(--color-gold); letter-spacing: 0.3em; text-indent: 0.3em; margin-bottom: 0.4rem; text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.3); }
.cast-subtext { font-size: 0.8rem; color: var(--color-muted); letter-spacing: 0.1em; }
/* ============================================
   起卦动画 — 爻象凝聚（极简高级）
   六爻自下而上依次显现，双层光环旋转，中心光晕
   ============================================ */
.cast-hex {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cast-hex-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    animation: hexRingRotate 12s linear infinite;
}
.cast-hex-ring::before {
    content: '';
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 1px dashed rgba(var(--accent-rgb), 0.08);
}
.cast-hex-ring-2 {
    inset: 30px;
    border: 1px solid rgba(var(--accent-rgb), 0.06);
    animation: hexRingRotate 8s linear infinite reverse;
}
.cast-hex-ring-2::before { display: none; }
@keyframes hexRingRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.cast-hex-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-gold-light);
    box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.6), 0 0 40px rgba(var(--accent-rgb), 0.3);
    animation: hexCorePulse 2.5s ease-in-out infinite;
}
@keyframes hexCorePulse {
    0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.8); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
}

.cast-hex-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.08) 0%, transparent 70%);
    animation: hexGlowBreathe 3s ease-in-out infinite;
    pointer-events: none;
}
@keyframes hexGlowBreathe {
    0%, 100% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.9); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
}

.cast-hex-lines {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column-reverse;
    gap: 7px;
    align-items: center;
}
.cast-hex-yao {
    opacity: 0;
    animation: hexYaoAppear 0.6s ease-out forwards;
}
@keyframes hexYaoAppear {
    0% { opacity: 0; transform: translateY(8px) scale(0.92); }
    60% { opacity: 0.8; }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.cast-hex-line {
    height: 4px;
    border-radius: 2px;
}
.cast-hex-yang {
    width: 72px;
    background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-light), var(--color-gold-dark));
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4);
}
.cast-hex-yin {
    width: 72px;
    display: flex;
    justify-content: space-between;
    background: none;
    box-shadow: none;
}
.cast-hex-yin span {
    display: block;
    width: 32px;
    height: 4px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-light), var(--color-gold-dark));
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4);
}
/* 保留：六爻页铜钱翻转动画 */
@keyframes coinTossSmall { 0%, 100% { transform: rotateY(0); } 50% { transform: rotateY(180deg); } }
.cast-taiyi { position: relative; width: 160px; height: 160px; }
.cast-taiyi-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(var(--accent-rgb), 0.2); animation: qnRingRotate 10s linear infinite; }
.cast-taiyi-ring::before { content: ''; position: absolute; inset: 10px; border-radius: 50%; border: 1px dashed rgba(var(--accent-rgb), 0.15); }
.cast-taiyi-ring::after { content: ''; position: absolute; inset: 30px; border-radius: 50%; border: 1px solid rgba(var(--accent-rgb), 0.1); animation: qnRingRotate 6s linear infinite reverse; }
.cast-taiyi-grid { position: absolute; inset: 50px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.cast-taiyi-cell { background: rgba(var(--accent-rgb), 0.08); border: 1px solid rgba(var(--accent-rgb), 0.15); border-radius: 2px; display: flex; align-items: center; justify-content: center; font-size: 0.6rem; color: var(--color-gold); }
.cast-taiyi-cell:nth-child(1) { animation: taiyiCellPulse 2.7s ease-in-out infinite; animation-delay: 0s; }
.cast-taiyi-cell:nth-child(2) { animation: taiyiCellPulse 2.7s ease-in-out infinite; animation-delay: 0.3s; }
.cast-taiyi-cell:nth-child(3) { animation: taiyiCellPulse 2.7s ease-in-out infinite; animation-delay: 0.6s; }
.cast-taiyi-cell:nth-child(4) { animation: taiyiCellPulse 2.7s ease-in-out infinite; animation-delay: 0.9s; }
.cast-taiyi-cell:nth-child(5) { animation: taiyiCellPulse 2.7s ease-in-out infinite; animation-delay: 1.2s; }
.cast-taiyi-cell:nth-child(6) { animation: taiyiCellPulse 2.7s ease-in-out infinite; animation-delay: 1.5s; }
.cast-taiyi-cell:nth-child(7) { animation: taiyiCellPulse 2.7s ease-in-out infinite; animation-delay: 1.8s; }
.cast-taiyi-cell:nth-child(8) { animation: taiyiCellPulse 2.7s ease-in-out infinite; animation-delay: 2.1s; }
.cast-taiyi-cell:nth-child(9) { animation: taiyiCellPulse 2.7s ease-in-out infinite; animation-delay: 2.4s; }
@keyframes taiyiCellPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4); } }
.cast-taiyi-star { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1rem; color: var(--color-gold); text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.5); animation: qnGlowBreathe 2s ease-in-out infinite; }
.cast-taiyi-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20px; height: 20px; border-radius: 50%; background: radial-gradient(circle, var(--color-gold-light), var(--color-gold-dark)); box-shadow: 0 0 20px rgba(var(--accent-rgb), 0.5); }
.cast-dayan { position: relative; width: 160px; height: 160px; display: flex; align-items: center; justify-content: center; }
.cast-dayan-base { width: 100px; height: 100px; border: 1px solid rgba(var(--accent-rgb), 0.2); border-radius: var(--radius-sm); position: relative; }
.cast-dayan-pile { position: absolute; bottom: 0; display: flex; gap: 2px; }
.cast-dayan-pile-left { left: 10px; }
.cast-dayan-pile-right { right: 10px; }
.cast-dayan-stalk { width: 3px; height: 30px; background: var(--color-gold); border-radius: 1px; animation: dayanStalkRise 0.8s ease-out forwards; opacity: 0; }
@keyframes dayanStalkRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.cast-dayan-lift { position: absolute; top: 20%; left: 50%; transform: translateX(-50%); width: 3px; height: 40px; background: var(--color-gold-light); border-radius: 1px; animation: dayanLift 1.5s ease-in-out infinite; box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.4); }
@keyframes dayanLift { 0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.4; } 50% { transform: translateX(-50%) translateY(-20px); opacity: 1; } }
.cast-dayan-group { position: absolute; bottom: 20%; width: 60px; height: 40px; display: flex; gap: 2px; align-items: flex-end; justify-content: center; }
/* ===== 纳音五行：五行相生轮 ===== */
.cast-nayin { position: relative; width: 180px; height: 180px; display: flex; align-items: center; justify-content: center; }
/* 外环旋转 */
.cast-nayin-ring { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(var(--accent-rgb), 0.15); animation: qnRingRotate 12s linear infinite; }
.cast-nayin-ring::before { content: ''; position: absolute; inset: 6px; border-radius: 50%; border: 1px dashed rgba(var(--accent-rgb), 0.08); }
.cast-nayin-ring-2 { inset: 20px; border: 1px solid rgba(var(--accent-rgb), 0.1); animation: qnRingRotate 8s linear infinite reverse; }
.cast-nayin-ring-2::before { display: none; }

/* 五角星图 — 缓慢旋转 */
.cast-nayin-pentagram {
    position: absolute; inset: 30px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50,5 L61,35 L95,35 L68,57 L79,95 L50,75 L21,95 L32,57 L5,35 L39,35 Z' fill='none' stroke='rgba(212,175,55,0.15)' stroke-width='0.8'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    animation: nayinPentagramRotate 20s linear infinite;
}
@keyframes nayinPentagramRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* 相生能量流线 */
.cast-nayin-flows { position: absolute; inset: 0; }
.cast-nayin-flow {
    position: absolute; top: 50%; left: 50%;
    width: 2px; height: 60px;
    transform-origin: center top;
    background: linear-gradient(to bottom, transparent, rgba(var(--gold-rgb), 0.4), transparent);
    animation: nayinFlowPulse 3s ease-in-out infinite;
}
.cast-nayin-flow-1 { transform: translate(-50%, 0) rotate(36deg); animation-delay: 0s; }
.cast-nayin-flow-2 { transform: translate(-50%, 0) rotate(108deg); animation-delay: 0.6s; }
.cast-nayin-flow-3 { transform: translate(-50%, 0) rotate(180deg); animation-delay: 1.2s; }
.cast-nayin-flow-4 { transform: translate(-50%, 0) rotate(252deg); animation-delay: 1.8s; }
.cast-nayin-flow-5 { transform: translate(-50%, 0) rotate(324deg); animation-delay: 2.4s; }
@keyframes nayinFlowPulse {
    0%, 100% { opacity: 0.2; height: 50px; }
    50% { opacity: 0.8; height: 65px; }
}

/* 元素轨道容器 — 整体旋转 */
.cast-nayin-orbit {
    position: absolute; inset: 0;
    animation: qnRingRotate 15s linear infinite;
}

/* 五行元素 — 逆向自转保持文字正向 */
.cast-nayin-elem {
    position: absolute; top: 50%; left: 50%;
    width: 32px; height: 32px; margin: -16px 0 0 -16px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.75rem; font-weight: 700; font-family: var(--font-display);
    /* 用 CSS 变量定位到五角形顶点 */
    transform: rotate(var(--elem-angle, 0deg)) translateY(-65px) rotate(calc(var(--elem-angle, 0deg) * -1));
    animation: nayinElemPulse 3s ease-in-out infinite;
    animation-delay: var(--elem-delay, 0s);
}
.cast-nayin-elem span {
    /* 逆向旋转抵消轨道旋转，使文字始终正向 */
    animation: qnRingRotate 15s linear infinite reverse;
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
}
@keyframes nayinElemPulse {
    0%, 100% { box-shadow: 0 0 4px currentColor, 0 0 8px rgba(var(--gold-rgb), 0.15); opacity: 0.8; }
    50% { box-shadow: 0 0 12px currentColor, 0 0 24px rgba(var(--gold-rgb), 0.3); opacity: 1; }
}
.cast-nayin-elem-jin { background: rgba(var(--gold-rgb), 0.15); color: var(--color-gold); border: 1px solid var(--color-gold); }
.cast-nayin-elem-shui { background: rgba(74, 111, 181, 0.15); color: #6A9BD8; border: 1px solid #4A6FB5; }
.cast-nayin-elem-mu { background: rgba(90, 138, 90, 0.15); color: #7AB87A; border: 1px solid #5A8A5A; }
.cast-nayin-elem-huo { background: rgba(176, 69, 69, 0.15); color: var(--color-red-light); border: 1px solid var(--color-red-light); }
.cast-nayin-elem-tu { background: rgba(212, 136, 58, 0.15); color: var(--color-orange); border: 1px solid var(--color-orange); }

/* 中央核心 — 纳音 */
.cast-nayin-core {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 36px; height: 36px; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--gold-rgb), 0.25) 0%, rgba(var(--accent-rgb), 0.08) 60%, transparent 100%);
    border: 1px solid rgba(var(--gold-rgb), 0.3);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display); font-size: 0.65rem; color: var(--color-gold);
    text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5);
    animation: nayinCorePulse 2.5s ease-in-out infinite;
    z-index: 5;
}
.cast-nayin-core::after { content: '納音'; }
@keyframes nayinCorePulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.3), 0 0 16px rgba(var(--accent-rgb), 0.15); }
    50% { transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 0 16px rgba(var(--gold-rgb), 0.5), 0 0 32px rgba(var(--accent-rgb), 0.25); }
}
.cast-nayin-core-glow {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80px; height: 80px; border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--gold-rgb), 0.06) 0%, transparent 70%);
    animation: nayinCoreGlow 3s ease-in-out infinite;
    pointer-events: none;
}
@keyframes nayinCoreGlow {
    0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.8); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}

/* 火花粒子 */
.cast-nayin-spark {
    position: absolute; width: 3px; height: 3px; border-radius: 50%;
    background: var(--color-gold);
    box-shadow: 0 0 6px var(--color-gold), 0 0 12px rgba(var(--gold-rgb), 0.4);
    opacity: 0;
}
.cast-nayin-spark-1 { top: 15%; left: 50%; animation: nayinSparkFloat 2.5s ease-in-out 0.3s infinite; }
.cast-nayin-spark-2 { bottom: 20%; right: 25%; animation: nayinSparkFloat 3s ease-in-out 0.8s infinite; }
.cast-nayin-spark-3 { top: 40%; left: 15%; animation: nayinSparkFloat 2.8s ease-in-out 1.4s infinite; }
@keyframes nayinSparkFloat {
    0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
    30% { opacity: 1; transform: translate(6px, -10px) scale(1); }
    70% { opacity: 0.5; transform: translate(12px, -20px) scale(0.7); }
    100% { opacity: 0; transform: translate(18px, -30px) scale(0.3); }
}

/* ===== 大六壬动画：天地盘旋转 · 四课三传 ===== */
.cast-liuren {
    position: relative;
    width: 180px; height: 180px;
    display: flex; align-items: center; justify-content: center;
}

/* --- 装饰光环 --- */
.cast-liuren-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.cast-liuren-ring-outer {
    inset: 0;
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    animation: qnRingRotate 14s linear infinite;
}
.cast-liuren-ring-outer::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px dashed rgba(var(--accent-rgb), 0.06);
    border-radius: 50%;
}
.cast-liuren-ring-inner {
    inset: 25px;
    border: 1px solid rgba(var(--gold-rgb), 0.1);
    animation: qnRingRotate 10s linear infinite reverse;
}

/* --- 地盘（外圈，静止） --- */
.cast-liuren-earth {
    position: absolute;
    inset: 0;
}
.cast-liuren-earth-branch {
    position: absolute;
    top: 50%; left: 50%;
    width: 18px; height: 18px;
    margin: -9px 0 0 -9px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 0.65rem;
    color: rgba(var(--gold-rgb), 0.45);
    transform: rotate(var(--br-angle, 0deg)) translateY(-72px) rotate(calc(var(--br-angle, 0deg) * -1));
}

/* --- 天盘（内圈，旋转） --- */
.cast-liuren-heaven {
    position: absolute;
    inset: 0;
    animation: liurenHeavenSpin 6s linear infinite;
}
.cast-liuren-heaven-branch {
    position: absolute;
    top: 50%; left: 50%;
    width: 20px; height: 20px;
    margin: -10px 0 0 -10px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-gold);
    text-shadow: 0 0 6px rgba(var(--gold-rgb), 0.4);
    transform: rotate(var(--br-angle, 0deg)) translateY(-50px) rotate(calc(var(--br-angle, 0deg) * -1));
    animation: liurenBranchPulse 2s ease-in-out infinite;
    animation-delay: var(--br-delay, 0s);
}
/* 内层文字逆向旋转，抵消天盘旋转，保持文字正向 */
.cast-liuren-heaven-text {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    animation: liurenHeavenSpin 6s linear infinite reverse;
}

/* --- 天地盘交叉线 --- */
.cast-liuren-cross {
    position: absolute;
    top: 50%; left: 50%;
    width: 120px; height: 120px;
    margin: -60px 0 0 -60px;
    border-radius: 50%;
    border: 1px solid rgba(var(--accent-rgb), 0.08);
    animation: liurenCrossPulse 3s ease-in-out infinite;
}

/* --- 中央核心 --- */
.cast-liuren-core {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 30px; height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--gold-rgb), 0.3) 0%, rgba(var(--accent-rgb), 0.08) 60%, transparent 100%);
    border: 1px solid rgba(var(--gold-rgb), 0.35);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 0.6rem;
    color: var(--color-gold);
    text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5);
    animation: liurenCorePulse 2.5s ease-in-out infinite;
    z-index: 5;
}
.cast-liuren-core::after { content: '壬'; }
.cast-liuren-core-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 70px; height: 70px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--gold-rgb), 0.06) 0%, transparent 70%);
    animation: liurenCoreGlow 3s ease-in-out infinite;
    pointer-events: none;
}

/* --- 三传光点（初传、中传、末传） --- */
.cast-liuren-chuan {
    position: absolute;
    top: 50%; left: 50%;
    width: 6px; height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: var(--color-gold);
    box-shadow: 0 0 8px var(--color-gold), 0 0 16px rgba(var(--gold-rgb), 0.5);
    opacity: 0;
    z-index: 6;
}
.cast-liuren-chuan-1 {
    animation: liurenChuanOrbit 4s linear infinite;
    animation-delay: 0s;
}
.cast-liuren-chuan-2 {
    animation: liurenChuanOrbit 4s linear infinite;
    animation-delay: 1.3s;
}
.cast-liuren-chuan-3 {
    animation: liurenChuanOrbit 4s linear infinite;
    animation-delay: 2.6s;
}

/* --- 火花粒子 --- */
.cast-liuren-spark {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--color-gold);
    box-shadow: 0 0 6px var(--color-gold), 0 0 12px rgba(var(--gold-rgb), 0.4);
    opacity: 0;
}
.cast-liuren-spark-1 { top: 15%; left: 30%; animation: liurenSparkFloat 2.5s ease-in-out 0.3s infinite; }
.cast-liuren-spark-2 { bottom: 20%; right: 25%; animation: liurenSparkFloat 3s ease-in-out 0.8s infinite; }
.cast-liuren-spark-3 { top: 45%; left: 10%; animation: liurenSparkFloat 2.8s ease-in-out 1.4s infinite; }

/* --- 关键帧 --- */
@keyframes liurenHeavenSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes liurenBranchPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}
@keyframes liurenCrossPulse {
    0%, 100% { opacity: 0.3; transform: scale(0.95); border-color: rgba(var(--accent-rgb), 0.06); }
    50% { opacity: 0.8; transform: scale(1.05); border-color: rgba(var(--accent-rgb), 0.15); }
}
@keyframes liurenCorePulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.3), 0 0 16px rgba(var(--accent-rgb), 0.15);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.15);
        box-shadow: 0 0 16px rgba(var(--gold-rgb), 0.5), 0 0 32px rgba(var(--accent-rgb), 0.25);
    }
}
@keyframes liurenCoreGlow {
    0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.8); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}
@keyframes liurenChuanOrbit {
    0% { opacity: 0; transform: translate(0, 0) rotate(0deg) translateY(-55px); }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; transform: translate(0, 0) rotate(360deg) translateY(-55px); }
}
@keyframes liurenSparkFloat {
    0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
    30% { opacity: 1; transform: translate(6px, -10px) scale(1); }
    70% { opacity: 0.5; transform: translate(12px, -20px) scale(0.7); }
    100% { opacity: 0; transform: translate(18px, -30px) scale(0.3); }
}

/* ===== 紫微斗数动画：星盘旋转 · 十四主星 · 十二宫 ===== */
.cast-ziwei {
    position: relative;
    width: 180px; height: 180px;
    display: flex; align-items: center; justify-content: center;
}

/* --- 三层光环 --- */
.cast-ziwei-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.cast-ziwei-ring-outer {
    inset: 0;
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    animation: qnRingRotate 16s linear infinite;
}
.cast-ziwei-ring-outer::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px dashed rgba(var(--accent-rgb), 0.06);
    border-radius: 50%;
}
.cast-ziwei-ring-mid {
    inset: 18px;
    border: 1px solid rgba(var(--gold-rgb), 0.1);
    animation: qnRingRotate 12s linear infinite reverse;
}
.cast-ziwei-ring-inner {
    inset: 36px;
    border: 1px solid rgba(var(--gold-rgb), 0.08);
    animation: qnRingRotate 8s linear infinite;
}

/* --- 十二宫位 --- */
.cast-ziwei-palaces {
    position: absolute;
    inset: 0;
}
.cast-ziwei-palace {
    position: absolute;
    top: 50%; left: 50%;
    width: 16px; height: 16px;
    margin: -8px 0 0 -8px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 0.55rem;
    color: rgba(var(--gold-rgb), 0.3);
    transform: rotate(var(--palace-angle, 0deg)) translateY(-80px) rotate(calc(var(--palace-angle, 0deg) * -1));
}

/* --- 十四主星 --- */
.cast-ziwei-stars {
    position: absolute;
    inset: 0;
    animation: qnRingRotate 20s linear infinite;
}
.cast-ziwei-star {
    position: absolute;
    top: 50%; left: 50%;
    width: 20px; height: 20px;
    margin: -10px 0 0 -10px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--color-gold);
    text-shadow: 0 0 6px rgba(var(--gold-rgb), 0.5);
    transform: rotate(var(--star-angle, 0deg)) translateY(-55px) rotate(calc(var(--star-angle, 0deg) * -1));
    opacity: 0;
    animation: ziweiStarAppear 1s ease-out forwards, ziweiStarPulse 2.5s ease-in-out infinite;
    animation-delay: var(--star-delay, 0s), calc(var(--star-delay, 0s) + 1s);
}
/* 内层逆向旋转保持文字正向 */

/* --- 中央命宫核心 --- */
.cast-ziwei-core {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 32px; height: 32px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--gold-rgb), 0.3) 0%, rgba(var(--accent-rgb), 0.08) 60%, transparent 100%);
    border: 1px solid rgba(var(--gold-rgb), 0.35);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 0.6rem;
    color: var(--color-gold);
    text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5);
    animation: ziweiCorePulse 2.5s ease-in-out infinite;
    z-index: 5;
}
.cast-ziwei-core::after { content: '命'; }
.cast-ziwei-core-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 70px; height: 70px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--gold-rgb), 0.06) 0%, transparent 70%);
    animation: ziweiCoreGlow 3s ease-in-out infinite;
    pointer-events: none;
}

/* --- 火花 --- */
.cast-ziwei-spark {
    position: absolute;
    width: 2px; height: 2px;
    border-radius: 50%;
    background: var(--color-gold);
    box-shadow: 0 0 6px var(--color-gold), 0 0 12px rgba(var(--gold-rgb), 0.4);
    opacity: 0;
}
.cast-ziwei-spark-1 { top: 12%; left: 35%; animation: ziweiSparkFloat 3s ease-in-out 0.3s infinite; }
.cast-ziwei-spark-2 { bottom: 15%; right: 25%; animation: ziweiSparkFloat 2.5s ease-in-out 0.8s infinite; }
.cast-ziwei-spark-3 { top: 40%; left: 8%; animation: ziweiSparkFloat 2.8s ease-in-out 1.4s infinite; }

/* --- 关键帧 --- */
@keyframes ziweiStarAppear {
    0% { opacity: 0; transform: rotate(var(--star-angle, 0deg)) translateY(-30px) scale(0.3) rotate(calc(var(--star-angle, 0deg) * -1)); }
    100% { opacity: 0.9; transform: rotate(var(--star-angle, 0deg)) translateY(-55px) scale(1) rotate(calc(var(--star-angle, 0deg) * -1)); }
}
@keyframes ziweiStarPulse {
    0%, 100% { opacity: 0.6; filter: brightness(1); }
    50% { opacity: 1; filter: brightness(1.5); }
}
@keyframes ziweiCorePulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.3), 0 0 16px rgba(var(--accent-rgb), 0.15); }
    50% { transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 0 16px rgba(var(--gold-rgb), 0.5), 0 0 32px rgba(var(--accent-rgb), 0.25); }
}
@keyframes ziweiCoreGlow {
    0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.8); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}
@keyframes ziweiSparkFloat {
    0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
    30% { opacity: 1; transform: translate(5px, -8px) scale(1); }
    70% { opacity: 0.5; transform: translate(10px, -16px) scale(0.7); }
    100% { opacity: 0; transform: translate(15px, -24px) scale(0.3); }
}

/* ===== 七政四余动画：星体环绕 · 黄道 ===== */
.cast-qizheng {
    position: relative;
    width: 180px; height: 180px;
    display: flex; align-items: center; justify-content: center;
}

/* --- 双层光环 --- */
.cast-qizheng-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.cast-qizheng-ring-outer {
    inset: 0;
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    animation: qnRingRotate 18s linear infinite;
}
.cast-qizheng-ring-outer::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px dashed rgba(var(--accent-rgb), 0.06);
    border-radius: 50%;
}
.cast-qizheng-ring-mid {
    inset: 22px;
    border: 1px solid rgba(var(--gold-rgb), 0.1);
    animation: qnRingRotate 14s linear infinite reverse;
}

/* --- 黄道带 --- */
.cast-qizheng-ecliptic {
    position: absolute;
    top: 50%; left: 50%;
    width: 130px; height: 130px;
    margin: -65px 0 0 -65px;
    border-radius: 50%;
    border: 1px solid rgba(var(--gold-rgb), 0.06);
    animation: qizhengEclipticPulse 4s ease-in-out infinite;
}

/* --- 七政星体轨道 --- */
.cast-qizheng-orbit {
    position: absolute;
    inset: 0;
    animation: qnRingRotate 10s linear infinite;
}
.cast-qizheng-planet {
    position: absolute;
    top: 50%; left: 50%;
    width: 22px; height: 22px;
    margin: -11px 0 0 -11px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 0.6rem;
    font-weight: 700;
    transform: rotate(var(--planet-angle, 0deg)) translateY(-60px) rotate(calc(var(--planet-angle, 0deg) * -1));
    opacity: 0;
    animation: qizhengPlanetAppear 0.8s ease-out forwards, qizhengPlanetGlow 2s ease-in-out infinite;
    animation-delay: var(--planet-delay, 0s), calc(var(--planet-delay, 0s) + 0.8s);
}
.cast-qizheng-planet-sun { background: rgba(212, 136, 58, 0.2); color: #D4883A; border: 1px solid #D4883A; box-shadow: 0 0 8px rgba(212, 136, 58, 0.4); }
.cast-qizheng-planet-moon { background: rgba(180, 180, 200, 0.2); color: #C0C0D8; border: 1px solid #9090B0; box-shadow: 0 0 8px rgba(180, 180, 200, 0.3); }
.cast-qizheng-planet-wood { background: rgba(90, 138, 90, 0.2); color: #7AB87A; border: 1px solid #5A8A5A; box-shadow: 0 0 8px rgba(90, 138, 90, 0.3); }
.cast-qizheng-planet-fire { background: rgba(176, 69, 69, 0.2); color: var(--color-red-light); border: 1px solid var(--color-red-light); box-shadow: 0 0 8px rgba(176, 69, 69, 0.3); }
.cast-qizheng-planet-earth { background: rgba(212, 136, 58, 0.15); color: var(--color-orange); border: 1px solid var(--color-orange); box-shadow: 0 0 8px rgba(212, 136, 58, 0.3); }
.cast-qizheng-planet-metal { background: rgba(var(--gold-rgb), 0.15); color: var(--color-gold); border: 1px solid var(--color-gold); box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.3); }
.cast-qizheng-planet-water { background: rgba(74, 111, 181, 0.2); color: #6A9BD8; border: 1px solid #4A6FB5; box-shadow: 0 0 8px rgba(74, 111, 181, 0.3); }

/* --- 中央核心 --- */
.cast-qizheng-core {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 28px; height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--gold-rgb), 0.25) 0%, rgba(var(--accent-rgb), 0.08) 60%, transparent 100%);
    border: 1px solid rgba(var(--gold-rgb), 0.3);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 0.55rem;
    color: var(--color-gold);
    text-shadow: 0 0 8px rgba(var(--accent-rgb), 0.5);
    animation: qizhengCorePulse 2.5s ease-in-out infinite;
    z-index: 5;
}
.cast-qizheng-core::after { content: '星'; }
.cast-qizheng-core-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 60px; height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--gold-rgb), 0.06) 0%, transparent 70%);
    animation: qizhengCoreGlow 3s ease-in-out infinite;
    pointer-events: none;
}

/* --- 火花 --- */
.cast-qizheng-spark {
    position: absolute;
    width: 2px; height: 2px;
    border-radius: 50%;
    background: var(--color-gold);
    box-shadow: 0 0 6px var(--color-gold), 0 0 12px rgba(var(--gold-rgb), 0.4);
    opacity: 0;
}
.cast-qizheng-spark-1 { top: 10%; left: 40%; animation: qizhengSparkFloat 3s ease-in-out 0.2s infinite; }
.cast-qizheng-spark-2 { top: 20%; right: 15%; animation: qizhengSparkFloat 2.5s ease-in-out 0.7s infinite; }
.cast-qizheng-spark-3 { bottom: 15%; left: 20%; animation: qizhengSparkFloat 2.8s ease-in-out 1.2s infinite; }
.cast-qizheng-spark-4 { bottom: 25%; right: 30%; animation: qizhengSparkFloat 3.2s ease-in-out 1.7s infinite; }

/* --- 关键帧 --- */
@keyframes qizhengPlanetAppear {
    0% { opacity: 0; transform: rotate(var(--planet-angle, 0deg)) translateY(-30px) scale(0.3) rotate(calc(var(--planet-angle, 0deg) * -1)); }
    100% { opacity: 0.9; transform: rotate(var(--planet-angle, 0deg)) translateY(-60px) scale(1) rotate(calc(var(--planet-angle, 0deg) * -1)); }
}
@keyframes qizhengPlanetGlow {
    0%, 100% { opacity: 0.7; filter: brightness(1); }
    50% { opacity: 1; filter: brightness(1.5); }
}
@keyframes qizhengEclipticPulse {
    0%, 100% { opacity: 0.2; transform: scale(0.95); border-color: rgba(var(--gold-rgb), 0.04); }
    50% { opacity: 0.6; transform: scale(1.05); border-color: rgba(var(--gold-rgb), 0.1); }
}
@keyframes qizhengCorePulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.3), 0 0 16px rgba(var(--accent-rgb), 0.15); }
    50% { transform: translate(-50%, -50%) scale(1.15); box-shadow: 0 0 16px rgba(var(--gold-rgb), 0.5), 0 0 32px rgba(var(--accent-rgb), 0.25); }
}
@keyframes qizhengCoreGlow {
    0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.8); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}
@keyframes qizhengSparkFloat {
    0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
    30% { opacity: 1; transform: translate(5px, -8px) scale(1); }
    70% { opacity: 0.5; transform: translate(10px, -16px) scale(0.7); }
    100% { opacity: 0; transform: translate(15px, -24px) scale(0.3); }
}

/* ===== 西方星盘动画：黄道十二宫 + 行星轨道 ===== */
.cast-western {
    position: relative;
    width: 200px; height: 200px;
    display: flex; align-items: center; justify-content: center;
}

/* --- 三层光环 --- */
.cast-western-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.cast-western-ring-outer {
    inset: 0;
    border: 1px solid rgba(102, 155, 216, 0.3);
    animation: qnRingRotate 20s linear infinite;
}
.cast-western-ring-outer::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 1px dotted rgba(102, 155, 216, 0.15);
    border-radius: 50%;
}
.cast-western-ring-mid {
    inset: 20px;
    border: 1px dashed rgba(var(--gold-rgb), 0.12);
    animation: qnRingRotate 16s linear infinite reverse;
}
.cast-western-ring-inner {
    inset: 40px;
    border: 1px solid rgba(var(--gold-rgb), 0.2);
    animation: qnRingRotate 12s linear infinite reverse;
}

/* --- 行星轨道轨迹 --- */
.cast-western-orbit-trail {
    position: absolute;
    top: 50%; left: 50%;
    border-radius: 50%;
    border: 1px dotted rgba(102, 155, 216, 0.08);
    pointer-events: none;
}
.cast-western-orbit-trail-1 { width: 72px; height: 72px; margin: -36px 0 0 -36px; }
.cast-western-orbit-trail-2 { width: 96px; height: 96px; margin: -48px 0 0 -48px; border-color: rgba(var(--gold-rgb), 0.06); }
.cast-western-orbit-trail-3 { width: 120px; height: 120px; margin: -60px 0 0 -60px; }
.cast-western-orbit-trail-4 { width: 144px; height: 144px; margin: -72px 0 0 -72px; border-color: rgba(var(--gold-rgb), 0.06); }

/* --- 旋转光束 --- */
.cast-western-beam {
    position: absolute;
    top: 50%; left: 50%;
    width: 160px; height: 2px;
    margin-top: -1px;
    background: linear-gradient(90deg, transparent 0%, rgba(102, 155, 216, 0.25) 30%, rgba(var(--gold-rgb), 0.4) 50%, rgba(102, 155, 216, 0.25) 70%, transparent 100%);
    transform-origin: center;
    animation: westernBeamRotate 6s linear infinite;
    opacity: 0.5;
    pointer-events: none;
}
.cast-western-beam-2 {
    transform: rotate(60deg);
    animation: westernBeamRotate 8s linear infinite reverse;
    opacity: 0.3;
}

/* --- 黄道十二宫 --- */
.cast-western-zodiac {
    position: absolute;
    inset: 0;
    animation: qnRingRotate 30s linear infinite;
}
.cast-western-sign {
    position: absolute;
    top: 50%; left: 50%;
    width: 22px; height: 22px;
    margin: -11px 0 0 -11px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    color: rgba(var(--gold-rgb), 0.9);
    background: rgba(var(--bg-deep-rgb), 0.5);
    border: 1px solid rgba(var(--gold-rgb), 0.25);
    border-radius: 50%;
    text-shadow: 0 0 4px rgba(var(--gold-rgb), 0.5);
    opacity: 0;
    transform: rotate(var(--wa-angle, 0deg)) translateY(-82px) rotate(calc(var(--wa-angle, 0deg) * -1));
    animation: westernSignAppear 0.5s ease-out forwards;
    animation-delay: var(--wa-delay, 0s);
}

/* --- 行星轨道 --- */
.cast-western-orbit {
    position: absolute;
    inset: 0;
    animation: qnRingRotate 8s linear infinite;
}
.cast-western-planet {
    position: absolute;
    top: 50%; left: 50%;
    width: 20px; height: 20px;
    margin: -10px 0 0 -10px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-family: var(--font-display);
    font-size: 0.58rem;
    font-weight: 700;
    transform: rotate(var(--wp-angle, 0deg)) translateY(calc(var(--wp-orbit, 48px) * -1)) rotate(calc(var(--wp-angle, 0deg) * -1));
    opacity: 0;
    animation: westernPlanetAppear 0.7s ease-out forwards, westernPlanetGlow 2.5s ease-in-out infinite;
    animation-delay: var(--wp-delay, 0s), calc(var(--wp-delay, 0s) + 0.7s);
}
.cast-western-planet-sun { background: rgba(255, 179, 0, 0.25); color: #FFB300; border: 1px solid #FFB300; box-shadow: 0 0 10px rgba(255, 179, 0, 0.5); }
.cast-western-planet-moon { background: rgba(144, 164, 174, 0.25); color: #B0BEC5; border: 1px solid #90A4AE; box-shadow: 0 0 8px rgba(144, 164, 174, 0.4); }
.cast-western-planet-mercury { background: rgba(66, 165, 245, 0.25); color: #42A5F5; border: 1px solid #42A5F5; box-shadow: 0 0 8px rgba(66, 165, 245, 0.4); }
.cast-western-planet-venus { background: rgba(102, 187, 106, 0.25); color: #66BB6A; border: 1px solid #66BB6A; box-shadow: 0 0 8px rgba(102, 187, 106, 0.4); }
.cast-western-planet-mars { background: rgba(239, 83, 80, 0.25); color: #EF5350; border: 1px solid #EF5350; box-shadow: 0 0 8px rgba(239, 83, 80, 0.4); }
.cast-western-planet-jupiter { background: rgba(255, 167, 38, 0.25); color: #FFA726; border: 1px solid #FFA726; box-shadow: 0 0 8px rgba(255, 167, 38, 0.4); }
.cast-western-planet-saturn { background: rgba(176, 190, 197, 0.25); color: #B0BEC5; border: 1px solid #B0BEC5; box-shadow: 0 0 8px rgba(176, 190, 197, 0.4); }
.cast-western-planet-uranus { background: rgba(77, 208, 225, 0.25); color: #4DD0E1; border: 1px solid #4DD0E1; box-shadow: 0 0 8px rgba(77, 208, 225, 0.4); }
.cast-western-planet-neptune { background: rgba(92, 107, 192, 0.25); color: #5C6BC0; border: 1px solid #5C6BC0; box-shadow: 0 0 8px rgba(92, 107, 192, 0.4); }
.cast-western-planet-pluto { background: rgba(149, 117, 205, 0.25); color: #9575CD; border: 1px solid #9575CD; box-shadow: 0 0 8px rgba(149, 117, 205, 0.4); }

/* --- 黄道线 --- */
.cast-western-ecliptic {
    position: absolute;
    top: 50%; left: 50%;
    width: 96px; height: 96px;
    margin: -48px 0 0 -48px;
    border-radius: 50%;
    border: 1px solid rgba(102, 155, 216, 0.15);
    animation: westernEclipticPulse 4s ease-in-out infinite;
}
.cast-western-ecliptic-2 {
    width: 130px; height: 130px;
    margin: -65px 0 0 -65px;
    border: 1px dashed rgba(var(--gold-rgb), 0.1);
    animation: westernEclipticPulse 5s ease-in-out infinite reverse;
}

/* --- 中央星核 --- */
.cast-western-core {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 36px; height: 36px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(102, 155, 216, 0.4) 0%, rgba(var(--gold-rgb), 0.15) 60%, transparent 100%);
    border: 1px solid rgba(102, 155, 216, 0.5);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 0.75rem;
    color: #8AB4E8;
    text-shadow: 0 0 10px rgba(102, 155, 216, 0.8), 0 0 20px rgba(var(--gold-rgb), 0.3);
    animation: westernCorePulse 2.5s ease-in-out infinite;
    z-index: 5;
}
.cast-western-core::after { content: '✦'; }
.cast-western-core-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80px; height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(102, 155, 216, 0.12) 0%, rgba(var(--gold-rgb), 0.04) 50%, transparent 70%);
    animation: westernCoreGlow 3s ease-in-out infinite;
    pointer-events: none;
}

/* --- 星辰火花 --- */
.cast-western-spark {
    position: absolute;
    width: 2px; height: 2px;
    border-radius: 50%;
    background: #6A9BD8;
    box-shadow: 0 0 6px #6A9BD8, 0 0 12px rgba(102, 155, 216, 0.4);
    opacity: 0;
}
.cast-western-spark-1 { top: 8%; left: 35%; animation: westernSparkFloat 3s ease-in-out 0.2s infinite; }
.cast-western-spark-2 { top: 18%; right: 12%; animation: westernSparkFloat 2.5s ease-in-out 0.7s infinite; }
.cast-western-spark-3 { bottom: 12%; left: 18%; animation: westernSparkFloat 2.8s ease-in-out 1.2s infinite; }
.cast-western-spark-4 { bottom: 22%; right: 28%; animation: westernSparkFloat 3.2s ease-in-out 1.7s infinite; }
.cast-western-spark-5 { top: 45%; left: 5%; animation: westernSparkFloat 2.7s ease-in-out 0.5s infinite; }
.cast-western-spark-6 { top: 50%; right: 5%; animation: westernSparkFloat 3.5s ease-in-out 1.0s infinite; }
.cast-western-spark-7 { top: 30%; left: 15%; animation: westernSparkFloat 2.6s ease-in-out 0.9s infinite; }
.cast-western-spark-8 { bottom: 35%; right: 18%; animation: westernSparkFloat 3.1s ease-in-out 1.5s infinite; }

/* --- 关键帧 --- */
@keyframes westernSignAppear {
    0% { opacity: 0; transform: rotate(var(--wa-angle, 0deg)) translateY(-40px) scale(0.3) rotate(calc(var(--wa-angle, 0deg) * -1)); }
    60% { opacity: 1; transform: rotate(var(--wa-angle, 0deg)) translateY(-88px) scale(1.1) rotate(calc(var(--wa-angle, 0deg) * -1)); }
    100% { opacity: 0.9; transform: rotate(var(--wa-angle, 0deg)) translateY(-82px) scale(1) rotate(calc(var(--wa-angle, 0deg) * -1)); }
}
@keyframes westernPlanetAppear {
    0% { opacity: 0; transform: rotate(var(--wp-angle, 0deg)) translateY(calc(var(--wp-orbit, 48px) * -0.4)) scale(0.3) rotate(calc(var(--wp-angle, 0deg) * -1)); }
    60% { opacity: 1; transform: rotate(var(--wp-angle, 0deg)) translateY(calc(var(--wp-orbit, 48px) * -1.1)) scale(1.15) rotate(calc(var(--wp-angle, 0deg) * -1)); }
    100% { opacity: 0.9; transform: rotate(var(--wp-angle, 0deg)) translateY(calc(var(--wp-orbit, 48px) * -1)) scale(1) rotate(calc(var(--wp-angle, 0deg) * -1)); }
}
@keyframes westernPlanetGlow {
    0%, 100% { opacity: 0.7; filter: brightness(1); }
    50% { opacity: 1; filter: brightness(1.5); }
}
@keyframes westernEclipticPulse {
    0%, 100% { opacity: 0.2; transform: scale(0.95); border-color: rgba(102, 155, 216, 0.04); }
    50% { opacity: 0.6; transform: scale(1.05); border-color: rgba(102, 155, 216, 0.1); }
}
@keyframes westernCorePulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 10px rgba(102, 155, 216, 0.4), 0 0 20px rgba(var(--gold-rgb), 0.15); }
    50% { transform: translate(-50%, -50%) scale(1.2); box-shadow: 0 0 20px rgba(102, 155, 216, 0.6), 0 0 40px rgba(var(--gold-rgb), 0.25); }
}
@keyframes westernCoreGlow {
    0%, 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(0.8); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
}
@keyframes westernSparkFloat {
    0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
    30% { opacity: 1; transform: translate(5px, -8px) scale(1); }
    70% { opacity: 0.5; transform: translate(10px, -16px) scale(0.7); }
    100% { opacity: 0; transform: translate(15px, -24px) scale(0.3); }
}
@keyframes westernBeamRotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ===== 知几人格动画：六维觉醒 ===== */
.cast-zhiji {
    position: relative;
    width: 200px; height: 200px;
    display: flex; align-items: center; justify-content: center;
}

/* --- 双层光环 --- */
.cast-zhiji-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.cast-zhiji-ring-outer {
    inset: 0;
    border: 1px solid rgba(var(--gold-rgb), 0.15);
    animation: qnRingRotate 20s linear infinite;
}
.cast-zhiji-ring-outer::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px dotted rgba(var(--gold-rgb), 0.08);
    border-radius: 50%;
}
.cast-zhiji-ring-inner {
    inset: 34px;
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    animation: qnRingRotate 14s linear infinite reverse;
}

/* --- 六维光点 --- */
.cast-zhiji-nodes {
    position: absolute;
    inset: 0;
    animation: qnRingRotate 30s linear infinite;
}
.cast-zhiji-node {
    position: absolute;
    top: 50%; left: 50%;
    width: 24px; height: 24px;
    margin: -12px 0 0 -12px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 0.6rem;
    font-weight: 700;
    color: rgba(var(--gold-rgb), 0.9);
    border-radius: 50%;
    background: rgba(var(--gold-rgb), 0.08);
    border: 1px solid rgba(var(--gold-rgb), 0.3);
    box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.3);
    opacity: 0;
    transform: rotate(var(--zj-angle, 0deg)) translateY(-78px) rotate(calc(var(--zj-angle, 0deg) * -1));
    animation: zhijiNodeAppear 0.6s ease-out forwards;
    animation-delay: var(--zj-delay, 0s);
}

/* --- 中心六角星 --- */
.cast-zhiji-hex {
    position: absolute;
    top: 50%; left: 50%;
    width: 40px; height: 40px;
    margin: -20px 0 0 -20px;
    opacity: 0;
    transform: translate(0, 0) scale(0) rotate(0deg);
    animation: zhijiHexAppear 1.2s ease-out 0.6s forwards;
}
.cast-zhiji-hex::before, .cast-zhiji-hex::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid var(--color-gold);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    filter: drop-shadow(0 0 6px rgba(var(--gold-rgb), 0.5));
}
.cast-zhiji-hex::after {
    transform: rotate(30deg);
    border-color: rgba(var(--accent-rgb), 0.5);
}

/* --- 中心觉醒核 --- */
.cast-zhiji-core {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 16px; height: 16px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--gold-rgb), 0.4) 0%, rgba(var(--accent-rgb), 0.1) 60%, transparent 100%);
    border: 1px solid rgba(var(--gold-rgb), 0.4);
    animation: zhijiCorePulse 2.5s ease-in-out infinite;
    z-index: 5;
}
.cast-zhiji-core-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 50px; height: 50px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--gold-rgb), 0.08) 0%, transparent 70%);
    animation: zhijiCoreGlow 3s ease-in-out infinite;
    pointer-events: none;
}

/* --- 星辰火花 --- */
.cast-zhiji-spark {
    position: absolute;
    width: 2px; height: 2px;
    border-radius: 50%;
    background: var(--color-gold-light);
    box-shadow: 0 0 6px var(--color-gold), 0 0 12px rgba(var(--gold-rgb), 0.4);
    opacity: 0;
}
.cast-zhiji-spark-1 { top: 10%; left: 30%; animation: zhijiSparkFloat 3s ease-in-out 0.3s infinite; }
.cast-zhiji-spark-2 { top: 20%; right: 15%; animation: zhijiSparkFloat 2.5s ease-in-out 0.8s infinite; }
.cast-zhiji-spark-3 { bottom: 15%; left: 20%; animation: zhijiSparkFloat 2.8s ease-in-out 1.3s infinite; }
.cast-zhiji-spark-4 { bottom: 25%; right: 25%; animation: zhijiSparkFloat 3.2s ease-in-out 1.8s infinite; }
.cast-zhiji-spark-5 { top: 45%; left: 8%; animation: zhijiSparkFloat 2.7s ease-in-out 0.5s infinite; }
.cast-zhiji-spark-6 { top: 50%; right: 8%; animation: zhijiSparkFloat 3.5s ease-in-out 1.0s infinite; }

/* --- 关键帧 --- */
@keyframes zhijiNodeAppear {
    0% { opacity: 0; transform: rotate(var(--zj-angle, 0deg)) translateY(-40px) scale(0.3) rotate(calc(var(--zj-angle, 0deg) * -1)); }
    100% { opacity: 0.9; transform: rotate(var(--zj-angle, 0deg)) translateY(-78px) scale(1) rotate(calc(var(--zj-angle, 0deg) * -1)); }
}
@keyframes zhijiHexAppear {
    0% { opacity: 0; transform: scale(0) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.3) rotate(180deg); }
    100% { opacity: 1; transform: scale(1) rotate(360deg); }
}
@keyframes zhijiCorePulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.3), 0 0 16px rgba(var(--accent-rgb), 0.1); }
    50% { transform: translate(-50%, -50%) scale(1.2); box-shadow: 0 0 16px rgba(var(--gold-rgb), 0.5), 0 0 32px rgba(var(--accent-rgb), 0.2); }
}
@keyframes zhijiCoreGlow {
    0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.8); }
    50% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
}
@keyframes zhijiSparkFloat {
    0% { opacity: 0; transform: translate(0, 0) scale(0.5); }
    30% { opacity: 1; transform: translate(5px, -8px) scale(1); }
    70% { opacity: 0.5; transform: translate(10px, -16px) scale(0.7); }
    100% { opacity: 0; transform: translate(15px, -24px) scale(0.3); }
}

/* ===== 八字排盘动画：天命玄机 =====
   八卦罗盘旋转 · 水墨晕染铺底 · 朱印依序钤命 · 天干地支墨书浮现 · 五行金线流转
   设计理念：以八卦罗盘为宇宙缩影，朱印钤命为仪式核心，营造天命玄机的庄严感 */

.cast-bazi {
    position: relative;
    width: 300px; height: 220px;
    display: flex; align-items: center; justify-content: center;
    overflow: visible;
}

/* --- 水墨晕染铺底 --- */
.cast-bazi-ink-wash {
    position: absolute; top: 50%; left: 50%;
    width: 260px; height: 140px; border-radius: 50%;
    background: radial-gradient(ellipse,
        rgba(var(--gold-rgb), 0.10) 0%,
        rgba(var(--gold-rgb), 0.04) 30%,
        transparent 65%);
    transform: translate(-50%, -50%) scale(0.2);
    opacity: 0;
    animation: baziInkWash 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s forwards;
    filter: blur(14px);
}
.cast-bazi-ink-wash::after {
    content: ''; position: absolute; inset: -20%;
    border-radius: 50%;
    background: radial-gradient(ellipse,
        rgba(var(--gold-light-rgb), 0.04) 0%,
        transparent 60%);
    filter: blur(8px);
}

/* --- 八卦罗盘 --- */
.cast-bazi-bagua {
    position: absolute; top: 42%; left: 50%;
    width: 180px; height: 180px;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    animation: baziBaguaAppear 1.0s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}
.cast-bazi-bagua-ring {
    position: absolute; inset: 0;
    border-radius: 50%;
}
.cast-bazi-bagua-outer {
    border: 1px dashed rgba(var(--gold-rgb), 0.18);
    animation: baziBaguaRotate 24s linear infinite;
}
.cast-bazi-bagua-outer::before {
    content: ''; position: absolute; inset: 6px;
    border-radius: 50%;
    border: 0.5px solid rgba(var(--gold-rgb), 0.08);
}
.cast-bazi-bagua-inner {
    inset: 20px;
    border: 0.5px solid rgba(var(--gold-rgb), 0.10);
    animation: baziBaguaRotate 18s linear infinite reverse;
}
.cast-bazi-bagua-inner::before {
    content: ''; position: absolute; inset: 4px;
    border-radius: 50%;
    border: 0.5px dashed rgba(var(--gold-light-rgb), 0.06);
}
.cast-bazi-bagua-glyphs {
    position: absolute; inset: 0;
    animation: baziBaguaRotate 30s linear infinite;
}
.cast-bazi-bagua-glyph {
    position: absolute;
    top: 50%; left: 50%;
    font-family: var(--font-display);
    font-size: 0.52rem;
    color: rgba(var(--gold-rgb), 0.25);
    transform: rotate(calc(var(--bg-idx) * 45deg)) translateY(-82px) rotate(calc(var(--bg-idx) * -45deg));
    transform-origin: center;
    opacity: 0;
    animation: baziBaguaGlyphIn 0.4s ease-out forwards;
    animation-delay: calc(0.5s + var(--bg-idx) * 0.08s);
}

/* --- 中心光晕 --- */
.cast-bazi-glow {
    position: absolute; top: 42%; left: 50%;
    width: 140px; height: 80px; border-radius: 50%;
    background: radial-gradient(ellipse,
        rgba(var(--gold-light-rgb), 0.15) 0%,
        rgba(var(--gold-rgb), 0.05) 45%,
        transparent 70%);
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: baziGlowPulse 3s ease-in-out 0.5s infinite;
    filter: blur(5px);
}

/* --- 太极图 --- */
.cast-bazi-taiji {
    position: absolute; top: 42%; left: 50%;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: conic-gradient(from 0deg,
        rgba(var(--gold-rgb), 0.25) 0deg 180deg,
        rgba(var(--overlay-rgb), 0.06) 180deg 360deg);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    animation: baziTaijiIn 0.6s ease-out 0.6s forwards,
               baziTaijiSpin 4s linear 1.2s infinite;
    z-index: 1;
}
.cast-bazi-taiji::before {
    content: ''; position: absolute;
    top: 0; left: 25%; width: 50%; height: 50%;
    border-radius: 50%;
    background: rgba(var(--gold-rgb), 0.25);
}
.cast-bazi-taiji::after {
    content: ''; position: absolute;
    bottom: 0; left: 25%; width: 50%; height: 50%;
    border-radius: 50%;
    background: rgba(var(--overlay-rgb), 0.06);
}

/* --- 命格金线 --- */
.cast-bazi-thread {
    position: absolute; top: 42%; left: 50%;
    width: 250px; height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--gold-rgb), 0.4) 10%,
        rgba(var(--gold-light-rgb), 0.55) 50%,
        rgba(var(--gold-rgb), 0.4) 90%,
        transparent 100%);
    transform: translate(-50%, -50%) scaleX(0);
    opacity: 0;
    animation: baziThreadDraw 1.0s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
    z-index: 2;
}
.cast-bazi-thread::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, rgba(var(--gold-light-rgb), 0.9), transparent);
    background-size: 50px 100%;
    animation: baziThreadFlow 2.5s linear 1.8s infinite;
}

/* --- 四柱容器 --- */
.cast-bazi-pillars {
    position: relative;
    display: flex; gap: 14px;
    z-index: 3;
}

/* --- 单柱 --- */
.cast-bazi-pillar {
    display: flex; flex-direction: column; align-items: center;
    opacity: 0;
    transform: translateY(-12px);
    position: relative;
}
.cast-bazi-p1 { animation: baziPillarIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.8s forwards; }
.cast-bazi-p2 { animation: baziPillarIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.1s forwards; }
.cast-bazi-p3 { animation: baziPillarIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.4s forwards; }
.cast-bazi-p4 { animation: baziPillarIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) 1.7s forwards; }

/* --- 柱体光晕 --- */
.cast-bazi-aura {
    position: absolute;
    top: 50%; left: 50%;
    width: 60px; height: 80px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(ellipse,
        rgba(var(--gold-rgb), 0.06) 0%,
        transparent 70%);
    opacity: 0;
    filter: blur(4px);
}
.cast-bazi-p1 .cast-bazi-aura { animation: baziAuraPulse 2.5s ease-in-out 1.2s infinite; }
.cast-bazi-p2 .cast-bazi-aura { animation: baziAuraPulse 2.5s ease-in-out 1.5s infinite; }
.cast-bazi-p3 .cast-bazi-aura { animation: baziAuraPulse 2.5s ease-in-out 1.8s infinite; }
.cast-bazi-p4 .cast-bazi-aura { animation: baziAuraPulse 2.5s ease-in-out 2.1s infinite; }

/* --- 垂直笔触 --- */
.cast-bazi-brush {
    position: absolute; top: -10px; left: 50%;
    width: 1px; height: 0;
    background: linear-gradient(180deg,
        rgba(var(--gold-light-rgb), 0.7) 0%,
        rgba(var(--gold-rgb), 0.3) 60%,
        transparent 100%);
    transform: translateX(-50%);
    border-radius: 1px;
}
.cast-bazi-p1 .cast-bazi-brush { animation: baziBrushDraw 0.5s ease-out 0.8s forwards; --brush-h: 85px; }
.cast-bazi-p2 .cast-bazi-brush { animation: baziBrushDraw 0.5s ease-out 1.1s forwards; --brush-h: 85px; }
.cast-bazi-p3 .cast-bazi-brush { animation: baziBrushDraw 0.5s ease-out 1.4s forwards; --brush-h: 85px; }
.cast-bazi-p4 .cast-bazi-brush { animation: baziBrushDraw 0.5s ease-out 1.7s forwards; --brush-h: 85px; }

/* --- 朱印 --- */
.cast-bazi-seal {
    position: relative;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
}
.cast-bazi-seal-body {
    position: absolute; inset: 2px;
    border-radius: 5px;
    background: linear-gradient(135deg, #C04040, #8B2828);
    box-shadow:
        0 0 10px rgba(184, 58, 58, 0.3),
        0 2px 6px rgba(0, 0, 0, 0.3),
        inset 0 0 6px rgba(255, 200, 200, 0.1);
    opacity: 0;
    transform: scale(2.5) rotate(-15deg);
}
.cast-bazi-seal-body::after {
    content: ''; position: absolute; inset: 2px;
    border-radius: 3px;
    background: repeating-linear-gradient(45deg,
        transparent, transparent 2px,
        rgba(0, 0, 0, 0.04) 2px, rgba(0, 0, 0, 0.04) 4px);
}
.cast-bazi-p1 .cast-bazi-seal-body { animation: baziSealStamp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.95s forwards; }
.cast-bazi-p2 .cast-bazi-seal-body { animation: baziSealStamp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.25s forwards; }
.cast-bazi-p3 .cast-bazi-seal-body { animation: baziSealStamp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.55s forwards; }
.cast-bazi-p4 .cast-bazi-seal-body { animation: baziSealStamp 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.85s forwards; }

/* --- 印框 --- */
.cast-bazi-seal-frame {
    position: absolute; inset: 4px;
    border-radius: 3px;
    border: 0.5px solid rgba(255, 220, 220, 0.15);
    opacity: 0;
}
.cast-bazi-p1 .cast-bazi-seal-frame { animation: baziSealFrameIn 0.4s ease-out 1.0s forwards; }
.cast-bazi-p2 .cast-bazi-seal-frame { animation: baziSealFrameIn 0.4s ease-out 1.3s forwards; }
.cast-bazi-p3 .cast-bazi-seal-frame { animation: baziSealFrameIn 0.4s ease-out 1.6s forwards; }
.cast-bazi-p4 .cast-bazi-seal-frame { animation: baziSealFrameIn 0.4s ease-out 1.9s forwards; }

/* --- 印环 --- */
.cast-bazi-seal-ring {
    position: absolute; inset: -2px;
    border-radius: 50%;
    border: 1px solid rgba(var(--gold-rgb), 0.3);
    box-shadow: inset 0 0 8px rgba(var(--gold-rgb), 0.06);
    opacity: 0;
}
.cast-bazi-seal-ring::before {
    content: ''; position: absolute; inset: 3px;
    border-radius: 50%;
    border: 0.5px solid rgba(var(--gold-rgb), 0.12);
}
.cast-bazi-p1 .cast-bazi-seal-ring { animation: baziSealRingIn 0.5s ease-out 0.95s forwards; }
.cast-bazi-p2 .cast-bazi-seal-ring { animation: baziSealRingIn 0.5s ease-out 1.25s forwards; }
.cast-bazi-p3 .cast-bazi-seal-ring { animation: baziSealRingIn 0.5s ease-out 1.55s forwards; }
.cast-bazi-p4 .cast-bazi-seal-ring { animation: baziSealRingIn 0.5s ease-out 1.85s forwards; }

/* --- 印光 --- */
.cast-bazi-seal-flash {
    position: absolute; inset: -8px;
    border-radius: 50%;
    border: 2px solid rgba(192, 64, 64, 0.5);
    opacity: 0;
}
.cast-bazi-p1 .cast-bazi-seal-flash { animation: baziSealFlash 0.8s ease-out 0.95s forwards; }
.cast-bazi-p2 .cast-bazi-seal-flash { animation: baziSealFlash 0.8s ease-out 1.25s forwards; }
.cast-bazi-p3 .cast-bazi-seal-flash { animation: baziSealFlash 0.8s ease-out 1.55s forwards; }
.cast-bazi-p4 .cast-bazi-seal-flash { animation: baziSealFlash 0.8s ease-out 1.85s forwards; }

/* --- 墨溅（三滴） --- */
.cast-bazi-seal-ink {
    position: absolute; top: 50%; left: 50%;
    width: 3px; height: 3px; border-radius: 50%;
    background: rgba(192, 64, 64, 0.7);
    opacity: 0;
}
.cast-bazi-seal-ink-a { --ink-x: 6px; --ink-y: -9px; }
.cast-bazi-seal-ink-b { --ink-x: -8px; --ink-y: 7px; }
.cast-bazi-seal-ink-c { --ink-x: 7px; --ink-y: 8px; }
.cast-bazi-p1 .cast-bazi-seal-ink { animation: baziInkSplash 0.7s ease-out 1.0s forwards; }
.cast-bazi-p2 .cast-bazi-seal-ink { animation: baziInkSplash 0.7s ease-out 1.3s forwards; }
.cast-bazi-p3 .cast-bazi-seal-ink { animation: baziInkSplash 0.7s ease-out 1.6s forwards; }
.cast-bazi-p4 .cast-bazi-seal-ink { animation: baziInkSplash 0.7s ease-out 1.9s forwards; }

/* --- 天干 --- */
.cast-bazi-stem {
    position: relative; z-index: 2;
    font-family: var(--font-display);
    font-size: 1.15rem; font-weight: 700;
    color: rgba(255, 240, 210, 0.95);
    line-height: 1;
    opacity: 0;
    filter: blur(5px);
    text-shadow: 0 0 8px rgba(192, 64, 64, 0.4), 0 0 4px rgba(0, 0, 0, 0.3);
}
.cast-bazi-p1 .cast-bazi-stem { animation: baziInkBloom 0.7s ease-out 1.1s forwards; }
.cast-bazi-p2 .cast-bazi-stem { animation: baziInkBloom 0.7s ease-out 1.4s forwards; }
.cast-bazi-p3 .cast-bazi-stem { animation: baziInkBloom 0.7s ease-out 1.7s forwards; }
.cast-bazi-p4 .cast-bazi-stem { animation: baziInkBloom 0.7s ease-out 2.0s forwards; }

/* --- 地支 --- */
.cast-bazi-branch {
    font-family: var(--font-display);
    font-size: 0.92rem;
    color: rgba(var(--gold-light-rgb), 0.8);
    line-height: 1;
    margin-top: 7px;
    opacity: 0;
    filter: blur(4px);
    text-shadow: 0 0 6px rgba(var(--gold-rgb), 0.25);
}
.cast-bazi-p1 .cast-bazi-branch { animation: baziInkBloom 0.6s ease-out 1.25s forwards; }
.cast-bazi-p2 .cast-bazi-branch { animation: baziInkBloom 0.6s ease-out 1.55s forwards; }
.cast-bazi-p3 .cast-bazi-branch { animation: baziInkBloom 0.6s ease-out 1.85s forwards; }
.cast-bazi-p4 .cast-bazi-branch { animation: baziInkBloom 0.6s ease-out 2.15s forwards; }

/* --- 柱名标签 --- */
.cast-bazi-label {
    font-family: var(--font-display);
    font-size: 0.52rem;
    color: rgba(var(--accent-light-rgb), 0.4);
    letter-spacing: 0.25em;
    margin-top: 6px;
    opacity: 0;
}
.cast-bazi-p1 .cast-bazi-label { animation: baziLabelIn 0.4s ease-out 1.4s forwards; }
.cast-bazi-p2 .cast-bazi-label { animation: baziLabelIn 0.4s ease-out 1.7s forwards; }
.cast-bazi-p3 .cast-bazi-label { animation: baziLabelIn 0.4s ease-out 2.0s forwards; }
.cast-bazi-p4 .cast-bazi-label { animation: baziLabelIn 0.4s ease-out 2.3s forwards; }

/* --- 金尘微光 --- */
.cast-bazi-mote {
    position: absolute;
    width: 2px; height: 2px; border-radius: 50%;
    background: rgba(var(--gold-light-rgb), 0.8);
    box-shadow: 0 0 6px rgba(var(--gold-rgb), 0.5);
    opacity: 0;
}
.cast-bazi-mote-1 { left: 15%; bottom: 10%; animation: baziMoteFloat 4s ease-in-out 1.8s infinite; }
.cast-bazi-mote-2 { left: 30%; bottom: 6%; animation: baziMoteFloat 5s ease-in-out 2.2s infinite; }
.cast-bazi-mote-3 { left: 48%; bottom: 12%; animation: baziMoteFloat 4.5s ease-in-out 2.6s infinite; }
.cast-bazi-mote-4 { left: 65%; bottom: 8%; animation: baziMoteFloat 5.5s ease-in-out 3.0s infinite; }
.cast-bazi-mote-5 { left: 82%; bottom: 14%; animation: baziMoteFloat 4.2s ease-in-out 2.4s infinite; }
.cast-bazi-mote-6 { left: 92%; bottom: 10%; animation: baziMoteFloat 4.8s ease-in-out 2.8s infinite; }

/* --- 星火 --- */
.cast-bazi-spark {
    position: absolute;
    width: 3px; height: 3px; border-radius: 50%;
    background: rgba(var(--gold-light-rgb), 0.95);
    box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.7), 0 0 16px rgba(var(--gold-rgb), 0.3);
    opacity: 0;
}
.cast-bazi-spark-1 { left: 20%; top: 25%; animation: baziSparkTwinkle 2s ease-in-out 1.8s infinite; }
.cast-bazi-spark-2 { left: 42%; top: 18%; animation: baziSparkTwinkle 2.5s ease-in-out 2.2s infinite; }
.cast-bazi-spark-3 { left: 65%; top: 22%; animation: baziSparkTwinkle 2.2s ease-in-out 2.6s infinite; }
.cast-bazi-spark-4 { left: 85%; top: 28%; animation: baziSparkTwinkle 2.8s ease-in-out 3.0s infinite; }

/* ===== 关键帧 ===== */
@keyframes baziInkWash {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); filter: blur(25px); }
    40% { opacity: 1; filter: blur(12px); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); filter: blur(14px); }
}
@keyframes baziBaguaAppear {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(-90deg); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}
@keyframes baziBaguaRotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes baziBaguaGlyphIn {
    from { opacity: 0; transform: rotate(calc(var(--bg-idx) * 45deg)) translateY(-70px) rotate(calc(var(--bg-idx) * -45deg)) scale(0.5); }
    to { opacity: 1; transform: rotate(calc(var(--bg-idx) * 45deg)) translateY(-82px) rotate(calc(var(--bg-idx) * -45deg)) scale(1); }
}
@keyframes baziGlowPulse {
    0%, 100% { opacity: 0.25; transform: translate(-50%, -50%) scale(0.85); }
    50% { opacity: 0.6; transform: translate(-50%, -50%) scale(1.15); }
}
@keyframes baziTaijiIn {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0) rotate(0deg); }
    100% { opacity: 0.8; transform: translate(-50%, -50%) scale(1) rotate(180deg); }
}
@keyframes baziTaijiSpin {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes baziThreadDraw {
    0% { opacity: 0; transform: translate(-50%, -50%) scaleX(0); }
    100% { opacity: 1; transform: translate(-50%, -50%) scaleX(1); }
}
@keyframes baziThreadFlow {
    0% { background-position: -50px 0; }
    100% { background-position: 250px 0; }
}
@keyframes baziPillarIn {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes baziBrushDraw {
    0% { height: 0; opacity: 0; }
    20% { opacity: 1; }
    100% { height: var(--brush-h, 85px); opacity: 0.5; }
}
@keyframes baziAuraPulse {
    0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
    50% { opacity: 0.8; transform: translate(-50%, -50%) scale(1.2); }
}
@keyframes baziSealStamp {
    0% { opacity: 0; transform: scale(2.5) rotate(-15deg); }
    50% { opacity: 1; transform: scale(0.8) rotate(3deg); }
    70% { transform: scale(1.05) rotate(-1deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes baziSealFrameIn {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes baziSealRingIn {
    0% { opacity: 0; transform: scale(1.8); }
    50% { opacity: 0.7; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1); }
}
@keyframes baziSealFlash {
    0% { opacity: 0.9; transform: scale(0.5); border-color: rgba(192, 64, 64, 0.6); }
    100% { opacity: 0; transform: scale(2.5); border-color: rgba(192, 64, 64, 0); }
}
@keyframes baziInkSplash {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    30% { opacity: 0.9; transform: translate(calc(-50% + var(--ink-x, 6px) * 0.6), calc(-50% + var(--ink-y, -9px) * 0.6)) scale(1.2); }
    60% { opacity: 0.6; transform: translate(calc(-50% + var(--ink-x, 6px)), calc(-50% + var(--ink-y, -9px))) scale(1.6); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--ink-x, 6px) * 1.4), calc(-50% + var(--ink-y, -9px) * 1.4)) scale(0.6); }
}
@keyframes baziInkBloom {
    0% { opacity: 0; filter: blur(8px); transform: scale(0.6); }
    40% { opacity: 0.7; filter: blur(2px); transform: scale(1.1); }
    70% { opacity: 0.9; filter: blur(0.5px); transform: scale(0.98); }
    100% { opacity: 1; filter: blur(0); transform: scale(1); }
}
@keyframes baziLabelIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes baziMoteFloat {
    0% { opacity: 0; transform: translateY(0) scale(0.4); }
    15% { opacity: 0.9; transform: scale(1); }
    80% { opacity: 0.3; }
    100% { opacity: 0; transform: translateY(-55px) scale(0.2); }
}
@keyframes baziSparkTwinkle {
    0%, 100% { opacity: 0; transform: scale(0.2); }
    50% { opacity: 1; transform: scale(1.3); }
}

/* === 移动端动画容器适配 === */
@media (max-width: 380px) {
    .cast-overlay { padding: 0.5rem; gap: 1.2rem; }
    .cast-anim { width: 180px !important; height: 180px !important; }
    .cast-hex { width: 170px !important; height: 170px !important; }
    .cast-hex-yang, .cast-hex-yin { width: 60px !important; }
    .cast-hex-yin span { width: 26px !important; }
    .cast-tarot-anim { width: 240px !important; height: 240px !important; }
    .cast-leno-anim { width: 240px !important; height: 200px !important; }
    .cast-tarot-ring { width: 170px !important; height: 170px !important; }
    .cast-tarot-ring-2 { width: 200px !important; height: 200px !important; }
    .cast-leno-ring { width: 150px !important; height: 150px !important; }
    .cast-nayin { width: 150px !important; height: 150px !important; }
    .cast-nayin-elem { transform: rotate(var(--elem-angle, 0deg)) translateY(-52px) rotate(calc(var(--elem-angle, 0deg) * -1)) !important; }
    .cast-liuren { width: 150px !important; height: 150px !important; }
    .cast-liuren-earth-branch { transform: rotate(var(--br-angle, 0deg)) translateY(-58px) rotate(calc(var(--br-angle, 0deg) * -1)) !important; }
    .cast-liuren-heaven-branch { transform: rotate(var(--br-angle, 0deg)) translateY(-40px) rotate(calc(var(--br-angle, 0deg) * -1)) !important; }
    .cast-bazi { width: 220px !important; height: 180px !important; }
    .cast-bazi-pillars { gap: 8px !important; }
    .cast-bazi-seal { width: 38px !important; height: 38px !important; }
    .cast-bazi-stem { font-size: 1rem !important; }
    .cast-bazi-branch { font-size: 0.8rem !important; }
    .cast-bazi-thread { width: 190px !important; }
    .cast-bazi-ink-wash { width: 200px !important; height: 110px !important; }
    .cast-bazi-bagua { width: 140px !important; height: 140px !important; }
    .cast-bazi-bagua-glyph { transform: rotate(calc(var(--bg-idx) * 45deg)) translateY(-64px) rotate(calc(var(--bg-idx) * -45deg)) !important; }
}
.cast-hepan { position: relative; display: flex; align-items: center; justify-content: center; gap: 1rem; width: 200px; height: 120px; }
.cast-hepan-col { display: flex; flex-direction: column; gap: 0.3rem; align-items: center; }
.cast-hepan-col-l { animation: hepanSlideL 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.cast-hepan-col-r { animation: hepanSlideR 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes hepanSlideL { 0% { opacity: 0; transform: translateX(-60px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes hepanSlideR { 0% { opacity: 0; transform: translateX(60px); } 100% { opacity: 1; transform: translateX(0); } }
.cast-hepan-glyph { font-family: var(--font-display); font-size: 0.85rem; color: var(--color-gold); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 4px; background: rgba(var(--gold-rgb), 0.08); border: 1px solid rgba(var(--gold-rgb), 0.2); opacity: 0; animation: hepanGlyphAppear 0.4s ease-out forwards; }
.cast-hepan-col-l .cast-hepan-glyph:nth-child(1) { animation-delay: 0.15s; }
.cast-hepan-col-l .cast-hepan-glyph:nth-child(2) { animation-delay: 0.3s; }
.cast-hepan-col-l .cast-hepan-glyph:nth-child(3) { animation-delay: 0.45s; }
.cast-hepan-col-l .cast-hepan-glyph:nth-child(4) { animation-delay: 0.6s; }
.cast-hepan-col-r .cast-hepan-glyph:nth-child(1) { animation-delay: 0.2s; }
.cast-hepan-col-r .cast-hepan-glyph:nth-child(2) { animation-delay: 0.35s; }
.cast-hepan-col-r .cast-hepan-glyph:nth-child(3) { animation-delay: 0.5s; }
.cast-hepan-col-r .cast-hepan-glyph:nth-child(4) { animation-delay: 0.65s; }
@keyframes hepanGlyphAppear { 0% { opacity: 0; transform: scale(0.5); } 100% { opacity: 1; transform: scale(1); } }
.cast-hepan-core { position: relative; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; }
.cast-hepan-taiji { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(from 0deg, var(--color-gold) 0deg 180deg, rgba(var(--overlay-rgb),0.15) 180deg 360deg); opacity: 0; animation: hepanTaijiFadeIn 0.6s ease-out 0.8s forwards, hepanTaijiSpin 2.5s linear 0.8s infinite; }
.cast-hepan-taiji-inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60%; height: 60%; border-radius: 50%; border: 2px solid rgba(var(--gold-rgb), 0.4); }
.cast-hepan-taiji-inner::before, .cast-hepan-taiji-inner::after { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; left: 50%; transform: translateX(-50%); }
.cast-hepan-taiji-inner::before { top: -4px; background: var(--color-gold); }
.cast-hepan-taiji-inner::after { bottom: -4px; background: rgba(var(--overlay-rgb), 0.3); }
@keyframes hepanTaijiSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes hepanTaijiFadeIn { from { opacity: 0; transform: scale(0.5) rotate(0deg); } to { opacity: 0.9; transform: scale(1) rotate(180deg); } }
.cast-hepan-he { position: relative; z-index: 2; font-family: var(--font-display); font-size: 1.3rem; font-weight: bold; color: var(--color-gold); text-shadow: 0 0 12px rgba(var(--gold-rgb), 0.8), 0 0 24px rgba(var(--gold-rgb), 0.4); opacity: 0; animation: hepanHeAppear 0.8s ease-out 1.4s forwards, hepanHePulse 1.8s ease-in-out 2.2s infinite; }
@keyframes hepanHeAppear { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.3); } 100% { opacity: 1; transform: scale(1); } }
@keyframes hepanHePulse { 0%, 100% { text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.5), 0 0 16px rgba(var(--gold-rgb), 0.3); } 50% { text-shadow: 0 0 16px rgba(var(--gold-rgb), 0.9), 0 0 32px rgba(var(--gold-rgb), 0.5); } }
.cast-hepan-ring { position: absolute; top: 50%; left: 50%; width: 50px; height: 50px; border: 2px solid rgba(var(--gold-rgb), 0.5); border-radius: 50%; transform: translate(-50%, -50%); opacity: 0; animation: hepanRingExpand 2s ease-out 1.6s infinite; }
.cast-hepan-ring-2 { animation-delay: 2s; }
.cast-hepan-spark { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--color-gold-light); box-shadow: 0 0 8px var(--color-gold-light); opacity: 0; }
.cast-hepan-spark-1 { top: 20%; left: 30%; animation: hepanSpark 1.5s ease-in-out 2s infinite; }
.cast-hepan-spark-2 { top: 70%; left: 70%; animation: hepanSpark 1.5s ease-in-out 2.3s infinite; }
.cast-hepan-spark-3 { top: 30%; left: 80%; animation: hepanSpark 1.5s ease-in-out 2.6s infinite; }
.cast-hepan-spark-4 { top: 80%; left: 20%; animation: hepanSpark 1.5s ease-in-out 2.9s infinite; }
@keyframes hepanRingExpand { 0% { opacity: 0.6; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.5); } }
@keyframes hepanSpark { 0%, 100% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(1.5); } }

/* ============================================
   起卦动画 — 解梦·月相梦境 (dream)
   月亮悬浮 + 星雾环绕 + 梦字凝聚
   ============================================ */
.cast-dream {
    position: relative;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* 月亮主体 */
.cast-dream-moon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(var(--gold-rgb), 0.95), rgba(var(--gold-rgb), 0.5) 60%, rgba(var(--gold-rgb), 0.15) 100%);
    box-shadow: 0 0 30px rgba(var(--gold-rgb), 0.4), inset -8px -4px 16px rgba(0, 0, 0, 0.3);
    opacity: 0;
    animation: dreamMoonRise 1s ease-out forwards, dreamMoonFloat 3s ease-in-out 1s infinite;
}
/* 月亮弯月缺口 */
.cast-dream-moon::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -6px;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%, rgba(var(--surface-deep-rgb, 15, 12, 8), 0.9), rgba(var(--surface-deep-rgb, 15, 12, 8), 0.7) 70%, transparent 100%);
}
.cast-dream-moon-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--gold-rgb), 0.12) 0%, transparent 70%);
    opacity: 0;
    animation: dreamGlowPulse 2.5s ease-in-out 0.5s infinite;
}
@keyframes dreamMoonRise {
    0% { opacity: 0; transform: translate(-50%, -30%) scale(0.3); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes dreamMoonFloat {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -55%) translateY(-4px); }
}
@keyframes dreamGlowPulse {
    0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(0.9); }
    50% { opacity: 0.7; transform: translate(-50%, -50%) scale(1.2); }
}
/* 双层光环 */
.cast-dream-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(var(--gold-rgb), 0.15);
    animation: dreamRingSpin 14s linear infinite;
}
.cast-dream-ring::before {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 1px dashed rgba(var(--gold-rgb), 0.08);
}
.cast-dream-ring-2 {
    inset: 25px;
    border: 1px solid rgba(var(--gold-rgb), 0.08);
    animation: dreamRingSpin 10s linear infinite reverse;
}
.cast-dream-ring-2::before { display: none; }
@keyframes dreamRingSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
/* 梦境符号环绕 */
.cast-dream-symbols {
    position: absolute;
    inset: 0;
    animation: dreamRingSpin 20s linear infinite;
}
.cast-dream-symbol {
    position: absolute;
    top: 50%;
    left: 50%;
    font-family: var(--font-display);
    font-size: 0.75rem;
    color: var(--color-gold);
    text-shadow: 0 0 6px rgba(var(--gold-rgb), 0.5);
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--sym-rot, 0deg)) translateY(-72px) rotate(calc(-1 * var(--sym-rot, 0deg)));
    animation: dreamSymbolFade 0.6s ease-out forwards;
    animation-delay: var(--sym-delay, 0s);
}
@keyframes dreamSymbolFade {
    0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--sym-rot, 0deg)) translateY(-40px) rotate(calc(-1 * var(--sym-rot, 0deg))) scale(0.5); }
    100% { opacity: 0.8; transform: translate(-50%, -50%) rotate(var(--sym-rot, 0deg)) translateY(-72px) rotate(calc(-1 * var(--sym-rot, 0deg))) scale(1); }
}
/* 梦境雾气 */
.cast-dream-mist {
    position: absolute;
    border-radius: 50%;
    filter: blur(8px);
    opacity: 0;
}
.cast-dream-mist-1 {
    width: 50px; height: 50px;
    background: rgba(var(--gold-rgb), 0.1);
    top: 20%; left: 15%;
    animation: dreamMistDrift 4s ease-in-out 0.8s infinite;
}
.cast-dream-mist-2 {
    width: 40px; height: 40px;
    background: rgba(var(--accent-rgb), 0.08);
    bottom: 20%; right: 15%;
    animation: dreamMistDrift 5s ease-in-out 1.2s infinite reverse;
}
.cast-dream-mist-3 {
    width: 35px; height: 35px;
    background: rgba(var(--gold-rgb), 0.06);
    top: 60%; left: 60%;
    animation: dreamMistDrift 4.5s ease-in-out 1.5s infinite;
}
@keyframes dreamMistDrift {
    0%, 100% { opacity: 0; transform: translate(0, 0) scale(0.8); }
    50% { opacity: 0.6; transform: translate(8px, -6px) scale(1.2); }
}
/* 中心梦字 */
.cast-dream-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--color-gold-light);
    text-shadow: 0 0 12px rgba(var(--gold-rgb), 0.8), 0 0 24px rgba(var(--gold-rgb), 0.4);
    opacity: 0;
    z-index: 2;
    animation: dreamCoreAppear 0.8s ease-out 1.2s forwards, dreamCorePulse 2s ease-in-out 2s infinite;
}
@keyframes dreamCoreAppear {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
    60% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes dreamCorePulse {
    0%, 100% { text-shadow: 0 0 8px rgba(var(--gold-rgb), 0.5), 0 0 16px rgba(var(--gold-rgb), 0.3); }
    50% { text-shadow: 0 0 16px rgba(var(--gold-rgb), 0.9), 0 0 32px rgba(var(--gold-rgb), 0.5); }
}
/* 星光粒子 */
.cast-dream-spark {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--color-gold-light);
    box-shadow: 0 0 6px var(--color-gold-light);
    opacity: 0;
}
.cast-dream-spark-1 { top: 15%; left: 25%; animation: dreamSpark 1.8s ease-in-out 1.5s infinite; }
.cast-dream-spark-2 { top: 75%; left: 20%; animation: dreamSpark 2s ease-in-out 1.8s infinite; }
.cast-dream-spark-3 { top: 25%; right: 20%; animation: dreamSpark 1.6s ease-in-out 2.1s infinite; }
@keyframes dreamSpark { 0%, 100% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(1.5); } }

/* ===== 奇门遁甲动画：天地盘旋转 · 九宫飞星阵 · 八卦八门 ===== */
.cast-qimen {
    position: relative;
    width: 200px; height: 200px;
    display: flex; align-items: center; justify-content: center;
}

/* 外层光晕气场 */
.cast-qimen-aura {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--gold-rgb), 0.06) 0%, transparent 65%);
    opacity: 0;
    animation: qimenAuraPulse 3s ease-in-out 0.2s infinite;
}
@keyframes qimenAuraPulse {
    0%, 100% { opacity: 0.4; transform: scale(0.92); }
    50% { opacity: 1; transform: scale(1.05); }
}

/* 三层环 — 天盘(外)·中盘·地盘(内) */
.cast-qimen-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

/* 天盘：最外圈，顺时针缓转 */
.cast-qimen-ring-outer {
    inset: 0;
    border: 1.5px solid rgba(var(--gold-rgb), 0.2);
    box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.08), inset 0 0 12px rgba(var(--gold-rgb), 0.05);
    animation: qnRingRotate 20s linear infinite;
}
.cast-qimen-ring-outer::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px dashed rgba(var(--gold-rgb), 0.1);
    border-radius: 50%;
}

/* 中盘：八门所在层，逆时针旋转 */
.cast-qimen-ring-mid {
    inset: 22px;
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    animation: qnRingRotate 14s linear infinite reverse;
}
.cast-qimen-ring-mid::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, rgba(var(--gold-rgb), 0.04) 30deg, transparent 60deg, rgba(var(--gold-rgb), 0.04) 120deg, transparent 150deg, rgba(var(--gold-rgb), 0.04) 210deg, transparent 240deg, rgba(var(--gold-rgb), 0.04) 300deg, transparent 330deg);
    -webkit-mask: radial-gradient(circle, transparent 48%, black 49%, black 52%, transparent 53%);
    mask: radial-gradient(circle, transparent 48%, black 49%, black 52%, transparent 53%);
}

/* 地盘：最内圈 */
.cast-qimen-ring-inner {
    inset: 44px;
    border: 1px solid rgba(var(--gold-rgb), 0.15);
    box-shadow: inset 0 0 8px rgba(var(--gold-rgb), 0.06);
    animation: qnRingRotate 10s linear infinite;
}

/* 后天八卦环 — 最外层八卦字符 */
.cast-qimen-bagua-ring {
    position: absolute;
    inset: 0;
    animation: qnRingRotate 20s linear infinite;
}
.cast-qimen-bagua {
    position: absolute;
    top: 50%; left: 50%;
    width: 22px; height: 22px;
    margin: -11px 0 0 -11px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(var(--gold-light-rgb), 0.7);
    text-shadow: 0 0 6px rgba(var(--gold-rgb), 0.4);
    transform: rotate(var(--bg-angle, 0deg)) translateY(-88px) rotate(calc(var(--bg-angle, 0deg) * -1));
    opacity: 0;
    animation: qimenBaguaAppear 0.6s ease-out 0.2s forwards;
}
@keyframes qimenBaguaAppear {
    from { opacity: 0; transform: rotate(var(--bg-angle, 0deg)) translateY(-60px) rotate(calc(var(--bg-angle, 0deg) * -1)) scale(0.5); }
    to { opacity: 0.8; transform: rotate(var(--bg-angle, 0deg)) translateY(-88px) rotate(calc(var(--bg-angle, 0deg) * -1)) scale(1); }
}

/* 八门环 — 中层八门字符 */
.cast-qimen-gate-ring {
    position: absolute;
    inset: 22px;
    animation: qnRingRotate 14s linear infinite reverse;
}
.cast-qimen-gate {
    position: absolute;
    top: 50%; left: 50%;
    width: 18px; height: 18px;
    margin: -9px 0 0 -9px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 0.55rem;
    color: rgba(var(--accent-light-rgb), 0.5);
    transform: rotate(var(--gate-angle, 0deg)) translateY(-66px) rotate(calc(var(--gate-angle, 0deg) * -1));
    opacity: 0;
    animation: qimenGateAppear 0.5s ease-out 0.6s forwards;
}
@keyframes qimenGateAppear {
    from { opacity: 0; }
    to { opacity: 0.55; }
}

/* 八方能量射线 — 从中心向八方射出 */
.cast-qimen-rays {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.cast-qimen-ray {
    position: absolute;
    top: 50%; left: 50%;
    width: 2px;
    height: 70px;
    margin: -35px 0 0 -1px;
    transform-origin: center center;
    transform: rotate(var(--ray-angle, 0deg));
    background: linear-gradient(to top, transparent 0%, rgba(var(--gold-light-rgb), 0.15) 30%, rgba(var(--gold-light-rgb), 0.4) 70%, transparent 100%);
    opacity: 0;
    animation: qimenRayFlash 0.8s ease-out var(--ray-delay, 0s) forwards, qimenRayPulse 2s ease-in-out 1s infinite;
}
@keyframes qimenRayFlash {
    from { opacity: 0; height: 0; }
    to { opacity: 1; height: 70px; }
}
@keyframes qimenRayPulse {
    0%, 100% { opacity: 0.2; }
    50% { opacity: 0.6; }
}

/* 九宫飞星 — 洛书九宫格 */
.cast-qimen-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 2px;
    width: 114px; height: 114px;
    z-index: 3;
}
.cast-qimen-cell {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    border: 1px solid rgba(var(--gold-rgb), 0.18);
    border-radius: 5px;
    background: rgba(var(--overlay-rgb), 0.08);
    -webkit-backdrop-filter: blur(2px) !important;
    backdrop-filter: blur(2px) !important;
    opacity: 0;
    transform: scale(0.3) rotate(-15deg);
    animation: qimenCellAppear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    animation-delay: var(--cell-delay, 0s);
    transition: box-shadow 0.3s;
}
@keyframes qimenCellAppear {
    from { opacity: 0; transform: scale(0.3) rotate(-15deg); }
    to { opacity: 1; transform: scale(1) rotate(0deg); }
}
.cast-qimen-num {
    font-family: var(--font-display);
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-gold);
    text-shadow: 0 0 6px rgba(var(--gold-rgb), 0.5);
    line-height: 1;
}
.cast-qimen-star {
    font-family: var(--font-display);
    font-size: 0.5rem;
    color: var(--color-muted);
    margin-top: 2px;
    line-height: 1;
}

/* 中宫(5)特殊样式 — 禽星居中，太极旋转 */
.cast-qimen-cell-center {
    border: 1.5px solid rgba(var(--gold-light-rgb), 0.4);
    background: rgba(var(--gold-rgb), 0.12);
    box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.2), inset 0 0 6px rgba(var(--gold-rgb), 0.1);
}
.cast-qimen-cell-center .cast-qimen-num { color: var(--color-gold-light); }
.cast-qimen-cell-center .cast-qimen-star { color: rgba(var(--gold-light-rgb), 0.6); }

/* 中宫太极图 */
.cast-qimen-taiji-wrap {
    position: absolute;
    top: 50%; left: 50%;
    width: 20px; height: 20px;
    margin: -10px 0 0 -10px;
    z-index: 4;
    opacity: 0;
    animation: qimenTaijiAppear 0.6s ease-out 1.1s forwards;
}
@keyframes qimenTaijiAppear {
    from { opacity: 0; transform: scale(0); }
    to { opacity: 1; transform: scale(1); }
}
.cast-qimen-taiji {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(from 0deg, var(--color-gold) 0deg 180deg, rgba(var(--overlay-rgb), 0.3) 180deg 360deg);
    animation: qnRingRotate 3s linear infinite;
    box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.4);
}
.cast-qimen-taiji-glow {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--gold-light-rgb), 0.2) 0%, transparent 70%);
    animation: qimenTaijiGlowPulse 2s ease-in-out infinite;
}
@keyframes qimenTaijiGlowPulse {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.3); }
}

/* 飘浮金色星点 */
.cast-qimen-spark {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--color-gold-light);
    box-shadow: 0 0 6px var(--color-gold-light), 0 0 12px rgba(var(--gold-light-rgb), 0.4);
    opacity: 0;
}
.cast-qimen-spark-1 { top: 12%; left: 18%; animation: qimenSparkFloat 2.5s ease-in-out 1.2s infinite; }
.cast-qimen-spark-2 { top: 78%; left: 72%; animation: qimenSparkFloat 2.2s ease-in-out 1.6s infinite; }
.cast-qimen-spark-3 { top: 22%; right: 14%; animation: qimenSparkFloat 2.8s ease-in-out 2s infinite; }
.cast-qimen-spark-4 { bottom: 18%; left: 22%; animation: qimenSparkFloat 2.4s ease-in-out 1.4s infinite; }
.cast-qimen-spark-5 { top: 50%; right: 8%; animation: qimenSparkFloat 2.6s ease-in-out 1.8s infinite; }
.cast-qimen-spark-6 { top: 45%; left: 10%; animation: qimenSparkFloat 2.3s ease-in-out 2.2s infinite; }
@keyframes qimenSparkFloat {
    0%, 100% { opacity: 0; transform: scale(0) translateY(0); }
    50% { opacity: 1; transform: scale(1.2) translateY(-8px); }
}

/* ===== 小六壬动画：六宫流转 · 大安留连速喜赤口小吉空亡 ===== */
.cast-xlr {
    position: relative;
    width: 180px; height: 180px;
    display: flex; align-items: center; justify-content: center;
}
.cast-xlr-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.cast-xlr-ring-outer {
    inset: 0;
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    animation: qnRingRotate 16s linear infinite;
}
.cast-xlr-ring-inner {
    inset: 20px;
    border: 1px dashed rgba(var(--gold-rgb), 0.08);
    animation: qnRingRotate 10s linear infinite reverse;
}
.cast-xlr-gods {
    position: absolute;
    inset: 0;
}
.cast-xlr-god {
    position: absolute;
    top: 50%; left: 50%;
    width: 28px; height: 28px;
    margin: -14px 0 0 -14px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--color-gold);
    border-radius: 50%;
    background: rgba(var(--gold-rgb), 0.08);
    border: 1px solid rgba(var(--gold-rgb), 0.2);
    text-shadow: 0 0 6px rgba(var(--gold-rgb), 0.4);
    transform: rotate(var(--god-angle, 0deg)) translateY(-58px) rotate(calc(var(--god-angle, 0deg) * -1));
    opacity: 0;
    animation: xlrGodAppear 0.5s ease-out forwards, xlrGodPulse 2s ease-in-out infinite;
    animation-delay: var(--god-delay, 0s), calc(var(--god-delay, 0s) + 0.8s);
}
@keyframes xlrGodAppear { from { opacity: 0; transform: rotate(var(--god-angle, 0deg)) translateY(-58px) rotate(calc(var(--god-angle, 0deg) * -1)) scale(0.3); } to { opacity: 1; transform: rotate(var(--god-angle, 0deg)) translateY(-58px) rotate(calc(var(--god-angle, 0deg) * -1)) scale(1); } }
@keyframes xlrGodPulse { 0%, 100% { box-shadow: 0 0 4px rgba(var(--gold-rgb), 0.2); } 50% { box-shadow: 0 0 12px rgba(var(--gold-rgb), 0.5); } }
.cast-xlr-pointer {
    position: absolute;
    top: 50%; left: 50%;
    width: 3px; height: 50px;
    margin: -50px 0 0 -1.5px;
    background: linear-gradient(to top, transparent, var(--color-gold));
    transform-origin: bottom center;
    border-radius: 2px;
    opacity: 0;
    animation: xlrPointerAppear 0.4s ease-out 0.9s forwards, xlrPointerSpin 1.5s cubic-bezier(0.4, 0, 0.2, 1) 1.3s forwards;
}
@keyframes xlrPointerAppear { from { opacity: 0; } to { opacity: 0.8; } }
@keyframes xlrPointerSpin {
    0% { transform: rotate(0deg); }
    60% { transform: rotate(380deg); }
    80% { transform: rotate(355deg); }
    100% { transform: rotate(360deg); }
}
.cast-xlr-core {
    position: absolute;
    top: 50%; left: 50%;
    width: 22px; height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 50%;
    background: rgba(var(--gold-rgb), 0.15);
    border: 1px solid rgba(var(--gold-rgb), 0.4);
    z-index: 2;
    opacity: 0;
    animation: xlrCoreAppear 0.5s ease-out 0.5s forwards, xlrCorePulse 2s ease-in-out 1s infinite;
}
@keyframes xlrCoreAppear { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes xlrCorePulse { 0%, 100% { box-shadow: 0 0 6px rgba(var(--gold-rgb), 0.3); } 50% { box-shadow: 0 0 16px rgba(var(--gold-rgb), 0.6); } }
.cast-xlr-core-glow {
    position: absolute;
    top: 50%; left: 50%;
    width: 40px; height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--gold-rgb), 0.15) 0%, transparent 70%);
    z-index: 1;
    opacity: 0;
    animation: xlrCoreGlow 2s ease-in-out 1s infinite;
}
@keyframes xlrCoreGlow { 0%, 100% { opacity: 0.3; transform: scale(0.8); } 50% { opacity: 0.6; transform: scale(1.2); } }
.cast-xlr-spark {
    position: absolute;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--color-gold-light);
    box-shadow: 0 0 6px var(--color-gold-light);
    opacity: 0;
}
.cast-xlr-spark-1 { top: 20%; left: 30%; animation: xlrSpark 1.5s ease-in-out 1.8s infinite; }
.cast-xlr-spark-2 { top: 70%; left: 70%; animation: xlrSpark 1.7s ease-in-out 2.1s infinite; }
.cast-xlr-spark-3 { top: 30%; right: 25%; animation: xlrSpark 1.4s ease-in-out 2.4s infinite; }
@keyframes xlrSpark { 0%, 100% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(1.5); } }

/* ===== 抽签动画：签筒摇动 · 签条抖动 · 天机签飞出 ===== */
.cast-qian {
    position: relative;
    width: 140px; height: 180px;
    display: flex; align-items: flex-end; justify-content: center;
}
.cast-qian-tube {
    position: absolute;
    bottom: 10px; left: 50%;
    width: 60px; height: 100px;
    margin-left: -30px;
    background: linear-gradient(to bottom, rgba(120, 80, 50, 0.15) 0%, rgba(120, 80, 50, 0.25) 100%);
    border: 1px solid rgba(120, 80, 50, 0.3);
    border-radius: 4px 4px 8px 8px;
    animation: qianTubeShake 0.4s ease-in-out 0.8s infinite;
}
.cast-qian-tube::before {
    content: '';
    position: absolute;
    top: 10px; left: 5px; right: 5px;
    height: 1px;
    background: rgba(var(--gold-rgb), 0.2);
}
.cast-qian-tube-rim {
    position: absolute;
    bottom: 105px; left: 50%;
    width: 64px; height: 6px;
    margin-left: -32px;
    background: rgba(120, 80, 50, 0.3);
    border: 1px solid rgba(120, 80, 50, 0.4);
    border-radius: 3px;
    z-index: 2;
    animation: qianTubeShake 0.4s ease-in-out 0.8s infinite;
}
@keyframes qianTubeShake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(2deg); }
    75% { transform: rotate(-2deg); }
}
.cast-qian-sticks {
    position: absolute;
    bottom: 108px; left: 50%;
    width: 50px; height: 50px;
    margin-left: -25px;
    z-index: 1;
}
.cast-qian-stick {
    position: absolute;
    bottom: 0; left: 50%;
    width: 3px; height: 40px;
    margin-left: var(--stick-offset, 0px);
    background: linear-gradient(to top, rgba(var(--gold-rgb), 0.3), rgba(var(--gold-rgb), 0.5));
    border-radius: 2px 2px 0 0;
    opacity: 0;
    animation: qianStickAppear 0.3s ease-out forwards, qianStickShake 0.3s ease-in-out 0.8s infinite;
    animation-delay: var(--stick-delay, 0s), calc(var(--stick-delay, 0s) + 0.8s);
}
@keyframes qianStickAppear { from { opacity: 0; height: 0; } to { opacity: 1; height: 40px; } }
@keyframes qianStickShake {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}
.cast-qian-fly {
    position: absolute;
    top: 10px; left: 50%;
    width: 4px; height: 50px;
    margin-left: -2px;
    background: linear-gradient(to top, rgba(var(--gold-rgb), 0.6), var(--color-gold));
    border-radius: 2px;
    box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.5);
    opacity: 0;
    animation: qianFly 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.5s forwards;
}
@keyframes qianFly {
    0% { opacity: 0; transform: translateY(80px) scale(0.5); }
    20% { opacity: 1; transform: translateY(60px) scale(1); }
    80% { opacity: 1; transform: translateY(-20px) scale(1); }
    100% { opacity: 1; transform: translateY(-10px) scale(1); }
}
.cast-qian-glow {
    position: absolute;
    top: 0; left: 50%;
    width: 40px; height: 40px;
    margin: -20px 0 0 -20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--gold-rgb), 0.2) 0%, transparent 70%);
    opacity: 0;
    animation: qianGlow 1.5s ease-in-out 1.8s infinite;
}
@keyframes qianGlow { 0%, 100% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 0.5; transform: scale(1.3); } }
.cast-qian-spark {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--color-gold-light);
    box-shadow: 0 0 5px var(--color-gold-light);
    opacity: 0;
}
.cast-qian-spark-1 { top: 15%; left: 35%; animation: qianSpark 1.5s ease-in-out 2s infinite; }
.cast-qian-spark-2 { top: 25%; right: 30%; animation: qianSpark 1.7s ease-in-out 2.3s infinite; }
.cast-qian-spark-3 { top: 5%; left: 50%; animation: qianSpark 1.4s ease-in-out 2.6s infinite; }
@keyframes qianSpark { 0%, 100% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(1.5); } }

/* ===== 三术合参动画：三式交汇 · 六爻梅花奇门 融合归一 ===== */
.cast-sanshu {
    position: relative;
    width: 180px; height: 180px;
    display: flex; align-items: center; justify-content: center;
}
.cast-sanshu-ring {
    position: absolute;
    width: 70px; height: 70px;
    border-radius: 50%;
    border: 1.5px solid;
    opacity: 0;
}
.cast-sanshu-ring-1 {
    top: 50%; left: 20%;
    transform: translateY(-50%);
    border-color: rgba(var(--gold-rgb), 0.4);
    background: rgba(var(--gold-rgb), 0.04);
    animation: sanshuRing1Move 1s ease-out forwards, sanshuRingPulse 2.5s ease-in-out 1s infinite;
}
.cast-sanshu-ring-2 {
    top: 20%; right: 20%;
    border-color: rgba(220, 140, 160, 0.4);
    background: rgba(220, 140, 160, 0.04);
    animation: sanshuRing2Move 1s ease-out 0.2s forwards, sanshuRingPulse 2.5s ease-in-out 1.2s infinite;
}
.cast-sanshu-ring-3 {
    bottom: 20%; right: 20%;
    border-color: rgba(74, 111, 181, 0.4);
    background: rgba(74, 111, 181, 0.04);
    animation: sanshuRing3Move 1s ease-out 0.4s forwards, sanshuRingPulse 2.5s ease-in-out 1.4s infinite;
}
@keyframes sanshuRing1Move {
    from { opacity: 0; transform: translateY(-50%) translateX(-30px); }
    to { opacity: 1; transform: translateY(-50%) translateX(0); }
}
@keyframes sanshuRing2Move {
    from { opacity: 0; transform: translate(30px, -30px); }
    to { opacity: 1; transform: translate(0, 0); }
}
@keyframes sanshuRing3Move {
    from { opacity: 0; transform: translate(30px, 30px); }
    to { opacity: 1; transform: translate(0, 0); }
}
@keyframes sanshuRingPulse { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
.cast-sanshu-label {
    position: absolute;
    width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 0.65rem;
    font-weight: 700;
    border-radius: 50%;
    opacity: 0;
    z-index: 3;
}
.cast-sanshu-label-1 {
    top: 50%; left: 20%;
    transform: translateY(-50%);
    color: var(--color-gold);
    background: rgba(var(--gold-rgb), 0.15);
    border: 1px solid rgba(var(--gold-rgb), 0.4);
    animation: sanshuLabel1Move 0.8s ease-out 0.6s forwards;
}
.cast-sanshu-label-2 {
    top: 20%; right: 20%;
    color: #DC8CA0;
    background: rgba(220, 140, 160, 0.15);
    border: 1px solid rgba(220, 140, 160, 0.4);
    animation: sanshuLabel2Move 0.8s ease-out 0.8s forwards;
}
.cast-sanshu-label-3 {
    bottom: 20%; right: 20%;
    color: #6A9BD8;
    background: rgba(74, 111, 181, 0.15);
    border: 1px solid rgba(74, 111, 181, 0.4);
    animation: sanshuLabel3Move 0.8s ease-out 1s forwards;
}
@keyframes sanshuLabel1Move { from { opacity: 0; transform: translateY(-50%) scale(0); } to { opacity: 1; transform: translateY(-50%) scale(1); } }
@keyframes sanshuLabel2Move { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes sanshuLabel3Move { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
.cast-sanshu-core {
    position: relative;
    z-index: 4;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--gold-rgb), 0.3) 0%, rgba(var(--gold-rgb), 0.05) 100%);
    border: 1px solid rgba(var(--gold-rgb), 0.5);
    opacity: 0;
    animation: sanshuCoreAppear 0.6s ease-out 1.6s forwards, sanshuCorePulse 2s ease-in-out 2.2s infinite;
}
@keyframes sanshuCoreAppear { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes sanshuCorePulse { 0%, 100% { box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.3); } 50% { box-shadow: 0 0 20px rgba(var(--gold-rgb), 0.7); } }
.cast-sanshu-core-glow {
    position: absolute;
    top: 50%; left: 50%;
    width: 60px; height: 60px;
    margin: -30px 0 0 -30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--gold-rgb), 0.12) 0%, transparent 70%);
    z-index: 2;
    opacity: 0;
    animation: sanshuGlow 2s ease-in-out 1.6s infinite;
}
@keyframes sanshuGlow { 0%, 100% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 0.5; transform: scale(1.3); } }
.cast-sanshu-merge {
    position: absolute;
    top: 50%; left: 50%;
    width: 90px; height: 90px;
    margin: -45px 0 0 -45px;
    border-radius: 50%;
    border: 1px solid rgba(var(--gold-rgb), 0.15);
    opacity: 0;
    z-index: 1;
    animation: sanshuMerge 2s ease-out 1.8s infinite;
}
@keyframes sanshuMerge {
    0% { opacity: 0.4; transform: scale(0.5); }
    100% { opacity: 0; transform: scale(1.5); }
}
.cast-sanshu-spark {
    position: absolute;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--color-gold-light);
    box-shadow: 0 0 6px var(--color-gold-light);
    opacity: 0;
}
.cast-sanshu-spark-1 { top: 20%; left: 25%; animation: sanshuSpark 1.5s ease-in-out 2s infinite; }
.cast-sanshu-spark-2 { top: 70%; left: 70%; animation: sanshuSpark 1.7s ease-in-out 2.3s infinite; }
.cast-sanshu-spark-3 { top: 25%; right: 25%; animation: sanshuSpark 1.4s ease-in-out 2.6s infinite; }
.cast-sanshu-spark-4 { top: 75%; left: 30%; animation: sanshuSpark 1.6s ease-in-out 2.9s infinite; }
@keyframes sanshuSpark { 0%, 100% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(1.5); } }

/* ===== 号码吉凶动画：数字翻转 · 数理推演 ===== */
.cast-num {
    position: relative;
    width: 180px; height: 180px;
    display: flex; align-items: center; justify-content: center;
}
.cast-num-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.cast-num-ring-outer {
    inset: 0;
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    animation: qnRingRotate 14s linear infinite;
}
.cast-num-ring-inner {
    inset: 18px;
    border: 1px dashed rgba(var(--gold-rgb), 0.08);
    animation: qnRingRotate 8s linear infinite reverse;
}
.cast-num-digits {
    position: absolute;
    inset: 0;
    animation: qnRingRotate 12s linear infinite;
}
.cast-num-digit {
    position: absolute;
    top: 50%; left: 50%;
    width: 20px; height: 20px;
    margin: -10px 0 0 -10px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-gold);
    text-shadow: 0 0 4px rgba(var(--gold-rgb), 0.4);
    transform: rotate(var(--digit-angle, 0deg)) translateY(-60px) rotate(calc(var(--digit-angle, 0deg) * -1));
    opacity: 0;
    animation: numDigitAppear 0.4s ease-out forwards, numDigitFlip 2s ease-in-out infinite;
    animation-delay: var(--digit-delay, 0s), calc(var(--digit-delay, 0s) + 1s);
}
@keyframes numDigitAppear { from { opacity: 0; transform: rotate(var(--digit-angle, 0deg)) translateY(-60px) rotate(calc(var(--digit-angle, 0deg) * -1)) scale(0); } to { opacity: 0.8; transform: rotate(var(--digit-angle, 0deg)) translateY(-60px) rotate(calc(var(--digit-angle, 0deg) * -1)) scale(1); } }
@keyframes numDigitFlip { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }
.cast-num-core {
    position: relative;
    z-index: 2;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: bold;
    color: var(--color-gold);
    border-radius: 50%;
    background: rgba(var(--gold-rgb), 0.12);
    border: 1px solid rgba(var(--gold-rgb), 0.3);
    text-shadow: 0 0 10px rgba(var(--gold-rgb), 0.6);
    opacity: 0;
    animation: numCoreAppear 0.6s ease-out 1s forwards, numCorePulse 2s ease-in-out 1.6s infinite;
}
@keyframes numCoreAppear { from { opacity: 0; transform: scale(0) rotateY(180deg); } to { opacity: 1; transform: scale(1) rotateY(0deg); } }
@keyframes numCorePulse { 0%, 100% { box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.3); } 50% { box-shadow: 0 0 18px rgba(var(--gold-rgb), 0.6); } }
.cast-num-core-glow {
    position: absolute;
    top: 50%; left: 50%;
    width: 55px; height: 55px;
    margin: -27.5px 0 0 -27.5px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--gold-rgb), 0.12) 0%, transparent 70%);
    z-index: 1;
    opacity: 0;
    animation: numGlow 2s ease-in-out 1s infinite;
}
@keyframes numGlow { 0%, 100% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 0.5; transform: scale(1.2); } }
.cast-num-spark {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--color-gold-light);
    box-shadow: 0 0 5px var(--color-gold-light);
    opacity: 0;
}
.cast-num-spark-1 { top: 22%; left: 30%; animation: numSpark 1.5s ease-in-out 1.5s infinite; }
.cast-num-spark-2 { top: 68%; left: 70%; animation: numSpark 1.7s ease-in-out 1.8s infinite; }
.cast-num-spark-3 { top: 30%; right: 25%; animation: numSpark 1.4s ease-in-out 2.1s infinite; }
@keyframes numSpark { 0%, 100% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(1.5); } }

/* ===== 姓名笔划动画：五格剖象 · 笔画书写 ===== */
.cast-name {
    position: relative;
    width: 180px; height: 180px;
    display: flex; align-items: center; justify-content: center;
}
.cast-name-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(var(--accent-rgb), 0.1);
    animation: qnRingRotate 16s linear infinite;
}
.cast-name-ring-2 {
    inset: 14px;
    border: 1px dashed rgba(var(--gold-rgb), 0.06);
    animation: qnRingRotate 10s linear infinite reverse;
}
.cast-name-grid {
    position: relative;
    display: flex;
    gap: 6px;
    z-index: 2;
}
.cast-name-ge {
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-gold);
    border-radius: 4px;
    background: rgba(var(--gold-rgb), 0.08);
    border: 1px solid rgba(var(--gold-rgb), 0.2);
    text-shadow: 0 0 4px rgba(var(--gold-rgb), 0.4);
    opacity: 0;
    transform: translateY(10px);
    animation: nameGeAppear 0.5s ease-out forwards, nameGePulse 2s ease-in-out infinite;
    animation-delay: var(--ge-delay, 0s), calc(var(--ge-delay, 0s) + 1s);
}
@keyframes nameGeAppear { from { opacity: 0; transform: translateY(10px) scale(0.5); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes nameGePulse { 0%, 100% { box-shadow: 0 0 4px rgba(var(--gold-rgb), 0.2); } 50% { box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.4); } }
.cast-name-ge-3 {
    background: rgba(var(--gold-rgb), 0.15);
    border-color: rgba(var(--gold-rgb), 0.4);
    color: var(--color-gold-light);
}
.cast-name-core {
    position: absolute;
    top: 50%; left: 50%;
    width: 40px; height: 40px;
    margin: -20px 0 0 -20px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: bold;
    color: var(--color-gold);
    border-radius: 50%;
    background: rgba(var(--gold-rgb), 0.12);
    border: 1px solid rgba(var(--gold-rgb), 0.3);
    text-shadow: 0 0 12px rgba(var(--gold-rgb), 0.6);
    z-index: 3;
    opacity: 0;
    animation: nameCoreAppear 0.6s ease-out 1.2s forwards, nameCorePulse 2s ease-in-out 1.8s infinite;
}
@keyframes nameCoreAppear { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes nameCorePulse { 0%, 100% { box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.3); } 50% { box-shadow: 0 0 20px rgba(var(--gold-rgb), 0.6); } }
.cast-name-core-glow {
    position: absolute;
    top: 50%; left: 50%;
    width: 60px; height: 60px;
    margin: -30px 0 0 -30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--gold-rgb), 0.12) 0%, transparent 70%);
    z-index: 1;
    opacity: 0;
    animation: nameGlow 2s ease-in-out 1.2s infinite;
}
@keyframes nameGlow { 0%, 100% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 0.5; transform: scale(1.2); } }
.cast-name-spark {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--color-gold-light);
    box-shadow: 0 0 5px var(--color-gold-light);
    opacity: 0;
}
.cast-name-spark-1 { top: 22%; left: 28%; animation: nameSpark 1.5s ease-in-out 1.8s infinite; }
.cast-name-spark-2 { top: 68%; left: 72%; animation: nameSpark 1.7s ease-in-out 2.1s infinite; }
.cast-name-spark-3 { top: 30%; right: 22%; animation: nameSpark 1.4s ease-in-out 2.4s infinite; }
@keyframes nameSpark { 0%, 100% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(1.5); } }

/* ===== 刻名演卦动画：篆刻印章 · 四柱环转 · 名命相契 ===== */
.cast-keming {
    position: relative;
    width: 180px; height: 180px;
    display: flex; align-items: center; justify-content: center;
}
.cast-keming-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.cast-keming-ring-outer {
    inset: 0;
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    animation: qnRingRotate 18s linear infinite;
}
.cast-keming-ring-inner {
    inset: 18px;
    border: 1px dashed rgba(var(--gold-rgb), 0.08);
    animation: qnRingRotate 12s linear infinite reverse;
}
.cast-keming-pillars {
    position: absolute;
    inset: 0;
    animation: qnRingRotate 22s linear infinite;
}
.cast-keming-pillar {
    position: absolute;
    top: 50%; left: 50%;
    width: 24px; height: 24px;
    margin: -12px 0 0 -12px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--color-gold);
    border-radius: 4px;
    background: rgba(var(--gold-rgb), 0.08);
    border: 1px solid rgba(var(--gold-rgb), 0.22);
    text-shadow: 0 0 4px rgba(var(--gold-rgb), 0.4);
    transform: rotate(var(--km-angle)) translateY(-62px) rotate(calc(var(--km-angle) * -1));
    opacity: 0;
    animation: kmPillarAppear 0.5s ease-out forwards;
    animation-delay: var(--km-delay, 0s);
}
@keyframes kmPillarAppear { from { opacity: 0; transform: rotate(var(--km-angle)) translateY(-30px) rotate(calc(var(--km-angle) * -1)) scale(0.4); } to { opacity: 1; transform: rotate(var(--km-angle)) translateY(-62px) rotate(calc(var(--km-angle) * -1)) scale(1); } }
.cast-keming-seal {
    position: absolute;
    top: 50%; left: 50%;
    width: 52px; height: 52px;
    margin: -26px 0 0 -26px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: bold;
    color: #D45A4A;
    border-radius: 8px;
    background: rgba(212, 90, 74, 0.1);
    border: 2px solid rgba(212, 90, 74, 0.55);
    box-shadow: inset 0 0 10px rgba(212, 90, 74, 0.25), 0 0 14px rgba(212, 90, 74, 0.2);
    text-shadow: 0 0 12px rgba(212, 90, 74, 0.5);
    z-index: 3;
    opacity: 0;
    animation: kmSealStamp 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s forwards, kmSealPulse 2.2s ease-in-out 1.9s infinite;
}
@keyframes kmSealStamp {
    0% { opacity: 0; transform: scale(2.2) rotate(-14deg); }
    60% { opacity: 1; transform: scale(0.92) rotate(2deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes kmSealPulse { 0%, 100% { box-shadow: inset 0 0 10px rgba(212, 90, 74, 0.25), 0 0 10px rgba(212, 90, 74, 0.2); } 50% { box-shadow: inset 0 0 14px rgba(212, 90, 74, 0.35), 0 0 22px rgba(212, 90, 74, 0.4); } }
.cast-keming-seal-glow {
    position: absolute;
    top: 50%; left: 50%;
    width: 72px; height: 72px;
    margin: -36px 0 0 -36px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 90, 74, 0.14) 0%, transparent 70%);
    z-index: 1;
    opacity: 0;
    animation: kmGlow 2s ease-in-out 1.1s infinite;
}
@keyframes kmGlow { 0%, 100% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 0.55; transform: scale(1.25); } }
.cast-keming-chisel {
    position: absolute;
    top: 50%; left: 50%;
    width: 2px; height: 64px;
    margin: -32px 0 0 -1px;
    background: linear-gradient(180deg, transparent, rgba(var(--gold-rgb), 0.55), transparent);
    z-index: 2;
    opacity: 0;
    animation: kmChisel 1.6s cubic-bezier(0.45, 0, 0.55, 1) 1.6s infinite;
}
@keyframes kmChisel {
    0%, 100% { opacity: 0; transform: rotate(0deg) scaleY(0.3); }
    40% { opacity: 0.9; transform: rotate(38deg) scaleY(1); }
    60% { opacity: 0.7; transform: rotate(-30deg) scaleY(0.9); }
    80% { opacity: 0; transform: rotate(10deg) scaleY(0.4); }
}
.cast-keming-spark {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--color-gold-light);
    box-shadow: 0 0 5px var(--color-gold-light);
    opacity: 0;
}
.cast-keming-spark-1 { top: 22%; left: 28%; animation: nameSpark 1.5s ease-in-out 1.9s infinite; }
.cast-keming-spark-2 { top: 68%; left: 72%; animation: nameSpark 1.7s ease-in-out 2.2s infinite; }
.cast-keming-spark-3 { top: 30%; right: 22%; animation: nameSpark 1.4s ease-in-out 2.5s infinite; }


/* ===== 农历查询动画：月相轮转 · 干支推算 · 朔望盈亏 ===== */
.cast-lunar {
    position: relative;
    width: 180px; height: 180px;
    display: flex; align-items: center; justify-content: center;
}
.cast-lunar-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.cast-lunar-ring-outer {
    inset: 0;
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    animation: qnRingRotate 18s linear infinite;
}
.cast-lunar-ring-inner {
    inset: 18px;
    border: 1px dashed rgba(var(--gold-rgb), 0.08);
    animation: qnRingRotate 12s linear infinite reverse;
}
.cast-lunar-phases {
    position: absolute;
    inset: 0;
    animation: qnRingRotate 20s linear infinite;
}
.cast-lunar-phase {
    position: absolute;
    top: 50%; left: 50%;
    width: 20px; height: 20px;
    margin: -10px 0 0 -10px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--color-gold);
    text-shadow: 0 0 4px rgba(var(--gold-rgb), 0.4);
    transform: rotate(var(--phase-angle, 0deg)) translateY(-60px) rotate(calc(var(--phase-angle, 0deg) * -1));
    opacity: 0;
    animation: lunarPhaseAppear 0.4s ease-out forwards, lunarPhaseGlow 2s ease-in-out infinite;
    animation-delay: var(--phase-delay, 0s), calc(var(--phase-delay, 0s) + 1s);
}
@keyframes lunarPhaseAppear { from { opacity: 0; transform: rotate(var(--phase-angle, 0deg)) translateY(-60px) rotate(calc(var(--phase-angle, 0deg) * -1)) scale(0); } to { opacity: 0.7; transform: rotate(var(--phase-angle, 0deg)) translateY(-60px) rotate(calc(var(--phase-angle, 0deg) * -1)) scale(1); } }
@keyframes lunarPhaseGlow { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }
.cast-lunar-moon {
    position: absolute;
    top: 50%; left: 50%;
    width: 30px; height: 30px;
    margin: -15px 0 0 -15px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(var(--gold-rgb), 0.25) 0%, rgba(var(--gold-rgb), 0.08) 60%, transparent 100%);
    border: 1px solid rgba(var(--gold-rgb), 0.2);
    z-index: 1;
    opacity: 0;
    animation: lunarMoonAppear 0.8s ease-out 1s forwards, lunarMoonPhase 3s ease-in-out 1.8s infinite;
}
@keyframes lunarMoonAppear { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes lunarMoonPhase {
    0%, 100% { background: radial-gradient(circle at 35% 35%, rgba(var(--gold-rgb), 0.25) 0%, rgba(var(--gold-rgb), 0.08) 60%, transparent 100%); }
    50% { background: radial-gradient(circle at 35% 35%, rgba(var(--gold-rgb), 0.35) 0%, rgba(var(--gold-rgb), 0.12) 60%, transparent 100%); }
}
.cast-lunar-core {
    position: relative;
    z-index: 2;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 0.8rem;
    font-weight: bold;
    color: var(--color-gold);
    text-shadow: 0 0 10px rgba(var(--gold-rgb), 0.6);
    opacity: 0;
    animation: lunarCoreAppear 0.6s ease-out 1.5s forwards;
}
@keyframes lunarCoreAppear { from { opacity: 0; } to { opacity: 1; } }
.cast-lunar-core-glow {
    position: absolute;
    top: 50%; left: 50%;
    width: 50px; height: 50px;
    margin: -25px 0 0 -25px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--gold-rgb), 0.1) 0%, transparent 70%);
    z-index: 1;
    opacity: 0;
    animation: lunarGlow 2.5s ease-in-out 1s infinite;
}
@keyframes lunarGlow { 0%, 100% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 0.4; transform: scale(1.2); } }
.cast-lunar-spark {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--color-gold-light);
    box-shadow: 0 0 5px var(--color-gold-light);
    opacity: 0;
}
.cast-lunar-spark-1 { top: 22%; left: 30%; animation: lunarSpark 1.6s ease-in-out 2s infinite; }
.cast-lunar-spark-2 { top: 68%; left: 70%; animation: lunarSpark 1.8s ease-in-out 2.3s infinite; }
.cast-lunar-spark-3 { top: 30%; right: 25%; animation: lunarSpark 1.5s ease-in-out 2.6s infinite; }
@keyframes lunarSpark { 0%, 100% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(1.5); } }

/* ===== 生肖运势动画：十二生肖环绕 · 流年吉凶 ===== */
.cast-zodiac {
    position: relative;
    width: 180px; height: 180px;
    display: flex; align-items: center; justify-content: center;
}
.cast-zodiac-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.cast-zodiac-ring-outer {
    inset: 0;
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    animation: qnRingRotate 20s linear infinite;
}
.cast-zodiac-ring-inner {
    inset: 18px;
    border: 1px dashed rgba(var(--gold-rgb), 0.08);
    animation: qnRingRotate 14s linear infinite reverse;
}
.cast-zodiac-animals {
    position: absolute;
    inset: 0;
    animation: qnRingRotate 16s linear infinite;
}
.cast-zodiac-animal {
    position: absolute;
    top: 50%; left: 50%;
    width: 22px; height: 22px;
    margin: -11px 0 0 -11px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-gold);
    border-radius: 50%;
    background: rgba(var(--gold-rgb), 0.06);
    border: 1px solid rgba(var(--gold-rgb), 0.15);
    text-shadow: 0 0 4px rgba(var(--gold-rgb), 0.4);
    transform: rotate(var(--zodiac-angle, 0deg)) translateY(-62px) rotate(calc(var(--zodiac-angle, 0deg) * -1));
    opacity: 0;
    animation: zodiacAnimalAppear 0.4s ease-out forwards, zodiacAnimalPulse 2s ease-in-out infinite;
    animation-delay: var(--zodiac-delay, 0s), calc(var(--zodiac-delay, 0s) + 1.2s);
}
@keyframes zodiacAnimalAppear { from { opacity: 0; transform: rotate(var(--zodiac-angle, 0deg)) translateY(-62px) rotate(calc(var(--zodiac-angle, 0deg) * -1)) scale(0); } to { opacity: 0.8; transform: rotate(var(--zodiac-angle, 0deg)) translateY(-62px) rotate(calc(var(--zodiac-angle, 0deg) * -1)) scale(1); } }
@keyframes zodiacAnimalPulse { 0%, 100% { box-shadow: 0 0 4px rgba(var(--gold-rgb), 0.15); } 50% { box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.35); } }
.cast-zodiac-core {
    position: relative;
    z-index: 2;
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: bold;
    color: var(--color-gold);
    border-radius: 50%;
    background: rgba(var(--gold-rgb), 0.12);
    border: 1px solid rgba(var(--gold-rgb), 0.3);
    text-shadow: 0 0 10px rgba(var(--gold-rgb), 0.6);
    opacity: 0;
    animation: zodiacCoreAppear 0.6s ease-out 1.2s forwards, zodiacCorePulse 2s ease-in-out 1.8s infinite;
}
@keyframes zodiacCoreAppear { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes zodiacCorePulse { 0%, 100% { box-shadow: 0 0 8px rgba(var(--gold-rgb), 0.3); } 50% { box-shadow: 0 0 18px rgba(var(--gold-rgb), 0.6); } }
.cast-zodiac-core-glow {
    position: absolute;
    top: 50%; left: 50%;
    width: 55px; height: 55px;
    margin: -27.5px 0 0 -27.5px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--gold-rgb), 0.12) 0%, transparent 70%);
    z-index: 1;
    opacity: 0;
    animation: zodiacGlow 2s ease-in-out 1.2s infinite;
}
@keyframes zodiacGlow { 0%, 100% { opacity: 0.2; transform: scale(0.8); } 50% { opacity: 0.5; transform: scale(1.2); } }
.cast-zodiac-spark {
    position: absolute;
    width: 3px; height: 3px;
    border-radius: 50%;
    background: var(--color-gold-light);
    box-shadow: 0 0 5px var(--color-gold-light);
    opacity: 0;
}
.cast-zodiac-spark-1 { top: 20%; left: 28%; animation: zodiacSpark 1.5s ease-in-out 1.8s infinite; }
.cast-zodiac-spark-2 { top: 70%; left: 72%; animation: zodiacSpark 1.7s ease-in-out 2.1s infinite; }
.cast-zodiac-spark-3 { top: 28%; right: 22%; animation: zodiacSpark 1.4s ease-in-out 2.4s infinite; }
@keyframes zodiacSpark { 0%, 100% { opacity: 0; transform: scale(0); } 50% { opacity: 1; transform: scale(1.5); } }

/* ============================================
   SHICHEN CLOCK (时辰表盘)
   ============================================ */
.sc-trigger {
    flex: 1;
    padding: 0.7rem 0.8rem;
    min-height: 44px;
    background: rgba(var(--overlay-rgb), 0.04);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-gold-light);
    font-family: var(--font-body);
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    -webkit-tap-highlight-color: transparent;
    transition: all var(--transition);
}
.sc-trigger:hover, .sc-trigger:active { border-color: var(--color-gold); background: rgba(var(--overlay-rgb), 0.07); }
.sc-trigger .sc-trig-name { color: var(--color-gold); font-weight: 700; font-size: 1rem; }
.sc-trigger .sc-trig-range { color: var(--color-muted); font-size: 0.72rem; }
.sc-trigger .sc-trig-icon { color: var(--color-gold); transition: transform 200ms ease; margin-left: auto; }
.qn-shichen-clock.sc-open .sc-trig-icon { transform: rotate(180deg); }
/* ===== 十二时辰选择盘 — 天盘·大漆金缮 ===== */
.sc-dial {
    display: none;
    position: relative;
    width: 290px;
    height: 290px;
    margin: 1.2rem auto 0.6rem;
    border-radius: 50%;
    /* 大漆底 — 深邃温润 */
    background:
        radial-gradient(circle at 50% 32%,
            rgba(var(--surface-rgb), 0.72) 0%,
            rgba(var(--surface-deep-rgb), 0.9) 30%,
            rgba(8, 8, 12, 0.96) 72%,
            rgba(0, 0, 0, 1) 100%);
    box-shadow:
        inset 0 0 80px rgba(0, 0, 0, 0.7),
        inset 0 2px 4px rgba(var(--gold-rgb), 0.03),
        /* 金缮外框 */
        0 0 0 1px rgba(var(--gold-rgb), 0.28),
        0 0 0 3px rgba(0, 0, 0, 0.5),
        0 0 0 4px rgba(var(--gold-rgb), 0.06),
        /* 浮起阴影 */
        0 20px 56px rgba(0, 0, 0, 0.6),
        0 8px 24px rgba(0, 0, 0, 0.4);
}
/* 表盘打开 */
.qn-shichen-clock.sc-open .sc-dial {
    display: block;
    flex-basis: 100%;
    max-width: 290px;
    margin-left: auto;
    margin-right: auto;
    animation: scDialOpen 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes scDialOpen {
    from { opacity: 0; transform: scale(0.88) rotate(-3deg); }
    to { opacity: 1; transform: scale(1) rotate(0); }
}
/* 12刻度 — 极简金线 */
.sc-tick-ring {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.sc-tick {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 10px;
    background: linear-gradient(180deg, rgba(var(--gold-rgb), 0) 0%, rgba(var(--gold-rgb), 0.22) 100%);
    transform-origin: center 139px;
    transform: translate(-50%, -50%) rotate(var(--tick-angle, 0deg)) translateY(-139px);
    border-radius: 0;
}
.sc-tick-major {
    width: 1px;
    height: 14px;
    background: linear-gradient(180deg, rgba(var(--gold-rgb), 0) 0%, rgba(var(--gold-rgb), 0.38) 100%);
}
.sc-tick-minor { display: none; }
/* 单一金线环 — 精工细线 */
.sc-dial-ring-outer {
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(var(--gold-rgb), 0.14);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.sc-dial-ring-outer::before,
.sc-dial-ring-outer::after { display: none; }
/* 内层环 — 玉璧轮廓 */
.sc-dial-ring-inner {
    position: absolute;
    inset: 30px;
    border: 1px solid rgba(var(--gold-rgb), 0.07);
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
.sc-dial-ring-inner::before { display: none; }
/* 八卦字符环 */
.sc-dial-ring-gan {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.sc-gan-char {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 0.52rem;
    color: rgba(var(--gold-rgb), 0.24);
    font-family: var(--font-display, serif);
    transform: translate(-50%, -50%) rotate(var(--gan-angle, 0deg)) translateY(-128px) rotate(calc(var(--gan-angle, 0deg) * -1));
    letter-spacing: 0.05em;
    user-select: none;
}
/* 中心宝石座 — 黑玉凹面 */
.sc-center-medallion {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 44% 28%,
            rgba(var(--surface-deep-rgb), 0.8) 0%,
            rgba(0, 0, 0, 0.9) 50%,
            rgba(0, 0, 0, 0.98) 100%);
    border: 1px solid rgba(var(--gold-rgb), 0.22);
    box-shadow:
        inset 0 0 30px rgba(0, 0, 0, 0.75),
        inset 0 2px 6px rgba(0, 0, 0, 0.5),
        inset 0 -1px 3px rgba(var(--gold-rgb), 0.02),
        0 4px 16px rgba(0, 0, 0, 0.5),
        0 0 20px rgba(var(--accent-rgb), 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.sc-center-medallion::before {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px solid rgba(var(--gold-rgb), 0.08);
    border-radius: 50%;
    pointer-events: none;
}
.sc-center-medallion::after { display: none; }
/* 中心区域文字 */
.sc-center-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 0.7rem;
    color: var(--color-muted);
    pointer-events: none;
    z-index: 1;
    width: 72px;
    transition: opacity 0.3s var(--ease-out-expo);
}
.sc-center-label .sc-center-name {
    font-size: 0.95rem;
    color: var(--color-gold);
    font-weight: 500;
    display: block;
    margin-bottom: 0.18rem;
    letter-spacing: 0.16em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 0 12px rgba(var(--gold-rgb), 0.1);
}
.sc-center-label .sc-center-hint {
    font-size: 0.56rem;
    color: var(--color-muted);
    display: block;
    letter-spacing: 0.12em;
    opacity: 0.5;
}
/* 时辰按钮 — 玉璧圆钮 */
.sc-pos {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    margin: -25px 0 0 -25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    background:
        radial-gradient(circle at 40% 28%,
            rgba(var(--surface-rgb), 0.5) 0%,
            rgba(var(--surface-deep-rgb), 0.7) 45%,
            rgba(0, 0, 0, 0.85) 100%);
    border: 1px solid rgba(var(--gold-rgb), 0.14);
    cursor: pointer;
    font-size: 0.72rem;
    color: var(--color-text);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    transform: rotate(var(--sc-angle, 0deg)) translateY(-106px) rotate(calc(var(--sc-angle, 0deg) * -1));
    z-index: 2;
    box-shadow:
        0 3px 10px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    -webkit-tap-highlight-color: transparent;
}
.sc-pos::before { display: none; }
.sc-pos::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    border: 1px solid rgba(var(--gold-rgb), 0.04);
    pointer-events: none;
}
.sc-pos:hover, .sc-pos:active {
    background:
        radial-gradient(circle at 40% 28%,
            rgba(var(--accent-light-rgb), 0.12) 0%,
            rgba(var(--accent-rgb), 0.05) 45%,
            rgba(var(--surface-deep-rgb), 0.9) 100%);
    border-color: rgba(var(--gold-rgb), 0.42);
    box-shadow:
        0 5px 14px rgba(0, 0, 0, 0.45),
        0 0 12px rgba(var(--gold-rgb), 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: rotate(var(--sc-angle, 0deg)) translateY(-110px) rotate(calc(var(--sc-angle, 0deg) * -1)) scale(1.1);
}
.sc-pos.sc-active {
    background:
        radial-gradient(circle at 38% 24%,
            rgba(var(--gold-light-rgb), 0.95) 0%,
            rgba(var(--gold-rgb), 0.85) 40%,
            rgba(var(--gold-dark-rgb), 0.8) 100%);
    border-color: rgba(var(--gold-rgb), 0.6);
    color: var(--color-bg);
    font-weight: 600;
    box-shadow:
        0 0 20px rgba(var(--accent-rgb), 0.3),
        0 4px 12px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.35),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.sc-pos.sc-active::after {
    border-color: rgba(255, 255, 255, 0.1);
}
.sc-pos.sc-preview {
    background:
        radial-gradient(circle at 40% 28%,
            rgba(var(--accent-light-rgb), 0.22) 0%,
            rgba(var(--accent-rgb), 0.08) 45%,
            rgba(var(--surface-deep-rgb), 0.9) 100%);
    border-color: rgba(var(--gold-rgb), 0.5);
    box-shadow:
        0 0 18px rgba(var(--gold-rgb), 0.25),
        0 4px 12px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: rotate(var(--sc-angle, 0deg)) translateY(-110px) rotate(calc(var(--sc-angle, 0deg) * -1)) scale(1.1);
    animation: scPreviewPulse 2s ease-in-out infinite;
}
@keyframes scPreviewPulse {
    0%, 100% { box-shadow: 0 0 18px rgba(var(--gold-rgb), 0.25), 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1); }
    50% { box-shadow: 0 0 26px rgba(var(--gold-rgb), 0.4), 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.14); }
}
/* 时辰按钮文字 */
.sc-pos-name {
    color: var(--color-gold);
    font-weight: 500;
    font-size: 0.86rem;
    min-width: 2.5rem;
    line-height: 1.1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    font-family: var(--font-display, serif);
}
.sc-pos-time {
    color: var(--color-muted);
    font-size: 0.64rem;
    line-height: 1.1;
    opacity: 0.6;
    margin-top: 1px;
}
.sc-pos.sc-active .sc-pos-name { color: var(--color-bg); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
.sc-pos.sc-active .sc-pos-time { color: rgba(var(--bg-rgb), 0.7); }
/* 确认按钮 — 金玺玉印 */
.sc-confirm-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.48rem 1.25rem;
    background:
        linear-gradient(180deg,
            rgba(var(--gold-light-rgb), 0.98) 0%,
            rgba(var(--gold-rgb), 0.92) 45%,
            rgba(var(--gold-dark-rgb), 0.88) 100%);
    color: var(--color-bg);
    border: 1px solid rgba(var(--gold-rgb), 0.6);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    z-index: 3;
    white-space: nowrap;
    letter-spacing: 0.2em;
    text-indent: 0.2em;
    box-shadow:
        0 4px 16px rgba(var(--accent-rgb), 0.32),
        0 2px 6px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        inset 0 -1px 2px rgba(0, 0, 0, 0.12);
    -webkit-tap-highlight-color: transparent;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    animation: scConfirmIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.sc-confirm-btn::before { display: none; }
.sc-confirm-btn::after {
    content: '';
    position: absolute;
    inset: 1px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    pointer-events: none;
}
.sc-confirm-btn:hover {
    box-shadow:
        0 6px 22px rgba(var(--accent-rgb), 0.42),
        0 3px 8px rgba(0, 0, 0, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.44),
        inset 0 -1px 2px rgba(0, 0, 0, 0.1);
    filter: brightness(1.05);
    transform: translate(-50%, -50%) scale(1.04);
}
.sc-confirm-btn:active {
    transform: translate(-50%, -50%) scale(0.92);
    box-shadow:
        0 2px 10px rgba(var(--accent-rgb), 0.25),
        0 1px 4px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
@keyframes scConfirmIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* 响应式 */
@media (max-width: 360px) {
    .sc-dial { width: 244px; height: 244px; }
    .sc-pos { width: 42px; height: 42px; margin: -21px 0 0 -21px; font-size: 0.64rem; transform: rotate(var(--sc-angle, 0deg)) translateY(-89px) rotate(calc(var(--sc-angle, 0deg) * -1)); }
    .sc-pos:hover, .sc-pos:active, .sc-pos.sc-preview { transform: rotate(var(--sc-angle, 0deg)) translateY(-92px) rotate(calc(var(--sc-angle, 0deg) * -1)) scale(1.1); }
    .sc-center-medallion { width: 82px; height: 82px; }
    .sc-tick { transform-origin: center 116px; transform: translate(-50%, -50%) rotate(var(--tick-angle, 0deg)) translateY(-116px); }
    .sc-gan-char { transform: translate(-50%, -50%) rotate(var(--gan-angle, 0deg)) translateY(-107px) rotate(calc(var(--gan-angle, 0deg) * -1)); font-size: 0.48rem; }
    .sc-dial-ring-inner { inset: 26px; }
}
@media (max-width: 768px) {
    .sc-trigger {
        padding: 0.5rem 0.6rem;
        min-height: 38px;
        font-size: 0.82rem;
        gap: 0.3rem;
    }
    .sc-trigger .sc-trig-name { font-size: 0.88rem; }
    .sc-trigger .sc-trig-range { font-size: 0.66rem; }
    .sc-dial {
        width: 244px;
        height: 244px;
        margin: 0.5rem auto;
    }
    .sc-pos {
        width: 42px;
        height: 42px;
        margin: -21px 0 0 -21px;
        font-size: 0.64rem;
        transform: rotate(var(--sc-angle, 0deg)) translateY(-89px) rotate(calc(var(--sc-angle, 0deg) * -1));
    }
    .sc-pos:hover, .sc-pos:active, .sc-pos.sc-preview {
        transform: rotate(var(--sc-angle, 0deg)) translateY(-92px) rotate(calc(var(--sc-angle, 0deg) * -1)) scale(1.1);
    }
    .sc-center-medallion { width: 82px; height: 82px; }
    .sc-center-label .sc-center-name { font-size: 0.82rem; }
    .sc-center-label { width: 64px; }
    .sc-pos-name { font-size: 0.78rem; min-width: 2rem; }
    .sc-pos-time { font-size: 0.6rem; }
    .sc-tick { transform-origin: center 116px; transform: translate(-50%, -50%) rotate(var(--tick-angle, 0deg)) translateY(-116px); }
    .sc-gan-char { transform: translate(-50%, -50%) rotate(var(--gan-angle, 0deg)) translateY(-107px) rotate(calc(var(--gan-angle, 0deg) * -1)); font-size: 0.48rem; }
    .sc-dial-ring-inner { inset: 26px; }
    .sc-minute-field {
        width: 48px;
        padding: 0.5rem 0.2rem;
        font-size: 14px;
        min-height: 38px;
    }
    .qn-cal-btn {
        padding: 0.4rem 0.5rem;
        min-height: 34px;
        font-size: 0.75rem;
    }
    .qn-time-mode-group { margin-bottom: 0.35rem !important; }
    .qn-shichen-clock { gap: 0.3rem; }
    .qn-exact-time-row { gap: 0.2rem; }
    .qn-exact-hint { font-size: 0.65rem; margin-top: 0.2rem; }
}
@media (max-width: 480px) {
    .sc-trigger {
        padding: 0.4rem 0.5rem;
        min-height: 34px;
        font-size: 0.78rem;
    }
    .sc-trigger .sc-trig-name { font-size: 0.82rem; }
    .sc-dial {
        width: 214px;
        height: 214px;
        margin: 0.4rem auto;
    }
    .sc-pos {
        width: 36px;
        height: 36px;
        margin: -18px 0 0 -18px;
        font-size: 0.58rem;
        transform: rotate(var(--sc-angle, 0deg)) translateY(-78px) rotate(calc(var(--sc-angle, 0deg) * -1));
    }
    .sc-pos:hover, .sc-pos:active, .sc-pos.sc-preview {
        transform: rotate(var(--sc-angle, 0deg)) translateY(-80px) rotate(calc(var(--sc-angle, 0deg) * -1)) scale(1.1);
    }
    .sc-center-medallion { width: 72px; height: 72px; }
    .sc-center-label .sc-center-name { font-size: 0.76rem; }
    .sc-center-label .sc-center-hint { font-size: 0.5rem; }
    .sc-center-label { width: 58px; }
    .sc-pos-name { font-size: 0.72rem; min-width: 1.8rem; }
    .sc-pos-time { font-size: 0.54rem; }
    .sc-confirm-btn { padding: 0.4rem 1.1rem; font-size: 0.7rem; }
    .sc-tick { transform-origin: center 102px; transform: translate(-50%, -50%) rotate(var(--tick-angle, 0deg)) translateY(-102px); }
    .sc-gan-char { transform: translate(-50%, -50%) rotate(var(--gan-angle, 0deg)) translateY(-94px) rotate(calc(var(--gan-angle, 0deg) * -1)); font-size: 0.44rem; }
    .sc-dial-ring-inner { inset: 22px; }
    .sc-minute-field {
        width: 44px;
        padding: 0.4rem 0.15rem;
        font-size: 13px;
        min-height: 34px;
    }
    .qn-cal-btn {
        padding: 0.35rem 0.4rem;
        min-height: 32px;
        font-size: 0.72rem;
    }
}
/* 图例 — 对照表 */
.sc-legend { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(var(--gold-rgb), 0.1); flex-basis: 100%; width: 100%; }
.sc-legend-title { font-size: 0.68rem; color: var(--color-muted); margin-bottom: 0.6rem; text-align: center; letter-spacing: 0.14em; }
.sc-legend-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
.sc-legend-item {
    font-size: 0.66rem;
    color: var(--color-text);
    padding: 0.4rem 0.25rem;
    border-radius: var(--radius-sm);
    text-align: center;
    border: 1px solid rgba(var(--gold-rgb), 0.08);
    background: rgba(var(--surface-rgb), 0.3);
    cursor: pointer;
    transition: all 0.25s var(--ease-out-expo);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}
.sc-legend-item:hover { border-color: rgba(var(--gold-rgb), 0.3); background: rgba(var(--accent-rgb), 0.06); transform: translateY(-1px); }
.sc-legend-item b { color: var(--color-gold); font-weight: 600; font-size: 0.78rem; }
.sc-legend-item em { font-style: normal; color: var(--color-muted); font-size: 0.56rem; }
.sc-legend-active { background: rgba(var(--accent-rgb), 0.12); border-color: rgba(var(--gold-rgb), 0.3); }

/* ============================================
   DAILY FORTUNE (homepage)
   样式定义在 index.php 内联 <style> 中，此处不再重复
   ============================================ */

/* ============================================
   UTILITY CLASSES
   ============================================ */
.text-center { text-align: center; }
.text-center > form { display: inline-flex !important; vertical-align: middle; }
.text-center > .btn, .text-center > form > .btn, .text-center > a.btn { vertical-align: middle; }
/* 结果页操作按钮行：简洁居中排列，与历史记录页按钮风格一致 */
.text-center.mt-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
}
.text-center.mt-2 > .btn,
.text-center.mt-2 > a.btn,
.text-center.mt-2 > form > .btn {
    margin: 0;
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
    min-height: 38px;
    white-space: nowrap;
}
/* 操作按钮行内分享按钮统一风格 */
.text-center.mt-2 > .btn-share,
.text-center.mt-2 > a.btn-share {
    border-color: var(--color-gold);
    color: var(--color-gold);
    background: rgba(var(--surface-deep-rgb), 0.85);
}
.text-center.mt-2 > form {
    margin: 0;
    padding: 0;
    display: inline-flex;
}
.text-gold { color: var(--color-gold); }
.text-muted { color: var(--color-muted); }
.text-red { color: var(--color-red-light); }
.mt-2 { margin-top: 1.2rem; }
.mb-2 { margin-bottom: 1.2rem; }
.hidden { display: none; }

/* ============================================
   PAGE ENTRANCE ANIMATIONS
   ============================================ */
html:not(.page-ready) .hero,
html:not(.page-ready) .method-grid,
html:not(.page-ready) .site-footer,
html:not(.page-ready) .mobile-topbar,
html:not(.page-ready) .mobile-tabbar,
html:not(.page-ready) .page-header,
html:not(.page-ready) .divination-form,
html:not(.page-ready) .qn-cast-form,
html:not(.page-ready) .result-section,
html:not(.page-ready) .qn-date-row { opacity: 0; }
/* 20260915g：page-ready 已延后到 DOMContentLoaded 对齐首帧（见 zw-header.js），
   解析中途的渐进绘制会露出未列入上方清单的零散内容、随后在入场动画起始
   帧闪断 —— 补齐整页内容容器的预备态隐藏（背景装饰层 qn-glyph-layer /
   zs-bg-layer 与 page-loader 均在容器外，不受影响） */
html:not(.page-ready) .main-content { opacity: 0; }
html:not(.page-ready) body { overflow: hidden; }

.page-ready .mobile-topbar { animation: navFadeIn 0.8s ease 0.1s both; }
@keyframes navFadeIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
.page-ready .mobile-tabbar { animation: navFadeIn 0.8s ease 0.2s both; }
.page-ready .page-header { animation: fadeInUp 0.6s ease-out 0.2s both; }
.page-ready .divination-form, .page-ready .qn-cast-form { animation: fadeInUp 0.6s ease-out 0.4s both; }
.page-ready .result-section { animation: resultFadeIn 0.6s var(--ease-out-expo) both; }
.page-ready .qn-date-row { animation: fadeInUp 0.6s ease-out 0.5s both; }
.page-ready .hero { animation: heroIn 1.2s ease-out 0.3s both; }
@keyframes heroIn { 0% { opacity: 0; transform: translateY(30px); filter: blur(8px); } 100% { opacity: 1; transform: translateY(0); filter: blur(0); } }
.page-ready .hero h1 { animation: titleGlow 1.4s ease-out 0.5s both, heroGlow 4s ease-in-out 1.4s infinite; }
@keyframes titleGlow { 0% { opacity: 0; letter-spacing: 0.5em; filter: blur(14px); } 60% { opacity: 1; letter-spacing: 0.03em; filter: blur(3px); } 100% { opacity: 1; letter-spacing: 0.03em; filter: blur(0); } }
@keyframes heroGlow { 0%, 100% { text-shadow: 0 0 16px rgba(var(--accent-rgb), 0.12), 0 0 32px rgba(var(--accent-rgb), 0.05); } 50% { text-shadow: 0 0 36px rgba(var(--accent-rgb), 0.45), 0 0 64px rgba(var(--accent-rgb), 0.22); } }
.page-ready .hero .hero-decoration { animation: fadeInUp 0.6s ease-out 1.1s both; }
.page-ready .hero .subtitle { animation: fadeInUp 0.6s ease-out 1.2s both; }
.page-ready .hero p:last-child { animation: fadeInUp 0.6s ease-out 1.4s both; }
.page-ready .method-card { animation: cardIn 0.45s ease-out both; }
@keyframes cardIn { 0% { opacity: 0; transform: translateY(32px) scale(0.9); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes resultFadeIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } }
.contact-modal.show, .legend-modal.show, .confirm-modal.show { animation: modalFadeIn 0.25s ease both; }

/* Card stagger */
/* 分支选择卡错峰入场（合盘/奇门分支页等仅 2-3 张卡：快速错峰，不再长等） */
.page-ready .method-card:nth-child(1) { animation-delay: 0.12s; }
.page-ready .method-card:nth-child(2) { animation-delay: 0.22s; }
.page-ready .method-card:nth-child(3) { animation-delay: 0.32s; }
.page-ready .method-card:nth-child(4) { animation-delay: 0.42s; }
.page-ready .method-card:nth-child(5) { animation-delay: 0.52s; }
.page-ready .method-card:nth-child(6) { animation-delay: 0.62s; }
.page-ready .method-card:nth-child(7) { animation-delay: 0.72s; }
.page-ready .method-card:nth-child(8) { animation-delay: 0.82s; }
.page-ready .method-card:nth-child(n+9) { animation-delay: 0.9s; }

/* ===== Category filter fast fade-in (overrides initial load animation) ===== */
@keyframes cardFilterIn {
    0%   { opacity: 0; transform: translateY(10px) scale(0.97); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.method-card.card-filter-in {
    animation: cardFilterIn 0.28s ease-out both !important;
}

/* ============================================
   PRESS FEEDBACK
   ============================================ */
.btn, .btn-contact, .btn-join, .ai-start-btn {
    transition: transform 250ms var(--ease-spring), box-shadow 300ms ease, background 250ms ease, border-color 250ms ease, color 250ms ease;
    will-change: transform;
}
.btn:hover, .btn-contact:hover, .btn-join:hover { transform: translateY(-2px); }
.btn:active, .btn-contact:active, .btn-join:active { transform: translateY(0) scale(0.96); transition-duration: 100ms; }
.method-card:active, .method-tab:active, .yao-selector-btn:active, .qn-gender-btn:active, .qn-cal-btn:active, .sc-trigger:active { transform: scale(0.96); transition: transform 120ms ease; }

/* ===== 卡片触摸/点击反馈增强 ===== */
.method-card:active {
    transform: scale(0.95) translateY(-1px) translateZ(0);
    border-color: var(--color-gold);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3), 0 0 24px rgba(var(--accent-rgb), 0.25);
    transition: transform 80ms ease, border-color 80ms ease, box-shadow 80ms ease;
}
.method-card:active::after {
    opacity: 1;
    background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(var(--accent-rgb), 0.25), transparent 60%);
}
.method-card:active::before {
    opacity: 1;
    height: 3px;
}
/* 触摸设备反馈 */
.method-card.card-touched {
    transform: scale(0.96) translateZ(0);
    border-color: var(--color-gold);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25), 0 0 14px rgba(var(--accent-rgb), 0.2);
}
.method-card.card-touched::after {
    opacity: 1;
}

/* ===== 点击高亮（拦截跳转后立即亮起，无过渡延迟） ===== */
.method-card.card-clicked {
    transform: scale(0.95) translateZ(0);
    border-color: var(--color-gold) !important;
    box-shadow:
        0 0 0 1px var(--color-gold),
        0 0 16px rgba(var(--accent-rgb), 0.3),
        0 4px 12px rgba(0, 0, 0, 0.35) !important;
    transition: none !important;
}
.method-card.card-clicked::after {
    opacity: 1 !important;
    background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(var(--accent-rgb), 0.25), transparent 70%) !important;
}
.method-card.card-clicked::before {
    opacity: 1 !important;
    height: 2px !important;
    background: linear-gradient(90deg, transparent, var(--color-gold-light), transparent) !important;
    box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.4) !important;
}

/* ============================================
   SCROLLBAR
   ============================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(var(--accent-rgb), 0.2); border-radius: 3px; transition: background 200ms ease; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--accent-rgb), 0.4); }

::selection { background: rgba(var(--accent-rgb), 0.3); color: var(--color-gold-light); }
::-moz-selection { background: rgba(var(--accent-rgb), 0.3); color: var(--color-gold-light); }

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .method-card .card-icon, .page-ready .hero h1, .qn-glyph, .qn-particle, .qn-glow { animation: none !important; }
    .section-divider-line, .page-ready .section-divider-line { transform: scaleX(1); animation: none; }
    .section-divider-diamond, .page-ready .section-divider-diamond { opacity: 1; transform: scale(1); }
    .tarot-card, .lenormand-card { opacity: 1 !important; animation: none !important; }
    .tarot-card-back .card-back-symbol { animation: none !important; }
    * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
    /* === 起卦动画：reduced-motion 下保持可见静态状态 === */
    .cast-tarot-riffle-card, .cast-tarot-fan-card, .cast-tarot-reveal,
    .cast-tarot-reveal-glow, .cast-tarot-spark,
    .cast-leno-deck, .cast-leno-pull-card, .cast-leno-cut,
    .cast-leno-draw-card, .cast-leno-spark {
        opacity: 1 !important;
        animation: none !important;
    }
    .cast-tarot-riffle-card { transform: translateX(0) translateY(0) rotate(0deg) !important; }
    .cast-tarot-fan-card { transform: rotate(0deg) translateY(-8px) !important; }
    .cast-tarot-reveal { transform: translateY(-15px) scale(1) !important; }
    .cast-tarot-reveal-inner { transform: rotateY(180deg) !important; }
    .cast-tarot-reveal-glow { opacity: 0.6 !important; }
    .cast-leno-pull-card { transform: translateX(0) translateY(0) rotate(0deg) !important; }
    .cast-leno-cut { transform: translateY(0) translateX(0) rotate(0deg) !important; }
    .cast-leno-draw-card { transform: translateY(0) scale(1) !important; }
    .cast-leno-draw-inner { transform: rotateY(180deg) !important; }
    .cast-tarot-ring, .cast-tarot-ring-2, .cast-leno-ring { animation: none !important; }
}

/* ============================================
   RESPONSIVE SCALE-UP (Mobile-First)
   ============================================ */

/* Very small phones — compact buttons */
@media (max-width: 380px) {
    .btn {
        padding: 0.55rem 0.9rem;
        font-size: 0.78rem;
        min-height: 38px;
        gap: 0.3rem;
    }
    .ai-start-btn {
        padding: 0.62rem;
        font-size: 0.82rem;
        letter-spacing: 0.2em;
        text-indent: 0.2em;
    }
    .ai-followup-btn {
        min-width: 72px;
        min-height: 42px;
        padding: 0 0.9rem;
        font-size: 0.85rem;
    }
    .btn-copy {
        padding: 0.3rem 0.6rem;
        font-size: 0.7rem;
    }
    .tab-center-icon {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        margin-top: -10px;
        font-size: 0.85rem;
    }
    .divination-form, .qn-cast-body { padding: 0.9rem; }
    .container { padding: 0 0.75rem; }
}

/* Large phones / small tablets */
@media (min-width: 480px) {
    .hero { padding: 2rem 1.5rem 2.5rem; }
    .hero h1 { font-size: clamp(2.5rem, 8vw, 3.5rem); }
    .hero p { font-size: 0.95rem; }
    .method-grid.bento-grid { gap: 0.7rem; }
    .method-card.layout-standard { padding: 0.9rem 0.8rem; min-height: 115px; }
    .method-card.layout-standard .card-icon { font-size: 1.5rem; }
    .method-card.layout-standard h3 { font-size: 0.95rem; }
    .method-card.layout-standard .card-en { font-size: 0.62rem; }
    .method-card.layout-tall { min-height: 230px; }
    .method-card.layout-feature { min-height: 230px; padding: 1.4rem 1.2rem; }
    .method-card.layout-feature .card-icon { font-size: 2.2rem; }
    .method-card.layout-feature h3 { font-size: 1.2rem; }
    .method-card.layout-wide { min-height: 100px; padding: 1rem 1.2rem; }
    .method-card.layout-wide .card-icon { font-size: 1.7rem; width: 48px; height: 48px; }
    .method-card.layout-wide h3 { font-size: 1rem; }
    .divination-form, .result-section, .qn-cast-body { padding: 1.5rem; }
    .container { padding: 0 1.5rem; }
    .tarot-card { width: 120px; height: 180px; }
    .lenormand-card { width: 90px; height: 140px; }
    .lot-stick { width: 32px; height: 160px; }
    .body-use-display { grid-template-columns: 1fr 1fr; }
    .fortune-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
    .xlr-gods-grid { grid-template-columns: repeat(2, 1fr); }
    .guji-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Tablets */
@media (min-width: 768px) {
    :root { --topbar-h: 60px; }
    .mobile-topbar { padding: 0 1.5rem; }
    .topbar-brand { font-size: 1.3rem; }
    .topbar-brand svg { width: 28px; height: 28px; }
    .topbar-logo { width: 32px; height: 32px; }
    .hero-logo { width: 120px; height: 120px; }
    /* Show descriptions on standard cards */
    .method-card.layout-standard p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .method-card .card-link { font-size: 0.75rem; }
    /* 3-column Bento grid */
    .method-grid.bento-grid { grid-template-columns: repeat(3, 1fr); gap: 0.9rem; }
    .method-card.layout-feature { grid-column: span 2; grid-row: span 2; }
    .method-card.layout-wide { grid-column: span 2; }
    .method-card.layout-tall { grid-column: span 1; grid-row: span 2; }
    .method-card.layout-standard { grid-column: span 1; }
    /* Drawer accessible via tab center button on all screens */
    .drawer-group-items { grid-template-columns: repeat(3, 1fr); }
    .mobile-drawer { max-width: 440px; }
    /* Forms side-by-side where appropriate */
    .form-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .qn-date-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
    /* Larger tarot cards */
    .tarot-card { width: 140px; height: 220px; }
    .lenormand-card { width: 100px; height: 156px; }
    .info-table { display: table; white-space: normal; }
    .info-table thead, .info-table tbody { display: table-row-group; }
    .liuren-display { grid-template-columns: 1fr 1fr; }
    .xlr-gods-grid { grid-template-columns: repeat(3, 1fr); }
    .guji-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
    /* Modals centered on tablet */
    .contact-modal, .legend-modal, .confirm-modal, .guji-modal {
        align-items: center;
        padding: 1.5rem;
    }
    .contact-modal-box, .confirm-modal-box { border-radius: var(--radius-xl); border-bottom: 1px solid var(--color-border); max-width: 400px; }
    .legend-modal-box { border-radius: var(--radius-xl); border-bottom: 1px solid var(--color-gold-dark); max-width: 560px; }
    .guji-modal-box { border-radius: var(--radius-xl); border-bottom: 1px solid var(--color-gold-dark); }
}

/* Desktop */
@media (min-width: 1024px) {
    :root { --tabbar-h: 0px; --topbar-h: 64px; }
    .mobile-tabbar { display: none; }
    body { padding-bottom: 0; }
    /* 4-column Bento grid — full organic asymmetry */
    .method-grid.bento-grid { grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
    .method-card.layout-feature { grid-column: span 2; grid-row: span 2; }
    .method-card.layout-wide { grid-column: span 2; }
    .method-card.layout-tall { grid-column: span 1; grid-row: span 2; }
    .method-card.layout-standard { grid-column: span 1; }
    /* Desktop sizing */
    .method-card.layout-standard { padding: 1.4rem 1.2rem; min-height: 160px; }
    .method-card.layout-standard .card-icon { font-size: 2rem; }
    .method-card.layout-standard h3 { font-size: 1.05rem; }
    .method-card.layout-standard .card-en { font-size: 0.68rem; }
    .method-card.layout-standard p { font-size: 0.82rem; -webkit-line-clamp: 3; }
    .method-card.layout-tall { min-height: 340px; padding: 1.4rem 1.1rem; }
    .method-card.layout-tall .card-icon { font-size: 2rem; }
    .method-card.layout-tall h3 { font-size: 1.05rem; }
    .method-card.layout-tall p { font-size: 0.82rem; -webkit-line-clamp: 5; }
    .method-card.layout-feature { min-height: 340px; padding: 2rem 1.6rem; }
    .method-card.layout-feature .card-icon { font-size: 2.8rem; }
    .method-card.layout-feature h3 { font-size: 1.3rem; }
    .method-card.layout-feature .card-en { font-size: 0.72rem; }
    .method-card.layout-feature p { font-size: 0.88rem; -webkit-line-clamp: 4; }
    .method-card.layout-wide { min-height: 120px; padding: 1.2rem 1.4rem; }
    .method-card.layout-wide .card-icon { font-size: 1.8rem; width: 52px; height: 52px; }
    .method-card.layout-wide h3 { font-size: 1.1rem; }
    .method-card.layout-wide .card-en { font-size: 0.65rem; }
    .method-card.layout-wide p { font-size: 0.8rem; -webkit-line-clamp: 2; }
    .method-card .card-link { font-size: 0.8rem; }
    .hero h1 { font-size: 3.5rem; }
    .hero .subtitle { font-size: 1.1rem; letter-spacing: 0.3em; }
    .hero p { font-size: 1rem; }
    .divination-form, .result-section { padding: 2rem; }
    .qn-cast-banner { padding: 2.5rem 2rem; }
    .qn-cast-body { padding: 2rem; }
    .page-header { padding: 2rem 0 1.5rem; }
    .page-header h1 { font-size: 2rem; }
    .result-section h2 { font-size: 1.5rem; }
    .interpretation-block { padding: 1.2rem 1.8rem; }
    .interpretation-block p { font-size: 0.95rem; }
    .info-table { font-size: 0.95rem; }
    .info-table th, .info-table td { padding: 0.8rem 1rem; }
}

/* ============================================
   增强分析标签页 - 公共样式（统一管理）
   ============================================ */
.enhance-tabs{display:flex;flex-wrap:wrap;gap:0.3rem;border-bottom:2px solid var(--color-border);padding-bottom:0;}
.enhance-tab{padding:0.5rem 0.8rem;border:none;background:none;color:var(--color-muted);font-size:0.85rem;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;border-radius:var(--radius-sm) var(--radius-sm) 0 0;transition:all 0.2s;}
.enhance-tab:hover{color:var(--color-text);background:rgba(var(--surface-rgb),0.5);}
.enhance-tab.active{color:var(--color-gold-light);border-bottom-color:var(--color-gold-light);font-weight:bold;}
.enhance-panel{display:none;margin-top:1rem;}
.enhance-panel.active{display:block;animation:enhanceFadeIn 0.3s ease-in;}
@keyframes enhanceFadeIn{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:translateY(0);}}

/* enhance-tab 移动端响应式 */
@media(max-width:600px){
    .enhance-tab{padding:0.35rem 0.5rem;font-size:0.74rem;}
    .enhance-tabs{gap:0.2rem;}
}

/* ============================================
   百宝袋工具面板样式
   ============================================ */
.tool-panel { padding: 0.5rem 0; }
.tool-panel .result-section { margin-top: 1rem; }

/* ============================================
   出生地三级级联选择器 + OSM 搜索样式
   ============================================ */
.qn-location-picker { position: relative; }

.qn-location-toggle-bar {
    text-align: right;
    font-size: 0.8rem;
    margin-bottom: 0.4rem;
    color: var(--color-muted);
}
.qn-toggle-prefix { opacity: 0.7; }
.qn-toggle-search {
    color: var(--color-gold);
    font-weight: 600;
    text-decoration: none;
    margin-left: 0.2rem;
    cursor: pointer;
    transition: color 0.2s;
}
.qn-toggle-search:hover { color: var(--color-gold-light); text-decoration: underline; }

.qn-location-cascading {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* OSM 搜索区域 */
.qn-location-osm { animation: locFadeIn 0.25s ease; }
@keyframes locFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.qn-osm-input-row {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}
.qn-osm-input {
    flex: 1;
    background: rgba(var(--overlay-rgb), 0.04);
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: var(--radius-sm);
    padding: 0.55rem 0.8rem;
    color: var(--color-text);
    font-size: 0.9rem;
    font-family: var(--font-body);
    outline: none;
    transition: border-color 0.2s;
    min-width: 0;
}
.qn-osm-input:focus { border-color: var(--color-gold); }
.qn-osm-input::placeholder { color: var(--color-muted); font-size: 0.85rem; }

.qn-osm-search-btn {
    background: linear-gradient(135deg, var(--color-gold-dark), var(--color-gold));
    border: none;
    border-radius: var(--radius-sm);
    color: #fff;
    padding: 0 1rem;
    font-size: 0.9rem;
    cursor: pointer;
    transition: opacity 0.2s;
    flex-shrink: 0;
}
.qn-osm-search-btn:hover { opacity: 0.85; }

.qn-osm-results {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid rgba(var(--accent-rgb), 0.1);
    border-radius: var(--radius-sm);
    background: rgba(var(--overlay-rgb), 0.03);
}
.qn-osm-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.8rem;
    cursor: pointer;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.06);
    transition: background 0.15s;
}
.qn-osm-item:last-child { border-bottom: none; }
.qn-osm-item:hover { background: rgba(var(--accent-rgb), 0.06); }
.qn-osm-item.selected { background: rgba(var(--accent-rgb), 0.12); }
.qn-osm-icon { color: var(--color-gold); font-size: 0.85rem; flex-shrink: 0; }
.qn-osm-item-name {
    font-size: 0.82rem;
    color: var(--color-text);
    line-height: 1.4;
    word-break: break-all;
}

.qn-osm-loading, .qn-osm-empty, .qn-osm-error {
    padding: 1rem;
    text-align: center;
    font-size: 0.85rem;
    color: var(--color-muted);
}
.qn-osm-selected-hint {
    padding: 0.5rem 0.8rem;
    background: rgba(var(--accent-rgb), 0.08);
    color: var(--color-gold);
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.1);
}

.qn-location-back {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--color-muted);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.2s;
}
.qn-location-back:hover { color: var(--color-gold); }

/* 移动端响应式 */
@media (max-width: 600px) {
    .qn-location-cascading { gap: 0.3rem; }
    .qn-location-cascading .qn-select-card { min-width: 80px; }
    .qn-location-cascading .qn-select-card select { font-size: 14px; padding: 0.4rem; }
    .qn-osm-input { font-size: 14px; }
    .qn-osm-item-name { font-size: 0.78rem; }
}

/* ============================================
   风水勘宅 - Feng Shui Kanzhai
   ============================================ */

/* ---- 内测码验证页 ---- */
.fs-beta-gate {
    max-width: 480px;
    margin: 2rem auto;
    padding: 0 1.2rem 4rem;
    text-align: center;
}
.fs-beta-card {
    background: rgba(var(--surface-deep-rgb), 0.88);
    border: 1px solid var(--color-border);
    border-top: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: var(--radius-xl);
    padding: 3rem 2rem 2.5rem;
    box-shadow: 0 8px 40px rgba(0,0,0,0.35);
    position: relative;
    overflow: hidden;
}
.fs-beta-card::before {
    content: '';
    position: absolute;
    top: -60%;
    left: -20%;
    width: 140%;
    height: 80%;
    background: radial-gradient(ellipse at center, rgba(var(--accent-rgb), 0.04) 0%, transparent 70%);
    pointer-events: none;
}
.fs-beta-seal {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.08);
    border: 2px solid rgba(var(--accent-rgb), 0.20);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: var(--color-gold-light);
    position: relative;
}
.fs-beta-title {
    font-size: 1.6rem;
    color: var(--color-gold-light);
    margin: 0 0 0.3rem;
    letter-spacing: 0.12em;
    font-family: var(--font-display);
}
.fs-beta-sub {
    font-size: 0.7rem;
    color: var(--color-muted);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    margin: 0;
}
.fs-beta-divider {
    width: 48px;
    height: 1px;
    background: rgba(var(--accent-rgb), 0.20);
    margin: 1.5rem auto;
}
.fs-beta-desc {
    font-size: 0.82rem;
    color: var(--color-muted);
    line-height: 1.8;
    margin: 0 0 2rem;
}
.fs-beta-form { max-width: 320px; margin: 0 auto; }
.fs-beta-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 0.8rem;
}
.fs-beta-input-wrap > i {
    position: absolute;
    left: 1rem;
    color: var(--color-muted);
    font-size: 0.85rem;
    z-index: 1;
}
.fs-beta-input {
    width: 100%;
    padding: 0.8rem 1rem 0.8rem 2.6rem;
    background: rgba(var(--bg-rgb), 0.6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: 0.9rem;
    text-align: center;
    outline: none;
    transition: border-color 0.3s;
    box-sizing: border-box;
}
.fs-beta-input:focus { border-color: var(--color-gold-light); }
.fs-beta-input-error { border-color: var(--color-danger) !important; }
.fs-beta-error {
    font-size: 0.8rem;
    color: var(--color-red-light);
    margin: 0 0 0.8rem;
}
.fs-beta-btn {
    width: 100%;
    padding: 0.8rem;
    background: linear-gradient(135deg, var(--color-gold-dark), var(--color-gold));
    border: none;
    border-radius: var(--radius-md);
    color: var(--color-bg);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: opacity 0.2s, transform 0.2s;
}
.fs-beta-btn:hover { opacity: 0.9; transform: translateY(-1px); }

/* ---- 向导容器 ---- */
.fs-wizard-wrap {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 0.5rem;
}

/* ---- 进度条 ---- */
.fs-progress-bar {
    position: relative;
    margin: 1rem 0 1.5rem;
    padding: 0 1rem;
}
.fs-progress-line {
    position: absolute;
    top: 14px;
    left: 2rem;
    right: 2rem;
    height: 2px;
    background: var(--color-border);
    border-radius: 1px;
    z-index: 0;
}
.fs-progress-line::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 0%;
    height: 100%;
    background: linear-gradient(90deg, var(--color-gold-dark), var(--color-gold-light));
    border-radius: 1px;
    transition: width 0.5s ease;
}
.fs-progress-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 1;
}
.fs-pstep {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}
.fs-pstep-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-muted);
    transition: all 0.3s;
}
.fs-pstep.active .fs-pstep-num {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-bg);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.3);
}
.fs-pstep-label {
    font-size: 0.72rem;
    color: var(--color-muted);
    transition: color 0.3s;
}
.fs-pstep.active .fs-pstep-label { color: var(--color-gold-light); }

/* ---- 步骤面板 ---- */
.fs-step {
    display: none;
    animation: fsStepIn 0.4s ease-out;
}
.fs-step.active { display: block; }
@keyframes fsStepIn {
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ---- 步骤头部 ---- */
.fs-step-header {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin-bottom: 1.5rem;
    position: relative;
}
.fs-step-badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid var(--color-gold);
    background: rgba(var(--accent-rgb), 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-gold);
    flex-shrink: 0;
}
.fs-step-titles { flex: 1; }
.fs-step-titles h2 {
    font-size: 1.15rem;
    color: var(--color-text);
    margin: 0 0 0.2rem;
    font-weight: 600;
}
.fs-step-titles p {
    font-size: 0.8rem;
    color: var(--color-muted);
    margin: 0;
    line-height: 1.5;
}
.fs-step-tag {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.68rem;
    color: var(--color-gold);
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.20);
    border-radius: 20px;
    padding: 0.2rem 0.7rem;
    letter-spacing: 0.05em;
}

/* ---- 步骤内容 ---- */
.fs-step-body { padding: 0 0.2rem; }
.fs-field-label {
    font-size: 0.85rem;
    color: var(--color-gold-light);
    margin: 0 0 0.6rem;
    font-weight: 500;
}

/* ---- 朝向选择卡片 ---- */
.fs-orient-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    margin-bottom: 1rem;
}
.fs-orient-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 1.2rem 0.8rem;
    background: rgba(var(--surface-deep-rgb), 0.5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.25s;
    text-align: center;
    position: relative;
}
.fs-orient-card input { display: none; }
.fs-orient-card.selected {
    border-color: rgba(var(--accent-rgb), 0.50);
    background: rgba(var(--accent-rgb), 0.06);
}
.fs-orient-icon {
    font-size: 1.4rem;
    color: var(--color-muted);
    transition: color 0.25s;
}
.fs-orient-card.selected .fs-orient-icon { color: var(--color-gold); }
.fs-orient-name { font-size: 0.88rem; color: var(--color-text); font-weight: 500; }
.fs-orient-sub { font-size: 0.72rem; color: var(--color-muted); }

.fs-orient-info {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.8rem;
    background: rgba(var(--accent-rgb), 0.04);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    color: var(--color-muted);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}
.fs-orient-info i { color: var(--color-gold); flex-shrink: 0; }

/* ---- 方向网格 ---- */
.fs-dir-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.6rem;
    margin-bottom: 1.2rem;
}
.fs-dir-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.8rem 0.3rem;
    background: rgba(var(--surface-deep-rgb), 0.5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.25s;
}
.fs-dir-btn input { display: none; }
.fs-dir-btn.selected {
    background: rgba(var(--accent-rgb), 0.12);
    border-color: var(--color-gold);
    box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.15);
}
.fs-dir-bagua {
    font-size: 1.3rem;
    color: var(--color-muted);
    line-height: 1;
    transition: color 0.25s;
}
.fs-dir-btn.selected .fs-dir-bagua { color: var(--color-gold-light); }
.fs-dir-name {
    font-size: 0.75rem;
    color: var(--color-text);
}
.fs-dir-btn.selected .fs-dir-name { color: var(--color-gold-light); font-weight: 600; }

.fs-help-link {
    text-align: center;
    margin-top: 0.5rem;
}
.fs-help-link i { color: var(--color-gold); font-size: 0.8rem; }
.fs-help-link a {
    font-size: 0.8rem;
    color: var(--color-gold-light);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ---- 上传区域 ---- */
.fs-upload-zone {
    border: 2px dashed rgba(var(--accent-rgb), 0.30);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1rem;
    text-align: center;
    margin-bottom: 1.5rem;
    cursor: pointer;
    transition: border-color 0.25s, background 0.25s;
}
.fs-upload-zone:hover {
    border-color: rgba(var(--accent-rgb), 0.50);
    background: rgba(var(--accent-rgb), 0.03);
}
.fs-upload-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    justify-content: center;
    margin-bottom: 1rem;
}
.fs-upload-btn {
    padding: 0.4rem 1rem;
    background: rgba(var(--accent-rgb), 0.12);
    border: 1px solid rgba(var(--accent-rgb), 0.30);
    border-radius: 20px;
    color: var(--color-gold-light);
    font-size: 0.8rem;
    cursor: pointer;
}
.fs-upload-status { font-size: 0.78rem; color: var(--color-muted); }
.fs-upload-icon {
    font-size: 2.5rem;
    color: rgba(var(--accent-rgb), 0.15);
    margin: 0.5rem 0;
}
.fs-upload-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: center;
    margin-bottom: 0.6rem;
}
.fs-upload-action {
    padding: 0.5rem 1rem;
    background: rgba(var(--surface-deep-rgb), 0.6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 0.8rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transition: all 0.2s;
}
.fs-upload-action.active {
    border-color: rgba(var(--accent-rgb), 0.40);
    color: var(--color-gold-light);
}
.fs-upload-hint {
    font-size: 0.72rem;
    color: var(--color-muted);
    margin: 0;
}
.fs-upload-preview {
    margin-top: 0.8rem;
    border-radius: var(--radius-md);
    overflow: hidden;
}
.fs-upload-preview img {
    max-width: 100%;
    max-height: 200px;
    border-radius: var(--radius-md);
    /* 块级化：消除行内基线空隙，容器高度与图严格一致（预览/放大视图 1:1 坐标前提） */
    display: block;
}

/* ---- 表单 ---- */
.fs-form-row { margin-bottom: 1rem; }
.fs-form-group { margin-bottom: 0.8rem; }
.fs-text-input {
    width: 100%;
    padding: 0.7rem 0.8rem;
    background: rgba(var(--bg-rgb), 0.5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
}
.fs-text-input:focus { border-color: var(--color-gold-light); }
.fs-textarea {
    width: 100%;
    padding: 0.7rem 0.8rem;
    background: rgba(var(--bg-rgb), 0.5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 0.85rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
    resize: vertical;
}
.fs-textarea:focus { border-color: var(--color-gold-light); }
.fs-textarea::placeholder { color: rgba(var(--accent-rgb), 0.25); }

/* 性别选择 */
.fs-gender-group {
    display: flex;
    gap: 0.6rem;
}
.fs-gender-btn {
    flex: 1;
    padding: 0.6rem;
    background: rgba(var(--surface-deep-rgb), 0.5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    transition: all 0.2s;
}
.fs-gender-btn.active {
    border-color: rgba(var(--accent-rgb), 0.40);
    color: var(--color-gold-light);
    background: rgba(var(--accent-rgb), 0.06);
}

/* ---- 外部环境清单 ---- */
.fs-env-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.fs-env-check {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
    background: rgba(var(--surface-deep-rgb), 0.5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
}
.fs-env-check input {
    width: 20px;
    height: 20px;
    accent-color: var(--color-gold);
    cursor: pointer;
    flex-shrink: 0;
}
.fs-env-check:has(input:checked) {
    border-color: rgba(var(--accent-rgb), 0.30);
    background: rgba(var(--accent-rgb), 0.04);
}
.fs-env-check-box { flex: 1; }
.fs-env-check-label {
    font-size: 0.85rem;
    color: var(--color-text);
    font-weight: 500;
}
.fs-env-check-ref {
    font-size: 0.72rem;
    color: var(--color-muted);
    margin-top: 0.2rem;
}
.fs-env-check-icon {
    font-size: 1rem;
    color: var(--color-muted);
    opacity: 0.4;
    transition: opacity 0.2s;
}
.fs-env-check:has(input:checked) .fs-env-check-icon { opacity: 1; }
.fs-env-good .fs-env-check-icon { color: var(--color-success); }
.fs-env-bad .fs-env-check-icon { color: var(--color-red-light); }

/* ---- 确认卡片 ---- */
.fs-confirm-card {
    background: rgba(var(--surface-deep-rgb), 0.5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 0.5rem 1rem;
}
.fs-confirm-row {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid rgba(var(--border-rgb), 0.3);
}
.fs-confirm-row:last-child { border-bottom: none; }
.fs-confirm-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold);
    font-size: 0.9rem;
    flex-shrink: 0;
}
.fs-confirm-text { flex: 1; }
.fs-confirm-label {
    font-size: 0.72rem;
    color: var(--color-muted);
    margin-bottom: 0.2rem;
}
.fs-confirm-value {
    font-size: 0.88rem;
    color: var(--color-text);
    font-weight: 500;
}

/* ---- 步骤底部按钮 ---- */
.fs-step-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
}
.fs-btn-prev {
    background: none;
    border: none;
    color: var(--color-muted);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
}
.fs-btn-prev:hover { color: var(--color-text); }
.fs-btn-next, .fs-btn-submit {
    padding: 0.7rem 1.5rem;
    background: linear-gradient(135deg, var(--color-gold-dark), var(--color-gold));
    border: none;
    border-radius: 24px;
    color: var(--color-bg);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    transition: opacity 0.2s, transform 0.2s;
}
.fs-btn-next:hover, .fs-btn-submit:hover { opacity: 0.9; transform: translateY(-1px); }

/* ---- 帮助弹窗 ---- */
.fs-help-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.fs-help-modal.show { display: flex; }
.fs-help-mask {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(4px);
}
.fs-help-box {
    position: relative;
    background: var(--color-surface);
    border: 1px solid rgba(var(--accent-rgb), 0.20);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 420px;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
    animation: fsStepIn 0.3s ease;
}
/* 弹窗退场：遮罩淡出 + 盒体轻微收拢下沉（关闭后衔接勘宅推演动画） */
.fs-help-modal.closing { animation: fsModalOut 0.34s ease forwards; }
.fs-help-modal.closing .fs-help-box { animation: fsBoxOut 0.34s ease forwards; }
@keyframes fsModalOut { to { opacity: 0; } }
@keyframes fsBoxOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(14px) scale(0.965); }
}
.fs-help-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid rgba(var(--border-rgb), 0.3);
}
.fs-help-header h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--color-gold);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.fs-help-header button {
    background: none;
    border: none;
    color: var(--color-muted);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}
.fs-help-content { padding: 1.2rem 1.5rem; }
.fs-help-item {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 1rem;
}
.fs-help-item:last-child { margin-bottom: 0; }
.fs-help-item > i {
    font-size: 1.1rem;
    color: var(--color-gold);
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.fs-help-item strong {
    color: var(--color-text);
    font-size: 0.88rem;
    display: block;
    margin-bottom: 0.2rem;
}
.fs-help-item p {
    font-size: 0.78rem;
    color: var(--color-muted);
    margin: 0;
    line-height: 1.6;
}

/* ---- AI 户型视觉识别弹窗 ---- */
.fs-vision-box {
    max-width: 520px;
    display: flex;
    flex-direction: column;
}
.fs-vision-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.2rem 1.5rem;
    border-bottom: 1px solid rgba(var(--border-rgb), 0.3);
    flex-shrink: 0;
}
.fs-vision-header h3 {
    margin: 0;
    font-size: 1rem;
    color: var(--color-gold);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.fs-vision-step-tag {
    font-size: 0.68rem;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.12);
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    color: var(--color-gold);
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.fs-vision-step-tag.done {
    background: rgba(76, 175, 80, 0.12);
    border-color: rgba(76, 175, 80, 0.4);
    color: #7BC97F;
}
.fs-vision-step-tag.fail {
    background: rgba(220, 60, 60, 0.12);
    border-color: rgba(220, 60, 60, 0.4);
    color: #E09090;
}
.fs-vision-body {
    padding: 1rem 1.5rem;
    min-height: 120px;
    flex-shrink: 0;
}
/* ---- 就地舞台：识别中（户型扫描动画）→ 识别完毕（同位变换，不开新段） ---- */
.fs-vision-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0 0.3rem;
}
/* 户型图版面：坐标纸底纹 + 微光暗盘 */
.fs-vision-map {
    position: relative;
    width: 232px;
    max-width: 100%;
    padding: 15px;
    border-radius: var(--radius-md, 10px);
    background:
        radial-gradient(120% 150% at 50% 0%, rgba(232, 199, 126, 0.055), transparent 62%),
        rgba(var(--surface-deep-rgb), 0.5);
    border: 1px solid rgba(var(--border-rgb), 0.4);
    box-shadow: inset 0 1px 0 rgba(232, 199, 126, 0.06), 0 10px 26px rgba(0, 0, 0, 0.28);
}
/* 小屏：收窄弹窗内边距 + 缩小印章，避免 320px 窄屏地图贴边 */
@media (max-width: 420px) {
    .fs-vision-body { padding: 0.85rem 0.9rem; }
    .fs-vision-map { padding: 11px; }
    .fs-vm-badge { width: 36px; height: 36px; top: -11px; right: -11px; }
}
.fs-vm-svg {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 160 / 110;
    overflow: visible;
}
/* 底纹格网：坐标纸质感 */
.fs-vm-grid line {
    stroke: rgba(201, 169, 97, 0.09);
    stroke-width: 1;
}
/* 房间底色：识别完毕点亮 */
.fs-vm-roomfills rect {
    fill: rgba(232, 199, 126, 0);
    transition: fill 0.7s ease 0.15s;
}
.fs-vision-stage.is-done .fs-vm-roomfills rect {
    fill: rgba(232, 199, 126, 0.075);
}
/* 户型墙线：描边绘制进场（pathLength=100 归一化，各墙错峰落笔） */
.fs-vm-wall {
    fill: none;
    stroke: rgba(201, 169, 97, 0.88);
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: fsVmWallDraw 0.9s ease forwards;
    transition: stroke 0.55s ease, filter 0.55s ease;
}
.fs-vm-wall.outer { animation-duration: 1.05s; }
.fs-vm-wall.w1 { animation-delay: 0.62s; }
.fs-vm-wall.w2 { animation-delay: 0.78s; }
.fs-vm-wall.w3 { animation-delay: 0.94s; }
@keyframes fsVmWallDraw {
    to { stroke-dashoffset: 0; }
}
.fs-vision-stage.is-done .fs-vm-wall {
    stroke: #E8C77E;
    filter: drop-shadow(0 0 2.5px rgba(232, 199, 126, 0.5));
}
/* 大门：南墙门扇 + 开启弧（定向之要，随墙线之后落笔） */
.fs-vm-door-leaf {
    fill: none;
    stroke: rgba(232, 199, 126, 0.85);
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: fsVmWallDraw 0.55s ease 1.18s forwards;
}
.fs-vm-door-arc {
    fill: none;
    stroke: rgba(232, 199, 126, 0.38);
    stroke-width: 1;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: fsVmWallDraw 0.65s ease 1.32s forwards;
}
.fs-vision-stage.is-done .fs-vm-door-arc { stroke: rgba(232, 199, 126, 0.55); }
/* 检测节点：墙角脉冲（各节点错峰呼吸） */
.fs-vm-dot {
    fill: #E8C77E;
    opacity: 0;
    animation: fsVmDotPulse 1.9s ease-in-out infinite;
    transition: fill 0.5s ease;
}
.fs-vm-dot:nth-child(1) { animation-delay: 0.5s; }
.fs-vm-dot:nth-child(2) { animation-delay: 0.8s; }
.fs-vm-dot:nth-child(3) { animation-delay: 1.1s; }
.fs-vm-dot:nth-child(4) { animation-delay: 1.4s; }
.fs-vm-dot:nth-child(5) { animation-delay: 1.7s; }
.fs-vm-dot:nth-child(6) { animation-delay: 2.0s; }
@keyframes fsVmDotPulse {
    0% { opacity: 0; }
    18% { opacity: 1; }
    55% { opacity: 0.25; }
    100% { opacity: 0; }
}
.fs-vision-stage.is-done .fs-vm-dot {
    animation: none;
    opacity: 0.95;
    fill: #7BC97F;
    filter: drop-shadow(0 0 2px rgba(123, 201, 127, 0.55));
}
/* 房间标识：识别完毕依次浮现（厅→卧→厨→卫） */
.fs-vm-rooms text {
    font-family: var(--font-display);
    font-size: 10px;
    fill: #CFC6B0;
    text-anchor: middle;
    dominant-baseline: central;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0.5);
}
.fs-vision-stage.is-done .fs-vm-rooms text {
    animation: fsVmRoomIn 0.5s ease forwards;
}
.fs-vision-stage.is-done .fs-vm-rooms text:nth-child(1) { animation-delay: 0.3s; }
.fs-vision-stage.is-done .fs-vm-rooms text:nth-child(2) { animation-delay: 0.42s; }
.fs-vision-stage.is-done .fs-vm-rooms text:nth-child(3) { animation-delay: 0.54s; }
.fs-vision-stage.is-done .fs-vm-rooms text:nth-child(4) { animation-delay: 0.66s; }
@keyframes fsVmRoomIn {
    from { opacity: 0; transform: scale(0.5); }
    to { opacity: 1; transform: scale(1); }
}
/* 扫描光束：金色光带往返扫描；识别完毕随光淡出（光束持续运行中淡去，无瞬跳） */
.fs-vm-beam-g {
    transition: opacity 0.5s ease;
}
.fs-vm-beam {
    animation: fsVmBeamSweep 2.7s ease-in-out infinite;
    will-change: transform;
}
@keyframes fsVmBeamSweep {
    0% { transform: translateX(0); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateX(121px); opacity: 0; }
}
.fs-vision-stage.is-done .fs-vm-beam-g { opacity: 0; }
/* 完成印章：右上角落章（环描边 + 对勾描边，弹性压印） */
.fs-vm-badge {
    position: absolute;
    top: -13px;
    right: -13px;
    width: 44px;
    height: 44px;
    opacity: 0;
    transform: scale(0.4) rotate(-14deg);
    pointer-events: none;
}
.fs-vision-stage.is-done .fs-vm-badge {
    animation: fsVmBadgeIn 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.72s forwards;
}
@keyframes fsVmBadgeIn {
    to { opacity: 1; transform: scale(1) rotate(0deg); }
}
.fs-vm-badge-ring {
    fill: #10130C;
    stroke: #7BC97F;
    stroke-width: 2.1;
    stroke-dasharray: 126;
    stroke-dashoffset: 126;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
}
.fs-vision-stage.is-done .fs-vm-badge-ring {
    animation: fsVmDraw 0.55s ease 0.72s forwards;
}
.fs-vm-badge-check {
    fill: none;
    stroke: #7BC97F;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
}
.fs-vision-stage.is-done .fs-vm-badge-check {
    animation: fsVmDraw 0.38s ease 1.08s forwards;
}
@keyframes fsVmDraw {
    to { stroke-dashoffset: 0; }
}
.fs-vision-status-label {
    font-size: 0.82rem;
    color: var(--color-muted);
}
/* 不确定进度条：金条来回游走，制造"进行中"体感 */
.fs-vision-progress {
    height: 3px;
    margin: 0.55rem 0 0.4rem;
    border-radius: 3px;
    background: rgba(var(--border-rgb), 0.4);
    overflow: hidden;
}
.fs-vision-progress-bar {
    width: 38%;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.25), var(--color-gold));
    animation: fsVisionBar 1.4s ease-in-out infinite;
}
@keyframes fsVisionBar {
    0% { transform: translateX(-60%); }
    100% { transform: translateX(260%); }
}
.fs-vision-hint {
    font-size: 0.72rem;
    color: rgba(var(--color-muted-rgb, 154, 147, 168), 0.95);
    letter-spacing: 0.03em;
    min-height: 1.1em;
}
.fs-vision-hint::after {
    content: '';
    animation: fsVisionDots 1.2s steps(4) infinite;
}
@keyframes fsVisionDots {
    0% { content: ''; }
    25% { content: '·'; }
    50% { content: '··'; }
    75%, 100% { content: '···'; }
}
.fs-vision-report {
    display: none;
    max-height: 42vh;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.84rem;
    line-height: 1.75;
    color: var(--color-text);
    padding: 0.9rem 1rem;
    background: rgba(var(--surface-deep-rgb), 0.55);
    border: 1px solid rgba(var(--border-rgb), 0.35);
    border-radius: var(--radius-md, 10px);
}
/* 报告框进场淡入：流式首内容到达 / 流式结束切换富文本时启用 */
.fs-vision-report.fs-report-in { animation: fsReportIn 0.45s ease both; }
@keyframes fsReportIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
/* ---- 文案区：识别中 / 识别完毕 同位切换（不开新段，无高度跳变） ---- */
.fs-vision-copy {
    width: 100%;
    max-width: 330px;
    text-align: center;
}
.fs-vm-loading {
    display: block;
    animation: fsVmCopyIn 0.4s ease both;
}
.fs-vm-done {
    display: none;
    padding: 0.1rem 0 0.1rem;
}
.fs-vision-stage.is-done .fs-vm-loading { display: none; }
.fs-vision-stage.is-done .fs-vm-done { display: block; }
@keyframes fsVmCopyIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
/* 完成文案错峰进场：标题→问句→按钮（与落章节奏衔接） */
.fs-vm-done-title,
.fs-vm-done-question,
.fs-vm-done .fs-vision-btns {
    opacity: 0;
}
.fs-vision-stage.is-done .fs-vm-done-title {
    animation: fsConfirmRise 0.45s ease 0.5s both;
}
.fs-vision-stage.is-done .fs-vm-done-question {
    animation: fsConfirmRise 0.45s ease 0.62s both;
}
.fs-vision-stage.is-done .fs-vm-done .fs-vision-btns {
    animation: fsConfirmRise 0.45s ease 0.74s both;
}
@keyframes fsConfirmRise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.fs-vm-done-title {
    margin: 0 0 0.25rem;
    font-size: 1.02rem;
    letter-spacing: 0.05em;
    color: var(--color-gold-light, #E8C77E);
    font-family: var(--font-display);
    text-shadow: 0 0 14px rgba(232, 199, 126, 0.25);
}
.fs-vm-done-question {
    margin: 0 0 0.85rem;
    font-size: 0.86rem;
    color: var(--color-text);
}
.fs-vision-btns {
    display: flex;
    gap: 0.7rem;
    justify-content: center;
}
.fs-vision-btn {
    flex: 1;
    max-width: 160px;
    min-height: 44px;
    padding: 0.65rem 1rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-display);
    font-size: 0.9rem;
    cursor: pointer;
    border: 1px solid rgba(var(--accent-rgb), 0.45);
    background: rgba(var(--accent-rgb), 0.14);
    color: var(--color-gold);
    transition: all 0.2s;
    -webkit-tap-highlight-color: transparent;
}
.fs-vision-btn:hover { transform: translateY(-1px); opacity: 0.92; }
.fs-vision-btn.no, .fs-vision-btn.stop-yes {
    border-color: rgba(var(--border-rgb), 0.6);
    background: transparent;
    color: var(--color-muted);
}
.fs-vision-btn.stop-yes {
    border-color: rgba(220, 60, 60, 0.55);
    background: rgba(220, 60, 60, 0.14);
    color: #E09090;
}
.fs-vision-btn.retry {
    max-width: 220px;
}
.fs-vision-fail {
    padding: 1.6rem 1.5rem 1.8rem;
    text-align: center;
    flex-shrink: 0;
}
.fs-vision-fail-msg {
    margin: 0 0 1.1rem;
    font-size: 0.86rem;
    color: #E09090;
    line-height: 1.6;
}
.fs-vision-fail-sub {
    font-size: 0.76rem;
    color: var(--color-muted);
}

/* ---- 停止勘宅红色警告弹窗 ---- */
.fs-stop-box {
    max-width: 380px;
    text-align: center;
    padding: 1.8rem 1.5rem 1.6rem;
    border-color: rgba(220, 60, 60, 0.45);
    box-shadow: 0 20px 60px rgba(120, 0, 0, 0.45);
}
.fs-stop-icon {
    width: 58px;
    height: 58px;
    margin: 0 auto 0.9rem;
    border-radius: 50%;
    background: rgba(220, 60, 60, 0.12);
    border: 1px solid rgba(220, 60, 60, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #E09090;
}
.fs-stop-title {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
    color: #E09090;
    font-family: var(--font-display);
}
.fs-stop-desc {
    margin: 0 0 1.3rem;
    font-size: 0.86rem;
    color: var(--color-text);
    line-height: 1.6;
}

/* ---- 结果页 AI 户型识别报告 ---- */
.fs-vision-section {
    border-left: 2px solid rgba(var(--accent-rgb), 0.35);
}
.fs-vision-result-text {
    font-size: 0.84rem;
    line-height: 1.8;
    color: var(--color-text);
    padding: 0.9rem 1rem;
    background: rgba(var(--surface-deep-rgb), 0.55);
    border: 1px solid rgba(var(--border-rgb), 0.35);
    border-radius: var(--radius-md, 10px);
    white-space: normal;
    word-break: break-word;
}
.fs-vision-note {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin: 0.8rem 0 0;
    font-size: 0.72rem;
    color: var(--color-muted);
    line-height: 1.6;
}
.fs-vision-note i {
    color: var(--color-gold);
    flex-shrink: 0;
    margin-top: 0.12rem;
    font-size: 0.76rem;
}

/* ---- 视觉报告富文本渲染（识别弹窗 confirm 态 + 结果页共用） ---- */
/* 弹窗流式态保持 pre-wrap 纯文本；.fs-rich 切换为富文本排版 */
.fs-vision-report.fs-rich {
    white-space: normal;
}
.fs-vision-report p,
.fs-vision-result-rich p {
    margin: 0 0 0.55rem;
    font-size: 0.84rem;
    line-height: 1.8;
    color: var(--color-text);
}
.fs-vision-report p:last-child,
.fs-vision-result-rich p:last-child {
    margin-bottom: 0;
}
.fs-md-h {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 1rem 0 0.5rem;
    padding-bottom: 0.35rem;
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.22);
    font-family: var(--font-display);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--color-gold);
    letter-spacing: 0.04em;
}
.fs-vision-report .fs-md-h:first-child,
.fs-vision-result-rich .fs-md-h:first-child {
    margin-top: 0;
}
.fs-md-bar {
    display: inline-block;
    width: 3px;
    height: 0.95em;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--color-gold), rgba(var(--accent-rgb), 0.4));
    flex-shrink: 0;
}
.fs-md-no {
    color: rgba(var(--accent-rgb), 0.9);
    flex-shrink: 0;
}
.fs-md-ul {
    margin: 0.35rem 0 0.65rem;
    padding: 0 0 0 0.4rem;
    list-style: none;
}
.fs-md-ul li {
    position: relative;
    padding-left: 1rem;
    margin: 0.3rem 0;
    font-size: 0.84rem;
    line-height: 1.75;
    color: var(--color-text);
}
.fs-md-ul li::before {
    content: '';
    position: absolute;
    left: 0.1rem;
    top: 0.62em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.75);
}

/* 有序列表（视觉模型高频输出 1. 2. 3. 行）：序号计数器替代圆点 */
.fs-md-ul.fs-md-ol {
    counter-reset: fs-md-item;
}
.fs-md-ul.fs-md-ol li {
    padding-left: 1.45rem;
}
.fs-md-ul.fs-md-ol li::before {
    counter-increment: fs-md-item;
    content: counter(fs-md-item) '.';
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    border-radius: 0;
    background: none;
    text-align: right;
    min-width: 1.15rem;
    font-family: var(--font-display);
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--color-gold);
    line-height: 1.75;
}
.fs-md-strong {
    color: var(--color-gold);
    font-weight: 600;
    padding: 0 0.1em;
}

/* ---- 户型图物品标注 ---- */
.fs-upload-preview {
    position: relative;
}
.fs-stage-overlay {
    position: absolute;
    inset: 0;
    touch-action: none;
    cursor: default;
}
.fs-marker {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    z-index: 5;
}
.fs-marker.dragging {
    cursor: grabbing;
    z-index: 9;
    scale: 1.08;
}
/* 圆底图标盘：墨底金环 + 白色 FA 图标；宽高与图标字号由 JS 按缩放系数 inline 设置 */
.fs-marker-disc {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(26, 20, 35, 0.88);
    border: 1.5px solid rgba(212, 175, 55, 0.85);
    line-height: 1;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
    transition: width 0.12s ease, height 0.12s ease, box-shadow 0.18s ease;
}
.fs-marker-disc i {
    line-height: 1;
    pointer-events: none;
    transition: font-size 0.12s ease;
}
.fs-marker.selected .fs-marker-disc {
    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.5), 0 3px 12px rgba(0, 0, 0, 0.55);
}
.fs-marker-tag {
    margin-top: 2px;
    padding: 0.1rem 0.42rem;
    border-radius: 999px;
    background: rgba(26, 20, 35, 0.92);
    border: 1px solid rgba(212, 175, 55, 0.4);
    font-size: 0.66rem;
    color: #E8D9A0;
    letter-spacing: 0.05em;
    white-space: nowrap;
    pointer-events: none;
}
.fs-marker-del {
    position: absolute;
    top: -6px;
    right: -8px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    border: 1px solid rgba(220, 60, 60, 0.7);
    background: rgba(120, 20, 20, 0.95);
    color: #F0B7B7;
    font-size: 0.78rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 10;
    -webkit-tap-highlight-color: transparent;
}
.fs-annotate-panel {
    margin-top: 0.8rem;
    padding: 0.9rem 1rem 1rem;
    border: 1px solid rgba(var(--border-rgb), 0.35);
    border-radius: var(--radius-md, 10px);
    background: rgba(var(--surface-deep-rgb), 0.4);
}
.fs-annotate-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.75rem;
}
.fs-annotate-head > i {
    color: var(--color-gold);
    font-size: 1rem;
    flex-shrink: 0;
}
.fs-annotate-titles {
    flex: 1;
    min-width: 0;
}
.fs-annotate-title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 0.88rem;
    color: var(--color-gold);
    letter-spacing: 0.03em;
}
.fs-annotate-sub {
    margin: 0.15rem 0 0;
    font-size: 0.7rem;
    color: var(--color-muted);
    line-height: 1.5;
}
.fs-annotate-clear {
    flex-shrink: 0;
    padding: 0.3rem 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid rgba(220, 60, 60, 0.4);
    background: transparent;
    color: #E09090;
    font-size: 0.74rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.fs-item-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}
.fs-item-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.34rem 0.68rem;
    border-radius: 999px;
    border: 1px solid rgba(var(--border-rgb), 0.45);
    background: rgba(var(--surface-deep-rgb), 0.55);
    color: var(--color-text);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.fs-item-chip:hover {
    border-color: rgba(var(--accent-rgb), 0.5);
    color: var(--color-gold);
    transform: translateY(-1px);
}
.fs-item-chip:active {
    transform: scale(0.94);
}

/* ---- 放大视图入口（预览区右上角悬浮） ---- */
.fs-zoom-open-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 0.32rem;
    padding: 0.34rem 0.78rem;
    border-radius: 999px;
    border: 1px solid rgba(var(--accent-rgb), 0.5);
    background: rgba(18, 15, 26, 0.9);
    color: var(--color-gold-light);
    font-size: 0.74rem;
    font-family: var(--font-display);
    letter-spacing: 0.05em;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.45);
    transition: all 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}
.fs-zoom-open-btn i { font-size: 0.82rem; color: var(--color-gold); }
.fs-zoom-open-btn:hover {
    background: rgba(201, 169, 97, 0.22);
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.5);
}
.fs-zoom-open-btn:active { transform: scale(0.95); }

/* ---- 物品大小调节行（金色无级滑杆，预览区 / 放大视图两处共用） ---- */
.fs-size-row {
    display: flex;
    align-items: center;
    /* 间隔：物品标签 ↔ 滑杆 ↔ ± 按钮彼此留白，不再挤作一团 */
    gap: 0.75rem;
    margin-top: 0.8rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid rgba(var(--accent-rgb), 0.24);
    border-radius: var(--radius-md, 10px);
    background: rgba(var(--surface-deep-rgb), 0.45);
}
.fs-size-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.42rem;      /* 图标与物品名间隔 */
    flex-shrink: 0;
    padding: 0.28rem 0.68rem;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.12);
    border: 1px solid rgba(var(--accent-rgb), 0.32);
    font-size: 0.76rem;
    color: var(--color-gold-light);
    letter-spacing: 0.04em;
}
.fs-size-tag i { color: var(--color-gold); font-size: 0.85rem; }
.fs-size-tag b { font-weight: 600; white-space: nowrap; }
.fs-size-btn {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(var(--accent-rgb), 0.42);
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--color-gold-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    transition: all 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}
.fs-size-btn:hover { background: rgba(var(--accent-rgb), 0.24); transform: translateY(-1px); }
.fs-size-btn:active { transform: scale(0.9); }
/* 金色滑杆（轨道 + 描金圆钮） */
.fs-size-slider {
    -webkit-appearance: none;
    appearance: none;
    flex: 1;
    min-width: 60px;
    height: 26px;
    margin: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.fs-size-slider:focus { outline: none; }
.fs-size-slider::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(201, 169, 97, 0.78), rgba(232, 199, 126, 0.34) 68%, rgba(201, 169, 97, 0.16));
    border: 1px solid rgba(138, 116, 64, 0.45);
}
.fs-size-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 19px;
    height: 19px;
    margin-top: -8px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #F9EDC2 0%, #E8C77E 55%, #B08F4E 100%);
    border: 1px solid rgba(138, 116, 64, 0.95);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55), 0 0 9px rgba(232, 199, 126, 0.4);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fs-size-slider:active::-webkit-slider-thumb {
    transform: scale(1.18);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55), 0 0 15px rgba(232, 199, 126, 0.6);
}
.fs-size-slider::-moz-range-track {
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(201, 169, 97, 0.78), rgba(232, 199, 126, 0.34) 68%, rgba(201, 169, 97, 0.16));
    border: 1px solid rgba(138, 116, 64, 0.45);
}
.fs-size-slider::-moz-range-progress {
    height: 5px;
    border-radius: 999px;
    background: rgba(232, 199, 126, 0.62);
}
.fs-size-slider::-moz-range-thumb {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #F9EDC2 0%, #E8C77E 55%, #B08F4E 100%);
    border: 1px solid rgba(138, 116, 64, 0.95);
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.55), 0 0 9px rgba(232, 199, 126, 0.4);
}

/* ---- 户型图放大视图（大图自由缩放 + 平移 + 物品标注） ---- */
.fs-zoom-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
}
.fs-zoom-modal.show { display: flex; }
.fs-zoom-mask {
    position: absolute;
    inset: 0;
    background: rgba(5, 4, 10, 0.85);
    animation: fsZoomMaskIn 0.3s ease both;
}
@keyframes fsZoomMaskIn { from { opacity: 0; } to { opacity: 1; } }
.fs-zoom-box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(1100px, 96vw);
    height: min(92vh, 920px);
    background: var(--color-surface);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: var(--radius-lg, 14px);
    overflow: hidden;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.65);
    animation: fsZoomBoxIn 0.32s cubic-bezier(0.32, 0.72, 0, 1) both;
}
@keyframes fsZoomBoxIn {
    from { opacity: 0; transform: scale(0.94) translateY(14px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.fs-zoom-modal.closing { animation: fsZoomOut 0.26s ease forwards; }
.fs-zoom-modal.closing .fs-zoom-box { animation: fsZoomBoxOut 0.26s ease forwards; }
.fs-zoom-modal.closing .fs-zoom-mask { animation: fsZoomOut 0.26s ease forwards; }
@keyframes fsZoomOut { to { opacity: 0; } }
@keyframes fsZoomBoxOut {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to { opacity: 0; transform: scale(0.95) translateY(8px); }
}
.fs-zoom-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.72rem 1rem;
    border-bottom: 1px solid rgba(var(--border-rgb), 0.35);
    background: rgba(var(--surface-deep-rgb), 0.6);
    flex-shrink: 0;
}
.fs-zoom-header h3 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.42rem;
    font-size: 0.95rem;
    font-family: var(--font-display);
    color: var(--color-gold);
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.fs-zoom-scale {
    font-size: 0.72rem;
    color: var(--color-gold-light);
    background: rgba(var(--accent-rgb), 0.12);
    border: 1px solid rgba(var(--accent-rgb), 0.35);
    border-radius: 999px;
    padding: 0.15rem 0.55rem;
    font-variant-numeric: tabular-nums;
    min-width: 3.8em;
    text-align: center;
    white-space: nowrap;
}
.fs-zoom-ctrls { margin-left: auto; display: flex; gap: 0.42rem; }
.fs-zoom-ctrl {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(var(--accent-rgb), 0.42);
    background: rgba(var(--accent-rgb), 0.1);
    color: var(--color-gold-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: all 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}
.fs-zoom-ctrl:hover { background: rgba(var(--accent-rgb), 0.24); transform: translateY(-1px); }
.fs-zoom-ctrl:active { transform: scale(0.92); }
.fs-zoom-ctrl.close {
    border-color: rgba(220, 60, 60, 0.45);
    background: rgba(220, 60, 60, 0.12);
    color: #E09090;
}
.fs-zoom-ctrl.close:hover { background: rgba(220, 60, 60, 0.22); }
/* 视口：坐标纸底纹（与识别弹窗同一设计语言） */
.fs-zoom-viewport {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    touch-action: none;
    cursor: grab;
    background:
        repeating-linear-gradient(0deg, rgba(201, 169, 97, 0.05) 0 1px, transparent 1px 26px),
        repeating-linear-gradient(90deg, rgba(201, 169, 97, 0.05) 0 1px, transparent 1px 26px),
        radial-gradient(140% 120% at 50% 0%, #16121E 0%, #0B0A12 70%);
}
.fs-zoom-viewport.grabbing { cursor: grabbing; }
.fs-zoom-canvas {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    will-change: transform;
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.55);
}
.fs-zoom-canvas img { display: block; }
/* 大视图底部调节行：通栏贴合（覆盖基础行的边距/圆角） */
.fs-zoom-size-row {
    margin: 0;
    padding: 0.55rem 0.95rem;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    background: rgba(var(--surface-deep-rgb), 0.6);
}
.fs-zsize-done {
    flex-shrink: 0;
    height: 34px;
    padding: 0 1.05rem;
    border-radius: 999px;
    border: 1px solid rgba(var(--accent-rgb), 0.5);
    background: rgba(var(--accent-rgb), 0.16);
    color: var(--color-gold-light);
    font-family: var(--font-display);
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: all 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}
.fs-zsize-done:hover { background: rgba(var(--accent-rgb), 0.28); transform: translateY(-1px); }
.fs-zsize-done:active { transform: scale(0.96); }
.fs-zoom-tip {
    flex-shrink: 0;
    padding: 0.52rem 1rem;
    text-align: center;
    font-size: 0.7rem;
    color: var(--color-muted);
    letter-spacing: 0.02em;
    border-top: 1px solid rgba(var(--border-rgb), 0.3);
    background: rgba(var(--surface-deep-rgb), 0.55);
}
.fs-zoom-tip i { color: var(--color-gold); margin-right: 0.28rem; }

/* ============================================
   风水结果页
   ============================================ */
.fs-result-wrap {
    max-width: 680px;
    /* 顶部与固定导航栏拉开距离：body 的 padding-top 恰好抵消顶栏高度，
       容器无顶部留白，卡片此前几乎贴着导航栏（margin 用而非 padding：
       不受移动端 .result-section padding !important 响应式覆盖影响） */
    margin: 1.2rem auto 0;
    padding: 0.5rem 0.5rem 2rem;
}

/* ---- 报告卡片 ---- */
.fs-report-card {
    background: rgba(var(--surface-deep-rgb), 0.88);
    border: 1px solid var(--color-border);
    border-top: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: var(--radius-xl);
    padding: 1.5rem 1.2rem;
    margin-bottom: 1rem;
    box-shadow: 0 6px 24px rgba(0,0,0,0.30);
}
.fs-report-header {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
}
.fs-report-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.20);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.fs-report-titles { flex: 1; }
.fs-report-titles h2 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--color-text);
    font-weight: 600;
}
.fs-report-titles p {
    margin: 0.2rem 0 0;
    font-size: 0.75rem;
    color: var(--color-muted);
}
.fs-report-badge {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-gold);
    background: rgba(var(--accent-rgb), 0.10);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: 20px;
    padding: 0.25rem 0.8rem;
    flex-shrink: 0;
}

/* ---- 评分区 ---- */
.fs-score-section {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.2rem;
}
.fs-score-ring {
    position: relative;
    width: 100px;
    height: 100px;
    flex-shrink: 0;
}
.fs-score-svg {
    width: 100%;
    height: 100%;
}
.fs-score-num {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}
.fs-score-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, 20px);
    font-size: 0.65rem;
    color: var(--color-muted);
    white-space: nowrap;
}
.fs-score-info { flex: 1; }
.fs-info-row {
    display: flex;
    justify-content: space-between;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(var(--border-rgb), 0.2);
}
.fs-info-row:last-child { border-bottom: none; }
.fs-info-label { font-size: 0.78rem; color: var(--color-muted); }
.fs-info-val { font-size: 0.82rem; color: var(--color-text); font-weight: 500; }

/* ---- 操作按钮 ---- */
.fs-report-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
}
.fs-action-btn {
    flex: 1;
    min-width: 100px;
    padding: 0.5rem 0.8rem;
    background: rgba(var(--accent-rgb), 0.06);
    border: 1px solid rgba(var(--accent-rgb), 0.15);
    border-radius: var(--radius-sm);
    color: var(--color-gold-light);
    font-size: 0.78rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    transition: all 0.2s;
}
.fs-action-btn:hover { background: rgba(var(--accent-rgb), 0.12); }
.fs-action-btn.saved { color: var(--color-success); border-color: rgba(39, 174, 96, 0.3); }

/* ---- PDF 预览（纸墨印本导出，与其他功能一致的出卷预览） ---- */
.fs-pdf-preview {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    padding: 0.9rem;
    margin-top: 0.9rem;
    background: rgba(var(--surface-deep-rgb), 0.6);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
    border-radius: var(--radius-lg);
    animation: fsPdfPreviewIn 0.45s var(--ease-out-expo, ease) both;
}
@keyframes fsPdfPreviewIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.fs-pdf-preview-tabs {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
}
.fs-pdf-tab {
    padding: 0.32rem 0.95rem;
    font-size: 0.76rem;
    font-family: var(--font-display);
    letter-spacing: 0.04em;
    color: var(--color-muted);
    background: transparent;
    border: 1px solid rgba(var(--border-rgb), 0.5);
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.fs-pdf-tab:hover { color: var(--color-gold-light); border-color: rgba(var(--accent-rgb), 0.45); }
.fs-pdf-tab.active {
    color: var(--color-gold-light);
    background: rgba(var(--accent-rgb), 0.14);
    border-color: rgba(var(--accent-rgb), 0.5);
}
.fs-pdf-preview-scroll {
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid rgba(var(--border-rgb), 0.4);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}
.fs-pdf-preview-scroll img {
    display: block;
    width: 100%;
    border-radius: var(--radius-md);
}
.fs-pdf-preview-note {
    padding: 0.55rem 0.8rem;
    text-align: center;
    font-size: 0.8rem;
    color: var(--color-gold-light);
    background: rgba(var(--accent-rgb), 0.1);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: var(--radius-md);
}
.fs-pdf-preview-note i { margin-right: 0.3rem; color: var(--color-gold); }
.fs-pdf-preview-note strong { color: var(--color-gold); }
.fs-pdf-save-btn {
    width: 100%;
    padding: 0.8rem 1.2rem;
    font-family: var(--font-display);
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    color: #F5EBD8;
    background: linear-gradient(160deg, rgba(163, 64, 58, 0.92), rgba(122, 42, 38, 0.95));
    border: 1px solid rgba(196, 92, 86, 0.55);
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.fs-pdf-save-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(140, 50, 46, 0.35); }
.fs-pdf-save-btn:disabled { opacity: 0.7; cursor: default; transform: none; }

/* ---- 通用 Section ---- */
.fs-section {
    background: rgba(var(--surface-deep-rgb), 0.60);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1rem 1.2rem;
    margin-bottom: 0.8rem;
}
.fs-section-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}
.fs-section-header > i {
    color: var(--color-gold);
    font-size: 0.9rem;
}
.fs-section-header h3 {
    flex: 1;
    margin: 0;
    font-size: 0.95rem;
    color: var(--color-text);
    font-weight: 600;
}
.fs-section-tag {
    font-size: 0.72rem;
    color: var(--color-muted);
    background: rgba(var(--accent-rgb), 0.06);
    border-radius: 12px;
    padding: 0.15rem 0.6rem;
}

/* ---- 简评 ---- */
.fs-brief-text {
    font-size: 0.85rem;
    color: var(--color-text);
    line-height: 1.8;
    margin: 0;
}

/* ---- 八宅网格 ---- */
.fs-bazhai-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}
.fs-bazhai-item {
    text-align: center;
    padding: 0.6rem 0.3rem;
    border-radius: var(--radius-sm);
    border: 1px solid;
}
.fs-bazhai-good {
    background: rgba(39, 174, 96, 0.06);
    border-color: rgba(39, 174, 96, 0.20);
}
.fs-bazhai-bad {
    background: rgba(176, 69, 69, 0.06);
    border-color: rgba(176, 69, 69, 0.20);
}
.fs-bazhai-dir { font-size: 0.72rem; color: var(--color-muted); }
.fs-bazhai-star { font-size: 0.82rem; font-weight: 600; margin: 0.2rem 0; }
.fs-bazhai-good .fs-bazhai-star { color: var(--color-success); }
.fs-bazhai-bad .fs-bazhai-star { color: var(--color-red-light); }
.fs-bazhai-level { font-size: 0.65rem; color: var(--color-muted); }

/* ---- 八宅详情 ---- */
.fs-bazhai-detail { display: flex; flex-direction: column; gap: 0.4rem; }
.fs-bazhai-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(var(--border-rgb), 0.15);
    font-size: 0.8rem;
}
.fs-bazhai-row:last-child { border-bottom: none; }
.fs-bazhai-row-dir { font-weight: 600; color: var(--color-gold-light); min-width: 40px; }
.fs-bazhai-row-star { color: var(--color-text); min-width: 100px; }
.fs-bazhai-row-desc { color: var(--color-muted); flex: 1; font-size: 0.76rem; }
.fs-bazhai-row.bad .fs-bazhai-row-star { color: var(--color-red-light); }

/* ---- 命卦匹配 ---- */
.fs-minggua-wrap { display: flex; flex-direction: column; gap: 0.8rem; }
.fs-minggua-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.8rem;
    background: rgba(var(--bg-rgb), 0.3);
    border-radius: var(--radius-md);
}
.fs-minggua-gua {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.10);
    border: 2px solid rgba(var(--accent-rgb), 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--color-gold);
    font-weight: 700;
    flex-shrink: 0;
}
.fs-minggua-info { flex: 1; font-size: 0.8rem; color: var(--color-muted); line-height: 1.8; }
.fs-minggua-info strong { color: var(--color-text); }
.fs-match-result {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem;
    border-radius: var(--radius-md);
}
.fs-match-result.match-good {
    background: rgba(39, 174, 96, 0.06);
    border: 1px solid rgba(39, 174, 96, 0.20);
}
.fs-match-result.match-bad {
    background: rgba(176, 69, 69, 0.06);
    border: 1px solid rgba(176, 69, 69, 0.20);
}
.fs-match-icon { font-size: 1.2rem; flex-shrink: 0; }
.match-good .fs-match-icon { color: var(--color-success); }
.match-bad .fs-match-icon { color: var(--color-red-light); }
.fs-match-level { font-size: 0.9rem; font-weight: 600; }
.match-good .fs-match-level { color: var(--color-success); }
.match-bad .fs-match-level { color: var(--color-red-light); }
.fs-match-desc { font-size: 0.78rem; color: var(--color-muted); margin-top: 0.2rem; }

/* ---- 九宫飞星 ---- */
.fs-feixing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    background: var(--color-border);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    margin-bottom: 0.6rem;
}
.fs-feixing-cell {
    background: rgba(var(--surface-deep-rgb), 0.8);
    padding: 0.6rem 0.4rem;
    text-align: center;
    min-height: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.15rem;
}
.fs-feixing-cell.fs-fx-good { background: rgba(39, 174, 96, 0.04); }
.fs-feixing-cell.fs-fx-bad { background: rgba(176, 69, 69, 0.04); }
.fs-fx-palace { font-size: 0.62rem; color: var(--color-muted); }
.fs-fx-stars { font-size: 0.9rem; font-weight: 700; color: var(--color-text); }
.fs-fx-mountain { color: var(--color-gold-light); }
.fs-fx-water { color: var(--color-gold); }
.fs-fx-sep { color: var(--color-muted); margin: 0 0.1rem; }
.fs-fx-yun { font-size: 0.6rem; color: var(--color-muted); }
.fs-fx-name { font-size: 0.65rem; color: var(--color-muted); }
.fs-feixing-legend {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.72rem;
    color: var(--color-muted);
    flex-wrap: wrap;
}
.fs-fx-legend-item { display: flex; align-items: center; gap: 0.3rem; }
.fs-fx-dot { width: 8px; height: 8px; border-radius: 50%; }
.fs-fx-dot.good { background: var(--color-success); }
.fs-fx-dot.bad { background: var(--color-red-light); }
.fs-fx-note { margin-left: auto; font-size: 0.7rem; }

/* ---- 折叠面板 ---- */
.fs-collapsible .fs-collapsible-body { display: none; }
.fs-collapsible.expanded .fs-collapsible-body { display: block; animation: fsStepIn 0.3s ease; }
.fs-collapsible.expanded .fs-collapse-arrow { transform: rotate(180deg); }
.fs-collapse-arrow {
    color: var(--color-muted);
    transition: transform 0.3s;
    cursor: pointer;
}

/* ---- 九星详解 ---- */
.fs-star-row {
    display: flex;
    gap: 0.8rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(var(--border-rgb), 0.15);
}
.fs-star-row:last-child { border-bottom: none; }
.fs-star-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.82rem;
    font-weight: 700;
    flex-shrink: 0;
}
.fs-star-row.good .fs-star-num { background: rgba(39, 174, 96, 0.12); color: var(--color-success); }
.fs-star-row.bad .fs-star-num { background: rgba(176, 69, 69, 0.12); color: var(--color-red-light); }
.fs-star-content { flex: 1; }
.fs-star-name { font-size: 0.85rem; color: var(--color-text); font-weight: 500; }
.fs-star-element {
    font-size: 0.72rem;
    color: var(--color-muted);
    margin-left: 0.4rem;
}
.fs-star-nature {
    font-size: 0.68rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    margin-left: 0.4rem;
}
.fs-star-nature.good { background: rgba(39, 174, 96, 0.15); color: var(--color-success); }
.fs-star-nature.bad { background: rgba(176, 69, 69, 0.15); color: var(--color-red-light); }
.fs-star-desc { font-size: 0.76rem; color: var(--color-muted); margin-top: 0.2rem; line-height: 1.5; }

/* ---- 五行生克 ---- */
.fs-wuxing-box {
    text-align: center;
}
.fs-wuxing-items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 0.8rem;
}
.fs-wx-item { text-align: center; }
.fs-wx-label { display: block; font-size: 0.72rem; color: var(--color-muted); margin-bottom: 0.2rem; }
.fs-wx-value {
    display: inline-block;
    width: 36px;
    height: 36px;
    line-height: 36px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.10);
    border: 1px solid rgba(var(--accent-rgb), 0.20);
    color: var(--color-gold);
    font-size: 0.9rem;
    font-weight: 600;
}
.fs-wx-relation {
    font-size: 0.85rem;
    color: var(--color-gold-light);
    font-weight: 600;
    padding: 0 0.5rem;
}
.fs-wx-desc { font-size: 0.8rem; color: var(--color-muted); line-height: 1.6; margin: 0; }

/* ---- 外部环境列表 ---- */
.fs-env-list { display: flex; flex-direction: column; gap: 0.5rem; }
.fs-env-item {
    display: flex;
    gap: 0.8rem;
    padding: 0.7rem;
    border-radius: var(--radius-md);
    border: 1px solid;
}
.fs-env-item.good {
    background: rgba(39, 174, 96, 0.04);
    border-color: rgba(39, 174, 96, 0.15);
}
.fs-env-item.bad {
    background: rgba(176, 69, 69, 0.04);
    border-color: rgba(176, 69, 69, 0.15);
}
.fs-env-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    flex-shrink: 0;
}
.good .fs-env-icon { background: rgba(39, 174, 96, 0.15); color: var(--color-success); }
.bad .fs-env-icon { background: rgba(176, 69, 69, 0.15); color: var(--color-red-light); }
.fs-env-content { flex: 1; }
.fs-env-label { font-size: 0.82rem; color: var(--color-text); font-weight: 500; }
.fs-env-ref { font-size: 0.7rem; color: var(--color-muted); margin: 0.2rem 0; }
.fs-env-desc { font-size: 0.76rem; color: var(--color-muted); line-height: 1.5; }

/* ---- 布局建议 ---- */
.fs-suggest-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.6rem;
}
.fs-suggest-card {
    display: flex;
    gap: 0.8rem;
    padding: 0.7rem;
    background: rgba(var(--bg-rgb), 0.3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.fs-suggest-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gold);
    font-size: 0.82rem;
    flex-shrink: 0;
}
.fs-suggest-body { flex: 1; }
.fs-suggest-title {
    font-size: 0.85rem;
    color: var(--color-text);
    font-weight: 500;
    margin-bottom: 0.2rem;
}
.fs-suggest-pos {
    font-size: 0.72rem;
    color: var(--color-gold);
    margin-left: 0.4rem;
}
.fs-suggest-desc { font-size: 0.76rem; color: var(--color-muted); line-height: 1.5; }

/* ---- 化解方法 ---- */
.fs-remedy-card {
    padding: 0.8rem;
    border-radius: var(--radius-md);
    border: 1px solid;
    margin-bottom: 0.6rem;
}
.fs-remedy-card.good {
    background: rgba(39, 174, 96, 0.04);
    border-color: rgba(39, 174, 96, 0.15);
}
.fs-remedy-card.bad {
    background: rgba(176, 69, 69, 0.04);
    border-color: rgba(176, 69, 69, 0.15);
}
.fs-remedy-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
}
.fs-remedy-header > i { font-size: 0.85rem; }
.bad .fs-remedy-header > i { color: var(--color-red-light); }
.good .fs-remedy-header > i { color: var(--color-success); }
.fs-remedy-title { flex: 1; font-size: 0.85rem; color: var(--color-text); font-weight: 500; }
.fs-remedy-level {
    font-size: 0.68rem;
    padding: 0.1rem 0.5rem;
    border-radius: 4px;
}
.bad .fs-remedy-level { background: rgba(176, 69, 69, 0.15); color: var(--color-red-light); }
.good .fs-remedy-level { background: rgba(39, 174, 96, 0.15); color: var(--color-success); }
.fs-remedy-desc { font-size: 0.78rem; color: var(--color-muted); margin: 0 0 0.5rem; line-height: 1.5; }
.fs-remedy-methods { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.fs-remedy-method {
    font-size: 0.72rem;
    color: var(--color-gold-light);
    background: rgba(var(--accent-rgb), 0.06);
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    border-radius: 12px;
    padding: 0.15rem 0.6rem;
}

/* ---- 罗盘（精工 SVG 重制：天圆地方外盘 + 多层环 + 天池磁针） ---- */
.fs-luopan-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    --fs-lp-size: 320px;
}
/* 外盘：方形木框（天圆地方），四角包金、四维刻字 */
.fs-lp-frame {
    position: relative;
    padding: 27px;
    border-radius: 16px;
    background:
        repeating-linear-gradient(128deg, rgba(120, 92, 46, 0.05) 0 3px, transparent 3px 9px),
        linear-gradient(160deg, #2E2517 0%, #241D12 45%, #1B150D 100%);
    border: 1px solid rgba(201, 169, 97, 0.28);
    box-shadow:
        0 18px 44px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(232, 199, 126, 0.12),
        inset 0 -2px 8px rgba(0, 0, 0, 0.5);
}
.fs-lp-corner {
    position: absolute;
    width: 30px;
    height: 30px;
    pointer-events: none;
}
.fs-lp-corner::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 0 solid rgba(232, 199, 126, 0.7);
}
.fs-lp-corner.c-tl { top: 7px; left: 7px; }
.fs-lp-corner.c-tl::before { border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 6px; }
.fs-lp-corner.c-tr { top: 7px; right: 7px; }
.fs-lp-corner.c-tr::before { border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 6px; }
.fs-lp-corner.c-bl { bottom: 7px; left: 7px; }
.fs-lp-corner.c-bl::before { border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 6px; }
.fs-lp-corner.c-br { bottom: 7px; right: 7px; }
.fs-lp-corner.c-br::before { border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 6px; }
.fs-lp-corner::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    background: rgba(232, 199, 126, 0.85);
    border-radius: 1px;
    box-shadow: 0 0 6px rgba(232, 199, 126, 0.4);
}
.fs-lp-corner.c-tl::after { top: 9px; left: 9px; }
.fs-lp-corner.c-tr::after { top: 9px; right: 9px; }
.fs-lp-corner.c-bl::after { bottom: 9px; left: 9px; }
.fs-lp-corner.c-br::after { bottom: 9px; right: 9px; }
.fs-lp-edge-mark {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.fs-lp-edge-mark em {
    font-style: normal;
    font-family: var(--font-display);
    font-size: 0.72rem;
    color: rgba(232, 199, 126, 0.72);
    letter-spacing: 0.08em;
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}
.fs-lp-edge-mark.north { top: 3px; left: 0; right: 0; height: 24px; }
.fs-lp-edge-mark.south { bottom: 3px; left: 0; right: 0; height: 24px; }
.fs-lp-edge-mark.east { right: 3px; top: 0; bottom: 0; width: 24px; }
.fs-lp-edge-mark.west { left: 3px; top: 0; bottom: 0; width: 24px; }

/* 盘体：三层叠放（底 / 转动 / 覆盖） */
.fs-luopan-pro {
    position: relative;
    width: var(--fs-lp-size);
    height: var(--fs-lp-size);
    border-radius: 50%;
    cursor: grab;
    touch-action: none;
    user-select: none;
    flex-shrink: 0;
    filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.45));
}
.fs-lp-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}
.fs-lp-rotor {
    position: absolute;
    inset: 0;
    transform-origin: center;
    transition: transform 0.12s ease;
}
.fs-lp-plate { animation: fsLpPlateIn 1.15s var(--ease-out-expo, ease) both; }
@keyframes fsLpPlateIn {
    from { opacity: 0; transform: rotate(-7deg) scale(0.94); }
    to { opacity: 1; transform: rotate(0deg) scale(1); }
}

/* 周天刻度 */
.lp-tick { stroke: rgba(201, 169, 97, 0.28); stroke-width: 1; }
.lp-tick-major { stroke: rgba(216, 199, 154, 0.4); stroke-width: 1.2; }
.lp-tick-cardinal { stroke: #E8C77E; stroke-width: 1.6; }
.lp-tick-xiu { stroke: rgba(201, 169, 97, 0.34); stroke-width: 1; }
/* 环界线 */
.lp-boundary { fill: none; stroke: rgba(201, 169, 97, 0.2); stroke-width: 1; }
.lp-boundary-active { stroke: rgba(232, 199, 126, 0.6); stroke-width: 1.6; }
.lp-boundary-pool { stroke: rgba(201, 169, 97, 0.3); }
.lp-sep-24 { stroke: rgba(201, 169, 97, 0.15); stroke-width: 1; }
.lp-sep-8 { stroke: rgba(201, 169, 97, 0.12); stroke-width: 1; }
.lp-wedge { fill: url(#lpWedge); stroke: rgba(232, 199, 126, 0.42); stroke-width: 1; }

/* 环层文字 */
.fs-lp-plate text,
.fs-lp-cover text,
.fs-dc-svg text {
    font-family: var(--font-display);
    text-anchor: middle;
    dominant-baseline: central;
}
.lp-xiu { fill: rgba(216, 199, 154, 0.5); font-size: 14.5px; }
.lp-xiu-anchor { fill: rgba(232, 199, 126, 0.88); }
.lp-mountain { font-size: 21px; }
.lp-mountain.type-gua { fill: #E8C77E; font-weight: 700; }
.lp-mountain.type-yang { fill: #7FBF82; }
.lp-mountain.type-yin { fill: #C98A8A; }
.lp-mountain.type-branch { fill: #CFC6B0; }
.lp-mountain.active { fill: #F7E2A4; font-weight: 700; filter: url(#lpGlow); }
.lp-bagua { font-size: 18px; fill: rgba(232, 199, 126, 0.88); }
.lp-bagua.active { fill: #F7E2A4; font-weight: 700; filter: url(#lpGlow); }
.lp-bagua-name { font-size: 14.5px; fill: rgba(207, 198, 176, 0.72); }
.lp-bagua-name.active { fill: #E8C77E; font-weight: 700; }
.lp-star { font-size: 14.5px; }
.lp-star.good { fill: #86C98A; }
.lp-star.bad { fill: #E09090; }
.lp-xt { font-size: 17px; fill: rgba(201, 169, 97, 0.45); }

/* 天心十道（十字准线） */
.lp-cross-line { stroke: rgba(176, 69, 69, 0.15); stroke-width: 1; }
.lp-cross-core { stroke: rgba(176, 69, 69, 0.32); stroke-width: 1.1; }
.lp-cross-diamond { fill: rgba(176, 69, 69, 0.48); }
/* 磁针：朝向端朱红 / 尾端象牙 */
.lp-needle-south { fill: #C34545; stroke: rgba(195, 69, 69, 0.5); stroke-width: 0.5; }
.lp-needle-north { fill: #E7DFC8; stroke: rgba(231, 223, 200, 0.4); stroke-width: 0.5; }
.lp-needle-tail { fill: #E7DFC8; opacity: 0.85; }
.lp-pivot { fill: #E8C77E; }
.lp-pivot-core { fill: #141109; }
.fs-lp-needle-settle {
    transform-box: view-box;
    transform-origin: center;
    animation: fsLpNeedleSettle 1.9s cubic-bezier(0.22, 0.9, 0.32, 1.04) 0.35s both;
}
@keyframes fsLpNeedleSettle {
    0% { opacity: 0; transform: rotate(-165deg) scale(0.55); }
    42% { opacity: 1; transform: rotate(11deg) scale(1.05); }
    60% { transform: rotate(-5.5deg) scale(1); }
    76% { transform: rotate(2.4deg); }
    88% { transform: rotate(-1deg); }
    100% { opacity: 1; transform: rotate(0deg); }
}

/* ---- 交互式罗盘浮层（SVG 精工版：刻度 + 二十四山 + 八卦 + 天池） ---- */
.fs-dc-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}
.fs-dc-rotor {
    position: absolute;
    inset: 0;
    transform-origin: center;
    transition: transform 0.14s ease;
}
/* 盘体：半透乌木底（叠在户型图上仍可透见底图） */
.dc-plate { fill: rgba(18, 15, 9, 0.72); }
.dc-rim { fill: none; stroke: #C9A961; stroke-width: 2.2; opacity: 0.9; }
.dc-boundary { fill: none; stroke: rgba(201, 169, 97, 0.35); stroke-width: 0.7; }
.dc-tick { stroke: rgba(201, 169, 97, 0.45); stroke-width: 1; }
.dc-tick-cardinal { stroke: #E8C77E; stroke-width: 1.5; }
/* 二十四山：按天干/地支/四维卦分色 */
.dc-mountain { fill: rgba(207, 198, 176, 0.9); font-size: 8.5px; }
.dc-mountain.type-gua { fill: #E8C77E; font-weight: 700; }
.dc-mountain.type-yang { fill: #7FBF82; }
.dc-mountain.type-yin { fill: #C98A8A; }
.dc-mountain.type-branch { fill: #CFC6B0; }
.dc-mountain.active { fill: #F7E2A4; font-weight: 700; filter: drop-shadow(0 0 2px rgba(232, 199, 126, 0.7)); }
/* 八卦环 */
.dc-bagua { fill: rgba(232, 199, 126, 0.85); font-size: 11px; }
.dc-bagua.active { fill: #F7E2A4; font-weight: 700; filter: drop-shadow(0 0 2px rgba(232, 199, 126, 0.7)); }
/* 天心线 + 磁针 */
.dc-cross { stroke: rgba(195, 69, 69, 0.28); stroke-width: 0.9; stroke-dasharray: 3 2.4; }
.dc-needle { stroke: #E8C77E; stroke-width: 1.8; }
.dc-needle-head { fill: #E8C77E; filter: drop-shadow(0 0 2px rgba(232, 199, 126, 0.65)); }
.dc-needle-base { fill: #C9A961; }
/* 天池 */
.dc-pool { fill: rgba(16, 13, 8, 0.9); stroke: #C9A961; stroke-width: 1.4; }
.dc-pool-inner { fill: none; stroke: rgba(201, 169, 97, 0.5); stroke-width: 0.7; }
.dc-zhai { fill: #F7E2A4; font-size: 13px; font-weight: 700; filter: drop-shadow(0 0 2px rgba(232, 199, 126, 0.55)); }

/* 罗盘图例 */
.fs-lp-legend {
    display: flex;
    gap: 1.2rem;
    font-size: 0.75rem;
    color: var(--color-muted);
    flex-wrap: wrap;
    justify-content: center;
}
.fs-lp-legend-item { display: flex; align-items: center; gap: 0.3rem; }
.fs-lp-dot { width: 8px; height: 8px; border-radius: 50%; }
.fs-lp-dot.good { background: var(--color-success); }
.fs-lp-dot.bad { background: var(--color-red-light); }
.fs-lp-chip {
    padding: 0.22rem 0.7rem;
    border-radius: 999px;
    background: rgba(var(--accent-rgb), 0.08);
    border: 1px solid rgba(var(--accent-rgb), 0.25);
}
.fs-lp-chip em {
    font-style: normal;
    font-size: 0.66rem;
    color: var(--color-muted);
    margin-right: 0.32rem;
}
.fs-lp-chip strong { color: var(--color-gold-light); font-weight: 600; }
.fs-lp-needle-mark {
    width: 18px;
    height: 8px;
    position: relative;
}
.fs-lp-needle-mark::before {
    content: '';
    position: absolute;
    left: 5px;
    right: 5px;
    top: 2.5px;
    height: 3px;
    background: linear-gradient(90deg, #E7DFC8 0 30%, transparent 30% 55%, #C34545 55% 100%);
    border-radius: 2px;
}

/* ---- 风水页面响应式 ---- */
@media (max-width: 600px) {
    .fs-dir-grid { grid-template-columns: repeat(4, 1fr); gap: 0.4rem; }
    .fs-dir-btn { padding: 0.6rem 0.2rem; }
    .fs-dir-bagua { font-size: 1.1rem; }
    .fs-dir-name { font-size: 0.68rem; }
    .fs-bazhai-grid { grid-template-columns: repeat(4, 1fr); gap: 0.3rem; }
    .fs-bazhai-item { padding: 0.4rem 0.15rem; }
    .fs-bazhai-dir { font-size: 0.65rem; }
    .fs-bazhai-star { font-size: 0.72rem; }
    .fs-bazhai-level { font-size: 0.58rem; }
    .fs-bazhai-row { flex-wrap: wrap; font-size: 0.75rem; }
    .fs-bazhai-row-desc { width: 100%; margin-top: 0.2rem; }
    .fs-score-section { gap: 1rem; }
    .fs-score-ring { width: 80px; height: 80px; }
    .fs-score-num { font-size: 1.5rem; }
    .fs-luopan-wrap { --fs-lp-size: 262px; }
    .fs-lp-frame { padding: 22px; border-radius: 13px; }
    .fs-lp-corner { width: 24px; height: 24px; }
    .fs-orient-choice { grid-template-columns: 1fr; }
    .fs-feixing-cell { min-height: 56px; padding: 0.4rem 0.2rem; }
    .fs-fx-stars { font-size: 0.78rem; }
    .fs-report-actions { flex-direction: column; }
    .fs-action-btn { width: 100%; }
}
@media (max-width: 380px) {
    .fs-dir-grid { grid-template-columns: repeat(4, 1fr); }
    .fs-bazhai-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================
   户型图 + 交互式罗盘
   ============================================ */
.fs-plan-compass-wrap {
    position: relative;
}
.fs-plan-container {
    position: relative;
    width: 100%;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: rgba(var(--surface-rgb), 0.5);
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fs-plan-img {
    width: 100%;
    height: auto;
    display: block;
    max-height: 500px;
    object-fit: contain;
}

/* 交互式罗盘浮层 */
.fs-drag-compass {
    position: absolute;
    width: 160px;
    height: 160px;
    z-index: 10;
    cursor: grab;
    touch-action: none;
    user-select: none;
    transition: opacity 0.2s ease;
}
.fs-drag-compass:active { cursor: grabbing; }
.fs-drag-compass.locked { cursor: not-allowed; }
.fs-drag-compass.locked::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid rgba(var(--accent-rgb), 0.6);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.3);
    pointer-events: none;
}

/* 控制面板 */
.fs-dc-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.8rem;
    padding: 0.6rem 0.8rem;
    background: rgba(var(--surface-rgb), 0.6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
}
.fs-dc-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: rgba(var(--surface-light-rgb), 0.8);
    color: var(--color-text);
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.fs-dc-btn:hover {
    border-color: rgba(var(--accent-rgb), 0.5);
    color: var(--color-gold-light);
    background: rgba(var(--accent-rgb), 0.08);
}
.fs-dc-btn.active {
    border-color: rgba(var(--accent-rgb), 0.6);
    color: var(--color-gold-light);
    background: rgba(var(--accent-rgb), 0.12);
}
.fs-dc-slider-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    min-width: 120px;
}
.fs-dc-slider-wrap i {
    color: var(--color-muted);
    font-size: 0.85rem;
}
.fs-dc-slider {
    flex: 1;
    height: 4px;
    -webkit-appearance: none;
    appearance: none;
    background: rgba(var(--border-rgb), 0.4);
    border-radius: 2px;
    outline: none;
}
.fs-dc-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-gold);
    cursor: pointer;
    box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.4);
}
.fs-dc-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-gold);
    cursor: pointer;
    border: none;
    box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.4);
}
.fs-dc-hint {
    margin: 0.6rem 0 0;
    font-size: 0.75rem;
    color: var(--color-muted);
    text-align: center;
}
.fs-dc-hint i { margin-right: 0.3rem; }

/* 未上传户型图 */
.fs-plan-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: var(--color-muted);
}
.fs-plan-empty i {
    font-size: 2rem;
    color: rgba(var(--accent-rgb), 0.3);
    margin-bottom: 0.8rem;
}
.fs-plan-empty p {
    font-size: 0.95rem;
    margin: 0 0 0.3rem;
    color: var(--color-text);
}
.fs-plan-empty span {
    font-size: 0.78rem;
    color: var(--color-muted);
}

/* 响应式 */
@media (max-width: 480px) {
    .fs-drag-compass { width: 140px; height: 140px; }
    .dc-mountain { font-size: 7px; }
    .dc-bagua { font-size: 9px; }
    .dc-zhai { font-size: 11px; }
    .fs-dc-controls { gap: 0.3rem; padding: 0.5rem; }
    .fs-dc-btn { width: 32px; height: 32px; font-size: 0.78rem; }
}

/* 罗盘控制 */
.fs-lp-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
}
.fs-lp-ctrl-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: rgba(var(--surface-light-rgb), 0.8);
    color: var(--color-text);
    font-size: 0.82rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}
.fs-lp-ctrl-btn:hover {
    border-color: rgba(var(--accent-rgb), 0.5);
    color: var(--color-gold-light);
    background: rgba(var(--accent-rgb), 0.08);
}
.fs-lp-angle-display {
    min-width: 48px;
    text-align: center;
    font-size: 0.8rem;
    color: var(--color-gold);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* 二十四山类型标记 */
.fs-lp-mountain-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    font-size: 0.55rem;
    margin-left: 0.2rem;
}
.fs-lp-mountain-mark.type-gua { background: rgba(201,169,97,0.25); color: var(--color-gold); }
.fs-lp-mountain-mark.type-yang { background: rgba(39,174,96,0.2); color: var(--color-success); }
.fs-lp-mountain-mark.type-yin { background: rgba(176,69,69,0.2); color: var(--color-red-light); }
.fs-lp-mountain-mark.type-branch { background: rgba(var(--border-rgb),0.2); color: var(--color-muted); }

/* ============================================
   智能找太极点
   ============================================ */
.fs-taiji-svg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    pointer-events: none;
}
.fs-taiji-svg .fs-taiji-point {
    cursor: move;
}
.fs-taiji-svg .fs-taiji-pulse-svg {
    animation: fsTaijiPulse 2s ease-in-out infinite;
}
@keyframes fsTaijiPulse {
    0%, 100% { r: 16; opacity: 0.8; }
    50% { r: 24; opacity: 0.3; }
}

.fs-taiji-marker {
    position: absolute;
    z-index: 8;
    pointer-events: none;
    transform: translate(-50%, -50%);
}
.fs-taiji-marker-dot {
    width: 14px;
    height: 14px;
    background: #E8C77E;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 10px rgba(232, 199, 126, 0.6);
}
.fs-taiji-marker-pulse {
    position: absolute;
    top: -10px;
    left: -10px;
    width: 34px;
    height: 34px;
    border: 2px solid rgba(232, 199, 126, 0.5);
    border-radius: 50%;
    animation: fsTaijiMarkerPulse 2s ease-in-out infinite;
}
@keyframes fsTaijiMarkerPulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.5); opacity: 0; }
}
.fs-taiji-marker-label {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: #E8C77E;
    background: rgba(0,0,0,0.6);
    padding: 1px 8px;
    border-radius: 8px;
    white-space: nowrap;
}

.fs-taiji-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.fs-taiji-intro p {
    font-size: 0.82rem;
    color: var(--color-muted);
    line-height: 1.6;
    margin: 0;
    padding: 0.6rem 0.8rem;
    background: rgba(var(--surface-rgb), 0.4);
    border-radius: var(--radius-md);
    border-left: 3px solid rgba(var(--accent-rgb), 0.3);
}
.fs-taiji-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.fs-taiji-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: rgba(var(--surface-light-rgb), 0.8);
    color: var(--color-text);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.fs-taiji-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.fs-taiji-btn:not(:disabled):hover {
    border-color: rgba(var(--accent-rgb), 0.5);
    background: rgba(var(--accent-rgb), 0.08);
}
.fs-taiji-btn.primary {
    background: rgba(var(--accent-rgb), 0.15);
    border-color: rgba(var(--accent-rgb), 0.4);
    color: var(--color-gold-light);
}
.fs-taiji-btn.primary.active {
    background: rgba(var(--accent-rgb), 0.3);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.3);
}
.fs-taiji-btn.success:not(:disabled) {
    background: rgba(39, 174, 96, 0.12);
    border-color: rgba(39, 174, 96, 0.4);
    color: var(--color-success);
}

.fs-taiji-result {
    padding: 1rem;
    background: rgba(var(--surface-rgb), 0.6);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    animation: fsTaijiFadeIn 0.4s ease;
}
@keyframes fsTaijiFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.fs-taiji-result-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.8rem;
}
.fs-taiji-result-item {
    padding: 0.6rem;
    background: rgba(var(--bg-deep-rgb), 0.4);
    border-radius: var(--radius-md);
    border: 1px solid rgba(var(--border-rgb), 0.3);
}
.fs-taiji-result-label {
    font-size: 0.7rem;
    color: var(--color-muted);
    margin-bottom: 0.3rem;
}
.fs-taiji-result-value {
    font-size: 0.85rem;
    color: var(--color-gold-light);
    font-weight: 600;
    line-height: 1.4;
}
.fs-taiji-points-info {
    font-size: 0.78rem;
    color: var(--color-muted);
    text-align: center;
    padding: 0.3rem;
}
.fs-taiji-points-info span {
    color: var(--color-gold);
    font-weight: 600;
}

/* 太极点结果响应式 */
@media (max-width: 480px) {
    .fs-taiji-result-grid { grid-template-columns: 1fr; }
    .fs-taiji-actions { gap: 0.3rem; }
    .fs-taiji-btn { font-size: 0.75rem; padding: 0.4rem 0.7rem; }
}

/* ============================================
   推演过渡动画 — Divination Transition v2
   编排序列：星空初降 → 元气汇聚 → 太极成形 → 八卦环旋 → 神光普照 → 天机渐显
   技术要点：仅用 transform+opacity 保证 60FPS，@property 驱动渐变旋转
   ============================================ */

/* ---- @property 注册（必须置于顶部） ---- */
@property --dt-aurora-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

/* ---- 覆盖层主体 ---- */
.dt-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(var(--bg-deep-rgb), 0.88);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 1.5rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s var(--ease-out-expo), visibility 0.5s ease;
    overflow: hidden;
}
.dt-overlay.dt-active {
    opacity: 1;
    visibility: visible;
}

/* ---- 1. 星空背景层 ---- */
.dt-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease 0.1s;
}
.dt-overlay.dt-active .dt-stars { opacity: 1; }
.dt-star {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: rgba(var(--accent-light-rgb), 0.7);
    box-shadow: 0 0 4px rgba(var(--accent-rgb), 0.5);
    animation: dtStarTwinkle 3s ease-in-out infinite;
}
.dt-star.large {
    width: 3px;
    height: 3px;
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.6);
}
@keyframes dtStarTwinkle {
    0%, 100% { opacity: 0.15; transform: scale(0.7); }
    50% { opacity: 0.9; transform: scale(1.3); }
}

/* ---- 2. 能量汇聚粒子 ---- */
.dt-converge {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.dt-spark {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(var(--accent-light-rgb), 0.9);
    box-shadow:
        0 0 8px rgba(var(--accent-rgb), 0.8),
        0 0 16px rgba(var(--accent-rgb), 0.4);
    opacity: 0;
    animation: dtSparkConverge 1.2s var(--ease-out-expo) forwards;
    animation-delay: calc(var(--spark-delay, 0) * 1ms);
}
@keyframes dtSparkConverge {
    0% {
        opacity: 0;
        transform: translate(var(--spark-x, 0), var(--spark-y, 0)) scale(0.3);
    }
    15% { opacity: 1; }
    85% {
        opacity: 1;
        transform: translate(0, 0) scale(1.2);
    }
    100% {
        opacity: 0;
        transform: translate(0, 0) scale(0);
    }
}

/* ---- 3. 中央舞台 ---- */
.dt-stage {
    position: relative;
    width: 200px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.2);
    opacity: 0;
    transition:
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s,
        opacity 0.6s ease 0.5s;
}
.dt-overlay.dt-active .dt-stage {
    transform: scale(1);
    opacity: 1;
}

/* ---- 4. 太极图（纯正 CSS 阴阳鱼） ---- */
.dt-taiji {
    position: relative;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(to bottom,
        rgba(var(--accent-rgb), 0.95) 50%,
        rgba(var(--bg-deep-rgb), 1) 50%);
    box-shadow:
        0 0 30px rgba(var(--accent-rgb), 0.5),
        0 0 60px rgba(var(--accent-rgb), 0.25),
        0 0 100px rgba(var(--accent-rgb), 0.1),
        inset 0 0 20px rgba(0, 0, 0, 0.15);
    animation: dtTaijiSpin 3s linear infinite;
    z-index: 3;
    overflow: hidden;
}
/* 阴阳鱼——左半（金色侧的小圆，深色填充） */
.dt-taiji::before {
    content: '';
    position: absolute;
    top: 0;
    left: 25%;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background: rgba(var(--bg-deep-rgb), 1);
    box-sizing: border-box;
}
/* 阴阳鱼——右半（深色侧的小圆，金色填充） */
.dt-taiji::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 25%;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background: rgba(var(--accent-rgb), 0.95);
    box-sizing: border-box;
}
/* 鱼眼——上鱼眼（金色点） */
.dt-taiji-eye-top {
    position: absolute;
    top: 12%;
    left: 42%;
    width: 16%;
    height: 16%;
    border-radius: 50%;
    background: rgba(var(--accent-light-rgb), 1);
    box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.8);
    z-index: 4;
}
/* 鱼眼——下鱼眼（深色点） */
.dt-taiji-eye-bottom {
    position: absolute;
    bottom: 12%;
    left: 42%;
    width: 16%;
    height: 16%;
    border-radius: 50%;
    background: rgba(var(--bg-deep-rgb), 1);
    z-index: 4;
}
@keyframes dtTaijiSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ---- 5. 太极光晕脉冲 ---- */
.dt-glow {
    position: absolute;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(var(--accent-rgb), 0.35) 0%,
        rgba(var(--accent-rgb), 0.1) 40%,
        transparent 70%);
    animation: dtGlowPulse 2s ease-in-out infinite;
    z-index: 1;
}
@keyframes dtGlowPulse {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(2.2); opacity: 0.15; }
}

/* ---- 6. 八卦字环 ---- */
.dt-bagua {
    position: absolute;
    width: 160px;
    height: 160px;
    animation: dtSpinCW 14s linear infinite;
}
.dt-bagua span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    margin-top: -12px;
    font-family: var(--font-display);
    font-size: 0.95rem;
    color: rgba(var(--accent-rgb), 0);
    text-align: center;
    line-height: 24px;
    opacity: 0;
    animation: dtBaguaReveal 0.8s var(--ease-out-expo) forwards;
    animation-delay: calc(0.9s + var(--bg-delay, 0) * 1ms);
}
.dt-bagua span:nth-child(1) { transform: rotate(0deg) translateY(-80px) rotate(0deg); --bg-delay: 0; }
.dt-bagua span:nth-child(2) { transform: rotate(45deg) translateY(-80px) rotate(-45deg); --bg-delay: 80; }
.dt-bagua span:nth-child(3) { transform: rotate(90deg) translateY(-80px) rotate(-90deg); --bg-delay: 160; }
.dt-bagua span:nth-child(4) { transform: rotate(135deg) translateY(-80px) rotate(-135deg); --bg-delay: 240; }
.dt-bagua span:nth-child(5) { transform: rotate(180deg) translateY(-80px) rotate(-180deg); --bg-delay: 320; }
.dt-bagua span:nth-child(6) { transform: rotate(225deg) translateY(-80px) rotate(-225deg); --bg-delay: 400; }
.dt-bagua span:nth-child(7) { transform: rotate(270deg) translateY(-80px) rotate(-270deg); --bg-delay: 480; }
.dt-bagua span:nth-child(8) { transform: rotate(315deg) translateY(-80px) rotate(-315deg); --bg-delay: 560; }
@keyframes dtBaguaReveal {
    0% {
        opacity: 0;
        color: rgba(var(--accent-rgb), 0);
        text-shadow: 0 0 0 rgba(var(--accent-rgb), 0);
    }
    50% {
        opacity: 1;
        color: rgba(var(--accent-light-rgb), 1);
        text-shadow: 0 0 20px rgba(var(--accent-rgb), 0.8), 0 0 40px rgba(var(--accent-rgb), 0.4);
    }
    100% {
        opacity: 1;
        color: rgba(var(--accent-rgb), 0.7);
        text-shadow: 0 0 12px rgba(var(--accent-rgb), 0.4);
    }
}
@keyframes dtSpinCW { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---- 7. 八卦底纹（conic-gradient 等分扇） ---- */
.dt-bagua-pattern {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: repeating-conic-gradient(
        from 0deg,
        rgba(var(--accent-rgb), 0.03) 0deg 22.5deg,
        transparent 22.5deg 45deg
    );
    animation: dtSpinCCW 20s linear infinite;
    opacity: 0;
    transition: opacity 0.6s ease 1s;
}
.dt-overlay.dt-active .dt-bagua-pattern { opacity: 1; }
@keyframes dtSpinCCW { from { transform: rotate(0deg); } to { transform: rotate(-360deg); } }

/* ---- 8. 旋转外环（双层虚线） ---- */
.dt-outer-ring {
    position: absolute;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    border: 1px dashed rgba(var(--accent-rgb), 0.18);
    animation: dtSpinCCW 16s linear infinite;
}
.dt-outer-ring::before {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 1px solid rgba(var(--accent-rgb), 0.06);
}
.dt-outer-ring::after {
    content: '';
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    border: 1px dotted rgba(var(--accent-rgb), 0.1);
    animation: dtSpinCW 24s linear infinite;
}

/* ---- 9. 扩散光环（波纹） ---- */
.dt-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    opacity: 0;
    pointer-events: none;
}
.dt-ring-1 { width: 72px; height: 72px; animation: dtRingExpand 2.8s ease-out 0.8s infinite; }
.dt-ring-2 { width: 72px; height: 72px; animation: dtRingExpand 2.8s ease-out 1.6s infinite; }
.dt-ring-3 { width: 72px; height: 72px; animation: dtRingExpand 2.8s ease-out 2.4s infinite; }
@keyframes dtRingExpand {
    0% { transform: scale(0.8); opacity: 0; border-color: rgba(var(--accent-rgb), 0.6); }
    15% { opacity: 1; }
    100% { transform: scale(3); opacity: 0; border-color: rgba(var(--accent-rgb), 0); }
}

/* ---- 10. 神光放射（Spike Halo 光轮） ---- */
.dt-rays {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(var(--accent-rgb), 0) 0deg,
        rgba(var(--accent-rgb), 0.12) 5deg,
        rgba(var(--accent-rgb), 0) 10deg,
        rgba(var(--accent-rgb), 0) 30deg,
        rgba(var(--accent-rgb), 0.08) 35deg,
        rgba(var(--accent-rgb), 0) 40deg
    );
    -webkit-mask: repeating-conic-gradient(
        from 0deg,
        #000 0deg 9deg,
        transparent 9deg 18deg
    );
    mask: repeating-conic-gradient(
        from 0deg,
        #000 0deg 9deg,
        transparent 9deg 18deg
    );
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.8s ease 1.4s, transform 1s var(--ease-out-expo) 1.4s;
    animation: dtSpinCW 30s linear infinite;
    pointer-events: none;
}
.dt-overlay.dt-active .dt-rays {
    opacity: 1;
    transform: scale(1);
}

/* ---- 11. 极光旋转层（@property 驱动） ---- */
.dt-aurora {
    position: absolute;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: conic-gradient(
        from var(--dt-aurora-angle),
        rgba(var(--accent-rgb), 0) 0deg,
        rgba(var(--accent-light-rgb), 0.06) 60deg,
        rgba(var(--accent-rgb), 0.1) 120deg,
        rgba(var(--accent-rgb), 0) 180deg,
        rgba(var(--accent-light-rgb), 0.05) 240deg,
        rgba(var(--accent-rgb), 0.08) 300deg,
        rgba(var(--accent-rgb), 0) 360deg
    );
    filter: blur(8px);
    opacity: 0;
    transition: opacity 0.8s ease 1.2s;
    pointer-events: none;
}
.dt-overlay.dt-active .dt-aurora {
    opacity: 1;
    animation: dtAuroraSpin 6s linear infinite;
}
@keyframes dtAuroraSpin {
    from { --dt-aurora-angle: 0deg; }
    to { --dt-aurora-angle: 360deg; }
}

/* ---- 12. 飘升粒子（环境粒子） ---- */
.dt-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}
.dt-particle {
    position: absolute;
    bottom: -10px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(var(--accent-light-rgb), 0.7);
    box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.5);
    animation: dtParticleRise linear infinite;
}
@keyframes dtParticleRise {
    0% {
        transform: translateY(0) translateX(0);
        opacity: 0;
    }
    10% { opacity: 1; }
    90% { opacity: 0.6; }
    100% {
        transform: translateY(-100vh) translateX(var(--drift, 20px));
        opacity: 0;
    }
}

/* ---- 13. 中央能量核（汇聚终点爆光） ---- */
.dt-core-burst {
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(var(--accent-light-rgb), 0.6) 0%,
        rgba(var(--accent-rgb), 0.3) 30%,
        transparent 60%);
    opacity: 0;
    z-index: 0;
    pointer-events: none;
}
.dt-overlay.dt-active .dt-core-burst {
    animation: dtCoreBurst 1.5s var(--ease-out-expo) 0.8s forwards;
}
@keyframes dtCoreBurst {
    0% { opacity: 0; transform: scale(0); }
    40% { opacity: 1; transform: scale(1.5); }
    100% { opacity: 0.5; transform: scale(1); }
}

/* ---- 14. 最终闪光（提交前白光） ---- */
.dt-flash {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: radial-gradient(circle at center,
        rgba(var(--accent-light-rgb), 0.8) 0%,
        rgba(var(--accent-rgb), 0.4) 30%,
        transparent 70%);
    opacity: 0;
    pointer-events: none;
}
.dt-flash.dt-flash-on {
    animation: dtFlash 0.6s ease-out forwards;
}
@keyframes dtFlash {
    0% { opacity: 0; transform: scale(0.5); }
    30% { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.5); }
}

/* ---- 15. 状态文字 ---- */
.dt-text-wrap {
    margin-top: 0;
    text-align: center;
    opacity: 0;
    transition: opacity 0.6s ease 0.7s;
    position: relative;
    z-index: 5;
}
.dt-overlay.dt-active .dt-text-wrap { opacity: 1; }
.dt-text {
    font-family: var(--font-display);
    font-size: 0.9rem;
    color: rgba(var(--accent-light-rgb), 0.9);
    letter-spacing: 0.4em;
    text-indent: 0.4em;
    text-shadow:
        0 0 12px rgba(var(--accent-rgb), 0.5),
        0 0 24px rgba(var(--accent-rgb), 0.2);
    transition: opacity 0.35s ease, transform 0.35s ease;
    min-height: 1.4em;
    transform: translateY(0);
}
.dt-text.dt-fade-out {
    opacity: 0;
    transform: translateY(-6px);
}
.dt-text.dt-fade-in {
    animation: dtTextIn 0.5s var(--ease-out-expo) forwards;
}
@keyframes dtTextIn {
    0% { opacity: 0; transform: translateY(8px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* ---- 16. 进度条 ---- */
.dt-progress-wrap {
    margin-top: 0;
    width: 180px;
    height: 2px;
    background: rgba(var(--border-rgb), 0.3);
    border-radius: 2px;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.6s ease 0.9s;
    position: relative;
    z-index: 5;
}
.dt-overlay.dt-active .dt-progress-wrap { opacity: 1; }
.dt-progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg,
        rgba(var(--accent-rgb), 0.2),
        rgba(var(--accent-light-rgb), 0.9),
        rgba(var(--accent-rgb), 0.2));
    box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.6);
    border-radius: 2px;
    transition: width 0.5s var(--ease-out-expo);
    position: relative;
}
.dt-progress-bar::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(var(--accent-light-rgb), 1);
    box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.8);
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.dt-progress-bar[data-active="1"]::after { opacity: 1; }

/* ---- 17. 响应式 ---- */
@media (max-width: 480px) {
    .dt-stage { width: 180px; height: 180px; }
    .dt-taiji { width: 64px; height: 64px; }
    .dt-glow { width: 64px; height: 64px; }
    .dt-bagua { width: 140px; height: 140px; }
    .dt-bagua span:nth-child(1) { transform: rotate(0deg) translateY(-70px) rotate(0deg); }
    .dt-bagua span:nth-child(2) { transform: rotate(45deg) translateY(-70px) rotate(-45deg); }
    .dt-bagua span:nth-child(3) { transform: rotate(90deg) translateY(-70px) rotate(-90deg); }
    .dt-bagua span:nth-child(4) { transform: rotate(135deg) translateY(-70px) rotate(-135deg); }
    .dt-bagua span:nth-child(5) { transform: rotate(180deg) translateY(-70px) rotate(-180deg); }
    .dt-bagua span:nth-child(6) { transform: rotate(225deg) translateY(-70px) rotate(-225deg); }
    .dt-bagua span:nth-child(7) { transform: rotate(270deg) translateY(-70px) rotate(-270deg); }
    .dt-bagua span:nth-child(8) { transform: rotate(315deg) translateY(-70px) rotate(-315deg); }
    .dt-bagua-pattern { width: 130px; height: 130px; }
    .dt-outer-ring { width: 170px; height: 170px; }
    .dt-rays { width: 180px; height: 180px; }
    .dt-aurora { width: 170px; height: 170px; }
    .dt-core-burst { width: 80px; height: 80px; }
    .dt-ring-1, .dt-ring-2, .dt-ring-3 { width: 64px; height: 64px; }
    .dt-text { font-size: 0.82rem; letter-spacing: 0.3em; }
    .dt-progress-wrap { width: 150px; }
}

/* ---- 18. 减少动画偏好 ---- */
@media (prefers-reduced-motion: reduce) {
    .dt-taiji, .dt-outer-ring, .dt-bagua, .dt-bagua-pattern,
    .dt-rays, .dt-aurora { animation-duration: 10s !important; }
    .dt-ring-1, .dt-ring-2, .dt-ring-3 { animation: none; opacity: 0.2; }
    .dt-particle, .dt-spark { animation: none; opacity: 0.3; }
    .dt-star { animation: none; opacity: 0.4; }
    .dt-core-burst { animation: none; opacity: 0.3; }
    .dt-glow { animation: none; opacity: 0.4; }
}

/* ============================================
   19. 神煞解读底部弹窗
   ============================================ */
.shensha-sheet-mask {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9998;
    opacity: 0; visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.shensha-sheet-mask.show { opacity: 1; visibility: visible; }

.shensha-sheet {
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 9999;
    background: var(--color-surface);
    border-top: 2px solid var(--color-gold-dark);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 32px rgba(0,0,0,0.4);
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 90vh;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.shensha-sheet.show { transform: translateY(0); }

.shensha-sheet-handle {
    flex-shrink: 0;
    width: 40px; height: 4px;
    background: var(--color-border);
    border-radius: 2px;
    margin: 10px auto 6px;
}

.shensha-sheet-header {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.3rem 1.2rem 0.8rem;
    border-bottom: 1px solid var(--color-border);
}
.shensha-sheet-title {
    font-size: 1.15rem; font-weight: 700;
    color: var(--color-gold-light);
    display: flex; align-items: center; gap: 0.5rem;
}
.shensha-sheet-type {
    font-size: 0.7rem; padding: 2px 8px; border-radius: 10px;
    background: rgba(var(--gold-rgb), 0.15);
    color: var(--color-gold-light);
}
.shensha-sheet-type.xiong {
    background: rgba(220, 70, 70, 0.15);
    color: var(--color-red-light);
}
.shensha-sheet-close {
    background: none; border: none; color: var(--color-muted);
    font-size: 1.4rem; cursor: pointer; padding: 4px 8px;
    line-height: 1; border-radius: 6px;
    transition: color 0.2s, background 0.2s;
}
.shensha-sheet-close:hover { color: var(--color-text); background: rgba(255,255,255,0.06); }

.shensha-sheet-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    flex: 1;
    padding: 1rem 1.2rem calc(1.5rem + env(safe-area-inset-bottom));
}
.shensha-sheet-desc {
    font-size: 0.9rem; line-height: 1.8;
    color: var(--color-text);
    margin-bottom: 0.8rem;
}
.shensha-sheet-section {
    margin-bottom: 0.8rem;
}
.shensha-sheet-section-title {
    font-size: 0.8rem; font-weight: 600;
    color: var(--color-gold-light);
    margin-bottom: 0.3rem;
    display: flex; align-items: center; gap: 0.3rem;
}
.shensha-sheet-section-text {
    font-size: 0.85rem; line-height: 1.7;
    color: var(--color-text);
}
.shensha-sheet-source {
    font-size: 0.72rem; color: var(--color-muted);
    margin-top: 0.8rem; padding-top: 0.6rem;
    border-top: 1px dashed var(--color-border);
}

/* 神煞标签可点击样式 */
.shensha-tag {
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
}
.shensha-tag:hover {
    transform: translateY(-1px);
    background: rgba(var(--gold-rgb), 0.22) !important;
}
.shensha-tag:active {
    transform: scale(0.96);
}

/* ============================================
   20. 桌面端顶部导航
   ============================================ */
.desktop-nav {
    display: none;
    align-items: center;
    gap: 0.15rem;
    margin-left: 1.5rem;
    padding: 0.25rem;
    background: rgba(var(--surface-deep-rgb), 0.5);
    border: 1px solid var(--color-border);
    border-radius: 10px;
}
.desktop-nav-item {
    padding: 0.35rem 1.1rem;
    border-radius: 7px;
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--color-muted);
    text-decoration: none;
    transition: all 0.25s ease;
    cursor: pointer;
    background: none;
    border: none;
    font-family: inherit;
    line-height: 1.5;
    white-space: nowrap;
    /* 阻止原生长按/拖拽副作用（选中抖动、拖动叉号） */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    touch-action: manipulation;
}
.desktop-nav-item:hover {
    color: var(--color-gold-light);
    background: rgba(var(--gold-rgb), 0.08);
}
.desktop-nav-item.active {
    color: var(--color-gold-light);
    background: rgba(var(--gold-rgb), 0.15);
    font-weight: 600;
}
/* 长按可自定义的视觉提示（桌面悬停时右下角小扳手，悬停超过 4 秒才出现） */
.desktop-nav-item { position: relative; }
.desktop-nav-item::after {
    content: '\f0ad'; /* fa-wrench */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    right: 3px;
    bottom: 1px;
    font-size: 0.5rem;
    opacity: 0;
    transition: opacity 0.15s ease; /* 移开时立即隐藏，无延迟 */
    pointer-events: none;
    color: var(--color-gold);
}
.desktop-nav-item:hover::after {
    opacity: 0.55;
    transition: opacity 0.25s ease 4s; /* 悬停满 4 秒后才淡入 */
}
/* 自定义按钮为空时的"＋"添加占位（虚线弱化样式） */
.desktop-nav-item.desktop-nav-add {
    border: 1px dashed rgba(var(--gold-rgb), 0.45);
    border-radius: 7px;
    padding: 0.35rem 0.7rem;
    font-size: 0.78rem;
    color: var(--color-muted);
}
.desktop-nav-item.desktop-nav-add::after { content: none; }
.desktop-nav-item.desktop-nav-add:hover { color: var(--color-gold-light); border-color: rgba(var(--gold-rgb), 0.7); }

@media (min-width: 1024px) {
    .desktop-nav { display: flex; }
}

/* ============================================
   20.1 桌面端导航自定义弹窗
   ============================================ */
.navpick-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 11500;
}
.navpick-modal.show { display: block; }
.navpick-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.66);
}
.navpick-box {
    position: relative;
    width: min(92vw, 640px);
    max-height: 82vh;
    margin: 9vh auto 0;
    display: flex;
    flex-direction: column;
    background: var(--color-surface, #1A1A24);
    border: 1px solid var(--color-border, #3A3A48);
    border-top: 2px solid var(--color-gold, #C9A961);
    border-radius: var(--radius-lg, 14px);
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.55);
    overflow: hidden;
    animation: navpickPop 0.25s ease;
}
@keyframes navpickPop {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.navpick-close {
    position: absolute;
    top: 0.7rem;
    right: 0.8rem;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(var(--gold-rgb), 0.10);
    border: 1px solid rgba(var(--gold-rgb), 0.30);
    color: var(--color-muted);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 2;
}
.navpick-close:hover { color: var(--color-gold-light); background: rgba(var(--gold-rgb), 0.2); }
.navpick-title {
    margin: 1.1rem 1.2rem 0.25rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text, #E8E0D0);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.navpick-title i { color: var(--color-gold, #C9A961); }
.navpick-desc {
    margin: 0 1.2rem 0.9rem;
    font-size: 0.76rem;
    color: var(--color-muted);
    line-height: 1.5;
}
.navpick-grid {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 0.55rem;
    padding: 0 1.2rem 0.9rem;
    align-content: start;
}
.navpick-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.7rem 0.4rem 0.6rem;
    background: rgba(var(--surface-deep-rgb), 0.6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 10px);
    color: var(--color-text, #E8E0D0);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all 0.2s ease;
}
.navpick-cell i {
    font-size: 1.05rem;
    color: var(--color-gold, #C9A961);
    transition: color 0.2s ease;
}
.navpick-cell:hover {
    border-color: rgba(var(--gold-rgb), 0.55);
    background: rgba(var(--gold-rgb), 0.10);
    transform: translateY(-2px);
}
.navpick-cell:hover i { color: var(--color-gold-light); }
.navpick-cell.current {
    border-color: rgba(var(--gold-rgb), 0.75);
    background: rgba(var(--gold-rgb), 0.14);
    box-shadow: 0 0 10px rgba(var(--gold-rgb), 0.15);
}
.navpick-current-tag {
    position: absolute;
    top: -7px;
    right: -5px;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--color-gold-dark), var(--color-gold));
    color: #FFF8E1;
    font-size: 0.58rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5;
}
.navpick-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 0.75rem 1.2rem;
    border-top: 1px solid var(--color-border);
    background: rgba(var(--surface-deep-rgb), 0.55);
}
.navpick-slot-label {
    font-size: 0.75rem;
    color: var(--color-muted);
    line-height: 1.4;
    flex: 1;
    min-width: 0;
}
/* 按钮数量增减控件（1-4 个可调） */
.navpick-count-ctrl {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
}
.navpick-mini-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    padding: 0.32rem 0.6rem;
    font-size: 0.72rem;
    color: var(--color-muted);
    background: rgba(var(--surface-darker-rgb), 0.85);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 8px);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.navpick-mini-btn:hover:not(:disabled) {
    color: var(--color-gold-light);
    border-color: rgba(var(--gold-rgb), 0.55);
    background: rgba(var(--gold-rgb), 0.10);
}
.navpick-mini-btn:disabled {
    opacity: 0.38;
    cursor: not-allowed;
}
.navpick-reset {
    flex-shrink: 0;
    padding: 0.45rem 0.9rem;
    font-size: 0.78rem;
    background: rgba(var(--gold-rgb), 0.12);
    border: 1px solid rgba(var(--gold-rgb), 0.4);
    border-radius: var(--radius-md, 10px);
    color: var(--color-gold-light);
    cursor: pointer;
    transition: all 0.2s ease;
}
.navpick-reset:hover { background: rgba(var(--gold-rgb), 0.22); }
/* 太极水墨（浅色）主题适配：弹窗沿用米白面板、深字可读 */
html[data-theme="taiji"] .navpick-box {
    background: #F7F3E8;
    border-color: rgba(43, 43, 43, 0.22);
}
html[data-theme="taiji"] .navpick-title { color: #2B2B2B; }
html[data-theme="taiji"] .navpick-desc { color: #7A6A45; }
html[data-theme="taiji"] .navpick-cell {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(43, 43, 43, 0.18);
    color: #2B2B2B;
}
html[data-theme="taiji"] .navpick-cell i { color: #8C6D1F; }
html[data-theme="taiji"] .navpick-cell:hover { background: rgba(212, 175, 55, 0.15); }
html[data-theme="taiji"] .navpick-slot-label { color: #7A6A45; }
html[data-theme="taiji"] .navpick-footer { background: rgba(212, 175, 55, 0.08); }

/* ============================================
   21. 我的页面 - 历史记录（可展开菜单内）
   ============================================ */
.pf-history-list {
    display: flex; flex-direction: column;
    gap: 0.4rem;
    padding: 0.3rem 0;
}
.pf-history-card {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    background: rgba(var(--surface-deep-rgb), 0.5);
    border: 1px solid var(--color-border);
    border-left: 2px solid var(--color-gold-dark);
    border-radius: 6px;
    text-decoration: none;
    color: var(--color-text);
    transition: transform 0.15s, border-color 0.15s;
}
.pf-history-card:hover {
    transform: translateX(2px);
    border-left-color: var(--color-gold-light);
}
.pf-history-icon {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(var(--gold-rgb), 0.1);
    display: flex; align-items: center; justify-content: center;
    color: var(--color-gold-light);
    font-size: 0.72rem;
}
.pf-history-info {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
}
.pf-history-type {
    font-size: 0.65rem; color: var(--color-gold-light);
    font-weight: 600; line-height: 1.3;
}
.pf-history-question {
    font-size: 0.72rem; color: var(--color-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    line-height: 1.3;
}
.pf-history-time {
    font-size: 0.62rem; color: var(--color-muted);
    flex-shrink: 0; white-space: nowrap;
}
.pf-history-empty {
    text-align: center;
    padding: 1rem;
    color: var(--color-muted);
    font-size: 0.78rem;
}
.pf-history-view-all {
    display: block;
    text-align: center;
    padding: 0.5rem;
    margin-top: 0.4rem;
    border: 1px dashed var(--color-border);
    border-radius: 6px;
    background: none;
    color: var(--color-gold-light);
    font-size: 0.78rem;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}
.pf-history-view-all:hover {
    background: rgba(var(--gold-rgb), 0.06);
    border-color: var(--color-gold-dark);
}

/* ============================================
   22. 视频首屏 Splash + 体验功能区
   ============================================ */
.video-splash {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    /* 新增：内容整体上移（不贴左上角，仅较居中位置偏上） */
    padding-bottom: 14vh;
    overflow: hidden;
    background: #000;
}
.splash-video {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 海报帧（视频首帧截图）即时渲染，进站不再黑屏；
       poster 与视频首帧一致，起播切换无缝 */
    opacity: 1;
    z-index: 0;
    transition: opacity 0.8s ease;
}
.splash-video.video-ready {
    opacity: 1;
}
.splash-video-desktop { display: block; }
.splash-video-mobile { display: none; }
.splash-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* 视频（白底水墨）为浅色画面：左侧文字区加深，保证白字/金字可读 */
    background: linear-gradient(
        105deg,
        rgba(8, 8, 14, 0.62) 0%,
        rgba(8, 8, 14, 0.40) 32%,
        rgba(8, 8, 14, 0.14) 58%,
        rgba(8, 8, 14, 0.00) 100%
    );
}

/* 装饰性竖排文字 */
.splash-vert-text {
    position: absolute;
    z-index: 2;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Serif SC', serif;
    font-size: 0.85rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.28);
    letter-spacing: 0.3em;
    writing-mode: vertical-rl;
    text-orientation: upright;
    pointer-events: none;
    user-select: none;
}
.splash-vert-left {
    top: 50%;
    right: 4rem;
    transform: translateY(-50%);
}

/* 内容区域 */
.splash-content {
    position: relative;
    z-index: 2;
    text-align: left;
    padding: 0 3rem 0 6rem;
    max-width: 680px;
    opacity: 0;
    transition: opacity 0.6s ease;
}
.splash-content.content-show {
    opacity: 1;
}

/* 标题块 */
.splash-title-block {
    margin-bottom: 0;
}
.splash-title-en {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: #d9b968;
    letter-spacing: 0.45em;
    margin-bottom: 0.7rem;
    text-transform: uppercase;
    /* 白底视频上保证金字可读：深色描影 */
    text-shadow: 0 1px 2px rgba(10, 10, 16, 0.75), 0 2px 10px rgba(10, 10, 16, 0.5);
}
.splash-title {
    font-family: 'Noto Serif SC', serif;
    font-size: 5.6rem;
    font-weight: 700;
    color: #fff;
    /* 多层阴影：白底水墨视频上保持清晰（近距锐影 + 远距大晕） */
    text-shadow: 0 1px 2px rgba(10, 10, 16, 0.65), 0 3px 10px rgba(10, 10, 16, 0.55), 0 6px 32px rgba(10, 10, 16, 0.5);
    margin: 0;
    letter-spacing: 0.12em;
    line-height: 1.1;
}

/* 分隔线 */
.splash-divider {
    width: 58px;
    height: 1px;
    background: linear-gradient(to right, rgba(201, 169, 97, 0.8), rgba(201, 169, 97, 0));
    margin: 2rem 0;
}

.splash-tagline {
    font-family: 'Noto Serif SC', serif;
    font-size: 1.38rem;
    font-weight: 500;
    color: #ffffff;
    margin: 0 0 1rem;
    letter-spacing: 0.15em;
    text-shadow: 0 1px 2px rgba(10, 10, 16, 0.7), 0 2px 12px rgba(10, 10, 16, 0.55);
}
.splash-desc {
    font-family: 'Noto Serif SC', serif;
    font-size: 1.1rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.96);
    line-height: 2;
    margin: 0 0 3rem;
    letter-spacing: 0.08em;
    text-shadow: 0 1px 2px rgba(10, 10, 16, 0.7), 0 2px 10px rgba(10, 10, 16, 0.5);
}

/* 按钮：极简文字 + 动态横线 */
.splash-cta {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    background: none;
    border: none;
    border-radius: 0;
    color: rgba(255, 255, 255, 0.88);
    font-weight: 400;
    font-size: 1.15rem;
    cursor: pointer;
    padding: 0.5rem 0;
    transition: color 0.3s ease;
    font-family: 'Noto Serif SC', serif;
    letter-spacing: 0.2em;
    box-shadow: none;
    text-decoration: none;
}
.splash-cta:hover {
    color: #fff;
}
.splash-cta-text {
    position: relative;
    display: inline-block;
}
.splash-cta-text::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.5);
    transform: scaleX(0.5);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}
.splash-cta:hover .splash-cta-text::after {
    transform: scaleX(1);
    background: rgba(201, 169, 97, 0.9);
}
.splash-cta-line {
    display: inline-block;
    width: 32px;
    height: 1px;
    background: rgba(255, 255, 255, 0.45);
    transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}
.splash-cta:hover .splash-cta-line {
    width: 52px;
    background: rgba(201, 169, 97, 0.9);
}

/* 右下角装饰 */
.splash-corner-mark {
    position: absolute;
    bottom: 3rem;
    right: 3.5rem;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    pointer-events: none;
    user-select: none;
}
.splash-corner-mark .corner-line {
    display: block;
    width: 36px;
    height: 1px;
    background: rgba(201, 169, 97, 0.4);
}
.splash-corner-mark .corner-text {
    font-family: 'Noto Serif SC', serif;
    font-size: 0.78rem;
    font-weight: 400;
    color: rgba(201, 169, 97, 0.55);
    letter-spacing: 0.2em;
}

/* 下滑提示：极简「细线 + 流光」——无底衬，靠底部渐晕与描影保证可读 */
.splash-scroll-hint {
    position: absolute;
    bottom: 2.2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Noto Serif SC', serif;
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.94);
    letter-spacing: 0.42em;
    padding-left: 0.42em; /* 字距导致末字右侧多出空隙，补齐做光学居中 */
    pointer-events: none;
    user-select: none;
    /* 白底水墨视频上保证可读：深色描影（与其他首屏文字同族） */
    text-shadow: 0 1px 2px rgba(10, 10, 16, 0.85), 0 2px 10px rgba(10, 10, 16, 0.6);
}
.splash-scroll-hint .scroll-line {
    position: relative;
    width: 1px;
    height: 44px;
    margin-top: 0.75rem;
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.9) 0%,
        rgba(255, 255, 255, 0.28) 68%,
        rgba(255, 255, 255, 0) 100%
    );
}
/* 流光点：沿线匀速下落，白光芯 + 淡金晕，呼应站内金色点缀 */
.splash-scroll-hint .scroll-line::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 3px;
    height: 12px;
    border-radius: 999px;
    background: #fff;
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.95)) drop-shadow(0 0 10px rgba(201, 169, 97, 0.5));
    animation: scrollDotDrop 2.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes scrollDotDrop {
    0%   { top: -14px; opacity: 0; }
    18%  { opacity: 1; }
    70%  { opacity: 1; }
    100% { top: calc(100% + 2px); opacity: 0; }
}
/* 新增：首屏底部渐晕，保证下滑提示的对比度（不改变整体亮度观感） */
.video-splash::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 26vh;
    min-height: 170px;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.28) 45%, rgba(0, 0, 0, 0.58) 100%);
    z-index: 1;
    pointer-events: none;
}

/* ===== 体验功能区 ===== */
.experience-section {
    padding: 5rem 0 4rem;
    background: #f5f5f0;
    width: 100%;
}
.exp-section-header {
    text-align: center;
    margin-bottom: 3rem;
    padding: 0 2rem;
}
.exp-section-label {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 0.7rem;
    font-weight: 400;
    color: rgba(201, 169, 97, 0.6);
    letter-spacing: 0.4em;
    margin-bottom: 0.6rem;
}
.exp-section-title {
    font-family: 'Noto Serif SC', serif;
    font-size: 2rem;
    font-weight: 700;
    color: #2a2a2a;
    margin: 0 0 0.6rem;
    letter-spacing: 0.08em;
}
.exp-section-desc {
    font-size: 0.88rem;
    color: #888;
    letter-spacing: 0.05em;
}
.exp-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
}
.exp-card {
    display: flex;
    flex-direction: column;
    padding: 2.2rem 2rem;
    background: #ffffff;
    border: 1px solid #e8e8e3;
    border-radius: 12px;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
    /* 滚动入场动画 */
    opacity: 0;
    transform: translateY(40px);
}
.exp-card.exp-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.exp-card:nth-child(2).exp-visible {
    transition-delay: 0.15s;
}
.exp-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px;
    height: 100%;
    background: var(--color-gold);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.exp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border-color: rgba(201, 169, 97, 0.3);
}
.exp-card:hover::before {
    opacity: 1;
}
.exp-card-icon {
    font-size: 1.8rem;
    color: #b8941e;
    margin-bottom: 1.2rem;
}
.exp-card-en {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 0.65rem;
    font-weight: 400;
    color: rgba(201, 169, 97, 0.6);
    letter-spacing: 0.3em;
    margin-bottom: 0.3rem;
}
.exp-card-name {
    font-family: 'Noto Serif SC', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: #2a2a2a;
    margin: 0 0 0.8rem;
    letter-spacing: 0.05em;
}
.exp-card-text {
    font-size: 0.85rem;
    color: #777;
    line-height: 1.7;
    margin: 0 0 1.5rem;
    flex-grow: 1;
}
.exp-card-cta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: #b8941e;
    letter-spacing: 0.1em;
    font-weight: 500;
}
.exp-card-cta i {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}
.exp-card:hover .exp-card-cta i {
    transform: translateX(4px);
}

/* ===== 新增：注册/登录引导（金色入口） ===== */
.exp-register-cta {
    text-align: center;
    margin-top: 2.8rem;
    padding: 0 2rem;
}
.exp-register-text {
    font-family: 'Noto Serif SC', serif;
    font-size: 1.05rem;
    font-weight: 500;
    color: #666;
    letter-spacing: 0.06em;
    margin: 0;
}
.exp-register-link {
    color: var(--color-gold, #b8941e);
    font-weight: 700;
    font-size: 1.12rem;
    text-decoration: none;
    letter-spacing: 0.06em;
    border-bottom: 1px solid rgba(201, 169, 97, 0.45);
    padding-bottom: 2px;
    transition: color 0.3s ease, border-color 0.3s ease;
}
.exp-register-link:hover,
.exp-register-link:active {
    color: #96780f;
    border-color: rgba(150, 120, 15, 0.7);
}

/* 移动端 splash */
@media (max-width: 768px) {
    .splash-video-desktop { display: none; }
    .splash-video-mobile { display: block; }
    .video-splash {
        align-items: center;
        justify-content: center;
    }
    .splash-overlay {
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.38) 0%,
            rgba(0, 0, 0, 0.16) 40%,
            rgba(0, 0, 0, 0.44) 100%
        );
    }
    .splash-vert-left { display: none; }
    .splash-content {
        text-align: center;
        padding: 0 2rem;
        max-width: 420px;
    }
    .splash-title-block {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .splash-divider {
        margin-left: auto;
        margin-right: auto;
    }
    .splash-title { font-size: 3.5rem; }
    .splash-tagline { font-size: 1.15rem; }
    .splash-desc { font-size: 0.95rem; }
    .splash-corner-mark {
        /* 上移避开居中的下滑提示（提示整体高约 100px） */
        bottom: 8.5rem;
        right: 50%;
        transform: translateX(50%);
    }
    .experience-section {
        padding: 3rem 1.2rem 2.5rem;
    }
    .exp-cards {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .exp-section-title { font-size: 1.6rem; }
    .exp-card { padding: 1.8rem 1.5rem; }
}
/* ============================================
   起卦动画 · 收束态（2026-09 优化）
   导航提交瞬间动画化入静场：场景沉隐为底（保留
   缓转的底韵），文案沉稳呼吸，其下亮起一条
   持续流光的收束线 —— 等待响应期间画面始终
   「有生命」，消除「跑完变一根静止细线、
   卡住等跳转」的观感
   ============================================ */
.cast-overlay.cast-settled .cast-anim {
    opacity: 0.35;
    transform: scale(0.97);
    transition: opacity .55s ease .08s, transform .55s ease .08s;
    pointer-events: none;
}
.cast-overlay.cast-settled .cast-text {
    animation: castTextSettle 2.2s ease-in-out infinite;
}
.cast-overlay.cast-settled .cast-subtext { opacity: .92; }
/* 流光收束线：先划出成形，再持续流光往复，示意推演进行中 */
.cast-settle-line {
    width: 168px;
    height: 2px;
    border-radius: 2px;
    margin-top: -1.1rem;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(var(--accent-rgb), .9) 50%,
        transparent 100%);
    background-size: 200% 100%;
    opacity: 0;
    animation:
        castSettleLineIn .5s ease .15s forwards,
        castSettleLineSweep 1.5s linear .7s infinite;
}
@keyframes castTextSettle {
    0%, 100% { opacity: .72; }
    50% { opacity: 1; }
}
@keyframes castSettleLineIn { to { opacity: 1; } }
@keyframes castSettleLineSweep {
    from { background-position: 100% 0; }
    to { background-position: 0% 0; }
}
/* 减少动态效果偏好：收束线只保留静态微光，不做流光扫动 */
@media (prefers-reduced-motion: reduce) {
    .cast-settle-line { animation: castSettleLineIn .3s ease forwards; }
}

/* ============================================
   落墨成爻（六爻 · 手动输入 / 直接排卦，2026-08）
   笔锋起势 → 六爻自下而上落墨（阳爻整笔、阴爻两段）
   → 朱金印钤「卦成」。全程米金墨韵，宣纸留白。
   ============================================ */
.cast-yink {
    position: relative;
    width: 210px;
    height: 232px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cast-yink-paper {
    position: absolute;
    inset: 10px 28px;
    background:
        radial-gradient(ellipse at 50% 38%, rgba(232,199,126,.06), transparent 72%),
        linear-gradient(180deg, transparent 0%, rgba(232,199,126,.025) 50%, transparent 100%);
}
.cast-yink-mist {
    position: absolute;
    inset: -12px;
    background: radial-gradient(circle at 50% 55%, rgba(201,169,97,.16), transparent 62%);
    filter: blur(7px);
    animation: castYinkMist 2.4s ease both;
}
@keyframes castYinkMist {
    0% { opacity: 0; transform: scale(.72); }
    42% { opacity: 1; }
    100% { opacity: .5; transform: scale(1.1); }
}
.cast-yink-brush {
    position: absolute;
    top: 6px;
    left: 50%;
    width: 3px;
    height: 58px;
    background: linear-gradient(180deg, transparent, rgba(232,199,126,.92));
    filter: blur(.4px);
    border-radius: 2px;
    opacity: 0;
    animation: castYinkBrush .95s ease .12s both;
}
@keyframes castYinkBrush {
    0% { opacity: 0; transform: translate(-50%, -8px) scaleY(.35); }
    30% { opacity: .95; }
    100% { opacity: 0; transform: translate(-50%, 118px) scaleY(1); }
}
.cast-yink-lines {
    position: relative;
    display: flex;
    flex-direction: column-reverse;
    gap: 13px;
    z-index: 2;
}
.cast-yink-yao {
    display: flex;
    gap: 15px;
    animation: castYinkYaoIn .5s cubic-bezier(.2,.8,.25,1) both;
    animation-delay: calc(.58s + var(--yk-idx) * .18s);
}
.cast-yink-stroke {
    position: relative;
    width: 76px;
    height: 9px;
    border-radius: 50% / 62%;
    background: linear-gradient(180deg, rgba(232,199,126,.96), rgba(201,169,97,.5));
    box-shadow: 0 0 10px rgba(201,169,97,.28);
}
.cast-yink-half { width: 30px; }
@keyframes castYinkYaoIn {
    0% { opacity: 0; filter: blur(3px); transform: scaleX(.32); }
    62% { filter: blur(0); }
    100% { opacity: 1; filter: blur(0); transform: scaleX(1); }
}
.cast-yink-seal {
    position: absolute;
    right: -4px;
    bottom: 0;
    padding: 5px 8px;
    border: 1.5px solid rgba(186,84,72,.88);
    color: rgba(219,104,92,.96);
    font-family: var(--font-display, serif);
    font-size: .82rem;
    letter-spacing: .2em;
    text-indent: .2em;
    border-radius: 3px;
    background: rgba(186,84,72,.08);
    box-shadow: inset 0 0 9px rgba(186,84,72,.28), 0 0 16px rgba(186,84,72,.14);
    opacity: 0;
    animation: castYinkSeal .45s cubic-bezier(.34,1.56,.64,1) 1.82s both;
}
@keyframes castYinkSeal {
    0% { opacity: 0; transform: rotate(-15deg) scale(1.9); }
    62% { opacity: 1; transform: rotate(-4deg) scale(.94); }
    100% { opacity: 1; transform: rotate(-4deg) scale(1); }
}

/* ============================================
   梅花易数（六爻 · 时间/数字/物象/声音起卦，2026-08）
   梅枝斜出 → 五瓣次第绽 → 八卦符环缓转 → 花心凝韵
   暗金色调、写意留白，去工业化转圈感
   ============================================ */
.cast-mh {
    position: relative;
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cast-mh-ring {
    position: absolute;
    inset: 14px;
    border-radius: 50%;
    border: 1px solid rgba(var(--accent-rgb), .13);
    animation: hexRingRotate 15s linear infinite;
}
.cast-mh-ring::before {
    content: '';
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    border: 1px dashed rgba(var(--accent-rgb), .1);
}
.cast-mh-glyphs {
    position: absolute;
    inset: 0;
    animation: castMhSpin 26s linear infinite;
}
.cast-mh-glyphs span {
    position: absolute;
    left: 50%;
    top: 50%;
    color: rgba(232,199,126,.62);
    font-size: .92rem;
    text-shadow: 0 0 9px rgba(201,169,97,.32);
    animation: castMhGlyph 1.6s ease both;
}
@keyframes castMhSpin { to { transform: rotate(360deg); } }
@keyframes castMhGlyph { from { opacity: 0; } to { opacity: 1; } }
.cast-mh-branch {
    position: absolute;
    left: 18%;
    top: 27%;
    width: 62%;
    height: 2px;
    background: linear-gradient(90deg, rgba(146,120,82,0), rgba(146,120,82,.78));
    border-radius: 1px;
    transform-origin: left center;
    animation: castMhBranch 1.05s cubic-bezier(.3,.7,.25,1) .16s both;
}
.cast-mh-branch::before {
    content: '';
    position: absolute;
    left: 46%;
    top: 0;
    width: 30%;
    height: 1.5px;
    background: rgba(146,120,82,.6);
    transform-origin: left center;
    transform: rotate(28deg);
}
.cast-mh-branch::after {
    content: '';
    position: absolute;
    left: 72%;
    top: -1px;
    width: 18%;
    height: 1.5px;
    background: rgba(146,120,82,.5);
    transform-origin: left center;
    transform: rotate(-34deg);
}
@keyframes castMhBranch {
    from { transform: rotate(-17deg) scaleX(0); opacity: 0; }
    to { transform: rotate(-17deg) scaleX(1); opacity: 1; }
}
.cast-mh-petals { position: absolute; left: 50%; top: 50%; }
.cast-mh-petal {
    position: absolute;
    left: 0;
    top: 0;
    width: 15px;
    height: 27px;
    margin: -13.5px 0 0 -7.5px;
    border-radius: 52% 48% 50% 50% / 78% 78% 30% 30%;
    background: radial-gradient(ellipse at 50% 22%, rgba(240,214,150,.9), rgba(201,169,97,.4) 62%, transparent 78%);
    box-shadow: 0 0 9px rgba(201,169,97,.32);
    opacity: 0;
    animation: castMhPetal .55s cubic-bezier(.34,1.35,.5,1) calc(.88s + var(--mh-idx) * .16s) both;
}
@keyframes castMhPetal {
    0% { opacity: 0; transform: rotate(calc(var(--mh-idx) * 72deg)) translateY(-3px) scale(.06); }
    100% { opacity: 1; transform: rotate(calc(var(--mh-idx) * 72deg)) translateY(-14px) scale(1); }
}
.cast-mh-core {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 11px;
    height: 11px;
    margin: -5.5px 0 0 -5.5px;
    border-radius: 50%;
    background: radial-gradient(circle, #F0D696, rgba(201,169,97,.42) 68%, transparent);
    box-shadow: 0 0 20px rgba(201,169,97,.58);
    animation: castMhCore 2.5s ease .2s both;
}
@keyframes castMhCore {
    0% { opacity: 0; transform: scale(.2); }
    42% { opacity: 1; transform: scale(1.28); }
    58% { transform: scale(1); }
    100% { opacity: 1; transform: scale(1); }
}
.cast-mh-fall {
    position: absolute;
    width: 7px;
    height: 10px;
    border-radius: 58% 42% 55% 45%;
    background: rgba(232,199,126,.5);
    left: calc(26% + var(--mf-idx) * 13%);
    top: 18%;
    opacity: 0;
    animation: castMhFall 2.3s ease-in calc(1.05s + var(--mf-idx) * .34s) infinite;
}
@keyframes castMhFall {
    0% { opacity: 0; transform: translateY(0) rotate(0deg); }
    14% { opacity: .82; }
    100% { opacity: 0; transform: translateY(122px) rotate(165deg); }
}

/* 移动端微调 */
@media (max-width: 768px) {
    .cast-yink { width: 186px; height: 210px; }
    .cast-yink-stroke { width: 64px; }
    .cast-yink-half { width: 25px; }
    .cast-yink-lines { gap: 11px; }
    .cast-mh { width: 196px; height: 196px; }
    .cast-mh-glyphs span { font-size: .8rem; }
}


/* ================= 多语言 i18n（中文 / English） ================= */
/* 顶栏语言切换按钮（原古籍按钮位）：文字码替代图标，直示切换目标
   中文态显示「EN」，英文态显示「ZH」（ISO 代码，英文态零 CJK 字符） */
.zwg-lang-btn { font-family: var(--font-display); font-weight: 700; }
.zwg-lang-btn .zwg-lang-code {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    line-height: 1;
}
.zwg-lang-btn:active .zwg-lang-code { transform: scale(0.92); }

/* gate（登录注册）/ landing（落地页）无顶栏：右上角浮动语言切换，
   与顶栏按钮同款观感，保证任何界面都可随时切换语言 */
.zwg-lang-fab {
    position: fixed;
    top: 14px;
    right: 14px;
    z-index: 9990;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: rgba(var(--surface-darker-rgb, 10, 10, 15), 0.72);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-gold-light, #E8C77E);
    font-family: var(--font-display);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: all var(--transition);
}
.zwg-lang-fab:hover, .zwg-lang-fab:active {
    border-color: var(--color-gold);
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.2);
    color: var(--color-gold-light);
}
.zwg-lang-fab:active { transform: scale(0.94); }

/* ============================================================
   明色主题通用覆盖层：太极水墨 / 朱砂宣纸
   全站各功能页存在大量"暗底浅字"硬编码（PHP 内联色与页面级
   组件色），此处按色系统一压深为彩墨色，一套规则服务两套明色主题。
   深底组件（fengshui 罗盘 / zhiji 觉醒层 / gate 封禁弹窗 /
   western 行星底圆）自带深色背景，不受本层影响或单独恢复。
   ============================================================ */

/* --- 1. 四化色（内联）：禄绿/权蓝/科紫/忌红 → 深彩墨 --- */
html[data-theme="taiji"] [style*="color:#22CC44"],
html[data-theme="zhusha"] [style*="color:#22CC44"] { color: #1F8A3D !important; }
html[data-theme="taiji"] [style*="color:#4488FF"],
html[data-theme="zhusha"] [style*="color:#4488FF"] { color: #2F63C4 !important; }
html[data-theme="taiji"] [style*="color:#BB55BB"],
html[data-theme="zhusha"] [style*="color:#BB55BB"] { color: #8E3E8E !important; }
html[data-theme="taiji"] [style*="color:#FF4444"],
html[data-theme="zhusha"] [style*="color:#FF4444"] { color: #C03A3A !important; }

/* --- 2. 星曜亮度色（内联）：庙/旺/得/利/平/陷/不 --- */
html[data-theme="taiji"] [style*="color:#FFD700"],
html[data-theme="zhusha"] [style*="color:#FFD700"] { color: #A98200 !important; }
html[data-theme="taiji"] [style*="color:#88CC44"],
html[data-theme="zhusha"] [style*="color:#88CC44"] { color: #5E8A22 !important; }
html[data-theme="taiji"] [style*="color:#88AACC"],
html[data-theme="zhusha"] [style*="color:#88AACC"] { color: #4A6E8F !important; }
html[data-theme="taiji"] [style*="color:#999999"],
html[data-theme="zhusha"] [style*="color:#999999"] { color: #6B6B6B !important; }
html[data-theme="taiji"] [style*="color:#CC6644"],
html[data-theme="zhusha"] [style*="color:#CC6644"] { color: #A8522E !important; }

/* --- 3. 金系浅色（内联）：#E8C77E/#DDAA44/#C9A961/#E8C84B → 深金墨 --- */
html[data-theme="taiji"] [style*="color:#E8C77E"],
html[data-theme="zhusha"] [style*="color:#E8C77E"],
html[data-theme="taiji"] [style*="color:#DDAA44"],
html[data-theme="zhusha"] [style*="color:#DDAA44"],
html[data-theme="taiji"] [style*="color:#C9A961"],
html[data-theme="zhusha"] [style*="color:#C9A961"],
html[data-theme="taiji"] [style*="color:#E8C84B"],
html[data-theme="zhusha"] [style*="color:#E8C84B"] { color: #8C6D1F !important; }

/* --- 4. 五行浅色（内联）：木/水/火/土 --- */
html[data-theme="taiji"] [style*="color:#7FD8A4"],
html[data-theme="zhusha"] [style*="color:#7FD8A4"] { color: #2D8B57 !important; }
html[data-theme="taiji"] [style*="color:#7EB8E8"],
html[data-theme="zhusha"] [style*="color:#7EB8E8"] { color: #4A6E8F !important; }
html[data-theme="taiji"] [style*="color:#E87E7E"],
html[data-theme="zhusha"] [style*="color:#E87E7E"] { color: #C03A3A !important; }
html[data-theme="taiji"] [style*="color:#C9A06B"],
html[data-theme="zhusha"] [style*="color:#C9A06B"] { color: #8C6D1F !important; }

/* --- 5. 状态浅色（内联）：浅绿/浅红/浅紫 --- */
html[data-theme="taiji"] [style*="color:#8FD49A"],
html[data-theme="zhusha"] [style*="color:#8FD49A"],
html[data-theme="taiji"] [style*="color:#8AC78A"],
html[data-theme="zhusha"] [style*="color:#8AC78A"],
html[data-theme="taiji"] [style*="color:#66BB6A"],
html[data-theme="zhusha"] [style*="color:#66BB6A"] { color: #2D8B57 !important; }
html[data-theme="taiji"] [style*="color:#E09090"],
html[data-theme="zhusha"] [style*="color:#E09090"],
html[data-theme="taiji"] [style*="color:#E08A8A"],
html[data-theme="zhusha"] [style*="color:#E08A8A"] { color: #C03A3A !important; }
html[data-theme="taiji"] [style*="color:#ab47bc"],
html[data-theme="zhusha"] [style*="color:#ab47bc"],
html[data-theme="taiji"] [style*="color:#AB47BC"],
html[data-theme="zhusha"] [style*="color:#AB47BC"] { color: #8E3E8E !important; }

/* --- 6. 深底弹窗恢复：gate 封禁弹窗自带深色底，浅色字保持原样 --- */
html[data-theme="taiji"] #ban-modal-box [style*="color:#E09090"],
html[data-theme="zhusha"] #ban-modal-box [style*="color:#E09090"] { color: #E09090 !important; }
html[data-theme="taiji"] #ban-modal-box [style*="color:#C9A961"],
html[data-theme="zhusha"] #ban-modal-box [style*="color:#C9A961"] { color: #C9A961 !important; }
html[data-theme="taiji"] #ban-modal-box [style*="color:#8FD49A"],
html[data-theme="zhusha"] #ban-modal-box [style*="color:#8FD49A"] { color: #8FD49A !important; }

/* --- 7. 紫微命盘通用组件（ziwei / history_detail / mlhc_render 三处同款） --- */
/* 箭头筛选圆钮（禄权科忌） */
html[data-theme="taiji"] .zw-filter-btn[data-hua="lu"],
html[data-theme="zhusha"] .zw-filter-btn[data-hua="lu"]   { color: #1F8A3D; border-color: rgba(31,138,61,.45); }
html[data-theme="taiji"] .zw-filter-btn[data-hua="quan"],
html[data-theme="zhusha"] .zw-filter-btn[data-hua="quan"] { color: #2F63C4; border-color: rgba(47,99,196,.45); }
html[data-theme="taiji"] .zw-filter-btn[data-hua="ke"],
html[data-theme="zhusha"] .zw-filter-btn[data-hua="ke"]   { color: #8E3E8E; border-color: rgba(142,62,142,.45); }
html[data-theme="taiji"] .zw-filter-btn[data-hua="ji"],
html[data-theme="zhusha"] .zw-filter-btn[data-hua="ji"]   { color: #C03A3A; border-color: rgba(192,58,58,.45); }
/* 宫位辅助信息行 */
html[data-theme="taiji"] .zw-grid-view .palace-meta,
html[data-theme="zhusha"] .zw-grid-view .palace-meta { border-bottom-color: rgba(0,0,0,0.12); }
html[data-theme="taiji"] .zw-grid-view .palace-meta .meta-cs,
html[data-theme="zhusha"] .zw-grid-view .palace-meta .meta-cs { color: #A67C1E; }
html[data-theme="taiji"] .zw-grid-view .palace-meta .meta-xx,
html[data-theme="zhusha"] .zw-grid-view .palace-meta .meta-xx { color: #4A6E8F; }
html[data-theme="taiji"] .zw-grid-view .palace-meta .meta-kw,
html[data-theme="zhusha"] .zw-grid-view .palace-meta .meta-kw { color: #B84A2E; background: rgba(192,58,58,.08); }
/* 辅星星名浅灰 */
html[data-theme="taiji"] .zw-grid-view .star-row.aux .star-name,
html[data-theme="zhusha"] .zw-grid-view .star-row.aux .star-name { color: #8A8580; }
/* 三合视图宫名配色 */
html[data-theme="taiji"] .zw-grid-view[data-view="sanhe"] .ziwei-palace[data-sanhe="0"] .palace-name,
html[data-theme="zhusha"] .zw-grid-view[data-view="sanhe"] .ziwei-palace[data-sanhe="0"] .palace-name { color: #C03A3A; }
html[data-theme="taiji"] .zw-grid-view[data-view="sanhe"] .ziwei-palace[data-sanhe="1"] .palace-name,
html[data-theme="zhusha"] .zw-grid-view[data-view="sanhe"] .ziwei-palace[data-sanhe="1"] .palace-name { color: #2F63C4; }
html[data-theme="taiji"] .zw-grid-view[data-view="sanhe"] .ziwei-palace[data-sanhe="2"] .palace-name,
html[data-theme="zhusha"] .zw-grid-view[data-view="sanhe"] .ziwei-palace[data-sanhe="2"] .palace-name { color: #1F8A3D; }
html[data-theme="taiji"] .zw-grid-view[data-view="sanhe"] .ziwei-palace[data-sanhe="3"] .palace-name,
html[data-theme="zhusha"] .zw-grid-view[data-view="sanhe"] .ziwei-palace[data-sanhe="3"] .palace-name { color: #8E3E8E; }
/* 点选联动高亮 */
html[data-theme="taiji"] .zw-grid-view .ziwei-palace.palace-focus,
html[data-theme="zhusha"] .zw-grid-view .ziwei-palace.palace-focus {
    background: rgba(140,109,31,.10);
    border-color: rgba(140,109,31,.85);
    box-shadow: inset 0 0 0 1.5px rgba(140,109,31,.7), 0 0 18px rgba(140,109,31,.22);
}
html[data-theme="taiji"] .zw-grid-view .ziwei-palace.palace-sanfang,
html[data-theme="zhusha"] .zw-grid-view .ziwei-palace.palace-sanfang {
    background: rgba(107,78,158,.09);
    border-color: rgba(107,78,158,.65);
    box-shadow: inset 0 0 0 1px rgba(107,78,158,.45);
}
html[data-theme="taiji"] .zw-grid-view .ziwei-palace.palace-duigong,
html[data-theme="zhusha"] .zw-grid-view .ziwei-palace.palace-duigong {
    background: rgba(46,95,143,.08);
    border-color: rgba(46,95,143,.6);
    box-shadow: inset 0 0 0 1px rgba(46,95,143,.4);
}
html[data-theme="taiji"] .zw-grid-view .ziwei-palace.palace-focus::after,
html[data-theme="zhusha"] .zw-grid-view .ziwei-palace.palace-focus::after { background: rgba(140,109,31,.92); color: #FFFDF5; }
html[data-theme="taiji"] .zw-grid-view .ziwei-palace.palace-sanfang::after,
html[data-theme="zhusha"] .zw-grid-view .ziwei-palace.palace-sanfang::after { background: rgba(107,78,158,.88); color: #FFFDF5; }
html[data-theme="taiji"] .zw-grid-view .ziwei-palace.palace-duigong::after,
html[data-theme="zhusha"] .zw-grid-view .ziwei-palace.palace-duigong::after { background: rgba(46,95,143,.88); color: #FFFDF5; }
/* 四化视图金色高亮 */
html[data-theme="taiji"] .zw-grid-view[data-view="sihua"] .star-row.has-hua,
html[data-theme="zhusha"] .zw-grid-view[data-view="sihua"] .star-row.has-hua {
    background: rgba(140,109,31,.14);
    box-shadow: 0 0 4px rgba(140,109,31,.18);
}
html[data-theme="taiji"] .zw-grid-view[data-view="sihua"] .ziwei-palace:has(.star-row.has-hua),
html[data-theme="zhusha"] .zw-grid-view[data-view="sihua"] .ziwei-palace:has(.star-row.has-hua) {
    border-color: rgba(140,109,31,.45);
}

/* ============================================================
   ZW-HOME · 首页编辑式排版（zw-home 命名空间，与紫微 zw-grid-view 无关）
   布局语言：非对称 Hero / 锚点门类导航 / 编号分区 / 黄历条式运势
   全部走主题变量，五主题（知微金/太极/朱砂/紫微/玄机/鎏金）自动适配
   ============================================================ */

/* ---- 进场动画（JS 不到达时元素保持可见） ---- */
.zw-reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease-out-expo), transform .7s var(--ease-out-expo); }
.zw-reveal.in { opacity: 1; transform: none; }
html:not(.page-ready) .zw-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .zw-reveal { opacity: 1; transform: none; transition: none; }
}

/* ============================================
   HERO · 非对称编辑式排版
   ============================================ */
.zw-hero {
    position: relative;
    padding: 1.9rem 0 1.4rem;
    overflow: hidden;
}
/* 背景巨字水印 */
.zw-hero-mark {
    position: absolute;
    top: -0.35em;
    right: -0.18em;
    font-family: var(--font-display);
    font-size: clamp(11rem, 38vw, 22rem);
    line-height: 1;
    color: var(--color-gold);
    opacity: 0.08;
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.zw-hero-inner {
    position: relative;
    z-index: 1;
}
.zw-hero-main { max-width: 640px; }

.zw-hero-kicker {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    color: var(--color-muted);
    margin-bottom: 1.1rem;
}
.zw-kicker-rule {
    width: 42px;
    height: 1px;
    background: linear-gradient(90deg, var(--color-gold), transparent);
    flex-shrink: 0;
}
/* 手机端隐藏英文眉题（全大写拉丁字与中文语境割裂），768px 起恢复 */
.zw-kicker-en { display: none; }
.zw-hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.3rem, 9vw, 3.4rem);
    line-height: 1.18;
    letter-spacing: 0.04em;
    color: var(--color-text);
    margin: 0 0 0.9rem;
}
.zw-hero-title em {
    font-style: normal;
    color: var(--color-gold);
    position: relative;
    padding: 0 0.06em;
}
.zw-hero-title em::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0.08em;
    height: 0.14em;
    background: rgba(var(--accent-rgb), 0.22);
    z-index: -1;
}
/* 手机端去掉色块衬底（小字号下显脏），768px 起恢复 */
.zw-hero-title em::after { display: none; }
.zw-hero-quote {
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--color-text);
    opacity: 0.85;
    letter-spacing: 0.06em;
    margin: 0 0 0.35rem;
}
.zw-hero-quote span {
    font-size: 0.74rem;
    color: var(--color-muted);
    letter-spacing: 0.08em;
}
.zw-hero-desc {
    font-size: 0.85rem;
    color: var(--color-muted);
    letter-spacing: 0.04em;
    margin: 0 0 1.35rem;
}

/* CTA 按钮组 */
.zw-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    align-items: center;
}
.zw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.68rem 1.35rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    cursor: pointer;
    border-radius: var(--radius-sm);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    text-decoration: none;
    transition: all 0.25s var(--ease-out-expo);
}
.zw-btn i { font-size: 0.85em; }
.zw-btn-solid {
    background: linear-gradient(180deg, var(--color-gold-light), var(--color-gold));
    border: 1px solid var(--color-gold-dark);
    color: #14100A;
    font-weight: 600;
}
.zw-btn-solid:hover, .zw-btn-solid:active {
    box-shadow: 0 4px 22px rgba(var(--accent-rgb), 0.35);
    transform: translateY(-1px);
}
.zw-btn-line {
    background: rgba(var(--surface-rgb), 0.5);
    border: 1px solid rgba(var(--gold-rgb), 0.35);
    color: var(--color-gold-light);
}
.zw-btn-line:hover, .zw-btn-line:active {
    border-color: rgba(var(--gold-rgb), 0.7);
    background: rgba(var(--surface-rgb), 0.85);
}
/* 手机端：仅保留一枚通栏主按钮（次级锚点指向紧随其后的六宫格，滚动目标已可见） */
.zw-hero-cta .zw-btn-line { display: none; }
/* 自适应宽文字钮：全宽块状 CTA 是广告落地页惯例；小尺寸 + 宽字距
   「入阁」二字典籍题签式，text-indent 补偿字距尾空保持光学居中 */
.zw-hero-cta .zw-btn-solid {
    width: auto;
    padding: 0.85rem 1.55rem;
    letter-spacing: 0.32em;
    text-indent: 0.32em;
}

/* 右侧竖排装饰 + 印章徽记（手机端仅显徽记，桌面端全量竖排装饰） */
.zw-hero-side {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.2rem;
}
.zw-hero-vert {
    display: none;
    writing-mode: vertical-rl;
    font-family: var(--font-body);
    font-size: 0.72rem;
    letter-spacing: 0.55em;
    color: var(--color-gold);
    opacity: 0.8;
}
.zw-hero-bridge { display: none; }
.zw-hero-vert-dim { opacity: 0.38; color: var(--color-muted); }
/* 英文态：竖排装饰字降字距（中文 0.55em 对拉丁字母过宽，旋转后排布失衡） */
html[lang="en"] .zw-hero-vert { letter-spacing: 0.22em; }
.zw-emblem {
    position: relative;
    padding: 14px;
    flex-shrink: 0;
}
/* 缓转虚线金环（罗盘意象，环绕徽记） */
.zw-emblem-ring {
    position: absolute;
    inset: -13px;
    border: 1px dashed rgba(var(--gold-rgb), 0.38);
    border-radius: 50%;
    animation: zwRingSpin 60s linear infinite;
    pointer-events: none;
}
@keyframes zwRingSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .zw-emblem-ring { animation: none; }
}
.zw-emblem .hero-logo {
    margin: 0;
    width: 92px;
    height: 92px;
}
.zw-emblem-corner {
    display: none;
    position: absolute;
    width: 18px;
    height: 18px;
    border: 0 solid rgba(var(--gold-rgb), 0.75);
}
.zw-ec-tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.zw-ec-tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.zw-ec-bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.zw-ec-br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

/* 手机端徽记 = 出血图腾（杂志封面式）：放大至 260px、右缘出血约 1/3、
   沉于文字层后与标题/引文交叠；玄字水印同时隐去（右缘避免双出血元素打架）。
   Hero 以负外距撑满屏宽，令裁切线贴合屏幕物理边缘。
   注意：本块必须置于 .hero-logo / .zw-emblem-ring 基础规则之后（同优先级后者胜出）。
   1024px 起恢复全量（居中 + 竖排装饰 + 旋转环 + 四角定位框 + 玄水印）。 */
@media (max-width: 1023px) {
    .zw-hero { margin-inline: -1rem; padding-inline: 1rem; }
    .zw-hero-mark { display: none; }
    .zw-hero-side {
        position: absolute;
        top: -4.6rem;
        right: -6.9rem;
        z-index: -1;
        margin: 0;
        pointer-events: none;
    }
    .zw-emblem { padding: 0; }
    /* 图腾 = 清晰暗纹：0.4 过隐（品牌资产不可辨），0.92 过实（金属感满溢）；
       0.7 + 轻降饱和为平衡点——图腾可辨、金色让位文字层，
       左缘渐隐与文字投影保证交叠区可读 */
    .zw-emblem .hero-logo {
        width: 260px; height: 260px;
        opacity: 0.7;
        filter: saturate(0.85) brightness(0.95);
        /* 左缘渐隐：圆弧自背景晕出而非硬切浮空；交叠的标题尾/引文/描述
           落在 ≤0.4 alpha 渐隐区，可读性无虞；右缘保持硬出血贴屏幕边缘 */
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.4) 18%, #000 40%);
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.4) 18%, #000 40%);
    }
    .zw-emblem-ring { display: none; }
    /* 交叠区文字轻投影保险（深底上不可见，仅在压到徽记金饰时提供分离度） */
    .zw-hero-quote, .zw-hero-desc { text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); }
}
/* 手机竖屏 CTA = 门牌式通栏：全宽细线框 + 二字超宽字距居中。
   「入阁」即阁之门——匾额/门楣意象（通栏实心金块是广告落地页惯例，
   小字钮又致右半空场，细线门牌两全）。768px+ 平板恢复实心主钮。 */
@media (max-width: 767px) {
    .zw-hero-cta .zw-btn-solid {
        /* 4% 金底 + 细描边：微底色找回 CTA 存在感而不破克制 */
        background: rgba(var(--gold-rgb), 0.04);
        border: 1px solid rgba(var(--gold-rgb), 0.55);
        color: var(--color-gold-light);
        font-weight: 500;
        box-shadow: none;
        width: 100%;
        padding: 1.02rem 1rem;
        border-radius: 3px;
    }
    /* 汉字态：匾额排布（「入阁 · 传承溯源」八字符，0.45em 字距保持
       匾额舒朗又不挤边，text-indent 补偿尾距保持光学居中）；
       拉丁态文案长，用常规字距防溢出（html lang 随语言切换） */
    .zw-hero-cta .zw-btn-solid:lang(zh) {
        letter-spacing: 0.45em;
        text-indent: 0.45em;
    }
    .zw-hero-cta .zw-btn-solid:active {
        background: rgba(var(--gold-rgb), 0.1);
        border-color: rgba(var(--gold-rgb), 0.8);
        transform: none;
        box-shadow: none;
    }
}

/* 数字证言带 —— 手机端为「落款式单行细字排」（数字与注脚基线对齐，细线上下收边），
   平板/桌面端（480px+）还原四列图标网格 */
.zw-stats {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    row-gap: 0.45rem;
    padding: 0.75rem 0.1rem;
    border-top: 1px solid rgba(var(--gold-rgb), 0.18);
    border-bottom: 1px solid rgba(var(--gold-rgb), 0.18);
}
.zw-stat {
    display: flex;
    align-items: baseline;
    gap: 0.32rem;
}
/* 手机端不展示图腾图标：单行排版里只会成为噪点 */
.zw-stat > i { display: none; }
.zw-stat b {
    font-family: var(--font-display);
    font-size: 1.02rem;
    color: var(--color-gold-light);
    line-height: 1.1;
}
.zw-stat span {
    font-size: 0.68rem;
    color: var(--color-muted);
    letter-spacing: 0.14em;
    opacity: 0.92;
}

/* 首屏弹性排序：移动端 hero → 六宫格 → 证言带
   （六宫格上移至首屏完整露出，避免第一行卡片下半被底部标签栏遮住；
    桌面端在 1024px 断点还原为 hero → 证言带 → 六宫格） */
.zw-home-flow { display: flex; flex-direction: column; }
.zw-home-flow .zw-hero { order: 1; }
.zw-home-flow .zw-catgrid { order: 2; }
.zw-home-flow .zw-stats {
    order: 3;
    margin: 1.15rem 0 0;
}

/* ============================================
   六大门类 · 古籍界格（手机端）
   无卡片底、无外框，仅内部细金线分隔（仿木版书页界栏）；
   每格 = 小序号 + 单字图腾 + 门类名，点击锚点跳转。
   桌面端（1024px+）还原图腾卡形态。
   ============================================ */
.zw-catgrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    padding: 0.15rem 0 0;
}
.zw-cat-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.28rem;
    padding: 1.05rem 0.3rem 1rem;
    text-decoration: none;
    background: none;
    border: none;
    border-radius: 0;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.3s ease;
}
/* 内部界格线（第 1/2 列右线、首行底线；外缘无线，保持开放） */
.zw-cat-card:nth-child(3n+1),
.zw-cat-card:nth-child(3n+2) { border-right: 1px solid rgba(var(--gold-rgb), 0.14); }
.zw-cat-card:nth-child(-n+3) { border-bottom: 1px solid rgba(var(--gold-rgb), 0.14); }
/* 激活反馈：图腾转金 + 格内墨晕（非框式高亮） */
.zw-cat-card.active {
    background: radial-gradient(circle at 50% 42%, rgba(var(--accent-rgb), 0.08), transparent 72%);
}
.zw-cat-card.active .zw-cat-glyph { color: var(--color-gold-light); }
/* 编号：手机端纯文字小序（壹-陆），无圆环边框 */
.zw-cat-no {
    font-family: var(--font-display);
    font-size: 0.62rem;
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    color: var(--color-gold);
    opacity: 0.9;
    margin-bottom: 0.12rem;
    transition: none;
}
/* 单字图腾 */
.zw-cat-glyph {
    font-family: var(--font-display);
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--color-text);
    transition: color 0.3s ease;
}
/* 门类名（手机端替代拉丁小字与注脚，信息更直接） */
.zw-cat-name {
    font-size: 0.76rem;
    letter-spacing: 0.22em;
    text-indent: 0.22em;
    color: var(--color-text);
    opacity: 0.82;
}
/* 拉丁小字 / 注脚：手机端隐藏（低于可读下限），480px 起恢复 */
.zw-cat-en, .zw-cat-sub { display: none; }

/* ============================================
   六大门类分区 · 编号 + 单字徽章
   ============================================ */
.zw-methods { padding: 0.4rem 0 1rem; }
.zw-sec {
    margin-bottom: 2.15rem;
    scroll-margin-top: calc(var(--topbar-h) + var(--safe-top) + 14px);
}
.zw-sec-head {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    padding-bottom: 0.85rem;
    margin-bottom: 1.05rem;
    border-bottom: 1px solid rgba(var(--gold-rgb), 0.28);
    position: relative;
}
.zw-sec-head::after {
    content: '';
    position: absolute;
    left: 0; bottom: -3px;
    width: 88px;
    height: 2px;
    background: linear-gradient(90deg, var(--color-gold), rgba(var(--gold-rgb), 0));
}
.zw-sec-glyph {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--gold-rgb), 0.5);
    border-radius: var(--radius-sm);
    background:
        linear-gradient(135deg, rgba(var(--gold-rgb), 0.12), rgba(var(--gold-rgb), 0.02)),
        rgba(var(--surface-rgb), 0.7);
    box-shadow: inset 0 0 0 3px rgba(var(--bg-rgb), 0.85), inset 0 0 0 4px rgba(var(--gold-rgb), 0.3);
}
.zw-sec-glyph span {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--color-gold);
    line-height: 1;
}
.zw-sec-glyph-sm { width: 44px; height: 44px; }
.zw-sec-glyph-sm span { font-size: 1.26rem; }
.zw-sec-info { min-width: 0; }
.zw-sec-eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    color: var(--color-muted);
    margin-bottom: 0.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.zw-sec-eyebrow i {
    font-style: normal;
    color: var(--color-gold);
    font-family: var(--font-display);
    padding: 0 0.1em;
}
.zw-sec-info h2 {
    font-family: var(--font-display);
    font-size: 1.32rem;
    letter-spacing: 0.1em;
    color: var(--color-text);
    margin: 0;
    line-height: 1.25;
}
.zw-sec-info h2 em {
    display: block;
    font-style: normal;
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 400;
    color: var(--color-muted);
    letter-spacing: 0.2em;
    margin-top: 0.25rem;
}

/* ---- 卡片网格（手机端为单列：焦点大卡 + 列表行） ---- */
.zw-sec-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0; /* 列表行以细线分隔，不叠卡片间距 */
}

/* ---- 术法条目 ----
   手机端 = 编辑式列表行（裸图标 + 名称/拉丁字同行 + 两行简介 + 序号，细线分隔）；
   每区仅 layout=feature 的一枚保留卡片（焦点大卡），打破满屏卡片汤。
   480px 起（平板/桌面）全部还原为卡片网格。 */
.zw-mcard {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.8rem;
    padding: 0.95rem 0.15rem 0.9rem;
    background: none;
    border: none;
    border-bottom: 1px solid rgba(var(--border-rgb), 0.5);
    border-radius: 0;
    text-decoration: none;
    overflow: hidden;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s var(--ease-out-expo), border-color 0.3s ease, background 0.3s ease;
}
/* 每区末行不封底：节奏交给下一区头 */
.zw-sec-grid .zw-mcard:last-child { border-bottom: none; }
/* 触摸/点击行反馈：细线亮金 + 极淡墨底（与卡片反馈样式叠加使用） */
.zw-mcard.card-touched, .zw-mcard.card-clicked {
    background: rgba(var(--accent-rgb), 0.05);
}
/* 顶部金线（悬停亮起） */
.zw-mcard::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-gold-light), transparent);
    opacity: 0;
    transition: opacity 0.35s ease;
}
/* 鼠标跟随光晕 */
.zw-mcard::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(var(--accent-rgb), 0.13), transparent 65%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}
.zw-mcard:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--gold-rgb), 0.55);
    box-shadow: var(--glass-shadow-hover);
}
.zw-mcard:hover::before, .zw-mcard:hover::after { opacity: 1; }

.zw-mcard-idx {
    position: absolute;
    top: 1rem;
    right: 0.15rem;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.12em;
    color: var(--color-muted);
    opacity: 0.42;
}
.zw-mcard-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    flex-shrink: 0;
    color: var(--color-gold);
    font-size: 1.15rem;
    line-height: 1;
    filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.25));
}
/* 墨晕衬底（无边框圆晕，模拟水墨氤氲） */
.zw-mcard-icon::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2.2em;
    height: 2.2em;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.13), transparent 66%);
    border-radius: 50%;
    z-index: -1;
    transition: opacity 0.35s ease, transform 0.35s ease;
    opacity: 0.85;
}
.zw-mcard:hover .zw-mcard-icon::before {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
}
/* ---- 图标光学均衡 ----
   Font Awesome 各字形墨量悬殊（实心星 vs 细月牙 vs 窄日历），
   对视觉偏轻者按档微升字号（em 相对缩放，桌面卡片形态同步缩放），
   令图标列光学体量一致；墨晕取容器自身字号（2.2em），晕圈不受影响保持统一。 */
.zw-mcard-icon .fa-calendar-day,
.zw-mcard-icon .fa-calendar-check { font-size: 1.24em; }
.zw-mcard-icon .fa-star-and-crescent { font-size: 1.15em; }
.zw-mcard-icon .fa-clone,
.zw-mcard-icon .fa-compass { font-size: 1.13em; }
.zw-mcard-icon .fa-globe { font-size: 1.1em; }
.zw-mcard-icon .fa-seedling { font-size: 1.08em; }
/* 焦点大卡：日历牌较太极/指纹窄一档，微升补齐 */
.zw-mcard-lead .fa-calendar-days { font-size: 1.15em; }
.zw-mcard-body { min-width: 0; flex: 1; }
/* 手机端：名称与拉丁字同行内联（省一行，行距更紧致） */
.zw-mcard-body h3 {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--color-text);
    margin: 0;
    display: inline;
    align-items: center;
    gap: 0.4rem;
}
.zw-mcard-en {
    display: inline;
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-muted);
    opacity: 0.85;
    margin: 0 0 0 0.45rem;
}
.zw-mcard-body p {
    font-size: 0.76rem;
    line-height: 1.7;
    color: var(--color-muted);
    margin: 0.2rem 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.zw-mcard-free {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    font-size: 0.62rem;
    font-weight: 700;
    color: #FFF3E6;
    background: var(--color-red-light);
    border-radius: 3px;
    transform: rotate(-6deg);
    box-shadow: 0 0 6px rgba(176, 69, 69, 0.4);
}
/* 「开始占卜」入口：手机端列表行整体可点、无需每行重复；480px 起恢复 */
.zw-mcard-go {
    display: none;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 0.55rem;
    border-top: 1px dashed rgba(var(--border-rgb), 0.7);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    color: var(--color-gold);
    opacity: 0.75;
    transition: opacity 0.25s ease, gap 0.25s ease;
}
.zw-mcard:hover .zw-mcard-go { opacity: 1; gap: 0.65rem; }

/* 点击/触摸反馈（与 method-card 行为一致） */
.zw-mcard.card-touched {
    transform: scale(0.97);
    border-color: var(--color-gold);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25), 0 0 14px rgba(var(--accent-rgb), 0.2);
}
.zw-mcard.card-clicked {
    transform: scale(0.96);
    border-color: var(--color-gold);
    box-shadow: 0 2px 10px rgba(0,0,0,0.3), 0 0 18px rgba(var(--accent-rgb), 0.3);
}
.zw-mcard.card-clicked::after { opacity: 1; }
.zw-mcard.card-clicked::before { opacity: 1; }

/* ---- 焦点大卡（layout=feature）：手机端仍为该区唯一卡片，纵排 + 顶部金线 ---- */
.zw-mcard-lead {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    margin: 0.15rem 0 0.5rem;
    padding: 1.1rem 1.05rem 0.9rem;
    background: rgba(var(--surface-deep-rgb), 0.88);
    background-image: linear-gradient(180deg, rgba(var(--accent-rgb), 0.035), transparent 55%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}
.zw-mcard-lead .zw-mcard-icon {
    width: auto;
    justify-content: flex-start;
    font-size: 1.7rem;
}
.zw-mcard-lead .zw-mcard-body h3 { display: flex; font-size: 1.12rem; }
.zw-mcard-lead .zw-mcard-en { display: block; margin: 0 0 0.4rem; }
.zw-mcard-lead .zw-mcard-body p { -webkit-line-clamp: 3; }
.zw-mcard-lead .zw-mcard-idx { top: 0.85rem; right: 0.9rem; font-size: 0.74rem; opacity: 0.5; }
.zw-mcard-lead .zw-mcard-go { display: flex; }

/* ============================================
   今日运势 · 黄历条式排版
   ============================================ */
.zw-fortune { margin-bottom: 1rem; }
/* 区头与六大门类分区头同构（印章 + 眉题/标题 + 金线收边）；
   margin-bottom 略大于分区头（1.3rem vs 1.05rem）——下方干支卡片是全页最重的模块，
   日期与卡片之间需更多呼吸。此前该头部无任何规则（裸块堆叠，日期贴卡）。 */
.zw-fortune-head {
    display: flex;
    align-items: center;
    gap: 0.95rem;
    padding-bottom: 0.85rem;
    margin-bottom: 1.3rem;
    border-bottom: 1px solid rgba(var(--gold-rgb), 0.28);
    position: relative;
}
.zw-fortune-head::after {
    content: '';
    position: absolute;
    left: 0; bottom: -3px;
    width: 88px; height: 2px;
    background: linear-gradient(90deg, var(--color-gold), rgba(var(--gold-rgb), 0));
}
.zw-fortune-card {
    display: flex;
    flex-direction: column;
    background: rgba(var(--surface-deep-rgb), 0.9);
    background-image: linear-gradient(180deg, rgba(var(--accent-rgb), 0.04), transparent 40%);
    border: 1px solid rgba(var(--gold-rgb), 0.3);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);
    overflow: hidden;
}
/* 左：今日干支大字（标签→大字→纳音逐层递进，节奏略放开） */
.zw-fortune-gz {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 1.05rem 1rem 0.95rem;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(var(--gold-rgb), 0.1), transparent 70%),
        rgba(var(--bg-rgb), 0.35);
    border-bottom: 1px solid rgba(var(--gold-rgb), 0.38);
}
.zw-fortune-gz-label {
    font-size: 0.66rem;
    letter-spacing: 0.4em;
    color: var(--color-muted);
    text-indent: 0.4em;
}
.zw-fortune-gz-chars {
    font-family: var(--font-display);
    font-size: 2.1rem;
    line-height: 1.15;
    letter-spacing: 0.22em;
    text-indent: 0.22em;
    color: var(--color-gold-light);
    text-shadow: 0 0 18px rgba(var(--accent-rgb), 0.3);
}
.zw-fortune-gz-nayin {
    font-size: 0.78rem;
    color: rgba(var(--gold-rgb), 0.95);
    letter-spacing: 0.14em;
    text-indent: 0.14em;
}
.zw-fortune-stars {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.55rem;
}
.zw-fortune-stars .star-on { color: var(--color-gold); }
.zw-fortune-stars .star-off { color: rgba(var(--border-rgb), 0.9); }
.zw-fortune-stars-label {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--color-muted);
    margin-left: 0.3rem;
    transform: translateY(-1px); /* 等宽数字与星标光学基线补偿 */
}

/* 右：宜忌信息流 */
.zw-fortune-main {
    flex: 1;
    min-width: 0;
    padding: 0.95rem 0.95rem 1.05rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.zw-fortune-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.55rem;
}
.zw-fortune-item {
    padding: 0.65rem 0.7rem;
    background: rgba(var(--surface-rgb), 0.4);
    border: 1px solid rgba(var(--border-rgb), 0.45);
    border-radius: var(--radius-sm);
}
.zw-fortune-item-title {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    letter-spacing: 0.3em;
    color: var(--color-muted);
    margin-bottom: 0.5rem;
}
.zw-fortune-item-title i { font-size: 0.72rem; }
.zw-fi-yi .zw-fortune-item-title i { color: #8FD49A; }
.zw-fi-ji .zw-fortune-item-title i { color: #E09090; }
.zw-fortune-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.zw-ftag {
    padding: 0.22rem 0.6rem;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    border: 1px solid rgba(var(--border-rgb), 0.8);
    border-radius: 999px;
    background: rgba(var(--bg-rgb), 0.3);
    color: var(--color-text);
}
.zw-ftag-yi { color: #8FD49A; border-color: rgba(143, 212, 154, 0.35); }
.zw-ftag-ji { color: #E09090; border-color: rgba(224, 144, 144, 0.35); }
.zw-fortune-color-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.zw-fortune-swatch {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(var(--gold-rgb), 0.55);
    box-shadow: 0 0 8px rgba(0,0,0,0.25), inset 0 0 4px rgba(255,255,255,0.15);
    flex-shrink: 0;
}
.zw-fortune-color-name {
    font-size: 0.88rem;
    letter-spacing: 0.15em;
    color: var(--color-text);
}
.zw-fortune-dir-name {
    font-family: var(--font-display);
    font-size: 1.15rem;
    letter-spacing: 0.12em;
    color: var(--color-gold-light);
}

/* 命主专属推演 */
.zw-fortune-personal {
    padding: 0.8rem 0.9rem;
    background: linear-gradient(135deg, rgba(var(--gold-rgb), 0.08), rgba(var(--gold-rgb), 0.02));
    border: 1px solid rgba(var(--gold-rgb), 0.28);
    border-radius: var(--radius-sm);
}
.zw-fortune-personal-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    color: var(--color-gold-light);
    margin-bottom: 0.6rem;
}
.zw-fortune-personal-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.6rem;
}
.zw-fp-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.22rem 0.6rem;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--color-text);
    background: rgba(var(--bg-rgb), 0.4);
    border: 1px solid rgba(var(--border-rgb), 0.8);
    border-radius: 999px;
}
.zw-fp-chip i { color: var(--color-gold); font-size: 0.68rem; }
.zw-fp-chip em { font-style: normal; color: var(--color-gold-light); margin-left: 0.1rem; }
.zw-fp-luck { border-color: rgba(143, 212, 154, 0.4); color: #8FD49A; }
.zw-fp-luck i { color: #8FD49A; }
.zw-fp-warn { border-color: rgba(224, 144, 144, 0.4); color: #E09090; }
.zw-fp-warn i { color: #E09090; }
.zw-fortune-personal-note {
    font-size: 0.75rem;
    line-height: 1.75;
    color: var(--color-muted);
    margin: 0;
}
.zw-fortune-personal-note strong { color: var(--color-gold-light); font-weight: 600; }

/* 寄语 */
.zw-fortune-msg {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.75rem 0.9rem;
    background: rgba(var(--surface-rgb), 0.45);
    border-left: 2px solid var(--color-gold);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.zw-fortune-msg i {
    color: var(--color-gold);
    font-size: 0.85rem;
    margin-top: 0.15rem;
}
.zw-fortune-msg span {
    font-family: var(--font-body);
    font-size: 0.82rem;
    line-height: 1.7;
    color: var(--color-text);
    opacity: 0.9;
}

/* 每日签到 */
.zw-checkin-area {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
}
.zw-checkin-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 1.3rem;
    font-family: var(--font-body);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    color: var(--color-gold-light);
    background: linear-gradient(180deg, rgba(var(--gold-rgb), 0.16), rgba(var(--gold-rgb), 0.07));
    border: 1px solid rgba(var(--gold-rgb), 0.45);
    border-radius: var(--radius-sm);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: all 0.25s var(--ease-out-expo);
}
.zw-checkin-btn:hover:not(:disabled) {
    border-color: rgba(var(--gold-rgb), 0.8);
    box-shadow: 0 0 16px rgba(var(--gold-rgb), 0.18);
}
.zw-checkin-btn:disabled { cursor: default; opacity: 0.85; }
.zw-checkin-btn .checkin-btn-reward {
    font-size: 0.68rem;
    padding: 0.1rem 0.4rem;
    color: #14100A;
    background: rgba(var(--gold-rgb), 0.85);
    border-radius: 3px;
    font-weight: 600;
}
.zw-checkin-btn.zw-checkin-done {
    border-style: dashed;
    color: var(--color-muted);
    background: rgba(var(--surface-rgb), 0.5);
}
.zw-checkin-btn.zw-checkin-done .checkin-btn-reward {
    background: rgba(var(--border-rgb), 0.6);
    color: var(--color-muted);
}
/* 签到状态文案 */
.checkin-status { font-size: 0.8rem; color: var(--color-muted); flex: 1; min-width: 100px; }
.checkin-status.success { color: #8FD49A; }
.checkin-status.error { color: #E09090; }
.checkin-status .streak-badge {
    display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.45rem;
    background: rgba(201,169,97,0.12); border: 1px solid rgba(201,169,97,0.3);
    border-radius: var(--radius-sm); color: var(--color-gold-light);
    font-size: 0.72rem; font-weight: 600;
}
.checkin-status .bonus-badge {
    display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.45rem;
    background: rgba(76,175,80,0.12); border: 1px solid rgba(76,175,80,0.3);
    border-radius: var(--radius-sm); color: #8FD49A; font-size: 0.72rem; font-weight: 600;
}
.checkin-status .bonus-hint { display: block; margin-top: 0.2rem; font-size: 0.7rem; color: var(--color-gold); opacity: 0.8; }

/* 档案标签 / 引导 */
.zw-fortune-profile-tag {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    color: var(--color-muted);
    letter-spacing: 0.05em;
}
.zw-fortune-profile-tag i { color: var(--color-gold); }
.zw-fortune-profile-link {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    color: var(--color-muted);
}
.zw-fortune-profile-link i { color: var(--color-gold); }
.zw-fortune-profile-link a {
    color: var(--color-gold-light);
    text-decoration: none;
    border-bottom: 1px dashed rgba(var(--gold-rgb), 0.5);
    padding-bottom: 1px;
}
.zw-fortune-profile-link a:hover { color: var(--color-gold); border-bottom-style: solid; }

/* ============================================
   明色主题适配 · 太极水墨 / 朱砂宣纸
   ============================================ */
html[data-theme="taiji"] .zw-hero-mark,
html[data-theme="zhusha"] .zw-hero-mark { opacity: 0.07; }
html[data-theme="taiji"] .zw-btn-solid,
html[data-theme="zhusha"] .zw-btn-solid {
    background: linear-gradient(180deg, var(--color-gold-light), var(--color-gold));
    color: #F7F4EC;
}
html[data-theme="taiji"] .zw-mcard,
html[data-theme="zhusha"] .zw-mcard {
    background: rgba(var(--surface-rgb), 0.92);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
html[data-theme="taiji"] .zw-mcard:hover,
html[data-theme="zhusha"] .zw-mcard:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
html[data-theme="taiji"] .zw-fortune-card,
html[data-theme="zhusha"] .zw-fortune-card {
    background: rgba(var(--surface-rgb), 0.95);
    box-shadow: 0 2px 12px rgba(0,0,0,0.07);
}
html[data-theme="taiji"] .zw-fortune-gz,
html[data-theme="zhusha"] .zw-fortune-gz {
    background: radial-gradient(ellipse at 50% 0%, rgba(var(--gold-rgb), 0.06), transparent 70%);
}
html[data-theme="taiji"] .zw-fortune-gz-chars,
html[data-theme="zhusha"] .zw-fortune-gz-chars { text-shadow: none; }
/* 宜忌吉凶色（20260915f 压深）：#2D8B57 对宣纸仅 3.8:1（AA 需 4.5:1），
   加深一档为 #1E6B3C（太极宣纸 ≈5.8:1 / 朱砂宣纸 ≈5.9:1）；凶红 #C03A3A
   ≈4.8:1 达标不变。宜/忌标签在简约视图手机端另有淡底胶囊形态，
   由文件末尾「ZW-APP 移动端对比度修正」以更高优先级接管小字号色值 */
html[data-theme="taiji"] .zw-fi-yi .zw-fortune-item-title i,
html[data-theme="zhusha"] .zw-fi-yi .zw-fortune-item-title i { color: #1E6B3C; }
html[data-theme="taiji"] .zw-fi-ji .zw-fortune-item-title i,
html[data-theme="zhusha"] .zw-fi-ji .zw-fortune-item-title i { color: #C03A3A; }
html[data-theme="taiji"] .zw-ftag-yi,
html[data-theme="zhusha"] .zw-ftag-yi { color: #1E6B3C; border-color: rgba(30, 107, 60, 0.45); }
html[data-theme="taiji"] .zw-ftag-ji,
html[data-theme="zhusha"] .zw-ftag-ji { color: #C03A3A; border-color: rgba(192,58,58,0.4); }
html[data-theme="taiji"] .zw-fp-luck,
html[data-theme="zhusha"] .zw-fp-luck { color: #1E6B3C; border-color: rgba(30, 107, 60, 0.45); }
html[data-theme="taiji"] .zw-fp-luck i,
html[data-theme="zhusha"] .zw-fp-luck i { color: #1E6B3C; }
html[data-theme="taiji"] .zw-fp-warn,
html[data-theme="zhusha"] .zw-fp-warn { color: #C03A3A; border-color: rgba(192,58,58,0.4); }
html[data-theme="taiji"] .zw-fp-warn i,
html[data-theme="zhusha"] .zw-fp-warn i { color: #C03A3A; }
html[data-theme="taiji"] .zw-checkin-btn.zw-checkin-done,
html[data-theme="zhusha"] .zw-checkin-btn.zw-checkin-done,
html[data-theme="taiji"] .zw-checkin-btn.zw-checkin-done i,
html[data-theme="zhusha"] .zw-checkin-btn.zw-checkin-done i,
html[data-theme="taiji"] .checkin-status.success,
html[data-theme="zhusha"] .checkin-status.success,
html[data-theme="taiji"] .checkin-status .bonus-badge,
html[data-theme="zhusha"] .checkin-status .bonus-badge { color: #1E6B3C; }
html[data-theme="taiji"] .checkin-status.error,
html[data-theme="zhusha"] .checkin-status.error { color: #C03A3A; }
html[data-theme="taiji"] .zw-emblem-corner,
html[data-theme="zhusha"] .zw-emblem-corner { border-color: rgba(var(--gold-rgb), 0.6); }

/* ============================================
   响应式 · 平板
   ============================================ */
@media (min-width: 480px) {
    .zw-sec-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
    .zw-mcard-lead { grid-column: span 2; margin: 0; }
    /* ---- 术法条目还原为卡片（平板/桌面形态） ---- */
    .zw-mcard {
        flex-direction: column;
        align-items: stretch;
        gap: 0.55rem;
        padding: 1rem 0.95rem 0.85rem;
        background: rgba(var(--surface-deep-rgb), 0.88);
        background-image: linear-gradient(180deg, rgba(var(--accent-rgb), 0.035), transparent 55%);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
    }
    .zw-sec-grid .zw-mcard:last-child { border-bottom: 1px solid var(--color-border); }
    .zw-mcard-idx { top: 0.7rem; right: 0.85rem; font-size: 0.72rem; opacity: 0.55; }
    .zw-mcard-icon { width: auto; justify-content: flex-start; font-size: 1.5rem; }
    .zw-mcard-body h3 { display: flex; font-size: 0.98rem; }
    .zw-mcard-en { display: block; margin: 0 0 0.4rem; }
    .zw-mcard-body p { font-size: 0.78rem; margin: 0; }
    .zw-mcard-go { display: flex; }
    /* ---- 证言带还原四列图标网格 ---- */
    .zw-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1px;
        margin-top: 2rem;
        padding: 1.2rem 0 0;
        border-top: 1px solid rgba(var(--gold-rgb), 0.25);
        border-bottom: none;
    }
    .zw-stat {
        flex-direction: column;
        align-items: center;
        gap: 0.15rem;
        padding: 0.5rem 0.3rem;
        text-align: center;
    }
    .zw-stat > i {
        display: block;
        font-size: 0.82rem;
        line-height: 1;
        color: var(--color-gold);
        opacity: 0.72;
        margin-bottom: 0.35rem;
        filter: drop-shadow(0 0 8px rgba(var(--accent-rgb), 0.35));
    }
    .zw-stat b { font-size: 1.5rem; }
    .zw-stat span { font-size: 0.74rem; letter-spacing: 0.18em; }
    /* 双脉（CJK 汉字充满 em-box）→ 光学上浮 2px 对齐数字视觉重心 */
    .zw-stat:last-child b { transform: translateY(-2px); }
    /* ---- 六大门类：界格保留，编号恢复圆环、拉丁字/注脚恢复 ---- */
    .zw-catgrid { grid-template-columns: repeat(3, 1fr); }
    .zw-cat-card { padding: 1.05rem 0.55rem 0.9rem; }
    .zw-cat-no {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        margin-bottom: 0.3rem;
        font-size: 0.8rem;
        letter-spacing: 0;
        text-indent: 0;
        opacity: 1;
        border: 1px solid rgba(var(--gold-rgb), 0.45);
        border-radius: 50%;
        transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    .zw-cat-card.active .zw-cat-no {
        border-color: rgba(var(--gold-rgb), 0.85);
        box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.25);
    }
    .zw-cat-glyph { font-size: 1.9rem; }
    .zw-cat-name { display: none; }
    .zw-cat-en, .zw-cat-sub { display: block; }
}

/* ============================================
   响应式 · 桌面（编辑式双栏 Hero + 三列网格）
   ============================================ */
@media (min-width: 768px) {
    .zw-hero { padding: 3rem 0 2rem; }
    /* 手机端隐藏的桌面形态元素：平板起恢复 */
    .zw-kicker-en { display: inline; }
    .zw-hero-cta .zw-btn-line { display: inline-flex; }
    .zw-hero-cta .zw-btn-solid { width: auto; padding: 0.68rem 1.35rem; }
    .zw-hero-title em::after { display: block; }
    /* 运势卡：桌面形态（干支大字与内距恢复） */
    .zw-fortune-gz { padding: 1.3rem 1rem; }
    .zw-fortune-gz-chars { font-size: 2.6rem; text-shadow: 0 0 24px rgba(var(--accent-rgb), 0.35); }
    .zw-fortune-item {
        padding: 0.7rem 0.8rem;
        background: rgba(var(--surface-rgb), 0.55);
        border-color: rgba(var(--border-rgb), 0.6);
    }
    .zw-fortune-card { flex-direction: row; }
    .zw-fortune-gz {
        width: 200px;
        flex-shrink: 0;
        border-bottom: none;
        border-right: 1px solid rgba(var(--gold-rgb), 0.22);
    }
    .zw-fortune-main { padding: 1.3rem 1.4rem; }
    .zw-fortune-grid { gap: 0.7rem; }
    .zw-sec-grid { gap: 0.9rem; }
    .zw-methods { padding: 0.6rem 0 1.4rem; }
    .zw-sec { margin-bottom: 3.2rem; }
}

@media (min-width: 1024px) {
    .zw-hero { padding: 4.2rem 0 3rem; }
    /* 收紧构图：主文案 + 连接桥 + 徽记组居中，两侧留白交给水印与粒子 */
    .zw-hero-inner {
        display: grid;
        grid-template-columns: minmax(0, 640px) auto auto;
        justify-content: center;
        align-items: center;
        gap: 2.4rem;
    }
    /* 徽记组 = 对联式：DOM 顺序（主字 / 徽记 / 暗字）经 row-reverse 排为
       [暗字][徽记][主字] —— 竖排从右向左读，主联语居右先读，合古籍款识习惯；
       替代旧版上下堆叠（小徽记 + 上下双竖字，列高 570px 导致徽记小、留白大） */
    .zw-hero-side {
        margin-top: 0;
        flex-direction: row-reverse;
        align-items: center;
        gap: 1.2rem;
    }
    .zw-hero-vert { display: block; font-size: 0.78rem; letter-spacing: 0.45em; }
    /* 徽记主体放大（92 → 140px，1280px+ 再进一档至 176px）；
       外衬与金环同比放大，四角定位框维持内框关系 */
    .zw-emblem { padding: 15px; }
    .zw-emblem .hero-logo { width: 140px; height: 140px; }
    .zw-emblem-ring { inset: -16px; }
    /* 标题 ↔ 徽记 连接桥：细金线 + 菱形（东方分隔母题），高度随徽记放大 */
    .zw-hero-bridge {
        display: block;
        width: 1px;
        height: 190px;
        background: linear-gradient(180deg, transparent, rgba(var(--gold-rgb), 0.62) 50%, transparent);
        position: relative;
    }
    .zw-hero-bridge::after {
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        width: 7px; height: 7px;
        transform: translate(-50%, -50%) rotate(45deg);
        background: var(--color-gold);
        box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.7);
    }
    .zw-hero-title { font-size: 3.6rem; }
    .zw-sec-grid { grid-template-columns: repeat(3, 1fr); }
    /* ---- 六大门类：桌面端还原图腾卡（卡片底 + 外框 + 顶部金线 + 悬停浮起） ---- */
    .zw-catgrid { grid-template-columns: repeat(6, 1fr); gap: 0.9rem; padding: 0.2rem 0 0.4rem; }
    .zw-cat-card {
        padding: 1.05rem 0.55rem 0.9rem;
        background: rgba(var(--surface-deep-rgb), 0.72);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        overflow: hidden;
        transition: transform 0.3s var(--ease-out-expo), border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    }
    .zw-catgrid .zw-cat-card:nth-child(3n+1),
    .zw-catgrid .zw-cat-card:nth-child(3n+2) { border-right: 1px solid var(--color-border); }
    .zw-catgrid .zw-cat-card:nth-child(-n+3) { border-bottom: 1px solid var(--color-border); }
    .zw-cat-card::before {
        content: '';
        position: absolute;
        top: 0; left: 18%; right: 18%;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--color-gold-light), transparent);
        opacity: 0;
        transition: opacity 0.35s ease;
    }
    .zw-cat-card:hover, .zw-cat-card.active {
        transform: translateY(-3px);
        border-color: rgba(var(--gold-rgb), 0.55);
        background: rgba(var(--surface-deep-rgb), 0.92);
        box-shadow: var(--glass-shadow-hover);
    }
    .zw-cat-card:hover::before, .zw-cat-card.active::before { opacity: 1; }
    /* 徽记四角定位框与分区头字号：桌面端恢复原尺寸 */
    .zw-emblem-corner { display: block; }
    .zw-sec-glyph { width: 58px; height: 58px; }
    .zw-sec-glyph span { font-size: 1.7rem; }
    .zw-sec-glyph-sm { width: 44px; height: 44px; }
    .zw-sec-glyph-sm span { font-size: 1.3rem; }
    .zw-sec-eyebrow { letter-spacing: 0.28em; }
    /* 桌面端还原顺序：hero → 证言带 → 六宫格（与原设计一致） */
    .zw-home-flow .zw-catgrid { order: 3; }
    .zw-home-flow .zw-stats { order: 2; margin: 0 0 2rem; }
    /* 桌面页脚呼吸感：与上方运势模块拉开间距，收束页面节奏 */
    .site-footer { margin-top: 3rem; padding-bottom: 1.3rem; }
    .zw-mcard-lead { grid-column: span 2; }
    /* 焦点卡横排：图标左、内容右 */
    .zw-mcard-lead { flex-direction: row; align-items: flex-start; gap: 1rem; padding: 1.2rem 1.3rem; }
    .zw-mcard-lead .zw-mcard-icon { font-size: 1.95rem; }
    .zw-mcard-lead .zw-mcard-idx { top: 0.85rem; right: 1rem; font-size: 0.85rem; }
    .zw-mcard-lead .zw-mcard-body h3 { font-size: 1.2rem; }
    .zw-sec-info h2 { font-size: 1.6rem; }
}

/* 宽屏（≥1280px）：徽记进阶大尺寸（176px），与 3.6rem 标题的体量匹配；
   覆盖 1024 档的 140px 基础尺寸（同优先级后声明者生效） */
@media (min-width: 1280px) {
    .zw-emblem { padding: 17px; }
    .zw-emblem .hero-logo { width: 176px; height: 176px; }
    .zw-emblem-ring { inset: -19px; }
    .zw-emblem-corner { width: 20px; height: 20px; }
}

/* ============================================================
   ZW-APP · 手机端 App 化 v4「即 · 净」（20260914i 收窄作用域）
   对应三条用户反馈的根治：
   ① 「起卦/八字排盘图标乱飞」→ 移动端全停入场动画
      （navFadeIn/fadeInUp/zwgPageIn/cardIn 等每次导航都在飞）
   ② 「标题还没渲染 · 好肉」→
      · zw-reveal 滚动显现改直出（分区标题即刻可见）
      · html:not(.page-ready) 的 opacity:0 遮蔽在移动端解除
        （原先内容要等 192KB JS 执行完才现身，是真卡顿源）
   ③ 「首屏只有一个今日运势」→ 运势卡压缩为紧凑条，
      金刚区完整进入首屏，问候区收窄为两行
   范围：仅 <768px 且 html:not(.zw-classic)（简约视图）生效；
   ≥768px（平板/桌面）与经典视图（html.zw-classic）零改动
   —— 经典视图回落线上原版形态（20260913a）。
   ============================================================ */

/* --- A · 全局降噪：氛围层与常驻循环动画 ---
   作用域：html:not(.zw-classic) —— 仅简约视图生效；
   经典视图完全回落到线上原版形态（20260913a：装饰层/光晕/入场动画原样）。 */
@media (max-width: 767px) {
    /* 漂浮字符 / 金粉粒子 / 光晕：简约视图不渲染（经典视图与桌面端原样保留） */
    html:not(.zw-classic) .qn-glyph-layer,
    html:not(.zw-classic) .qn-glyph,
    html:not(.zw-classic) .qn-particle,
    html:not(.zw-classic) .qn-glow { display: none !important; }
    /* 图标渲染降噪（安卓真机"乱飞"根治）：
       ① filter:drop-shadow 强制逐元素离屏合成，滚动时掉帧 + 图标漂移；
       ② ::before 负层级光晕在安卓合成器中与主体分层，滚动时错位飞离。
       简约视图两者皆移除（视觉上图标容器本有金色衬底，无光晕不影响观感）。 */
    html:not(.zw-classic) .zw-mcard-icon { filter: none !important; }
    html:not(.zw-classic) .zw-mcard-icon::before { display: none !important; }
    html:not(.zw-classic) .zw-sec-glyph,
    html:not(.zw-classic) .zw-cat-glyph,
    html:not(.zw-classic) .zw-app-greet-glyph { filter: none !important; text-shadow: none !important; }
    /* Tab 栏中央太极：停转轨道环，留静态淡金环 */
    html:not(.zw-classic) .mobile-tabbar .tab-center-icon::before { animation: none; opacity: 0.35; }
    /* 顶栏主题灵珠：停转外环与闪点（保留静态珠体） */
    html:not(.zw-classic) .theme-orb-ring,
    html:not(.zw-classic) .theme-orb-spark,
    html:not(.zw-classic) .theme-orb-core { animation: none !important; }
    /* 各排盘页标题的呼吸光晕：filter 逐帧重绘，移动端最贵的一档
       （.qn-glow-breathe 通用类 + .qn-cast-banner h1 直连两种来源都停） */
    html:not(.zw-classic) .qn-glow-breathe,
    html:not(.zw-classic) .qn-cast-banner h1 { animation: none !important; }
    /* 排盘页墨韵入场：移动端直出 */
    html:not(.zw-classic) .qn-cast-body,
    html:not(.zw-classic) .qn-ink-in { animation: none !important; }
    /* Tab 栏顶部分隔线：深色下明确内容区边界 */
    html:not(.zw-classic) .mobile-tabbar { border-top: 1px solid rgba(var(--border-rgb), 0.4); }
    /* 首访进度遮罩：简约视图跳过 —— 内容直出（原生 App 无启动遮罩；
       经典视图与桌面端保留品牌仪式感；JS 侧 loader 逻辑无感空转，无副作用） */
    html:not(.zw-classic) #page-loader { display: none !important; }
    /* 遮罩既隐，加载期滚动锁同步解除（首屏即刻可滚） */
    html:not(.zw-classic):not(.page-ready) body { overflow: auto; }
    /* 登录后首次进入例外：移动端强制展示资源加载进度条（真实追踪图片+CSS）。
       规则置于隐藏规则之后，同优先级 !important 后者胜出；
       加载完成前锁回滚动（上一条 overflow:auto 不得生效） */
    html.zw-enter-loading #page-loader { display: flex !important; }
    html.zw-enter-loading:not(.page-ready) body { overflow: hidden; }
}

/* --- B · 入场动画治理（20260915h 修订：全停 → 轻过渡） ---
   20260914i 曾全停移动端入场动画（根治「图标乱飞」），但整页直出显得生硬。
   现改为两层轻过渡，均为纯合成器动画（无 filter / 无逐元素错峰），不复发乱飞：
   ① body 整页淡入：zwgPageIn（1401 行）—— body 移出下方停用清单即自动生效；
   ② 表单卡 / 结果区单卡轻抬升：zwgMobileRise 0.4s 无延迟（下方规则）。
   仍保持直出（App 化常驻件不参与过场）：顶栏 / 底栏 / 页头 / 日期行 / Hero / 卡片。 */
@media (max-width: 767px) {
    /* 常驻件与逐元素错峰动画保持停用（body 淡入已提供整页过渡感） */
    html.page-ready:not(.zw-classic) .mobile-topbar,
    html.page-ready:not(.zw-classic) .mobile-tabbar,
    html.page-ready:not(.zw-classic) .page-header,
    html.page-ready:not(.zw-classic) .qn-date-row,
    html.page-ready:not(.zw-classic) .hero,
    html.page-ready:not(.zw-classic) .hero h1,
    html.page-ready:not(.zw-classic) .hero .hero-decoration,
    html.page-ready:not(.zw-classic) .hero .subtitle,
    html.page-ready:not(.zw-classic) .hero p:last-child,
    html.page-ready:not(.zw-classic) .method-card {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    /* 表单卡与结果区：单卡轻抬升，无延迟直起（覆盖桌面 fadeInUp 的
       0.4s/0.5s 错峰延迟版 —— 长延迟正是「标题还没渲染」的迟现根源） */
    html.page-ready:not(.zw-classic) .divination-form,
    html.page-ready:not(.zw-classic) .qn-cast-form,
    html.page-ready:not(.zw-classic) .result-section {
        animation: zwgMobileRise 0.4s ease-out both;
    }
    /* 滚动显现改直出：分区标题不再"迟渲染"（经典视图保留原版滚动渐显） */
    html:not(.zw-classic) .zw-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
    /* 20260915h：撤销 20260914i 的「page-ready 前解除遮蔽」——
       当时 page-ready 要等 192KB JS 执行完才添加，直显是为避免白屏等待；
       现 page-ready 已对齐 DOMContentLoaded+双 rAF（zw-header.js），
       且 .main-content 整体遮蔽（9529 行）已保证预备态干净。
       更关键：顶栏/底栏/页脚在 .main-content 之外，若提前直显，
       page-ready 时 body 淡入从 opacity:0 起步会令其「可见→闪没→再淡入」。
       撤销后全部内容与 body 淡入同帧出现，过渡干净无闪烁。 */
}

/* 新增展示元素：桌面端默认隐退（桌面从未渲染过这些节点形态） */
.zw-app-greet, .zw-sec-count, .zw-mcard-arrow { display: none; }

@media (max-width: 767px) {

    /* ======== 0 · 信息架构重排 ======== */
    html:not(.zw-classic) .zw-home-flow .zw-app-greet { order: 1; display: block; }
    html:not(.zw-classic) .zw-home-flow .zw-fortune  { order: 2; }
    html:not(.zw-classic) .zw-home-flow .zw-hero     { order: 3; display: none; }
    html:not(.zw-classic) .zw-home-flow .zw-catgrid  { order: 4; }
    html:not(.zw-classic) .zw-home-flow .zw-stats    { order: 5; display: none; }

    /* ======== 1 · 问候区（紧凑两行 · 52px） ======== */
    html:not(.zw-classic) .zw-app-greet { padding: 10px 0 0; }
    html:not(.zw-classic) .zw-app-greet-date {
        margin: 0 0 4px;
        font-size: 10px; letter-spacing: 0.06em;
        color: var(--color-muted); opacity: 0.8;
    }
    html:not(.zw-classic) .zw-app-greet-title {
        display: flex; align-items: baseline; gap: 10px;
        margin: 0;
        font-family: var(--font-display);
        font-size: 20px; font-weight: 700; letter-spacing: 0.04em;
        line-height: 1.25;
        color: var(--color-text);
    }
    html:not(.zw-classic) .zw-app-greet-sub {
        display: inline; flex-shrink: 0;
        margin: 0;
        font-family: var(--font-body);
        font-size: 11px; font-weight: 400;
        letter-spacing: 0.08em;
        color: var(--color-muted);
        white-space: nowrap;
    }

    /* ======== 2 · 今日运势（紧凑主卡：一行干支 + 行式宜忌 + 签到） ======== */
    /* 区头：编辑式眉题（小字重字距，金色调）——避免与问候大字争夺层级 */
    html:not(.zw-classic) .zw-fortune-head {
        display: flex; align-items: baseline; justify-content: space-between;
        gap: 8px;
        padding: 0 3px; margin: 14px 0 8px;
        border: none;
    }
    html:not(.zw-classic) .zw-fortune-head::after { display: none; }
    html:not(.zw-classic) .zw-fortune-head .zw-sec-glyph,
    html:not(.zw-classic) .zw-fortune-head .zw-sec-eyebrow { display: none; }
    html:not(.zw-classic) .zw-fortune-head .zw-sec-info { flex: 1; min-width: 0; }
    html:not(.zw-classic) .zw-fortune-head .zw-sec-info h2 {
        font-family: var(--font-display);
        font-size: 12px; font-weight: 600; letter-spacing: 0.3em;
        color: var(--color-gold);
    }
    html:not(.zw-classic) .zw-fortune-head .zw-sec-info h2 em {
        display: none; /* 问候区已有完整日期，此处去重 */
    }

    /* 主卡：干净表面 + 细线（无渐变无玻璃影） */
    html:not(.zw-classic) .zw-fortune-card {
        background: rgba(var(--surface-deep-rgb), 0.72);
        background-image: none;
        border: 1px solid rgba(var(--border-rgb), 0.55);
        border-radius: 16px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.10);
    }

    /* 干支行：辛卯·纳音基线一行 左 · 星级右（覆盖桌面 column 布局） */
    html:not(.zw-classic) .zw-fortune-gz {
        display: flex; flex-direction: row; align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        padding: 11px 14px 9px;
        background: none;
        border-bottom: 1px solid rgba(var(--border-rgb), 0.25);
    }
    html:not(.zw-classic) .zw-fortune-gz-label { display: none; }
    html:not(.zw-classic) .zw-fortune-gz-chars {
        font-size: 24px; letter-spacing: 0.12em; line-height: 1;
        text-shadow: none;
    }
    html:not(.zw-classic) .zw-fortune-gz-nayin {
        margin: 0 0 0 4px;
        font-size: 10px; letter-spacing: 0.1em;
        color: var(--color-muted);
    }
    html:not(.zw-classic) .zw-fortune-stars { margin: 0; flex-shrink: 0; }
    html:not(.zw-classic) .zw-fortune-stars i { font-size: 10px; }
    html:not(.zw-classic) .zw-fortune-stars-label {
        margin-left: 4px;
        font-size: 10px; letter-spacing: 0.02em;
        color: var(--color-muted);
    }

    /* 宜忌 · 幸运：行式紧凑网格 */
    html:not(.zw-classic) .zw-fortune-main { padding: 0 14px 12px; }
    html:not(.zw-classic) .zw-fortune-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 7px 12px;
        padding: 10px 0 9px;
        border-bottom: 1px solid rgba(var(--border-rgb), 0.25);
    }
    html:not(.zw-classic) .zw-fi-yi, .zw-fi-ji {
        grid-column: 1 / -1;
        display: flex; align-items: center; flex-wrap: wrap;
        gap: 6px;
    }
    /* 「宜」「忌」标题 → 无括号方角小徽（去图标去书名号，App 式标签） */
    html:not(.zw-classic) .zw-fi-yi .zw-fortune-item-title,
    html:not(.zw-classic) .zw-fi-ji .zw-fortune-item-title {
        margin: 0; padding: 0;
        width: 19px; height: 19px;
        font-size: 0; letter-spacing: 0;
        border-radius: 5px;
        display: inline-flex; align-items: center; justify-content: center;
        flex-shrink: 0;
    }
    html:not(.zw-classic) .zw-fi-yi .zw-fortune-item-title i,
    html:not(.zw-classic) .zw-fi-ji .zw-fortune-item-title i { display: none; }
    html:not(.zw-classic) .zw-fi-yi .zw-fortune-item-title::before {
        content: '宜'; font-size: 11px; font-weight: 600;
        color: #8FD49A; background: rgba(143, 212, 154, 0.13);
    }
    html:not(.zw-classic) .zw-fi-ji .zw-fortune-item-title::before {
        content: '忌'; font-size: 11px; font-weight: 600;
        color: #E09090; background: rgba(224, 144, 144, 0.13);
    }
    html:not(.zw-classic) .zw-fortune-item { padding: 0; background: none; border: none; box-shadow: none; }
    html:not(.zw-classic) .zw-ftag {
        padding: 2px 9px;
        font-size: 11px;
        border-radius: 999px;
        border: none;
    }
    html:not(.zw-classic) .zw-ftag-yi { background: rgba(143, 212, 154, 0.10); color: #8FD49A; }
    html:not(.zw-classic) .zw-ftag-ji { background: rgba(224, 144, 144, 0.10); color: #E09090; }
    /* 幸运色 / 方位：同行左右，标签去图标 */
    html:not(.zw-classic) .zw-fi-color, .zw-fi-dir {
        display: flex; align-items: center;
        gap: 6px; min-width: 0;
    }
    html:not(.zw-classic) .zw-fi-color .zw-fortune-item-title,
    html:not(.zw-classic) .zw-fi-dir .zw-fortune-item-title {
        margin: 0;
        font-size: 10px; letter-spacing: 0.05em;
        color: var(--color-muted);
        white-space: nowrap;
    }
    html:not(.zw-classic) .zw-fi-color .zw-fortune-item-title i,
    html:not(.zw-classic) .zw-fi-dir .zw-fortune-item-title i { display: none; }
    html:not(.zw-classic) .zw-fortune-color-row, .zw-fortune-dir-name {
        display: flex; align-items: center;
        min-height: 20px;
        gap: 5px;
        font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
        color: var(--color-text);
    }
    html:not(.zw-classic) .zw-fortune-swatch {
        width: 12px; height: 12px;
        border-radius: 50%;
        box-shadow: none;
        border: 1px solid rgba(255, 255, 255, 0.18);
        flex-shrink: 0;
    }

    /* 命主专属：留签片一行，长文隐退（详情桌面端完整保留） */
    html:not(.zw-classic) .zw-fortune-personal {
        margin: 9px 0 0;
        padding: 7px 9px;
        border-radius: 10px;
        background: rgba(var(--surface-rgb), 0.35);
        border: 1px solid rgba(var(--border-rgb), 0.3);
    }
    html:not(.zw-classic) .zw-fortune-personal-head {
        font-size: 10px; letter-spacing: 0.06em; color: var(--color-muted);
    }
    html:not(.zw-classic) .zw-fortune-personal-chips { margin-top: 5px; gap: 5px; }
    html:not(.zw-classic) .zw-fp-chip { padding: 2px 7px; font-size: 10px; border-radius: 999px; }
    html:not(.zw-classic) .zw-fortune-personal-note { display: none; }

    /* 寄语：单行收束（卡片的"魂"，一行即止） */
    html:not(.zw-classic) .zw-fortune-msg {
        margin: 9px 0 0;
        padding: 0;
        background: none; border-left: none; border-radius: 0;
        font-size: 11px; line-height: 1.5; letter-spacing: 0.02em;
        color: var(--color-text);
        opacity: 0.85;
        display: -webkit-box; -webkit-box-orient: vertical;
        -webkit-line-clamp: 1; overflow: hidden;
    }
    html:not(.zw-classic) .zw-fortune-msg i { display: none; }

    /* 签到：全宽主操作（页面唯一强色块 CTA） */
    html:not(.zw-classic) .zw-checkin-area { display: block; margin-top: 10px; }
    html:not(.zw-classic) .zw-checkin-btn {
        width: 100%; justify-content: center;
        padding: 10px 16px;
        border-radius: 11px;
        font-size: 13px; font-weight: 600; letter-spacing: 0.15em;
        color: #241703;
        background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
        border: none;
        box-shadow: 0 2px 10px rgba(var(--gold-rgb), 0.25);
    }
    html:not(.zw-classic) .checkin-status { margin-top: 6px; font-size: 10px; text-align: center; }
    html:not(.zw-classic) .checkin-status:empty { display: none; margin: 0; } /* 未签到时空行不占位 */
    /* 促销提示：移动端首屏不放营销话术（签到成功等即时反馈保留） */
    html:not(.zw-classic) .checkin-status.checkin-promo { display: none; }
    html:not(.zw-classic) .zw-fortune-profile-tag, .zw-fortune-profile-link {
        margin-top: 8px;
        font-size: 10px; letter-spacing: 0.03em;
        color: var(--color-muted);
        text-align: center;
    }

    /* ======== 3 · 金刚区（3×2 圆形入口 · 压缩至 ~180px 进首屏） ======== */
    html:not(.zw-classic) .zw-catgrid {
        gap: 7px 0;
        padding: 5px 0 3px;
        margin: 10px 0 14px;
    }
    html:not(.zw-classic) .zw-catgrid .zw-cat-card {
        gap: 5px;
        padding: 8px 2px 6px;
        border: none; border-radius: 14px;
        background: none;
        animation: none;
    }
    html:not(.zw-classic) .zw-catgrid .zw-cat-card:nth-child(3n+1),
    html:not(.zw-classic) .zw-catgrid .zw-cat-card:nth-child(3n+2) { border-right: none; }
    html:not(.zw-classic) .zw-catgrid .zw-cat-card:nth-child(-n+3) { border-bottom: none; }
    html:not(.zw-classic) .zw-cat-no, .zw-cat-en, .zw-cat-sub { display: none; }
    /* 法印圆钮：罗盘纹样底图（assets/img/cat-orb.png · 鎏金星盘）
       + 径向高光 + 渐变底叠染 + 内雕阴影 + 外圈法阵细环 */
    html:not(.zw-classic) .zw-cat-glyph {
        position: relative;
        display: flex; align-items: center; justify-content: center;
        width: 54px; height: 54px;
        border-radius: 50%;
        font-size: 22px; line-height: 1;
        color: var(--color-gold-light);
        background:
            radial-gradient(circle at 32% 26%, rgba(255, 248, 225, 0.10), transparent 52%),
            linear-gradient(150deg, rgba(var(--gold-rgb), 0.16), rgba(var(--gold-rgb), 0.05) 55%, rgba(var(--gold-rgb), 0.11)),
            url('img/cat-orb.png');
        background-size: auto, auto, cover;
        background-position: center;
        border: 1px solid rgba(var(--gold-rgb), 0.36);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.12),
            inset 0 -3px 6px rgba(0, 0, 0, 0.30),
            0 4px 10px rgba(0, 0, 0, 0.35);
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
        transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, filter 0.18s ease;
    }
    /* 外圈法阵环（低透明细环，激活/按压时点亮） */
    html:not(.zw-classic) .zw-cat-glyph::before {
        content: '';
        position: absolute;
        inset: -4px;
        border-radius: 50%;
        border: 1px solid rgba(var(--gold-rgb), 0.14);
        pointer-events: none;
        transition: border-color 0.18s ease, transform 0.18s ease;
    }
    html:not(.zw-classic) .zw-cat-name {
        font-size: 12px; letter-spacing: 0.1em; text-indent: 0.1em;
        color: var(--color-text); opacity: 0.82;
        transition: color 0.18s ease, opacity 0.18s ease;
    }
    html:not(.zw-classic) .zw-catgrid .zw-cat-card.active { background: none; }
    /* 当前分区：法印点亮（纹样提亮 + 边框/法阵环同步增强，文字染金） */
    html:not(.zw-classic) .zw-catgrid .zw-cat-card.active .zw-cat-glyph {
        border-color: rgba(var(--gold-rgb), 0.62);
        filter: brightness(1.28) saturate(1.1);
        background:
            radial-gradient(circle at 32% 26%, rgba(255, 248, 225, 0.14), transparent 52%),
            linear-gradient(150deg, rgba(var(--gold-rgb), 0.28), rgba(var(--gold-rgb), 0.10) 55%, rgba(var(--gold-rgb), 0.20)),
            url('img/cat-orb.png');
        background-size: auto, auto, cover;
        background-position: center;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.16),
            inset 0 -3px 6px rgba(0, 0, 0, 0.30),
            0 4px 12px rgba(0, 0, 0, 0.40);
    }
    html:not(.zw-classic) .zw-catgrid .zw-cat-card.active .zw-cat-glyph::before {
        border-color: rgba(var(--gold-rgb), 0.34);
    }
    html:not(.zw-classic) .zw-catgrid .zw-cat-card.active .zw-cat-name {
        color: var(--color-gold-light); opacity: 1;
    }
    /* 按压：法印回弹 */
    html:not(.zw-classic) .zw-catgrid .zw-cat-card:active .zw-cat-glyph {
        transform: scale(0.88);
        border-color: rgba(var(--gold-rgb), 0.55);
    }
    html:not(.zw-classic) .zw-catgrid .zw-cat-card:active .zw-cat-glyph::before {
        transform: scale(0.94);
        border-color: rgba(var(--gold-rgb), 0.30);
    }

    /* ======== 4 · 分组列表（iOS 式安静卡组 · 更紧凑） ======== */
    html:not(.zw-classic) .zw-methods { padding: 0; }
    html:not(.zw-classic) .zw-sec { margin-bottom: 18px; }
    html:not(.zw-classic) .zw-sec-head {
        gap: 8px;
        padding: 0 2px 8px;
        margin-bottom: 8px;
        border-bottom: none;
    }
    html:not(.zw-classic) .zw-sec-head::after { display: none; }
    html:not(.zw-classic) .zw-sec-head .zw-sec-glyph,
    html:not(.zw-classic) .zw-sec-head .zw-sec-eyebrow { display: none; }
    html:not(.zw-classic) .zw-sec-head .zw-sec-info h2 {
        display: flex; align-items: center; gap: 8px;
        font-size: 15px; font-weight: 700; letter-spacing: 0.1em;
        color: var(--color-text);
    }
    html:not(.zw-classic) .zw-sec-head .zw-sec-info h2 em { display: none; }
    html:not(.zw-classic) .zw-sec-count {
        display: inline-flex; align-items: center;
        font-family: var(--font-body);
        font-size: 10px; font-weight: 500; letter-spacing: 0.05em;
        color: var(--color-muted);
        padding: 2px 7px;
        background: rgba(var(--surface-rgb), 0.5);
        border: 1px solid rgba(var(--border-rgb), 0.45);
        border-radius: 999px;
    }
    html:not(.zw-classic) .zw-sec-grid {
        background: rgba(var(--surface-deep-rgb), 0.75);
        border: 1px solid rgba(var(--border-rgb), 0.55);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: none;
    }
    html:not(.zw-classic) .zw-sec-grid .zw-mcard {
        min-height: 58px;
        gap: 11px;
        padding: 10px 13px;
        border-bottom: 1px solid rgba(var(--border-rgb), 0.35);
        border-radius: 0;
    }
    html:not(.zw-classic) .zw-sec-grid .zw-mcard:last-child { border-bottom: none; }
    html:not(.zw-classic) .zw-mcard-idx { display: none; }
    html:not(.zw-classic) .zw-mcard::before, .zw-mcard::after { display: none; }
    /* 功能图标：裸图标（用户要求去掉方块底框）。
       方块底 + FA 字形 em-box 不居中 = 图标"不在中心"；
       去框后直接与标题/描述行内居中对齐，参照消失，偏移感随之消失。 */
    html:not(.zw-classic) .zw-mcard-icon {
        width: auto; height: auto;
        border-radius: 0;
        font-size: 17px;
        line-height: 1;
        color: var(--color-gold);
        background: none;
        filter: none;
        border: none;
    }
    html:not(.zw-classic) .zw-mcard-icon::before { display: none; }
    html:not(.zw-classic) .zw-mcard-body h3 {
        font-size: 14px; font-weight: 600; letter-spacing: 0.03em;
        color: var(--color-text);
    }
    html:not(.zw-classic) .zw-sec-grid .zw-mcard .zw-mcard-en,
    html:not(.zw-classic) .zw-sec-grid .zw-mcard-lead .zw-mcard-en { display: none; }
    html:not(.zw-classic) .zw-sec-grid .zw-mcard .zw-mcard-body p,
    html:not(.zw-classic) .zw-sec-grid .zw-mcard-lead .zw-mcard-body p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
        overflow: hidden;
        margin-top: 2px;
        font-size: 11px; line-height: 1.45;
        color: var(--color-muted);
    }
    html:not(.zw-classic) .zw-mcard-arrow {
        display: inline-flex; align-self: center;
        font-size: 11px;
        color: var(--color-muted); opacity: 0.45;
    }
    html:not(.zw-classic) .zw-sec-grid .zw-mcard .zw-mcard-go,
    html:not(.zw-classic) .zw-sec-grid .zw-mcard-lead .zw-mcard-go { display: none; }
    html:not(.zw-classic) .zw-sec-grid .zw-mcard-lead {
        flex-direction: row; align-items: center;
        gap: 11px; margin: 0;
        padding: 11px 13px;
        background: rgba(var(--gold-rgb), 0.07);
        border: none;
        border-bottom: 1px solid rgba(var(--border-rgb), 0.35);
        border-radius: 0;
    }
    html:not(.zw-classic) .zw-sec-grid .zw-mcard-lead .zw-mcard-icon {
        font-size: 19px;
    }
    html:not(.zw-classic) .zw-sec-grid .zw-mcard-lead .zw-mcard-body h3 { font-size: 14px; }

    /* ======== 5 · 智能推荐入口（同卡组语言） ======== */
    html:not(.zw-classic) .fr-wrapper { margin: 0 auto 2px; }
    html:not(.zw-classic) .fr-wrapper .fr-trigger {
        display: flex; width: 100%;
        justify-content: flex-start;
        gap: 10px;
        padding: 12px 14px;
        border-radius: 16px;
        font-size: 13px;
    }
    html:not(.zw-classic) .fr-wrapper .fr-trigger i { color: var(--color-gold); }
}

/* ============================================================
   ZW-VIEW · 首页双视图（20260914i）
   手机端用户可自主切换：
   · 简约（默认）：App 式 —— 问候 + 运势前置 + 金刚区 + 列表分组
   · 经典：与线上原版（zwgdao.com · 20260913a）完全一致 ——
     Hero 横幅 + 编号界格宫格 + 证言带 + 单列列表行卡片（焦点大卡）
     + 分区印章头 + 滚动渐显动画 + 氛围装饰层，原样呈现。
   机制：html.zw-classic 类 → ZW-APP 全部移动端规则（含降噪/动画全停）
   以 html:not(.zw-classic) 限定；经典视图零覆盖回落到基础样式，
   基础样式前 16185 行与线上 20260913a 逐字节一致，故经典 = 原版。
   新增展示元素（问候条/分区计数/箭头）由基础规则 display:none 隐退；
   字体本地化 + 预加载为加载层优化，两视图共享（不影响视觉形态）。
   ============================================================ */

/* --- 视图切换按钮（仅手机端首页显示 · 分段控件式滑动胶囊） ---
   交互形态：静息态近乎全隐（容器整体低不透明度，仅余一丝轮廓），
   点击切换后点亮（.zw-vt-lit）3 秒自动隐回 —— 不与主内容争夺焦点。
   透明度不影响命中区域，隐形态下仍可直接点击。 */
.zw-view-toggle { display: none; }
@media (max-width: 767px) {
    .zw-view-toggle {
        position: fixed;
        top: calc(var(--topbar-h, 52px) + 10px);
        right: 14px;
        z-index: 80;
        display: flex;
        gap: 0;
        padding: 2px;
        background: rgba(var(--surface-deep-rgb), 0.92);
        border: 1px solid rgba(var(--border-rgb), 0.6);
        border-radius: 999px;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        /* 静息态：近乎全隐（13%），仅轮廓可辨；隐回略带迟滞更从容 */
        opacity: 0.13;
        transition: opacity 0.55s ease 0.2s;
    }
    /* 点亮态：完整呈现，快速亮起（JS 点击后加类，3 秒后移除） */
    .zw-view-toggle.zw-vt-lit {
        opacity: 1;
        transition: opacity 0.18s ease;
    }
    /* 滑动胶囊：金色渐变 + 顶部内高光，切换时以微弹曲线滑过 */
    .zw-vt-pill {
        position: absolute;
        top: 2px;
        bottom: 2px;
        left: 0;
        width: 0;
        border-radius: 999px;
        background: linear-gradient(160deg, var(--color-gold-light), var(--color-gold));
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.30),
            inset 0 -1px 2px rgba(0, 0, 0, 0.18),
            0 2px 6px rgba(0, 0, 0, 0.30);
        pointer-events: none;
    }
    .zw-vt-pill.zw-vt-anim {
        transition:
            transform 0.34s cubic-bezier(0.34, 1.30, 0.50, 1),
            width 0.34s cubic-bezier(0.34, 1.30, 0.50, 1);
    }
    .zw-view-toggle button {
        position: relative;
        z-index: 1;
        border: none;
        background: none;
        cursor: pointer;
        padding: 4px 12px;
        font-family: var(--font-body);
        font-size: 11px;
        letter-spacing: 0.1em;
        line-height: 1.5;
        color: var(--color-muted);
        border-radius: 999px;
        -webkit-tap-highlight-color: transparent;
        transition: color 0.25s ease;
    }
    .zw-view-toggle button.active {
        color: #14100A;
        font-weight: 600;
    }
}

/* --- 经典视图 = 原版，无需任何还原规则 ---
   基础样式（文件前 16185 行）即线上 20260913a 原版：
   <480px 手机端为单列列表行（每区一枚焦点大卡）+ 分区印章头，
   ≥480px 平板起自动还原卡片网格 —— 与线上行为一致。
   新增展示元素（.zw-app-greet/.zw-sec-count/.zw-mcard-arrow）
   由 ZW-APP 块基础规则 display:none 全局隐退（含经典视图）。 */

/* --- ZW-CLASSIC · 手机端经典视图双钮排：「开始占卜」+「入阁」 ---
   仅 <768px 且 html.zw-classic（经典视图）显示；
   桌面端（≥768px 封板）与简约视图一律 display:none。
   双钮等宽等高（flex:1 + 同 padding/字号/行高）：
   · 开始占卜（主）＝ 金石实心（渐变金 + 深字）
   · 入阁（次）＝ 门牌式细线框（沿 hero 手机端基础 CTA 语言）
   同排取代 hero 内 .zw-hero-cta（此视图下隐藏，避免入阁出现两次）。
   负顶距上移令双钮压入 hero 底部、右钮与徽记(logo)下弧交叠（编辑部层叠构图）。 */
.zw-classic-cast { display: none; }
@media (max-width: 767px) {
    html.zw-classic .zw-classic-cast {
        display: flex;
        /* 基础样式中 hero=1 / catgrid=2 / stats=3；与 hero 同为 1 且 DOM 序靠后
           → 恰好落在 hero 与六宫格之间（flex 同序按文档顺序排列） */
        order: 1;
        gap: 10px;
        /* 上移叠压徽记：徽记锚定 hero 顶（位置恒定），文字堆叠高度随断点/语言变化，
           -1.75rm 于主力机型(390-430px)得到约 20-26px 弧线入钮深度；
           hero 内 .zw-hero-inner 为 z1 层叠上下文（含 z-1 徽记），
           此处须 relative+z2 方能令按钮绘制于徽记下弧之上 */
        position: relative;
        z-index: 2;
        margin: -1.75rem 12px 4px;
    }
    /* 小屏档（≤389px）：标题字号触底 2.3rem、引文换行更多 → 文字堆叠更高，
       需再加深 0.35rem 方可保持同等徽记叠压深度（desc 与钮间距仍 ≥10px） */
    @media (max-width: 389px) {
        html.zw-classic .zw-classic-cast { margin-top: -2.1rem; }
    }
    /* hero 内原 CTA（入阁通栏钮 + 六大门类锚点）由本排接管 */
    html.zw-classic .zw-hero-cta { display: none; }
    html.zw-classic .zw-classic-cast button {
        flex: 1 1 0;
        min-width: 0;
        /* 纵向内距 0.85rem：钮高 ~44px（含 1px 边框）—— 原值 1.14rem 钮高 54px 偏肥；
           44px 兼顾触控目标下限与轻量观感 */
        padding: 0.85rem 0.5rem;
        font-family: var(--font-body);
        font-size: 0.96rem;
        font-weight: 700;
        line-height: 1;
        text-align: center;
        border-radius: 4px;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        transition: transform 0.15s ease, box-shadow 0.2s ease;
        white-space: nowrap;
    }
    /* 主钮：开始占卜 —— 渐变金实心（.zw-btn-solid 桌面态语言） */
    html.zw-classic .zw-classic-cast .zw-cast-main {
        background: linear-gradient(180deg, var(--color-gold-light), var(--color-gold));
        border: 1px solid var(--color-gold-dark);
        box-shadow: 0 6px 18px rgba(var(--gold-rgb), 0.22);
        color: #14100A;
        letter-spacing: 0.3em;
        text-indent: 0.3em;
    }
    /* 次钮：入阁 · 传承溯源 —— 门牌式细线框（4% 金底 + 细描边 + 金字） */
    html.zw-classic .zw-classic-cast .zw-cast-side {
        background: rgba(var(--gold-rgb), 0.04);
        border: 1px solid rgba(var(--gold-rgb), 0.55);
        color: var(--color-gold-light);
        font-weight: 500;
        letter-spacing: 0.15em;
        text-indent: 0.15em;
        box-shadow: none;
    }
    html.zw-classic .zw-classic-cast button:active {
        transform: scale(0.985);
    }
    html.zw-classic .zw-classic-cast .zw-cast-main:active {
        box-shadow: 0 3px 10px rgba(var(--gold-rgb), 0.3);
    }
    html.zw-classic .zw-classic-cast .zw-cast-side:active {
        background: rgba(var(--gold-rgb), 0.1);
        border-color: rgba(var(--gold-rgb), 0.8);
    }
    /* 太极水墨（明色宣纸）主题对比度修正：
       主钮原复用暗色主题的"金字深底"语言，但太极下 --color-gold 为近黑 #2B2B2B，
       而文字色写死 #14100A → 黑底黑字仅 1.4:1（WCAG AA 要求 ≥4.5:1）。
       反转为墨拓意象：墨底 + 宣纸字（~11:1, AAA）；次钮文字加深至墨色（~15:1）、
       边框提至 0.8 不透明度（边框 vs 宣纸 >3:1, 满足 SC 1.4.11 UI 组件要求） */
    html[data-theme="taiji"].zw-classic .zw-classic-cast .zw-cast-main {
        background: linear-gradient(180deg, #3D3D3D, #1F1F1F);
        color: #F5F1E8;
        border-color: #0A0A0A;
    }
    html[data-theme="taiji"].zw-classic .zw-classic-cast .zw-cast-side {
        background: rgba(43, 43, 43, 0.06);
        border-color: rgba(43, 43, 43, 0.8);
        color: #1A1A1A;
    }
    /* 英文态：拉丁文案长，收字距防溢出（html lang 随语言切换） */
    html[lang="en"].zw-classic .zw-classic-cast button {
        font-size: 0.8rem;
        letter-spacing: 0.04em;
        text-indent: 0.04em;
    }
}

/* ============================================================
   太极水墨 / 朱砂宣纸 · 简约视图（ZW-APP）移动端对比度修正 20260915f
   ZW-APP 移动端块（~16220 起）按暗色主题写死了若干"暗底浅字/深底深字"：
   · 宜/忌方角小徽与标签胶囊 #8FD49A/#E09090（暗底浅字，宣纸上 ≈1.9-2.5:1）；
   · 每日签到钮深字 #241703 压金变量渐变底 —— 太极下金变墨 #3D3D3D→#2B2B2B、
     朱砂下变朱 #C05240→#B83A2A，深上深 ≈1.3-3:1 不可读；
   · 法印圆钮字色 var(--color-gold-light) 压近黑星盘底图 ≈1.9:1；
   · 视图切换胶囊激活字 #14100A 压墨/朱滑块 ≈1.3:1。
   修正：实底组件反转为"墨拓/朱拓"意象（深底宣纸字，与 16903 区经典视图
   双钮排同一语言）；小字淡底胶囊压深至 AA 达标。选择器以
   html[data-theme]:not(.zw-classic) 提权 + 置于文件末尾双保险，
   仅作用简约视图手机端；经典视图与暗色主题零影响。
   色值对比度（WCAG 2.1，正文 ≥4.5:1）：
   宜 #1E6B3C on 淡绿胶囊底 ≈4.9:1｜忌 #A82E2E on 淡红胶囊底 ≈5.0:1
   （11px 小字故比 15960 区基础色再深一档）｜签到宣纸字 on 墨底 ≈9.6-12.6:1
   ｜朱砂端 ≈5.1-7.1:1｜法印宣纸字 on 星盘 ≈16.6:1
   ============================================================ */
@media (max-width: 767px) {
    /* 宜/忌 方角小徽（19px 方章）：墨绿/深红字 + 同系淡底 */
    html[data-theme="taiji"]:not(.zw-classic) .zw-fi-yi .zw-fortune-item-title::before,
    html[data-theme="zhusha"]:not(.zw-classic) .zw-fi-yi .zw-fortune-item-title::before {
        color: #1E6B3C;
        background: rgba(30, 107, 60, 0.12);
    }
    html[data-theme="taiji"]:not(.zw-classic) .zw-fi-ji .zw-fortune-item-title::before,
    html[data-theme="zhusha"]:not(.zw-classic) .zw-fi-ji .zw-fortune-item-title::before {
        color: #A82E2E;
        background: rgba(168, 46, 46, 0.10);
    }
    /* 宜/忌 标签胶囊（11px 小字，压深一档并配同系淡底 + 细描边定界） */
    html[data-theme="taiji"]:not(.zw-classic) .zw-ftag-yi,
    html[data-theme="zhusha"]:not(.zw-classic) .zw-ftag-yi {
        color: #1E6B3C;
        background: rgba(30, 107, 60, 0.10);
        border: 1px solid rgba(30, 107, 60, 0.40);
    }
    html[data-theme="taiji"]:not(.zw-classic) .zw-ftag-ji,
    html[data-theme="zhusha"]:not(.zw-classic) .zw-ftag-ji {
        color: #A82E2E;
        background: rgba(168, 46, 46, 0.08);
        border: 1px solid rgba(168, 46, 46, 0.38);
    }
    /* 每日签到（页面唯一强 CTA）：底为金变量渐变（太极=墨/朱砂=朱），
       原深字不可读 → 宣纸字（墨拓/朱拓意象） */
    html[data-theme="taiji"]:not(.zw-classic) .zw-checkin-btn,
    html[data-theme="zhusha"]:not(.zw-classic) .zw-checkin-btn {
        color: #F5F1E8;
    }
    /* 积分小徽：深底上改宣纸淡衬底 + 宣纸字（≈7.8:1） */
    html[data-theme="taiji"]:not(.zw-classic) .zw-checkin-btn .checkin-btn-reward,
    html[data-theme="zhusha"]:not(.zw-classic) .zw-checkin-btn .checkin-btn-reward {
        color: #F5F1E8;
        background: rgba(245, 241, 232, 0.16);
    }
    /* 已签到态：移动端原样保留深底渐变，主题规则的绿字压深底仅 ~2:1
       → 回落纸面虚线章语言（浅底 + 墨字 ≈7.1:1） */
    html[data-theme="taiji"]:not(.zw-classic) .zw-checkin-btn.zw-checkin-done,
    html[data-theme="zhusha"]:not(.zw-classic) .zw-checkin-btn.zw-checkin-done {
        background: rgba(var(--surface-rgb), 0.55);
        border: 1px dashed rgba(var(--gold-rgb), 0.5);
        color: #5A5248;
        box-shadow: none;
    }
    html[data-theme="taiji"]:not(.zw-classic) .zw-checkin-btn.zw-checkin-done .checkin-btn-reward,
    html[data-theme="zhusha"]:not(.zw-classic) .zw-checkin-btn.zw-checkin-done .checkin-btn-reward {
        color: #5A5248;
        background: rgba(var(--border-rgb), 0.35);
    }
    /* 法印圆钮（金刚区）：底图 cat-orb.png 为近黑鎏金星盘（均色 RGB21,18,16），
       原字色金变量压深图 <3:1 → 宣纸字（≈16.6:1，印章意象）；
       激活态（~16600 区）以更高优先级把字色改回金变量，需同步提权覆盖 */
    html[data-theme="taiji"]:not(.zw-classic) .zw-cat-glyph,
    html[data-theme="zhusha"]:not(.zw-classic) .zw-cat-glyph,
    html[data-theme="taiji"]:not(.zw-classic) .zw-catgrid .zw-cat-card.active .zw-cat-glyph,
    html[data-theme="zhusha"]:not(.zw-classic) .zw-catgrid .zw-cat-card.active .zw-cat-glyph {
        color: #F5F1E8;
    }
    /* 视图切换胶囊：滑块为金变量渐变（明色主题下=墨/朱），
       激活字 #14100A 深上深 → 宣纸字；经典/简约两视图通用，故不设 :not 限定 */
    html[data-theme="taiji"] .zw-view-toggle button.active,
    html[data-theme="zhusha"] .zw-view-toggle button.active {
        color: #F5F1E8;
    }
    /* 幸运色圆片描边：白描边在宣纸上不可见 → 随主题墨/朱细环 */
    html[data-theme="taiji"]:not(.zw-classic) .zw-fortune-swatch,
    html[data-theme="zhusha"]:not(.zw-classic) .zw-fortune-swatch {
        border-color: rgba(var(--gold-rgb), 0.5);
    }
    /* 星级未点亮星：原米色描边星在白卡上 ≈1.5:1（低于 SC 1.4.11 的 3:1）
       → 墨色 70%（10px 细描边字形，需偏深方可辨，≈#6A6A6A on 白 ≈5:1），
       与实心墨星（fas）仍有填充/描边之别 */
    html[data-theme="taiji"]:not(.zw-classic) .zw-fortune-stars .star-off,
    html[data-theme="zhusha"]:not(.zw-classic) .zw-fortune-stars .star-off {
        color: rgba(var(--gold-rgb), 0.70);
    }
}

/* ============================================================
   ZW-HOME v5 · 首页视觉升级（20260917d）
   ① 桌面端：Hero 全景天机罗盘背景 + 六大分区术法卡主题背景画
      （assets/img/home/*.jpg，暗色水墨鎏金，蒙层随主题变量自适应明色主题）
   ② 手机端简约视图：金刚区面板化 + 卡组圆角统一，更贴近原生 App
   仅展示层，零算法/零结构改动；经典视图与明色主题全部安全回落。
   ============================================================ */

/* ============ 桌面端（≥1024px） ============ */
@media (min-width: 1024px) {

    /* ---- Hero · 天机罗盘全景横幅 ----
       左→右主题底色渐变蒙层保证文案可读，右半露出罗盘金工；
       底部渐隐入页面底色，横幅与下文无硬切边 */
    .zw-hero {
        margin-top: 0.6rem;
        padding: 4.6rem 3rem 4rem;
        border: 1px solid rgba(var(--gold-rgb), 0.26);
        border-radius: 22px;
        background: var(--color-bg, #0A0A0F);
        overflow: hidden;
        box-shadow: 0 18px 50px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 244, 214, 0.05);
    }
    /* 背景分层：.zw-hero-under = 底层「知微阁」鎏金字样图（默认被上层完全覆盖），
       ::before = 上层星盘画面（主题滤镜作用于此层，随主题自动换色调），
       ::after = 主题底色蒙层（不滤镜，保证各主题文字对比度）。
       悬停揭示：JS 驱动 --hx/--hy/--hr，上层画面与蒙层同 mask 开洞透出底层；
       半径默认 0，JS 不可用时画面与原版完全一致 */
    .zw-hero { --hx: 0px; --hy: 0px; --hr: 0px; }
    .zw-hero .zw-hero-under {
        position: absolute;
        inset: 0;
        z-index: 0;
        background: url('img/home/hero-zwg.jpg?v=20260922i') right center / cover no-repeat;
        pointer-events: none;
        user-select: none;
    }
    /* 各主题专属底层字样图（知微金为默认，上方即其版本） */
    html[data-theme="taiji"]  .zw-hero .zw-hero-under { background-image: url('img/home/hero-zwg-taiji.jpg?v=20260922i'); }
    html[data-theme="zhusha"] .zw-hero .zw-hero-under { background-image: url('img/home/hero-zwg-zhusha.jpg?v=20260922i'); }
    html[data-theme="ziwei"]  .zw-hero .zw-hero-under { background-image: url('img/home/hero-zwg-ziwei.jpg?v=20260922i'); }
    html[data-theme="xuanji"] .zw-hero .zw-hero-under { background-image: url('img/home/hero-zwg-xuanji.jpg?v=20260922i'); }
    html[data-theme="liujin"] .zw-hero .zw-hero-under { background-image: url('img/home/hero-zwg-liujin.jpg?v=20260922i'); }
    .zw-hero::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        background: url('img/home/hero_astrolabe.jpg') right center / cover no-repeat;
        transition: filter 0.45s ease;
        -webkit-mask-image: radial-gradient(circle calc(var(--hr) + 0.02px) at var(--hx) var(--hy), transparent 0%, transparent 26%, rgba(0, 0, 0, 0.22) 48%, rgba(0, 0, 0, 0.62) 74%, black 97%);
        mask-image: radial-gradient(circle calc(var(--hr) + 0.02px) at var(--hx) var(--hy), transparent 0%, transparent 26%, rgba(0, 0, 0, 0.22) 48%, rgba(0, 0, 0, 0.62) 74%, black 97%);
    }
    .zw-hero::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 1;
        background:
            linear-gradient(180deg, rgba(var(--bg-rgb), 0) 62%, rgba(var(--bg-rgb), 0.92) 100%),
            linear-gradient(90deg, rgba(var(--bg-rgb), 0.97) 22%, rgba(var(--bg-rgb), 0.82) 46%, rgba(var(--bg-rgb), 0.30) 72%, rgba(var(--bg-rgb), 0.12) 100%);
        pointer-events: none;
        -webkit-mask-image: radial-gradient(circle calc(var(--hr) + 0.02px) at var(--hx) var(--hy), transparent 0%, transparent 26%, rgba(0, 0, 0, 0.22) 48%, rgba(0, 0, 0, 0.62) 74%, black 97%);
        mask-image: radial-gradient(circle calc(var(--hr) + 0.02px) at var(--hx) var(--hy), transparent 0%, transparent 26%, rgba(0, 0, 0, 0.22) 48%, rgba(0, 0, 0, 0.62) 74%, black 97%);
    }
    /* 文案列抬至上层画面/蒙层之上（揭示开洞不吞文字） */
    .zw-hero .zw-hero-inner { z-index: 2; }
    /* 巨字水印与金工画面打架，隐藏；徽记组保留（置于文案列旁，画面右侧留白处） */
    .zw-hero .zw-hero-mark { display: none; }
    .zw-hero .zw-hero-title { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5); }
    .zw-hero .zw-hero-quote, .zw-hero .zw-hero-desc { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
    /* 徽记在画面之上略降饱和，避免与罗盘争夺视觉焦点 */
    .zw-hero .zw-emblem { filter: drop-shadow(0 6px 24px rgba(0, 0, 0, 0.45)); }

    /* ---- 分区头 · 眉题金线延展 ---- */
    .zw-sec-head { border-bottom-color: rgba(var(--gold-rgb), 0.34); }

    /* ---- 数字证言带 · 鎏金底晕 ---- */
    .zw-home-flow .zw-stats {
        background:
            radial-gradient(ellipse at 50% 120%, rgba(var(--gold-rgb), 0.10), transparent 65%);
        border-top-color: rgba(var(--gold-rgb), 0.3);
    }
}

/* 明色主题（太极/朱砂宣纸）：底蒙层变量随主题转浅，画面自动退为淡彩宣纸衬底，
   文字对比度不受影响，无需额外覆写（此处仅压低 Hero 阴影避免宣纸底显脏） */
html[data-theme="taiji"] .zw-hero,
html[data-theme="zhusha"] .zw-hero { box-shadow: 0 8px 26px rgba(60, 45, 20, 0.14); }

/* ============ 手机端 · 简约视图 App 化增强（仅 <768px 且非经典视图） ============ */
@media (max-width: 767px) {
    /* 金刚区面板化：六大分区收进一枚圆角面板（App 宫格卡惯例），
       内部仍以法印圆钮 + 名称排布，面板与上下卡组同圆角同边线，节奏统一 */
    html:not(.zw-classic) .zw-catgrid {
        padding: 12px 4px 10px;
        margin: 12px 0 16px;
        background: rgba(var(--surface-deep-rgb), 0.72);
        border: 1px solid rgba(var(--border-rgb), 0.55);
        border-radius: 18px;
        box-shadow: 0 1px 6px rgba(0, 0, 0, 0.10);
    }
    /* 法印微放大 + 名称加重半档，宫格在面板内更有分量 */
    html:not(.zw-classic) .zw-catgrid .zw-cat-glyph { width: 58px; height: 58px; font-size: 24px; }
    html:not(.zw-classic) .zw-catgrid .zw-cat-name { font-weight: 500; opacity: 0.9; }
    /* 术法卡组圆角与面板/运势卡统一为 18px（原生 App 连续曲率观感） */
    html:not(.zw-classic) .zw-sec-grid,
    html:not(.zw-classic) .zw-fortune-card,
    html:not(.zw-classic) .fr-wrapper .fr-trigger { border-radius: 18px; }
    /* 分组头与卡组的呼吸略放宽（12px→14px），贴近 iOS 分组表节奏 */
    html:not(.zw-classic) .zw-sec-head { margin-bottom: 10px; }
    html:not(.zw-classic) .zw-sec { margin-bottom: 20px; }
    /* 行按压反馈补回（原全局禁用 ::after 光晕后仅剩变色，补一组内阴影按压感） */
    html:not(.zw-classic) .zw-sec-grid .zw-mcard:active {
        background: rgba(var(--accent-rgb), 0.06);
        transition: background 0.12s ease;
    }
}

/* ============================================================
   ZW-HOME v6 · 桌面端去卡片化重设计（20260917e）
   方向：Editorial/magazine —— 术法网格改为「图鉴条目」长列表：
   每项 = 专属图鉴缩略画（23 法各一）+ 名称/拉丁字/两行释义 + 序号，
   行间细金线分隔，无卡底无外框；分区头以分区主题画作宽幅题图。
   Hero 徽记组撤下（用户要求），画面完整露出天机罗盘金工。
   手机端 / 经典视图 / 明色主题全部不受影响（作用域 ≥1024px）。
   ============================================================ */

/* 缩略画容器：基础态隐藏（手机端/经典视图不渲染） */
.zw-mcard-thumb { display: none; }

@media (min-width: 1024px) {

    /* ---- Hero · 撤下徽记组，纯文字 + 全景罗盘 ---- */
    .zw-hero .zw-hero-side, .zw-hero .zw-hero-bridge { display: none; }
    .zw-hero-inner { grid-template-columns: minmax(0, 620px); justify-content: start; }
    .zw-hero { padding: 5rem 3.2rem 4.4rem; }
    .zw-hero-title { font-size: 3.9rem; }

    /* ---- 六大门类导览 · 去卡片（开放界格：细线分列，悬停仅染金） ---- */
    .zw-catgrid { gap: 0; }
    .zw-catgrid .zw-cat-card,
    .zw-catgrid .zw-cat-card:nth-child(3n+1),
    .zw-catgrid .zw-cat-card:nth-child(3n+2),
    .zw-catgrid .zw-cat-card:nth-child(-n+3) {
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
    }
    .zw-catgrid .zw-cat-card + .zw-cat-card { border-left: 1px solid rgba(var(--gold-rgb), 0.16); }
    .zw-catgrid .zw-cat-card::before { display: none; }
    .zw-catgrid .zw-cat-card:hover {
        transform: none;
        background: radial-gradient(ellipse at 50% 60%, rgba(var(--accent-rgb), 0.07), transparent 70%);
        box-shadow: none;
    }
    .zw-catgrid .zw-cat-card:hover .zw-cat-glyph { color: var(--color-gold-light); }

    /* ---- 分区头 · 主题题图横幅（分区画右置，左侧蒙层托字） ---- */
    .zw-sec-head {
        gap: 1.1rem;
        padding: 1.15rem 1.3rem;
        margin-bottom: 0.4rem;
        border-bottom: none;
        border-radius: 14px;
        overflow: hidden;
        isolation: isolate;
    }
    /* 题图分层：::before = 分区画（主题滤镜作用层），::after = 蒙层（不滤镜） */
    .zw-sec-head::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -2;
        background-size: cover;
        background-position: right center;
        transition: filter 0.45s ease;
    }
    .zw-sec-head::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        width: auto; height: auto;
        background: linear-gradient(90deg, rgba(var(--bg-rgb), 0.94) 30%, rgba(var(--bg-rgb), 0.72) 58%, rgba(var(--bg-rgb), 0.30));
        pointer-events: none;
    }
    #sec-origin  .zw-sec-head::before { background-image: url('img/home/cat_origin.jpg'); }
    #sec-sanshi  .zw-sec-head::before { background-image: url('img/home/cat_sanshi.jpg'); }
    #sec-mingli  .zw-sec-head::before { background-image: url('img/home/cat_mingli.jpg'); }
    #sec-bushi   .zw-sec-head::before { background-image: url('img/home/cat_bushi.jpg'); }
    #sec-western .zw-sec-head::before { background-image: url('img/home/cat_western.jpg'); }
    #sec-tool    .zw-sec-head::before { background-image: url('img/home/cat_tool.jpg'); }

    /* ---- 术法条目 · 图鉴长列表（去卡底去外框，细线分隔） ---- */
    .zw-sec-grid { display: block; }
    .zw-sec-grid .zw-mcard,
    .zw-sec-grid .zw-mcard-lead {
        flex-direction: row;
        align-items: center;
        gap: 1.25rem;
        margin: 0;
        padding: 1.05rem 0.9rem 1.05rem 0.35rem;
        background: none;
        background-image: none;
        border: none;
        border-bottom: 1px solid rgba(var(--gold-rgb), 0.13);
        border-radius: 0;
        box-shadow: none;
    }
    .zw-sec-grid .zw-mcard:last-child { border-bottom: none; }
    /* 悬停：行内金色洇染 + 缩略画提亮，无位移无浮影（编辑式克制） */
    .zw-sec-grid .zw-mcard:hover {
        transform: none;
        border-bottom-color: rgba(var(--gold-rgb), 0.4);
        background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.06), transparent 55%);
        box-shadow: none;
    }
    .zw-sec-grid .zw-mcard::before, .zw-sec-grid .zw-mcard::after { display: none; }

    /* 图鉴缩略画：132×84 圆角小景，细金描边，悬停增亮 */
    .zw-sec-grid .zw-mcard .zw-mcard-thumb {
        display: block;
        width: 132px;
        height: 84px;
        flex-shrink: 0;
        border-radius: 10px;
        border: 1px solid rgba(var(--gold-rgb), 0.30);
        background-size: cover;
        background-position: center;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
        filter: saturate(0.92) brightness(0.92);
        transition: filter 0.3s ease, border-color 0.3s ease, transform 0.3s var(--ease-out-expo);
    }
    .zw-sec-grid .zw-mcard:hover .zw-mcard-thumb {
        filter: saturate(1.05) brightness(1.08);
        border-color: rgba(var(--gold-rgb), 0.6);
        transform: scale(1.03);
    }
    /* 图标列撤下（缩略画已承载识别），序号保留为图鉴编号 */
    .zw-sec-grid .zw-mcard .zw-mcard-icon { display: none; }
    .zw-sec-grid .zw-mcard .zw-mcard-idx {
        position: static;
        order: 99;
        margin-left: auto;
        align-self: flex-start;
        font-size: 0.72rem;
        opacity: 0.5;
        padding-top: 0.35rem;
    }
    .zw-sec-grid .zw-mcard .zw-mcard-body h3 { font-size: 1.08rem; text-shadow: none; }
    .zw-sec-grid .zw-mcard .zw-mcard-body p { text-shadow: none; -webkit-line-clamp: 2; }
    .zw-sec-grid .zw-mcard .zw-mcard-go { border-top: none; padding-top: 0; margin: 0; flex-shrink: 0; }

    /* 焦点条目（feature）：缩略画放大一档 + 标题进一档，不打断列表节奏 */
    .zw-sec-grid .zw-mcard-lead .zw-mcard-thumb { width: 196px; height: 108px; }
    .zw-sec-grid .zw-mcard-lead .zw-mcard-body h3 { font-size: 1.25rem; }

    /* ---- 23 法 · 每法专属图鉴画 ---- */
    .zw-mcard[data-key="qigua"]       .zw-mcard-thumb { background-image: url('img/home/m_qigua.jpg'); }
    .zw-mcard[data-key="taiyi"]       .zw-mcard-thumb { background-image: url('img/home/m_taiyi.jpg'); }
    .zw-mcard[data-key="qimen"]       .zw-mcard-thumb { background-image: url('img/home/m_qimen.jpg'); }
    .zw-mcard[data-key="daliuren"]    .zw-mcard-thumb { background-image: url('img/home/m_daliuren.jpg'); }
    .zw-mcard[data-key="dayan"]       .zw-mcard-thumb { background-image: url('img/home/m_dayan.jpg'); }
    .zw-mcard[data-key="bazi"]        .zw-mcard-thumb { background-image: url('img/home/m_bazi.jpg'); }
    .zw-mcard[data-key="ziwei"]       .zw-mcard-thumb { background-image: url('img/home/m_ziwei.jpg'); }
    .zw-mcard[data-key="nayin"]       .zw-mcard-thumb { background-image: url('img/home/m_nayin.jpg'); }
    .zw-mcard[data-key="qizheng"]     .zw-mcard-thumb { background-image: url('img/home/m_qizheng.jpg'); }
    .zw-mcard[data-key="liuyao"]      .zw-mcard-thumb { background-image: url('img/home/m_liuyao.jpg'); }
    .zw-mcard[data-key="meihua"]      .zw-mcard-thumb { background-image: url('img/home/m_meihua.jpg'); }
    .zw-mcard[data-key="xiaoliuren"]  .zw-mcard-thumb { background-image: url('img/home/m_xiaoliuren.jpg'); }
    .zw-mcard[data-key="chouqian"]    .zw-mcard-thumb { background-image: url('img/home/m_chouqian.jpg'); }
    .zw-mcard[data-key="tarot"]       .zw-mcard-thumb { background-image: url('img/home/m_tarot.jpg'); }
    .zw-mcard[data-key="lenormand"]   .zw-mcard-thumb { background-image: url('img/home/m_lenormand.jpg'); }
    .zw-mcard[data-key="western"]     .zw-mcard-thumb { background-image: url('img/home/m_western.jpg'); }
    .zw-mcard[data-key="bazihepan"]   .zw-mcard-thumb { background-image: url('img/home/m_bazihepan.jpg'); }
    .zw-mcard[data-key="sanshuhecan"] .zw-mcard-thumb { background-image: url('img/home/m_sanshuhecan.jpg'); }
    .zw-mcard[data-key="zeri"]        .zw-mcard-thumb { background-image: url('img/home/m_zeri.jpg'); }
    .zw-mcard[data-key="meirishiling"] .zw-mcard-thumb { background-image: url('img/home/m_meirishiling.jpg'); }
    .zw-mcard[data-key="baibaodai"]   .zw-mcard-thumb { background-image: url('img/home/m_baibaodai.jpg'); }
    .zw-mcard[data-key="fengshui"]    .zw-mcard-thumb { background-image: url('img/home/m_fengshui.jpg'); }
    .zw-mcard[data-key="zhiji"]       .zw-mcard-thumb { background-image: url('img/home/m_zhiji.jpg'); }

    /* 明色主题：缩略画/题图蒙层随变量转浅，此处仅补描边对比 */
    html[data-theme="taiji"] .zw-mcard-thumb,
    html[data-theme="zhusha"] .zw-mcard-thumb { box-shadow: 0 2px 8px rgba(60, 45, 20, 0.18); }
}

/* ============================================================
   ZW-HOME v7 · 全主题图片适配（20260917f）
   首页画面（Hero 全景 / 分区题图 / 廿三法图鉴缩略画）按主题
   自动切换滤镜风格，切主题即换「一套图」——同一底图、六套观感：
   · 知微金（默认）：鎏金原画，不滤镜
   · 太极水墨：宣纸淡墨（去色提亮，画化为水墨衬底）
   · 朱砂宣纸：朱砂暖调（红金晕染）
   · 紫微：帝星蓝紫（金色相转至蓝紫微光）
   · 玄机：玄铁冷灰（低饱和冷调）
   · 鎏金：赤金浓郁（饱和加深、暖金强化）
   蒙层另层不受滤镜影响，各主题文字对比度始终由主题变量兜底。
   ============================================================ */
@media (min-width: 1024px) {
    /* 太极水墨 · 宣纸淡墨 */
    html[data-theme="taiji"] .zw-hero::before,
    html[data-theme="taiji"] .zw-sec-head::before {
        filter: grayscale(0.82) brightness(1.62) sepia(0.16) contrast(0.9);
    }
    html[data-theme="taiji"] .zw-mcard-thumb {
        filter: grayscale(0.75) brightness(1.5) sepia(0.14) contrast(0.92);
    }
    html[data-theme="taiji"] .zw-mcard:hover .zw-mcard-thumb {
        filter: grayscale(0.6) brightness(1.58) sepia(0.16) contrast(0.95);
    }
    /* 朱砂宣纸 · 红金暖调 */
    html[data-theme="zhusha"] .zw-hero::before,
    html[data-theme="zhusha"] .zw-sec-head::before {
        filter: sepia(0.42) hue-rotate(-28deg) saturate(1.55) brightness(1.42) contrast(0.94);
    }
    html[data-theme="zhusha"] .zw-mcard-thumb {
        filter: sepia(0.38) hue-rotate(-26deg) saturate(1.45) brightness(1.3) contrast(0.95);
    }
    html[data-theme="zhusha"] .zw-mcard:hover .zw-mcard-thumb {
        filter: sepia(0.34) hue-rotate(-24deg) saturate(1.6) brightness(1.38) contrast(0.97);
    }
    /* 紫微 · 帝星蓝紫 */
    html[data-theme="ziwei"] .zw-hero::before,
    html[data-theme="ziwei"] .zw-sec-head::before {
        filter: hue-rotate(192deg) saturate(0.7) brightness(1.04);
    }
    html[data-theme="ziwei"] .zw-mcard-thumb {
        filter: hue-rotate(192deg) saturate(0.66) brightness(0.96);
    }
    html[data-theme="ziwei"] .zw-mcard:hover .zw-mcard-thumb {
        filter: hue-rotate(192deg) saturate(0.8) brightness(1.1);
    }
    /* 玄机 · 玄铁冷灰 */
    html[data-theme="xuanji"] .zw-hero::before,
    html[data-theme="xuanji"] .zw-sec-head::before {
        filter: saturate(0.5) brightness(0.97) hue-rotate(-12deg) contrast(1.04);
    }
    html[data-theme="xuanji"] .zw-mcard-thumb {
        filter: saturate(0.48) brightness(0.92) hue-rotate(-12deg);
    }
    html[data-theme="xuanji"] .zw-mcard:hover .zw-mcard-thumb {
        filter: saturate(0.62) brightness(1.05) hue-rotate(-10deg);
    }
    /* 鎏金 · 赤金浓郁 */
    html[data-theme="liujin"] .zw-hero::before,
    html[data-theme="liujin"] .zw-sec-head::before {
        filter: saturate(1.32) sepia(0.14) brightness(1.03) hue-rotate(-6deg);
    }
    html[data-theme="liujin"] .zw-mcard-thumb {
        filter: saturate(1.25) sepia(0.12) brightness(0.95) hue-rotate(-5deg);
    }
    html[data-theme="liujin"] .zw-mcard:hover .zw-mcard-thumb {
        filter: saturate(1.4) sepia(0.14) brightness(1.08) hue-rotate(-5deg);
    }
}

/* ============================================================
   ZW-HOME v8 · 廿三法图鉴画 · 分主题实拍图（20260917g）
   太极水墨 / 朱砂宣纸：23 法全量主题重绘；紫微：已重绘 14 法，
   其余与玄机/鎏金暂由 v7 主题滤镜兜底（图像额度刷新后补齐重绘）。
   有实拍图的主题关闭 v7 滤镜，避免二次着色。
   ============================================================ */
@media (min-width: 1024px) {
    html[data-theme="taiji"] .zw-mcard .zw-mcard-thumb,
    html[data-theme="taiji"] .zw-mcard:hover .zw-mcard-thumb { filter: none; }
    html[data-theme="taiji"] .zw-mcard[data-key="baibaodai"] .zw-mcard-thumb { background-image: url('img/home/taiji/m_baibaodai.jpg'); filter: none; }
    html[data-theme="taiji"] .zw-mcard[data-key="baibaodai"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="taiji"] .zw-mcard[data-key="bazi"] .zw-mcard-thumb { background-image: url('img/home/taiji/m_bazi.jpg'); filter: none; }
    html[data-theme="taiji"] .zw-mcard[data-key="bazi"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="taiji"] .zw-mcard[data-key="bazihepan"] .zw-mcard-thumb { background-image: url('img/home/taiji/m_bazihepan.jpg'); filter: none; }
    html[data-theme="taiji"] .zw-mcard[data-key="bazihepan"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="taiji"] .zw-mcard[data-key="chouqian"] .zw-mcard-thumb { background-image: url('img/home/taiji/m_chouqian.jpg'); filter: none; }
    html[data-theme="taiji"] .zw-mcard[data-key="chouqian"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="taiji"] .zw-mcard[data-key="daliuren"] .zw-mcard-thumb { background-image: url('img/home/taiji/m_daliuren.jpg'); filter: none; }
    html[data-theme="taiji"] .zw-mcard[data-key="daliuren"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="taiji"] .zw-mcard[data-key="dayan"] .zw-mcard-thumb { background-image: url('img/home/taiji/m_dayan.jpg'); filter: none; }
    html[data-theme="taiji"] .zw-mcard[data-key="dayan"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="taiji"] .zw-mcard[data-key="fengshui"] .zw-mcard-thumb { background-image: url('img/home/taiji/m_fengshui.jpg'); filter: none; }
    html[data-theme="taiji"] .zw-mcard[data-key="fengshui"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="taiji"] .zw-mcard[data-key="lenormand"] .zw-mcard-thumb { background-image: url('img/home/taiji/m_lenormand.jpg'); filter: none; }
    html[data-theme="taiji"] .zw-mcard[data-key="lenormand"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="taiji"] .zw-mcard[data-key="liuyao"] .zw-mcard-thumb { background-image: url('img/home/taiji/m_liuyao.jpg'); filter: none; }
    html[data-theme="taiji"] .zw-mcard[data-key="liuyao"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="taiji"] .zw-mcard[data-key="meihua"] .zw-mcard-thumb { background-image: url('img/home/taiji/m_meihua.jpg'); filter: none; }
    html[data-theme="taiji"] .zw-mcard[data-key="meihua"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="taiji"] .zw-mcard[data-key="meirishiling"] .zw-mcard-thumb { background-image: url('img/home/taiji/m_meirishiling.jpg'); filter: none; }
    html[data-theme="taiji"] .zw-mcard[data-key="meirishiling"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="taiji"] .zw-mcard[data-key="nayin"] .zw-mcard-thumb { background-image: url('img/home/taiji/m_nayin.jpg'); filter: none; }
    html[data-theme="taiji"] .zw-mcard[data-key="nayin"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="taiji"] .zw-mcard[data-key="qigua"] .zw-mcard-thumb { background-image: url('img/home/taiji/m_qigua.jpg'); filter: none; }
    html[data-theme="taiji"] .zw-mcard[data-key="qigua"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="taiji"] .zw-mcard[data-key="qimen"] .zw-mcard-thumb { background-image: url('img/home/taiji/m_qimen.jpg'); filter: none; }
    html[data-theme="taiji"] .zw-mcard[data-key="qimen"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="taiji"] .zw-mcard[data-key="qizheng"] .zw-mcard-thumb { background-image: url('img/home/taiji/m_qizheng.jpg'); filter: none; }
    html[data-theme="taiji"] .zw-mcard[data-key="qizheng"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="taiji"] .zw-mcard[data-key="sanshuhecan"] .zw-mcard-thumb { background-image: url('img/home/taiji/m_sanshuhecan.jpg'); filter: none; }
    html[data-theme="taiji"] .zw-mcard[data-key="sanshuhecan"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="taiji"] .zw-mcard[data-key="taiyi"] .zw-mcard-thumb { background-image: url('img/home/taiji/m_taiyi.jpg'); filter: none; }
    html[data-theme="taiji"] .zw-mcard[data-key="taiyi"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="taiji"] .zw-mcard[data-key="tarot"] .zw-mcard-thumb { background-image: url('img/home/taiji/m_tarot.jpg'); filter: none; }
    html[data-theme="taiji"] .zw-mcard[data-key="tarot"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="taiji"] .zw-mcard[data-key="western"] .zw-mcard-thumb { background-image: url('img/home/taiji/m_western.jpg'); filter: none; }
    html[data-theme="taiji"] .zw-mcard[data-key="western"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="taiji"] .zw-mcard[data-key="xiaoliuren"] .zw-mcard-thumb { background-image: url('img/home/taiji/m_xiaoliuren.jpg'); filter: none; }
    html[data-theme="taiji"] .zw-mcard[data-key="xiaoliuren"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="taiji"] .zw-mcard[data-key="zeri"] .zw-mcard-thumb { background-image: url('img/home/taiji/m_zeri.jpg'); filter: none; }
    html[data-theme="taiji"] .zw-mcard[data-key="zeri"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="taiji"] .zw-mcard[data-key="zhiji"] .zw-mcard-thumb { background-image: url('img/home/taiji/m_zhiji.jpg'); filter: none; }
    html[data-theme="taiji"] .zw-mcard[data-key="zhiji"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="taiji"] .zw-mcard[data-key="ziwei"] .zw-mcard-thumb { background-image: url('img/home/taiji/m_ziwei.jpg'); filter: none; }
    html[data-theme="taiji"] .zw-mcard[data-key="ziwei"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="zhusha"] .zw-mcard .zw-mcard-thumb,
    html[data-theme="zhusha"] .zw-mcard:hover .zw-mcard-thumb { filter: none; }
    html[data-theme="zhusha"] .zw-mcard[data-key="baibaodai"] .zw-mcard-thumb { background-image: url('img/home/zhusha/m_baibaodai.jpg'); filter: none; }
    html[data-theme="zhusha"] .zw-mcard[data-key="baibaodai"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="zhusha"] .zw-mcard[data-key="bazi"] .zw-mcard-thumb { background-image: url('img/home/zhusha/m_bazi.jpg'); filter: none; }
    html[data-theme="zhusha"] .zw-mcard[data-key="bazi"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="zhusha"] .zw-mcard[data-key="bazihepan"] .zw-mcard-thumb { background-image: url('img/home/zhusha/m_bazihepan.jpg'); filter: none; }
    html[data-theme="zhusha"] .zw-mcard[data-key="bazihepan"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="zhusha"] .zw-mcard[data-key="chouqian"] .zw-mcard-thumb { background-image: url('img/home/zhusha/m_chouqian.jpg'); filter: none; }
    html[data-theme="zhusha"] .zw-mcard[data-key="chouqian"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="zhusha"] .zw-mcard[data-key="daliuren"] .zw-mcard-thumb { background-image: url('img/home/zhusha/m_daliuren.jpg'); filter: none; }
    html[data-theme="zhusha"] .zw-mcard[data-key="daliuren"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="zhusha"] .zw-mcard[data-key="dayan"] .zw-mcard-thumb { background-image: url('img/home/zhusha/m_dayan.jpg'); filter: none; }
    html[data-theme="zhusha"] .zw-mcard[data-key="dayan"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="zhusha"] .zw-mcard[data-key="fengshui"] .zw-mcard-thumb { background-image: url('img/home/zhusha/m_fengshui.jpg'); filter: none; }
    html[data-theme="zhusha"] .zw-mcard[data-key="fengshui"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="zhusha"] .zw-mcard[data-key="lenormand"] .zw-mcard-thumb { background-image: url('img/home/zhusha/m_lenormand.jpg'); filter: none; }
    html[data-theme="zhusha"] .zw-mcard[data-key="lenormand"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="zhusha"] .zw-mcard[data-key="liuyao"] .zw-mcard-thumb { background-image: url('img/home/zhusha/m_liuyao.jpg'); filter: none; }
    html[data-theme="zhusha"] .zw-mcard[data-key="liuyao"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="zhusha"] .zw-mcard[data-key="meihua"] .zw-mcard-thumb { background-image: url('img/home/zhusha/m_meihua.jpg'); filter: none; }
    html[data-theme="zhusha"] .zw-mcard[data-key="meihua"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="zhusha"] .zw-mcard[data-key="meirishiling"] .zw-mcard-thumb { background-image: url('img/home/zhusha/m_meirishiling.jpg'); filter: none; }
    html[data-theme="zhusha"] .zw-mcard[data-key="meirishiling"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="zhusha"] .zw-mcard[data-key="nayin"] .zw-mcard-thumb { background-image: url('img/home/zhusha/m_nayin.jpg'); filter: none; }
    html[data-theme="zhusha"] .zw-mcard[data-key="nayin"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="zhusha"] .zw-mcard[data-key="qigua"] .zw-mcard-thumb { background-image: url('img/home/zhusha/m_qigua.jpg'); filter: none; }
    html[data-theme="zhusha"] .zw-mcard[data-key="qigua"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="zhusha"] .zw-mcard[data-key="qimen"] .zw-mcard-thumb { background-image: url('img/home/zhusha/m_qimen.jpg'); filter: none; }
    html[data-theme="zhusha"] .zw-mcard[data-key="qimen"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="zhusha"] .zw-mcard[data-key="qizheng"] .zw-mcard-thumb { background-image: url('img/home/zhusha/m_qizheng.jpg'); filter: none; }
    html[data-theme="zhusha"] .zw-mcard[data-key="qizheng"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="zhusha"] .zw-mcard[data-key="sanshuhecan"] .zw-mcard-thumb { background-image: url('img/home/zhusha/m_sanshuhecan.jpg'); filter: none; }
    html[data-theme="zhusha"] .zw-mcard[data-key="sanshuhecan"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="zhusha"] .zw-mcard[data-key="taiyi"] .zw-mcard-thumb { background-image: url('img/home/zhusha/m_taiyi.jpg'); filter: none; }
    html[data-theme="zhusha"] .zw-mcard[data-key="taiyi"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="zhusha"] .zw-mcard[data-key="tarot"] .zw-mcard-thumb { background-image: url('img/home/zhusha/m_tarot.jpg'); filter: none; }
    html[data-theme="zhusha"] .zw-mcard[data-key="tarot"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="zhusha"] .zw-mcard[data-key="western"] .zw-mcard-thumb { background-image: url('img/home/zhusha/m_western.jpg'); filter: none; }
    html[data-theme="zhusha"] .zw-mcard[data-key="western"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="zhusha"] .zw-mcard[data-key="xiaoliuren"] .zw-mcard-thumb { background-image: url('img/home/zhusha/m_xiaoliuren.jpg'); filter: none; }
    html[data-theme="zhusha"] .zw-mcard[data-key="xiaoliuren"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="zhusha"] .zw-mcard[data-key="zeri"] .zw-mcard-thumb { background-image: url('img/home/zhusha/m_zeri.jpg'); filter: none; }
    html[data-theme="zhusha"] .zw-mcard[data-key="zeri"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="zhusha"] .zw-mcard[data-key="zhiji"] .zw-mcard-thumb { background-image: url('img/home/zhusha/m_zhiji.jpg'); filter: none; }
    html[data-theme="zhusha"] .zw-mcard[data-key="zhiji"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="zhusha"] .zw-mcard[data-key="ziwei"] .zw-mcard-thumb { background-image: url('img/home/zhusha/m_ziwei.jpg'); filter: none; }
    html[data-theme="zhusha"] .zw-mcard[data-key="ziwei"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="ziwei"] .zw-mcard[data-key="bazi"] .zw-mcard-thumb { background-image: url('img/home/ziwei/m_bazi.jpg'); filter: none; }
    html[data-theme="ziwei"] .zw-mcard[data-key="bazi"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="ziwei"] .zw-mcard[data-key="chouqian"] .zw-mcard-thumb { background-image: url('img/home/ziwei/m_chouqian.jpg'); filter: none; }
    html[data-theme="ziwei"] .zw-mcard[data-key="chouqian"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="ziwei"] .zw-mcard[data-key="daliuren"] .zw-mcard-thumb { background-image: url('img/home/ziwei/m_daliuren.jpg'); filter: none; }
    html[data-theme="ziwei"] .zw-mcard[data-key="daliuren"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="ziwei"] .zw-mcard[data-key="dayan"] .zw-mcard-thumb { background-image: url('img/home/ziwei/m_dayan.jpg'); filter: none; }
    html[data-theme="ziwei"] .zw-mcard[data-key="dayan"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="ziwei"] .zw-mcard[data-key="liuyao"] .zw-mcard-thumb { background-image: url('img/home/ziwei/m_liuyao.jpg'); filter: none; }
    html[data-theme="ziwei"] .zw-mcard[data-key="liuyao"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="ziwei"] .zw-mcard[data-key="meihua"] .zw-mcard-thumb { background-image: url('img/home/ziwei/m_meihua.jpg'); filter: none; }
    html[data-theme="ziwei"] .zw-mcard[data-key="meihua"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="ziwei"] .zw-mcard[data-key="nayin"] .zw-mcard-thumb { background-image: url('img/home/ziwei/m_nayin.jpg'); filter: none; }
    html[data-theme="ziwei"] .zw-mcard[data-key="nayin"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="ziwei"] .zw-mcard[data-key="qigua"] .zw-mcard-thumb { background-image: url('img/home/ziwei/m_qigua.jpg'); filter: none; }
    html[data-theme="ziwei"] .zw-mcard[data-key="qigua"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="ziwei"] .zw-mcard[data-key="qimen"] .zw-mcard-thumb { background-image: url('img/home/ziwei/m_qimen.jpg'); filter: none; }
    html[data-theme="ziwei"] .zw-mcard[data-key="qimen"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="ziwei"] .zw-mcard[data-key="qizheng"] .zw-mcard-thumb { background-image: url('img/home/ziwei/m_qizheng.jpg'); filter: none; }
    html[data-theme="ziwei"] .zw-mcard[data-key="qizheng"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="ziwei"] .zw-mcard[data-key="taiyi"] .zw-mcard-thumb { background-image: url('img/home/ziwei/m_taiyi.jpg'); filter: none; }
    html[data-theme="ziwei"] .zw-mcard[data-key="taiyi"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="ziwei"] .zw-mcard[data-key="tarot"] .zw-mcard-thumb { background-image: url('img/home/ziwei/m_tarot.jpg'); filter: none; }
    html[data-theme="ziwei"] .zw-mcard[data-key="tarot"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="ziwei"] .zw-mcard[data-key="xiaoliuren"] .zw-mcard-thumb { background-image: url('img/home/ziwei/m_xiaoliuren.jpg'); filter: none; }
    html[data-theme="ziwei"] .zw-mcard[data-key="xiaoliuren"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="ziwei"] .zw-mcard[data-key="ziwei"] .zw-mcard-thumb { background-image: url('img/home/ziwei/m_ziwei.jpg'); filter: none; }
    html[data-theme="ziwei"] .zw-mcard[data-key="ziwei"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
}

/* ============================================================
   ZW-HOME v9 · 手机端简约视图重设计（20260917h · 参考 App 稿）
   首屏结构：问候横幅（月夜山水）→ 今日运势卡（墨纹干支字牌 + 宜忌 +
   幸运色方位）→ 命主专属 → 今日财运横幅（宣纸金卡）→ 签到条 →
   推荐功能四宫。原六宫格/术法长列表/智能推荐在简约视图让位，
   全部术法经「更多」弹窗抵达；经典视图与桌面端零改动。
   新增元素基础态全部隐藏，仅 html:not(.zw-classic) + <768px 渲染。
   ============================================================ */

/* 新增元素：基础隐藏（桌面端/经典视图/平板一律不渲染） */
.zw-app-greet-art, .zw-app-greet-seal,
.zw-fc-top, .zw-fc-cai, .zw-app-recs { display: none; }

@media (max-width: 767px) {
html:not(.zw-classic) {

    /* ======== 1 · 问候区 · 月夜山水横幅 ======== */
    .zw-app-greet {
        position: relative;
        padding: 14px 2px 18px;
        overflow: hidden;
    }
    .zw-app-greet-art {
        display: block;
        position: absolute;
        top: 0; right: -18px; bottom: 0;
        width: 74%;
        background: url('img/home/greet_moon.jpg') right center / cover no-repeat;
        border-radius: 16px;
        /* 左缘渐隐融入页面底色，文字区不受画面干扰 */
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.55) 32%, #000 62%);
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.55) 32%, #000 62%);
        pointer-events: none;
    }
    .zw-app-greet-date { position: relative; margin: 0 0 6px; font-size: 10.5px; letter-spacing: 0.05em; color: var(--color-muted); opacity: 0.85; }
    .zw-app-greet-title {
        position: relative;
        display: flex; align-items: flex-start; gap: 8px;
        margin: 0 0 8px;
        font-family: var(--font-display);
        font-size: 34px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.15;
        color: var(--color-text);
    }
    /* 朱砂小印（题款落印） */
    .zw-app-greet-seal {
        display: inline-flex; align-items: center; justify-content: center;
        margin-top: 6px;
        padding: 3px 2px;
        writing-mode: vertical-rl;
        font-family: var(--font-display);
        font-size: 9px; font-style: normal; line-height: 1.05; letter-spacing: 0.08em;
        color: #F5E9DC;
        background: linear-gradient(160deg, #C0453A, #96302A);
        border-radius: 3px;
        box-shadow: 0 1px 4px rgba(0,0,0,0.35);
    }
    .zw-app-greet-sub {
        position: relative; display: block;
        margin: 0;
        font-size: 12.5px; letter-spacing: 0.1em;
        color: var(--color-text); opacity: 0.78;
    }

    /* ======== 2 · 信息架构：简约视图隐藏宫格/长列表/推荐器（更多弹窗承接） ======== */
    .zw-home-flow .zw-catgrid, .zw-home-flow .zw-stats,
    .zw-methods, .fr-wrapper, .zw-fortune-head { display: none; }

    /* ======== 3 · 今日运势卡 ======== */
    .zw-fortune { margin: 4px 0 14px; }
    .zw-fortune-card {
        display: grid;
        grid-template-columns: 118px 1fr;
        column-gap: 14px; row-gap: 11px;
        padding: 13px 14px 14px;
    }
    /* 顶行：◇ 今日运势 ———— 纳音 ★★★★☆ 4/5 */
    .zw-fc-top {
        display: flex; align-items: center; justify-content: space-between;
        grid-column: 1 / -1;
        padding-bottom: 9px;
        border-bottom: 1px solid rgba(var(--border-rgb), 0.3);
    }
    .zw-fc-top-title {
        display: flex; align-items: center; gap: 8px;
        font-family: var(--font-display);
        font-size: 14px; letter-spacing: 0.2em;
        color: var(--color-gold-light);
    }
    .zw-fc-top-title::before {
        content: ''; width: 6px; height: 6px;
        transform: rotate(45deg);
        background: var(--color-gold);
        box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.5);
    }
    .zw-fc-top-title::after {
        content: ''; width: 34px; height: 1px;
        background: linear-gradient(90deg, rgba(var(--gold-rgb), 0.55), transparent);
    }
    .zw-fc-top-right { display: flex; align-items: center; gap: 9px; }
    .zw-fc-top-nayin { font-size: 11px; letter-spacing: 0.08em; color: var(--color-muted); }
    .zw-fc-top-stars { gap: 2px; }
    .zw-fc-top-stars i { font-size: 10px; }
    .zw-fc-top-stars .zw-fortune-stars-label { font-size: 10px; margin-left: 3px; }

    /* 干支字牌：墨纹金涡底 + 竖排大字 + 朱砂小印 */
    .zw-fortune-gz { display: contents; }
    .zw-fortune-gz-label, .zw-fortune-gz-nayin, .zw-fortune-gz .zw-fortune-stars { display: none; }
    .zw-fortune-gz-chars {
        grid-column: 1; grid-row: 2 / span 2;
        display: flex; align-items: center; justify-content: center;
        writing-mode: vertical-rl;
        min-height: 150px;
        font-size: 31px; letter-spacing: 0.12em; line-height: 1;
        color: var(--color-gold-light);
        text-shadow: 0 1px 10px rgba(0,0,0,0.65);
        background: url('img/home/ganzhi_tile.jpg') center / cover no-repeat;
        border: 1px solid rgba(var(--gold-rgb), 0.32);
        border-radius: 13px;
        position: relative;
    }
    .zw-fortune-gz-chars::after {
        content: '知微';
        position: absolute; right: 7px; bottom: 7px;
        writing-mode: vertical-rl;
        padding: 2.5px 1.5px;
        font-size: 8px; letter-spacing: 0.05em; line-height: 1.05;
        color: #F5E9DC;
        background: linear-gradient(160deg, #C0453A, #96302A);
        border-radius: 2px;
    }
    /* 宜忌区：占右上格，行式排布 */
    .zw-fortune-main { display: contents; }
    .zw-fortune-grid {
        grid-column: 2; grid-row: 2;
        display: flex; flex-direction: column; gap: 9px;
        padding: 0; border: none;
    }
    /* 幸运色/方位行：右下格一行并排 */
    .zw-fi-color-dir { display: contents; }
    .zw-fortune-grid .zw-fi-color, .zw-fortune-grid .zw-fi-dir { padding: 0; }
    .zw-fi-color { grid-column: 2; grid-row: 3; }
    .zw-fi-dir { grid-column: 2; grid-row: 3; justify-self: end; text-align: right; }
    .zw-fi-color .zw-fortune-item-title, .zw-fi-dir .zw-fortune-item-title { margin-bottom: 4px; }

    /* 命主专属：整行 */
    .zw-fortune-personal { grid-column: 1 / -1; }

    /* ======== 4 · 今日财运 · 宣纸金横幅 ======== */
    .zw-fc-cai {
        display: flex; align-items: center; gap: 12px;
        grid-column: 1 / -1;
        padding: 12px 14px;
        background: linear-gradient(120deg, #F3E8CF, #E7D6B4 60%, #EBDDBF);
        border: 1px solid rgba(var(--gold-rgb), 0.5);
        border-radius: 15px;
        text-decoration: none;
        box-shadow: 0 2px 10px rgba(0,0,0,0.22);
        -webkit-tap-highlight-color: transparent;
    }
    .zw-fc-cai-seal {
        display: flex; align-items: center; justify-content: center;
        width: 46px; height: 46px; flex-shrink: 0;
        font-family: var(--font-display);
        font-size: 22px; color: #E8C77E;
        background: radial-gradient(circle at 35% 30%, #2A2118, #14100A 70%);
        border: 1px solid rgba(201, 169, 97, 0.55);
        border-radius: 50%;
        box-shadow: inset 0 1px 3px rgba(232,199,126,0.25), 0 2px 6px rgba(0,0,0,0.3);
    }
    .zw-fc-cai-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
    .zw-fc-cai-body b {
        font-family: var(--font-display);
        font-size: 15px; letter-spacing: 0.12em; color: #3A2B12;
    }
    .zw-fc-cai-body span {
        font-size: 11.5px; letter-spacing: 0.03em; color: #6B5836;
        display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
    }
    .zw-fc-cai > i { color: #8A7346; font-size: 12px; }
    .zw-fc-cai:active { filter: brightness(0.96); }
    /* 寄语原文已由财运横幅承接，简约视图隐藏旧条 */
    .zw-fortune-msg { display: none; }

    /* ======== 5 · 签到条 · 钱袋图标行 ======== */
    .zw-checkin-area {
        grid-column: 1 / -1;
        display: flex; align-items: center; gap: 11px;
        padding: 11px 13px;
        background: rgba(var(--surface-rgb), 0.42);
        border: 1px solid rgba(var(--border-rgb), 0.5);
        border-radius: 15px;
    }
    .zw-checkin-area::before {
        content: ''; flex-shrink: 0;
        width: 40px; height: 40px;
        background: radial-gradient(circle at 35% 30%, rgba(var(--gold-rgb), 0.3), rgba(var(--gold-rgb), 0.08));
        border: 1px solid rgba(var(--gold-rgb), 0.45);
        border-radius: 50%;
    }
    .zw-checkin-area .checkin-status {
        flex: 1; min-width: 0;
        font-size: 11px; line-height: 1.5; color: var(--color-muted);
    }
    .zw-checkin-btn {
        margin-left: auto; flex-shrink: 0;
        padding: 7px 16px;
        font-size: 12px; letter-spacing: 0.08em;
        background: none;
        border: 1px solid rgba(var(--gold-rgb), 0.55);
        border-radius: 999px;
        color: var(--color-gold-light);
    }
    .zw-checkin-btn i { display: none; }
    .zw-checkin-btn .checkin-btn-reward { margin-left: 4px; }

    /* ======== 6 · 推荐功能四宫 ======== */
    .zw-app-recs { display: block; margin: 4px 0 6px; }
    .zw-app-recs-head {
        display: flex; align-items: center; gap: 8px;
        padding: 0 2px; margin-bottom: 12px;
    }
    .zw-app-recs-title {
        display: flex; align-items: center; gap: 8px;
        font-family: var(--font-display);
        font-size: 13px; letter-spacing: 0.24em;
        color: var(--color-gold);
    }
    .zw-app-recs-title::before {
        content: ''; width: 6px; height: 6px; transform: rotate(45deg);
        background: var(--color-gold); box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.5);
    }
    .zw-app-recs-title::after {
        content: ''; width: 34px; height: 1px;
        background: linear-gradient(90deg, rgba(var(--gold-rgb), 0.55), transparent);
    }
    .zw-app-recs-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .zw-app-rec {
        display: flex; flex-direction: column; align-items: center; gap: 5px;
        padding: 4px 2px;
        background: none; border: none;
        text-decoration: none; cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .zw-app-rec-orb {
        display: flex; align-items: center; justify-content: center;
        width: 62px; height: 62px;
        border-radius: 50%;
        border: 1px solid rgba(var(--gold-rgb), 0.4);
        background-size: cover; background-position: center;
        box-shadow: 0 3px 10px rgba(0,0,0,0.35), inset 0 0 0 3px rgba(var(--bg-rgb), 0.55);
        color: var(--color-gold-light); font-size: 21px;
        transition: transform 0.18s ease, border-color 0.18s ease;
    }
    .zw-app-rec:active .zw-app-rec-orb { transform: scale(0.9); border-color: rgba(var(--gold-rgb), 0.7); }
    .zw-app-rec-qigua { background-image: url('img/home/m_qigua.jpg'); }
    .zw-app-rec-bazi  { background-image: url('img/home/m_bazi.jpg'); }
    .zw-app-rec-ziwei { background-image: url('img/home/m_ziwei.jpg'); }
    .zw-app-rec-more  { background: radial-gradient(circle at 35% 30%, rgba(var(--gold-rgb), 0.18), rgba(var(--gold-rgb), 0.05)); }
    .zw-app-rec b {
        font-family: var(--font-display);
        font-size: 13px; letter-spacing: 0.14em; text-indent: 0.14em;
        color: var(--color-text); font-weight: 600;
    }
    .zw-app-rec span:last-child {
        font-size: 9.5px; letter-spacing: 0.02em;
        color: var(--color-muted); opacity: 0.85;
        white-space: nowrap;
    }
}}

/* ===== v9b · 修正：宜忌网格内部两列 + 字牌行位 + 推荐宫入流排序 ===== */
@media (max-width: 767px) {
html:not(.zw-classic) {
    .zw-fortune-gz-chars { grid-row: 2; }                 /* 字牌只跨第二行，随内容拉伸 */
    .zw-fortune-grid {                                    /* 宜/忌整行，幸运色与方位并置一行 */
        display: grid; grid-template-columns: 1fr auto;
        column-gap: 12px; row-gap: 9px; align-items: start;
    }
    .zw-fortune-grid .zw-fi-yi, .zw-fortune-grid .zw-fi-ji { grid-column: 1 / -1; }
    .zw-fortune-grid .zw-fi-color { grid-column: 1; }
    .zw-fortune-grid .zw-fi-dir { grid-column: 2; text-align: right; }
    .zw-fortune-grid .zw-fi-dir .zw-fortune-item-title { justify-content: flex-end; }
    .zw-fortune-profile-tag { display: none; }            /* 档案标签与命主专属块信息重复，收起 */
    .zw-home-flow .zw-app-recs { order: 3; }              /* 问候1 · 运势2 · 推荐3（其余已隐藏） */
    .zw-fortune { margin-bottom: 8px; }
}}

/* ===== v9c · 细节修正：签到行序/顶行留白/推荐宫小字 ===== */
@media (max-width: 767px) {
html:not(.zw-classic) {
    .zw-fc-top-stars .zw-fortune-stars-label { display: none; }  /* 星分交给干支区原标签，顶行仅留星 */
    .zw-checkin-area { flex-direction: row; flex-wrap: nowrap; }
    .zw-checkin-area::before { order: 1; }
    .zw-checkin-area .checkin-status { order: 2; flex: 1 1 auto; }
    .zw-checkin-area .zw-checkin-btn { order: 3; width: auto; flex: 0 0 auto; margin-left: 0; }
    .zw-app-rec span:last-child { white-space: normal; text-align: center; line-height: 1.35; max-width: 76px; }
}}

/* ===== v9d · 签到钱袋图标（默认隐藏，仅简约移动端） ===== */
.zw-checkin-ico { display: none; }
@media (max-width: 767px) {
html:not(.zw-classic) {
    .zw-checkin-ico {
        display: flex; align-items: center; justify-content: center;
        order: 1; flex-shrink: 0;
        width: 40px; height: 40px;
        font-size: 16px; color: var(--color-gold-light);
        background: radial-gradient(circle at 35% 30%, rgba(var(--gold-rgb), 0.3), rgba(var(--gold-rgb), 0.08));
        border: 1px solid rgba(var(--gold-rgb), 0.45);
        border-radius: 50%;
    }
    .zw-checkin-area::before { content: none; }         /* 真图标替代占位圆 */
    .zw-checkin-area .checkin-status { text-align: left; }
}}

/* ===== v9e · 明色主题可读性修正 ===== */
@media (max-width: 767px) {
html:not(.zw-classic) {
    .zw-checkin-btn { color: var(--color-gold); border-color: rgba(var(--gold-rgb), 0.6); }
    .zw-fortune-gz-chars { color: #E8C77E; text-shadow: 0 1px 6px rgba(0,0,0,0.8), 0 0 18px rgba(0,0,0,0.5); }
}}

/* ===== v9f · 明色主题签到钮：压过旧主题提权规则（白字白底不可见） ===== */
@media (max-width: 767px) {
    html[data-theme="taiji"]:not(.zw-classic) .zw-checkin-btn,
    html[data-theme="zhusha"]:not(.zw-classic) .zw-checkin-btn {
        color: var(--color-gold);
    }
    html[data-theme="taiji"]:not(.zw-classic) .zw-checkin-btn .checkin-btn-reward,
    html[data-theme="zhusha"]:not(.zw-classic) .zw-checkin-btn .checkin-btn-reward {
        color: var(--color-gold);
        background: rgba(var(--gold-rgb), 0.12);
    }
}

/* ============================================================
   ZW-HOME v10 · 简约移动端贴稿修正（20260917i）
   ① 宜/忌改圆形徽 + 半透明胶囊，并入深色面板
   ② 命主专属卡：新月夜空底图（card_night.jpg）
   ③ 签到条：夜山底图（card_mt.jpg）
   ④ 推荐功能：照片圆章 → 金线图标细环（贴参考稿）
   ⑤ 问候区加高、右图显影更足
   ============================================================ */

.zw-yiji-badge { display: none; }

@media (max-width: 767px) {
html:not(.zw-classic) {

    /* ---- ① 宜忌面板 ---- */
    .zw-fortune-grid {
        background: rgba(var(--surface-rgb), 0.55);
        border: 1px solid rgba(var(--border-rgb), 0.55);
        border-radius: 14px;
        padding: 13px 13px 12px;
        row-gap: 10px;
    }
    .zw-fi-yi, .zw-fi-ji { display: flex; align-items: flex-start; gap: 9px; }
    .zw-fi-yi .zw-fortune-item-title, .zw-fi-ji .zw-fortune-item-title { display: none; }
    .zw-yiji-badge {
        display: inline-flex; align-items: center; justify-content: center;
        width: 27px; height: 27px; flex-shrink: 0;
        font-family: var(--font-display);
        font-size: 12.5px; line-height: 1;
        border-radius: 50%;
    }
    .zw-badge-yi { color: #A9D8BC; background: rgba(74, 128, 94, 0.4); border: 1px solid rgba(140, 200, 160, 0.4); }
    .zw-badge-ji { color: #E4A8A8; background: rgba(140, 74, 74, 0.4); border: 1px solid rgba(210, 140, 140, 0.38); }
    .zw-fi-yi .zw-fortune-tags, .zw-fi-ji .zw-fortune-tags { display: flex; flex-wrap: wrap; gap: 7px; }
    .zw-fi-yi .zw-fortune-tag {
        padding: 4px 13px; font-size: 12px; letter-spacing: 0.04em;
        color: #B9DCC6; background: rgba(84, 140, 104, 0.2);
        border: none; border-radius: 999px;
    }
    .zw-fi-ji .zw-fortune-tag {
        padding: 4px 13px; font-size: 12px; letter-spacing: 0.04em;
        color: #DFAEAE; background: rgba(150, 84, 84, 0.2);
        border: none; border-radius: 999px;
    }
    .zw-fortune-grid .zw-fi-color, .zw-fortune-grid .zw-fi-dir {
        border-top: 1px solid rgba(var(--border-rgb), 0.35);
        padding-top: 10px;
    }

    /* ---- ② 命主专属 · 新月夜空卡 ---- */
    .zw-fortune-personal {
        border-radius: 16px;
        border: 1px solid rgba(201, 169, 97, 0.3);
        background:
            linear-gradient(115deg, rgba(9, 9, 16, 0.82) 30%, rgba(9, 9, 16, 0.55) 70%, rgba(9, 9, 16, 0.75)),
            url('img/home/card_night.jpg') center / cover no-repeat;
        padding: 13px 14px;
        color: #EAE4D6;
    }
    .zw-fortune-personal .zw-fortune-personal-head { color: #E8C77E; }
    .zw-fortune-personal .zw-fp-chip {
        background: rgba(12, 12, 20, 0.55);
        border: 1px solid rgba(201, 169, 97, 0.38);
        color: #EAE4D6;
    }
    .zw-fortune-personal .zw-fp-chip i { color: #E8C77E; }
    .zw-fortune-personal .zw-fp-chip em { color: rgba(234, 228, 214, 0.6); }
    .zw-fortune-personal .zw-fp-luck { border-color: rgba(232, 199, 126, 0.55); }
    .zw-fortune-personal .zw-fp-warn { border-color: rgba(200, 120, 100, 0.5); }
    .zw-fortune-personal .zw-fortune-personal-note { color: rgba(234, 228, 214, 0.72); }
    .zw-fortune-personal .zw-fortune-personal-note strong { color: #E8C77E; }

    /* ---- ③ 签到条 · 夜山底图 ---- */
    .zw-checkin-area {
        background:
            linear-gradient(100deg, rgba(9, 9, 16, 0.86) 34%, rgba(9, 9, 16, 0.5) 72%, rgba(9, 9, 16, 0.72)),
            url('img/home/card_mt.jpg') center bottom / cover no-repeat;
        border: 1px solid rgba(201, 169, 97, 0.28);
        border-radius: 16px;
        padding: 13px 14px;
    }
    .zw-checkin-area .checkin-status { color: rgba(234, 228, 214, 0.85); }
    .zw-checkin-area .zw-checkin-btn {
        color: #E8C77E; border: 1px solid rgba(232, 199, 126, 0.55);
        background: rgba(12, 12, 20, 0.45);
    }
    .zw-checkin-area .zw-checkin-btn.zw-checkin-done {
        color: rgba(234, 228, 214, 0.6);
        border-color: rgba(201, 169, 97, 0.3);
    }

    /* ---- ④ 推荐功能 · 金线图标细环 ---- */
    .zw-app-rec-orb {
        background: rgba(var(--gold-rgb), 0.07);
        border: 1px solid rgba(var(--gold-rgb), 0.55);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        color: var(--color-gold-light);
        font-size: 22px;
    }
    .zw-app-rec-char {
        font-family: var(--font-display);
        font-size: 24px; font-weight: 600;
        letter-spacing: 0;
    }
    .zw-app-rec b { color: var(--color-text); }

    /* ---- ⑤ 问候区：加高、右图显影更足 ---- */
    .zw-app-greet { padding: 18px 2px 30px; }
    .zw-app-greet-art {
        width: 80%;
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.5) 30%, #000 58%);
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.5) 30%, #000 58%);
    }

    /* ---- 杂项归位 ---- */
    .zw-fortune-profile-link { grid-column: 1 / -1; }
    .zw-fc-cai { border-radius: 18px; }
}}

/* ===== v10b · 贴稿细节：宜忌同行/幸运行单行/已签态 ===== */
@media (max-width: 767px) {
html:not(.zw-classic) {
    .zw-fi-yi, .zw-fi-ji { flex-direction: row; align-items: center; }
    .zw-fi-yi .zw-fortune-tags, .zw-fi-ji .zw-fortune-tags { flex: 1; }
    .zw-fortune-grid .zw-fi-color, .zw-fortune-grid .zw-fi-dir {
        display: flex; align-items: center; gap: 8px;
    }
    .zw-fi-color .zw-fortune-item-title, .zw-fi-dir .zw-fortune-item-title { margin: 0; }
    .zw-fi-color .zw-fortune-item-title i, .zw-fi-dir .zw-fortune-item-title i { display: none; }
    .zw-fortune-color-row { display: flex; align-items: center; gap: 6px; }
    .zw-checkin-btn.zw-checkin-done .checkin-btn-text { display: none; }
    .zw-checkin-btn.zw-checkin-done .checkin-btn-reward { margin-left: 0; }
}}

/* ===== v10c · 胶囊收紧 + 明色主题宜忌适配 ===== */
@media (max-width: 767px) {
html:not(.zw-classic) {
    .zw-fi-yi .zw-fortune-tags, .zw-fi-ji .zw-fortune-tags { gap: 6px; }
    .zw-fi-yi .zw-fortune-tag, .zw-fi-ji .zw-fortune-tag { padding: 4px 11px; font-size: 11.5px; }
}
html[data-theme="taiji"]:not(.zw-classic) .zw-badge-yi,
html[data-theme="zhusha"]:not(.zw-classic) .zw-badge-yi { color: #FFFFFF; background: #4A805E; border-color: #4A805E; }
html[data-theme="taiji"]:not(.zw-classic) .zw-badge-ji,
html[data-theme="zhusha"]:not(.zw-classic) .zw-badge-ji { color: #FFFFFF; background: #A14A4A; border-color: #A14A4A; }
html[data-theme="taiji"]:not(.zw-classic) .zw-fi-yi .zw-fortune-tag,
html[data-theme="zhusha"]:not(.zw-classic) .zw-fi-yi .zw-fortune-tag { color: #33634A; background: rgba(74, 128, 94, 0.16); }
html[data-theme="taiji"]:not(.zw-classic) .zw-fi-ji .zw-fortune-tag,
html[data-theme="zhusha"]:not(.zw-classic) .zw-fi-ji .zw-fortune-tag { color: #8C3F3F; background: rgba(150, 84, 84, 0.14); }
}

/* ============================================================
   ZW-HOME v11 · 字牌章入图 / 命主卡背景归正 / 功能分类六签
   ① 干支字牌：印章已直接画进 ganzhi_tile.jpg，拆除 CSS 叠加章
   ② 命主专属卡：新月背景定位右上可视区，不再被圆角裁成"歪月"
   ③ 推荐功能四宫 → 功能分类六签（点击平滑滚动至 #sec-*）；
      简约视图恢复术法分区列表以承接锚点
   ============================================================ */

.zw-app-cats { display: none; }

@media (max-width: 767px) {
html:not(.zw-classic) {

    /* ① 章在图里，伪元素章退场 */
    .zw-fortune-gz-chars::after { content: none; }
    /* 字牌改竖版构图， cover 居中即可 */
    .zw-fortune-gz-chars { background-position: center; }

    /* ② 新月归位：定位右上可视区（85%,18%），不再切半 */
    .zw-fortune-personal { background-position: 0 0, 85% 18%; }

    /* ③ 功能分类六签 */
    .zw-home-flow .zw-app-cats { order: 3; }
    .zw-app-cats { display: block; margin: 4px 0 10px; }
    .zw-app-cats-head {
        display: flex; align-items: center; gap: 8px;
        padding: 0 2px; margin-bottom: 12px;
    }
    .zw-app-cats-title {
        display: flex; align-items: center; gap: 8px;
        font-family: var(--font-display);
        font-size: 13px; letter-spacing: 0.24em;
        color: var(--color-gold);
    }
    .zw-app-cats-title::before {
        content: ''; width: 6px; height: 6px; transform: rotate(45deg);
        background: var(--color-gold); box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.5);
    }
    .zw-app-cats-title::after {
        content: ''; width: 34px; height: 1px;
        background: linear-gradient(90deg, rgba(var(--gold-rgb), 0.55), transparent);
    }
    .zw-app-cats-row {
        display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px;
    }
    .zw-app-cat-tab {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        padding: 12px 6px;
        text-decoration: none;
        background: rgba(var(--surface-rgb), 0.42);
        border: 1px solid rgba(var(--gold-rgb), 0.32);
        border-radius: 13px;
        -webkit-tap-highlight-color: transparent;
        transition: border-color 0.18s ease, background 0.18s ease;
    }
    .zw-app-cat-tab:active { border-color: rgba(var(--gold-rgb), 0.65); background: rgba(var(--gold-rgb), 0.1); }
    .zw-app-cat-glyph {
        display: flex; align-items: center; justify-content: center;
        width: 30px; height: 30px; flex-shrink: 0;
        font-family: var(--font-display);
        font-size: 15px; color: var(--color-gold-light);
        background: radial-gradient(circle at 35% 30%, rgba(var(--gold-rgb), 0.28), rgba(var(--gold-rgb), 0.08));
        border: 1px solid rgba(var(--gold-rgb), 0.42);
        border-radius: 50%;
    }
    .zw-app-cat-tab b {
        font-family: var(--font-display);
        font-size: 14px; letter-spacing: 0.14em; text-indent: 0.14em;
        color: var(--color-text); font-weight: 600;
    }

    /* ③ 简约视图恢复术法分区列表（六签锚点承接；金刚宫格与统计仍隐藏） */
    .zw-methods { display: block; margin-top: 6px; }
}}

/* ===== v11b · 功能分类签：金字圆徽 → 鎏金图标图（ic_{cat}.jpg） ===== */
@media (max-width: 767px) {
html:not(.zw-classic) {
    .zw-app-cat-glyph {
        width: 34px; height: 34px;
        background: #101018 center / cover no-repeat;
        border: 1px solid rgba(var(--gold-rgb), 0.45);
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    }
    .zw-cat-ic-origin  { background-image: url('img/home/ic_origin.jpg'); }
    .zw-cat-ic-sanshi  { background-image: url('img/home/ic_sanshi.jpg'); }
    .zw-cat-ic-mingli  { background-image: url('img/home/ic_mingli.jpg'); }
    .zw-cat-ic-bushi   { background-image: url('img/home/ic_bushi.jpg'); }
    .zw-cat-ic-western { background-image: url('img/home/ic_western.jpg'); }
    .zw-cat-ic-tool    { background-image: url('img/home/ic_tool.jpg'); }
}}

/* v11c · 分类图标放大 */
@media (max-width: 767px) { html:not(.zw-classic) {
    .zw-app-cat-glyph { width: 40px; height: 40px; }
    .zw-app-cat-tab { gap: 10px; padding: 13px 6px; }
}}

/* ===== v11d · 问候横幅右缘出血顶到屏幕边（消除右侧黑缝） ===== */
@media (max-width: 767px) { html:not(.zw-classic) {
    .zw-app-greet { margin-right: -1.5rem; }   /* 抵消 .container 右 padding，图直达屏幕边 */
    .zw-app-greet-art { right: 0; border-radius: 0; }
}}

/* ===== v12 · 干支字牌六主题各一图（章已入画并留安全边） ===== */
@media (max-width: 767px) {
    html[data-theme="taiji"]:not(.zw-classic) .zw-fortune-gz-chars {
        background-image: url('img/home/taiji/ganzhi_tile.jpg');
        border-color: rgba(43, 43, 43, 0.25);
        color: #3A332A; text-shadow: 0 1px 2px rgba(245, 241, 232, 0.7);
    }
    html[data-theme="zhusha"]:not(.zw-classic) .zw-fortune-gz-chars {
        background-image: url('img/home/zhusha/ganzhi_tile.jpg');
        border-color: rgba(140, 47, 36, 0.3);
        color: #8C2F24; text-shadow: 0 1px 2px rgba(247, 244, 240, 0.7);
    }
    html[data-theme="ziwei"]:not(.zw-classic) .zw-fortune-gz-chars {
        background-image: url('img/home/ziwei/ganzhi_tile.jpg');
        border-color: rgba(196, 181, 224, 0.4);
        color: #E3D9F5; text-shadow: 0 1px 8px rgba(10, 6, 26, 0.8);
    }
    html[data-theme="xuanji"]:not(.zw-classic) .zw-fortune-gz-chars {
        background-image: url('img/home/xuanji/ganzhi_tile.jpg');
    }
    html[data-theme="liujin"]:not(.zw-classic) .zw-fortune-gz-chars {
        background-image: url('img/home/liujin/ganzhi_tile.jpg');
    }
}

/* ============================================================
   ZW-HOME v13 · 简约移动端六主题全图适配（20260917p）
   问候横幅(6时段×6主题) / 干支字牌(v12) / 命主卡 / 签到卡 /
   功能分类图标，全部一主题一套实图。
   ============================================================ */
@media (max-width: 767px) {
    html:not(.zw-classic) .zw-app-greet-art[data-gimg="dawn"] { background-image: url('img/home/greet_dawn.jpg'); }
    html:not(.zw-classic) .zw-app-greet-art[data-gimg="morning"] { background-image: url('img/home/greet_morning.jpg'); }
    html:not(.zw-classic) .zw-app-greet-art[data-gimg="noon"] { background-image: url('img/home/greet_noon.jpg'); }
    html:not(.zw-classic) .zw-app-greet-art[data-gimg="afternoon"] { background-image: url('img/home/greet_afternoon.jpg'); }
    html:not(.zw-classic) .zw-app-greet-art[data-gimg="moon"] { background-image: url('img/home/greet_moon.jpg'); }
    html:not(.zw-classic) .zw-app-greet-art[data-gimg="latenight"] { background-image: url('img/home/greet_latenight.jpg'); }

    html[data-theme="taiji"]:not(.zw-classic) .zw-app-greet-art[data-gimg="dawn"] { background-image: url('img/home/taiji/greet_dawn.jpg'); }
    html[data-theme="taiji"]:not(.zw-classic) .zw-app-greet-art[data-gimg="morning"] { background-image: url('img/home/taiji/greet_morning.jpg'); }
    html[data-theme="taiji"]:not(.zw-classic) .zw-app-greet-art[data-gimg="noon"] { background-image: url('img/home/taiji/greet_noon.jpg'); }
    html[data-theme="taiji"]:not(.zw-classic) .zw-app-greet-art[data-gimg="afternoon"] { background-image: url('img/home/taiji/greet_afternoon.jpg'); }
    html[data-theme="taiji"]:not(.zw-classic) .zw-app-greet-art[data-gimg="moon"] { background-image: url('img/home/taiji/greet_moon.jpg'); }
    html[data-theme="taiji"]:not(.zw-classic) .zw-app-greet-art[data-gimg="latenight"] { background-image: url('img/home/taiji/greet_latenight.jpg'); }
    html[data-theme="taiji"]:not(.zw-classic) .zw-fortune-personal {
        background-image:
            linear-gradient(115deg, rgba(9, 9, 16, 0.82) 30%, rgba(9, 9, 16, 0.55) 70%, rgba(9, 9, 16, 0.75)),
            url('img/home/taiji/card_night.jpg');
    }
    html[data-theme="taiji"]:not(.zw-classic) .zw-checkin-area {
        background-image:
            linear-gradient(100deg, rgba(9, 9, 16, 0.86) 34%, rgba(9, 9, 16, 0.5) 72%, rgba(9, 9, 16, 0.72)),
            url('img/home/taiji/card_mt.jpg');
    }
    html[data-theme="taiji"]:not(.zw-classic) .zw-app-cat-glyph { background-color: #EEE4D1; }
    html[data-theme="taiji"]:not(.zw-classic) .zw-cat-ic-origin { background-image: url('img/home/taiji/ic_origin.jpg'); }
    html[data-theme="taiji"]:not(.zw-classic) .zw-cat-ic-sanshi { background-image: url('img/home/taiji/ic_sanshi.jpg'); }
    html[data-theme="taiji"]:not(.zw-classic) .zw-cat-ic-mingli { background-image: url('img/home/taiji/ic_mingli.jpg'); }
    html[data-theme="taiji"]:not(.zw-classic) .zw-cat-ic-bushi { background-image: url('img/home/taiji/ic_bushi.jpg'); }
    html[data-theme="taiji"]:not(.zw-classic) .zw-cat-ic-western { background-image: url('img/home/taiji/ic_western.jpg'); }
    html[data-theme="taiji"]:not(.zw-classic) .zw-cat-ic-tool { background-image: url('img/home/taiji/ic_tool.jpg'); }

    html[data-theme="zhusha"]:not(.zw-classic) .zw-app-greet-art[data-gimg="dawn"] { background-image: url('img/home/zhusha/greet_dawn.jpg'); }
    html[data-theme="zhusha"]:not(.zw-classic) .zw-app-greet-art[data-gimg="morning"] { background-image: url('img/home/zhusha/greet_morning.jpg'); }
    html[data-theme="zhusha"]:not(.zw-classic) .zw-app-greet-art[data-gimg="noon"] { background-image: url('img/home/zhusha/greet_noon.jpg'); }
    html[data-theme="zhusha"]:not(.zw-classic) .zw-app-greet-art[data-gimg="afternoon"] { background-image: url('img/home/zhusha/greet_afternoon.jpg'); }
    html[data-theme="zhusha"]:not(.zw-classic) .zw-app-greet-art[data-gimg="moon"] { background-image: url('img/home/zhusha/greet_moon.jpg'); }
    html[data-theme="zhusha"]:not(.zw-classic) .zw-app-greet-art[data-gimg="latenight"] { background-image: url('img/home/zhusha/greet_latenight.jpg'); }
    html[data-theme="zhusha"]:not(.zw-classic) .zw-fortune-personal {
        background-image:
            linear-gradient(115deg, rgba(9, 9, 16, 0.82) 30%, rgba(9, 9, 16, 0.55) 70%, rgba(9, 9, 16, 0.75)),
            url('img/home/zhusha/card_night.jpg');
    }
    html[data-theme="zhusha"]:not(.zw-classic) .zw-checkin-area {
        background-image:
            linear-gradient(100deg, rgba(9, 9, 16, 0.86) 34%, rgba(9, 9, 16, 0.5) 72%, rgba(9, 9, 16, 0.72)),
            url('img/home/zhusha/card_mt.jpg');
    }
    html[data-theme="zhusha"]:not(.zw-classic) .zw-app-cat-glyph { background-color: #F8F3E7; }
    html[data-theme="zhusha"]:not(.zw-classic) .zw-cat-ic-origin { background-image: url('img/home/zhusha/ic_origin.jpg'); }
    html[data-theme="zhusha"]:not(.zw-classic) .zw-cat-ic-sanshi { background-image: url('img/home/zhusha/ic_sanshi.jpg'); }
    html[data-theme="zhusha"]:not(.zw-classic) .zw-cat-ic-mingli { background-image: url('img/home/zhusha/ic_mingli.jpg'); }
    html[data-theme="zhusha"]:not(.zw-classic) .zw-cat-ic-bushi { background-image: url('img/home/zhusha/ic_bushi.jpg'); }
    html[data-theme="zhusha"]:not(.zw-classic) .zw-cat-ic-western { background-image: url('img/home/zhusha/ic_western.jpg'); }
    html[data-theme="zhusha"]:not(.zw-classic) .zw-cat-ic-tool { background-image: url('img/home/zhusha/ic_tool.jpg'); }

    html[data-theme="ziwei"]:not(.zw-classic) .zw-app-greet-art[data-gimg="dawn"] { background-image: url('img/home/ziwei/greet_dawn.jpg'); }
    html[data-theme="ziwei"]:not(.zw-classic) .zw-app-greet-art[data-gimg="morning"] { background-image: url('img/home/ziwei/greet_morning.jpg'); }
    html[data-theme="ziwei"]:not(.zw-classic) .zw-app-greet-art[data-gimg="noon"] { background-image: url('img/home/ziwei/greet_noon.jpg'); }
    html[data-theme="ziwei"]:not(.zw-classic) .zw-app-greet-art[data-gimg="afternoon"] { background-image: url('img/home/ziwei/greet_afternoon.jpg'); }
    html[data-theme="ziwei"]:not(.zw-classic) .zw-app-greet-art[data-gimg="moon"] { background-image: url('img/home/ziwei/greet_moon.jpg'); }
    html[data-theme="ziwei"]:not(.zw-classic) .zw-app-greet-art[data-gimg="latenight"] { background-image: url('img/home/ziwei/greet_latenight.jpg'); }
    html[data-theme="ziwei"]:not(.zw-classic) .zw-fortune-personal {
        background-image:
            linear-gradient(115deg, rgba(9, 9, 16, 0.82) 30%, rgba(9, 9, 16, 0.55) 70%, rgba(9, 9, 16, 0.75)),
            url('img/home/ziwei/card_night.jpg');
    }
    html[data-theme="ziwei"]:not(.zw-classic) .zw-checkin-area {
        background-image:
            linear-gradient(100deg, rgba(9, 9, 16, 0.86) 34%, rgba(9, 9, 16, 0.5) 72%, rgba(9, 9, 16, 0.72)),
            url('img/home/ziwei/card_mt.jpg');
    }
    html[data-theme="ziwei"]:not(.zw-classic) .zw-app-cat-glyph { background-color: #1F0234; }
    html[data-theme="ziwei"]:not(.zw-classic) .zw-cat-ic-origin { background-image: url('img/home/ziwei/ic_origin.jpg'); }
    html[data-theme="ziwei"]:not(.zw-classic) .zw-cat-ic-sanshi { background-image: url('img/home/ziwei/ic_sanshi.jpg'); }
    html[data-theme="ziwei"]:not(.zw-classic) .zw-cat-ic-mingli { background-image: url('img/home/ziwei/ic_mingli.jpg'); }
    html[data-theme="ziwei"]:not(.zw-classic) .zw-cat-ic-bushi { background-image: url('img/home/ziwei/ic_bushi.jpg'); }
    html[data-theme="ziwei"]:not(.zw-classic) .zw-cat-ic-western { background-image: url('img/home/ziwei/ic_western.jpg'); }
    html[data-theme="ziwei"]:not(.zw-classic) .zw-cat-ic-tool { background-image: url('img/home/ziwei/ic_tool.jpg'); }

    html[data-theme="xuanji"]:not(.zw-classic) .zw-app-greet-art[data-gimg="dawn"] { background-image: url('img/home/xuanji/greet_dawn.jpg'); }
    html[data-theme="xuanji"]:not(.zw-classic) .zw-app-greet-art[data-gimg="morning"] { background-image: url('img/home/xuanji/greet_morning.jpg'); }
    html[data-theme="xuanji"]:not(.zw-classic) .zw-app-greet-art[data-gimg="noon"] { background-image: url('img/home/xuanji/greet_noon.jpg'); }
    html[data-theme="xuanji"]:not(.zw-classic) .zw-app-greet-art[data-gimg="afternoon"] { background-image: url('img/home/xuanji/greet_afternoon.jpg'); }
    html[data-theme="xuanji"]:not(.zw-classic) .zw-app-greet-art[data-gimg="moon"] { background-image: url('img/home/xuanji/greet_moon.jpg'); }
    html[data-theme="xuanji"]:not(.zw-classic) .zw-app-greet-art[data-gimg="latenight"] { background-image: url('img/home/xuanji/greet_latenight.jpg'); }
    html[data-theme="xuanji"]:not(.zw-classic) .zw-fortune-personal {
        background-image:
            linear-gradient(115deg, rgba(9, 9, 16, 0.82) 30%, rgba(9, 9, 16, 0.55) 70%, rgba(9, 9, 16, 0.75)),
            url('img/home/xuanji/card_night.jpg');
    }
    html[data-theme="xuanji"]:not(.zw-classic) .zw-checkin-area {
        background-image:
            linear-gradient(100deg, rgba(9, 9, 16, 0.86) 34%, rgba(9, 9, 16, 0.5) 72%, rgba(9, 9, 16, 0.72)),
            url('img/home/xuanji/card_mt.jpg');
    }
    html[data-theme="xuanji"]:not(.zw-classic) .zw-app-cat-glyph { background-color: #101924; }
    html[data-theme="xuanji"]:not(.zw-classic) .zw-cat-ic-origin { background-image: url('img/home/xuanji/ic_origin.jpg'); }
    html[data-theme="xuanji"]:not(.zw-classic) .zw-cat-ic-sanshi { background-image: url('img/home/xuanji/ic_sanshi.jpg'); }
    html[data-theme="xuanji"]:not(.zw-classic) .zw-cat-ic-mingli { background-image: url('img/home/xuanji/ic_mingli.jpg'); }
    html[data-theme="xuanji"]:not(.zw-classic) .zw-cat-ic-bushi { background-image: url('img/home/xuanji/ic_bushi.jpg'); }
    html[data-theme="xuanji"]:not(.zw-classic) .zw-cat-ic-western { background-image: url('img/home/xuanji/ic_western.jpg'); }
    html[data-theme="xuanji"]:not(.zw-classic) .zw-cat-ic-tool { background-image: url('img/home/xuanji/ic_tool.jpg'); }

    html[data-theme="liujin"]:not(.zw-classic) .zw-app-greet-art[data-gimg="dawn"] { background-image: url('img/home/liujin/greet_dawn.jpg'); }
    html[data-theme="liujin"]:not(.zw-classic) .zw-app-greet-art[data-gimg="morning"] { background-image: url('img/home/liujin/greet_morning.jpg'); }
    html[data-theme="liujin"]:not(.zw-classic) .zw-app-greet-art[data-gimg="noon"] { background-image: url('img/home/liujin/greet_noon.jpg'); }
    html[data-theme="liujin"]:not(.zw-classic) .zw-app-greet-art[data-gimg="afternoon"] { background-image: url('img/home/liujin/greet_afternoon.jpg'); }
    html[data-theme="liujin"]:not(.zw-classic) .zw-app-greet-art[data-gimg="moon"] { background-image: url('img/home/liujin/greet_moon.jpg'); }
    html[data-theme="liujin"]:not(.zw-classic) .zw-app-greet-art[data-gimg="latenight"] { background-image: url('img/home/liujin/greet_latenight.jpg'); }
    html[data-theme="liujin"]:not(.zw-classic) .zw-fortune-personal {
        background-image:
            linear-gradient(115deg, rgba(9, 9, 16, 0.82) 30%, rgba(9, 9, 16, 0.55) 70%, rgba(9, 9, 16, 0.75)),
            url('img/home/liujin/card_night.jpg');
    }
    html[data-theme="liujin"]:not(.zw-classic) .zw-checkin-area {
        background-image:
            linear-gradient(100deg, rgba(9, 9, 16, 0.86) 34%, rgba(9, 9, 16, 0.5) 72%, rgba(9, 9, 16, 0.72)),
            url('img/home/liujin/card_mt.jpg');
    }
    html[data-theme="liujin"]:not(.zw-classic) .zw-app-cat-glyph { background-color: #070302; }
    html[data-theme="liujin"]:not(.zw-classic) .zw-cat-ic-origin { background-image: url('img/home/liujin/ic_origin.jpg'); }
    html[data-theme="liujin"]:not(.zw-classic) .zw-cat-ic-sanshi { background-image: url('img/home/liujin/ic_sanshi.jpg'); }
    html[data-theme="liujin"]:not(.zw-classic) .zw-cat-ic-mingli { background-image: url('img/home/liujin/ic_mingli.jpg'); }
    html[data-theme="liujin"]:not(.zw-classic) .zw-cat-ic-bushi { background-image: url('img/home/liujin/ic_bushi.jpg'); }
    html[data-theme="liujin"]:not(.zw-classic) .zw-cat-ic-western { background-image: url('img/home/liujin/ic_western.jpg'); }
    html[data-theme="liujin"]:not(.zw-classic) .zw-cat-ic-tool { background-image: url('img/home/liujin/ic_tool.jpg'); }

}

/* ===== v14 · 幸运色/方位窄屏防重叠 + 字牌边缝处理 ===== */
@media (max-width: 767px) {
html:not(.zw-classic) {
    .zw-fortune-grid { grid-template-columns: 1fr 1fr; }
    .zw-fortune-grid .zw-fi-yi, .zw-fortune-grid .zw-fi-ji { grid-column: 1 / -1; }
    .zw-fortune-grid .zw-fi-color { grid-column: 1; min-width: 0; gap: 6px; }
    .zw-fortune-grid .zw-fi-dir { grid-column: 2; min-width: 0; justify-content: flex-end; gap: 6px; }
    .zw-fi-color .zw-fortune-item-title, .zw-fi-dir .zw-fortune-item-title,
    .zw-fi-color .zw-fortune-color-name, .zw-fi-dir .zw-fortune-dir-name {
        font-size: 12px; white-space: nowrap;
    }
    .zw-fi-color .zw-fortune-color-row { gap: 5px; min-width: 0; }
}}

/* ============================================================
   ZW-HOME v15 · 主题方法图补齐（20260917r）
   紫微补 9 + 玄机 23 + 流金 23，全实物重绘，filter 退场。
   ============================================================ */
@media (min-width: 1024px) {
    html[data-theme="ziwei"] .zw-mcard[data-key="baibaodai"] .zw-mcard-thumb { background-image: url('img/home/ziwei/m_baibaodai.jpg'); filter: none; }
    html[data-theme="ziwei"] .zw-mcard[data-key="baibaodai"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="ziwei"] .zw-mcard[data-key="bazihepan"] .zw-mcard-thumb { background-image: url('img/home/ziwei/m_bazihepan.jpg'); filter: none; }
    html[data-theme="ziwei"] .zw-mcard[data-key="bazihepan"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="ziwei"] .zw-mcard[data-key="fengshui"] .zw-mcard-thumb { background-image: url('img/home/ziwei/m_fengshui.jpg'); filter: none; }
    html[data-theme="ziwei"] .zw-mcard[data-key="fengshui"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="ziwei"] .zw-mcard[data-key="lenormand"] .zw-mcard-thumb { background-image: url('img/home/ziwei/m_lenormand.jpg'); filter: none; }
    html[data-theme="ziwei"] .zw-mcard[data-key="lenormand"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="ziwei"] .zw-mcard[data-key="meirishiling"] .zw-mcard-thumb { background-image: url('img/home/ziwei/m_meirishiling.jpg'); filter: none; }
    html[data-theme="ziwei"] .zw-mcard[data-key="meirishiling"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="ziwei"] .zw-mcard[data-key="sanshuhecan"] .zw-mcard-thumb { background-image: url('img/home/ziwei/m_sanshuhecan.jpg'); filter: none; }
    html[data-theme="ziwei"] .zw-mcard[data-key="sanshuhecan"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="ziwei"] .zw-mcard[data-key="western"] .zw-mcard-thumb { background-image: url('img/home/ziwei/m_western.jpg'); filter: none; }
    html[data-theme="ziwei"] .zw-mcard[data-key="western"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="ziwei"] .zw-mcard[data-key="zeri"] .zw-mcard-thumb { background-image: url('img/home/ziwei/m_zeri.jpg'); filter: none; }
    html[data-theme="ziwei"] .zw-mcard[data-key="zeri"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="ziwei"] .zw-mcard[data-key="zhiji"] .zw-mcard-thumb { background-image: url('img/home/ziwei/m_zhiji.jpg'); filter: none; }
    html[data-theme="ziwei"] .zw-mcard[data-key="zhiji"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="xuanji"] .zw-mcard[data-key="qigua"] .zw-mcard-thumb { background-image: url('img/home/xuanji/m_qigua.jpg'); filter: none; }
    html[data-theme="xuanji"] .zw-mcard[data-key="qigua"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="xuanji"] .zw-mcard[data-key="taiyi"] .zw-mcard-thumb { background-image: url('img/home/xuanji/m_taiyi.jpg'); filter: none; }
    html[data-theme="xuanji"] .zw-mcard[data-key="taiyi"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="xuanji"] .zw-mcard[data-key="qimen"] .zw-mcard-thumb { background-image: url('img/home/xuanji/m_qimen.jpg'); filter: none; }
    html[data-theme="xuanji"] .zw-mcard[data-key="qimen"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="xuanji"] .zw-mcard[data-key="daliuren"] .zw-mcard-thumb { background-image: url('img/home/xuanji/m_daliuren.jpg'); filter: none; }
    html[data-theme="xuanji"] .zw-mcard[data-key="daliuren"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="xuanji"] .zw-mcard[data-key="dayan"] .zw-mcard-thumb { background-image: url('img/home/xuanji/m_dayan.jpg'); filter: none; }
    html[data-theme="xuanji"] .zw-mcard[data-key="dayan"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="xuanji"] .zw-mcard[data-key="bazi"] .zw-mcard-thumb { background-image: url('img/home/xuanji/m_bazi.jpg'); filter: none; }
    html[data-theme="xuanji"] .zw-mcard[data-key="bazi"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="xuanji"] .zw-mcard[data-key="ziwei"] .zw-mcard-thumb { background-image: url('img/home/xuanji/m_ziwei.jpg'); filter: none; }
    html[data-theme="xuanji"] .zw-mcard[data-key="ziwei"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="xuanji"] .zw-mcard[data-key="nayin"] .zw-mcard-thumb { background-image: url('img/home/xuanji/m_nayin.jpg'); filter: none; }
    html[data-theme="xuanji"] .zw-mcard[data-key="nayin"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="xuanji"] .zw-mcard[data-key="qizheng"] .zw-mcard-thumb { background-image: url('img/home/xuanji/m_qizheng.jpg'); filter: none; }
    html[data-theme="xuanji"] .zw-mcard[data-key="qizheng"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="xuanji"] .zw-mcard[data-key="liuyao"] .zw-mcard-thumb { background-image: url('img/home/xuanji/m_liuyao.jpg'); filter: none; }
    html[data-theme="xuanji"] .zw-mcard[data-key="liuyao"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="xuanji"] .zw-mcard[data-key="meihua"] .zw-mcard-thumb { background-image: url('img/home/xuanji/m_meihua.jpg'); filter: none; }
    html[data-theme="xuanji"] .zw-mcard[data-key="meihua"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="xuanji"] .zw-mcard[data-key="xiaoliuren"] .zw-mcard-thumb { background-image: url('img/home/xuanji/m_xiaoliuren.jpg'); filter: none; }
    html[data-theme="xuanji"] .zw-mcard[data-key="xiaoliuren"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="xuanji"] .zw-mcard[data-key="chouqian"] .zw-mcard-thumb { background-image: url('img/home/xuanji/m_chouqian.jpg'); filter: none; }
    html[data-theme="xuanji"] .zw-mcard[data-key="chouqian"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="xuanji"] .zw-mcard[data-key="tarot"] .zw-mcard-thumb { background-image: url('img/home/xuanji/m_tarot.jpg'); filter: none; }
    html[data-theme="xuanji"] .zw-mcard[data-key="tarot"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="xuanji"] .zw-mcard[data-key="western"] .zw-mcard-thumb { background-image: url('img/home/xuanji/m_western.jpg'); filter: none; }
    html[data-theme="xuanji"] .zw-mcard[data-key="western"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="xuanji"] .zw-mcard[data-key="lenormand"] .zw-mcard-thumb { background-image: url('img/home/xuanji/m_lenormand.jpg'); filter: none; }
    html[data-theme="xuanji"] .zw-mcard[data-key="lenormand"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="xuanji"] .zw-mcard[data-key="fengshui"] .zw-mcard-thumb { background-image: url('img/home/xuanji/m_fengshui.jpg'); filter: none; }
    html[data-theme="xuanji"] .zw-mcard[data-key="fengshui"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="xuanji"] .zw-mcard[data-key="zeri"] .zw-mcard-thumb { background-image: url('img/home/xuanji/m_zeri.jpg'); filter: none; }
    html[data-theme="xuanji"] .zw-mcard[data-key="zeri"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="xuanji"] .zw-mcard[data-key="zhiji"] .zw-mcard-thumb { background-image: url('img/home/xuanji/m_zhiji.jpg'); filter: none; }
    html[data-theme="xuanji"] .zw-mcard[data-key="zhiji"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="xuanji"] .zw-mcard[data-key="meirishiling"] .zw-mcard-thumb { background-image: url('img/home/xuanji/m_meirishiling.jpg'); filter: none; }
    html[data-theme="xuanji"] .zw-mcard[data-key="meirishiling"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="xuanji"] .zw-mcard[data-key="baibaodai"] .zw-mcard-thumb { background-image: url('img/home/xuanji/m_baibaodai.jpg'); filter: none; }
    html[data-theme="xuanji"] .zw-mcard[data-key="baibaodai"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="xuanji"] .zw-mcard[data-key="bazihepan"] .zw-mcard-thumb { background-image: url('img/home/xuanji/m_bazihepan.jpg'); filter: none; }
    html[data-theme="xuanji"] .zw-mcard[data-key="bazihepan"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="xuanji"] .zw-mcard[data-key="sanshuhecan"] .zw-mcard-thumb { background-image: url('img/home/xuanji/m_sanshuhecan.jpg'); filter: none; }
    html[data-theme="xuanji"] .zw-mcard[data-key="sanshuhecan"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="liujin"] .zw-mcard[data-key="qigua"] .zw-mcard-thumb { background-image: url('img/home/liujin/m_qigua.jpg'); filter: none; }
    html[data-theme="liujin"] .zw-mcard[data-key="qigua"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="liujin"] .zw-mcard[data-key="taiyi"] .zw-mcard-thumb { background-image: url('img/home/liujin/m_taiyi.jpg'); filter: none; }
    html[data-theme="liujin"] .zw-mcard[data-key="taiyi"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="liujin"] .zw-mcard[data-key="qimen"] .zw-mcard-thumb { background-image: url('img/home/liujin/m_qimen.jpg'); filter: none; }
    html[data-theme="liujin"] .zw-mcard[data-key="qimen"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="liujin"] .zw-mcard[data-key="daliuren"] .zw-mcard-thumb { background-image: url('img/home/liujin/m_daliuren.jpg'); filter: none; }
    html[data-theme="liujin"] .zw-mcard[data-key="daliuren"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="liujin"] .zw-mcard[data-key="dayan"] .zw-mcard-thumb { background-image: url('img/home/liujin/m_dayan.jpg'); filter: none; }
    html[data-theme="liujin"] .zw-mcard[data-key="dayan"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="liujin"] .zw-mcard[data-key="bazi"] .zw-mcard-thumb { background-image: url('img/home/liujin/m_bazi.jpg'); filter: none; }
    html[data-theme="liujin"] .zw-mcard[data-key="bazi"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="liujin"] .zw-mcard[data-key="ziwei"] .zw-mcard-thumb { background-image: url('img/home/liujin/m_ziwei.jpg'); filter: none; }
    html[data-theme="liujin"] .zw-mcard[data-key="ziwei"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="liujin"] .zw-mcard[data-key="nayin"] .zw-mcard-thumb { background-image: url('img/home/liujin/m_nayin.jpg'); filter: none; }
    html[data-theme="liujin"] .zw-mcard[data-key="nayin"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="liujin"] .zw-mcard[data-key="qizheng"] .zw-mcard-thumb { background-image: url('img/home/liujin/m_qizheng.jpg'); filter: none; }
    html[data-theme="liujin"] .zw-mcard[data-key="qizheng"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="liujin"] .zw-mcard[data-key="liuyao"] .zw-mcard-thumb { background-image: url('img/home/liujin/m_liuyao.jpg'); filter: none; }
    html[data-theme="liujin"] .zw-mcard[data-key="liuyao"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="liujin"] .zw-mcard[data-key="meihua"] .zw-mcard-thumb { background-image: url('img/home/liujin/m_meihua.jpg'); filter: none; }
    html[data-theme="liujin"] .zw-mcard[data-key="meihua"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="liujin"] .zw-mcard[data-key="xiaoliuren"] .zw-mcard-thumb { background-image: url('img/home/liujin/m_xiaoliuren.jpg'); filter: none; }
    html[data-theme="liujin"] .zw-mcard[data-key="xiaoliuren"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="liujin"] .zw-mcard[data-key="chouqian"] .zw-mcard-thumb { background-image: url('img/home/liujin/m_chouqian.jpg'); filter: none; }
    html[data-theme="liujin"] .zw-mcard[data-key="chouqian"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="liujin"] .zw-mcard[data-key="tarot"] .zw-mcard-thumb { background-image: url('img/home/liujin/m_tarot.jpg'); filter: none; }
    html[data-theme="liujin"] .zw-mcard[data-key="tarot"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="liujin"] .zw-mcard[data-key="western"] .zw-mcard-thumb { background-image: url('img/home/liujin/m_western.jpg'); filter: none; }
    html[data-theme="liujin"] .zw-mcard[data-key="western"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="liujin"] .zw-mcard[data-key="lenormand"] .zw-mcard-thumb { background-image: url('img/home/liujin/m_lenormand.jpg'); filter: none; }
    html[data-theme="liujin"] .zw-mcard[data-key="lenormand"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="liujin"] .zw-mcard[data-key="fengshui"] .zw-mcard-thumb { background-image: url('img/home/liujin/m_fengshui.jpg'); filter: none; }
    html[data-theme="liujin"] .zw-mcard[data-key="fengshui"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="liujin"] .zw-mcard[data-key="zeri"] .zw-mcard-thumb { background-image: url('img/home/liujin/m_zeri.jpg'); filter: none; }
    html[data-theme="liujin"] .zw-mcard[data-key="zeri"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="liujin"] .zw-mcard[data-key="zhiji"] .zw-mcard-thumb { background-image: url('img/home/liujin/m_zhiji.jpg'); filter: none; }
    html[data-theme="liujin"] .zw-mcard[data-key="zhiji"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="liujin"] .zw-mcard[data-key="meirishiling"] .zw-mcard-thumb { background-image: url('img/home/liujin/m_meirishiling.jpg'); filter: none; }
    html[data-theme="liujin"] .zw-mcard[data-key="meirishiling"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="liujin"] .zw-mcard[data-key="baibaodai"] .zw-mcard-thumb { background-image: url('img/home/liujin/m_baibaodai.jpg'); filter: none; }
    html[data-theme="liujin"] .zw-mcard[data-key="baibaodai"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="liujin"] .zw-mcard[data-key="bazihepan"] .zw-mcard-thumb { background-image: url('img/home/liujin/m_bazihepan.jpg'); filter: none; }
    html[data-theme="liujin"] .zw-mcard[data-key="bazihepan"]:hover .zw-mcard-thumb { filter: brightness(1.06); }
    html[data-theme="liujin"] .zw-mcard[data-key="sanshuhecan"] .zw-mcard-thumb { background-image: url('img/home/liujin/m_sanshuhecan.jpg'); filter: none; }
    html[data-theme="liujin"] .zw-mcard[data-key="sanshuhecan"]:hover .zw-mcard-thumb { filter: brightness(1.06); }

    /* 玄机/流金：其余图片位（hero/分区头）沿用 v7 滤镜，方法图为实图 */
    html[data-theme="xuanji"] .zw-mcard-thumb { filter: none; }
    html[data-theme="liujin"] .zw-mcard-thumb { filter: none; }
}

/* ===== v16 · 问候横幅底部融边：页面底色罩渐变（跨浏览器稳定，替代 mask-composite） ===== */
@media (max-width: 767px) { html:not(.zw-classic) {
    .zw-app-greet-art {
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.5) 30%, #000 58%);
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.5) 30%, #000 58%);
    }
    /* 底部罩渐变：由透明过渡到页面底色，图片底缘无论何色都融入页面 */
    .zw-app-greet::after {
        content: '';
        position: absolute; left: 0; right: -1.5rem; bottom: 0;
        height: 55%;
        background: linear-gradient(180deg, rgba(var(--bg-rgb), 0) 0%, rgba(var(--bg-rgb), 0.55) 55%, rgb(var(--bg-rgb)) 100%);
        pointer-events: none;
    }
    /* 文字层保持在罩渐变之上 */
    .zw-app-greet > :not(.zw-app-greet-art) { position: relative; z-index: 1; }
    /* 干支字牌：背景裁至 padding 盒，圆角边框不再透出图片细缝 */
    .zw-fortune-gz-chars { background-clip: padding-box; }
}}

/* 浅色主题：字牌边缘以页面底色内阴影羽化，图片边与卡片底色无缝衔接 */
@media (max-width: 767px) {
    html[data-theme="taiji"]:not(.zw-classic) .zw-fortune-gz-chars { box-shadow: inset 0 0 14px 5px rgba(245, 241, 232, 0.9); }
    html[data-theme="zhusha"]:not(.zw-classic) .zw-fortune-gz-chars { box-shadow: inset 0 0 14px 5px rgba(247, 244, 240, 0.9); }
}

/* ============================================================
   ZW-HOME v16 · 明色主题签到条可读性修正（20260919）
   背景：v13 起签到条换装"夜山深底图"（各主题 card_mt.jpg + 墨色蒙层
   rgba(9,9,16)），但明色主题（太极/朱砂）的前景色仍沿用金变量——
   太极下金变墨 #2B2B2B、朱砂下变朱 #B83A2A，压夜山深底仅 1~3:1
   （WCAG 2.1 G18：正文需 ≥4.5:1）：
   · v9f 签到钮墨字（特异度 0,3,1）压过 v10 深底淡金（0,2,0）；
   · 积分徽 / bonus-hint / streak-badge 深字压深底；
   · 钱袋图标 var(--color-gold-light)（太极 #3D3D3D）暗底圆环内不可辨；
   · 吉 #1E6B3C / 凶 #C03A3A 为宣纸用深色系，压夜山底 ≈2:1。
   修正：沿用项目既有"墨拓"语言（宣纸字压墨底，与 ~16903 经典视图双钮、
   ~16933 简约视图修正同源），色值全部取自项目现有色板：
   主文宣纸白 rgba(234,228,214,0.92)、强调淡金 #E8C77E（压墨底 ≈8:1）、
   吉 #8FD49A / 凶 #E09090（与暗色主题签到状态色一致）。
   作用域：仅手机端简约视图 + 太极/朱砂；已签态浅底墨字（~16988）不动。
   ============================================================ */
@media (max-width: 767px) {
    /* 钱袋图标：墨字暗环 → 淡金字金环 */
    html[data-theme="taiji"]:not(.zw-classic) .zw-checkin-ico,
    html[data-theme="zhusha"]:not(.zw-classic) .zw-checkin-ico {
        color: #E8C77E;
        background: radial-gradient(circle at 35% 30%, rgba(232, 199, 126, 0.26), rgba(232, 199, 126, 0.08));
        border-color: rgba(232, 199, 126, 0.5);
    }
    /* 签到钮（未签态）：v9f 墨字 → 淡金描边字；:not(.zw-checkin-done) 保已签态 */
    html[data-theme="taiji"]:not(.zw-classic) .zw-checkin-area .zw-checkin-btn:not(.zw-checkin-done),
    html[data-theme="zhusha"]:not(.zw-classic) .zw-checkin-area .zw-checkin-btn:not(.zw-checkin-done) {
        color: #E8C77E;
        border-color: rgba(232, 199, 126, 0.6);
    }
    /* 积分小徽：深底深字 → 金衬淡金字 */
    html[data-theme="taiji"]:not(.zw-classic) .zw-checkin-area .zw-checkin-btn:not(.zw-checkin-done) .checkin-btn-reward,
    html[data-theme="zhusha"]:not(.zw-classic) .zw-checkin-area .zw-checkin-btn:not(.zw-checkin-done) .checkin-btn-reward {
        color: #F0D9A8;
        background: rgba(232, 199, 126, 0.16);
        border: 1px solid rgba(232, 199, 126, 0.35);
    }
    /* 副提示"再签N天"：墨字 → 淡金字 */
    html[data-theme="taiji"]:not(.zw-classic) .zw-checkin-area .checkin-status .bonus-hint,
    html[data-theme="zhusha"]:not(.zw-classic) .zw-checkin-area .checkin-status .bonus-hint {
        color: #E3C98F;
        opacity: 0.95;
    }
    /* 连签徽"+N 积分"：金变量压深底 → 金衬淡金字 */
    html[data-theme="taiji"]:not(.zw-classic) .zw-checkin-area .checkin-status .streak-badge,
    html[data-theme="zhusha"]:not(.zw-classic) .zw-checkin-area .checkin-status .streak-badge {
        color: #F0D9A8;
        background: rgba(232, 199, 126, 0.14);
        border-color: rgba(232, 199, 126, 0.35);
    }
    /* 吉/凶状态色：宣纸深色系 → 暗底亮色系（与暗色主题一致） */
    html[data-theme="taiji"]:not(.zw-classic) .zw-checkin-area .checkin-status.success,
    html[data-theme="zhusha"]:not(.zw-classic) .zw-checkin-area .checkin-status.success { color: #8FD49A; }
    html[data-theme="taiji"]:not(.zw-classic) .zw-checkin-area .checkin-status.error,
    html[data-theme="zhusha"]:not(.zw-classic) .zw-checkin-area .checkin-status.error { color: #E09090; }
    html[data-theme="taiji"]:not(.zw-classic) .zw-checkin-area .checkin-status .bonus-badge,
    html[data-theme="zhusha"]:not(.zw-classic) .zw-checkin-area .checkin-status .bonus-badge { color: #8FD49A; }
    /* 主状态行提亮，压过夜山图最亮处 */
    html[data-theme="taiji"]:not(.zw-classic) .zw-checkin-area .checkin-status,
    html[data-theme="zhusha"]:not(.zw-classic) .zw-checkin-area .checkin-status {
        color: rgba(234, 228, 214, 0.92);
    }
}