@charset "utf-8";
/* ==========================================================================
   多肽复溶参考页（peptidereference.html）专用样式
   2026-11-13 新增。与 formulations.css 同源同目的：
   多肽计算器页里 10 个多肽的正文全部藏在 <script type="text/html"> 模板里，
   由 JavaScript 注入，搜索引擎和 AI 引擎一个字都读不到。
   这一页把它们变成静态可抓取的正文。

   命名一律 pep- 前缀，正文块另起 .pep-body 作用域——
   里面的 .table-wrap / .value-badge / .info-box / .warning-box / .step
   全部只在 .pep-body 内生效，不会污染全站其它页面。
   ========================================================================== */

/* ---------- 页面外壳 ----------
   容器宽度不在这里定义：模板用的是站内 .cx（1200 固定宽，
   窄屏由 responsive.css 改成 100% + 左右 24px）。 */
body {
	background-color: #f5f7fc;
}

/* banner：与工具页模板内联 <style> 里的 .in-banner 同值，
   少了这段会没有高度、图片不显示、面包屑贴到导航下面 */
.in-banner {
	height: 155px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}

.pep-wrap {
	padding: 36px 0 64px;
}
.pep-h1 {
	font-size: 26px;
	line-height: 1.3;
	font-weight: 600;
	color: #0b1a33;
	margin: 0 0 16px;
	padding-left: 18px;
	border-left: 6px solid #2208C9;
	text-align: left;
}
.pep-intro {
	font-size: 15.5px;
	line-height: 1.9;
	color: #3d4a5c;
	margin: 0 0 20px;
	max-width: 880px;
}
.pep-intro strong {
	color: #0b1a33;
}
.pep-intro a {
	color: #2208C9;
	text-decoration: none;
	border-bottom: 1px solid rgba(34, 8, 201, .25);
}
.pep-intro a:hover {
	border-bottom-color: #2208C9;
}

/* ---------- 使用说明小卡 ---------- */
.pep-note {
	background: #fff;
	border: 1px solid #e3e9f2;
	border-left: 4px solid #2208C9;
	border-radius: 12px;
	padding: 16px 22px;
	margin: 0 0 28px;
	font-size: 14.5px;
	line-height: 1.9;
	color: #3d4a5c;
}
.pep-note strong {
	color: #0b1a33;
}

/* ---------- 多肽目录 ---------- */
.pep-toc {
	background: #fff;
	border: 1px solid #e8edf5;
	border-radius: 16px;
	padding: 20px 24px;
	margin: 0 0 32px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .03);
}
.pep-toc h2 {
	font-size: 17px;
	font-weight: 700;
	color: #0b1a33;
	margin: 0 0 12px;
	text-align: left;
}
.pep-toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 10px;
}
.pep-toc li {
	margin: 0;
}
.pep-toc a {
	display: inline-block;
	padding: 6px 14px;
	background: #f2f5fb;
	border: 1px solid #e0e7f2;
	border-radius: 999px;
	font-size: 14px;
	color: #1a2a4a;
	text-decoration: none;
	font-weight: 600;
}
.pep-toc a:hover {
	background: #2208C9;
	border-color: #2208C9;
	color: #fff;
}

/* ---------- 单个多肽区块 ---------- */
.pep-item {
	background: #fff;
	border: 1px solid #e8edf5;
	border-radius: 16px;
	padding: 26px 28px 28px;
	margin: 0 0 26px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .03);
	scroll-margin-top: 84px;
}
.pep-name {
	font-size: 22px;
	line-height: 1.4;
	font-weight: 700;
	color: #0b1a33;
	margin: 0 0 10px;
	text-align: left;
	padding-left: 14px;
	border-left: 4px solid #2208C9;
}
.pep-meta {
	font-size: 13.5px;
	line-height: 1.8;
	color: #6b7a90;
	margin: 8px 0 14px;
}
.pep-meta strong {
	color: #2208C9;
	font-weight: 700;
}
.pep-lead {
	font-size: 15px;
	line-height: 1.9;
	color: #3d4a5c;
	margin: 0 0 6px;
}
.pep-link {
	margin: 22px 0 0;
	padding-top: 16px;
	border-top: 1px dashed #e3e9f2;
	font-size: 14.5px;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
}
.pep-link a {
	color: #2208C9;
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px solid rgba(34, 8, 201, .25);
}
.pep-link a:hover {
	border-bottom-color: #2208C9;
}

/* ---------- 正文作用域：层级与段落 ---------- */
.pep-body h3 {
	font-size: 19px;
	line-height: 1.5;
	font-weight: 700;
	color: #0b1a33;
	margin: 30px 0 12px;
	text-align: left;
	padding-left: 12px;
	border-left: 4px solid #2208C9;
}
.pep-body h3:first-child {
	margin-top: 18px;
}
.pep-body h4 {
	font-size: 16px;
	line-height: 1.6;
	font-weight: 700;
	color: #1a2a4a;
	margin: 22px 0 10px;
	text-align: left;
}
.pep-body p {
	font-size: 15px;
	line-height: 1.95;
	color: #3d4a5c;
	margin: 0 0 14px;
}
.pep-body a {
	color: #2208C9;
	text-decoration: none;
	border-bottom: 1px solid rgba(34, 8, 201, .25);
}
.pep-body a:hover {
	border-bottom-color: #2208C9;
}

/* ---------- 剂量对照表 ---------- */
.pep-body .table-wrap {
	margin: 16px 0 22px;
	border-radius: 12px;
	overflow-x: auto;
	border: 1px solid #e8edf5;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .03);
	-webkit-overflow-scrolling: touch;
}
.pep-body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	background: #fff;
	min-width: 520px;
}
.pep-body th {
	background: #f0f4fc;
	font-weight: 600;
	color: #1a2a4a;
	padding: 12px 16px;
	text-align: left;
	border-bottom: 2px solid #d4ddee;
	white-space: nowrap;
}
.pep-body td {
	padding: 12px 16px;
	border-bottom: 1px solid #e9eef7;
	color: #3d4a5c;
}
.pep-body tr:last-child td {
	border-bottom: none;
}
.pep-body .value-badge {
	display: inline-block;
	color: #1f7b3a;
	font-weight: 700;
	background: #eaf3ed;
	padding: 3px 14px;
	border-radius: 999px;
	font-size: 13.5px;
	white-space: nowrap;
}

/* ---------- 提示框 ---------- */
.pep-body .info-box,
.pep-body .warning-box {
	border-radius: 10px;
	padding: 16px 20px;
	margin: 20px 0;
	font-size: 14.5px;
	line-height: 1.9;
}
.pep-body .info-box {
	background: #eef4fb;
	border-left: 4px solid #2208C9;
	color: #2d3748;
}
.pep-body .warning-box {
	background: #fff8e1;
	border-left: 4px solid #f9a825;
	color: #5d4037;
}
.pep-body .info-box strong,
.pep-body .warning-box strong {
	font-weight: 700;
}

/* ---------- 复溶步骤 ---------- */
.pep-body .step {
	margin: 12px 0;
	padding: 12px 16px;
	background: #f8faff;
	border-radius: 10px;
	border-left: 3px solid #2208C9;
	font-size: 14.5px;
	line-height: 1.85;
	color: #3d4a5c;
}
.pep-body .step-num {
	font-weight: 700;
	color: #2208C9;
	margin-right: 8px;
}

/* ---------- 窄屏 ---------- */
@media (max-width: 767px) {
	.pep-wrap {
		padding: 24px 0 44px;
	}
	.pep-h1 {
		font-size: 21px;
		padding-left: 12px;
		border-left-width: 4px;
	}
	.pep-intro,
	.pep-lead {
		font-size: 14.5px;
	}
	.pep-item {
		padding: 20px 16px 22px;
		border-radius: 12px;
	}
	.pep-name {
		font-size: 19px;
		padding-left: 10px;
		border-left-width: 3px;
	}
	.pep-toc {
		padding: 16px 16px;
	}
	.pep-body h3 {
		font-size: 17px;
		margin: 24px 0 10px;
	}
	.pep-body h4 {
		font-size: 15px;
	}
	.pep-body p,
	.pep-body .step,
	.pep-body .info-box,
	.pep-body .warning-box {
		font-size: 14px;
	}
}

@media (max-width: 480px) {
	.pep-wrap .container {
		padding: 0 14px;
	}
	.pep-body table {
		min-width: 480px;
	}
	.pep-body th,
	.pep-body td {
		padding: 10px 12px;
	}
}

/* ---------- 服务互链 CTA ----------
   .tool-cta 在工具页里是全宽色带（在 .main 之外）；本页它落在 .cx 里面，
   必须改成与其余卡片同形的白卡，否则和整页脱形。 */
.pep-wrap .tool-cta {
	background: #fff;
	border: 1px solid #e8edf5;
	border-radius: 16px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .03);
	padding: 24px 26px;
	margin: 32px 0 26px;
}
@media (max-width: 768px) {
	.pep-wrap .tool-cta {
		padding: 18px 16px;
		border-radius: 12px;
	}
}

/* ---------- 数据出处 + 版本日（2026-11-13，面向国内 AI 收录）----------
   国内 AI（豆包 / 夸克 / 元宝）引用网页时会把「来源名 + 时间」一起展示，
   百度也用这一行判断这是不是「有人在维护的实际内容」。
   版本日来自源页 mtime，由生成脚本写入，不是每次访问都变——动态时间戳会被判成不可信。 */
.pep-stamp {
	font-size: 13.5px;
	line-height: 1.75;
	color: #6b7a90;
	margin: 0 0 18px;
}
.pep-stamp strong {
	color: #2208C9;
	font-weight: 600;
}