/* 主题切换样式 */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f7fa;
    --bg-tertiary: #f8f9fa;
    --text-primary: #2c3e50;
    --text-secondary: #5f6368;
    --text-tertiary: #8492a6;
    --border-color: #e5e7eb;
    --border-light: #f0f2f5;
    --card-bg: #ffffff;
    --header-bg: #ffffff;
    --input-bg: #ffffff;
    --shadow-sm: rgba(0, 0, 0, 0.06);
    --shadow-md: rgba(0, 0, 0, 0.1);
    --shadow-lg: rgba(0, 0, 0, 0.15);
    --hover-bg: #f5f5f5;
    --active-bg: #e8eaed;
}

/* 暗色主题 */
[data-theme="dark"] {
    --bg-primary: #1a1a1a;
    --bg-secondary: #252525;
    --bg-tertiary: #2d2d2d;
    --text-primary: #e4e4e7;
    --text-secondary: #a1a1aa;
    --text-tertiary: #71717a;
    --border-color: #3a3a3a;
    --border-light: #2d2d2d;
    --card-bg: #252525;
    --header-bg: #1f1f1f;
    --input-bg: #2d2d2d;
    --shadow-sm: rgba(0, 0, 0, 0.3);
    --shadow-md: rgba(0, 0, 0, 0.4);
    --shadow-lg: rgba(0, 0, 0, 0.5);
    --hover-bg: #2d2d2d;
    --active-bg: #3a3a3a;
}

/* 应用主题变量 */
body {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.header {
    background: var(--header-bg);
    border-bottom-color: var(--border-color);
}

.logo {
    color: var(--text-primary);
}

.nav a {
    color: var(--text-secondary);
}

.nav a:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.search-icon-btn:hover {
    background: var(--hover-bg);
}

.search-icon-btn svg {
    color: var(--text-secondary);
}

.search-modal-content {
    background: var(--card-bg);
    box-shadow: 0 4px 20px var(--shadow-md);
}

.search-modal-input {
    background: var(--input-bg);
    color: var(--text-primary);
    border-color: #007AFF;
}

/* 白色背景元素 */
.detail-header,
.detail-content,
.rating-wrapper,
.articles-wrapper,
.card,
.panel,
.widget {
    background: var(--card-bg);
    color: var(--text-primary);
}

/* 二级背景色 */
.comment-item,
.article-item,
.version-item,
.featured-content {
    background: var(--bg-tertiary);
}

.comment-item:hover,
.article-item:hover {
    background: var(--hover-bg);
}

/* 边框颜色 */
.breadcrumb,
.section-title,
.info-item {
    border-color: var(--border-light);
}

/* 文本颜色 */
.app-subtitle,
.featured-description,
.comment-content,
.article-meta {
    color: var(--text-secondary);
}

.info-item-label,
.comment-time,
.version-item-info {
    color: var(--text-tertiary);
}

/* 主题切换按钮 */
.theme-switcher {
    position: relative;
    display: flex;
    align-items: center;
}

.theme-toggle-btn {
    background: transparent;
    border: none;
    padding: 8px;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    min-height: 36px;
}

.theme-toggle-btn:hover {
    background: var(--hover-bg);
}

.theme-toggle-btn svg {
    width: 20px;
    height: 20px;
    color: var(--text-secondary);
}

.theme-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 8px;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px var(--shadow-md);
    min-width: 150px;
    overflow: hidden;
    z-index: 1000;
}

.theme-menu.active {
    display: block;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.theme-menu-item {
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    font-size: 14px;
}

.theme-menu-item:hover {
    background: var(--hover-bg);
}

.theme-menu-item.active {
    background: var(--active-bg);
    color: #007AFF;
}

.theme-menu-item svg {
    width: 16px;
    height: 16px;
}

/* 移动端已禁用，显示 viewport warning */

/* 暗色主题下的图片亮度调整 */
[data-theme="dark"] img:not(.logo img):not(.app-icon) {
    opacity: 0.9;
}

/* 暗色主题下的输入框 */
[data-theme="dark"] input,
[data-theme="dark"] textarea {
    background: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus {
    border-color: #007AFF;
}

/* 暗色主题下的按钮保持渐变色 */
.download-btn,
.modal-submit-btn,
.comment-submit-btn {
    /* 保持原有的渐变色不变 */
}

/* ==================== 首页和列表页样式 ==================== */

/* 分类卡片 */
.feature-card,
.module-card {
    background: var(--card-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.feature-card:hover,
.module-card:hover {
    background: var(--hover-bg);
}

/* 专题卡片保持渐变色背景，不使用主题变量 */
.category-card {
    /* 渐变背景色由内联样式或其他地方定义 */
}

/* 软件/游戏卡片 */
.resource-card,
.game-card,
.app-card,
.item-card {
    background: var(--card-bg);
    color: var(--text-primary);
}

.resource-card:hover,
.game-card:hover,
.app-card:hover {
    background: var(--hover-bg);
}

/* 卡片标题和描述 */
.card-title,
.item-title,
.resource-name,
.game-title,
.app-name {
    color: var(--text-primary);
    /* 限制名称显示为两行，超出省略 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    max-height: 2.8em;
}

.card-desc,
.item-desc,
.resource-desc,
.game-desc {
    color: var(--text-secondary);
}

.card-meta,
.item-meta,
.resource-meta {
    color: var(--text-tertiary);
}

/* 轮播图容器 */
.swiper,
.slider,
.banner {
    background: var(--bg-tertiary);
}

/* 标签 */
.tag,
.badge,
.label {
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    border-color: var(--border-color);
}

/* 列表项 */
.list-item,
.table-row {
    background: var(--card-bg);
    border-color: var(--border-light);
}

.list-item:hover {
    background: var(--hover-bg);
}

/* ==================== 文章页样式 ==================== */

/* 文章标题 */
.article-title,
.post-title,
.entry-title,
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary) !important;
}

/* 文章内容 */
.article-content,
.post-content,
.entry-content,
.content {
    color: var(--text-primary);
}

.article-content p,
.post-content p {
    color: var(--text-primary);
}

/* 文章元信息 */
.article-meta,
.post-meta,
.entry-meta {
    color: var(--text-tertiary);
}

/* 代码块 */
[data-theme="dark"] pre,
[data-theme="dark"] code {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* 引用块 */
[data-theme="dark"] blockquote {
    background: var(--bg-tertiary);
    border-left-color: var(--border-color);
    color: var(--text-secondary);
}

/* ==================== 导航栏增强 ==================== */

/* 确保导航链接在暗色下可见 */
[data-theme="dark"] .nav a {
    color: var(--text-secondary);
}

[data-theme="dark"] .nav a:hover {
    color: var(--text-primary);
    background: var(--hover-bg);
}

[data-theme="dark"] .nav a.active {
    color: #007AFF;
    background: rgba(0, 122, 255, 0.1);
}

/* Logo 在暗色主题下 */
[data-theme="dark"] .logo {
    color: var(--text-primary);
}

/* ==================== 通用容器 ==================== */

/* 所有白色背景容器 */
[data-theme="dark"] .container,
[data-theme="dark"] .wrapper,
[data-theme="dark"] .box,
[data-theme="dark"] .section {
    background: var(--card-bg);
    color: var(--text-primary);
}

/* 灰色背景容器 */
[data-theme="dark"] .sidebar,
[data-theme="dark"] .aside,
[data-theme="dark"] .footer {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

/* 分割线 */
[data-theme="dark"] hr,
[data-theme="dark"] .divider {
    border-color: var(--border-color);
}

/* ==================== 首页特定元素 ==================== */

/* 推荐位/特色卡片 */
.featured-section,
.recommend-section,
.hot-section {
    background: var(--card-bg);
}

/* 统计信息 */
.stats,
.counter,
.number-display {
    color: var(--text-primary);
}

/* 分类导航 */
.category-nav,
.filter-nav,
.tab-nav {
    background: var(--card-bg);
    border-color: var(--border-color);
}

/* ==================== 列表页特定元素 ==================== */

/* 筛选器 */
.filter,
.sorter,
.toolbar {
    background: var(--card-bg);
    color: var(--text-primary);
}

/* 分页 */
.pagination,
.pager {
    background: var(--card-bg);
}

.pagination a,
.pager a {
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border-color: var(--border-color);
}

.pagination a:hover,
.pager a:hover {
    background: var(--hover-bg);
}

/* ==================== 搜索框增强 ==================== */

[data-theme="dark"] .search-box,
[data-theme="dark"] .search-input {
    background: var(--input-bg);
    color: var(--text-primary);
    border-color: var(--border-color);
}

/* ==================== 按钮增强 ==================== */

[data-theme="dark"] button:not(.download-btn):not(.modal-submit-btn):not(.comment-submit-btn),
[data-theme="dark"] .btn:not(.download-btn) {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] button:hover,
[data-theme="dark"] .btn:hover {
    background: var(--hover-bg);
}

/* ==================== 链接颜色 ==================== */

[data-theme="dark"] a:not(.nav a):not(.download-btn) {
    color: #64b5f6;
}

[data-theme="dark"] a:not(.nav a):not(.download-btn):hover {
    color: #90caf9;
}

/* ==================== 表格 ==================== */

[data-theme="dark"] table {
    background: var(--card-bg);
    color: var(--text-primary);
}

[data-theme="dark"] table th {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}

[data-theme="dark"] table td {
    border-color: var(--border-color);
}

[data-theme="dark"] table tr:hover {
    background: var(--hover-bg);
}