/* 基础类：控制大小和对齐 */
.icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    display: inline-block;
    fill: currentColor; /* 允许通过 color 属性变色 */
}

/* 之前要求的深灰蓝 */
.icon-gray {
    color: #475569;
}

/* 新加入的紫色 */
.icon-purple {
    color: #7150E6;
}

/* 步骤序号徽章 (用于 section-howto.php) */
.step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    line-height: 1;
    border-radius: 50%;
    background-color: #7150E6;
    color: white;
    text-align: center;
    font-weight: bold;
    font-size: 14px;
    margin-right: 8px;
    margin-top: 4px;
    flex-shrink: 0;
    align-self: flex-start;
}

/* 筛选栏图标样式 (Filter Bar) */
.tool-sort-link .icon {
    width: 18px;
    height: 18px;
    color: #64748b; /* slate-500 */
}
.tool-sort-link:hover .icon {
    color: #4f47e6; /* indigo-600 */
}
.tool-sort-link.is-active .icon {
    color: #6540e9; /* active color */
}

/* 工具卡片图标样式 (Tool Card) */
.icon-card-pricing {
    width: 16px;
    height: 16px;
    color: #475569; /* Match icon-gray */
}
.icon-card-feature,
.icon-card-tutorial,
.icon-card-faq {
    width: 24px;
    height: 24px;
    color: #7c3aed; /* Match style.css purple */
}

/* 访问官网图标 */
.icon-visit-official {
    width: 14px;
    height: 14px;
    fill: currentColor;
}

/* 颜色重置 (用于分类页 inheriting color) */
.icon-reset-color {
    color: currentColor !important;
}

/* 尺寸覆盖 (放在最后以确保覆盖) */
.icon-size-14 { width: 14px !important; height: 14px !important; }
.icon-size-16 { width: 16px !important; height: 16px !important; }
.icon-size-20 { width: 20px !important; height: 20px !important; }
.icon-size-22 { width: 22px !important; height: 22px !important; }
.icon-size-24 { width: 28px !important; height: 28px !important; }
.icon-size-26 { width: 26px !important; height: 26px !important; }

/* FAQ 展开/收起图标 */
.tool-faq-question::after {
    content: none !important; /* 隐藏原有的 + 号 */
}
.icon-faq-toggle {
    width: 20px;
    height: 20px;
    color: #9ca3af;
    transition: transform 0.3s ease;
    margin-left: auto; /* 推到最右边 */
}
.tool-faq-item.active .icon-faq-toggle {
    transform: rotate(180deg);
    color: #4f47e6;
}

/* 分类页工具卡片折叠箭头 */
.tool-section-arrow {
    width: 16px;
    height: 16px;
    color: #9ca3af;
    transition: transform 0.3s ease;
}
/* 假设 active 类用于展开状态 */
.tool-section-tab.active .tool-section-arrow,
.tool-section-tab.is-active .tool-section-arrow {
    transform: rotate(180deg);
}