/* =============================================================================
 * v6.107 — 全站主题令牌 / 对比度权威层 (Single Source of Truth)
 *   v6.107 新增 E 组：事件列表卡片主题一致性。此前权威层只覆盖静态 DOM，
 *   完全没管 .event-item / .ev-card，导致 body.is-lucky-mode 把 --card-light 刷成
 *   #0f172a、--text-main 刷成白色时，列表卡片整体变深；而 main.css:1476 的
 *   .event-item.active 又硬编码浅粉底 #fff7f7，白字压浅底仅 1.01:1（白字白底）。
 *   实测见 output/playwright/card-theme-probe.js。
 * v6.105 — 全站主题令牌 / 对比度权威层 (Single Source of Truth)
 * -----------------------------------------------------------------------------
 * 背景：此前配色分散在 4 处，互相用 !important 覆盖，导致欢乐盘「配色混乱」：
 *   1) main.css        :root / body.dark-mode / body.is-lucky-mode 语义变量
 *   2) fun-mode.css    3694 行欢乐盘硬编码色 + 变量
 *   3) modal-warm.css  .lucky-cream-btn 主题按钮 (!important)
 *   4) ui.js           运行时注入的 80+ 行 body.fun-mode !important 补丁
 *   5) app.js          applyFunModeToSecondaryPages() 直接写 inline !important 色
 * 其中 body.is-lucky-mode 把 --text-main 改成 #f8fafc（浅字），而欢乐盘把背景刷成
 * 米白，但 fun-mode.css 从未重定义语义变量 → 白字白底，这是最核心的结构性 bug。
 *
 * 本文件必须最后加载（index.html 底部所有样式表之后），并用 html body.* 提升特异性，
 * 作为最终裁决层。规则分三组：
 *   A. 菜单「主题外观」颜色选项：统一 light / dark / fun 三态、三套 active 命名
 *   B. html body.fun-mode：重定义全套语义令牌 + 对比度安全令牌（WCAG AA）
 *   C. 欢乐盘逐元素修正 + 全局兜底（含 JS 写入的 inline 亮色）
 *
 * 对比度基准（对 #FFFCF5 / #FFF8E7 奶油底）：
 *   --fun-ink        #3E2723  ≈12.6:1     --fun-ink-soft  #5D4037  ≈8.5:1
 *   --fun-brand      #8A5A00  ≈5.9:1      --fun-success   #0F6B3B  ≈7.0:1
 *   --fun-danger     #B3261E  ≈6.3:1      --fun-info      #1D4ED8  ≈6.7:1
 *   CTA 深金棕渐变 (#6B3F00 → #8A5A00) + 白字 ≥5.9:1（旧的 #D4A574 浅金 + 白字仅 2.1:1）
 * ========================================================================== */

/* ── A. 主题外观按钮：三态统一 ───────────────────────────────────────────── */
:root {
    --theme-btn-ink: #475569;          /* 浅色主题未选中：白底 7.3:1 */
    --theme-btn-hover-ink: #0F172A;
    --theme-btn-hover-bg: rgba(15, 23, 42, 0.07);
    --theme-btn-active-bg: #1D4ED8;    /* 蓝底白字 6.7:1 */
    --theme-btn-active-ink: #FFFFFF;
    --theme-group-bg: #F1F5F9;
    --theme-group-line: rgba(15, 23, 42, 0.12);

    /* JS inline !important 契约：applyVisualTheme() 把 .agent-chart-wrapper 的
       inline 写成 var(--visual-chart-bg) 而不是写死色值，主题切换时变量自动重算，
       无需再遍历 DOM、也不会残留上一个主题的颜色。 */
    --visual-chart-bg: rgba(15, 23, 42, 0.55);
    --visual-chart-border: rgba(56, 189, 248, 0.3);
    --visual-modal-bg: #FFFFFF;
    --visual-modal-ink: #0F172A;
    --visual-input-bg: #FFFFFF;
}

html body.dark-mode {
    --theme-btn-ink: #CBD5E1;          /* 深色主题未选中：深底 9.6:1 */
    --theme-btn-hover-ink: #FFFFFF;
    --theme-btn-hover-bg: rgba(56, 189, 248, 0.16);
    --theme-btn-active-bg: #1D4ED8;
    --theme-group-bg: rgba(15, 23, 42, 0.6);
    --theme-group-line: rgba(56, 189, 248, 0.24);
}

html body .lucky-cream-btn-group {
    background: var(--theme-group-bg) !important;
    border: 1px solid var(--theme-group-line) !important;
}

/* 三套历史命名 (.active / .is-active / .theme-btn-active) 全部归一，
   避免 applyTheme() 只加 theme-btn-active 时 CSS 规则不命中 */
html body .lucky-cream-btn {
    color: var(--theme-btn-ink) !important;
    background: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html body.dark-mode .lucky-cream-btn,
html body.fun-mode .lucky-cream-btn {
    color: var(--theme-btn-ink) !important;
    background: transparent !important;
    background-image: none !important;
}

html body .lucky-cream-btn:not(.active):not(.is-active):not(.theme-btn-active):hover {
    background: var(--theme-btn-hover-bg) !important;
    color: var(--theme-btn-hover-ink) !important;
}

html body .lucky-cream-btn.active,
html body .lucky-cream-btn.is-active,
html body .theme-btn-active,
html body.dark-mode .lucky-cream-btn.active,
html body.dark-mode .lucky-cream-btn.is-active,
html body.dark-mode .theme-btn-active,
html body.fun-mode .lucky-cream-btn.active,
html body.fun-mode .lucky-cream-btn.is-active,
html body.fun-mode .theme-btn-active {
    background: var(--theme-btn-active-bg) !important;
    background-image: none !important;
    color: var(--theme-btn-active-ink) !important;
    -webkit-text-fill-color: var(--theme-btn-active-ink) !important;
    border: 1px solid transparent !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18) !important;
}

html body .theme-btn-active svg,
html body .lucky-cream-btn.active svg,
html body .lucky-cream-btn.is-active svg { color: inherit; }

/* 侧边菜单分组标题（系统与导航 / 主题外观 / 语言 / …）：三主题统一 */
html body #side-menu-content div[style*="text-transform:uppercase"] {
    color: var(--theme-btn-ink) !important;
}

/* ── B. 欢乐盘：全套语义令牌重定义（修复白字白底） ──────────────────────── */
html body.fun-mode {
    color-scheme: light;
    --fun-surface: #FFFCF5;
    --fun-surface-2: #FFF8E7;
    --fun-surface-3: #F5E6D3;
    --fun-ink: #3E2723;
    --fun-ink-soft: #5D4037;
    --fun-ink-mute: #6B4E3D;
    --fun-brand: #8A5A00;
    --fun-brand-deep: #6B3F00;
    --fun-accent-ink: #9D2A5B;
    --fun-success: #0F6B3B;
    --fun-danger: #B3261E;
    --fun-info: #1D4ED8;
    --fun-purple: #6D28D9;
    --fun-line: rgba(139, 90, 43, 0.28);
    --fun-line-strong: rgba(139, 90, 43, 0.5);
    --fun-cta-bg: linear-gradient(135deg, #6B3F00 0%, #8A5A00 100%);
    --fun-cta-ink: #FFFFFF;

    /* 旧令牌收敛到同一套安全色（ui.js / fun-mode.css 里的硬编码也引用这些） */
    --fun-text: #3E2723;
    --fun-text-soft: #5D4037;
    --fun-gold-ink: #8A5A00;
    --fun-lux-text: #3E2723;
    --fun-lux-text-soft: #5D4037;
    --fun-lux-text-mute: #6B4E3D;
    --fun-lux-gold: #8A5A00;
    --fun-rose-ink: #9D2A5B;

    /* 全站语义变量：压过 body.dark-mode / body.is-lucky-mode 的定义 */
    --bg: #FFF8E7;
    --bg-light: #FFF8E7;
    --card-light: #FFFCF5;
    --text-main: #3E2723;
    --text-muted: #5D4037;
    --border-light: rgba(139, 90, 43, 0.22);
    --success: #0F6B3B;
    --home-yes: #0F6B3B;
    --away-no: #B3261E;
    --draw-tie: #8A5A00;
    --home-red: #B3261E;
    --away-blue: #0F6B3B;
    --surface-0: #FFF8E7;
    --surface-1: #FFFCF5;
    --surface-2: #F5E6D3;
    --surface-3: #EFDCC3;
    --line-1: rgba(139, 90, 43, 0.22);
    --line-2: rgba(139, 90, 43, 0.32);
    --ink-1: #3E2723;
    --ink-2: #5D4037;
    --ink-3: #6B4E3D;
    --up: #0F6B3B;
    --down: #B3261E;
    --flat: #8A5A00;
    --accent: #8A5A00;
    --hot: #9A3412;

    /* JS inline !important 的契约：inline 写变量，切换时自动跟随，无需重跑 */
    --visual-chart-bg: #FFF8E7;
    --visual-chart-border: rgba(139, 90, 43, 0.28);
    --visual-modal-bg: #FFFCF5;
    --visual-modal-ink: #3E2723;
    --visual-input-bg: #FFFFFF;

    --theme-btn-ink: #5D4037;
    --theme-btn-hover-ink: #3E2723;
    --theme-btn-hover-bg: rgba(139, 90, 43, 0.12);
    --theme-btn-active-bg: #6B3F00;
    --theme-group-bg: #F5E6D3;
    --theme-group-line: rgba(139, 90, 43, 0.3);
}

html body.fun-mode,
html body.fun-mode #view-lucky { background-color: #FFF8E7 !important; color: var(--fun-ink) !important; }
html body.fun-mode .card,
html body.fun-mode .lucky-glass-card,
html body.fun-mode .lucky-balance-card,
html body.fun-mode .lucky-earn-card { background-color: var(--fun-surface) !important; color: var(--fun-ink) !important; }

/* 滚动条在浅底上改为暖色，避免白色滚动条不可见 */
html body.fun-mode * { scrollbar-color: rgba(139, 90, 43, 0.45) transparent; }
html body.fun-mode *::-webkit-scrollbar-thumb { background: rgba(139, 90, 43, 0.35); }
html body.fun-mode *::-webkit-scrollbar-thumb:hover { background: rgba(139, 90, 43, 0.6); }

/* ── C. 欢乐盘逐元素对比度修正 ─────────────────────────────────────────── */

/* C1. 所有「浅金渐变 + 白字」CTA 统一改深金棕渐变 + 白字 */
html body.fun-mode .btn-connect,
html body.fun-mode .lucky-btn-neon,
html body.fun-mode .nav-item.active,
html body.fun-mode .skill-badge .skill-count,
html body.fun-mode .skill-badge-mobile .skill-count,
html body.fun-mode .lucky-cream-btn.active,
html body.fun-mode .lucky-cream-btn.is-active,
html body.fun-mode .theme-btn-active {
    background: var(--fun-cta-bg) !important;
    background-image: var(--fun-cta-bg) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    border-color: var(--fun-brand-deep) !important;
}
html body.fun-mode .btn-connect:hover,
html body.fun-mode .lucky-btn-neon:hover,
html body.fun-mode .nav-item.active:hover {
    background: linear-gradient(135deg, #8A5A00 0%, #6B3F00 100%) !important;
    color: #FFFFFF !important;
}
/* .header * / .side-menu * 的万能 !important 会把按钮白字刷黑，这里提升特异性夺回 */
html body.fun-mode .header .btn-connect *,
html body.fun-mode .header .nav-item.active *,
html body.fun-mode .side-menu .lucky-cream-btn.active *,
html body.fun-mode .side-menu .lucky-cream-btn.is-active *,
html body.fun-mode .side-menu .theme-btn-active *,
/* 侧边菜单实际容器是 #side-menu-content (ID 级权重)，必须用同级选择器才能夺回白字 */
html body.fun-mode #side-menu-content .theme-btn-active *,
html body.fun-mode #side-menu-content .lucky-cream-btn.active *,
html body.fun-mode #side-menu-content .lucky-cream-btn.is-active * {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}
html body.fun-mode #side-menu-content .theme-btn-active,
html body.fun-mode #side-menu-content .lucky-cream-btn.active,
html body.fun-mode #side-menu-content .lucky-cream-btn.is-active {
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* C1b. 抽奖主按钮 (单抽 / 10连抽 / 30连抽)
   fun-mode.css 的设计是「马卡龙浅桃底 + 巧克力棕字」，但 ui.js 运行时补丁把
   -webkit-text-fill-color 刷成白色 → 白字浅桃底只有 1.18:1；且 .btn-spin-1/10/100
   变体带 (0,3,1)+!important 会盖过 C1，导致同一排按钮背景不一致。
   这里统一裁决为浅底深字，并让按钮内所有文字（含金额 small）一起跟随。 */
html body.fun-mode .lucky-btn-neon,
html body.fun-mode .lucky-btn-neon.btn-spin-1,
html body.fun-mode .lucky-btn-neon.btn-spin-10,
html body.fun-mode .lucky-btn-neon.btn-spin-100 {
    background: linear-gradient(145deg, #FFE8D6 0%, #FFD7A8 100%) !important;
    background-image: linear-gradient(145deg, #FFE8D6 0%, #FFD7A8 100%) !important;
    color: var(--fun-ink) !important;
    -webkit-text-fill-color: var(--fun-ink) !important;
}
html body.fun-mode .lucky-btn-neon *,
html body.fun-mode .lucky-btn-neon small,
html body.fun-mode .lucky-btn-neon .text-gradient-silver,
html body.fun-mode .lucky-btn-neon .text-gradient-gold {
    color: var(--fun-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
}
html body.fun-mode .lucky-btn-neon:hover {
    background: linear-gradient(145deg, #FFF5DC 0%, #FFE5A0 100%) !important;
    background-image: linear-gradient(145deg, #FFF5DC 0%, #FFE5A0 100%) !important;
    color: var(--fun-ink) !important;
    -webkit-text-fill-color: var(--fun-ink) !important;
}

/* C1c. 顶部分类导航选中态（fun-mode.css:1481 与 main.css:4850 都写死金底深字 3.25:1） */
html body.fun-mode .top-nav-menu .nav-item.active,
html body.fun-mode .top-nav-menu .nav-item.active * {
    background: var(--fun-cta-bg) !important;
    background-image: var(--fun-cta-bg) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

/* C2. 导航 / 标题 / 辅助文字 */
/* components.css 用 body #nav-poker.np-nav-hot (ID 级) 写死亮黄，须同级才压得住 */
html body.fun-mode .np-nav-hot,
html body.fun-mode #nav-poker,
html body.fun-mode #nav-poker.np-nav-hot { color: var(--fun-brand-deep) !important; }
html body.fun-mode .np-hero-sub,
html body.fun-mode .section-subtitle,
html body.fun-mode .subtitle { color: var(--fun-ink-soft) !important; opacity: 1 !important; }
html body.fun-mode h1, html body.fun-mode h2, html body.fun-mode h3,
html body.fun-mode h4, html body.fun-mode h5 { color: var(--fun-ink) !important; }
html body.fun-mode .np-hero-sub *,
html body.fun-mode .section-title * { color: inherit; }

/* C3. 渐变文字：保留语义区分，但全部换成深色安全版（旧的 --fun-gold #D4A574 仅 2.2:1） */
html body.fun-mode .text-gradient-gold { color: var(--fun-brand) !important; }
html body.fun-mode .text-gradient-red { color: var(--fun-danger) !important; }
html body.fun-mode .text-gradient-green { color: var(--fun-success) !important; }
html body.fun-mode .text-gradient-blue { color: var(--fun-info) !important; }
html body.fun-mode .text-gradient-purple { color: var(--fun-purple) !important; }
html body.fun-mode .text-gradient-silver { color: var(--fun-ink-soft) !important; }
html body.fun-mode .text-gradient-gold,
html body.fun-mode .text-gradient-red,
html body.fun-mode .text-gradient-green,
html body.fun-mode .text-gradient-blue,
html body.fun-mode .text-gradient-purple,
html body.fun-mode .text-gradient-silver {
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
    animation: none !important;
    filter: none !important;
    font-weight: 800;
}
/* fun-mode.css:212 的 .luck-meter-vertical span[id$="-display"/"-value"] 是 (0,3,1)+!important,
   仍用浅金 --fun-gold (#D4A574, 2.23:1) 写爆能/幸运值数字，必须用更高特异性夺回。 */
html body.fun-mode .luck-meter-vertical .text-gradient-red,
html body.fun-mode .luck-meter-vertical .text-gradient-silver,
html body.fun-mode .luck-meter-vertical span[id$="-display"],
html body.fun-mode .luck-meter-vertical span[id$="-value"] {
    color: var(--fun-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
}
html body.fun-mode .luck-meter-vertical span[id$="-display"].text-gradient-red,
html body.fun-mode .luck-meter-vertical .text-gradient-red { color: var(--fun-danger) !important; }
html body.fun-mode .luck-meter-vertical span[id$="-value"].text-gradient-silver { color: var(--fun-brand) !important; }

/* C4. 转盘核心 SPIN：原径向渐变中心是 #FFE5A0 浅黄，无论深字还是白字都有一端看不清
   (白字 1.24:1 / 深棕字 1.8:1)。直接锁定深金棕实底 + 白字 (≥5.9:1)。 */
html body.fun-mode .lucky-wheel-core {
    background: linear-gradient(135deg, #6B3F00 0%, #8A5A00 100%) !important;
    background-image: linear-gradient(135deg, #6B3F00 0%, #8A5A00 100%) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
    text-shadow: none !important;
}

/* C5. 欢乐盘开关 / 跳过动画：深底胶囊改奶油底 + 深字 */
html body.fun-mode .skip-spin-label,
html body.fun-mode label:has(> .micro-mode-toggle),
html body.fun-mode label:has(> .skip-spin-anim) {
    background: var(--fun-surface-3) !important;
    border-color: var(--fun-line-strong) !important;
    box-shadow: 0 2px 8px rgba(139, 90, 43, 0.18) !important;
}
html body.fun-mode .skip-anim-text,
html body.fun-mode .skip-anim-text[style*="color"] {
    color: var(--fun-ink) !important;
}
html body.fun-mode .skip-spin-anim,
html body.fun-mode .micro-mode-toggle { accent-color: var(--fun-brand) !important; }

/* C6. cyber-btn 系列（外部充值 / 提现 / 中心 / 抽奖记录）亮色字在米底 1.9~3.7:1 */
html body.fun-mode .cyber-btn { color: var(--fun-brand) !important; }
html body.fun-mode .cyber-btn.deposit { color: var(--fun-success) !important; }
html body.fun-mode .cyber-btn.withdraw { color: var(--fun-accent-ink) !important; }
html body.fun-mode .cyber-btn:hover { color: var(--fun-brand-deep) !important; }

/* C7. 空状态 / 页脚 / 胶囊 / 状态点等浅灰文字 */
html body.fun-mode .empty-state,
html body.fun-mode .empty-state *,
html body.fun-mode .pf-empty,
html body.fun-mode [style*="color:#999"],
html body.fun-mode [style*="color: #999"],
html body.fun-mode [style*="color:#94a3b8"],
html body.fun-mode [style*="color: #94a3b8"],
html body.fun-mode [style*="color:#cbd5e1"],
html body.fun-mode [style*="color: #cbd5e1"] {
    color: var(--fun-ink-soft) !important;
}

/* C8. 高亮/状态类 inline 色：亮黄、霓虹绿、亮蓝、亮红、亮紫在米底均不达标 */
html body.fun-mode [style*="color: #facc15"], html body.fun-mode [style*="color:#facc15"],
html body.fun-mode [style*="color: #FACC15"] { color: var(--fun-brand) !important; }
html body.fun-mode [style*="color: #10b981"], html body.fun-mode [style*="color:#10b981"],
html body.fun-mode [style*="color: #00E676"], html body.fun-mode [style*="color:#00E676"],
html body.fun-mode [style*="color: #00C853"] { color: var(--fun-success) !important; }
html body.fun-mode [style*="color: #38bdf8"], html body.fun-mode [style*="color:#38bdf8"],
html body.fun-mode [style*="color: #0ea5e9"] { color: var(--fun-info) !important; }
html body.fun-mode [style*="color: #ef4444"], html body.fun-mode [style*="color:#ef4444"],
html body.fun-mode [style*="color: #ec4899"], html body.fun-mode [style*="color:#ec4899"] { color: var(--fun-danger) !important; }
html body.fun-mode [style*="color: #a855f7"], html body.fun-mode [style*="color: #f59e0b"],
html body.fun-mode [style*="color: #FF5252"] { color: var(--fun-purple) !important; }

/* C9. 表单控件 / toast / 关闭按钮 / 弹层（与 ui.js 注入层保持一致） */
html body.fun-mode input.custom-form-input,
html body.fun-mode select.custom-form-input,
html body.fun-mode textarea.custom-form-input,
html body.fun-mode .lucky-input-dark {
    background-color: var(--visual-input-bg) !important;
    color: var(--fun-ink) !important;
    border-color: var(--fun-line-strong) !important;
}
html body.fun-mode input::placeholder,
html body.fun-mode textarea::placeholder { color: #6B4E3D !important; opacity: 1; }
html body.fun-mode .toast { background: var(--fun-surface) !important; color: var(--fun-ink) !important; border-color: var(--fun-line) !important; }
html body.fun-mode .close-btn { background: rgba(139, 90, 43, 0.12) !important; color: var(--fun-ink) !important; }
html body.fun-mode .modal-overlay { background: rgba(62, 39, 35, 0.42) !important; }
html body.fun-mode select { color-scheme: light; }

/* C10. 侧边菜单 / 钱包下拉 / 导航：浅底深字（压过 dark-mode 的浅字变量） */
html body.fun-mode .side-menu,
html body.fun-mode #side-menu-content,
html body.fun-mode .wallet-dropdown-menu,
html body.fun-mode .lang-menu {
    background-color: var(--fun-surface) !important;
    color: var(--fun-ink) !important;
    border-color: var(--fun-line) !important;
}
html body.fun-mode .side-menu *,
html body.fun-mode #side-menu-content *,
html body.fun-mode .wallet-menu-item,
html body.fun-mode .lang-menu div { color: var(--fun-ink) !important; }
html body.fun-mode .side-lang-btn:hover,
html body.fun-mode .wallet-menu-item:hover,
html body.fun-mode .lang-menu div:hover { background: rgba(139, 90, 43, 0.1) !important; color: var(--fun-brand) !important; }
html body.fun-mode .nav-item { color: var(--fun-ink-soft) !important; }
html body.fun-mode .nav-item:hover { color: var(--fun-ink) !important; }
html body.fun-mode .search-input,
html body.fun-mode .search-btn { color: var(--fun-ink) !important; }

/* C11. 代理图表 / modal 内联背景：JS 统一写入 var(--visual-*) 后由这里裁决 */
html body.fun-mode .agent-chart-wrapper {
    background: var(--visual-chart-bg) !important;
    border: 1px solid var(--visual-chart-border) !important;
}
html body.fun-mode .modal-content { background: var(--visual-modal-bg) !important; color: var(--visual-modal-ink) !important; }

/* C12. 焦点可见性：键盘导航在浅底上要有清晰描边 */
html body.fun-mode :focus-visible { outline: 2px solid var(--fun-brand) !important; outline-offset: 2px; }

/* ── D. 全站基础对比度修正（浅色 / 深色，非欢乐盘） ───────────────────────
   这些是审计中「整体网站配色混乱」的通用部分，与欢乐盘无关但同属对比度不达标。 */
html body:not(.fun-mode):not(.dark-mode):not(.is-lucky-mode) {
    /* 原 #64748B 在 #F4F5F7 页脚只有 4.36:1，差一点点不达 AA */
    --text-muted: #55637A;
}

/* Poker 导航：components.css 写死 #facc15 亮黄，在白底仅 1.53:1 */
html body:not(.fun-mode):not(.dark-mode):not(.is-lucky-mode) #nav-poker.np-nav-hot,
html body:not(.fun-mode):not(.dark-mode):not(.is-lucky-mode) .np-nav-hot {
    color: #8A5A00 !important;
}
/* 深色底上亮黄本身足够，仅需保证不使用半透明削弱 */

/* is-lucky-mode 的 header/footer 是深紫赛博底，浅色主题的安全深色在这里反而不可读；
   该类状态（从转盘返回时 class 尚未清除）单独给亮色版本。 */
html body.is-lucky-mode:not(.fun-mode) .desktop-only-lucky { color: #F9A8D4 !important; }
html body.is-lucky-mode:not(.fun-mode) .anim-bitcoin { color: #FBBF24 !important; }
html body.is-lucky-mode:not(.fun-mode) #nav-poker.np-nav-hot,
html body.is-lucky-mode:not(.fun-mode) .np-nav-hot { color: #FACC15 !important; }

/* Super Lucky 导航粉：#EC4899 在白底 3.53:1 / 深底 3.63:1 → 分主题给安全色 */
html body:not(.fun-mode):not(.dark-mode):not(.is-lucky-mode) .desktop-only-lucky { color: #BE185D !important; }
html body.dark-mode:not(.fun-mode) .desktop-only-lucky { color: #F9A8D4 !important; }

/* ₿ 品牌橙 #F7931A 在白底 2.3:1 */
html body:not(.fun-mode):not(.dark-mode):not(.is-lucky-mode) .anim-bitcoin { color: #9A5A00 !important; }

/* 空状态灰字 #999 在白底 2.85:1；深色底改用 --text-muted */
html body:not(.fun-mode):not(.dark-mode):not(.is-lucky-mode) .empty-state,
html body:not(.fun-mode):not(.dark-mode):not(.is-lucky-mode) .empty-state *,
html body:not(.fun-mode):not(.dark-mode):not(.is-lucky-mode) .pf-empty,
html body:not(.fun-mode):not(.dark-mode):not(.is-lucky-mode) [style*="color:#999"],
html body:not(.fun-mode):not(.dark-mode):not(.is-lucky-mode) [style*="color: #999"] {
    color: #55637A !important;
}
html body.dark-mode:not(.fun-mode) .empty-state,
html body.dark-mode:not(.fun-mode) .empty-state *,
html body.dark-mode:not(.fun-mode) [style*="color:#999"],
html body.dark-mode:not(.fun-mode) [style*="color: #999"] {
    color: #94A3B8 !important;
}

/* 跑马灯占位文字压在半透明暖灰底上：#5D4037 只有 4.21:1。
   C7 的 [style*="color:#94a3b8"] 兜底特异性更高，故用 #view-lucky (ID 级) 放在最后裁决。 */
html body.fun-mode #view-lucky .broadcast-placeholder,
html body.fun-mode .broadcast-placeholder[style] {
    color: var(--fun-ink) !important;
    -webkit-text-fill-color: currentColor !important;
}

/* ══ E. 事件卡片主题一致性层 (v6.107) ══════════════════════════════════════
   目标：无论用户切到浅色 / 深色 / 欢乐盘，也不论 body 上是否残留
   is-lucky-mode，列表里每一张卡（普通 / 选中 / 已读 / 带封面图 / 推荐 / 收藏）
   都必须用同一套表面色 + 同一套文字色，且各自达 WCAG AA。

   为什么需要专用令牌：main.css 的 body.is-lucky-mode 把 --card-light / --text-main
   定义在 body 上（本意只服务 #view-lucky 转盘页），实际会污染整个首页；
   而 main.css:1476 .event-item.active 又写死 background:#fff7f7。
   两者叠加 = 深底卡 + 浅粉底白字卡（1.01:1）。卡片不能再依赖全局语义变量。 */
:root {
    --ec-surface: #FFFFFF;
    --ec-surface-2: #F1F5F9;
    --ec-active-surface: #EEF4FF;
    --ec-ink: #0F172A;
    --ec-ink-soft: #55637A;
    --ec-ink-mute: #64748B;
    --ec-line: rgba(15, 23, 42, 0.12);
    --ec-line-strong: rgba(15, 23, 42, 0.28);
    --ec-track: #E6EAF1;
    --ec-badge-bg: #FFF7ED;
    --ec-badge-ink: #854D0E;
    --ec-badge-line: rgba(146, 64, 14, 0.35);
    --ec-odds-ink: #854D0E;
    --ec-star: #475569;
    --ec-focus: #1D4ED8;
    --ec-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    --ec-new-bg: #166534;
    --ec-new-ink: #FFFFFF;
    --ec-countdown-bg: #FFF7ED;
    --ec-countdown-ink: #854D0E;
    --ec-countdown-line: rgba(146, 64, 14, 0.35);
}

html body.dark-mode:not(.fun-mode) {
    --ec-surface: #0F172A;
    --ec-surface-2: #1E293B;
    --ec-active-surface: #172554;
    --ec-ink: #F1F5F9;
    --ec-ink-soft: #CBD5E1;
    --ec-ink-mute: #94A3B8;
    --ec-line: rgba(255, 255, 255, 0.14);
    --ec-line-strong: rgba(255, 255, 255, 0.30);
    --ec-track: #1E293B;
    --ec-badge-bg: #3B2A12;
    --ec-badge-ink: #FCD34D;
    --ec-badge-line: rgba(252, 211, 77, 0.35);
    --ec-odds-ink: #FCD34D;
    --ec-star: #94A3B8;
    --ec-focus: #93C5FD;
    --ec-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    --ec-new-bg: #14532D;
    --ec-new-ink: #FFFFFF;
    --ec-countdown-bg: #3B2A12;
    --ec-countdown-ink: #FCD34D;
    --ec-countdown-line: rgba(252, 211, 77, 0.35);
}

html body.fun-mode {
    --ec-surface: #FFFCF5;
    --ec-surface-2: #F5E6D3;
    --ec-active-surface: #FFF0D2;
    --ec-ink: #3E2723;
    --ec-ink-soft: #5D4037;
    --ec-ink-mute: #6B4E3D;
    --ec-line: rgba(139, 90, 43, 0.28);
    --ec-line-strong: rgba(139, 90, 43, 0.5);
    --ec-track: #EFDCC3;
    --ec-badge-bg: #FFF0D2;
    --ec-badge-ink: #8A5A00;
    --ec-badge-line: rgba(139, 90, 43, 0.4);
    --ec-odds-ink: #8A5A00;
    --ec-star: #6B4E3D;
    --ec-focus: #6B3F00;
    --ec-shadow: 0 1px 3px rgba(139, 90, 43, 0.12);
    --ec-new-bg: #0F6B3B;
    --ec-new-ink: #FFFFFF;
    --ec-countdown-bg: #FFF0D2;
    --ec-countdown-ink: #8A5A00;
    --ec-countdown-line: rgba(139, 90, 43, 0.4);
}

/* E1. 刻意「不」改 body.is-lucky-mode 的全局语义变量。
   它同时服务 #view-lucky 之外的深色 header / footer（硬编码深紫底 + 白字），
   若在这里把 --text-main 改回深色，页脚会变成深字深底 (1:1)。
   卡片一致性改为由 E2 的专用令牌 + !important 独立保证，与全局变量解耦。 */

/* E1b. is-lucky-mode 下侧边菜单是深色赛博底，A 组的浅色主题按钮令牌要换成亮字，
   否则「主题外观」等分组标题是深字深底 (2.36:1)。 */
html body.is-lucky-mode:not(.fun-mode) {
    --theme-btn-ink: #CBD5E1;
    --theme-btn-hover-ink: #FFFFFF;
    --theme-btn-hover-bg: rgba(56, 189, 248, 0.16);
    --theme-group-bg: rgba(15, 23, 42, 0.6);
    --theme-group-line: rgba(56, 189, 248, 0.24);
}

/* E2. 卡片表面：统一底色 / 边框 / 文字，压过 main.css:1476 的 #fff7f7、
   ui.js #grid-card-styles 的 var(--card-light) 与 body.dark-mode 的 !important 覆写。 */
html body .event-item.ev-card,
html body .event-item.rec-card,
html body .event-item.pf-fav-card {
    background: var(--ec-surface) !important;
    background-image: none !important;
    color: var(--ec-ink) !important;
    border: 1px solid var(--ec-line) !important;
    box-shadow: var(--ec-shadow) !important;
}
html body .event-item.active {
    background: var(--ec-active-surface) !important;
    background-image: none !important;
    color: var(--ec-ink) !important;
    border-color: var(--ec-focus) !important;
    box-shadow: 0 0 0 1px var(--ec-focus) !important;
}
html body .event-item:hover { border-color: var(--ec-line-strong) !important; }
html body .event-item:focus-visible { outline: 2px solid var(--ec-focus) !important; outline-offset: 2px; }

/* E3. 封面图层：任何主题下都只能是很淡的装饰，禁止把卡片染成与邻卡不同的深色；
   mask 也跟随当前卡片表面色，而不是全局 --card-light。 */
html body .ev-card-bg-img { opacity: 0.07 !important; }
html body .ev-card-bg-mask {
    /* 纯表面色覆盖 90%，只留极淡纹理；渐变式 mask 会在中段露出封面底色，
       使「有图卡」比邻卡偏灰/偏深，破坏一致性。 */
    background: var(--ec-surface) !important;
    background-image: none !important;
    opacity: 0.9 !important;
}

/* E4. 卡片内文字：主文字 / 辅助文字 / 强调色全部走卡片令牌。
   .ev-opt-odds 原写死 #854D0E（深底 2.61:1）、.ev-latest 原 #38bdf8（白底 2.4:1）。 */
html body .event-item .ev-title,
html body .event-item .rec-title,
html body .event-item .ev-opt-name,
html body .event-item .market-prob-btn .prob,
html body .event-item .rec-team-vs {
    color: var(--ec-ink) !important;
    -webkit-text-fill-color: var(--ec-ink) !important;
}
html body .event-item .ev-cat,
html body .event-item .ev-time,
html body .event-item .ev-meta,
html body .event-item .ev-meta *,
html body .event-item .ev-opt-odds,
html body .event-item .ev-legend,
html body .event-item .ev-legend-name,
html body .event-item .ev-badge--settled,
html body .event-item .ev-flag-vs,
html body .event-item .ev-resolved-header,
html body .event-item .market-prob-btn {
    color: var(--ec-ink-soft) !important;
}
html body .event-item .ev-opt-odds { color: var(--ec-odds-ink) !important; }
html body .event-item .ev-time {
    background: var(--ec-surface-2) !important;
    color: var(--ec-ink-soft) !important;
}
html body .event-item .ev-star { color: var(--ec-star) !important; }
html body .event-item .ev-latest { color: var(--ec-focus) !important; }
html body .event-item .ev-meta span[style*="opacity"] { opacity: 1 !important; }

/* E5. 徽章 / 轨道 / 选项框 / 按钮：前景与描边随卡片主题，且不与底色同色。 */
html body .event-item .ev-badge--agent,
html body .event-item .ev-badge--private,
html body .event-item .ev-badge--locked,
html body .event-item .rec-badge--agent,
html body .event-item .rec-badge--private {
    background: var(--ec-badge-bg) !important;
    color: var(--ec-badge-ink) !important;
    border: 1px solid var(--ec-badge-line) !important;
}
/* NEW 徽章原是 #22c55e→#16a34a 亮绿渐变 + 白字，仅 2.28:1；改深绿实底白字 */
html body .event-item .ev-badge--new {
    background: var(--ec-new-bg) !important;
    background-image: none !important;
    color: var(--ec-new-ink) !important;
    -webkit-text-fill-color: var(--ec-new-ink) !important;
}
/* 倒计时胶囊：dark-mode 规则写死浅黄字，fun+dark 时压在浅底上仅 1.02:1 */
html body .event-item .ev-countdown {
    background: var(--ec-countdown-bg) !important;
    color: var(--ec-countdown-ink) !important;
    border-color: var(--ec-countdown-line) !important;
}
html body .event-item .ev-probbar,
html body .event-item .ev-multibar { background: var(--ec-track) !important; border-color: var(--ec-line) !important; }
html body .event-item .ev-meta { border-top-color: var(--ec-line) !important; }
/* 注意：.market-opt-row 的边框由 ui.js 按选项注入 var(--home-yes)/var(--away-no)，
   是红绿语义色，绝不能用 !important 覆盖成灰边；这里只统一其底色与 hover。 */
html body .event-item .market-prob-btn,
html body .event-item .rec-teambar { border-color: var(--ec-line) !important; background-color: transparent !important; }
html body .event-item .market-opt-row { background-color: transparent !important; }
html body .event-item .market-prob-btn:hover,
html body .event-item .market-opt-row:hover { background-color: var(--ec-surface-2) !important; }

/* E6. 搜索高亮 hl() 注入的浅红底：深主题下要换成当前卡片表面色，
   文字沿用 --home-red（浅色 #D32F2F / 深色 #FF5252 / 欢乐盘 #B3261E 均达 AA）。 */
html body.dark-mode:not(.fun-mode) .event-item span[style*="color: var(--home-red)"] {
    background: var(--ec-surface-2) !important;
    color: #FF8A80 !important;
}
html body.fun-mode .event-item span[style*="color: var(--home-red)"] {
    background: var(--ec-surface-2) !important;
    color: var(--fun-danger) !important;
}