/**
 * 黑夜模式优化样式 - 熏习15分钟
 * 修复黑夜模式下的显示问题
 * 
 * 使用 CSS 变量 + 选择器合并，避免重复代码
 */

/* ========================================
   CSS 变量 - 暗色模式配色
   ======================================== */

html.dark-mode {
    --dm-bg-card: linear-gradient(135deg, rgba(45, 42, 38, 0.95) 0%, rgba(36, 34, 32, 0.9) 100%);
    --dm-bg-card-solid: #2d2a26;
    --dm-bg-input: rgba(30, 28, 26, 0.8);
    --dm-bg-tag: rgba(30, 28, 26, 0.6);
    --dm-bg-hover: rgba(196, 168, 120, 0.1);
    --dm-border: rgba(196, 168, 120, 0.15);
    --dm-border-hover: rgba(196, 168, 120, 0.25);
    --dm-text-primary: #F5F2ED;
    --dm-text-secondary: #B8B0A4;
    --dm-text-muted: #8A847A;
    --dm-text-dim: #7A746A;
    --dm-accent: #C4A878;
    --dm-accent-hover: #D4B888;
    --dm-accent-gradient: linear-gradient(135deg, #C4A878 0%, #A88B5A 100%);
    --dm-success: #81C784;
    --dm-warning: #FFB74D;
    --dm-error: #FF8A65;
}

/* 同时支持系统偏好和类名切换 */
@media (prefers-color-scheme: dark) {
    :root {
        --dm-bg-card: linear-gradient(135deg, rgba(45, 42, 38, 0.95) 0%, rgba(36, 34, 32, 0.9) 100%);
        --dm-bg-card-solid: #2d2a26;
        --dm-bg-input: rgba(30, 28, 26, 0.8);
        --dm-bg-tag: rgba(30, 28, 26, 0.6);
        --dm-bg-hover: rgba(196, 168, 120, 0.1);
        --dm-border: rgba(196, 168, 120, 0.15);
        --dm-border-hover: rgba(196, 168, 120, 0.25);
        --dm-text-primary: #F5F2ED;
        --dm-text-secondary: #B8B0A4;
        --dm-text-muted: #8A847A;
        --dm-text-dim: #7A746A;
        --dm-accent: #C4A878;
        --dm-accent-hover: #D4B888;
        --dm-accent-gradient: linear-gradient(135deg, #C4A878 0%, #A88B5A 100%);
        --dm-success: #81C784;
        --dm-warning: #FFB74D;
        --dm-error: #FF8A65;
    }
}

/* ========================================
   首页 Hero 区域
   ======================================== */

html.dark-mode .home-hero,
:root[data-dark] .home-hero {
    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-page) 50%, var(--bg-page) 100%);
}

html.dark-mode .home-hero .hero-title {
    background: linear-gradient(135deg, var(--primary-color) 0%, #D4C4A8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
}

html.dark-mode .home-hero .hero-subtitle { color: var(--dm-accent); }
html.dark-mode .home-hero .hero-desc { color: var(--dm-text-muted); }

html.dark-mode .value-tag {
    background: var(--dm-bg-card);
    border-color: var(--dm-border);
    color: var(--dm-accent);
}
html.dark-mode .value-tag:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
}

/* 数据统计 - 与 wishlist-banner 统一 */
html.dark-mode .hero-stats,
html.dark-mode .wishlist-banner,
html.dark-mode .stat-item {
    background: var(--dm-bg-card);
    border-color: var(--dm-border);
}

html.dark-mode .stat-number {
    background: var(--dm-accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

html.dark-mode .stat-label { color: var(--dm-text-muted); }
html.dark-mode .stat-item::after { background: rgba(196, 168, 120, 0.2); }

/* 搜索框 */
html.dark-mode .hero-search-form {
    background: rgba(36, 34, 32, 0.8);
    border-color: var(--border-color);
}

html.dark-mode .hero-search-input { color: var(--text-dark); }
html.dark-mode .hero-search-input::placeholder { color: var(--text-muted); }

/* ========================================
   分类卡片 - 图片与遮罩
   ======================================== */

html.dark-mode .card-bg-img img { filter: saturate(0.6) brightness(0.6) blur(2px); }
html.dark-mode .category-card:hover .card-bg-img img { filter: saturate(0.65) brightness(0.65) blur(1.5px); }

html.dark-mode .card-bg-mask {
    background: linear-gradient(180deg, rgba(26, 24, 22, 0.3) 0%, rgba(26, 24, 22, 0.5) 35%, rgba(36, 34, 32, 0.75) 65%, rgba(36, 34, 32, 0.92) 100%);
}

html.dark-mode .category-card:hover .card-bg-mask {
    background: linear-gradient(180deg, rgba(26, 24, 22, 0.2) 0%, rgba(26, 24, 22, 0.4) 30%, rgba(36, 34, 32, 0.7) 60%, rgba(36, 34, 32, 0.9) 100%);
}

/* 分类归档页 */
html.dark-mode .category-hero-bg-image img { filter: blur(8px) saturate(0.5) brightness(0.5); }

html.dark-mode .category-hero-overlay {
    background: linear-gradient(180deg, rgba(26, 24, 22, 0.5) 0%, rgba(36, 34, 32, 0.65) 50%, rgba(36, 34, 32, 0.85) 100%);
}

html.dark-mode .category-title {
    color: var(--dm-text-primary);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* 分类标签 */
html.dark-mode .cat-tag {
    background: rgba(36, 34, 32, 0.75);
    border-color: var(--border-color);
    color: var(--text-normal);
}

html.dark-mode .category-recommendation-tag {
    background: rgba(196, 167, 125, 0.15);
    border-color: rgba(196, 167, 125, 0.3);
}

/* 特殊卡片状态 */
html.dark-mode .category-card.is-completed .card-bg-mask {
    background: linear-gradient(180deg, rgba(39, 174, 96, 0.08) 0%, rgba(26, 24, 22, 0.3) 10%, rgba(36, 34, 32, 0.65) 30%, rgba(36, 34, 32, 0.88) 60%);
}

html.dark-mode .category-card.is-hot .card-bg-mask {
    background: linear-gradient(180deg, rgba(255, 107, 107, 0.08) 0%, rgba(26, 24, 22, 0.3) 40%, rgba(36, 34, 32, 0.7) 70%, rgba(36, 34, 32, 0.85) 100%);
}

html.dark-mode .category-card.has-group-restriction .card-bg-mask {
    background: linear-gradient(180deg, rgba(26, 24, 22, 0.2) 0%, rgba(26, 24, 22, 0.35) 40%, rgba(36, 34, 32, 0.65) 70%, rgba(36, 34, 32, 0.85) 100%);
}

/* ========================================
   弹窗组件
   ======================================== */

html.dark-mode .ting-modal-backdrop,
html.dark-mode .submit-modal-backdrop {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
}

html.dark-mode .ting-modal-content,
html.dark-mode .submit-modal,
html.dark-mode .access-deny-modal-content,
html.dark-mode .monday-first-login-modal {
    background: var(--dm-bg-card);
    border: 1px solid var(--dm-border);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
}

html.dark-mode .ting-modal-icon,
html.dark-mode .sequential-notification-page .notification-icon {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

html.dark-mode .ting-modal-title,
html.dark-mode .submit-modal h3,
html.dark-mode .access-deny-modal-content h3,
html.dark-mode .monday-first-login-modal h2 { color: var(--dm-text-primary); }

html.dark-mode .ting-modal-message,
html.dark-mode .access-deny-modal-content p,
html.dark-mode .monday-first-login-modal p { color: var(--dm-text-secondary); }

html.dark-mode .ting-modal-cancel,
html.dark-mode .submit-modal .cancel-btn,
html.dark-mode .access-deny-modal-close {
    background: rgba(60, 55, 50, 0.8);
    color: var(--dm-text-secondary);
    border: 1px solid var(--dm-border);
}

html.dark-mode .ting-modal-cancel:hover,
html.dark-mode .submit-modal .cancel-btn:hover,
html.dark-mode .access-deny-modal-close:hover {
    background: rgba(80, 75, 70, 0.9);
    border-color: var(--dm-border-hover);
}

html.dark-mode .ting-modal-confirm,
html.dark-mode .submit-modal .submit-btn,
html.dark-mode .access-deny-modal-action {
    background: var(--dm-accent-gradient);
    box-shadow: 0 4px 15px rgba(196, 168, 120, 0.25);
}

html.dark-mode .ting-modal-confirm:hover,
html.dark-mode .submit-modal .submit-btn:hover {
    background: linear-gradient(135deg, #D4B888 0%, #B89B6A 100%);
}

/* ========================================
   加载状态
   ======================================== */

html.dark-mode .ting-loading { background: rgba(0, 0, 0, 0.6); }

html.dark-mode .ting-loading-content {
    background: var(--dm-bg-card);
    border: 1px solid var(--dm-border);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

html.dark-mode .ting-loading-spinner {
    border-color: var(--dm-border);
    border-top-color: var(--dm-accent);
}

html.dark-mode .ting-loading-text { color: var(--dm-text-secondary); }

/* ========================================
   表单输入
   ======================================== */

html.dark-mode .ting-modal-form textarea,
html.dark-mode .submit-modal textarea,
html.dark-mode #longtermApplyModal textarea,
html.dark-mode .comment-input {
    background: var(--dm-bg-input);
    border-color: var(--dm-border);
    color: var(--dm-text-primary);
}

html.dark-mode .ting-modal-form textarea:focus,
html.dark-mode .submit-modal textarea:focus,
html.dark-mode .comment-input:focus {
    border-color: var(--dm-accent);
    box-shadow: 0 0 0 3px rgba(196, 168, 120, 0.1);
}

html.dark-mode .ting-modal-form textarea::placeholder,
html.dark-mode .submit-modal textarea::placeholder,
html.dark-mode .comment-input::placeholder { color: var(--dm-text-dim); }

html.dark-mode .submit-modal .char-count { color: var(--dm-text-dim); }

/* ========================================
   状态卡片与进度
   ======================================== */

html.dark-mode .category-current-status,
html.dark-mode .ting-listen-info,
html.dark-mode .review-section,
html.dark-mode .category-status-bar,
html.dark-mode .last-week-review,
html.dark-mode .sequential-notification-page {
    background: var(--dm-bg-card);
    border-color: var(--dm-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

html.dark-mode .category-current-status .status-icon {
    background: linear-gradient(135deg, rgba(196, 168, 120, 0.15) 0%, rgba(196, 168, 120, 0.05) 100%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

html.dark-mode .category-current-status .status-label { color: var(--dm-text-muted); }
html.dark-mode .category-current-status .status-title { color: var(--dm-text-primary); }
html.dark-mode .category-current-status .status-progress { background: var(--dm-bg-tag); border: 1px solid var(--dm-border); }
html.dark-mode .category-current-status .progress-num { color: var(--dm-accent); }
html.dark-mode .category-current-status .progress-current { color: var(--dm-text-muted); }
html.dark-mode .category-current-status .status-hint { color: var(--dm-text-dim); }

html.dark-mode .category-current-status .status-btn,
html.dark-mode .start-listen-btn,
html.dark-mode .review-write-btn,
html.dark-mode .continue-last-week-btn,
html.dark-mode .category-select-btn {
    background: var(--dm-accent-gradient);
    box-shadow: 0 4px 12px rgba(196, 168, 120, 0.2);
}

html.dark-mode .category-current-status .status-btn:hover,
html.dark-mode .start-listen-btn:hover,
html.dark-mode .review-write-btn:hover,
html.dark-mode .continue-last-week-btn:hover,
html.dark-mode .category-select-btn:hover {
    background: linear-gradient(135deg, #D4B888 0%, #B89B6A 100%);
    box-shadow: 0 6px 16px rgba(196, 168, 120, 0.3);
}

html.dark-mode .start-listen-btn:disabled {
    background: rgba(80, 75, 70, 0.6);
    color: var(--dm-text-muted);
}

/* 已完成状态 */
html.dark-mode .category-current-status.status-completed {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.12) 0%, rgba(36, 34, 32, 0.9) 100%);
    border-color: rgba(76, 175, 80, 0.25);
}

html.dark-mode .category-current-status.status-completed .status-icon {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.25) 0%, rgba(76, 175, 80, 0.1) 100%);
}

html.dark-mode .category-current-status.status-completed .status-label,
html.dark-mode .category-current-status.status-completed .progress-num { color: var(--dm-success); }

html.dark-mode .category-current-status.status-completed .status-btn {
    background: linear-gradient(135deg, #66BB6A 0%, #43A047 100%);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.25);
}

/* 状态栏 */
html.dark-mode .category-status-bar.category-status-locked {
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.1) 0%, rgba(36, 34, 32, 0.9) 100%);
    border-color: rgba(255, 107, 107, 0.2);
}

html.dark-mode .category-status-bar a { color: var(--dm-accent); }
html.dark-mode .category-status-bar a:hover { color: var(--dm-accent-hover); }

/* ========================================
   进度条
   ======================================== */

html.dark-mode .ting-progress-bar { background: rgba(60, 55, 50, 0.5); }

html.dark-mode .ting-progress-fill {
    background: linear-gradient(90deg, #C4A878 0%, #A88B5A 100%);
    box-shadow: 0 0 10px rgba(196, 168, 120, 0.4);
}

html.dark-mode .ting-progress-num { color: var(--dm-accent); }
html.dark-mode .ting-status { color: var(--dm-text-muted); }
html.dark-mode .ting-status.completed { color: var(--dm-success); }
html.dark-mode .ting-status.pending { background: rgba(255, 152, 0, 0.15); color: var(--dm-warning); }

html.dark-mode .ting-time-info { color: var(--dm-text-secondary); }
html.dark-mode .ting-time-item em { color: var(--dm-text-muted); }
html.dark-mode .ting-time-item strong { color: var(--dm-text-primary); }
html.dark-mode .ting-time-divider { color: #6A645A; }

html.dark-mode .ting-category-complete { color: var(--dm-accent); }
html.dark-mode .ting-next-push,
html.dark-mode .ting-hint { color: var(--dm-text-muted); }

/* 历史统计 */
html.dark-mode .ting-history-item,
html.dark-mode .ting-articles-count { background: var(--dm-bg-tag); color: var(--dm-text-muted); }

/* 文章列表 */
html.dark-mode .ting-article-item { background: var(--dm-bg-tag); }
html.dark-mode .ting-article-item.completed { border-color: var(--dm-border); color: var(--dm-text-secondary); }
html.dark-mode .ting-article-item.completed:hover { border-color: var(--dm-border-hover); background: var(--dm-bg-hover); }
html.dark-mode .ting-article-item.pending { border-color: rgba(80, 75, 70, 0.3); color: var(--dm-text-dim); }
html.dark-mode .ting-article-index { background: rgba(45, 42, 38, 0.8); color: var(--dm-text-muted); }
html.dark-mode .ting-article-item.completed .ting-article-index { background: var(--dm-accent-gradient); color: #fff; }
html.dark-mode .ting-article-check { color: var(--dm-success); }
html.dark-mode .ting-article-lock { color: var(--dm-text-dim); }

/* ========================================
   评价区域
   ======================================== */

html.dark-mode .review-summary { background: var(--dm-bg-tag); border-color: var(--dm-border); }
html.dark-mode .review-score-value { color: var(--dm-accent); }
html.dark-mode .review-score-label { color: var(--dm-text-muted); }
html.dark-mode .review-dimension { border-color: rgba(196, 168, 120, 0.08); }
html.dark-mode .review-dimension .dim-name { color: var(--dm-text-muted); }
html.dark-mode .review-dimension .dim-bar { background: rgba(60, 55, 50, 0.4); }
html.dark-mode .review-dimension .dim-bar span { background: linear-gradient(90deg, #C4A878 0%, #A88B5A 100%); }
html.dark-mode .review-dimension .dim-val { color: var(--dm-text-secondary); }
html.dark-mode .review-my-status { color: var(--dm-text-muted); }
html.dark-mode .review-my-status em { color: var(--dm-accent); }

/* 评价列表 */
html.dark-mode .review-item { background: var(--dm-bg-tag); border-color: rgba(196, 168, 120, 0.08); }
html.dark-mode .review-item-name { color: var(--dm-text-primary); }
html.dark-mode .review-item-time { color: var(--dm-text-dim); }
html.dark-mode .review-item-score span { color: var(--dm-text-muted); }
html.dark-mode .review-item-score em { color: var(--dm-accent); }
html.dark-mode .review-item-content { color: var(--dm-text-secondary); }
html.dark-mode .review-empty { color: var(--dm-text-dim); }

/* 分页 */
html.dark-mode .review-pagination .pagination-inner button,
html.dark-mode .review-pagination .pagination-inner span {
    background: rgba(45, 42, 38, 0.8);
    border-color: var(--dm-border);
    color: var(--dm-text-secondary);
}

html.dark-mode .review-pagination .pagination-inner button:hover {
    background: var(--dm-bg-hover);
    border-color: var(--dm-border-hover);
    color: var(--dm-accent);
}

html.dark-mode .review-pagination .pagination-inner .current {
    background: var(--dm-accent-gradient);
    color: #fff;
    border-color: var(--dm-accent);
}

/* ========================================
   Topic Card（心愿单/评论卡片）
   ======================================== */

html.dark-mode .topic-card {
    background: var(--dm-bg-card);
    border-color: var(--dm-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
}

html.dark-mode .topic-card:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.15);
    border-color: var(--dm-border-hover);
}

html.dark-mode .topic-status-badge { background: var(--dm-bg-hover); color: var(--dm-accent); }
html.dark-mode .topic-meta { color: var(--dm-text-muted); }
html.dark-mode .topic-author-name { color: var(--dm-text-muted); }
html.dark-mode .topic-time { color: var(--dm-text-dim); }
html.dark-mode .topic-content { color: var(--dm-text-primary); }
html.dark-mode .topic-attachment-image { border-color: var(--dm-border); }
html.dark-mode .topic-attachment-file { background: rgba(45, 42, 38, 0.8); color: var(--dm-text-secondary); }

/* 官方回复 */
html.dark-mode .topic-reply-collapsed { background: rgba(76, 175, 80, 0.08); border-left-color: var(--dm-success); }
html.dark-mode .reply-content p { color: var(--dm-text-secondary); }
html.dark-mode .reply-date { color: var(--dm-text-dim); }

/* 底部操作区 */
html.dark-mode .topic-vote-btn,
html.dark-mode .topic-comment-btn { color: var(--dm-text-muted); }

html.dark-mode .topic-vote-btn:hover,
html.dark-mode .topic-comment-btn:hover {
    background: var(--dm-bg-hover);
    color: var(--dm-accent);
}

html.dark-mode .topic-vote-btn.voted { color: var(--dm-accent); }
html.dark-mode .topic-vote-btn.voted .vote-label { color: var(--dm-accent); }

/* 评论区 */
html.dark-mode .comment-item { border-bottom-color: rgba(196, 168, 120, 0.08); }
html.dark-mode .comment-item.mentor { background: rgba(76, 175, 80, 0.08); }
html.dark-mode .comment-author { color: var(--dm-text-primary); }
html.dark-mode .comment-text { color: var(--dm-text-secondary); }
html.dark-mode .comment-time { color: var(--dm-text-dim); }
html.dark-mode .no-comments { color: var(--dm-text-dim); }

html.dark-mode .view-all-comments { border-color: var(--dm-border); color: var(--dm-accent); }
html.dark-mode .view-all-comments:hover { background: var(--dm-bg-hover); border-color: var(--dm-border-hover); }

html.dark-mode .comment-submit { background: var(--dm-accent-gradient); }
html.dark-mode .comment-submit:hover { background: linear-gradient(135deg, #D4B888 0%, #B89B6A 100%); }

/* ========================================
   选择分类卡片
   ======================================== */

html.dark-mode .select-category-card {
    background: var(--dm-bg-card);
    border-color: var(--dm-border);
}

html.dark-mode .select-category-card:hover {
    border-color: var(--dm-border-hover);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

html.dark-mode .select-category-card .category-icon { background: var(--dm-bg-tag); }
html.dark-mode .select-category-card .category-title h3 { color: var(--dm-text-primary); }
html.dark-mode .select-category-card .meta-desc { color: var(--dm-text-muted); background: var(--dm-bg-tag); }
html.dark-mode .select-category-card .meta-count { color: var(--dm-accent); background: rgba(196, 168, 120, 0.12); }
html.dark-mode .select-category-card .meta-mode { color: var(--dm-text-secondary); background: rgba(60, 55, 50, 0.6); }
html.dark-mode .select-category-card .meta-action { color: var(--dm-accent); background: rgba(196, 168, 120, 0.12); }

html.dark-mode .select-category-card:hover .meta-action {
    background: var(--dm-accent-gradient);
    color: #fff;
}

html.dark-mode .select-category-card.disabled {
    opacity: 0.5;
    background: rgba(30, 28, 26, 0.5);
    border-color: rgba(80, 75, 70, 0.3);
}

html.dark-mode .select-category-card.disabled .card-lock-reason {
    color: var(--dm-error);
    background: rgba(255, 138, 101, 0.1);
}

/* ========================================
   上周回顾卡片
   ======================================== */

html.dark-mode .review-header { border-bottom-color: var(--dm-border); }
html.dark-mode .review-title { color: var(--dm-text-primary); }
html.dark-mode .review-category .category-label { color: var(--dm-text-muted); }
html.dark-mode .review-category .category-name { color: var(--dm-accent); }
html.dark-mode .stat-value { color: var(--dm-accent); }
html.dark-mode .review-encouragement { background: var(--dm-bg-hover); color: var(--dm-text-secondary); }

/* ========================================
   心愿单页面
   ======================================== */

html.dark-mode .wishlist-page { background: var(--bg-page); }

html.dark-mode .roadmap-section { background: var(--dm-bg-card); }
html.dark-mode .roadmap-title { color: var(--dm-text-primary); }
html.dark-mode .roadmap-subtitle { color: var(--dm-text-muted); }
html.dark-mode .roadmap-timeline::before { background: var(--dm-border); }

html.dark-mode .marker-dot {
    background: var(--dm-accent);
    border-color: var(--dm-bg-card-solid);
    box-shadow: 0 0 0 2px var(--dm-accent);
}

html.dark-mode .marker-line { background: rgba(196, 168, 120, 0.15); }
html.dark-mode .roadmap-card { background: var(--dm-bg-tag); }
html.dark-mode .roadmap-date { background: var(--dm-accent-gradient); }
html.dark-mode .roadmap-item-title,
html.dark-mode .roadmap-content h3 { color: var(--dm-text-primary); }
html.dark-mode .roadmap-meta { color: var(--dm-text-muted); }
html.dark-mode .roadmap-status { background: var(--dm-accent-gradient); }

/* 浮动按钮 */
html.dark-mode .fab-submit {
    background: var(--dm-accent-gradient);
    box-shadow: 0 4px 16px rgba(196, 168, 120, 0.3);
}

html.dark-mode .fab-submit::before { background: var(--dm-accent); }
html.dark-mode .fab-submit:hover { box-shadow: 0 6px 20px rgba(196, 168, 120, 0.4); }

/* 筛选栏 */
html.dark-mode .filter-dropdown-btn,
html.dark-mode .filter-select {
    background: var(--dm-bg-tag);
    border-color: var(--dm-border);
    color: var(--dm-text-secondary);
}

html.dark-mode .filter-dropdown-btn:hover { border-color: var(--dm-border-hover); }
html.dark-mode .filter-count { background: var(--dm-accent-gradient); }

html.dark-mode .filter-dropdown-menu {
    background: var(--dm-bg-card);
    border-color: var(--dm-border);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

html.dark-mode .filter-option { color: var(--dm-text-secondary); }
html.dark-mode .filter-option:hover { background: var(--dm-bg-hover); color: var(--dm-accent); }
html.dark-mode .filter-option.active { color: var(--dm-accent); background: var(--dm-bg-hover); }
html.dark-mode .opt-count { color: var(--dm-text-dim); }

/* 附件上传 */
html.dark-mode .attachment-upload-area {
    background: rgba(30, 28, 26, 0.4);
    border-color: var(--dm-border);
}

html.dark-mode .attachment-upload-area:hover {
    border-color: var(--dm-border-hover);
    background: var(--dm-bg-hover);
}

html.dark-mode .attachment-preview {
    background: var(--dm-bg-tag);
    border-color: var(--dm-border);
}

html.dark-mode .attachment-preview .remove-btn {
    background: rgba(255, 107, 107, 0.2);
    color: var(--dm-error);
}

/* ========================================
   其他页面组件
   ======================================== */

/* 面包屑 */
html.dark-mode .category-breadcrumb { color: var(--dm-text-muted); }
html.dark-mode .category-breadcrumb a { color: var(--dm-accent); }
html.dark-mode .category-breadcrumb a:hover { color: var(--dm-accent-hover); }
html.dark-mode .category-meta-tags { background: rgba(45, 42, 38, 0.6); }
html.dark-mode .category-description { color: var(--dm-text-secondary); }

/* 访问拒绝 */
html.dark-mode .access-denied-page .denied-icon { filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.3)); }
html.dark-mode .access-denied-page h2 { color: var(--dm-text-primary); }
html.dark-mode .access-denied-page p { color: var(--dm-text-muted); }
html.dark-mode .access-denied-page .btn { background: var(--dm-accent-gradient); color: #fff; }

html.dark-mode .category-access-notice {
    background: rgba(45, 42, 38, 0.9);
    border-color: var(--dm-border);
    color: var(--dm-text-secondary);
}

html.dark-mode .category-access-notice .notice-link { background: var(--dm-accent-gradient); }
html.dark-mode .category-access-notice .notice-link:hover { background: linear-gradient(135deg, #D4B888 0%, #B89B6A 100%); }

/* 空状态 */
html.dark-mode .empty-state {
    background: var(--dm-bg-card);
    border-color: var(--dm-border);
    color: var(--dm-text-dim);
}

html.dark-mode .empty-state h3 { color: var(--dm-text-primary); }
html.dark-mode .empty-state p { color: var(--dm-text-muted); }
html.dark-mode .empty-link { background: var(--dm-accent-gradient); }
html.dark-mode .empty-link:hover { background: linear-gradient(135deg, #D4B888 0%, #B89B6A 100%); }
html.dark-mode .empty-state-icon { opacity: 0.5; }

/* 等待页面 */
html.dark-mode .podcast-waiting-page,
html.dark-mode .sequential-select-page,
html.dark-mode .sequential-progress-page { background: var(--bg-page); }

html.dark-mode .waiting-header .category-icon.large {
    background: var(--dm-bg-tag);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

html.dark-mode .waiting-header h1,
html.dark-mode .sequential-select-page .select-header h1,
html.dark-mode .sequential-progress-page .progress-header h1 { color: var(--dm-text-primary); }

html.dark-mode .waiting-header p,
html.dark-mode .sequential-select-page .select-header p { color: var(--dm-text-muted); }

html.dark-mode .sequential-progress-page .progress-header p { color: var(--dm-accent); }

html.dark-mode .sequential-notification-page .notification-title { color: var(--dm-text-primary); }
html.dark-mode .sequential-notification-page .notification-message { color: var(--dm-text-secondary); }

/* 完成页面 */
html.dark-mode .sequential-completed-page {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.08) 0%, var(--bg-page) 100%);
}

html.dark-mode .sequential-completed-page .completed-icon {
    filter: drop-shadow(0 4px 16px rgba(76, 175, 80, 0.3));
}

html.dark-mode .sequential-completed-page .completed-title { color: var(--dm-text-primary); }
html.dark-mode .sequential-completed-page .completed-message { color: var(--dm-text-secondary); }

/* 祝贺弹窗 */
html.dark-mode .congrats-modal {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.12) 0%, #242220 100%);
    border: 1px solid rgba(76, 175, 80, 0.2);
}

html.dark-mode .congrats-modal .modal-icon { filter: drop-shadow(0 4px 16px rgba(76, 175, 80, 0.3)); }
html.dark-mode .congrats-modal h2 { color: var(--dm-text-primary); }
html.dark-mode .congrats-modal p { color: var(--dm-text-secondary); }
html.dark-mode .congrats-modal .share-btn { background: linear-gradient(135deg, #66BB6A 0%, #43A047 100%); }
html.dark-mode .congrats-modal .continue-btn { background: var(--dm-accent-gradient); }

/* 周一欢迎弹窗 */
html.dark-mode .monday-welcome-modal { background: var(--dm-bg-card); }

/* ========================================
   媒体查询 - 系统暗色偏好
   ======================================== */

@media (prefers-color-scheme: dark) {
    /* 使用与 html.dark-mode 相同的变量 */
    .home-hero { background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-page) 50%, var(--bg-page) 100%); }
    
    .hero-stats,
    .wishlist-banner,
    .stat-item { background: var(--dm-bg-card); border-color: var(--dm-border); }
    
    .topic-card,
    .select-category-card,
    .category-current-status,
    .ting-listen-info,
    .review-section,
    .roadmap-section,
    .empty-state {
        background: var(--dm-bg-card);
        border-color: var(--dm-border);
    }
    
    .topic-card:hover,
    .select-category-card:hover { border-color: var(--dm-border-hover); }
    
    .topic-content,
    .select-category-card .category-title h3,
    .roadmap-item-title,
    .category-current-status .status-title,
    .empty-state h3 { color: var(--dm-text-primary); }
    
    .ting-modal-content,
    .submit-modal,
    .filter-dropdown-menu { background: var(--dm-bg-card); border-color: var(--dm-border); }
    
    .ting-modal-title,
    .submit-modal h3 { color: var(--dm-text-primary); }
    
    .ting-modal-message,
    .access-deny-modal-content p { color: var(--dm-text-secondary); }
    
    .ting-modal-cancel,
    .submit-modal .cancel-btn { background: rgba(60, 55, 50, 0.8); color: var(--dm-text-secondary); }
    
    .ting-modal-confirm,
    .submit-modal .submit-btn,
    .comment-submit,
    .start-listen-btn,
    .category-current-status .status-btn { background: var(--dm-accent-gradient); }
    
    .ting-loading-content { background: var(--dm-bg-card); border-color: var(--dm-border); }
    .ting-loading-spinner { border-color: var(--dm-border); border-top-color: var(--dm-accent); }
    .ting-loading-text { color: var(--dm-text-secondary); }
    
    .ting-progress-fill { background: linear-gradient(90deg, #C4A878 0%, #A88B5A 100%); }
    
    .ting-article-item,
    .roadmap-card,
    .filter-dropdown-btn,
    .filter-select { background: var(--dm-bg-tag); }
    
    .ting-article-item.completed { border-color: var(--dm-border); }
    .ting-article-index { background: rgba(45, 42, 38, 0.8); color: var(--dm-text-muted); }
    .ting-article-item.completed .ting-article-index { background: var(--dm-accent-gradient); color: #fff; }
    
    .comment-input { background: var(--dm-bg-input); border-color: var(--dm-border); color: var(--dm-text-primary); }
    
    .filter-option { color: var(--dm-text-secondary); }
    .filter-option:hover { background: var(--dm-bg-hover); }
}