/* ============================================================
   Clara BBS — Clara 深色皮肤（深黑底 + 荧光绿 #32F08C 点缀）
   作用域：body.theme-trae；仅覆盖颜色/阴影/渐变，零布局改动
   加载条件：后台默认风格为深色，或开启前台自由切换（预载保证免刷新切换）
   纯颜色层：所有选择器均带 body.theme-trae 前缀，不影响 Clara 暖米主题
   ============================================================ */

/* ---------------- 1. 设计变量覆盖（全站组件自动继承） ---------------- */
body.theme-trae {
  --bg: #0A0C0A;          /* 页面底：深黑（微绿倾向） */
  --card: #111411;        /* 卡片：深灰 */
  --soft: #191D19;        /* 柔和底 */
  --soft-2: #161A16;      /* 柔和底（次级） */
  --bd: #252B25;          /* 边框 */
  --bd-2: #343D34;        /* 边框（强调） */
  --tx: #E8EFE8;          /* 主文字（冷白微绿） */
  --tx-2: #A3B2A3;        /* 次级文字 */
  --tx-3: #667566;        /* 弱化文字 */
  --ac: #32F08C;          /* 主色：荧光绿 */
  --ac-2: #5CF5A4;        /* 主色（hover 亮态） */
  --ac-soft: #0F2617;     /* 主色柔和底（选中/气泡） */
  --ok: #32F08C;          /* 语义绿与主色统一 */
  --ok-soft: #0F2617;
  --warn: #E0B45C;
  --warn-soft: #2A2214;
  --err: #E5695E;
  --err-soft: #2E1915;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 4px 16px rgba(0,0,0,.4);
  --shadow-lg: 0 4px 12px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.55);
  color-scheme: dark;     /* 原生控件（滚动条/输入框）跟随深色 */
}

/* 荧光绿在深底上做文字时对比度不足，链接/强调文字用调亮版本保证可读 */
body.theme-trae a { color: #5CF5A4; }
body.theme-trae a:hover { color: #7FF8B8; }

/* ---------------- 2. 浅色渐变区 → 深色渐变（微绿倾向的 hero 辉光） ---------------- */
body.theme-trae .home-hero,
body.theme-trae .forum-head,
body.theme-trae .uc-overview-head,
body.theme-trae .uc-balance,
body.theme-trae .checkin-hero,
body.theme-trae .shop-hero,
body.theme-trae .rank-hero { background: linear-gradient(135deg, #121A13 0%, #0B0D0B 100%); }

/* 会员金卡（用户中心） */
body.theme-trae .uc-vip-card { background: linear-gradient(135deg, #262015, #1D1A12); border-color: #3D3524; }

/* AI 徽章（紫色系，与主色绿区分：降低饱和适配深底） */
body.theme-trae .ai-badge { color: #B3A8F5; background: linear-gradient(115deg, #231F38 0%, #1B1828 50%, #231F38 100%); }
body.theme-trae .ai-tag-ic { color: #A18CF8; }

/* ---------------- 3. 正文文字色（原暖黑在深底不可读） ---------------- */
body.theme-trae .thread-content,
body.theme-trae .post-content { color: #D8E2D8; }

/* ---------------- 4. 语义色徽章 / 标签 → 深色版 ---------------- */
/* 付费黄系 */
body.theme-trae .tag-price { background: #2E2410; color: #E8B458; border-color: #4A3A18; }
body.theme-trae .tt-pay { color: #E8B458; background: #2E2410; border-color: #4A3A18; }
body.theme-trae .thread-paywall { border-color: #4A3A18; background: linear-gradient(180deg, #241D0E 0%, var(--card) 120%); }
body.theme-trae .paywall-info .ic { color: #E8B458; }

/* 悬赏橙系（内容语义色，与主色绿区分：保留暖橙但降饱和适配深底） */
body.theme-trae .tag-bounty { background: #2E1A0F; color: #FF9463; border-color: #4A2C18; }
body.theme-trae .tt-bounty { color: #FF9463; background: #2E1A0F; border-color: #4A2C18; }
body.theme-trae .accept-btn { color: #FF9463; }
body.theme-trae .accept-btn:hover { color: #FFB08C; }
body.theme-trae .attach-buy { background: #B4531A; }
body.theme-trae .attach-buy:hover { background: #D06424; color: #FAF9F5; }

/* 投票蓝 / 网盘青 / 附件紫 → 深色版 */
body.theme-trae .tt-poll { color: #7EB1FF; background: #14203A; border-color: #24365C; }
body.theme-trae .tt-pan { color: #5FCFC4; background: #10302C; border-color: #1C4A44; }
body.theme-trae .tt-attach { color: #B49CF8; background: #221A3A; border-color: #382C5C; }

/* ok/warn 徽章边框（ok 已与主色绿统一） */
body.theme-trae .chip-ok,
body.theme-trae .tag-bounty.is-done,
body.theme-trae .tt-bounty.is-done,
body.theme-trae .attach-perm-badge.is-mine { border-color: #1E4A32; }
body.theme-trae .chip-warn { border-color: #4A3C1C; }
body.theme-trae .alert-error { border-color: #57271F; }
body.theme-trae .alert-success { border-color: #1E4A32; }
body.theme-trae .post-item.is-best { border-color: #1E4A32; background: linear-gradient(180deg, rgba(50,240,140,.08), transparent 40%); }

/* 会员锁定/禁言提示横幅（warn 系文字提亮） */
body.theme-trae .alert-warn,
body.theme-trae .member-locked,
body.theme-trae .uc-mute-banner { color: #E0B45C; border-color: #4A3C1C; }
body.theme-trae .member-locked > .ic,
body.theme-trae .uc-mute-banner > .ic,
body.theme-trae .reply-muted > .ic { color: #E0B45C; }
body.theme-trae .reply-muted { color: #E0B45C; }
body.theme-trae .member-locked strong { color: #E8C97E; }

/* ---------------- 5. 金色系（礼物 / 会员 / VIP 信息） ---------------- */
body.theme-trae .tr-gifts,
body.theme-trae .tg-title,
body.theme-trae .vip-info,
body.theme-trae .ch-vip { color: #D9A94E; }
body.theme-trae .vip-info strong { color: #E8C97E; }
body.theme-trae .rank-no.no-1 { color: #E8C97E; background: #3A2F14; }
body.theme-trae .rank-no.no-2 { color: #C4C7D0; background: #2A2D34; }
body.theme-trae .rank-no.no-3 { color: #E0946B; background: #38251A; }

/* ---------------- 6. 阅读进度条 / 危险按钮（主色绿渐变） ---------------- */
body.theme-trae #readingProgressBar { background: linear-gradient(90deg, #32F08C, #7FF8B8); }
body.theme-trae .btn-danger:hover { background: #C0473A; }

/* ---------------- 7. 弹窗 / 提示 / 面板微调 ---------------- */
/* 头部毛玻璃（原暖白半透明硬编码 → 深色半透明） */
body.theme-trae .site-header { background: rgba(9, 11, 9, .92); }
/* Toast 本就是深色，统一到主题黑 */
body.theme-trae .toast { background: #20241F; box-shadow: 0 6px 20px rgba(0,0,0,.55); }
body.theme-trae .toast.toast-ok { background: #12331F; }
body.theme-trae .toast.toast-err { background: #421F1A; }
/* 模态遮罩加深 */
body.theme-trae .modal-overlay { background: rgba(4, 6, 4, .68); }
body.theme-trae .pan-modal-mask { background: rgba(4, 6, 4, .62); }
/* 签到日历状态色 */
body.theme-trae .cal-status.is-ok { color: #32F08C; }
body.theme-trae .cal-status.is-warn { color: #E0796E; }
/* 代码块（editor.css 移动端白底兜底 → 深色） */
body.theme-trae .rich-text pre.code-block { background: #0D100D; color: #D8E2D8; border-color: #252B25; }
body.theme-trae .rich-text pre.code-block[data-lang]::before { color: #667566; border-color: #252B25; }

/* ---------------- 8. 深色专属微调 ---------------- */
/* 标题高亮色：深底提亮版（复合选择器与 app.css 同构并加 body 前缀，优先级高于浅色版，
   版务标记双皮肤同步） */
body.theme-trae .tr-title a.ts-red, body.theme-trae .hot-list a.ts-red, body.theme-trae .thread-title.ts-red, body.theme-trae .msp-preview.ts-red { color: #FF8A7A; }
body.theme-trae .tr-title a.ts-orange, body.theme-trae .hot-list a.ts-orange, body.theme-trae .thread-title.ts-orange, body.theme-trae .msp-preview.ts-orange { color: #E8B458; }
body.theme-trae .tr-title a.ts-green, body.theme-trae .hot-list a.ts-green, body.theme-trae .thread-title.ts-green, body.theme-trae .msp-preview.ts-green { color: #4ADE80; }
body.theme-trae .tr-title a.ts-blue, body.theme-trae .hot-list a.ts-blue, body.theme-trae .thread-title.ts-blue, body.theme-trae .msp-preview.ts-blue { color: #7EB1FF; }
body.theme-trae .tr-title a.ts-purple, body.theme-trae .hot-list a.ts-purple, body.theme-trae .thread-title.ts-purple, body.theme-trae .msp-preview.ts-purple { color: #B49CF8; }
/* 交互式选色面板：深色适配（面板底/边框/投影走变量自动继承，这里补选中态描边） */
body.theme-trae .msp-sw.is-on .msp-sw-dot { box-shadow: 0 0 0 2px var(--card), 0 0 0 3.5px #667566, 0 0 10px rgba(50, 240, 140, .25); }
/* 荧光绿是亮色底：所有绿底元素的文字改深色（原米白 #FAF9F5 在亮绿上对比度不足，
   如「发布主题 / 每日签到」主按钮）；覆盖 .btn 及全部 --ac 底的激活态组件 */
body.theme-trae .btn,
body.theme-trae .btn:hover,
body.theme-trae .skip-link,
body.theme-trae .brand-mark,
body.theme-trae .rank-tab.is-on,
body.theme-trae .layout-btn.is-active,
body.theme-trae .filter-btn.is-active,
body.theme-trae .chip.is-on,
body.theme-trae .cal-day.is-checked,
body.theme-trae .pager-btn.is-current,
body.theme-trae .pwa-float-icon,
body.theme-trae .pm-badge,
body.theme-trae .ed-attach-tab.is-active,
body.theme-trae .code-copy-btn.is-copied { color: #0A0C0A; }
/* 非绿底按钮变体恢复各自文字色（避免被上面的 .btn 深色覆盖误伤） */
body.theme-trae .btn.btn-ghost,
body.theme-trae .btn.btn-ghost:hover { color: var(--tx); }
body.theme-trae .btn.btn-danger,
body.theme-trae .btn.btn-danger:hover { color: #FAF9F5; } /* 红底保持白字 */
body.theme-trae .btn.btn-danger-ghost,
body.theme-trae .btn.btn-danger-ghost:hover { color: var(--err); }
body.theme-trae .btn.follow-btn.is-on,
body.theme-trae .btn.follow-btn.is-on:hover { color: var(--tx-3); } /* 已关注灰态 */

/* 文本选区：主题绿 */
body.theme-trae ::selection { background: #14572E; color: #D6FFE7; }
/* 输入控件深色（textarea/input 未显式设色的地方由 color-scheme 兜底） */
body.theme-trae input,
body.theme-trae textarea,
body.theme-trae select { background: var(--card); color: var(--tx); }
/* 编辑器聚焦辉光（原硬编码赤陶色 → 荧光绿） */
body.theme-trae .editor:focus-within { box-shadow: 0 0 0 3px rgba(50, 240, 140, .14); }
/* 主按钮/激活态辉光（荧光光晕感；仅桌面 hover） */
@media (hover: hover) {
  body.theme-trae .btn:hover { box-shadow: 0 2px 16px rgba(50, 240, 140, .3); }
  body.theme-trae .is-on { box-shadow: 0 0 10px rgba(50, 240, 140, .18); }
}
/* 分享二维码保持白底（扫码识别需要，勿动） */
/* 头像首字母亮色底在深色下为彩色点缀，保留 */
/* 图片亮度不压制：表情 gif / 帖子配图原样展示 */

/* ---------------- 9. 风格切换菜单（仅按钮存在时本文件必已加载：开启切换即预载，样式放此处不进 app.css） ---------------- */
.theme-switch .drop-menu { left: auto; right: 0; }
.theme-menu { min-width: 172px; }
.theme-menu-title { font-size: 11.5px; color: var(--tx-3); padding: 6px 12px 4px; text-transform: uppercase; letter-spacing: .5px; }
.theme-menu a { display: flex; align-items: center; gap: 8px; }
.theme-menu a.is-active { color: var(--ac-2); font-weight: 600; background: var(--ac-soft); }
.theme-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); flex-shrink: 0; }
.theme-dot.t-clara { background: linear-gradient(135deg, #FAF9F5 50%, #D97757 50%); }
.theme-dot.t-trae { background: linear-gradient(135deg, #0A0C0A 50%, #32F08C 50%); }

/* ---------------- 10. 移动端 ---------------- */
/* 布局响应式完全由 app.css 承担（变量自动继承），此处仅补深色下的移动端细节：
   移动端展开菜单/抽屉的阴影加深、触控反馈色 */
@media (max-width: 768px) {
  body.theme-trae .drop-menu { box-shadow: var(--shadow-lg); }
}
/* 打印保持白底（与 Clara 主题同规则：打印隐藏装饰只留内容） */
@media print {
  body.theme-trae { background: #fff; }
  body.theme-trae .card { background: #fff; border-color: #ddd; }
  body.theme-trae .thread-content, body.theme-trae .post-content { color: #191817; }
}