/* ==========================================================================
   AI 引用优化区块：要点速览 / 术语表 / 问答
   设计目标：这三块是检索型 AI 摘取答案时的优先抓取对象，
   视觉上必须有明确的边界，让人和机器都能一眼识别。
   ========================================================================== */

/* --------------------------------------------------------------------------
   共用外壳
   -------------------------------------------------------------------------- */
.tb-keypoints,
.tb-glossary,
.tb-faq {
	margin: var(--tb-sp-8) 0;
	padding: var(--tb-sp-6);
	border-radius: var(--tb-r-lg);
	background: var(--tb-bg-soft);
	border: 1px solid var(--tb-line);
}

.tb-keypoints__title,
.tb-glossary__title,
.tb-faq__title {
	margin: 0 0 var(--tb-sp-4);
	font-size: var(--tb-fs-18);
	font-weight: var(--tb-fw-black);
	letter-spacing: -0.01em;
	color: var(--tb-text);
	display: flex;
	align-items: center;
	gap: var(--tb-sp-2);
}

/* 标题左侧的品牌色标记，与区块头的视觉语言一致 */
.tb-keypoints__title::before,
.tb-glossary__title::before,
.tb-faq__title::before {
	content: "";
	width: 4px;
	height: 15px;
	border-radius: 2px;
	background: var(--tb-grad-line);
}

/* --------------------------------------------------------------------------
   要点速览
   -------------------------------------------------------------------------- */
.tb-keypoints__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--tb-sp-2);
}

.tb-keypoints__list li {
	position: relative;
	padding-left: 20px;
	font-size: var(--tb-fs-14);
	line-height: var(--tb-lh-snug);
	color: var(--tb-text-2);
}

/* 要点速览是全文最该被看到的一段 —— 单独给它发光边框 */
.tb-keypoints {
	border-color: var(--tb-blue-500);
	box-shadow: 0 0 30px rgba(198, 255, 61, 0.12);
	background: linear-gradient(135deg, rgba(198, 255, 61, 0.06) 0%, var(--tb-bg-soft) 60%);
}

.tb-keypoints__list li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 8px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tb-blue-500);
	box-shadow: 0 0 10px var(--tb-blue-500);
}

/* --------------------------------------------------------------------------
   术语表
   -------------------------------------------------------------------------- */
.tb-glossary__list {
	margin: 0;
	display: grid;
	gap: var(--tb-sp-3);
}

.tb-glossary__item {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: var(--tb-sp-3);
	align-items: baseline;
}

.tb-glossary__item dt {
	font-size: var(--tb-fs-14);
	font-weight: var(--tb-fw-bold);
	color: var(--tb-color);
	white-space: nowrap;
}

.tb-glossary__item dd {
	margin: 0;
	font-size: var(--tb-fs-14);
	line-height: var(--tb-lh-snug);
	color: var(--tb-text-2);
}

/* --------------------------------------------------------------------------
   问答
   -------------------------------------------------------------------------- */
.tb-faq__list {
	margin: 0;
	display: grid;
	gap: var(--tb-sp-4);
}

.tb-faq__item + .tb-faq__item {
	padding-top: var(--tb-sp-4);
	border-top: 1px solid var(--tb-line);
}

.tb-faq__q {
	margin: 0 0 var(--tb-sp-2);
	font-size: var(--tb-fs-15);
	font-weight: var(--tb-fw-bold);
	line-height: var(--tb-lh-snug);
	color: var(--tb-text);
	/* 问题加问号是 AI 识别问答对的重要信号 */
	display: flex;
	gap: var(--tb-sp-2);
}

/* Q 芯片：暗底上主色是亮色，文字必须反色成深色，否则白字压荧光绿读不清 */
.tb-faq__q::before {
	content: "Q";
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	display: grid;
	place-items: center;
	border-radius: var(--tb-r-sm);
	background: var(--tb-color);
	color: var(--tb-blue-900);
	font-family: var(--tb-font-num);
	font-size: var(--tb-fs-12);
	font-weight: var(--tb-fw-black);
	line-height: 1;
	box-shadow: 0 0 14px rgba(198, 255, 61, 0.4);
}

.tb-faq__a {
	display: flex;
	gap: var(--tb-sp-2);
	font-size: var(--tb-fs-14);
	line-height: var(--tb-lh-body);
	color: var(--tb-text-2);
}

.tb-faq__a p {
	margin: 0;
}

/* A 芯片：与 Q 形成一实一虚的对照，同时保证暗底上的对比度 */
.tb-faq__a::before {
	content: "A";
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	display: grid;
	place-items: center;
	border-radius: var(--tb-r-sm);
	background: transparent;
	border: 1px solid var(--tb-cyan-500);
	color: var(--tb-cyan-500);
	font-family: var(--tb-font-num);
	font-size: var(--tb-fs-12);
	font-weight: var(--tb-fw-black);
	line-height: 1;
}

/* --------------------------------------------------------------------------
   窄屏
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
	.tb-keypoints,
	.tb-glossary,
	.tb-faq {
		padding: var(--tb-sp-4);
		margin: var(--tb-sp-6) 0;
	}

	.tb-glossary__item {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--tb-sp-1);
	}
}