@charset "utf-8";
/* ==========================================================================
   缓冲液与试剂配方库（formulations.html）专用样式
   2026-11-13 新增，同日按站内整体风格对齐一次。

   页面存在的唯一理由：工具箱里 101 个配方都是 JavaScript 渲染的，
   搜索引擎和 AI 引擎读不到；静态页把它们变成可抓取的正文。

   风格基准（都取自站内，不是自己发明的）：
     · 容器宽度 1200 —— 直接用站内 .cx（style.css 定义 1200 固定宽，
       responsive.css 在窄屏改成 100% + 左右 24px），本文件不再自定义容器；
     · banner 155px / cover —— 与工具页模板内联 <style> 里的 .in-banner 同值；
     · 一级标题 26px + 左侧 6px 竖条 —— 与工具页 h1 完全一致；
     · 整页底色 #f5f7fc —— 与工具页 body 同值；
     · 主色 #2208C9 —— 与工具页（25 处）一致；站内通用主色是 #0383d3 / #ff9c01，
       本页属于工具页家族，不混用第三套颜色。
   ========================================================================== */

/* 与工具页一致：整页底色 #f5f7fc（工具页写在模板 body 内联样式里）。
   本文件只在配方库页引入，不会影响站内其它页面。 */
body {
	background-color: #f5f7fc;
}

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

/* 主体区：上下留白由 .formu-wrap 负责，左右与宽度交给站内 .cx */
.formu-wrap {
	padding: 36px 0 64px;
}
.formu-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;
}
.formu-intro {
	font-size: 15.5px;
	line-height: 1.9;
	color: #3d4a5c;
	margin: 0 0 28px;
	max-width: 900px;
}
.formu-intro strong {
	color: #0b1a33;
}

/* ---------- 分类目录 ---------- */
.formu-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);
}
.formu-toc h2 {
	font-size: 17px;
	font-weight: 700;
	color: #0b1a33;
	margin: 0 0 12px;
	text-align: left;
}
.formu-toc ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
}
.formu-toc li {
	margin: 0;
	font-size: 14.5px;
}
.formu-toc a {
	color: #2208C9;
	text-decoration: none;
	border-bottom: 1px solid rgba(34, 8, 201, .2);
}
.formu-toc a:hover {
	border-bottom-color: #2208C9;
}
.formu-toc span {
	color: #8a9ab0;
	font-size: 13px;
}

/* ---------- 分类区块 ---------- */
.formu-cat {
	margin: 0 0 40px;
	scroll-margin-top: 84px;
}
/* 竖条形态照站内 .cxjg-ml（3px 竖条 + 22px 标题），
   尺度上比 h1 的 6px 降一档，层级关系与工具页一致 */
.formu-cat-title {
	font-size: 22px;
	line-height: 1.4;
	font-weight: 700;
	color: #0b1a33;
	margin: 0 0 18px;
	padding-left: 14px;
	border-left: 4px solid #2208C9;
	text-align: left;
}
.formu-cat-title span {
	font-size: 14px;
	font-weight: 400;
	color: #8a9ab0;
	margin-left: 6px;
}

/* ---------- 配方卡片 ---------- */
.formu-item {
	background: #fff;
	border: 1px solid #e8edf5;
	border-radius: 16px;
	padding: 22px 24px 20px;
	margin: 0 0 18px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .03);
	scroll-margin-top: 84px;
}
.formu-name {
	font-size: 18px;
	line-height: 1.5;
	font-weight: 700;
	color: #0b1a33;
	margin: 0 0 8px;
	text-align: left;
}
.formu-meta {
	font-size: 13.5px;
	line-height: 1.7;
	color: #8a9ab0;
	margin: 0 0 14px;
}

/* ---------- 用途 / 分类 / pH / 浓度 ---------- */
.formu-spec {
	display: grid;
	grid-template-columns: 84px 1fr;
	gap: 6px 14px;
	margin: 0 0 14px;
	font-size: 14.5px;
	line-height: 1.7;
}
.formu-spec dt {
	color: #7a8ba3;
	margin: 0;
}
.formu-spec dd {
	color: #0b1a33;
	margin: 0;
}

.formu-desc {
	font-size: 14.5px;
	line-height: 1.9;
	color: #3d4a5c;
	margin: 0 0 16px;
}

/* ---------- 成分表 ---------- */
.formu-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	margin: 0 0 16px;
}
.formu-table th {
	background: #f4f7fc;
	color: #1a2a4a;
	font-weight: 600;
	text-align: left;
	padding: 9px 12px;
	border-bottom: 1px solid #e3e9f2;
	white-space: nowrap;
}
.formu-table td {
	padding: 9px 12px;
	border-bottom: 1px solid #eef2f8;
	color: #3d4a5c;
	vertical-align: top;
}
.formu-table tr:last-child td {
	border-bottom: none;
}
.formu-table td:first-child {
	color: #0b1a33;
	font-weight: 500;
}

/* ---------- 配制步骤 ---------- */
.formu-steps {
	margin: 0 0 16px 20px;
	padding: 0;
	font-size: 14.5px;
	line-height: 1.9;
	color: #3d4a5c;
}
.formu-steps li {
	margin: 0 0 6px;
}
.formu-steps strong {
	color: #2208C9;
	font-weight: 600;
}

.formu-link {
	margin: 0;
	font-size: 14px;
}
.formu-link a {
	color: #2208C9;
	text-decoration: none;
	border-bottom: 1px solid rgba(34, 8, 201, .25);
}
.formu-link a:hover {
	border-bottom-color: #2208C9;
}

/* ---------- 服务互链 CTA ----------
   .tool-cta 原本是给工具页用的「全宽色带」（在 .main 之外）。
   这里它落在 .cx 里面，必须改成卡片，否则会和页面其余卡片脱形。 */
.formu-wrap .tool-cta,
.pep-wrap .tool-cta {
	background: #fff;
	border: 1px solid #e8edf5;
	border-top: 1px solid #e8edf5;
	border-radius: 16px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .03);
	padding: 24px 26px;
	margin: 32px 0 0;
}

/* ---------- 窄屏 ---------- */
@media (max-width: 768px) {
	.formu-wrap {
		padding: 24px 0 44px;
	}
	.formu-h1 {
		font-size: 21px;
		padding-left: 12px;
		border-left-width: 4px;
	}
	.formu-cat-title {
		font-size: 19px;
		padding-left: 10px;
		border-left-width: 3px;
	}
	.formu-item {
		padding: 18px 16px 16px;
		border-radius: 12px;
	}
	.formu-name {
		font-size: 17px;
	}
	.formu-spec {
		grid-template-columns: 72px 1fr;
		font-size: 14px;
	}
	.formu-table {
		font-size: 13px;
	}
	.formu-table th,
	.formu-table td {
		padding: 8px 9px;
	}
	.formu-wrap .tool-cta,
	.pep-wrap .tool-cta {
		padding: 18px 16px;
		border-radius: 12px;
	}
}
@media (max-width: 480px) {
	/* 四列成分表在手机上必然溢出，改成横向可滚的容器 */
	.formu-table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

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

/* ---------- 选型问答（2026-11-13）----------
   形态与配方卡片一致（白底 / 16px 圆角 / 同档阴影），
   条与条之间用细线分隔，不做七张子卡片——那会把页面拉得太散。 */
.formu-faq {
	background: #fff;
	border: 1px solid #e8edf5;
	border-radius: 16px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, .03);
	padding: 24px 26px 10px;
	margin: 0 0 32px;
	scroll-margin-top: 84px;
}
.formu-faq-note {
	font-size: 13.5px;
	line-height: 1.8;
	color: #6b7a90;
	margin: 0 0 4px;
}
.formu-faq-item {
	padding: 16px 0 6px;
	margin-top: 14px;
	border-top: 1px solid #eef2f8;
}
.formu-faq-item:first-of-type {
	margin-top: 6px;
	border-top: 0;
}
.formu-faq-item h3 {
	font-size: 15.5px;
	line-height: 1.65;
	font-weight: 700;
	color: #0b1a33;
	margin: 0 0 8px;
	padding: 0;
	border: 0;
}
.formu-faq-item h3::before {
	content: "Q";
	display: inline-block;
	width: 18px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	font-size: 11px;
	font-weight: 700;
	color: #fff;
	background: #2208C9;
	border-radius: 5px;
	margin-right: 8px;
	vertical-align: 2px;
}
.formu-faq-item p {
	font-size: 14px;
	line-height: 1.9;
	color: #3a4a60;
	margin: 0 0 10px;
	padding-left: 26px;
}
.formu-faq-item p a {
	color: #2208C9;
	text-decoration: none;
	border-bottom: 1px solid rgba(34, 8, 201, .25);
}
.formu-faq-item p a:hover {
	border-bottom-color: #2208C9;
}
@media (max-width: 768px) {
	.formu-faq {
		padding: 18px 16px 8px;
		border-radius: 12px;
	}
	.formu-faq-item p {
		padding-left: 0;
	}
}