.sub-cat-header{font-size:1.4rem;font-weight:700;margin:1.5rem 0 1rem;padding-left:0.5rem;border-left:4px solid #3b82f6}
.tool-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.2rem;margin-bottom:2rem}
.tool-card{display:flex;gap:1rem;align-items:flex-start;background:#fff;border-radius:1rem;padding:1rem;border:1px solid #eef2f0;transition:all .2s;margin-bottom:0}
.tool-card:hover{border-color:#cbd5e6;transform:translateY(-2px);box-shadow:0 8px 16px -8px rgba(0,0,0,.08)}
.tool-thumb{flex-shrink:0;width:90px;height:90px;border-radius:.8rem;overflow:hidden;background:#f1f5f9}
.tool-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.tool-info{flex:1}
.tool-info h3{font-size:1.1rem;margin-bottom:.4rem}
.tool-info h3 a{text-decoration:none;color:#1e293b}
.tool-info h3 a:hover{color:#3b82f6}
.tool-info p{font-size:.85rem;color:#5b6e8c;margin-bottom:.5rem;line-height:1.4}
.tool-meta{font-size:.7rem;color:#94a3b8;margin-top:.5rem}
.tool-info-card{background:#f8fafc;border-radius:1rem;padding:1.2rem;margin:1.5rem 0;border-left:4px solid #3b82f6}
.tool-info-wrapper{display:flex;flex-wrap:wrap;gap:1.5rem;align-items:center}
.tool-info-content{flex:2;min-width:200px}
.tool-info-thumb{flex:1;min-width:120px;text-align:center}
.tool-info-thumb img{max-width:100%;border-radius:.8rem;box-shadow:0 4px 12px rgba(0,0,0,.1);border:1px solid #eef2f0}
.tool-info-card h3{font-size:1.2rem;margin-bottom:.8rem}
.download-link{display:inline-block;background:#3b82f6;color:#fff;padding:.5rem 1.2rem;border-radius:2rem;text-decoration:none;font-weight:500;margin-top:.5rem;transition:.2s}
.download-link:hover{background:#2563eb}
.warning-box{background:#fef9c3;color:#854d0e;padding:.8rem 1rem;border-radius:.8rem;font-size:.85rem;margin:1rem 0}
@media (max-width:640px){.tool-info-wrapper{flex-direction:column}.tool-info-thumb{order:-1}.tool-card{flex-direction:column}.tool-thumb{width:100%;height:auto;max-height:160px}}


        /* 文章列表项样式（优化缩略图自适应） */
        .list-article {
            display: flex;
            gap: 1.2rem;
            align-items: flex-start;
            background: #fff;
            border-radius: 1.2rem;
            padding: 1.2rem;
            margin-bottom: 1.5rem;
            border: 1px solid #eef2f0;
            transition: all 0.2s;
        }
        .list-article:hover {
            border-color: #cbd5e6;
            box-shadow: 0 8px 20px -12px rgba(0,0,0,0.08);
        }
        /* 缩略图容器：固定宽高，背景占位 */
        .list-thumb {
            flex-shrink: 0;
            width: 140px;
            height: 140px;
            border-radius: 0.8rem;
            overflow: hidden;
            background: #f1f5f9;
        }
        .list-thumb img {
            width: 100%;
            height: 100%;
            object-fit: cover;   /* 图片居中裁剪，不变形 */
            display: block;
            transition: transform 0.3s;
        }
        .list-thumb a:hover img {
            transform: scale(1.03);
        }
        .list-content {
            flex: 1;
        }
        .list-content .article-title {
            font-size: 1.35rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        .list-content .article-title a {
            text-decoration: none;
            color: #0f172a;
        }
        .list-content .article-title a:hover {
            color: #3b82f6;
        }
        .list-content .article-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            font-size: 0.7rem;
            color: #5b6e8c;
            margin-bottom: 0.6rem;
        }
        .list-content .article-excerpt {
            color: #334155;
            font-size: 0.9rem;
            margin: 0.5rem 0;
            line-height: 1.5;
        }
        .list-content .article-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            margin-top: 0.6rem;
        }
        /* 移动端适配：图片置顶，宽度100%，高度自动（保持比例） */
        @media (max-width: 640px) {
            .list-article {
                flex-direction: column;
            }
            .list-thumb {
                width: 100%;
                height: auto;
                max-height: 200px;
            }
            .list-thumb img {
                object-fit: cover;
                width: 100%;
                height: auto;
                min-height: 120px;
            }
        }
        