/* ============================================================
   dark.css — 白天/黑夜模式主题层（2026-10-01）
   ------------------------------------------------------------
   加载顺序：style.css → 页面级 extra_head → 本文件（最后加载，
   保证同权重规则胜出；对抗内联 style 的场合用 !important）。
   生效条件：html[data-theme="dark"]，由 theme.js 依据三态
   （auto/light/dark，localStorage.theme）解析后设置。

   设计原则：
   1. 主站 96% 的颜色走 :root CSS 变量 —— 覆盖变量即完成主体换肤；
   2. 少量硬编码的浅色状态面（提示条/徽章/高亮等）逐个给出暗色对应；
   3. 模板内联 style 里的白底用属性选择器 + !important 统一兜底；
   4. 品牌色（卡片图标、商城橙、页脚深蓝）保持原色，不做反相。
   ============================================================ */

/* ---------- 主题切换按钮（两种模式共用） ---------- */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
    color: var(--text-color);
    border-radius: 50%;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: var(--transition);
}

.theme-toggle:hover {
    color: var(--primary-color);
    border-color: var(--primary-color);
    transform: rotate(18deg);
}

@media (max-width: 991px) {
    .theme-toggle {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
}

/* ============================================================
   黑夜模式变量覆盖
   ============================================================ */
html[data-theme="dark"] {
    color-scheme: dark;

    --primary-color: #3b82f6;      /* 主色提亮，保证暗底对比度 */
    --secondary-color: #60a5fa;
    --accent-color: #38bdf8;
    --bg-color: #0b1220;           /* 页面底：深蓝黑 */
    --text-color: #dbe4f0;
    --text-light: #8fa1b8;
    --white: #141d30;              /* 语义名沿用：面板/卡片表面色 */
    --border-color: #28354f;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.55);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.6);
}

html[data-theme="dark"] ::selection {
    background: rgba(59, 130, 246, 0.45);
    color: #f1f5f9;
}

/* ---------- 通用浅蓝 tint（#eff6ff 系）→ 半透明主色 ---------- */
html[data-theme="dark"] .bookmark-btn:hover,
html[data-theme="dark"] .upload-zone:hover,
html[data-theme="dark"] .upload-zone.dragover,
html[data-theme="dark"] .result-unit:hover,
html[data-theme="dark"] #shoeTable tbody tr.highlight,
html[data-theme="dark"] .site-search-panel {
    background: #141d30;
}
html[data-theme="dark"] .site-search-empty {
    color: #8fa1b8;
}
html[data-theme="dark"] .site-search-item:hover,
html[data-theme="dark"] .site-search-item.active {
    background: rgba(59, 130, 246, 0.14);
}

html[data-theme="dark"] .info-card,
html[data-theme="dark"] .alert-info,
html[data-theme="dark"] .rate-status,
html[data-theme="dark"] .site-search-item .item-cat {
    background: rgba(59, 130, 246, 0.13);
    border-color: rgba(59, 130, 246, 0.38);
}

/* ---------- 绿色系（成功/完成） ---------- */
html[data-theme="dark"] .alert-success,
html[data-theme="dark"] .download-card {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
}

html[data-theme="dark"] .alert-success,
html[data-theme="dark"] .download-card h3,
html[data-theme="dark"] .bonus-recommend,
html[data-theme="dark"] .no-match {
    color: #34d399;
}

html[data-theme="dark"] .bonus-recommend {
    background: rgba(16, 185, 129, 0.12);
}

/* ---------- 红色系（错误/风险） ---------- */
html[data-theme="dark"] .alert-error,
html[data-theme="dark"] .rate-status.err {
    background: rgba(239, 68, 68, 0.13);
    border-color: rgba(239, 68, 68, 0.38);
    color: #f87171;
}

/* ---------- 黄色系（免责声明/短文本提示/混合判定） ---------- */
html[data-theme="dark"] .disclaimer {
    background: rgba(234, 179, 8, 0.1);
    color: #fbbf24;
}

html[data-theme="dark"] .short-warning {
    background: rgba(234, 179, 8, 0.1);
    border-color: rgba(234, 179, 8, 0.38);
    color: #fbbf24;
}

html[data-theme="dark"] .verdict-mixed {
    background: rgba(249, 115, 22, 0.13);
    border-color: rgba(249, 115, 22, 0.4);
    color: #fb923c;
}

html[data-theme="dark"] .verdict-ai {
    background: rgba(239, 68, 68, 0.13);
    border-color: rgba(239, 68, 68, 0.38);
    color: #f87171;
}

html[data-theme="dark"] .verdict-human {
    background: rgba(16, 185, 129, 0.12);
    border-color: rgba(16, 185, 129, 0.35);
    color: #34d399;
}

html[data-theme="dark"] .dim-explain.dim-ai {
    color: #fbbf24;
}

/* ---------- 查重/AI检测 高亮 ---------- */
html[data-theme="dark"] .match-item {
    background: var(--white);
}

html[data-theme="dark"] mark.dup {
    background: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

html[data-theme="dark"] .hl-red { background: rgba(239, 68, 68, 0.32); }
html[data-theme="dark"] .hl-yellow { background: rgba(234, 179, 8, 0.3); }
html[data-theme="dark"] .hl-green { background: rgba(16, 185, 129, 0.3); }

html[data-theme="dark"] .hl-sentence:hover {
    outline: 2px solid rgba(255, 255, 255, 0.3);
}

/* ---------- 商城 ---------- */
html[data-theme="dark"] .shop-hero-card {
    background: linear-gradient(135deg,
        rgba(249, 115, 22, 0.16) 0%, rgba(234, 88, 12, 0.09) 100%);
    border-color: rgba(249, 115, 22, 0.45);
}

html[data-theme="dark"] .shop-search {
    background: var(--white);
}

html[data-theme="dark"] .shop-search input {
    background: transparent;
    color: var(--text-color);
}

/* 分类筛选条 / 工具条下拉：shop.css 硬编码 #fff */
html[data-theme="dark"] .shop-cat-bar,
html[data-theme="dark"] .shop-toolbar select {
    background: var(--white);
}

html[data-theme="dark"] .shop-cat-chip:hover {
    background: rgba(59, 130, 246, 0.16);
}

html[data-theme="dark"] .product-cover,
html[data-theme="dark"] .product-gallery img,
html[data-theme="dark"] .thumb {
    background: #1b2740;
}

html[data-theme="dark"] .product-tags span,
html[data-theme="dark"] .shop-db-warn {
    background: rgba(59, 130, 246, 0.14);
}

/* ---------- 表单：textarea 此前无背景规则，走浏览器默认渲染，
   与自定义的暗色 input/select 不一致 —— 显式统一 ---------- */
html[data-theme="dark"] .form-group textarea {
    background: var(--white);
    color: var(--text-color);
}

/* ---------- 页脚：底色是固定的深蓝（#1e293b），不随主题走 ----------
   .footer-col h4 / a:hover 用 var(--white) 取对比色 —— 亮色模式下
   --white=#ffffff 正常，暗色模式下 --white 变成深面板色就会隐形。
   页脚永远配浅色文字，这里显式固定。 */
html[data-theme="dark"] .footer-col h4 {
    color: #e2e8f0;
}

html[data-theme="dark"] .footer-col a:hover {
    color: #ffffff;
}

/* ---------- PDF / 其它模块硬编码 ---------- */
html[data-theme="dark"] .extracted-images .ext-img img {
    background: #1b2740;
}

html[data-theme="dark"] .ad-slot {
    background: rgba(148, 163, 184, 0.06);
    border-color: #33415c;
}

/* ---------- 音频工具：波形画布底色 ---------- */
html[data-theme="dark"] .wave-canvas {
    background: #18233a;
}

/* ---------- 内联样式兜底（模板里 style="background:#fff" 等，
   内联优先级高于选择器，必须 !important 才能覆盖；
   值匹配加 i 标志做大小写不敏感，覆盖 #FFF/#FFFFFF/white 等写法） ---------- */
html[data-theme="dark"] [style*="background:#fff" i],
html[data-theme="dark"] [style*="background: #fff" i],
html[data-theme="dark"] [style*="background:#ffffff" i],
html[data-theme="dark"] [style*="background: #ffffff" i],
html[data-theme="dark"] [style*="background:white" i],
html[data-theme="dark"] [style*="background: white" i] {
    background: var(--white) !important;
}

html[data-theme="dark"] [style*="background:#eff6ff" i],
html[data-theme="dark"] [style*="background: #eff6ff" i] {
    background: rgba(59, 130, 246, 0.14) !important;
}

html[data-theme="dark"] [style*="background:#fffbeb" i],
html[data-theme="dark"] [style*="background: #fffbeb" i] {
    background: rgba(234, 179, 8, 0.1) !important;
}

html[data-theme="dark"] [style*="background:#f8fafc" i],
html[data-theme="dark"] [style*="background: #f8fafc" i],
html[data-theme="dark"] [style*="background:#f1f5f9" i],
html[data-theme="dark"] [style*="background: #f1f5f9" i],
html[data-theme="dark"] [style*="background:#e2e8f0" i],
html[data-theme="dark"] [style*="background: #e2e8f0" i] {
    background: #1b2740 !important;
}

html[data-theme="dark"] [style*="border:1px solid #e2e8f0" i],
html[data-theme="dark"] [style*="border-color:#e2e8f0" i],
html[data-theme="dark"] [style*="border-color: #e2e8f0" i],
html[data-theme="dark"] [style*="border-color:#fde68a" i],
html[data-theme="dark"] [style*="border-color: #fde68a" i] {
    border-color: var(--border-color) !important;
}

/* 深色文字的内联样式在暗色面板上保证可读 */
html[data-theme="dark"] [style*="color:#1e293b" i],
html[data-theme="dark"] [style*="color: #1e293b" i],
html[data-theme="dark"] [style*="color:#334155" i],
html[data-theme="dark"] [style*="color: #334155" i],
html[data-theme="dark"] [style*="color:#475569" i],
html[data-theme="dark"] [style*="color: #475569" i] {
    color: var(--text-color) !important;
}

/* ============================================================
   商城：商品卡 / 分页 / 详情卡 / 价格框（2026-10-01 补齐遗漏）
   shop.css 里这批硬编码 #fff 此前没有暗色对应：
   分页按钮白底配暗色文字几乎不可见；商品卡/详情卡白底上
   var(--text-color) 的浅色文字同样不可读。
   ============================================================ */
html[data-theme="dark"] .product-card,
html[data-theme="dark"] .detail-card {
    background: var(--white);
}

html[data-theme="dark"] .shop-pagination a {
    background: var(--white);
    color: var(--text-color);
}

html[data-theme="dark"] .shop-pagination a:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

html[data-theme="dark"] .price-box {
    background: rgba(249, 115, 22, 0.10);
}

html[data-theme="dark"] .shop-db-warn {
    color: #fbbf24;
}

html[data-theme="dark"] .buy-btn-disabled,
html[data-theme="dark"] .buy-btn:disabled {
    background: #475569;
}

/* ---------- 文章页（articles.css 硬编码浅底此前无暗色对应：
   表头/斑马行浅底配浅色文字不可读，引用块是暗页里的亮色补丁） ---------- */
html[data-theme="dark"] .article-meta .chip {
    background: rgba(59, 130, 246, 0.16);
}

html[data-theme="dark"] .article-body th {
    background: #1b2740;
}

html[data-theme="dark"] .article-body tr:nth-child(even) td {
    background: rgba(148, 163, 184, 0.06);
}

html[data-theme="dark"] .article-body blockquote {
    background: rgba(59, 130, 246, 0.08);
    color: var(--text-color);
}

html[data-theme="dark"] .article-body code {
    background: #1b2740;
}

html[data-theme="dark"] .article-cta-card {
    background: rgba(59, 130, 246, 0.08);
}

/* ---------- 音频工具：剪切页切点徽章（audio.css 硬编码 #eff6ff） ---------- */
html[data-theme="dark"] .split-point-chip {
    background: rgba(59, 130, 246, 0.14);
}

/* ---------- 打印永远用亮色版面（省墨 + PDF 友好） ---------- */
@media print {
    html[data-theme="dark"] {
        --bg-color: #ffffff;
        --text-color: #1e293b;
        --text-light: #64748b;
        --white: #ffffff;
        --border-color: #e2e8f0;
        --primary-color: #1a56db;
    }
}