/* CSS变量定义 - 用于全局颜色主题管理 */
:root {
    --primary-color: #2c3e50;    /* 主要颜色 - 用于主要文本和重要元素 */
    --secondary-color: #34495e;   /* 次要颜色 - 用于次要文本和辅助元素 */
    --accent-color: #3498db;      /* 强调颜色 - 用于按钮、链接等交互元素 */
    --light-bg: #ffffff;          /* 背景颜色 - 页面主背景色 */
    --border-color: #ddd;         /* 边框颜色 - 用于分隔线和边框 */
}

/* 全局重置样式 */
* {
    margin: 0;                    /* 清除所有元素的外边距 */
    padding: 0;                   /* 清除所有元素的内边距 */
    box-sizing: border-box;       /* 使用更直观的盒模型计算方式 */
}

/* 页面基础样式 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;  /* 系统默认字体优先 */
    line-height: 1.6;             /* 行高为字体大小的1.6倍，提高可读性 */
    background: var(--light-bg);  /* 使用CSS变量设置背景色 */
    padding-top: 60px;           /* 顶部填充，为固定导航栏留出空间 */
    min-height: 100vh;              /* 最小高度为视窗高度 */
    display: flex;                  /* 使用弹性布局 */
    flex-direction: column;         /* 垂直方向排列 */
}

/* 容器基础布局 */
.container {
    flex: 1;                        /* 占用所有可用空间 */
    display: flex;                  /* 使用弹性布局 */
    flex-direction: column;         /* 垂直方向排列 */
    width: 100%;                    /* 宽度100% */
}

/* 主要布局 */
.home-container {
    max-width: 90%;               /* 最大宽度限制，确保在大屏幕上不会过宽 */
    margin: 60px auto 0;             /* 上边距60px，左右自动居中，下边距0 */
    padding: 24px 80px;              /* 内部填充，上下24px，左右40px */
    /* background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); */
}

/* 页面布局 - 单列极简设计 */
.page-layout {
    display: block;                   /* 简单的块级布局 */
}

/* 主内容区样式 - 极简设计 */
.main-content {
    width: 100%;                     /* 占满容器宽度 */
    max-width: 1200px;               /* 最大宽度限制 */
    margin: 0 auto;                  /* 居中对齐 */
}



/* 工具卡片网格布局 - 极简优化 */
.tools-grid,
.category-tools {
    display: grid;                    /* 使用网格布局 */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* 自动填充列，每列最小300px */
    gap: 24px;                       /* 增加网格间距 */
    padding: 24px 0;                 /* 增加上下内边距 */
    margin: 0;                       /* 清除外边距 */
}

/* 工具卡片基础样式 - 极简优化 */
.tool-card,
.tool-item {
    background: white;               /* 白色背景 */
    border-radius: 16px;            /* 增加圆角 */
    padding: 20px;                  /* 增加内边距 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.04); /* 优化阴影效果 */
    display: flex;                   /* 弹性布局 */
    align-items: center;             /* 垂直居中对齐 */
    text-decoration: none;           /* 移除链接下划线 */
    color: inherit;                  /* 继承文字颜色 */
    transition: all 0.3s ease;       /* 优化过渡动画 */
    border: 1px solid rgba(0,0,0,0.06); /* 轻微边框 */
}

.tool-card:hover,
.tool-item:hover {
    transform: translateY(-4px);     /* 增加向上浮动距离 */
    box-shadow: 0 8px 24px rgba(0,0,0,0.12); /* 增强悬停阴影 */
    border: 1px solid rgba(0,0,0,0.1); /* 增强边框 */
}

.tool-card img,
.tool-item img {
    width: 40px;                    /* 图片宽度 */
    height: 40px;                   /* 图片高度 */
    border-radius: 8px;             /* 图片圆角 */
    margin-right: 15px;             /* 右侧间距 */
}

.tool-info {
    padding: 15px;                  /* 内边距 */
    display: flex;                  /* 弹性布局 */
    flex-direction: column;         /* 垂直排列 */
    align-items: flex-start;        /* 左对齐 */
    text-align: left;               /* 文本左对齐 */
}

.tool-info h3 {
    margin-bottom: 8px;             /* 底部间距 */
    font-size: 1.1rem;              /* 标题字体大小 */
    width: 100%;                    /* 占满容器宽度 */
}

.tool-info p {
    color: #666;                    /* 文字颜色 */
    font-size: 0.9rem;              /* 字体大小 */
    margin: 0;                      /* 清除外边距 */
    width: 100%;                    /* 占满容器宽度 */
    text-align: left;               /* 文本左对齐 */
}

/* 分类标签样式 */
.category-content {
    display: none;                  /* 默认隐藏 */
}

.category-content[id="category-0"] {
    display: grid;                  /* 默认显示第一个分类 */
}

.category-content.active {
    display: grid;                  /* 激活状态显示 */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

.category-tabs {
    display: flex;                  /* 弹性布局 */
    flex-wrap: wrap;                /* 允许换行 */
    gap: 12px;                      /* 增加间距 */
    margin: 24px 0;                 /* 增加上下外边距 */
}

.category-tab {
    padding: 12px 20px;             /* 增加内边距 */
    background: white;              /* 背景色 */
    border-radius: 24px;            /* 增加圆角 */
    text-decoration: none;          /* 移除下划线 */
    color: var(--primary-color);    /* 文字颜色 */
    transition: all 0.3s ease;      /* 优化过渡动画 */
    border: 1px solid rgba(0,0,0,0.06); /* 轻微边框 */
    font-weight: 500;               /* 增加字重 */
}

.category-tab:hover {
    background: #f8f9fa;            /* 悬停背景色 */
    transform: translateY(-1px);    /* 轻微上浮 */
}

.category-tab.active {
    background: var(--accent-color); /* 激活状态背景色 */
    color: white;                    /* 激活状态文字颜色 */
    border: 1px solid var(--accent-color); /* 激活状态边框 */
    transform: translateY(-1px);    /* 激活状态上浮 */
}

/* 文章和专题布局 */
.main-sidebar-layout {
    display: grid;                   /* 网格布局 */
    grid-template-columns: 1fr;      /* 单列布局 */
    gap: 20px;                       /* 间距 */
    margin-top: 30px;                /* 顶部外边距 */
}

.topics-grid {
    display: grid;                   /* 网格布局 */
    grid-template-columns: repeat(3, 1fr); /* 三列布局 */
    gap: 24px;                       /* 间距 */
}

.topic-card {
    background: white;               /* 背景色 */
    padding: 20px;                   /* 内边距 */
    border-radius: 8px;              /* 圆角 */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* 阴影 */
    border: 1px solid transparent;    /* 透明边框 */
    transition: border 0.3s ease;     /* 边框过渡动画 */
}

.topic-card:hover {
    border: 1px solid #ddd;          /* 悬停时显示边框 */
}

.topic-card h3 {
    display: flex;                   /* 弹性布局 */
    justify-content: space-between;   /* 两端对齐 */
    align-items: center;             /* 垂直居中 */
    margin-bottom: 15px;             /* 底部间距 */
}

.topic-title {
    font-size: 16px;                 /* 字体大小 */
    font-weight: bold;               /* 加粗 */
    color: #333;                     /* 文字颜色 */
}

.topic-count {
    font-size: 14px;                 /* 字体大小 */
    color: #666;                     /* 文字颜色 */
    text-decoration: none;           /* 移除下划线 */
}

.topic-articles {
    list-style: none;                /* 移除列表样式 */
    margin: 0;                       /* 清除外边距 */
    padding: 0;                      /* 清除内边距 */
}

.topic-articles li {
    margin-bottom: 10px;             /* 底部间距 */
}

.topic-articles a {
    color: #666;                     /* 链接颜色 */
    text-decoration: none;           /* 移除下划线 */
    font-size: 14px;                 /* 字体大小 */
    line-height: 1.5;                /* 行高 */
}

.topic-articles a:hover {
    color: var(--accent-color);      /* 悬停时的颜色 */
}

/* 文章卡片样式 */
.articles-grid {
    display: grid;                   /* 网格布局 */
    grid-template-columns: 1fr;      /* 单列布局 */
    gap: 24px;                       /* 间距 */
}

.article-card {
    display: flex;                   /* 弹性布局 */
    background: white;               /* 背景色 */
    border-radius: 12px;             /* 圆角 */
    text-decoration: none;           /* 移除下划线 */
    color: inherit;                  /* 继承文字颜色 */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* 阴影 */
    min-height: 180px;               /* 最小高度 */
    border: 1px solid transparent;    /* 透明边框 */
    transition: border 0.3s ease;     /* 边框过渡动画 */
    margin-bottom: 16px;             /* 底部间距 */
    padding: 12px;                   /* 内边距 */
}

.article-card:hover {
    border: 1px solid #ddd;          /* 悬停时显示边框 */
}

.article-image {
    width: 270px;                    /* 图片宽度 */
    height: 180px;                   /* 图片高度 */
    flex-shrink: 0;                  /* 禁止缩小 */
    background: #f5f5f5;             /* 背景色 */
    border-radius: 12px;             /* 圆角 */
    overflow: hidden;                /* 隐藏溢出 */
    margin-bottom: 12px;             /* 底部间距 */
}

.article-image img {
    width: 100%;                     /* 宽度100% */
    height: 100%;                    /* 高度100% */
    object-fit: cover;               /* 图片填充方式 */
}

.article-info {
    flex: 1;                         /* 占用剩余空间 */
    padding: 0 24px 24px 24px;       /* 内边距 */
    display: flex;                   /* 弹性布局 */
    flex-direction: column;          /* 垂直排列 */
    justify-content: flex-start;     /* 顶部对齐 */
}

.article-content {
    margin-bottom: 40px;             /* 底部间距 */
}

.article-content h3 {
    font-size: 18px;                 /* 标题字体大小 */
    font-weight: 500;                /* 字重 */
    color: #333;                     /* 文字颜色 */
    margin: 0 0 12px;                /* 外边距 */
    overflow: hidden;                /* 隐藏溢出 */
    text-overflow: ellipsis;         /* 文本溢出显示省略号 */
    display: -webkit-box;            /* 弹性盒子 */
    -webkit-line-clamp: 2;           /* 最多显示2行 */
    -webkit-box-orient: vertical;    /* 垂直方向 */
    line-height: 1.5;                /* 行高 */
}

.article-content p {
    font-size: 14px;                 /* 字体大小 */
    color: #666;                     /* 文字颜色 */
    margin: 0;                       /* 清除外边距 */
    overflow: hidden;                /* 隐藏溢出 */
    text-overflow: ellipsis;         /* 文本溢出显示省略号 */
    display: -webkit-box;            /* 弹性盒子 */
    -webkit-line-clamp: 2;           /* 最多显示2行 */
    -webkit-box-orient: vertical;    /* 垂直方向 */
    line-height: 1.6;                /* 行高 */
}

.article-meta {
    padding-top: 12px;               /* 顶部内边距 */
    display: flex;                   /* 弹性布局 */
    align-items: center;             /* 垂直居中 */
    gap: 16px;                       /* 间距 */
    margin-top: auto;                /* 自动顶部外边距 */
}

.article-topic {
    color: #3498db;                  /* 链接颜色 */
    text-decoration: none;           /* 移除下划线 */
    font-size: 14px;                 /* 字体大小 */
}

.article-author,
.article-source {
    color: #999;                     /* 文字颜色 */
    font-size: 14px;                 /* 字体大小 */
}



/* 调整内部模块的样式 */
.featured-section,
.categories-section,
.topics-section,
.articles-section {
    background: transparent;         /* 透明背景 */
    box-shadow: none;               /* 移除阴影 */
    border-radius: 0;               /* 移除圆角 */
}

/* 调整模块之间的分隔 */
.featured-section,
.categories-section,
.topics-section,
.articles-section {
    margin-bottom: 40px;            /* 底部间距 */
    padding-bottom: 40px;           /* 底部内边距 */
}

/* 响应式设计 */
@media (max-width: 1440px) {
    .home-container {
        margin: 60px 24px 0;        /* 外边距 */
        padding: 24px;              /* 内边距 */
    }
}

@media (max-width: 1200px) {
    .topics-grid {
        grid-template-columns: repeat(2, 1fr); /* 两列布局 */
    }
}

@media (max-width: 992px) {
    .home-container {
        margin: 60px 16px 0;        /* 外边距 */
        padding: 16px;              /* 内边距 */
    }
    
    .topics-grid {
        grid-template-columns: 1fr;  /* 单列布局 */
    }
    
    .article-image {
        width: 200px;               /* 图片宽度 */
    }
}

@media (max-width: 768px) {
    .page-layout {
        grid-template-columns: 1fr;  /* 单列布局 */
    }
    
    .tools-grid,
    .category-tools {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* 响应式网格 */
    }

    .article-card {
        flex-direction: column;      /* 垂直排列 */
    }
    
    .article-image {
        width: 100%;                /* 图片宽度100% */
        height: 200px;              /* 图片高度 */
        border-radius: 12px 12px 0 0; /* 上方圆角 */
    }
    
    .article-info {
        padding: 16px;              /* 内边距 */
    }
    
    .article-content {
        margin-bottom: 20px;        /* 底部间距 */
    }
}

/* 小屏幕手机适配 */
@media (max-width: 480px) {
    .container {
        padding: 0 10px;            /* 内边距 */
    }

    .home-container {
        margin-top: 60px;           /* 顶部外边距 */
        padding: 12px;              /* 内边距 */
    }

    .tools-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); /* 响应式网格 */
        gap: 8px;                   /* 间距 */
    }

    .tool-card img {
        height: 80px;               /* 图片高度 */
    }

    .tool-info {
        padding: 8px;               /* 内边距 */
    }

    .category-tools {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); /* 响应式网格 */
    }
}

.tools-container {
    width: 100%;                    /* 容器宽度 */
}

.initial-grid {
    display: grid !important;       /* 网格布局 */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important; /* 响��式网格 */
    gap: 20px;                      /* 间距 */
    padding: 20px 0;                /* 内边距 */
}

.tool-item {
    display: flex !important;       /* 弹性布局 */
    align-items: center;            /* 垂直居中 */
    background: white;              /* 背景色 */
    border-radius: 12px;            /* 圆角 */
    padding: 15px;                  /* 内边距 */
    text-decoration: none;          /* 移除下划线 */
    color: inherit;                 /* 继承文字颜色 */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05); /* 阴影 */
    border: 1px solid transparent;   /* 透明边框 */
    transition: transform 0.2s, border 0.3s ease; /* 过渡动画 */
    width: 100%;                    /* 宽度100% */
    margin: 0;                      /* 清除外边距 */
}

.tool-item img {
    width: 40px;                    /* 图片宽度 */
    height: 40px;                   /* 图片高度 */
    min-width: 40px;                /* 最小宽度 */
    border-radius: 8px;             /* 圆角 */
    margin-right: 15px;             /* 右侧间距 */
    object-fit: cover;              /* 图片填充方式 */
}

.tool-info {
    flex: 1;                        /* 占用剩余空间 */
    min-width: 0;                   /* 最小宽度 */
}

.tool-info h3 {
    margin-bottom: 8px;             /* 底部间距 */
    font-size: 1.1rem;              /* 字体大小 */
    white-space: nowrap;            /* 不换行 */
    overflow: hidden;               /* 隐藏溢出 */
    text-overflow: ellipsis;        /* 文本溢出显示省略号 */
}

.tool-info p {
    color: #666;                    /* 文字颜色 */
    font-size: 0.9rem;              /* 字体大小 */
    margin: 0;                      /* 清除外边距 */
    display: -webkit-box;           /* 弹性盒子 */
    -webkit-line-clamp: 2;          /* 最多显示2行 */
    -webkit-box-orient: vertical;   /* 垂直方向 */
    overflow: hidden;               /* 隐藏溢出 */
}

/* 首页响应式优化 */
@media (max-width: 768px) {
    .home-container {
        padding: 10px;              /* 内边距 */
    }

    /* 编辑推荐部分 */
    .tools-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* 响应式网格 */
        gap: 10px;                  /* 间距 */
    }

    .tool-card {
        padding: 10px;              /* 内边距 */
    }

    .tool-card img {
        width: 40px;                /* 图片宽度 */
        height: 40px;               /* 图片高度 */
        object-fit: contain;        /* 图片填充方式 */
    }

    /* 导航分类部分 */
    .category-tabs {
        overflow-x: auto;           /* 横向滚动 */
        white-space: nowrap;        /* 不换行 */
        padding-bottom: 10px;       /* 底部内边距 */
        margin: -5px -10px 15px;    /* 外边距 */
        padding: 0 10px 10px;       /* 内边距 */
    }

    .category-tab {
        padding: 8px 15px;          /* 内边距 */
        font-size: 0.9em;           /* 字体大小 */
    }

    /* 工具列表 */
    .category-tools {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); /* 响应式网格 */
        gap: 10px;                  /* 间距 */
    }

    .tool-item {
        padding: 10px;              /* 内边距 */
    }

    .tool-item img {
        width: 40px;                /* 图片宽度 */
        height: 40px;               /* 图片高度 */
        object-fit: contain;        /* 图片填充方式 */
    }

    /* 专题部分 */
    .topics-grid {
        grid-template-columns: 1fr;  /* 单列布局 */
        gap: 15px;                  /* 间距 */
    }

    .topic-card {
        padding: 15px;              /* 内边距 */
    }

    /* 文章部分 */
    .articles-grid {
        grid-template-columns: 1fr;  /* 单列布局 */
        gap: 15px;                  /* 间距 */
    }

    .article-card {
        flex-direction: column;      /* 垂直排列 */
    }

    .article-image {
        width: 100%;                /* 图片宽度 */
        height: 200px;              /* 图片高度 */
    }

    .article-image img {
        width: 100%;                /* 图片宽度 */
        height: 100%;               /* 图片高度 */
        object-fit: cover;          /* 图片填充方式 */
    }


}

/* 图片优化 */
img {
    max-width: 100%;                /* 最大宽度 */
    height: auto;                   /* 自动高度 */
    object-fit: contain;            /* 图片填充方式 */
}

.tool-card img,
.tool-item img {
    width: 50px;                    /* 图片宽度 */
    height: 50px;                   /* 图片高度 */
    object-fit: contain;            /* 图片填充方式 */
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    body {
        background: #121212;         /* 深色背景 */
        color: #fff;                 /* 白色文字 */
    }

    .tool-card,
    .tool-item,
    .topic-card,
    .article-card {
        background: #1a1a1a;         /* 深色卡片背景 */
        border-color: #333;          /* 深色边框 */
    }



    .category-tab {
        background: #1a1a1a;         /* 深色背景 */
        color: #fff;                 /* 白色文字 */
    }

    .category-tab.active {
        background: #333;            /* 激活状态背景色 */
    }
}