/* 工具站通用组件类 - 减少 HTML 重复 class（DRY 原则） */
/* 注：组件类在 HTML 中使用，替代冗长的 Tailwind class 串 */

/* 安全提示/使用说明自动编号列表（替代手动编号 span） */
.pg-tip-list {
    list-style: none;
    counter-reset: tip;
    padding: 0;
    margin: 0;
}
.pg-tip-list > li {
    counter-increment: tip;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}
.pg-tip-list > li::before {
    content: counter(tip) ".";
    font-weight: 700;
    flex-shrink: 0;
}
.pg-tip-list.sky > li::before { color: #0ea5e9; }
.pg-tip-list.violet > li::before { color: #8b5cf6; }

/* 功能列表项（工具介绍/安全保障） */
.pg-feature {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background-color: #f8fafc;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid #f1f5f9;
    transition: border-color 0.15s;
}
.pg-feature:hover { border-color: #bae6fd; }
.pg-feature.emerald:hover { border-color: #a7f3d0; }
.pg-feature > i { flex-shrink: 0; margin-top: 0.125rem; }

/* 推荐工具卡片 */
.rec-card {
    display: block;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 0.75rem;
    text-align: center;
    transition: all 0.2s;
}
.rec-card:hover {
    background-color: #f0f9ff;
    border-color: #7dd3fc;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
}
.rec-card > i {
    display: block;
    font-size: 1.25rem;
    color: #0ea5e9;
    margin-bottom: 0.25rem;
    transition: color 0.15s;
}
.rec-card:hover > i { color: #0284c7; }
.rec-card .rec-name {
    font-size: 0.75rem;
    color: #334155;
    font-weight: 500;
}
@media (min-width: 640px) {
    .rec-card { padding: 1rem; }
    .rec-card > i { font-size: 1.5rem; margin-bottom: 0.5rem; }
    .rec-card .rec-name { font-size: 0.875rem; }
}

/* 选项卡按钮（工具页 tab 切换，JS 仅 toggle active 类） */
.pg-tab-btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #475569;
    background-color: #f1f5f9;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}
.pg-tab-btn:hover { background-color: #e2e8f0; }
.pg-tab-btn.active {
    color: #ffffff;
    background-color: #0ea5e9;
    box-shadow: 0 4px 6px -1px rgba(14, 165, 233, 0.25);
}
.dark .pg-tab-btn {
    color: #cbd5e1;
    background-color: #334155;
}
.dark .pg-tab-btn:hover { background-color: #475569; }
.dark .pg-tab-btn.active {
    color: #ffffff;
    background-color: #0ea5e9;
}

/* 常见问题项 */
.pg-faq {
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 1rem;
}
.pg-faq h4 {
    font-weight: 500;
    color: #0f172a;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.pg-faq p {
    font-size: 0.875rem;
    color: #475569;
    padding-left: 1.25rem;
}

/* SEO 长描述区块（底部正文，不可隐藏，仅做视觉容器） */
.seo-content {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    margin-top: 1.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    font-size: 0.875rem;
    line-height: 1.75;
    color: #64748b;
}

/* ========== 暗色模式覆盖 ========== */

.dark .pg-feature {
    background-color: #1e293b;
    border-color: #334155;
}
.dark .pg-feature:hover { border-color: #0284c7; }
.dark .pg-feature.emerald:hover { border-color: #10b981; }

.dark .rec-card {
    background-color: #1e293b;
    border-color: #334155;
}
.dark .rec-card:hover {
    background-color: #243447;
    border-color: #38bdf8;
}
.dark .rec-card .rec-name { color: #cbd5e1; }

.dark .pg-faq { border-color: #334155; }
.dark .pg-faq h4 { color: #f1f5f9; }
.dark .pg-faq p { color: #94a3b8; }

.dark .seo-content {
    background-color: #0f172a;
    border-color: #334155;
    color: #94a3b8;
}

/* ========== 首页分类工具卡片（替代冗长 Tailwind class 串，减少 ~60KB HTML） ========== */

.tool-cat-card {
    display: block;
    position: relative;
    background-color: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 0.75rem;
    padding: 0.625rem 1.5rem 0.625rem 0.75rem;
    cursor: pointer;
}
.tool-cat-card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #0ea5e9;
}
.tool-cat-card::after {
    content: "\f054";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.75rem;
    color: #cbd5e1;
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    transition: color 0.15s;
}
.tool-cat-card:hover::after { color: #38bdf8; }
.tool-cat-card-title {
    font-size: 0.8125rem;
    font-weight: 500;
    color: #0f172a;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.15s;
}
.tool-cat-card:hover .tool-cat-card-title { color: #0284c7; }
.tool-cat-card-desc {
    font-size: 0.75rem;
    color: #64748b;
    margin: 0.125rem 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ========== 首页热门工具卡片 ========== */

.tool-hot-card {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    background-color: #ffffff;
    border-radius: 0.5rem;
    border: 1px solid #f1f5f9;
    transition: background-color 0.15s, border-color 0.15s;
    cursor: pointer;
}
.tool-hot-card:hover {
    background-color: #f0f9ff;
    border-color: #bae6fd;
}
.tool-hot-card > i { color: #0ea5e9; font-size: 0.875rem; }
.tool-hot-card-name {
    font-weight: 500;
    color: #334155;
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.15s;
}
.tool-hot-card:hover .tool-hot-card-name { color: #0284c7; }

/* 暗色模式 - 分类卡片 */
.dark .tool-cat-card {
    background-color: #1e293b;
    border-color: #334155;
}
.dark .tool-cat-card:focus-visible {
    box-shadow: 0 0 0 2px #1e293b, 0 0 0 4px #0ea5e9;
}
.dark .tool-cat-card::after { color: #475569; }
.dark .tool-cat-card:hover::after { color: #38bdf8; }
.dark .tool-cat-card-title { color: #ffffff; }
.dark .tool-cat-card:hover .tool-cat-card-title { color: #38bdf8; }
.dark .tool-cat-card-desc { color: #94a3b8; }

/* 暗色模式 - 热门卡片 */
.dark .tool-hot-card {
    background-color: #1e293b;
    border-color: #334155;
}
.dark .tool-hot-card:hover {
    background-color: #334155;
    border-color: #0369a1;
}
.dark .tool-hot-card > i { color: #38bdf8; }
.dark .tool-hot-card-name { color: #cbd5e1; }
.dark .tool-hot-card:hover .tool-hot-card-name { color: #38bdf8; }