/**
 * 分类页面样式修复
 * 确保所有分类标签及按钮高度统一为28px
 */

/* 分类标签高度修复 */
.category-tag,
.tool-tag,
.tool-card__tag,
.tool-card__tags .tool-tag {
    height: 28px !important;
    min-height: 28px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    line-height: 28px !important; /* 确保行高与高度一致 */
}

/* 首页卡片分类标签字体样式 */
.tool-card__tag {
    font-weight: 500 !important;
    color: #111827 !important; /* 设置字体颜色为深灰色 */
    padding: 4px 8px !important; /* 确保内边距一致 */
}

/* 工具标签通用颜色设置 */
.tool-tag {
    color: #111827 !important; /* 统一设置工具标签字体颜色 */
}

/* 确保首页卡片的分类标签高度统一 */
.tool-card .tool-tag,
.recommended-section .tool-tag,
#recommended-tools-container .tool-tag {
    height: 28px !important;
    min-height: 28px !important;
}

/* 确保点赞和访问按钮高度一致 */
.tool-card__like,
.tool-card__visit {
    height: 28px !important;
    min-height: 28px !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

/* 首页分类标签样式修复 */

/* 增加首页分类标签的上下内间距 */
.category-tag {
    height: auto !important;
    padding: 4px 10px 4px 8px !important; /* 修改：将上下内边距从12px减少到4px */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: rgba(255, 255, 255, 0) !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

/* 确保分类名称垂直居中 */
.category-name {
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 100% !important;
    color: rgba(17, 24, 39, 1) !important;
    white-space: nowrap !important;
}

/* 图标容器样式 */
.icon-container {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 6px !important;
    flex-shrink: 0 !important;
}

/* 分类标签悬停效果 */
.category-tag:hover {
    background-color: rgba(188, 198, 206, 0.18) !important;
    color: #111827 !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
}

/* 分类标签激活状态 */
.category-tag.active {
    background-color: rgba(188, 198, 206, 0.3) !important;
    color: #111827 !important;
    border: 1px solid rgba(188, 198, 206, 0.4) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    font-weight: 700 !important;
}

/* 移动端样式适配 */
@media (max-width: 768px) {
    .category-tag {
        padding: 4px 8px !important; /* 修改：将上下内边距从12px减少到4px */
    }
    
} 