/* ============ 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(--primary); background:var(--primary-light); 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); color:#fff; }
.tl-apply-btn{ border:1px solid var(--primary); background:var(--primary); color:#fff; font-size:12px; font-weight:600; border-radius:8px; padding:6px 14px; cursor:pointer; transition:all .15s; white-space:nowrap; }
.tl-apply-btn:hover{ background:var(--primary-dark); border-color:var(--primary-dark); }

/* ============ 申请收录弹窗 ============ */
.tl-modal-mask{ position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:1000; display:flex; align-items:center; justify-content:center; animation:fadeIn .2s; }
.tl-modal{ background:#fff; border-radius:14px; width:440px; max-width:92vw; max-height:85vh; overflow-y:auto; box-shadow:0 12px 40px rgba(0,0,0,.25); animation:slideUp .25s; }
.tl-modal-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 22px 0; }
.tl-modal-head h3{ margin:0; font-size:17px; color:#1a1a2e; }
.tl-modal-close{ background:none; border:none; font-size:22px; color:#999; cursor:pointer; padding:0 4px; line-height:1; }
.tl-modal-close:hover{ color:#333; }
.tl-modal-body{ padding:16px 22px 22px; }
.tl-modal-body .f-group{ margin-bottom:14px; }
.tl-modal-body label{ display:block; font-size:13px; font-weight:600; color:#333; margin-bottom:5px; }
.tl-modal-body label .req{ color:#e74c3c; margin-left:2px; }
.tl-modal-body input,.tl-modal-body textarea,.tl-modal-body select{ width:100%; box-sizing:border-box; border:1px solid #ddd; border-radius:8px; padding:9px 12px; font-size:14px; color:#333; background:#fafbfc; transition:border .15s; }
.tl-modal-body input:focus,.tl-modal-body textarea:focus,.tl-modal-body select:focus{ outline:none; border-color:var(--primary); background:#fff; }
.tl-modal-body textarea{ resize:vertical; min-height:72px; }
.tl-modal-body .f-hint{ font-size:12px; color:#999; margin-top:3px; }
.tl-modal-foot{ display:flex; justify-content:flex-end; gap:10px; padding:0 22px 18px; }
.tl-modal-foot .btn-cancel{ border:1px solid #ddd; background:#fff; color:#666; border-radius:8px; padding:8px 20px; font-size:14px; cursor:pointer; }
.tl-modal-foot .btn-cancel:hover{ background:#f5f5f5; }
.tl-modal-foot .btn-submit{ border:none; background:var(--primary); color:#fff; border-radius:8px; padding:8px 24px; font-size:14px; font-weight:600; cursor:pointer; transition:all .15s; }
.tl-modal-foot .btn-submit:hover{ background:var(--primary-dark); }
.tl-modal-foot .btn-submit:disabled{ opacity:.5; cursor:not-allowed; }
.tl-modal-ok{ text-align:center; padding:40px 22px; }
.tl-modal-ok .icon{ font-size:48px; margin-bottom:12px; }
.tl-modal-ok p{ font-size:15px; color:#333; margin:0 0 18px; }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes slideUp{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:translateY(0); } }

/* ============ 申请收录表单校验与顶部提示 ============ */
.tl-modal-body .f-group .f-err{ display:none; font-size:11px; color:#e74c3c; margin-top:4px; text-align:left; }
.tl-modal-body .f-group.has-err input,
.tl-modal-body .f-group.has-err textarea{ border-color:#e74c3c; background:#fff5f5; }
.tl-modal-body .f-group.has-err .f-err{ display:block; }

.tl-toast{ position:fixed; top:84px; left:50%; transform:translateX(-50%); z-index:2000; display:flex; align-items:center; gap:8px; max-width:80vw; padding:10px 18px; border-radius:8px; color:#fff; font-size:14px; line-height:1.4; box-shadow:0 6px 20px rgba(0,0,0,.18); animation:tlToastIn .25s ease; }
.tl-toast.success{ background:#5cb85c; }
.tl-toast.error{ background:#d9534f; }
.tl-toast.warn{ background:#f0ad4e; }
.tl-toast .tl-toast-icon{ font-size:15px; line-height:1; flex:none; }
.tl-toast.hide{ animation:tlToastOut .3s ease forwards; }
@keyframes tlToastIn{ from{ opacity:0; transform:translate(-50%,-14px); } to{ opacity:1; transform:translate(-50%,0); } }
@keyframes tlToastOut{ from{ opacity:1; transform:translate(-50%,0); } to{ opacity:0; transform:translate(-50%,-14px); } }

.tl-count{ font-size:13px; color:var(--text-gray); margin:0 2px 12px; display:flex; align-items:center; justify-content:space-between; }
.tl-count b{ color:var(--primary); }

/* ============ 瀑布流卡片（无JS兜底：CSS columns） ============ */
.tl-masonry{ column-count:4; column-gap:16px; }
@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; } }

/* JS 接管后的稳定瀑布流：卡片追加到最短列，已有卡片不移动 */
.tl-masonry.js-masonry{ display:flex; align-items:flex-start; gap:16px; }
.tl-masonry.js-masonry .tl-card{ margin-bottom:0; break-inside:auto; }
.tl-col{ flex:1; min-width:0; display:flex; flex-direction:column; gap:16px; }

.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-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{ column-span:all; display:flex; align-items:center; justify-content:center; width:100%; min-height:200px; 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; }
}