/* =============================================================
 * hot.css — PC 热搜页（label/hot）
 * ============================================================= */

.hot-wrap { max-width: 1060px; margin: 0 auto; padding: 16px 20px 32px; }
.hot-page-title { font-size: 22px; font-weight: 700; padding: 16px 0 4px; display: flex; align-items: center; gap: 8px; }
.hot-page-title i { color: #ff4757; }
.hot-page-sub { font-size: 13px; color: var(--el-text-placeholder, #909399); margin-bottom: 24px; }

/* 热词气泡 */
.hot-keywords { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.hot-kw-item {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 18px; border-radius: 20px;
	border: 1px solid var(--el-border-color, #dcdfe6);
	font-size: 13px; text-decoration: none; color: inherit;
	cursor: pointer; transition: all .2s; background: transparent;
}
.hot-kw-item:hover, .hot-kw-item.active {
	background: var(--el-color-warning, #e6a23c);
	border-color: var(--el-color-warning, #e6a23c);
	color: #fff;
}
.hot-kw-item .hot-rank { font-size: 12px; font-weight: 700; width: 18px; text-align: center; }
.hot-kw-item:nth-child(1) .hot-rank { color: #ff4757; }
.hot-kw-item:nth-child(2) .hot-rank { color: #ff6b81; }
.hot-kw-item:nth-child(3) .hot-rank { color: #ffa502; }

/* 内容区块标题 */
.hot-result-section { margin-top: 8px; }
.hot-result-head {
	display: flex; align-items: center; justify-content: space-between;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--el-color-warning, #e6a23c);
	margin-bottom: 16px;
}
.hot-result-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.hot-result-head h3 span { color: var(--el-color-warning, #e6a23c); }
.hot-result-head a { font-size: 13px; color: var(--el-text-secondary, #909399); text-decoration: none; }
.hot-result-head a:hover { color: var(--el-color-warning, #e6a23c); }

.hot-vod-grid { display: flex; flex-wrap: wrap; gap: 0; }
.hot-vod-grid .col-5 { width: 20%; }

/* 热搜排行表格 */
.hot-rank-table { width: 100%; border-collapse: collapse; }
.hot-rank-table tr { border-bottom: 1px solid var(--el-border-color-lighter, #ebeef5); }
.hot-rank-table td { padding: 12px 10px; vertical-align: middle; }
.hot-rank-no { width: 40px; text-align: center; font-size: 16px; font-weight: 700; color: var(--el-text-placeholder, #c0c4cc); }
.hot-rank-no.top3 { color: #ff4757; }
.hot-rank-kw a { font-size: 15px; text-decoration: none; color: inherit; font-weight: 500; }
.hot-rank-kw a:hover { color: var(--el-color-warning, #e6a23c); }
.hot-rank-kw .hot-tag { margin-left: 8px; font-size: 11px; padding: 1px 5px; border-radius: 3px; background: #ff4757; color: #fff; }
.hot-rank-kw .hot-tag.new { background: var(--el-color-warning, #e6a23c); }
.hot-rank-fire { color: #ff4757; font-size: 13px; text-align: right; white-space: nowrap; }

/* ── Tag 云 ── */
.hot-tag-cloud {
	display: flex; flex-wrap: wrap; gap: 10px 14px;
	padding: 8px 0 4px; line-height: 2;
}
.hot-tag-cloud-item {
	text-decoration: none; color: var(--el-text-regular, #303133);
	padding: 2px 10px; border-radius: 12px;
	background: var(--el-fill-color, #f0f2f5);
	border: 1px solid transparent;
	transition: all .18s;
}
.hot-tag-cloud-item:hover {
	color: #fff;
	background: var(--el-color-warning, #e6a23c);
	transform: scale(1.05);
}

/* Tag 排序按钮 */
.hot-tag-sort-btns { display: flex; gap: 6px; }
.hot-ts-btn {
	padding: 3px 12px; border-radius: 12px; border: 1px solid var(--el-border-color, #dcdfe6);
	background: transparent; font-size: 12px; cursor: pointer;
	color: var(--el-text-secondary, #909399); transition: all .18s;
}
.hot-ts-btn.active, .hot-ts-btn:hover {
	background: var(--el-color-warning, #e6a23c);
	border-color: var(--el-color-warning, #e6a23c);
	color: #fff;
}

/* ── 深色模式 ── */
html[data-theme="dark"] .hot-kw-item { border-color: #4a4a4a; color: #ccc; }
html[data-theme="dark"] .hot-kw-item:hover,
html[data-theme="dark"] .hot-kw-item.active { color: #fff; }
html[data-theme="dark"] .hot-rank-table tr { border-color: #2d2d2d; }
html[data-theme="dark"] .hot-rank-kw a { color: #ccc; }
html[data-theme="dark"] .hot-page-title { color: #e0e0e0; }
html[data-theme="dark"] .hot-tag-cloud-item { background: #2d2d2e; color: #ccc; border-color: #3a3b3c; }
html[data-theme="dark"] .hot-ts-btn { background: #2d2d2e; border-color: #4a4a4a; color: #aaa; }
html[data-theme="dark"] .hot-ts-btn.active { background: #e6a23c; border-color: #e6a23c; color: #fff; }