/* ===== 全局主题：暗色夜间模式 (Dark Night Mode) =====
 * body 添加 .theme-dark 类时激活此主题。
 * 设计目标：夜间使用不刺眼 —— 低亮度深色背景 + 柔和文字 + 降低纯白对比。
 *
 * 架构与 cute/korean/mono 主题一致：通过 body.theme-dark 选择器约束生效范围，
 * 不依赖 :root 变量被污染，关键颜色直接写死，确保稳定。
 *
 * 覆盖范围：全部界面（桌面/微信/聊天/朋友圈/设置/各小程序App/弹窗/表单等）。
 * 策略：1) 广覆盖——所有 .layer / .page / 卡片 / 弹窗统一深色底；
 *       2) 精细覆盖——聊天气泡、导航栏、输入栏、底部导航等关键交互单独处理；
 *       3) 安全兜底——文字色统一提亮，避免深底黑字看不见。
 * ===================================================== */

/* ---------- 主题变量 ---------- */
body.theme-dark {
    --dk-bg: #121214;                 /* 最底层页面背景 */
    --dk-bg-elevated: #1e1e21;        /* 卡片/列表项背景 */
    --dk-bg-elevated-2: #2a2a2e;      /* 二级抬升（弹窗/输入框） */
    --dk-bg-sunken: #0c0c0e;          /* 凹陷区（聊天背景/输入框底） */
    --dk-bg-soft: #18181b;            /* 轻量分区背景 */

    --dk-text: #e8e8ea;              /* 主文字（非纯白，减少刺眼） */
    --dk-text-secondary: #a8a8ad;    /* 次要文字 */
    --dk-text-tertiary: #6e6e75;     /* 三级/占位文字 */

    --dk-border: rgba(255,255,255,0.08);
    --dk-border-strong: rgba(255,255,255,0.16);
    --dk-divider: rgba(255,255,255,0.06);

    --dk-accent: #3a8cff;            /* 主强调色（柔和蓝，夜间不刺眼） */
    --dk-accent-soft: rgba(58,140,255,0.18);
    --dk-green: #2fae5e;             /* 微信绿夜间降饱和 */
    --dk-red: #ff5b52;
    --dk-pink: #e0708a;

    --dk-bubble-me: #2563c4;         /* 自己气泡：柔和蓝 */
    --dk-bubble-other: #262629;      /* 对方气泡：深灰 */

    --dk-shadow: 0 4px 16px rgba(0,0,0,0.45);
    --dk-shadow-sm: 0 2px 8px rgba(0,0,0,0.35);

    /* 同步通用变量，让读取 var(--xxx) 的性能CSS拿到暗色值 */
    --chat-nav-bg: #1a1a1d;
    --chat-input-bg: #1a1a1d;
    --bubble-left: #262629;
    --bubble-right: #2563c4;
    --bg-grey: #18181b;
    --border: rgba(255,255,255,0.08);
    --text-main: #e8e8ea;
    --text-sub: #a8a8ad;
    --text-desktop: #e8e8ea;
}

/* iOS底栏白条 & html背景 */
body.theme-dark,
body.theme-dark #device {
    background: var(--dk-bg) !important;
}

/* ============================================================
   1. 广覆盖：所有 Layer / Page 深色底
   ============================================================ */
body.theme-dark .layer:not(#layer-voice-call):not(#layer-video-call),
body.theme-dark .page {
    background: var(--dk-bg) !important;
    color: var(--dk-text);
}

/* 滚动容器透明，继承 layer 底色 */
body.theme-dark .scroll-y {
    background: transparent !important;
}

/* ============================================================
   2. 导航栏（通用 + 聊天）
   ============================================================ */
body.theme-dark .nav-bar {
    background: #1a1a1d !important;
    border-bottom: 1px solid var(--dk-border) !important;
    color: var(--dk-text) !important;
}
body.theme-dark .nav-bar .nav-title,
body.theme-dark .nav-title {
    color: var(--dk-text) !important;
}
body.theme-dark .nav-bar .nav-icon,
body.theme-dark .nav-icon {
    color: var(--dk-text) !important;
}
/* 聊天顶栏 */
/* [FIX-美化兼容 2026-07-10] 有自定义全局CSS时不覆盖聊天导航栏样式，
   避免主题的 color:!important 覆盖用户设的 color:transparent（隐藏标题用 .nav-name 代替），
   导致标题和名字重影/歪位。 */
body.theme-dark:not(.has-custom-global-css) #layer-chat > .nav-bar#chat-nav-bar {
    background: #1a1a1d !important;
    border-bottom: 1px solid var(--dk-border) !important;
}
body.theme-dark:not(.has-custom-global-css) #layer-chat > .nav-bar#chat-nav-bar .nav-title {
    color: var(--dk-text) !important;
}
body.theme-dark:not(.has-custom-global-css) #layer-chat > .nav-bar#chat-nav-bar .nav-icon {
    color: var(--dk-text) !important;
}

/* 模拟状态栏 */
body.theme-dark #fake-ios-statusbar {
    background: #1a1a1d !important;
    color: var(--dk-text) !important;
}

/* ============================================================
   3. 聊天界面
   ============================================================ */
/* 聊天背景 */
body.theme-dark #layer-chat,
body.theme-dark #chat-history:not(.has-custom-bg) {
    background: var(--dk-bg-sunken) !important;
    background-image: none !important;
}

/* 对方气泡：深灰底浅字，去掉黑白描边三角 */
body.theme-dark #layer-chat .msg-row:not(.me) .bubble {
    background: var(--dk-bubble-other) !important;
    border: 1px solid var(--dk-border) !important;
    color: var(--dk-text) !important;
}
body.theme-dark #layer-chat .msg-row:not(.me) .bubble::before {
    border-color: transparent var(--dk-bubble-other) transparent transparent !important;
}
body.theme-dark #layer-chat .msg-row:not(.me) .bubble::after {
    border-color: transparent var(--dk-bubble-other) transparent transparent !important;
}

/* 自己气泡：柔和蓝底白字 */
body.theme-dark #layer-chat .msg-row.me .bubble {
    background: var(--dk-bubble-me) !important;
    border: 1px solid var(--dk-bubble-me) !important;
    color: #ffffff !important;
}
body.theme-dark #layer-chat .msg-row.me .bubble::after {
    border-color: transparent transparent transparent var(--dk-bubble-me) !important;
}

/* 图片气泡保持透明 */
body.theme-dark #layer-chat .bubble:has(img:not(.emoji-img)):not(.voice) {
    background: transparent !important;
    border: none !important;
}

/* 语音波纹 */
body.theme-dark #layer-chat .msg-row:not(.me) .bubble.voice .voice-wave-anim span {
    background: var(--dk-text) !important;
}
body.theme-dark #layer-chat .msg-row.me .bubble.voice .voice-wave-anim span {
    background: #ffffff !important;
}

/* 时间戳 */
body.theme-dark #layer-chat .time-divider,
body.theme-dark #layer-chat .msg-row .time-label,
body.theme-dark #layer-chat .avatar-time-label,
body.theme-dark #layer-chat .bubble-time-label {
    color: var(--dk-text-tertiary) !important;
}

/* 撤回消息 */
body.theme-dark #layer-chat .bubble.recalled {
    background: transparent !important;
    color: var(--dk-text-tertiary) !important;
}

/* 输入栏 */
body.theme-dark #layer-chat .input-bar,
body.theme-dark #chat-input-bar {
    background-color: #1a1a1d !important;
    border-top: 1px solid var(--dk-border) !important;
}
body.theme-dark #layer-chat .input-field,
body.theme-dark #chat-input {
    background: var(--dk-bg-elevated-2) !important;
    border: 1px solid var(--dk-border) !important;
    color: var(--dk-text) !important;
}
body.theme-dark #layer-chat .input-field::placeholder,
body.theme-dark #chat-input::placeholder {
    color: var(--dk-text-tertiary) !important;
}

/* 输入栏按钮 */
body.theme-dark #layer-chat .btn-act {
    background: var(--dk-bg-elevated-2) !important;
    border: 0.75px solid var(--dk-border) !important;
    color: var(--dk-text-secondary) !important;
}
body.theme-dark #layer-chat .btn-send {
    background: var(--dk-bubble-me) !important;
    border: 1px solid var(--dk-bubble-me) !important;
    color: #ffffff !important;
}
body.theme-dark #layer-chat .btn-gen {
    color: var(--dk-text-secondary) !important;
}
body.theme-dark #layer-chat .btn-thought {
    color: var(--dk-text-tertiary) !important;
}

/* 工具栏 */
body.theme-dark #layer-chat .toolbar {
    background: #1a1a1d !important;
    border-top: 1px solid var(--dk-border) !important;
}
body.theme-dark #layer-chat .toolbar i {
    color: var(--dk-text) !important;
}

/* 引用预览 */
body.theme-dark #layer-chat .quote-preview {
    background: var(--dk-bg-elevated-2) !important;
    border: 1px solid var(--dk-border) !important;
    border-left: 3px solid var(--dk-accent) !important;
    color: var(--dk-text-secondary) !important;
}

/* 弹出菜单 */
body.theme-dark #layer-chat .pop-menu,
body.theme-dark .pop-menu {
    background: var(--dk-bg-elevated-2) !important;
    border: 1px solid var(--dk-border) !important;
    box-shadow: var(--dk-shadow) !important;
}
body.theme-dark #layer-chat .pop-opt,
body.theme-dark .pop-opt {
    color: var(--dk-text) !important;
}
body.theme-dark #layer-chat .pop-opt:active,
body.theme-dark .pop-opt:active {
    background: rgba(255,255,255,0.06) !important;
}

/* 多选栏 / 共读栏 / 滚动到底按钮 */
body.theme-dark #chat-select-bar,
body.theme-dark #chat-read-banner {
    background: #1a1a1d !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}
body.theme-dark #chat-scroll-bottom-btn {
    background: var(--dk-bg-elevated-2) !important;
    border: 1px solid var(--dk-border) !important;
    color: var(--dk-text) !important;
}

/* ============================================================
   4. 通用卡片 / 列表 / 分区
   ============================================================ */
body.theme-dark .list-item,
body.theme-dark .cell,
body.theme-dark .form-cell,
body.theme-dark .card,
body.theme-dark .user-info-card,
body.theme-dark .couple-module-card,
body.theme-dark .phone-feature-card,
body.theme-dark .dating-card,
body.theme-dark .group-box,
body.theme-dark .beauty-section-card,
body.theme-dark .beauty-menu-item,
body.theme-dark .settings-group,
body.theme-dark .settings-item,
body.theme-dark .moment-item,
body.theme-dark .contact-item,
body.theme-dark .chat-item,
body.theme-dark .wx-list-item {
    background: var(--dk-bg-elevated) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}

/* 列表项分隔线 */
body.theme-dark .list-item,
body.theme-dark .cell,
body.theme-dark .wx-list-item,
body.theme-dark .contact-item,
body.theme-dark .chat-item {
    border-bottom: 1px solid var(--dk-divider) !important;
}

/* 微信会话列表 */
body.theme-dark #layer-wechat,
body.theme-dark #tab-chats,
body.theme-dark #tab-contacts,
body.theme-dark #tab-me {
    background: var(--dk-bg) !important;
}
body.theme-dark .chat-item .chat-name,
body.theme-dark .contact-item .contact-name,
body.theme-dark .wx-list-item .wx-name {
    color: var(--dk-text) !important;
}
body.theme-dark .chat-item .chat-msg,
body.theme-dark .chat-item .chat-time,
body.theme-dark .wx-list-item .wx-desc {
    color: var(--dk-text-secondary) !important;
}

/* ============================================================
   5. 文字兜底：深底下提亮常见文字色
   ============================================================ */
body.theme-dark h1,
body.theme-dark h2,
body.theme-dark h3,
body.theme-dark h4,
body.theme-dark p,
body.theme-dark span,
body.theme-dark div,
body.theme-dark label,
body.theme-dark li,
body.theme-dark td,
body.theme-dark th,
body.theme-dark a {
    /* 仅在元素自身无强制颜色时回退到浅色；不加 !important 避免覆盖组件刻意指定的颜色 */
    color: var(--dk-text);
}
/* 把常见的硬编码深色文字转浅（高优先级覆盖） */
body.theme-dark [style*="color:#000"],
body.theme-dark [style*="color: #000"],
body.theme-dark [style*="color:#111"],
body.theme-dark [style*="color: #111"],
body.theme-dark [style*="color:#1a1a1a"],
body.theme-dark [style*="color:#222"],
body.theme-dark [style*="color: #222"],
body.theme-dark [style*="color:#333"],
body.theme-dark [style*="color: #333"],
body.theme-dark [style*="color:#1d1d1f"] {
    color: var(--dk-text) !important;
}
body.theme-dark [style*="color:#666"],
body.theme-dark [style*="color: #666"],
body.theme-dark [style*="color:#888"],
body.theme-dark [style*="color: #888"],
body.theme-dark [style*="color:#999"],
body.theme-dark [style*="color: #999"],
body.theme-dark [style*="color:#86868b"] {
    color: var(--dk-text-secondary) !important;
}

/* 把常见的硬编码白/浅底转深 */
body.theme-dark [style*="background:#fff"],
body.theme-dark [style*="background: #fff"],
body.theme-dark [style*="background:#ffffff"],
body.theme-dark [style*="background: #ffffff"],
body.theme-dark [style*="background-color:#fff"],
body.theme-dark [style*="background-color: #fff"],
body.theme-dark [style*="background:#f5f5f7"],
body.theme-dark [style*="background: #f5f5f7"],
body.theme-dark [style*="background:#f7f7f7"],
body.theme-dark [style*="background:#fafafa"],
body.theme-dark [style*="background-color:#f5f5f7"] {
    background-color: var(--dk-bg-elevated) !important;
}

/* ============================================================
   6. 表单控件 / 按钮
   ============================================================ */
body.theme-dark input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body.theme-dark textarea,
body.theme-dark select {
    background: var(--dk-bg-elevated-2) !important;
    border: 1px solid var(--dk-border) !important;
    color: var(--dk-text) !important;
}
body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color: var(--dk-text-tertiary) !important;
}
body.theme-dark .full-btn,
body.theme-dark .btn-primary,
body.theme-dark .primary-btn {
    background: var(--dk-accent) !important;
    color: #ffffff !important;
    border: none !important;
}
body.theme-dark .btn-secondary,
body.theme-dark .ghost-btn,
body.theme-dark .beauty-action-btn {
    background: var(--dk-bg-elevated-2) !important;
    color: var(--dk-text) !important;
    border: 1px solid var(--dk-border) !important;
}

/* 开关 */
body.theme-dark input:checked + .slider,
body.theme-dark .switch input:checked + .slider {
    background: var(--dk-green) !important;
}
body.theme-dark .slider {
    background: var(--dk-bg-elevated-2) !important;
}

/* ============================================================
   7. 弹窗 / 模态框 / 抽屉
   ============================================================ */
body.theme-dark .modal-box,
body.theme-dark .modal-content,
body.theme-dark .settings-sheet,
body.theme-dark .bottom-sheet,
body.theme-dark .drawer,
body.theme-dark .popup-box,
body.theme-dark .confirm-box,
body.theme-dark .action-sheet {
    background: var(--dk-bg-elevated) !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
    box-shadow: var(--dk-shadow) !important;
}
body.theme-dark .modal-box h1,
body.theme-dark .modal-box h2,
body.theme-dark .modal-box h3,
body.theme-dark .modal-box .modal-title {
    color: var(--dk-text) !important;
}
/* 遮罩稍微加深 */
body.theme-dark .modal-mask,
body.theme-dark .mask {
    background: rgba(0,0,0,0.6) !important;
}

/* ============================================================
   8. 底部导航（桌面胶囊导航 + 微信底部Tab）
   ============================================================ */
body.theme-dark .bottom-nav {
    background: rgba(30,30,33,0.7) !important;
    border: 1px solid var(--dk-border) !important;
}
body.theme-dark .wx-tab-bar,
body.theme-dark .tab-bar {
    background: #1a1a1d !important;
    border-top: 1px solid var(--dk-border) !important;
}
body.theme-dark .wx-tab-item,
body.theme-dark .tab-item {
    color: var(--dk-text-secondary) !important;
}
body.theme-dark .wx-tab-item.active,
body.theme-dark .tab-item.active {
    color: var(--dk-green) !important;
}

/* ============================================================
   9. 桌面（应用图标名字提亮，背景图保留）
   ============================================================ */
body.theme-dark #layer-desktop:not([style*="background-image"]) {
    background-color: var(--dk-bg) !important;
}
body.theme-dark .app-name,
body.theme-dark .dock-name {
    color: var(--text-desktop, #e8e8ea) !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.6) !important;
}

/* ============================================================
   10. 朋友圈
   ============================================================ */
body.theme-dark #tab-moments,
body.theme-dark #moments-feed {
    background: var(--dk-bg) !important;
}
body.theme-dark .moment-item {
    background: var(--dk-bg-elevated) !important;
    border-bottom: 1px solid var(--dk-divider) !important;
}
body.theme-dark .moment-name,
body.theme-dark .moment-text {
    color: var(--dk-text) !important;
}
body.theme-dark .moment-comments,
body.theme-dark .moment-comment-item {
    background: var(--dk-bg-soft) !important;
    color: var(--dk-text-secondary) !important;
}
/* 朋友圈滚动后白底导航 → 改深底 */
body.theme-dark #tab-moments.moments-scrolled > .nav-bar,
body.theme-dark #tab-moments.moments-scrolled .nav-bar {
    background: #1a1a1d !important;
    color: var(--dk-text) !important;
    border-bottom: 1px solid var(--dk-border) !important;
}
body.theme-dark #tab-moments.moments-scrolled .nav-bar .nav-icon,
body.theme-dark #tab-moments.moments-scrolled .nav-bar .nav-title {
    color: var(--dk-text) !important;
}

/* ============================================================
   11. 小程序App通用容器（外卖/商店/论坛/游戏/学习等）
   通过 layer 广覆盖已大部分生效，这里补强常见内部容器
   ============================================================ */
body.theme-dark .app-header,
body.theme-dark .app-section,
body.theme-dark .app-card,
body.theme-dark .panel,
body.theme-dark .panel-card,
body.theme-dark .info-card,
body.theme-dark .section-card,
body.theme-dark .tab-content,
body.theme-dark .content-box {
    background: var(--dk-bg-elevated) !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
}

/* Tab 切换条 */
body.theme-dark .tabs,
body.theme-dark .tab-bar-inner,
body.theme-dark .seg-control {
    background: var(--dk-bg-soft) !important;
    border-color: var(--dk-border) !important;
}
body.theme-dark .tab-btn,
body.theme-dark .seg-item {
    color: var(--dk-text-secondary) !important;
}
body.theme-dark .tab-btn.active,
body.theme-dark .seg-item.active {
    background: var(--dk-bg-elevated-2) !important;
    color: var(--dk-text) !important;
}

/* 分隔线/边框统一 */
body.theme-dark hr,
body.theme-dark .divider {
    border-color: var(--dk-divider) !important;
    background: var(--dk-divider) !important;
}

/* ============================================================
   12. Toast（保持半透明黑，夜间也合适，仅微调）
   ============================================================ */
body.theme-dark #toast {
    background: rgba(40,40,44,0.92) !important;
    color: var(--dk-text) !important;
}

/* ============================================================
   13. 滚动条（WebKit）
   ============================================================ */
body.theme-dark ::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15) !important;
}
body.theme-dark ::-webkit-scrollbar-track {
    background: transparent !important;
}

/* ============================================================
   14. 图标/链接强调色
   ============================================================ */
body.theme-dark a:not(.btn):not([class*="btn"]) {
    color: var(--dk-accent) !important;
}

/* 空状态/占位提示文字 */
body.theme-dark .empty-tip,
body.theme-dark .placeholder-text,
body.theme-dark .no-data {
    color: var(--dk-text-tertiary) !important;
}

/* ============================================================
   15. 美化页 / 设置页（高优先级 ID 覆盖）
   ------------------------------------------------------------
   根因：默认主题在 styles.css / styles-part3.css 用了
   `#layer-beauty .beauty-menu-item { ... !important }` 这种 ID 级
   选择器写死白底，权重(1,1,0)高于 body.theme-dark 的类选择器(0,2,1)，
   导致暗色模式在美化/设置页被反盖回白色。
   解决：这里同样带上 #layer-beauty / #layer-settings ID 前缀，
   与 cute/korean/mono 主题写法一致，确保暗色生效。
   ============================================================ */

/* 子页面整体背景 */
body.theme-dark #layer-beauty,
body.theme-dark #layer-settings,
body.theme-dark #layer-beauty .beauty-subpage,
body.theme-dark #layer-settings .settings-subpage {
    background: var(--dk-bg) !important;
    color: var(--dk-text) !important;
}
body.theme-dark #layer-beauty .beauty-subpage > .scroll-y,
body.theme-dark #layer-settings .settings-subpage > .scroll-y,
body.theme-dark #layer-beauty > .scroll-y,
body.theme-dark #layer-settings > .scroll-y {
    background: var(--dk-bg) !important;
    color: var(--dk-text) !important;
}

/* 菜单列表项 */
body.theme-dark #layer-beauty .beauty-menu-item,
body.theme-dark #layer-settings .settings-menu-item,
body.theme-dark #layer-beauty .beauty-section-card,
body.theme-dark #layer-settings .beauty-section-card,
body.theme-dark #layer-beauty .group-box,
body.theme-dark #layer-settings .group-box,
body.theme-dark #layer-settings .settings-group {
    background: var(--dk-bg-elevated) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}
body.theme-dark #layer-beauty .beauty-menu-item,
body.theme-dark #layer-settings .settings-menu-item {
    border-bottom: 1px solid var(--dk-divider) !important;
}

/* 文字与图标 */
body.theme-dark #layer-beauty .beauty-menu-item *,
body.theme-dark #layer-settings .settings-menu-item *,
body.theme-dark #layer-beauty .beauty-section-card *:not(.beauty-action-btn):not(i),
body.theme-dark #layer-settings .group-box *:not(.beauty-action-btn):not(i) {
    color: var(--dk-text) !important;
}
body.theme-dark #layer-beauty .beauty-menu-item .menu-icon,
body.theme-dark #layer-settings .settings-menu-item .menu-icon,
body.theme-dark #layer-beauty .beauty-menu-item i,
body.theme-dark #layer-settings .settings-menu-item i {
    color: var(--dk-text-secondary) !important;
}

/* 输入框 / 文本域 / 下拉 */
body.theme-dark #layer-beauty input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body.theme-dark #layer-beauty textarea,
body.theme-dark #layer-beauty select,
body.theme-dark #layer-settings input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
body.theme-dark #layer-settings textarea,
body.theme-dark #layer-settings select {
    background: var(--dk-bg-elevated-2) !important;
    border: 1px solid var(--dk-border) !important;
    color: var(--dk-text) !important;
}

/* 普通操作按钮（保留危险/强调色语义，仅处理浅底款） */
body.theme-dark #layer-beauty .beauty-action-btn[style*="background:#f5f5f5"],
body.theme-dark #layer-beauty .beauty-action-btn[style*="background: #f5f5f5"],
body.theme-dark #layer-beauty .beauty-action-btn[style*="background: rgb(245"],
body.theme-dark #layer-settings .beauty-action-btn[style*="background:#f5f5f5"],
body.theme-dark #layer-settings .beauty-action-btn[style*="background: #f5f5f5"],
body.theme-dark #layer-settings .beauty-action-btn[style*="background: rgb(245"] {
    background: var(--dk-bg-elevated-2) !important;
    color: var(--dk-text) !important;
    border: 1px solid var(--dk-border) !important;
}
body.theme-dark #layer-beauty .beauty-action-btn[style*="background:#111"],
body.theme-dark #layer-beauty .beauty-action-btn[style*="background: #111"],
body.theme-dark #layer-beauty .beauty-action-btn[style*="background:rgb(17"] {
    background: var(--dk-bg-elevated-2) !important;
    color: var(--dk-text) !important;
    border: 1px solid var(--dk-border-strong) !important;
}

/* 顶部导航栏（美化/设置页默认写死白底，需覆盖） */
body.theme-dark #layer-beauty > .nav-bar,
body.theme-dark #layer-settings > .nav-bar {
    background: #1a1a1d !important;
    border-bottom: 1px solid var(--dk-border) !important;
}
body.theme-dark #layer-beauty > .nav-bar .nav-title,
body.theme-dark #layer-settings > .nav-bar .nav-title,
body.theme-dark #layer-beauty > .nav-bar .nav-icon,
body.theme-dark #layer-settings > .nav-bar .nav-icon {
    color: var(--dk-text) !important;
}

/* ============================================================
   16. 线下模式 (Offline Mode) 暗色适配
   ============================================================ */

/* 线下模式整体背景（覆盖 #layer-offline-mode { background-color: #f5f5f5 }） */
body.theme-dark #layer-offline-mode {
    background-color: var(--dk-bg) !important;
    color: var(--dk-text) !important;
}

/* 顶部固定栏 */
body.theme-dark .offline-fixed-header {
    background: #1a1a1d !important;
    border-bottom: 1px solid var(--dk-border) !important;
}
body.theme-dark .offline-nav-area {
    background: #1a1a1d !important;
}
body.theme-dark .offline-nav-area .nav-title {
    color: var(--dk-pink) !important;
}
body.theme-dark .offline-nav-icon {
    color: var(--dk-text) !important;
}
body.theme-dark .offline-nav-icon i {
    color: var(--dk-text) !important;
}

/* 头像信息栏 */
body.theme-dark .offline-info-bar {
    background: var(--dk-bg-elevated) !important;
    border-color: var(--dk-border) !important;
}
body.theme-dark .offline-distance-badge {
    color: var(--dk-text-secondary) !important;
    background: var(--dk-bg-elevated-2) !important;
}
body.theme-dark .offline-heart-rate {
    color: var(--dk-text-secondary) !important;
}
body.theme-dark .offline-connect-area {
    color: var(--dk-text-secondary) !important;
}

/* 滚动容器和消息区 */
body.theme-dark .offline-scroll-container {
    background: var(--dk-bg-sunken) !important;
}
body.theme-dark .offline-chat-history {
    background: transparent !important;
}

/* 消息卡片 */
body.theme-dark .offline-msg-box {
    background: var(--dk-bg-elevated) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}

/* 线下文本块气泡（嵌入式线下模式） */
body.theme-dark .bubble.offline-text-block {
    background: var(--dk-bg-elevated) !important;
    border: 1px solid var(--dk-border) !important;
    color: var(--dk-text) !important;
}

/* 输入栏 */
body.theme-dark .offline-input-bar {
    background: #1a1a1d !important;
    border-top: 1px solid var(--dk-border) !important;
}
body.theme-dark .offline-input-bar textarea,
body.theme-dark #offline-chat-input {
    background: var(--dk-bg-elevated-2) !important;
    border: 1px solid var(--dk-border) !important;
    color: var(--dk-text) !important;
}
body.theme-dark .offline-input-bar textarea::placeholder,
body.theme-dark #offline-chat-input::placeholder {
    color: var(--dk-text-tertiary) !important;
}
body.theme-dark .offline-icon-btn {
    color: var(--dk-text-secondary) !important;
}

/* 工具栏 */
body.theme-dark .offline-toolbar {
    background: #1a1a1d !important;
    border-top: 1px solid var(--dk-border) !important;
}
body.theme-dark .offline-toolbar i {
    color: var(--dk-text) !important;
}

/* 多选操作栏 */
body.theme-dark .offline-batch-bar {
    background: #1a1a1d !important;
    border-top: 1px solid var(--dk-border) !important;
    color: var(--dk-text) !important;
}
body.theme-dark .offline-batch-btn {
    background: var(--dk-bg-elevated-2) !important;
    color: var(--dk-text) !important;
    border: 1px solid var(--dk-border) !important;
}
body.theme-dark .offline-batch-delete {
    background: var(--dk-red) !important;
    color: #fff !important;
    border: none !important;
}

/* 嵌入式线下模式顶栏（聊天界面内） */
body.theme-dark #chat-offline-header {
    background: #1a1a1d !important;
    border-bottom: 1px solid var(--dk-border) !important;
}
body.theme-dark #chat-offline-header .offline-nav-area {
    background: #1a1a1d !important;
}

/* 线下消息中的时间、作者名 */
body.theme-dark .offline-msg-time {
    color: var(--dk-text-tertiary) !important;
}
body.theme-dark .offline-msg-sender {
    color: var(--dk-text-secondary) !important;
}

/* 线下模式 mini-status 小标签 */
body.theme-dark .offline-mini-status {
    color: var(--dk-text-secondary) !important;
}

/* 线下模式见面徽章 */
body.theme-dark .offline-meeting-badge {
    color: var(--dk-text-secondary) !important;
}

/* 线下模式设置弹窗 */
body.theme-dark #modal-offline-settings .modal-box {
    background: var(--dk-bg-elevated) !important;
    color: var(--dk-text) !important;
}

/* 嵌入式线下模式聊天背景 */
body.theme-dark #chat-history.offline-chat-active {
    background: var(--dk-bg-sunken) !important;
}

/* ============================================================
   13. 心声弹窗（.heart-popup-* 黑白杂志风，颜色写死，需整体反相）
   ============================================================ */
body.theme-dark #modal-thought .heart-popup-card,
body.theme-dark #modal-heart-history .heart-popup-card,
body.theme-dark .heart-popup-card,
body.theme-dark .heart-popup-head,
body.theme-dark .heart-popup-body,
body.theme-dark .heart-popup-meta,
body.theme-dark .heart-popup-foot {
    background: var(--dk-bg-elevated) !important;
    color: var(--dk-text) !important;
}
body.theme-dark .heart-popup-card {
    border: 1.5px solid var(--dk-border-strong) !important;
}
body.theme-dark .heart-popup-meta {
    border-color: var(--dk-border) !important;
}
body.theme-dark .heart-popup-name,
body.theme-dark .heart-popup-meta-row,
body.theme-dark .heart-popup-meta-row .value,
body.theme-dark .thought-quote,
body.theme-dark .heart-popup-body .thought-quote {
    color: var(--dk-text) !important;
}
body.theme-dark .heart-popup-sub,
body.theme-dark .heart-popup-sub .sep,
body.theme-dark .heart-popup-meta-row .label,
body.theme-dark .heart-popup-meta-row i {
    color: var(--dk-text-secondary) !important;
}
body.theme-dark .heart-popup-body .thought-quote::before,
body.theme-dark .heart-popup-body .thought-quote::after {
    color: var(--dk-text) !important;
}
/* 反色元素：徽章 / 主按钮 / 选中成员Tab */
body.theme-dark .heart-popup-badge,
body.theme-dark .heart-popup-btn.primary,
body.theme-dark .heart-popup-member-tab.active {
    background: var(--dk-accent) !important;
    color: #fff !important;
}
body.theme-dark .heart-popup-member-tab.active img {
    border-color: #fff !important;
}
/* 普通按钮 / 成员Tab / 头像边框 */
body.theme-dark .heart-popup-btn {
    background: var(--dk-bg-elevated) !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
}
body.theme-dark .heart-popup-btn:active {
    background: var(--dk-accent) !important;
    color: #fff !important;
}
body.theme-dark .heart-popup-members {
    border-color: var(--dk-border-strong) !important;
}
body.theme-dark .heart-popup-member-tab {
    color: var(--dk-text-secondary) !important;
}
body.theme-dark .heart-popup-refresh,
body.theme-dark .heart-popup-close {
    color: var(--dk-text) !important;
}
body.theme-dark .heart-popup-refresh:hover,
body.theme-dark .heart-popup-close:hover {
    background: var(--dk-bg-elevated-2) !important;
}
/* 翻译抽屉 */
body.theme-dark .heart-popup-body .heart-translate-toggle,
body.theme-dark .heart-popup-body .heart-translation-area {
    background: var(--dk-bg-soft) !important;
    color: var(--dk-text-secondary) !important;
}

/* ============================================================
   14. 心声增强小弹窗（角色状态面板 csp- / 刷新配置 rcfg-）
   面板本体背景已在 JS inline 按暗色切换，这里覆盖内部子元素
   ============================================================ */
body.theme-dark .csp-header,
body.theme-dark .rcfg-head {
    border-color: var(--dk-border) !important;
}
body.theme-dark .csp-header-name,
body.theme-dark .rcfg-title,
body.theme-dark .csp-value-row,
body.theme-dark .csp-member-name {
    color: var(--dk-text) !important;
}
body.theme-dark .csp-header-sub,
body.theme-dark .rcfg-sub,
body.theme-dark .rcfg-section-label,
body.theme-dark .rcfg-add-label,
body.theme-dark .csp-empty {
    color: var(--dk-text-secondary) !important;
}
body.theme-dark .csp-icon-btn,
body.theme-dark .rcfg-close {
    color: var(--dk-text) !important;
}
/* 刷新项目卡片（未选中） */
body.theme-dark .rcfg-item {
    background: var(--dk-bg-soft) !important;
    color: var(--dk-text) !important;
}
body.theme-dark .rcfg-item-name {
    color: var(--dk-text) !important;
}
body.theme-dark .rcfg-item-desc,
body.theme-dark .rcfg-unit {
    color: var(--dk-text-secondary) !important;
}
/* 选中项保持反色高亮 */
body.theme-dark .rcfg-item.on {
    background: var(--dk-accent) !important;
}
body.theme-dark .rcfg-item.on .rcfg-item-name,
body.theme-dark .rcfg-item.on .rcfg-item-desc,
body.theme-dark .rcfg-item.on .rcfg-unit,
body.theme-dark .rcfg-item.on .rcfg-tag {
    color: #fff !important;
}
/* 输入框 */
body.theme-dark .rcfg-input,
body.theme-dark .rcfg-textarea {
    background: var(--dk-bg-sunken) !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
}
body.theme-dark .rcfg-input::placeholder,
body.theme-dark .rcfg-textarea::placeholder {
    color: var(--dk-text-tertiary) !important;
}
body.theme-dark .rcfg-input:focus,
body.theme-dark .rcfg-textarea:focus {
    background: var(--dk-bg-elevated-2) !important;
}
/* 主按钮 */
body.theme-dark .csp-btn-primary,
body.theme-dark .rcfg-btn-primary,
body.theme-dark .rcfg-add-btn {
    background: var(--dk-accent) !important;
    color: #fff !important;
}

/* ============================================================
   15. 联系人分类框（联系人页 QQ 风格分组 + 分组管理弹窗卡片）
   ============================================================ */
/* 联系人页分组 Header（.cg-header 写死 #f7f7f7 浅灰底） */
body.theme-dark .cg-header {
    background: var(--dk-bg-elevated) !important;
    border-bottom: 1px solid var(--dk-border) !important;
}
body.theme-dark .cg-header:active {
    background: var(--dk-bg-elevated-2) !important;
}
body.theme-dark .cg-name {
    color: var(--dk-text) !important;
}
body.theme-dark .cg-arrow,
body.theme-dark .cg-count {
    color: var(--dk-text-secondary) !important;
}
body.theme-dark .cg-body {
    background: transparent !important;
}
body.theme-dark .cg-manage-btn {
    background: var(--dk-bg-elevated) !important;
    color: var(--dk-text-secondary) !important;
}
body.theme-dark .cg-manage-btn:active {
    background: var(--dk-bg-elevated-2) !important;
}
/* 分组管理弹窗卡片（.group-card，子元素文字色写在 inline） */
body.theme-dark #layer-contact-groups .group-card {
    background: var(--dk-bg-elevated) !important;
    color: var(--dk-text) !important;
    border: 1px solid var(--dk-border) !important;
}
body.theme-dark #layer-contact-groups .group-card div {
    color: var(--dk-text) !important;
}
body.theme-dark #layer-contact-groups .group-card i {
    color: var(--dk-text-secondary) !important;
}

/* ============================================================
   [FIX-2026-06-19] 设置 / 美化 / 聊天设置 顶部导航栏暗色兜底
   ------------------------------------------------------------
   症状：暗色模式下设置类页面的导航栏仍是白底。
   根因：1) 默认"便签风"在 styles-part3.css / styles.css 用
            `#layer-settings > .nav-bar { background:#fff !important }`(权重1,1,0)写死白底；
         2) 开了全局壁纸时 `.gwp-has-wallpaper > .nav-bar` 又用 rgba(255,255,255,.85) 白底；
         3) `#layer-chat-settings` 的导航栏此前完全没有暗色覆盖。
   方案：用 `html body.theme-dark`(更高权重) 一次性盖住三类页面 + 壁纸变体，
        放在 dark-theme.css 末尾，确保最后生效。
   ============================================================ */
html body.theme-dark #layer-settings > .nav-bar,
html body.theme-dark #layer-beauty > .nav-bar,
html body.theme-dark #layer-chat-settings > .nav-bar,
html body.theme-dark #layer-settings.gwp-has-wallpaper > .nav-bar,
html body.theme-dark #layer-beauty.gwp-has-wallpaper > .nav-bar {
    background: #1a1a1d !important;
    background-image: none !important;
    border-bottom: 1px solid var(--dk-border) !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
html body.theme-dark #layer-settings > .nav-bar .nav-title,
html body.theme-dark #layer-beauty > .nav-bar .nav-title,
html body.theme-dark #layer-chat-settings > .nav-bar .nav-title,
html body.theme-dark #layer-settings > .nav-bar .nav-icon,
html body.theme-dark #layer-beauty > .nav-bar .nav-icon,
html body.theme-dark #layer-chat-settings > .nav-bar .nav-icon {
    color: var(--dk-text) !important;
}

/* ============================================================
   [FIX-2026-06-20] 世界书 (World Book) 暗色适配
   ------------------------------------------------------------
   症状：暗色模式下世界书页面整体仍是白底。
   根因：1) #wb-list 滚动容器写死 inline `background:#f2f2f2`，
            广覆盖的 .layer/.page 规则盖不住更高优先级的 inline 样式；
         2) 分类条 .wb-category-bar / .wb-cate-chip、卡片内容 .wb-content、
            编辑区输入框、.wb-btn 等都按浅色设计，无暗色覆盖。
   方案：参照 mono/korean/cute 主题，带 #layer-worldbook / #wb-list 前缀
        逐项覆盖为暗色，inline 背景用属性选择器 + html 提权兜底。
   ============================================================ */

/* 列表滚动容器（inline background:#f2f2f2 需用属性选择器提权覆盖） */
html body.theme-dark #wb-list,
html body.theme-dark #layer-worldbook #wb-list[style] {
    background: var(--dk-bg) !important;
}

/* 顶部分类条 */
body.theme-dark #layer-worldbook .wb-category-bar {
    background: var(--dk-bg) !important;
    border-bottom: 1px solid var(--dk-border) !important;
}
body.theme-dark #layer-worldbook .wb-cate-chip {
    background: var(--dk-bg-elevated) !important;
    color: var(--dk-text-secondary) !important;
    border-color: var(--dk-border) !important;
}
body.theme-dark #layer-worldbook .wb-cate-chip.active {
    background: var(--dk-accent) !important;
    color: #fff !important;
    border-color: transparent !important;
}

/* 顶部新建/分类下拉菜单 */
body.theme-dark #layer-worldbook .add-menu {
    background: var(--dk-bg-elevated-2) !important;
    border: 1px solid var(--dk-border) !important;
    box-shadow: var(--dk-shadow) !important;
}
body.theme-dark #layer-worldbook .add-item {
    color: var(--dk-text) !important;
    border-bottom-color: var(--dk-divider) !important;
}
body.theme-dark #layer-worldbook .add-item:active {
    background: rgba(255,255,255,0.06) !important;
}

/* 世界书卡片 */
body.theme-dark #wb-list .group-box.wb-item {
    background: var(--dk-bg-elevated) !important;
    border: 1px solid var(--dk-border) !important;
    color: var(--dk-text) !important;
}
body.theme-dark #wb-list .group-box.wb-item b,
body.theme-dark #wb-list .group-box.wb-item strong {
    color: var(--dk-text) !important;
}
body.theme-dark #wb-list .wb-collapse-arrow {
    color: var(--dk-text-secondary) !important;
}
body.theme-dark #wb-list .wb-content {
    color: var(--dk-text-secondary) !important;
    border-top-color: var(--dk-divider) !important;
}

/* 卡片上的分类标签（inline #f0f0f0 浅灰底转深） */
body.theme-dark #wb-list .group-box.wb-item span[style*="background:#f0f0f0"],
body.theme-dark #wb-list .group-box.wb-item span[style*="background: #f0f0f0"] {
    background: var(--dk-bg-elevated-2) !important;
    color: var(--dk-text-secondary) !important;
}

/* 编辑区输入控件 */
body.theme-dark #wb-list .wb-edit-area input,
body.theme-dark #wb-list .wb-edit-area textarea,
body.theme-dark #wb-list .wb-edit-area select {
    background: var(--dk-bg-elevated-2) !important;
    border: 1px solid var(--dk-border) !important;
    color: var(--dk-text) !important;
}
body.theme-dark #wb-list .wb-edit-area input::placeholder,
body.theme-dark #wb-list .wb-edit-area textarea::placeholder {
    color: var(--dk-text-tertiary) !important;
}
body.theme-dark #wb-list .wb-edit-area label {
    color: var(--dk-text-secondary) !important;
}

/* 卡片按钮 */
body.theme-dark #wb-list .wb-btn.edit,
body.theme-dark #wb-list .wb-btn.cancel {
    background: var(--dk-bg-elevated-2) !important;
    color: var(--dk-text) !important;
    border: 1px solid var(--dk-border) !important;
}
body.theme-dark #wb-list .wb-btn.del {
    background: var(--dk-bg-elevated-2) !important;
    color: var(--dk-red) !important;
    border: 1px solid var(--dk-border) !important;
}
body.theme-dark #wb-list .wb-btn.save {
    background: var(--dk-accent) !important;
    color: #fff !important;
    border: none !important;
}

/* 批量模式底部操作栏（inline background:#fff） */
body.theme-dark #wb-list > div[style*="position:sticky"] {
    background: #1a1a1d !important;
    border-top: 1px solid var(--dk-border) !important;
    color: var(--dk-text) !important;
}

/* 世界书相关弹窗（新建/分类/选择挂载） */
body.theme-dark #modal-wb .modal-box,
body.theme-dark #modal-category .modal-box,
body.theme-dark #modal-wb-select .modal-box {
    background: var(--dk-bg-elevated) !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
    box-shadow: var(--dk-shadow) !important;
}
body.theme-dark #modal-wb .modal-box h3,
body.theme-dark #modal-category .modal-box h3,
body.theme-dark #modal-wb-select .modal-box h3 {
    color: var(--dk-text) !important;
}
body.theme-dark #modal-wb input,
body.theme-dark #modal-wb textarea,
body.theme-dark #modal-wb select,
body.theme-dark #modal-category input {
    background: var(--dk-bg-elevated-2) !important;
    border: 1px solid var(--dk-border) !important;
    color: var(--dk-text) !important;
}

/* 顶部三按钮合一菜单弹窗（.wb-am-item 写死浅色） */
body.theme-dark #wb-action-menu-overlay > div {
    background: var(--dk-bg-elevated) !important;
    box-shadow: var(--dk-shadow) !important;
}
body.theme-dark #wb-action-menu-overlay > div > div:first-child {
    border-bottom-color: var(--dk-border) !important;
}
body.theme-dark #wb-action-menu-overlay > div > div:first-child > div:first-child {
    color: var(--dk-text) !important;
}
body.theme-dark .wb-am-item {
    color: var(--dk-text) !important;
}
body.theme-dark .wb-am-item i {
    color: var(--dk-text-secondary) !important;
}
body.theme-dark .wb-am-item:active {
    background: rgba(255,255,255,0.06) !important;
}
body.theme-dark .wb-am-item.wb-am-danger,
body.theme-dark .wb-am-item.wb-am-danger i {
    color: var(--dk-red) !important;
}

/* ============================================================
   补充覆盖：用户反馈的暗色遗漏区域
   1) 聊天界面输入框左侧「+」加号功能菜单 (.ext-menu-panel)
   2) 线下模式编辑弹窗 (.offline-edit-modal*)
   3) 线下模式设置 / 选择框 (.settings-sheet 通用 + 文风选择器)
   4) 美化App「字体」界面 (#beauty-page-font-style 内联白底元素)
   ============================================================ */

/* ---------- 1. 聊天「+」加号菜单 ---------- */
body.theme-dark .ext-menu-panel {
    background: rgba(26, 26, 29, 0.96) !important;
    border-top: 1px solid var(--dk-border) !important;
}
body.theme-dark .ext-menu-overlay {
    background: rgba(0, 0, 0, 0.5) !important;
}
body.theme-dark .ext-menu-item i,
body.theme-dark .ext-menu-item span {
    color: var(--dk-text) !important;
}
body.theme-dark .ext-menu-item span {
    color: var(--dk-text-secondary) !important;
}
body.theme-dark .ext-menu-item:active {
    background: rgba(255, 255, 255, 0.06) !important;
    border-radius: 10px;
}

/* ---------- 2. 线下模式编辑弹窗 ---------- */
body.theme-dark .offline-edit-modal {
    background: var(--dk-bg-elevated) !important;
    color: var(--dk-text) !important;
    border: 1px solid var(--dk-border) !important;
}
body.theme-dark .offline-edit-modal-title {
    color: var(--dk-text) !important;
    border-bottom: 1px solid var(--dk-divider) !important;
}
body.theme-dark .offline-edit-modal-original {
    color: var(--dk-text-secondary) !important;
    background: var(--dk-bg-sunken) !important;
    border-bottom: 1px solid var(--dk-divider) !important;
}
body.theme-dark .offline-edit-modal-textarea {
    background: var(--dk-bg-elevated) !important;
    color: var(--dk-text) !important;
    border: none !important;
}
body.theme-dark .offline-edit-modal-textarea:focus {
    background: var(--dk-bg-elevated-2) !important;
}
body.theme-dark .offline-edit-modal-btns {
    border-top: 1px solid var(--dk-divider) !important;
}
body.theme-dark .offline-edit-modal-cancel {
    background: var(--dk-bg-elevated-2) !important;
    color: var(--dk-text-secondary) !important;
    border-right: 1px solid var(--dk-divider) !important;
}
body.theme-dark .offline-edit-modal-cancel:active {
    background: var(--dk-bg-sunken) !important;
}
body.theme-dark .offline-edit-modal-confirm {
    background: var(--dk-bg-elevated) !important;
    color: var(--dk-green) !important;
}

/* ---------- 3. 设置抽屉 (settings-sheet) 通用暗色 + 线下选择框 ---------- */
/* 适用于线下模式设置等所有 .settings-sheet 弹窗，与全局 .settings-sheet 深底保持一致 */
body.theme-dark .settings-sheet-header,
body.theme-dark .settings-sheet-footer {
    background: var(--dk-bg-elevated) !important;
    border-color: var(--dk-divider) !important;
}
body.theme-dark .settings-sheet-title {
    color: var(--dk-text) !important;
}
body.theme-dark .settings-sheet-close {
    background: var(--dk-bg-elevated-2) !important;
}
body.theme-dark .settings-sheet-close svg {
    stroke: var(--dk-text) !important;
}
/* 「完成」按钮原为 #1a1a1a 近黑，暗底上几乎不可见 → 用强调色 */
body.theme-dark .settings-sheet-done {
    background: var(--dk-accent) !important;
    color: #fff !important;
}
body.theme-dark .settings-sheet-body {
    background: var(--dk-bg) !important;
}
body.theme-dark .settings-section-title {
    color: var(--dk-text-tertiary) !important;
}
body.theme-dark .settings-group {
    background: var(--dk-bg-elevated) !important;
}
body.theme-dark .settings-row + .settings-row {
    border-top: 0.5px solid var(--dk-divider) !important;
}
body.theme-dark .settings-row.clickable:active {
    background: var(--dk-bg-elevated-2) !important;
}
body.theme-dark .settings-row-label {
    color: var(--dk-text) !important;
}
body.theme-dark .settings-row-label svg {
    stroke: var(--dk-text-secondary) !important;
}
body.theme-dark .settings-row-right select,
body.theme-dark .settings-row-right input[type="number"] {
    background: var(--dk-bg-elevated-2) !important;
    border: 1px solid var(--dk-border) !important;
    color: var(--dk-text) !important;
}
body.theme-dark .settings-row-right .settings-val-text {
    color: var(--dk-text-tertiary) !important;
}
body.theme-dark .settings-row-right .settings-val-badge {
    background: var(--dk-bg-elevated-2) !important;
    color: var(--dk-text-secondary) !important;
}
body.theme-dark .settings-chevron {
    stroke: var(--dk-text-tertiary) !important;
}
body.theme-dark .settings-desc-row,
body.theme-dark .settings-group-hint {
    color: var(--dk-text-tertiary) !important;
}
/* 折叠渐变兜底：原本淡出到 #fff，暗色需淡出到深底 */
body.theme-dark .settings-desc-row.truncated:not(.expanded)::after {
    background: linear-gradient(transparent, var(--dk-bg-elevated) 70%) !important;
    color: var(--dk-accent) !important;
}
body.theme-dark .settings-desc-row.expanded::after {
    color: var(--dk-accent) !important;
}
body.theme-dark .settings-style-inner {
    border-top-color: var(--dk-divider) !important;
}
/* 线下「文风」当前值显示（内联 color:#333） */
body.theme-dark #offline-style-display {
    color: var(--dk-text) !important;
}

/* 文风选择器弹层（#offline-style-picker-overlay，整体内联样式） */
body.theme-dark #offline-style-picker-overlay > div {
    background: var(--dk-bg-elevated) !important;
    border: 1px solid var(--dk-border) !important;
    box-shadow: var(--dk-shadow) !important;
}
body.theme-dark #offline-style-picker-overlay [style*="border-bottom:1px solid #eee"],
body.theme-dark #offline-style-picker-overlay [style*="border-top:1px solid #f0f0f0"] {
    border-color: var(--dk-divider) !important;
}
body.theme-dark #offline-style-picker-overlay [style*="color:#1a1a1a"],
body.theme-dark #offline-style-picker-overlay [style*="color: rgb(26"] {
    color: var(--dk-text) !important;
}
body.theme-dark #offline-style-picker-overlay svg[stroke="#1a1a1a"],
body.theme-dark #offline-style-picker-overlay svg[stroke="#333"] {
    stroke: var(--dk-text) !important;
}
body.theme-dark #offline-style-picker-overlay #offline-style-add-btn {
    background: var(--dk-bg-elevated-2) !important;
    border: 1px solid var(--dk-border) !important;
    color: var(--dk-text) !important;
}
body.theme-dark #offline-style-picker-overlay .ks-style-item.active {
    background: var(--dk-accent-soft) !important;
    border-radius: 8px;
}

/* ---------- 4. 美化App「字体」界面 ---------- */
/* 区块卡片 / 文字已被 #layer-beauty 通用规则覆盖，这里补内联浅底元素 */
/* 导入方式选项卡 */
body.theme-dark #font-import-tabs {
    border-color: var(--dk-border) !important;
}
body.theme-dark #font-import-tabs button {
    color: var(--dk-text-secondary) !important;
    background: transparent !important;
}
body.theme-dark #font-import-tabs button[style*="#f0f0f0"],
body.theme-dark #font-import-tabs button[style*="rgb(240"] {
    background: var(--dk-accent-soft) !important;
    color: var(--dk-text) !important;
}
/* 拖拽上传区 */
body.theme-dark #font-drop-zone {
    background: var(--dk-bg-elevated-2) !important;
    border-color: var(--dk-border-strong) !important;
}
/* 字体预览框（内联白底，否则白字白底不可见） */
body.theme-dark #font-preview-box {
    background: var(--dk-bg-elevated-2) !important;
    border: 1px solid var(--dk-border) !important;
}
/* 提示 / 状态条（内联浅色底，文字已被通用规则提亮） */
body.theme-dark #font-file-info,
body.theme-dark #font-status-bar,
body.theme-dark #font-panel-url > div[style*="background:#fffbe6"],
body.theme-dark #font-panel-base64 > div[style*="background:#e8f5e9"],
body.theme-dark #font-load-progress > div[style*="background:#f0f0f0"] {
    background: var(--dk-bg-soft) !important;
    border-color: var(--dk-border) !important;
}
/* 字体库预设列表项（动态生成，统一深底兜底） */
body.theme-dark #font-preset-list [style*="background:#fff"],
body.theme-dark #font-preset-list [style*="background: rgb(255"] {
    background: var(--dk-bg-elevated-2) !important;
    border-color: var(--dk-border) !important;
}
/* URL 快捷示例按钮 / 清除按钮等内联浅底小按钮 */
body.theme-dark #font-panel-url button[style*="#fafafa"],
body.theme-dark #font-panel-url button[style*="rgb(250"] {
    background: var(--dk-bg-elevated-2) !important;
    color: var(--dk-text-secondary) !important;
    border-color: var(--dk-border) !important;
}

/* ============================================================
   补充覆盖 2：用户反馈第二轮
   A) 被搬出 #layer-settings 的独立详情层 .api-settings-layer
      (API / 语音Minimax / 生图 / STT)——外壳已暗(index.html 41-42)，
      但内部卡片/分组仍是 #layer-settings 作用域规则，搬出后够不到→白卡浮在暗底
   B) 「选择 / 抉择」功能（#layer-choice* 独立页 + 私聊内嵌，整套零覆盖）
   C) 美化页残留白块（组件美化黑白tab / 模式切换 / 预览框 / #ebebeb 滚动底）
   ============================================================ */

/* ---------- A. .api-settings-layer 内部内容暗色（镜像 #layer-settings 规则）---------- */
body.theme-dark .api-settings-layer > .scroll-y {
    background: var(--dk-bg) !important;
    color: var(--dk-text) !important;
}
body.theme-dark .api-settings-layer .beauty-section-card,
body.theme-dark .api-settings-layer .group-box,
body.theme-dark .api-settings-layer .settings-group,
body.theme-dark .api-settings-layer .settings-menu-item {
    background: var(--dk-bg-elevated) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}
body.theme-dark .api-settings-layer .settings-menu-item {
    border-bottom: 1px solid var(--dk-divider) !important;
}
body.theme-dark .api-settings-layer .beauty-section-header {
    background: var(--dk-bg-elevated) !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-divider) !important;
}
/* 卡片内文字统一提亮（排除按钮/图标，保留其语义色） */
body.theme-dark .api-settings-layer .beauty-section-card *:not(.beauty-action-btn):not(i):not(button),
body.theme-dark .api-settings-layer .group-box *:not(.beauty-action-btn):not(i):not(button),
body.theme-dark .api-settings-layer .settings-menu-item * {
    color: var(--dk-text) !important;
}
body.theme-dark .api-settings-layer .settings-menu-item i,
body.theme-dark .api-settings-layer .menu-icon {
    color: var(--dk-text-secondary) !important;
}
/* 内联白底兜底 */
body.theme-dark .api-settings-layer [style*="background:#fff"],
body.theme-dark .api-settings-layer [style*="background: #fff"] {
    background: var(--dk-bg-elevated) !important;
}

/* ---------- B. 「选择 / 抉择」功能 ---------- */
/* B1. 各独立页整体（同时覆盖私聊内嵌：用 unscoped 类名） */
body.theme-dark [id^="layer-choice"] {
    background: var(--dk-bg) !important;
    color: var(--dk-text) !important;
}
body.theme-dark .choice-home-scroll,
body.theme-dark .choice-cat-scroll,
body.theme-dark .choice-scenario-scroll,
body.theme-dark .choice-invite-scroll,
body.theme-dark .choice-debate-scroll,
body.theme-dark .choice-result-scroll {
    background: var(--dk-bg) !important;
}
/* B2. 白卡 #fff（unscoped → 私聊内嵌同样生效） */
body.theme-dark .choice-cat-card,
body.theme-dark .choice-history-card,
body.theme-dark .choice-cat-header,
body.theme-dark .choice-cat-menu,
body.theme-dark .choice-option-item,
body.theme-dark .choice-scenario-section,
body.theme-dark .choice-invite-header,
body.theme-dark .choice-contact-item,
body.theme-dark .choice-debate-scenario-card,
body.theme-dark .choice-reco-bubble,
body.theme-dark .choice-feedback-bubble,
body.theme-dark .choice-people-btn,
body.theme-dark .choice-edit-panel,
body.theme-dark .choice-cat-edit-panel,
body.theme-dark .choice-hint-toast {
    background: var(--dk-bg-elevated) !important;
    border-color: var(--dk-border) !important;
    color: var(--dk-text) !important;
}
/* B3. 浅灰子面 / 标签 / 图片占位（#f5f5f5 #f0f0f0 #f9f9f9 #eee #e0e0e0） */
body.theme-dark .choice-history-tag,
body.theme-dark .choice-tag,
body.theme-dark .choice-option-img,
body.theme-dark .choice-option-img.no-img,
body.theme-dark .choice-cat-icon-default,
body.theme-dark .choice-cat-card.add-card .add-icon,
body.theme-dark .choice-reco-badge,
body.theme-dark .choice-reco-pick,
body.theme-dark .choice-reco-pick-icon,
body.theme-dark .choice-rival-clash,
body.theme-dark .choice-rival-msg .rival-text,
body.theme-dark .choice-debate-scenario-tag,
body.theme-dark .choice-debate-btn.secondary,
body.theme-dark .choice-feedback-status.winner,
body.theme-dark .choice-feedback-status.loser,
body.theme-dark .choice-feedback-msg,
body.theme-dark .choice-cat-card-del,
body.theme-dark .choice-edit-handle {
    background: var(--dk-bg-elevated-2) !important;
    color: var(--dk-text-secondary) !important;
    border-color: var(--dk-border) !important;
}
/* B4. 选中态高亮 */
body.theme-dark .choice-contact-item.selected {
    background: var(--dk-accent-soft) !important;
    color: var(--dk-text) !important;
}
/* B5. 输入框（.choice-scenario-textarea/.choice-edit-input 已被全局表单规则覆盖，补色与边框） */
body.theme-dark .choice-scenario-textarea,
body.theme-dark .choice-edit-input {
    background: var(--dk-bg-elevated-2) !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
}
/* B6. JS 内联面板（手动决定面板 bg#fff / 提示词输入 bg#faf8f6 / 深字 #2c2c34，均挂在 #layer-choice* 内） */
body.theme-dark [id^="layer-choice"] [style*="background:#fff"],
body.theme-dark [id^="layer-choice"] [style*="background: #fff"] {
    background: var(--dk-bg-elevated) !important;
}
body.theme-dark [id^="layer-choice"] [style*="background:#faf8f6"],
body.theme-dark [id^="layer-choice"] [style*="background:#f9f9f9"] {
    background: var(--dk-bg-elevated-2) !important;
}
body.theme-dark [id^="layer-choice"] [style*="color:#2c2c34"],
body.theme-dark [id^="layer-choice"] [style*="color: rgb(44"] {
    color: var(--dk-text) !important;
}
body.theme-dark [id^="layer-choice"] [style*="border-bottom:1px solid #f0ece8"] {
    border-color: var(--dk-divider) !important;
}

/* ---------- C. 美化页残留白块 ---------- */
/* 组件美化黑白杂志风 tab（#fff 底 #1a1a1a 字，带 #layer-beauty 提权才压得过原 !important） */
body.theme-dark #layer-beauty .beauty-comp-tabs {
    background: var(--dk-bg-elevated) !important;
    border-color: var(--dk-border-strong) !important;
}
body.theme-dark #layer-beauty .beauty-comp-tab {
    color: var(--dk-text-secondary) !important;
    border-right-color: var(--dk-border-strong) !important;
}
body.theme-dark #layer-beauty .beauty-comp-tab.active {
    background: var(--dk-accent) !important;
    color: #fff !important;
}
/* 美化模式切换按钮 */
body.theme-dark #layer-beauty .beauty-mode-toggle {
    background: var(--dk-bg-elevated-2) !important;
    border-color: var(--dk-border-strong) !important;
}
body.theme-dark #layer-beauty .beauty-mode-btn {
    color: var(--dk-text-secondary) !important;
}
body.theme-dark #layer-beauty .beauty-mode-btn.active {
    background: var(--dk-bg-elevated) !important;
    color: var(--dk-text) !important;
    box-shadow: 2px 2px 0px var(--dk-border-strong) !important;
}
/* 主页美化 scroll 底（#ebebeb 不在全局属性兜底名单内）+ 图标尺寸预览框 */
body.theme-dark #layer-beauty [style*="background:#ebebeb"],
body.theme-dark #beauty-page-home-style > .scroll-y {
    background: var(--dk-bg) !important;
}
body.theme-dark #icon-size-preview[style*="background:#f0f0f0"],
body.theme-dark #icon-size-preview {
    background: var(--dk-bg-elevated-2) !important;
}

/* ============================================================
   补充覆盖 3：小程序模块全覆盖兜底（2026-07-12）
   -----------------------------------------------------------
   问题：夜间模式下仍有大量页面白底黑字。根因是几十个小程序模块
   （学习/商店/论坛/直播/邮箱/书城/监督/短信/恐怖/同人/相册/门票/
   剧场/背单词/外卖/泡泡/关系网 等）各自的 styles-*.css 把浅色背景
   硬编码在自己的 #layer-xxx .模块类名 上，本主题文件之前并未逐一覆盖，
   于是这些模块在暗色下保持白底黑字。
   策略（满足"所有页面黑底白字，只保留用户自定义图片"）：
     1) 用高特异性(html body.theme-dark + :is(#layer列表))压过模块自身规则；
     2) 只改 background-COLOR(不动 background-image)，保留贴图/用户图片；
     3) 结构容器透明→透出深色底；卡片类容器给一层抬升深色便于区分；
     4) 文字统一提亮；输入框深底浅字；按钮保留自身设计不强改，避免变糊。
   如需给某模块做更精致的暗色，可在上方为其单独写规则（特异性更高即可覆盖本兜底）。
   ============================================================ */

/* 模块根层：深色底 + 浅色字（用 background-color 保留可能存在的用户/装饰图片） */
html body.theme-dark :is(
    #layer-study, #layer-shop, #layer-forum, #layer-forum-detail, #layer-forum-dm,
    #layer-forum-notif, #layer-forum-user-profile, #layer-live, #layer-perception,
    #layer-mailbox, #layer-mail-read, #layer-mail-compose, #layer-mail-contacts,
    #layer-drift-bottle, #layer-drift-compose, #layer-bookstore, #layer-supervise,
    #layer-sms, #layer-games, #layer-horror, #layer-fanfic, #layer-fanfic-read,
    #layer-fanfic-write, #layer-penguin-video, #layer-paopao, #layer-relation-network,
    #layer-relation-network-portrait, #layer-photo-album, #layer-ticket-wallet,
    #layer-ticket-purchase, #layer-mini-theater, #layer-vocab-game, #layer-fooddelivery,
    #layer-atelier, #layer-memory-system, #layer-favorites, #layer-contact-groups,
    #layer-group-detail, #layer-stickers, #layer-persona-mgmt, #layer-gacha,
    #layer-gacha-memorial, #layer-detective, #layer-openworld, #layer-report,
    #layer-schedule, #layer-reconcile, #layer-food-rider
) {
    background-color: var(--dk-bg) !important;
    color: var(--dk-text) !important;
}

/* 模块内部滚动区透明，透出根层深色 */
html body.theme-dark :is(
    #layer-study, #layer-shop, #layer-forum, #layer-forum-detail, #layer-forum-dm,
    #layer-forum-notif, #layer-forum-user-profile, #layer-live, #layer-perception,
    #layer-mailbox, #layer-mail-read, #layer-mail-compose, #layer-mail-contacts,
    #layer-drift-bottle, #layer-drift-compose, #layer-bookstore, #layer-supervise,
    #layer-sms, #layer-games, #layer-horror, #layer-fanfic, #layer-fanfic-read,
    #layer-fanfic-write, #layer-penguin-video, #layer-paopao, #layer-relation-network,
    #layer-relation-network-portrait, #layer-photo-album, #layer-ticket-wallet,
    #layer-ticket-purchase, #layer-mini-theater, #layer-vocab-game, #layer-fooddelivery,
    #layer-atelier, #layer-memory-system, #layer-favorites, #layer-contact-groups,
    #layer-group-detail, #layer-stickers, #layer-persona-mgmt, #layer-gacha,
    #layer-gacha-memorial, #layer-detective, #layer-openworld, #layer-report,
    #layer-schedule, #layer-reconcile, #layer-food-rider
) .scroll-y {
    background-color: transparent !important;
}

/* 结构容器：清掉硬编码浅色底（只清 background-color，保留 background-image 贴图） */
html body.theme-dark :is(
    #layer-study, #layer-shop, #layer-forum, #layer-forum-detail, #layer-forum-dm,
    #layer-forum-notif, #layer-forum-user-profile, #layer-live, #layer-perception,
    #layer-mailbox, #layer-mail-read, #layer-mail-compose, #layer-mail-contacts,
    #layer-drift-bottle, #layer-drift-compose, #layer-bookstore, #layer-supervise,
    #layer-sms, #layer-games, #layer-horror, #layer-fanfic, #layer-fanfic-read,
    #layer-fanfic-write, #layer-penguin-video, #layer-paopao, #layer-relation-network,
    #layer-relation-network-portrait, #layer-photo-album, #layer-ticket-wallet,
    #layer-ticket-purchase, #layer-mini-theater, #layer-vocab-game, #layer-fooddelivery,
    #layer-atelier, #layer-memory-system, #layer-favorites, #layer-contact-groups,
    #layer-group-detail, #layer-stickers, #layer-persona-mgmt, #layer-gacha,
    #layer-gacha-memorial, #layer-detective, #layer-openworld, #layer-report,
    #layer-schedule, #layer-reconcile, #layer-food-rider
) :is(div, section, article, header, footer, aside, nav, main, ul, ol, li, dl, dt, dd,
      table, thead, tbody, tr, td, th, form, fieldset, details, summary, figure, figcaption,
      p, span, h1, h2, h3, h4, h5, h6, label, small, strong, b, em, blockquote) {
    background-color: transparent !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
}

/* 卡片/面板/条目类容器：给一层抬升深色，便于与背景区分（特异性高于上面的结构容器规则） */
html body.theme-dark :is(
    #layer-study, #layer-shop, #layer-forum, #layer-forum-detail, #layer-forum-dm,
    #layer-forum-notif, #layer-forum-user-profile, #layer-live, #layer-perception,
    #layer-mailbox, #layer-mail-read, #layer-mail-compose, #layer-mail-contacts,
    #layer-drift-bottle, #layer-drift-compose, #layer-bookstore, #layer-supervise,
    #layer-sms, #layer-games, #layer-horror, #layer-fanfic, #layer-fanfic-read,
    #layer-fanfic-write, #layer-penguin-video, #layer-paopao, #layer-relation-network,
    #layer-relation-network-portrait, #layer-photo-album, #layer-ticket-wallet,
    #layer-ticket-purchase, #layer-mini-theater, #layer-vocab-game, #layer-fooddelivery,
    #layer-atelier, #layer-memory-system, #layer-favorites, #layer-contact-groups,
    #layer-group-detail, #layer-stickers, #layer-persona-mgmt, #layer-gacha,
    #layer-gacha-memorial, #layer-detective, #layer-openworld, #layer-report,
    #layer-schedule, #layer-reconcile, #layer-food-rider
) :is([class*="card"], [class*="Card"], [class*="panel"], [class*="Panel"],
      [class*="item"], [class*="tile"], [class*="cell"], [class*="banner"],
      [class*="widget"], [class*="sheet"], [class*="popup"], [class*="modal"],
      [class*="menu"], [class*="box"], [class*="block"], [class*="section"]) {
    background-color: var(--dk-bg-elevated) !important;
    border-color: var(--dk-border) !important;
}

/* 输入框/文本域/下拉：深底浅字 */
html body.theme-dark :is(
    #layer-study, #layer-shop, #layer-forum, #layer-forum-detail, #layer-forum-dm,
    #layer-forum-notif, #layer-forum-user-profile, #layer-live, #layer-perception,
    #layer-mailbox, #layer-mail-read, #layer-mail-compose, #layer-mail-contacts,
    #layer-drift-bottle, #layer-drift-compose, #layer-bookstore, #layer-supervise,
    #layer-sms, #layer-games, #layer-horror, #layer-fanfic, #layer-fanfic-read,
    #layer-fanfic-write, #layer-penguin-video, #layer-paopao, #layer-relation-network,
    #layer-relation-network-portrait, #layer-photo-album, #layer-ticket-wallet,
    #layer-ticket-purchase, #layer-mini-theater, #layer-vocab-game, #layer-fooddelivery,
    #layer-atelier, #layer-memory-system, #layer-favorites, #layer-contact-groups,
    #layer-group-detail, #layer-stickers, #layer-persona-mgmt, #layer-gacha,
    #layer-gacha-memorial, #layer-detective, #layer-openworld, #layer-report,
    #layer-schedule, #layer-reconcile, #layer-food-rider
) :is(input, textarea, select) {
    background-color: var(--dk-bg-elevated-2) !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
}
html body.theme-dark :is(
    #layer-study, #layer-shop, #layer-forum, #layer-mailbox, #layer-bookstore,
    #layer-supervise, #layer-sms, #layer-fanfic, #layer-paopao, #layer-photo-album,
    #layer-ticket-wallet, #layer-ticket-purchase, #layer-mini-theater, #layer-vocab-game
) :is(input, textarea)::placeholder {
    color: var(--dk-text-tertiary) !important;
}

/* 图标略降亮度，避免纯白刺眼（保留品牌/语义色按钮里的图标由按钮自身控制） */
html body.theme-dark :is(
    #layer-study, #layer-shop, #layer-forum, #layer-mailbox, #layer-bookstore,
    #layer-supervise, #layer-sms, #layer-fanfic, #layer-paopao, #layer-photo-album,
    #layer-ticket-wallet, #layer-ticket-purchase, #layer-mini-theater, #layer-vocab-game,
    #layer-relation-network, #layer-relation-network-portrait, #layer-detective,
    #layer-openworld, #layer-report, #layer-schedule
) > .nav-bar i {
    color: var(--dk-text) !important;
}

/* ---------- 补充：以"根类名"渲染的子页（情侣空间生活/账本/日历/账户/秘密/约会等） ----------
   这些子页不是 #layer-xxx，而是用各自的根类名渲染进容器，故按根类名兜底。 */
html body.theme-dark :is(
    .cl-page, .ca-page, .cc-container, .cl-container, .pw-wrap, .dy-wrap, .csn-wrap,
    .couple-subpage, .sc-container, .sc-interro-container, .sc-tf-container,
    .sc-frag-container, .sc-archive-container, .sc-immerse-container,
    .status-page-container, .dating-container
) {
    background-color: var(--dk-bg) !important;
    color: var(--dk-text) !important;
}
html body.theme-dark :is(
    .cl-page, .ca-page, .cc-container, .cl-container, .pw-wrap, .dy-wrap, .csn-wrap,
    .couple-subpage, .sc-container, .sc-interro-container, .sc-tf-container,
    .sc-frag-container, .sc-archive-container, .sc-immerse-container,
    .status-page-container, .dating-container
) :is(div, section, article, header, footer, aside, nav, main, ul, ol, li, dl, dt, dd,
      table, thead, tbody, tr, td, th, form, fieldset, details, summary, figure, figcaption,
      p, span, h1, h2, h3, h4, h5, h6, label, small, strong, b, em, blockquote) {
    background-color: transparent !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
}
html body.theme-dark :is(
    .cl-page, .ca-page, .cc-container, .cl-container, .pw-wrap, .dy-wrap, .csn-wrap,
    .couple-subpage, .sc-container, .sc-interro-container, .sc-tf-container,
    .sc-frag-container, .sc-archive-container, .sc-immerse-container,
    .status-page-container, .dating-container
) :is([class*="card"], [class*="Card"], [class*="panel"], [class*="item"], [class*="tile"],
      [class*="cell"], [class*="banner"], [class*="widget"], [class*="sheet"], [class*="popup"],
      [class*="modal"], [class*="menu"], [class*="box"], [class*="block"], [class*="section"]) {
    background-color: var(--dk-bg-elevated) !important;
    border-color: var(--dk-border) !important;
}
html body.theme-dark :is(
    .cl-page, .ca-page, .cc-container, .cl-container, .pw-wrap, .dy-wrap, .csn-wrap,
    .couple-subpage, .sc-container, .status-page-container, .dating-container
) :is(input, textarea, select) {
    background-color: var(--dk-bg-elevated-2) !important;
    color: var(--dk-text) !important;
    border-color: var(--dk-border) !important;
}