/* --- UI 优化新增样式 --- */
/* 分类悬浮标签 */
.card-category-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    background-color: rgba(210, 35, 42, 0.85);
    color: #fff;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* 深色模式变量 */
[data-theme="dark"] {
    --bg-color: #000000;
    --surface-color: #1C1C1E;
    --text-primary: #F5F5F7;
    --text-secondary: #A1A1A6;
    --theme-red-light: rgba(210, 35, 42, 0.15);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .navbar {
    background-color: rgba(28, 28, 30, 0.8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .article-comment,
[data-theme="dark"] .detail-comment,
[data-theme="dark"] .comment-item,
[data-theme="dark"] .filter-bar,
[data-theme="dark"] .search-form input,
[data-theme="dark"] .category-tag {
    background-color: #2C2C2E;
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .card-cover {
    background-color: #2C2C2E;
}

[data-theme="dark"] .visitor-stats {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

[data-theme="dark"] .skeleton-cover,
[data-theme="dark"] .skeleton-title,
[data-theme="dark"] .skeleton-meta,
[data-theme="dark"] .skeleton-text {
    background: linear-gradient(90deg, #2C2C2E 0px, #3A3A3C 40px, #2C2C2E 80px);
    background-size: 200px 100%;
}