/**
 * 分类导航修复样式
 * 版本: 1.0.0
 */

:root {
    /* 浅色模式下的分类颜色 */
    --category-nav-bg-all: #F0F4F8; /* 所有分类：浅灰色 */
    --category-nav-text-all: #607D8B;

    --category-nav-bg-0: #D4EDDA; /* 编程开发：浅蓝绿色 */
    --category-nav-text-0: #28A745;

    --category-nav-bg-1: #FEEBC8; /* 家庭教育：浅橙色 */
    --category-nav-text-1: #F59E0B;

    --category-nav-bg-2: #E0F2F1; /* 健康管理：浅青色 */
    --category-nav-text-2: #00796B;

    --category-nav-bg-3: #E3F2FD; /* 教育工具：浅蓝色 */
    --category-nav-text-3: #1976D2;

    --category-nav-bg-4: #FFF3E0; /* 节日工具：浅橙黄色 */
    --category-nav-text-4: #F57C00;

    --category-nav-bg-5: #F3E5F5; /* 考生助手：浅紫色 */
    --category-nav-text-5: #7B1FA2;

    --category-nav-bg-6: #E8F5E8; /* 内容创作：浅绿色 */
    --category-nav-text-6: #388E3C;

    --category-nav-bg-7: #FCE4EC; /* 情侣小工具：浅粉色 */
    --category-nav-text-7: #C2185B;

    --category-nav-bg-8: #FFF8E1; /* 趣味游戏：浅黄色 */
    --category-nav-text-8: #F9A825;

    --category-nav-bg-9: #E1F5FE; /* 社交媒体：浅天蓝色 */
    --category-nav-text-9: #0277BD;

    --category-nav-bg-10: #F1F8E9; /* 生活助手：浅草绿色 */
    --category-nav-text-10: #689F38;

    --category-nav-bg-11: #FFF3E0; /* 图像处理：浅橙色 */
    --category-nav-text-11: #FF8F00;

    --category-nav-bg-12: #F9FBE7; /* 文本处理：浅黄绿色 */
    --category-nav-text-12: #827717;

    --category-nav-bg-13: #FFEBEE; /* 营销推广：浅红色 */
    --category-nav-text-13: #D32F2F;

    --category-nav-bg-14: #F8D7DA; /* 娱乐休闲：浅珊瑚色 */
    --category-nav-text-14: #DC3545;

    --category-nav-bg-15: #E8F5E8; /* 职场提效：浅绿色 */
    --category-nav-text-15: #2E7D32;

    --category-nav-bg-16: #E8EAF6; /* 追剧助手：浅靛蓝色 */
    --category-nav-text-16: #3F51B5;
}

[data-theme="dark"] {
    /* 深色模式下的分类颜色 */
    --category-nav-bg-all: #263238; /* 所有分类：深灰色 */
    --category-nav-text-all: #90A4AE;

    --category-nav-bg-0: #1A4D4A; /* 编程开发：深蓝绿色 */
    --category-nav-text-0: #4DB6AC;

    --category-nav-bg-1: #5C3D00; /* 家庭教育：深橙色 */
    --category-nav-text-1: #FFB300;

    --category-nav-bg-2: #2E4B47; /* 健康管理：深青色 */
    --category-nav-text-2: #4DB6AC;

    --category-nav-bg-3: #1A237E; /* 教育工具：深蓝色 */
    --category-nav-text-3: #64B5F6;

    --category-nav-bg-4: #4E342E; /* 节日工具：深橙黄色 */
    --category-nav-text-4: #FFB74D;

    --category-nav-bg-5: #4A148C; /* 考生助手：深紫色 */
    --category-nav-text-5: #CE93D8;

    --category-nav-bg-6: #1B5E20; /* 内容创作：深绿色 */
    --category-nav-text-6: #81C784;

    --category-nav-bg-7: #880E4F; /* 情侣小工具：深粉色 */
    --category-nav-text-7: #F48FB1;

    --category-nav-bg-8: #F57F17; /* 趣味游戏：深黄色 */
    --category-nav-text-8: #FFF59D;

    --category-nav-bg-9: #01579B; /* 社交媒体：深天蓝色 */
    --category-nav-text-9: #81D4FA;

    --category-nav-bg-10: #33691E; /* 生活助手：深草绿色 */
    --category-nav-text-10: #AED581;

    --category-nav-bg-11: #E65100; /* 图像处理：深橙色 */
    --category-nav-text-11: #FFCC02;

    --category-nav-bg-12: #4E342E; /* 文本处理：深黄绿色 */
    --category-nav-text-12: #C5E1A5;

    --category-nav-bg-13: #B71C1C; /* 营销推广：深红色 */
    --category-nav-text-13: #FFCDD2;

    --category-nav-bg-14: #5C2D2D; /* 娱乐休闲：深珊瑚色 */
    --category-nav-text-14: #FFCDD2;

    --category-nav-bg-15: #1B5E20; /* 职场提效：深绿色 */
    --category-nav-text-15: #A5D6A7;

    --category-nav-bg-16: #283593; /* 追剧助手：深靛蓝色 */
    --category-nav-text-16: #9FA8DA;
}

/* 分类导航样式 - 浅色模式 */
.category-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-bottom: 30px !important;
    padding: 15px !important;
    border-radius: 8px !important;
    background-color: var(--light-bg) !important;
    border: 1px solid var(--border-color) !important;
    position: static !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: 1 !important;
    justify-content: center !important;
}

.category-item {
    display: flex !important;
    align-items: center !important;
    padding: 8px 15px !important;
    /* 移除硬编码的背景和边框，由JS动态设置 */
    /* background-color: var(--white-bg) !important; */
    /* border: 1px solid var(--border-color) !important; */
    border-radius: 8px !important;
    text-decoration: none !important;
    /* 移除硬编码的颜色，由JS动态设置 */
    /* color: var(--dark-text) !important; */
    transition: all 0.2s !important;
    width: auto !important;
    min-width: 120px !important;
    max-width: 180px !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    justify-content: center !important;
}

.category-item i {
    margin-right: 10px !important;
    font-size: 1.2em !important;
    /* 移除硬编码的颜色，由JS动态设置 */
    /* color: var(--dark-text) !important; */
}

.category-item:hover:not(.active) {
    background-color: var(--primary-color-light) !important; /* 悬停效果 */
    border-color: var(--primary-color-light) !important;
}

.category-item:hover:not(.active) i,
.category-item:hover:not(.active) span {
    color: var(--primary-color) !important;
}

.category-item.active {
    background-color: var(--primary-color) !important;
    color: white !important;
    border-color: var(--primary-color) !important;
}

.category-item.active i,
.category-item.active span {
    color: white !important;
}

/* 工具计数样式 */
.tools-count {
    margin-bottom: 15px !important;
    color: var(--light-text) !important;
    font-size: 14px !important;
}

/* 响应式调整 */
@media (max-width: 768px) {
    .category-nav {
        padding: 8px !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        gap: 6px !important;
    }

    .category-item {
        padding: 4px 8px !important;
        font-size: 0.85em !important;
        min-width: 70px !important;
        max-width: 110px !important;
        border-width: 1px !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
    }

    /* 手机端隐藏分类导航中的图标 */
    .category-item i {
        display: none !important;
    }

    /* 调整文字间距，因为图标被隐藏了 */
    .category-item span {
        margin-left: 0 !important;
        font-size: 0.85em !important;
    }
}