.tool-wrap{max-width:1180px;margin:0 auto;padding:0 16px 48px;}
.breadcrumb{font-size:13px;color:#aab0b8;padding:18px 0 6px;}
.breadcrumb a{color:#64748b;text-decoration:none;}
.breadcrumb a:hover{color:#2563eb;}
.breadcrumb .sep{margin:0 8px;color:#cbd5e1;}
.breadcrumb .cur{color:#334155;font-weight:600;}

.tool-layout{display:flex;gap:22px;align-items:flex-start;margin-top:10px;}
.tool-sidebar{width:200px;flex-shrink:0;position:sticky;top:80px;max-height:calc(100vh - 100px);overflow:auto;background:#fff;border:1px solid #eceef1;border-radius:12px;padding:10px;box-shadow:0 4px 18px rgba(0,0,0,.04);}
.tool-sidebar::-webkit-scrollbar{width:4px;}
.tool-sidebar::-webkit-scrollbar-thumb{background:#e4e7ed;border-radius:4px;}
.tool-cat-link{display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:8px;color:#3a3f47;font-size:14px;text-decoration:none;cursor:pointer;transition:.12s;}
.tool-cat-link:hover{background:#f5f9ff;color:#2563eb;}
.tool-cat-link.active{background:#2563eb;color:#fff;}
.tool-cat-link .ccount{margin-left:auto;font-size:12px;color:#aab0b8;background:#f2f3f5;padding:2px 7px;border-radius:10px;}
.tool-cat-link.active .ccount{background:rgba(255,255,255,.25);color:#fff;}
.tool-cat-link .cico{font-size:16px;}

.tool-main{flex:1;min-width:0;}
.cat-head{display:flex;align-items:center;gap:14px;margin:6px 0 20px;}
.cat-head .ch-ico{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,#eff6ff,#f5f3ff);display:flex;align-items:center;justify-content:center;font-size:28px;flex-shrink:0;}
.cat-head h1{font-size:24px;font-weight:700;margin:0;color:#1f2329;}
.cat-head .ch-meta{font-size:13px;color:#aab0b8;margin-top:4px;}

.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;}
.tool-card{display:block;background:#fff;border:1px solid #eceef1;border-radius:10px;padding:16px 16px 14px;text-decoration:none;color:inherit;transition:.15s;min-height:92px;}
.tool-card:hover{border-color:#2563eb;box-shadow:0 6px 18px rgba(47,124,246,.12);transform:translateY(-2px);}
.tool-card .tc-name{font-size:15px;font-weight:600;color:#1f2329;margin-bottom:6px;}
.tool-card .tc-desc{font-size:13px;color:#8a9099;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.tool-card .tc-go{margin-top:10px;font-size:12px;color:#2563eb;font-weight:600;}

.tool-empty{color:#8a9099;font-size:14px;padding:24px 0;text-align:center;background:#fff;border:1px dashed #e2e8f0;border-radius:12px;}

/* 分页（服务端） */
.pager{display:flex;align-items:center;justify-content:center;gap:8px;margin:30px 0 6px;flex-wrap:wrap;}
.pager a,.pager span{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:36px;padding:0 12px;border-radius:9px;font-size:14px;text-decoration:none;border:1px solid #e2e8f0;background:#fff;color:#475569;transition:.15s;}
.pager a:hover{border-color:#2563eb;color:#2563eb;}
.pager span.cur{background:linear-gradient(90deg,#2563eb,#4f46e5);border-color:transparent;color:#fff;font-weight:600;}
.pager span.disabled{color:#cbd5e1;border-color:#eef1f4;cursor:not-allowed;}
.pager .pginfo{margin-left:6px;color:#94a3b8;font-size:13px;}

@media(max-width:820px){
.tool-layout{flex-direction:column;}
.tool-sidebar{width:100%;position:static;max-height:none;display:flex;flex-wrap:wrap;gap:8px;padding:12px;}
.tool-cat-link{width:auto;}
}
@media(max-width:600px){.cat-head h1{font-size:20px;}.tool-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}}