/* ==========================================================================
   文章详情页

   2.0 暗色长文阅读优化 —— 暗底最大的风险是长文疲劳，处理办法有四条：
   1. 正文字色定在 #C4C7D4 而非纯白，纯白在近黑底上会「发虚」；
   2. 行高提到 1.92（亮底只要 1.85），字号差不变但行间更松；
   3. 段落用**首行缩进**而非空行分段，暗底上空行视觉上会「断」得更明显；
   4. 层级靠「发光色条 + 下划分隔」而非阴影，暗底上阴影几乎看不见。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 阅读进度条
   -------------------------------------------------------------------------- */
.tb-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 260;
	background: transparent;
	pointer-events: none;
}

.tb-progress__bar {
	display: block;
	height: 100%;
	width: 0;
	background: var(--tb-grad-line);
	box-shadow: 0 0 12px rgba(198, 255, 61, 0.7);
	transition: width 90ms linear;
}

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

/* --------------------------------------------------------------------------
   0.5 三栏阅读版式（桌面 ≥1180px）
   --------------------------------------------------------------------------
   2.0 前的问题（实测）：
   - 目录是一块独立卡片，18 条时高 516px，整块压在正文上方
   - 标题/封面/目录 864px 宽、正文只有 760px，右边缘参差，右侧空 104px
   现在：目录移入左侧粘性栏，正文与侧栏收窄，三栏对齐同一条基准线。
   1232 = 184(目录) + 32 + 696(正文) + 40 + 280(侧栏)
   ------------------------------------------------------------------------ */
@media (min-width: 1180px) {
	.tb-grid--article {
		grid-template-columns: minmax(0, 1fr) 280px;
		gap: var(--tb-sp-10);
	}

	.tb-article__flow {
		display: grid;
		grid-template-columns: 184px minmax(0, 1fr);
		gap: var(--tb-sp-8);
		align-items: start;
	}
}

/* 桌面：左侧粘性目录 */
@media (min-width: 1180px) {
	.tb-rail {
		position: sticky;
		top: calc(var(--tb-header-h) + var(--tb-subnav-h) + 20px);
		max-height: calc(100vh - var(--tb-header-h) - var(--tb-subnav-h) - 48px);
		overflow-y: auto;
		scrollbar-width: thin;
	}

	.tb-rail .tb-toc {
		margin-bottom: 0;
		padding: 0;
		background: transparent;
		border: 0;
		border-radius: 0;
	}

	/* 粘性目录里不需要大标题块，压成一条顶部线即可 */
	.tb-rail .tb-toc__title {
		margin-bottom: var(--tb-sp-2);
		padding-bottom: var(--tb-sp-2);
		border-bottom: 1px solid var(--tb-line);
	}

	.tb-rail .tb-toc__item {
		line-height: 1.5;
		padding: 3px 0;
	}

	.tb-rail .tb-toc__item a {
		font-size: var(--tb-fs-13);
		line-height: 1.5;
	}

	.tb-rail .tb-toc__item--h3 {
		padding-left: var(--tb-sp-4);
	}

	.tb-rail .tb-toc__item--h3 a {
		font-size: var(--tb-fs-12);
	}

	.tb-rail .tb-toc__item a::before {
		width: 18px;
		font-size: var(--tb-fs-11);
		line-height: 1.85;
	}
}

/* 窄屏：目录变成横向芯片条，吸顶跟随 */
@media (max-width: 1179px) {
	.tb-rail {
		position: sticky;
		top: calc(var(--tb-header-h) + var(--tb-subnav-h));
		z-index: 150;
		margin: 0 calc(var(--tb-gutter) * -1) var(--tb-sp-6);
		padding: var(--tb-sp-2) var(--tb-gutter);
		background: rgba(10, 11, 16, 0.94);
		backdrop-filter: blur(12px);
		border-bottom: 1px solid var(--tb-line);
	}

	.tb-rail .tb-toc {
		margin: 0;
		padding: 0;
		background: transparent;
		border: 0;
		border-radius: 0;
	}

	.tb-rail .tb-toc__title {
		display: none;
	}

	.tb-rail .tb-toc__list {
		display: flex;
		gap: var(--tb-sp-2);
		overflow-x: auto;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.tb-rail .tb-toc__list::-webkit-scrollbar {
		display: none;
	}

	.tb-rail .tb-toc__item {
		flex-shrink: 0;
		padding: 0 !important;
	}

	.tb-rail .tb-toc__item a {
		display: inline-flex;
		align-items: center;
		gap: var(--tb-sp-1);
		padding: var(--tb-sp-1) var(--tb-sp-3);
		background: var(--tb-bg-soft);
		border: 1px solid var(--tb-line);
		border-radius: var(--tb-r-pill);
		font-size: var(--tb-fs-12);
		white-space: nowrap;
	}

	.tb-rail .tb-toc__item a::before {
		width: auto;
		line-height: inherit;
	}

	.tb-rail .tb-toc__item a.is-active {
		background: var(--tb-blue-500);
		border-color: var(--tb-blue-500);
		color: #0A0B10;
		text-shadow: none;
	}

	.tb-rail .tb-toc__item a.is-active::before {
		color: #0A0B10;
	}
}

/* --------------------------------------------------------------------------
   1. 标题区
   -------------------------------------------------------------------------- */
.tb-article__head {
	position: relative;
	padding: var(--tb-sp-2) 0 var(--tb-sp-8) var(--tb-sp-6);
	margin-bottom: var(--tb-sp-10);
	border-bottom: 1px solid var(--tb-line);
}

/* 左侧发光竖条 —— 亮底时代是纯色条，暗底上补一层辉光 */
.tb-article__head::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 4px;
	height: 100%;
	min-height: 56px;
	border-radius: 0 3px 3px 0;
	background: var(--tb-grad-line);
	box-shadow: 0 0 14px rgba(198, 255, 61, 0.55), 0 0 30px rgba(43, 245, 255, 0.3);
}

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

.tb-article__title {
	font-size: var(--tb-fs-40);
	font-weight: var(--tb-fw-black);
	line-height: 1.25;
	letter-spacing: -0.03em;
	color: var(--tb-ink);
}

.tb-article__standfirst {
	margin-top: var(--tb-sp-5);
	font-size: var(--tb-fs-17);
	line-height: 1.75;
	color: var(--tb-ink-2);
}

.tb-article__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--tb-sp-3);
	margin-top: var(--tb-sp-6);
	font-size: var(--tb-fs-13);
	color: var(--tb-ink-3);
}

.tb-article__meta-item {
	display: inline-flex;
	align-items: center;
	gap: var(--tb-sp-1);
}

.tb-article__meta-item svg {
	width: 14px;
	height: 14px;
	opacity: 0.6;
}

.tb-article__author {
	display: inline-flex;
	align-items: center;
	gap: var(--tb-sp-2);
	font-weight: var(--tb-fw-medium);
	color: var(--tb-ink-2);
}

/* 作者头像：暗底上用发光环而非实心色块 */
.tb-article__avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--tb-bg-soft);
	border: 1px solid var(--tb-blue-500);
	color: var(--tb-blue-500);
	display: grid;
	place-items: center;
	font-size: var(--tb-fs-12);
	font-weight: var(--tb-fw-black);
	box-shadow: 0 0 14px rgba(198, 255, 61, 0.35);
}

/* --------------------------------------------------------------------------
   2. 封面图
   -------------------------------------------------------------------------- */
.tb-article__cover {
	margin-bottom: var(--tb-sp-8);
	border-radius: var(--tb-r-lg);
	overflow: hidden;
	border: 1px solid var(--tb-line);
	box-shadow: 0 0 44px rgba(198, 255, 61, 0.10);
}

.tb-article__cover img {
	width: 100%;
	/* 从 16:9 收到 2.05:1 —— 原比例下封面近 500px 高，
	   在三栏版式里会把正文首屏整个挤下去 */
	aspect-ratio: 2.05 / 1;
	object-fit: cover;
}

.tb-article__cover figcaption {
	padding: var(--tb-sp-3) var(--tb-sp-4);
	font-size: var(--tb-fs-12);
	color: var(--tb-ink-4);
	text-align: center;
	background: var(--tb-bg-mute);
	border-top: 1px solid var(--tb-line-2);
}

/* --------------------------------------------------------------------------
   3. 正文排版 —— 中文长文 + 暗底
   -------------------------------------------------------------------------- */
.tb-content {
	/* 三栏版式下列宽由栅格决定（约 696px ≈ 43 字/行），
	   这里不再设上限，避免出现「右边空一截」的参差边 */
	max-width: 100%;
	font-size: var(--tb-fs-16);
	line-height: var(--tb-lh-body);
	color: var(--tb-ink-2);
	letter-spacing: 0.012em;
}

.tb-content > * + * {
	margin-top: var(--tb-sp-5);
}

.tb-content p {
	margin: 0;
}

/* 中文首行缩进；紧跟标题/列表后的段落不缩进（避免双重起头） */
.tb-content > p {
	text-indent: 2em;
}

.tb-content > h2 + p,
.tb-content > h3 + p,
.tb-content > h4 + p,
.tb-content > blockquote + p,
.tb-content > ul + p,
.tb-content > ol + p,
.tb-content > table + p,
.tb-content > figure + p,
.tb-content > p:first-child {
	text-indent: 0;
}

.tb-content strong {
	font-weight: var(--tb-fw-bold);
	color: var(--tb-ink);
}

/* 标题层级：h2 荧光竖条、h3 下划分隔、h4 左侧细线 */
.tb-content h2 {
	margin-top: var(--tb-sp-12);
	padding-left: var(--tb-sp-5);
	border-left: 4px solid var(--tb-blue-500);
	border-radius: 0 2px 2px 0;
	font-size: var(--tb-fs-24);
	font-weight: var(--tb-fw-black);
	letter-spacing: -0.025em;
	line-height: 1.4;
	color: var(--tb-ink);
	text-shadow: 0 0 24px rgba(198, 255, 61, 0.18);
	scroll-margin-top: calc(var(--tb-header-h) + var(--tb-subnav-h) + 20px);
}

.tb-content h3 {
	margin-top: var(--tb-sp-8);
	margin-bottom: var(--tb-sp-5);
	padding-bottom: var(--tb-sp-3);
	border-bottom: 1px solid var(--tb-line);
	font-size: 19px;
	font-weight: var(--tb-fw-bold);
	letter-spacing: -0.015em;
	color: var(--tb-ink);
	scroll-margin-top: calc(var(--tb-header-h) + var(--tb-subnav-h) + 20px);
}

.tb-content h4 {
	margin-top: var(--tb-sp-8);
	margin-bottom: var(--tb-sp-3);
	padding-left: var(--tb-sp-3);
	border-left: 2px solid var(--tb-cyan-500);
	font-size: var(--tb-fs-17);
	font-weight: var(--tb-fw-bold);
	color: var(--tb-ink);
}

/* 列表：父级数字取主色，子级收窄并降饱和 */
.tb-content ul,
.tb-content ol {
	padding-left: var(--tb-sp-6);
	list-style: revert;
}

.tb-content li {
	margin-top: var(--tb-sp-2);
}

.tb-content li::marker {
	color: var(--tb-blue-500);
	font-weight: var(--tb-fw-bold);
}

.tb-content ol ol,
.tb-content ul ol,
.tb-content ol ul,
.tb-content ul ul {
	margin-top: var(--tb-sp-2);
	padding-left: var(--tb-sp-5);
}

.tb-content ol ol {
	list-style: lower-alpha;
}

.tb-content ol ol li::marker {
	color: var(--tb-ink-4);
	font-weight: var(--tb-fw-normal);
}

/* 引用块 */
.tb-content blockquote {
	position: relative;
	margin: var(--tb-sp-6) 0;
	padding: var(--tb-sp-5) var(--tb-sp-6) var(--tb-sp-5) var(--tb-sp-8);
	background: #131520;
	border-left: 4px solid var(--tb-blue-400);
	border-radius: 0 var(--tb-r-md) var(--tb-r-md) 0;
	color: var(--tb-ink-2);
	font-size: var(--tb-fs-15);
	line-height: 1.85;
}

.tb-content blockquote p {
	text-indent: 0;
}

.tb-content blockquote p + p {
	margin-top: var(--tb-sp-3);
}

/* 代码 */
.tb-content code {
	padding: 2px 6px;
	background: #131520;
	border: 1px solid var(--tb-line);
	border-radius: var(--tb-r-sm);
	font-family: var(--tb-font-mono);
	font-size: 0.9em;
	color: var(--tb-blue-500);
}

.tb-content pre {
	padding: var(--tb-sp-5);
	background: #080910;
	border: 1px solid var(--tb-line);
	border-radius: var(--tb-r-md);
	overflow-x: auto;
	line-height: 1.75;
}

.tb-content pre code {
	padding: 0;
	background: none;
	border: 0;
	color: var(--tb-neon-cyan);
	font-size: var(--tb-fs-13);
}

/* 表格 */
.tb-content table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: var(--tb-fs-14);
	display: block;
	overflow-x: auto;
	border: 1px solid var(--tb-line);
	border-radius: var(--tb-r-md);
}

.tb-content th,
.tb-content td {
	padding: var(--tb-sp-3) var(--tb-sp-4);
	border-bottom: 1px solid var(--tb-line-2);
	border-right: 1px solid var(--tb-line-2);
	text-align: left;
	line-height: 1.7;
}

.tb-content th:last-child,
.tb-content td:last-child {
	border-right: 0;
}

.tb-content tbody tr:last-child td {
	border-bottom: 0;
}

.tb-content th {
	background: #131520;
	font-weight: var(--tb-fw-bold);
	color: var(--tb-ink);
	white-space: nowrap;
	letter-spacing: 0.01em;
}

.tb-content tbody tr:nth-child(even) {
	background: rgba(255, 255, 255, 0.02);
}

.tb-content tbody tr:hover {
	background: rgba(198, 255, 61, 0.06);
}

.tb-content img {
	border-radius: var(--tb-r-md);
	margin-inline: auto;
	border: 1px solid var(--tb-line);
}

.tb-content figure figcaption {
	margin-top: var(--tb-sp-2);
	font-size: var(--tb-fs-12);
	color: var(--tb-ink-4);
	text-align: center;
}

.tb-content hr {
	margin: var(--tb-sp-10) 0;
}

/* 文末声明 */
.tb-content__note {
	margin-top: var(--tb-sp-10);
	padding: var(--tb-sp-5);
	background: var(--tb-bg-mute);
	border: 1px solid var(--tb-line-2);
	border-radius: var(--tb-r-md);
	font-size: var(--tb-fs-13);
	color: var(--tb-ink-3);
	line-height: var(--tb-lh-snug);
}

.tb-content__note strong {
	color: var(--tb-ink-2);
}

/* --------------------------------------------------------------------------
   4. 目录
   -------------------------------------------------------------------------- */
.tb-toc {
	margin-bottom: var(--tb-sp-10);
	padding: var(--tb-sp-6) var(--tb-sp-6) var(--tb-sp-4);
	background: var(--tb-bg-mute);
	border: 1px solid var(--tb-line-2);
	border-left: 3px solid var(--tb-blue-500);
	border-radius: 0 var(--tb-r-lg) var(--tb-r-lg) 0;
}

.tb-toc__title {
	display: flex;
	align-items: center;
	gap: var(--tb-sp-2);
	font-size: var(--tb-fs-14);
	font-weight: var(--tb-fw-bold);
	color: var(--tb-ink);
	margin-bottom: var(--tb-sp-3);
	padding-bottom: var(--tb-sp-3);
	border-bottom: 1px solid var(--tb-line);
	letter-spacing: 0.02em;
}

.tb-toc__list {
	list-style: none;
	counter-reset: toc;
}

.tb-toc__item {
	line-height: 1.75;
	counter-increment: toc;
}

.tb-toc__item--h3 {
	padding-left: var(--tb-sp-5);
}

.tb-toc__item a {
	display: flex;
	gap: var(--tb-sp-2);
	font-size: var(--tb-fs-14);
	color: var(--tb-ink-2);
	transition: color var(--tb-transition), transform var(--tb-transition), text-shadow var(--tb-transition);
}

.tb-toc__item a::before {
	content: counter(toc, decimal-leading-zero);
	flex-shrink: 0;
	width: 22px;
	font-family: var(--tb-font-num);
	font-size: var(--tb-fs-12);
	font-weight: var(--tb-fw-bold);
	color: var(--tb-ink-4);
	line-height: 1.9;
}

.tb-toc__item--h3 a {
	font-size: var(--tb-fs-13);
	color: var(--tb-ink-3);
}

.tb-toc__item a:hover {
	color: var(--tb-blue-500);
	transform: translateX(2px);
}

.tb-toc__item a.is-active {
	color: var(--tb-blue-500);
	font-weight: var(--tb-fw-bold);
	transform: translateX(2px);
	text-shadow: 0 0 14px rgba(198, 255, 61, 0.5);
}

.tb-toc__item a.is-active::before {
	color: var(--tb-blue-500);
}

/* --------------------------------------------------------------------------
   5. 分享
   -------------------------------------------------------------------------- */
.tb-share {
	display: flex;
	align-items: center;
	gap: var(--tb-sp-2);
	margin-top: var(--tb-sp-10);
	padding-top: var(--tb-sp-6);
	border-top: 1px solid var(--tb-line);
}

.tb-share__label {
	font-size: var(--tb-fs-13);
	color: var(--tb-ink-4);
	margin-right: var(--tb-sp-2);
}

.tb-share__btn {
	display: grid;
	place-items: center;
	min-width: 36px;
	height: 36px;
	padding: 0 var(--tb-sp-3);
	border: 1px solid var(--tb-line);
	border-radius: var(--tb-r-md);
	background: var(--tb-bg-soft);
	color: var(--tb-ink-2);
	font-size: var(--tb-fs-12);
	font-weight: var(--tb-fw-medium);
	transition: all var(--tb-transition);
}

.tb-share__btn:hover {
	border-color: var(--tb-blue-500);
	color: var(--tb-blue-500);
	background: rgba(198, 255, 61, 0.08);
	box-shadow: 0 0 16px rgba(198, 255, 61, 0.25);
}

/* --------------------------------------------------------------------------
   6. 上下篇
   -------------------------------------------------------------------------- */
.tb-postnav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--tb-sp-4);
	margin-top: var(--tb-sp-10);
}

.tb-postnav__item {
	display: flex;
	flex-direction: column;
	gap: var(--tb-sp-2);
	padding: var(--tb-sp-4) var(--tb-sp-5);
	background: var(--tb-bg-soft);
	border: 1px solid var(--tb-line);
	border-radius: var(--tb-r-md);
	transition: all var(--tb-transition);
}

.tb-postnav__item:hover {
	background: var(--tb-bg-mute);
	border-color: var(--tb-blue-500);
	box-shadow: 0 0 20px rgba(198, 255, 61, 0.16);
}

.tb-postnav__item--next {
	text-align: right;
}

.tb-postnav__label {
	font-size: var(--tb-fs-12);
	color: var(--tb-ink-4);
	letter-spacing: 0.06em;
}

.tb-postnav__title {
	font-size: var(--tb-fs-14);
	font-weight: var(--tb-fw-medium);
	color: var(--tb-ink);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

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

/* --------------------------------------------------------------------------
   7. 相关阅读
   --------------------------------------------------------------------------
   主列只有约 696px，三列会让卡片窄到标题只剩两行 —— 改两列。 */
.tb-related {
	margin-top: var(--tb-sp-16);
}

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

.tb-related__grid .tb-card--tile {
	padding-bottom: var(--tb-sp-3);
}

/* --------------------------------------------------------------------------
   7.5 侧栏榜单卡紧凑化
   --------------------------------------------------------------------------
   侧栏从 320px 收到 280px 后，正文区只剩 ~168px，
   「分类 · 日期」会折成两行、卡片高度虚增。这里缩图、压间距、
   并让元信息保持单行。 */
.tb-sidebar .tb-widget {
	padding: var(--tb-sp-5);
}

.tb-sidebar .tb-card--rank {
	gap: var(--tb-sp-3);
	padding: var(--tb-sp-3) 0;
}

.tb-sidebar .tb-card--rank .tb-card__thumb {
	width: 66px;
	height: 46px;
	border-radius: var(--tb-r-sm);
}

.tb-sidebar .tb-card--rank .tb-card__body {
	gap: 2px;
}

.tb-sidebar .tb-card--rank .tb-card__title {
	font-size: var(--tb-fs-13);
	line-height: 1.5;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

/* 元信息压到一行：分类在前、日期在后。
   注意 .tb-meta 本身是 display:flex + flex-wrap:wrap，
   光写 white-space:nowrap 管不住 —— flex 子项照旧换行，必须显式 nowrap。 */
.tb-sidebar .tb-card--rank .tb-meta {
	flex-wrap: nowrap;
	gap: 4px;
	font-size: var(--tb-fs-11);
	white-space: nowrap;
	overflow: hidden;
}

.tb-sidebar .tb-card--rank .tb-meta > * {
	flex-shrink: 0;
}

/* 热门榜的阅读时长与日期都低价值，280px 侧栏里只留分类 —— 挤着放会把日期裁成「2026-10-0」 */
.tb-sidebar .tb-card--rank .tb-meta__len,
.tb-sidebar .tb-card--rank .tb-meta time,
.tb-sidebar .tb-card--rank .tb-meta__sep:last-of-type {
	display: none;
}

.tb-sidebar .tb-card__no {
	width: 22px;
	height: 22px;
	font-size: var(--tb-fs-11);
	border-radius: 50%;
}

/* --------------------------------------------------------------------------
   8. 页面（关于/联系）
   -------------------------------------------------------------------------- */
.tb-page .tb-content {
	max-width: 820px;
}

.tb-page__head {
	margin-bottom: var(--tb-sp-8);
	padding-bottom: var(--tb-sp-5);
	border-bottom: 1px solid var(--tb-line);
}

.tb-page__title {
	font-size: var(--tb-fs-32);
	font-weight: var(--tb-fw-black);
	letter-spacing: -0.02em;
	color: var(--tb-ink);
}

/* --------------------------------------------------------------------------
   9. 404
   -------------------------------------------------------------------------- */
.tb-404 {
	padding: var(--tb-sp-20) var(--tb-sp-6);
	text-align: center;
}

.tb-404__code {
	font-family: var(--tb-font-num);
	font-size: 88px;
	font-weight: var(--tb-fw-black);
	line-height: 1;
	letter-spacing: -0.04em;
	background: var(--tb-grad-line);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 0 26px rgba(198, 255, 61, 0.4));
}

.tb-404__title {
	margin-top: var(--tb-sp-5);
	font-size: var(--tb-fs-24);
	font-weight: var(--tb-fw-black);
	color: var(--tb-ink);
}

.tb-404__text {
	margin-top: var(--tb-sp-3);
	font-size: var(--tb-fs-15);
	color: var(--tb-ink-3);
}

.tb-404__actions {
	margin-top: var(--tb-sp-8);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--tb-sp-3);
	flex-wrap: wrap;
}

.tb-404__hot {
	margin-top: var(--tb-sp-12);
	padding-top: var(--tb-sp-8);
	border-top: 1px solid var(--tb-line);
	text-align: left;
}

/* --------------------------------------------------------------------------
   10. 评论区
   -------------------------------------------------------------------------- */
.tb-comments {
	margin-top: var(--tb-sp-16);
	padding-block: var(--tb-sp-10);
	border-top: 1px solid var(--tb-line);
	max-width: var(--tb-article-w);
}

.tb-comments__list {
	display: flex;
	flex-direction: column;
	gap: var(--tb-sp-5);
	margin: var(--tb-sp-6) 0;
}

.tb-comments__list .comment-body {
	padding: var(--tb-sp-5);
	background: var(--tb-bg-mute);
	border: 1px solid var(--tb-line-2);
	border-radius: var(--tb-r-md);
	font-size: var(--tb-fs-14);
	line-height: var(--tb-lh-snug);
	color: var(--tb-ink-2);
}

.tb-comments__list .comment-author img {
	border-radius: 50%;
}

.tb-comments__list .comment-meta {
	font-size: var(--tb-fs-12);
	color: var(--tb-ink-4);
	margin-bottom: var(--tb-sp-2);
}

.tb-comments__list .children {
	margin-top: var(--tb-sp-4);
	padding-left: var(--tb-sp-6);
	border-left: 2px solid var(--tb-line);
	display: flex;
	flex-direction: column;
	gap: var(--tb-sp-4);
}

.tb-comments__list .reply {
	margin-top: var(--tb-sp-2);
	font-size: var(--tb-fs-12);
}

.comment-form {
	display: flex;
	flex-direction: column;
	gap: var(--tb-sp-4);
	margin-top: var(--tb-sp-6);
}

.comment-form label {
	display: block;
	margin-bottom: var(--tb-sp-1);
	font-size: var(--tb-fs-13);
	color: var(--tb-ink-2);
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	max-width: 100%;
	padding: var(--tb-sp-3) var(--tb-sp-4);
	background: var(--tb-bg-soft);
	border: 1px solid var(--tb-line);
	border-radius: var(--tb-r-md);
	color: var(--tb-ink);
	outline: none;
	transition: border-color var(--tb-transition), box-shadow var(--tb-transition);
}

.comment-form input:focus,
.comment-form textarea:focus {
	border-color: var(--tb-blue-500);
	box-shadow: 0 0 0 3px rgba(198, 255, 61, 0.14);
}

.comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: center;
	gap: var(--tb-sp-2);
	font-size: var(--tb-fs-13);
	color: var(--tb-ink-3);
}

.comment-form .comment-form-cookies-consent input {
	width: auto;
}

.navigation.pagination {
	margin-top: var(--tb-sp-6);
}

.navigation.pagination .nav-links {
	display: flex;
	gap: var(--tb-sp-2);
}

.navigation.pagination a,
.navigation.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 34px;
	height: 34px;
	padding: 0 var(--tb-sp-2);
	background: var(--tb-bg-soft);
	border: 1px solid var(--tb-line);
	border-radius: var(--tb-r-md);
	font-size: var(--tb-fs-13);
	color: var(--tb-ink-2);
}

.navigation.pagination .current {
	background: var(--tb-blue-500);
	border-color: var(--tb-blue-500);
	color: #0A0B10;
	font-weight: var(--tb-fw-bold);
}