/* ==========================================================================
   首页：快讯条、头条区、频道矩阵、榜单区、数据条、订阅

   2.0 暗色霓虹要点：
   - 频道区块底色全透明，靠「留白 + 频道色发光条 + 细分隔」分段
   - 头条区在暗底上加外发光，成为首屏唯一的高光点
   - 数据条四个数字按频道色轮转，是暗底上最有效的色彩节奏点
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 快讯条
   -------------------------------------------------------------------------- */
.tb-flash {
	background: var(--tb-bg-mute);
	border-bottom: 1px solid var(--tb-line-2);
	box-shadow: inset 0 2px 0 var(--tb-grad-line);
}

.tb-flash__inner {
	display: flex;
	align-items: center;
	gap: var(--tb-sp-4);
	height: 42px;
}

.tb-flash__label {
	display: inline-flex;
	align-items: center;
	gap: var(--tb-sp-2);
	flex-shrink: 0;
	font-size: var(--tb-fs-13);
	font-weight: var(--tb-fw-black);
	color: var(--tb-cyan-500);
	letter-spacing: 0.06em;
}

.tb-flash__label::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tb-cyan-500);
	box-shadow: 0 0 10px var(--tb-cyan-500);
	animation: tb-pulse 1.8s ease-in-out infinite;
}

@keyframes tb-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%      { opacity: 0.35; transform: scale(0.82); }
}

.tb-flash__viewport {
	position: relative;
	flex: 1;
	min-width: 0;
	height: 42px;
	overflow: hidden;
	mask-image: linear-gradient(90deg, #000 0%, #000 92%, transparent 100%);
	-webkit-mask-image: linear-gradient(90deg, #000 0%, #000 92%, transparent 100%);
}

.tb-flash__track {
	display: flex;
	align-items: center;
	gap: var(--tb-sp-8);
	height: 42px;
	width: max-content;
	transition: transform 420ms cubic-bezier(0.4, 0, 0.2, 1);
}

.tb-flash__item {
	display: inline-flex;
	align-items: center;
	gap: var(--tb-sp-2);
	font-size: var(--tb-fs-13);
	color: var(--tb-ink-2);
	white-space: nowrap;
}

.tb-flash__item:hover {
	color: var(--tb-blue-500);
}

.tb-flash__time {
	font-family: var(--tb-font-num);
	font-size: var(--tb-fs-12);
	color: var(--tb-ink-4);
}

/* --------------------------------------------------------------------------
   2. 头条区
   -------------------------------------------------------------------------- */
.tb-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
	gap: var(--tb-sp-12);
	padding-block: var(--tb-sp-10) var(--tb-sp-12);
	border-bottom: 1px solid var(--tb-line);
	margin-bottom: var(--tb-sp-16);
}

.tb-hero__main {
	min-width: 0;
}

.tb-leadpost {
	position: relative;
	display: block;
	border-radius: var(--tb-r-2xl);
	overflow: hidden;
	background: #0D0E15;
	aspect-ratio: 16 / 9;
	isolation: isolate;
	/* 暗底上的「外发光」代替亮底时的投影 */
	box-shadow: 0 0 48px rgba(198, 255, 61, 0.16), 0 0 90px rgba(198, 255, 61, 0.06);
}

.tb-leadpost__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms cubic-bezier(0.2, 0, 0.2, 1);
	z-index: -2;
}

.tb-leadpost__img--empty {
	background: var(--tb-grad-brand);
}

/* 遮罩用最深色，保证白字在任何配图上都可读 */
.tb-leadpost::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(6, 7, 11, 0) 18%, rgba(6, 7, 11, 0.55) 56%, rgba(6, 7, 11, 0.97) 100%);
}

.tb-leadpost:hover {
	box-shadow: 0 0 60px rgba(198, 255, 61, 0.24), 0 0 110px rgba(198, 255, 61, 0.09);
}

.tb-leadpost:hover .tb-leadpost__img {
	transform: scale(1.04);
}

.tb-leadpost__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: var(--tb-sp-10);
	color: #fff;
}

.tb-leadpost__tags {
	display: flex;
	align-items: center;
	gap: var(--tb-sp-2);
	margin-bottom: var(--tb-sp-4);
}

.tb-leadpost__tag {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 var(--tb-sp-3);
	border-radius: var(--tb-r-pill);
	background: var(--tb-cyan-500);
	color: #0A0B10;
	font-size: var(--tb-fs-12);
	font-weight: var(--tb-fw-black);
	letter-spacing: 0.02em;
	box-shadow: 0 0 16px rgba(255, 62, 165, 0.55);
}

.tb-leadpost__tag--blue {
	background: var(--ch-martech-stack, var(--tb-neon-cyan));
	box-shadow: 0 0 16px rgba(43, 245, 255, 0.55);
}

.tb-leadpost__title {
	font-size: var(--tb-fs-40);
	font-weight: var(--tb-fw-black);
	line-height: 1.22;
	color: #FFFFFF;
	letter-spacing: -0.03em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.7);
	transition: opacity var(--tb-transition);
}

.tb-leadpost:hover .tb-leadpost__title {
	opacity: 0.88;
}

.tb-leadpost__excerpt {
	margin-top: var(--tb-sp-3);
	max-width: 60ch;
	font-size: var(--tb-fs-15);
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.8);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tb-leadpost__meta {
	margin-top: var(--tb-sp-5);
	font-size: var(--tb-fs-12);
	color: rgba(255, 255, 255, 0.58);
	display: flex;
	align-items: center;
	gap: var(--tb-sp-2);
}

.tb-leadpost__meta .tb-meta__sep {
	background: rgba(255, 255, 255, 0.28);
}

/* 头条右侧 */
.tb-hero__side {
	display: flex;
	flex-direction: column;
	gap: var(--tb-sp-6);
	min-width: 0;
}

.tb-herogrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--tb-sp-5);
}

.tb-herogrid .tb-card--feature .tb-card__title {
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

.tb-herogrid .tb-card__meta,
.tb-herogrid .tb-meta {
	font-size: var(--tb-fs-11);
}

.tb-herogrid .tb-card--feature .tb-card__body {
	padding: var(--tb-sp-3) var(--tb-sp-4) var(--tb-sp-4);
}

.tb-herolist {
	display: flex;
	flex-direction: column;
	gap: var(--tb-sp-4);
	padding-top: var(--tb-sp-6);
	border-top: 1px solid var(--tb-line);
}

.tb-herolist .tb-card--list {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}

.tb-herolist .tb-card--list .tb-card__thumb {
	width: 116px;
	height: 76px;
}

.tb-herolist .tb-card--list .tb-card__title {
	font-size: var(--tb-fs-14);
	font-weight: var(--tb-fw-medium);
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

/* --------------------------------------------------------------------------
   3. 频道矩阵
   -------------------------------------------------------------------------- */
.tb-sections {
	display: flex;
	flex-direction: column;
	gap: var(--tb-sp-20);
}

.tb-section {
	min-width: 0;
	padding-top: var(--tb-sp-8);
	border-top: 1px solid var(--tb-line-2);
}

.tb-section:first-child {
	padding-top: 0;
	border-top: 0;
}

.tb-chanblock {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	gap: var(--tb-sp-12);
	align-items: start;
}

.tb-chanblock__lead .tb-card--feature .tb-card__thumb {
	aspect-ratio: 16 / 10;
}

.tb-chanblock__lead .tb-card__title {
	font-size: var(--tb-fs-22);
	font-weight: var(--tb-fw-black);
	letter-spacing: -0.025em;
	line-height: 1.3;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.tb-chanblock__list {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.tb-chanblock__list .tb-card--list .tb-card__thumb {
	width: 148px;
	height: 94px;
}

.tb-chanblock__list .tb-card--list:first-child .tb-card__title {
	font-size: var(--tb-fs-19);
	font-weight: var(--tb-fw-black);
	letter-spacing: -0.02em;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.tb-chanblock__list .tb-card--list:first-child {
	padding-bottom: var(--tb-sp-5);
	margin-bottom: var(--tb-sp-5);
	border-bottom: 1px solid var(--tb-line);
}

/* --------------------------------------------------------------------------
   4. 榜单 + 专题 组合区
   -------------------------------------------------------------------------- */
.tb-mixzone {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) var(--tb-sidebar-w);
	gap: var(--tb-sp-10);
	align-items: start;
	padding: var(--tb-sp-10);
	background: var(--tb-bg-mute);
	border: 1px solid var(--tb-line);
	border-radius: var(--tb-r-2xl);
	/* 内发光：暗底区块的「发光盒子」效果 */
	box-shadow: inset 0 0 60px rgba(198, 255, 61, 0.035);
}

.tb-topicgrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--tb-sp-4);
}

.tb-topicgrid .tb-card__thumb {
	aspect-ratio: 16 / 10;
}

.tb-topicgrid .tb-card__title {
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.tb-topicgrid .tb-card--tile .tb-card__body {
	padding: var(--tb-sp-3) var(--tb-sp-4) var(--tb-sp-4);
}

.tb-rankcard {
	padding: var(--tb-sp-6);
	background: var(--tb-bg-soft);
	border: 1px solid var(--tb-line);
	border-radius: var(--tb-r-lg);
}

.tb-rankcard .tb-sechead__title {
	font-size: var(--tb-fs-19);
}

/* --------------------------------------------------------------------------
   5. 数据条
   -------------------------------------------------------------------------- */
.tb-statbar {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	background: var(--tb-line-2);
	border: 1px solid var(--tb-line);
	border-radius: var(--tb-r-lg);
	overflow: hidden;
}

.tb-statbar::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--tb-grad-line);
	box-shadow: 0 0 16px rgba(198, 255, 61, 0.55);
}

.tb-statbar__item {
	padding: var(--tb-sp-8) var(--tb-sp-5);
	background: var(--tb-bg-soft);
	text-align: center;
	transition: background var(--tb-transition);
}

.tb-statbar__item:hover {
	background: #14161F;
}

/* 四个数字按频道色轮转 —— 暗底上最有效的色彩节奏点 */
.tb-statbar__num {
	font-family: var(--tb-font-num);
	font-size: var(--tb-fs-40);
	font-weight: var(--tb-fw-black);
	line-height: 1.05;
	color: var(--tb-blue-500);
	text-shadow: 0 0 26px rgba(198, 255, 61, 0.4);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
}

.tb-statbar__item:nth-child(1) .tb-statbar__num { color: var(--ch-ai-martech);    text-shadow: 0 0 26px rgba(198, 255, 61, .4); }
.tb-statbar__item:nth-child(2) .tb-statbar__num { color: var(--ch-martech-stack); text-shadow: 0 0 26px rgba(43, 245, 255, .4); }
.tb-statbar__item:nth-child(3) .tb-statbar__num { color: var(--ch-tools-review);  text-shadow: 0 0 26px rgba(155, 107, 255, .4); }
.tb-statbar__item:nth-child(4) .tb-statbar__num { color: var(--tb-cyan-500);      text-shadow: 0 0 26px rgba(255, 62, 165, .4); }

.tb-statbar__num sup {
	font-size: var(--tb-fs-16);
	font-weight: var(--tb-fw-bold);
	margin-left: 2px;
	color: var(--tb-ink-3);
}

.tb-statbar__label {
	margin-top: var(--tb-sp-3);
	font-size: var(--tb-fs-13);
	color: var(--tb-ink-4);
	letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   6. 订阅区
   -------------------------------------------------------------------------- */
.tb-subscribe {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--tb-sp-8);
	flex-wrap: wrap;
	padding: var(--tb-sp-12) var(--tb-sp-16);
	border-radius: var(--tb-r-2xl);
	background: var(--tb-bg-mute);
	border: 1px solid var(--ch-ai-martech);
	box-shadow: 0 0 50px rgba(198, 255, 61, 0.14);
	color: #fff;
	position: relative;
	overflow: hidden;
}

.tb-subscribe::before {
	content: "";
	position: absolute;
	left: -80px;
	top: -80px;
	width: 320px;
	height: 320px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(43, 245, 255, 0.28) 0%, transparent 70%);
}

.tb-subscribe::after {
	content: "";
	position: absolute;
	right: -100px;
	bottom: -120px;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 62, 165, 0.24) 0%, transparent 70%);
}

.tb-subscribe__main {
	position: relative;
	z-index: 1;
}

.tb-subscribe__title {
	font-size: var(--tb-fs-28);
	font-weight: var(--tb-fw-black);
	color: #FFFFFF;
	letter-spacing: -0.025em;
}

.tb-subscribe__text {
	margin-top: var(--tb-sp-3);
	font-size: var(--tb-fs-14);
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.7);
	max-width: 54ch;
}

.tb-subscribe__actions {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: var(--tb-sp-3);
	flex-wrap: wrap;
}