/* ============ AI工具页 ============ */
.page-head .sub{ font-size:13px; color:var(--text-gray); margin-top:4px; line-height:1.6; }

/* ============ 筛选面板 ============ */
.tl-filter{ background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); padding:6px 16px; margin-bottom:16px; }
.tl-fline{ display:flex; align-items:center; gap:10px; padding:7px 0; border-bottom:1px dashed var(--border); }
.tl-fline:last-child{ border-bottom:none; }
.tl-flabel{ flex-shrink:0; font-size:12px; color:var(--text-gray); line-height:26px; width:34px; }
.tl-fitems{ display:flex; flex-wrap:wrap; gap:6px; flex:1; min-width:0; }
.tl-fitems.single{ flex-wrap:nowrap; overflow:hidden; }
.tl-fline.open .tl-fitems{ flex-wrap:wrap; overflow:visible; }
.tl-chip{ font-size:12px; line-height:1; color:var(--text-dark); background:var(--body-bg); border:1px solid var(--border); border-radius:999px; padding:7px 12px; cursor:pointer; white-space:nowrap; transition:all .15s; user-select:none; }
.tl-chip .cnt{ color:var(--text-light); margin-left:3px; font-size:11px; }
.tl-chip:hover{ border-color:var(--primary); color:var(--primary); background:var(--primary-light); }
.tl-chip.active{ background:var(--primary); border-color:var(--primary); color:#fff; }
.tl-chip.active .cnt{ color:rgba(255,255,255,.8); }
.tl-chip.all{ }
.tl-expand{ flex-shrink:0; align-self:center; flex:0 0 auto; font-size:12px; color:var(--primary); background:transparent; border:none; padding:6px 12px; border-radius:999px; cursor:pointer; user-select:none; white-space:nowrap; transition:all .15s; }
.tl-expand:hover{ color:var(--primary); }
.tl-expand.on{ color:#666; background:#eef0f3; }
.tl-expand.on:hover{ color:var(--primary); background:var(--primary-light); }
.tl-expand .arrow{ font-style:normal; }
.tl-sort{ display:flex; gap:6px; margin-right:auto; }
.tl-sort button{ border:1px solid var(--border); background:var(--body-bg); color:var(--text-dark); font-size:12px; line-height:1; border-radius:999px; padding:7px 12px; cursor:pointer; white-space:nowrap; transition:all .15s; }
.tl-sort button.active{ background:var(--primary); border-color:var(--primary); color:#fff; font-weight:600; }
.tl-reset{ border:1px solid var(--border); background:var(--card); color:var(--primary); font-size:12px; font-weight:600; border-radius:8px; padding:6px 14px; cursor:pointer; transition:all .15s; }
.tl-reset:hover{ background:var(--primary-light); border-color:var(--primary); }

.tl-count{ font-size:13px; color:var(--text-gray); margin:0 2px 12px; }
.tl-count b{ color:var(--primary); }

/* ============ 瀑布流卡片（CSS columns） ============ */
.tl-masonry{ column-count:4; column-gap:16px; }
@media(min-width:1100px){ .tl-masonry{ column-count:4; } }
@media(max-width:1099px){ .tl-masonry{ column-count:3; } }
@media(max-width:820px){ .tl-masonry{ column-count:2; } }
@media(max-width:520px){ .tl-masonry{ column-count:1; } }

.tl-card{ break-inside:avoid; -webkit-column-break-inside:avoid; margin-bottom:16px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; transition:transform .2s, box-shadow .2s; display:block; }
.tl-card:hover{ transform:translateY(-3px); box-shadow:0 8px 24px rgba(26,26,46,.12); }
.tl-thumb{ background:var(--card); overflow:hidden; display:flex; align-items:center; justify-content:center; padding:20px 16px; }
.tl-thumb img{ max-width:100%; height:auto; max-height:160px; object-fit:contain; object-position:center; display:block; transition:transform .3s; }
.tl-card:hover .tl-thumb img{ transform:scale(1.04); }
.tl-body{ padding:14px 16px 16px; background:var(--body-bg); }
.tl-name{ font-size:15px; font-weight:700; color:var(--text-dark); margin-bottom:5px; line-height:1.4; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.tl-cat-line{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.tl-cat{ font-size:11px; font-weight:600; color:var(--primary); background:var(--primary-light); border-radius:999px; padding:3px 10px; white-space:nowrap; }
.tl-desc{ font-size:13px; color:var(--text-gray); line-height:1.7; margin-bottom:10px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.tl-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tl-tags{ display:flex; flex-wrap:wrap; gap:5px; overflow:hidden; }
.tl-tag{ font-size:11px; color:var(--text-gray); background:var(--body-bg); border-radius:999px; padding:3px 8px; white-space:nowrap; }
.tl-hot{ font-size:11px; color:var(--text-light); flex-shrink:0; }
.tl-hot b{ color:#FF8F1F; }

#tl-loading{ display:none; text-align:center; color:var(--text-gray); padding:16px 0; font-size:14px; }
#tl-end{ display:none; text-align:center; color:var(--text-light); padding:20px 0; font-size:13px; }
.tl-more{ text-align:center; padding:16px 0 4px; }
.tl-more button{ display:none; border:none; background:var(--primary); color:#fff; font-size:14px; font-weight:600; border-radius:20px; padding:10px 30px; cursor:pointer; transition:all .15s; }
.tl-more button:hover{ background:var(--primary-dark); }
.tl-empty{ text-align:center; color:var(--text-gray); padding:60px 0; font-size:14px; }

/* ============ 移动端：每个维度一行 ============ */
@media(max-width:768px){
	.tl-filter{ padding:6px 12px; display:block; }
	.tl-fline{ display:flex; align-items:center; gap:8px; padding:8px 0; border-bottom:1px dashed var(--border); }
	.tl-fline:last-child{ border-bottom:none; }
	.tl-flabel{ flex-shrink:0; font-size:12px; color:var(--text-gray); width:auto; min-width:30px; }
	.tl-fitems{ flex:1; flex-wrap:nowrap; overflow:hidden; }
	.tl-fitems.single{ flex-wrap:nowrap; overflow:hidden; }
	.tl-fline.open .tl-fitems{ flex-wrap:wrap; overflow:visible; }
	.tl-expand{ flex-shrink:0; }
}