:root {
	--bg: #10141a;
	--panel: #171d26;
	--panel-2: #1e2632;
	--line: #2b3646;
	--text: #e6edf5;
	--muted: #8b9bb0;
	--accent: #4ea1ff;
	--good: #46c98b;
	--warn: #e8b23c;
	--bad: #e8664f;
	/*
	 * 内容宽度：宽屏下不让内容顶到屏幕边（原来 1920 屏左右只剩 24px padding，很挤）。
	 * `--content` 是**当前页面实际用的那一个**：默认两栏页（BP 助手）1600，
	 * 单栏页（列表 / 详情 / 预渲染的静态页）由下面 `body.patch-page` 覆盖成 1100。
	 *
	 * 关键是**导航条 / 工具条 / header / main / footer 全部引用同一个 `--content`** ——
	 * 否则会出现"main 居中了、导航条还铺满"或者单栏页用两栏宽度之类的错位。
	 */
	--content-wide: 1600px;
	--content-narrow: 1100px;
	--content: var(--content-wide);
}

/* 单栏页面（列表页、详情页、预渲染静态页）：内容窄一些，读起来更舒服 */
body.patch-page {
	--content: var(--content-narrow);
}

* {
	box-sizing: border-box;
}

/*
 * 深色主题的滚动条。默认那条浅灰色宽条在深底上非常扎眼（用户："搜索栏的滚动条有点丑"）。
 * 两条都写：`scrollbar-*` 给 Firefox，`::-webkit-scrollbar` 给 Chrome / Edge / Safari。
 * 用透明轨道 + 内缩的圆角滑块，滚动条看起来像"浮在内容上"而不是一条边框。
 */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--line) transparent;
}

::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

::-webkit-scrollbar-track {
	background: transparent;
}

::-webkit-scrollbar-thumb {
	background: var(--line);
	border-radius: 6px;
	/* 透明边框 + background-clip：滑块比轨道窄，四周留出呼吸感 */
	border: 2px solid transparent;
	background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
	background: #3d4a5c;
	background-clip: content-box;
}

::-webkit-scrollbar-corner {
	background: transparent;
}

/*
 * 始终给竖向滚动条留出位置。
 *
 * 不加的话：内容长的页面有滚动条、内容短的没有（比如"闪烁匕首"这种短页面），
 * 可用宽度差 10px —— 导航项会跟着横移几个像素（实测 175 vs 180）。
 * 既然导航要跨页面保持一致，这点抖动也一并消掉；顺带避免翻页时整页内容左右跳。
 */
html {
	scrollbar-gutter: stable;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 15px/1.6 system-ui, -apple-system, 'Segoe UI', 'Microsoft YaHei', sans-serif;
}

header {
	/* 和 main 用同一个宽度上限并居中，否则宽屏下 header 会顶到边、和居中的内容错位 */
	max-width: var(--content);
	margin: 0 auto;
	padding: 20px 24px 8px;
}

h1 {
	margin: 0;
	font-size: 23px;
}

.muted {
	color: var(--muted);
}

.small {
	font-size: 13px;
}

header p {
	margin: 4px 0;
}

/* ---------------- 控制条 ---------------- */
.controls {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	/*
	 * `flex-start` 而不是 `flex-end`：原来各组**底部**对齐，而组高不同（分段那组多一行说明、
	 * 权重那组多一条滑杆），结果五个标签的顶部位置是参差的（实测 183/210/210/219/195）。
	 * 用户要的"设置成同一行"就是让标签顶端对齐。
	 */
	align-items: flex-start;
	/*
	 * 这条是吸顶条：背景和分隔线要**铺满整宽**，但里面的内容得跟 header/main 一样限宽居中
	 * （用户反馈"我的分段这一行没有跟着留白"—— 原来它左边界是 0，而 header/main 是 149）。
	 * 所以不用 max-width（那会把背景也缩窄），改用左右 padding 把内容推到同一条竖线上：
	 * 左边距 = max(24px, (100% - 1600px)/2 + 24px)，和 header 内容左边界（149+24）对齐。
	 */
	padding-left: max(24px, calc((100% - var(--content)) / 2 + 24px));
	padding-right: max(24px, calc((100% - var(--content)) / 2 + 24px));
	padding-top: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
	background: var(--panel);
	position: sticky;
	top: 0;
	z-index: 5;
}

/*
 * 分段名（"低分段 · 先锋 · 卫士 · 中军 · 统帅（没有对线数据）"）长短差别很大，
 * 而它是组内的 flex 子项 —— 不限宽就会按文字撑开，点"低"时把后面的"我打几号位"整组推走
 * （实测位移 +151px）。
 *
 * 这里必须用**固定宽度**而不是 `max-width`：中分段只有 15 字（139px）、没到上限，
 * 于是仍然会撑开 → 实测还有 61px 位移。固定 200px 后三种分段宽度完全一致，位移归零；
 * 文字本身允许换行，所以塞得下。
 */
#tier-note {
	width: 200px;
	white-space: normal;
	line-height: 1.35;
}

.group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.group.right {
	margin-left: auto;
}

/*
 * 分组内的"标题行"：标签 + 就地提示（如"该分段暂无对线数据"）。
 * 提示宽度**定死**：它只在低分段出现，若按内容自适应宽度，切分段时就会把后面各组推走
 * （这个位移坑在 `#tier-note` 上已经踩过一次）。
 */
.group-head {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

#tier-warn {
	display: inline-block;
	width: 132px;
	flex: 0 0 auto;
	color: var(--warn);
}

.group-label {
	font-size: 13px;
	color: var(--muted);
}

.buttons {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}

button {
	background: var(--panel-2);
	color: var(--text);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 5px 12px;
	cursor: pointer;
	font: inherit;
}

button:hover {
	border-color: var(--accent);
}

button.active {
	background: var(--accent);
	border-color: var(--accent);
	color: #06121f;
	font-weight: 600;
}

button.ghost {
	background: transparent;
}

/* ---------------- 布局 ---------------- */
/*
 * 双栏主区（左侧英雄栏 + 右侧盘面/候选）。
 *
 * `max-width` + `margin: auto`：之前在 1920 及更宽的屏上内容会**横向铺满**、左右只剩 24px padding，
 * 看着很挤（用户反馈"两侧没有留白"）。加上上限之后大屏自动居中留白，小屏（< 1600）不受影响、不浪费宽度。
 * 上限取 1600：1920 屏左右各留 ~160px，视觉上"内容成块"，再宽也不会把左右两栏拉得互不相干。
 */
main {
	display: grid;
	grid-template-columns: minmax(280px, 420px) 1fr;
	gap: 16px;
	max-width: var(--content);
	margin: 0 auto;
	padding: 16px 24px 40px;
	align-items: start;
}

@media (max-width: 900px) {
	main {
		grid-template-columns: 1fr;
	}
}

.pool-tools {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 10px;
}

input[type='search'] {
	width: 100%;
	padding: 8px 10px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 6px;
	color: var(--text);
	font: inherit;
}

input[type='search']:focus {
	outline: none;
	border-color: var(--accent);
}

.pool {
	display: grid;
	/*
	 * 一行几个由**滑块**决定（`--pool-cols`，4~10，记在本机）。
	 * 之前这里是按最小宽度自动算列数的，为了不截断长名字把下限提到 80px —— 结果图标明显偏大，
	 * 用户反馈"图标有点大"。改成显式列数后，大小完全交给用户。
	 */
	grid-template-columns: repeat(var(--pool-cols, 5), minmax(0, 1fr));
	gap: 6px;
	max-height: 62vh;
	overflow: auto;
	padding-right: 4px;
}

/*
 * 一行 8 个以上时每格只有 ~40px，中文名必然放不下 —— 那种宽度下**只显示头像**，
 * 名字留在 title 里（悬停可见），比挤成一排省略号好看。
 */
.pool.dense .hero span {
	display: none;
}

.pool.dense .hero {
	padding: 2px;
}

.hero {
	/*
	 * `position: relative` 是**必需的**，不是装饰：右下角那个主属性角标（`.hero-attr`）是绝对定位，
	 * 而它的所有祖先原本都是 static —— 结果 127 个角标全部相对**页面**定位、叠在右下角同一个点上
	 * （用户报的"最右侧三维和全才叠在一起"就是这个）。定位链上必须有一个 relative 兜住它。
	 */
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 3px;
	background: var(--panel);
	border: 1px solid transparent;
	border-radius: 6px;
	font-size: 12px;
	line-height: 1.2;
}

.hero img {
	width: 100%;
	border-radius: 4px;
	display: block;
}

.hero span {
	color: var(--muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
}

.hero:hover span {
	color: var(--text);
}

/* 英雄栏的"一行显示 N 个"滑块 */
.pool-size {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 2px;
}

.pool-size input[type='range'] {
	flex: 1;
	min-width: 90px;
	max-width: 200px;
}

.pool-size strong {
	color: var(--accent);
}

/* 工具条上的小按钮组（导出 / 导入 / 清空 等） */
.pool-actions {
	display: flex;
	gap: 6px;
}

.pool-actions button {
	font-size: 13px;
	padding: 3px 10px;
}

.badge {
	display: inline-block;
	margin-left: 6px;
	padding: 0 6px;
	border-radius: 999px;
	background: rgba(70, 201, 139, 0.15);
	color: var(--good);
	font-size: 12px;
}

/* 两个维度的读数：线上 / 整局分开摆，不合成一个数字 */
.dims {
	display: flex;
	gap: 8px;
	margin: 8px 0 2px;
}

.dim {
	font-size: 13px;
	color: var(--muted);
	background: var(--panel-2);
	border-radius: 6px;
	padding: 2px 8px;
}

.dim strong {
	font-size: 14px;
}

.dim.lane strong {
	color: var(--accent);
}

.dim.game strong {
	color: var(--text);
}

.weights {
	display: flex;
	align-items: center;
	gap: 8px;
}

.weights input[type='range'] {
	width: 160px;
}

.weights button {
	font-size: 13px;
	padding: 2px 8px;
}

/* ---------------- 我的对线应对 ---------------- */
.my-counters {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 10px 12px;
	margin-bottom: 10px;
}

.counter-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	padding: 6px 8px;
	margin: 0 -8px;
	border-radius: 6px;
	border-top: 1px solid var(--line);
	cursor: pointer;
}

.counter-row:first-of-type {
	border-top: none;
}

.counter-row:hover {
	background: var(--panel-2);
}

/* 与三块盘面同一套「当前写入目标」的视觉反馈 */
.counter-row.active {
	background: var(--panel-2);
	box-shadow: 0 0 0 1px var(--accent) inset;
}

/* 记对线应对时，英雄池顶部的横幅 */
.pool-banner {
	display: none;
	padding: 6px 10px;
	border-radius: 6px;
	background: rgba(78, 161, 255, 0.12);
	border: 1px solid var(--accent);
	color: var(--accent);
	font-size: 13px;
}

.pool-banner.show {
	display: block;
}

/* 已经记过这个对手的应对 */
.hero.countered {
	border-color: var(--accent);
}

.hero.countered span {
	color: var(--accent);
}

/* 导入按钮：把 file input 藏起来，外观与其它 ghost 按钮一致 */
.file-button {
	position: relative;
	display: inline-block;
	cursor: pointer;
	border-radius: 6px;
	padding: 5px 12px;
	font-size: 13px;
	color: var(--text);
	background: transparent;
	border: 1px solid var(--line);
	line-height: 1.6;
}

.file-button:hover {
	border-color: var(--accent);
}

.file-button input {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
	width: 100%;
}

.candidate .more,
.advice .more {
	align-self: flex-start;
	font-size: 13px;
}

.counter-foe {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: var(--muted);
	min-width: 120px;
}

.counter-foe img {
	width: 28px;
	border-radius: 4px;
}

.counter-chips {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
	align-items: center;
	flex: 1;
	min-width: 0;
}

/*
 * 紧凑形态：一条应对就是一个头像方块。
 * 实测正负用边框颜色表达（绿=实测占优、红=实测吃亏、灰=没有对线数据），
 * 具体数字放进 tooltip 与点开的详情里 —— 记十几条时"文字墙"比"头像墙"难看得多。
 */
.counter-chip {
	position: relative;
	padding: 0;
	border: 2px solid var(--line);
	border-radius: 6px;
	background: var(--panel-2);
	line-height: 0;
	cursor: pointer;
}

.counter-chip img {
	width: 34px;
	height: 45px;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

.counter-chip.ok {
	border-color: rgba(70, 201, 139, 0.75);
}

.counter-chip.bad {
	border-color: rgba(232, 102, 79, 0.85);
}

.counter-chip.flat {
	border-color: var(--line);
	opacity: 0.72;
}

.counter-chip:hover,
.counter-chip.selected {
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent);
	opacity: 1;
}

/* 多号位但含当前号位：一个小蓝点，不写数字（信息在 tooltip 与详情里） */
.chip-more {
	position: absolute;
	right: 2px;
	bottom: 2px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 1.5px var(--panel-2);
}

/* 当前号位用不上：整块压低饱和，配合橙色角标 */
.counter-chip.not-applicable img {
	filter: grayscale(0.35);
}

/* 详情里的号位标签：每个号位一个小 ×，点一下只摘掉这个号位 */
.pos-list {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}

.pos-tag {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	padding: 1px 2px 1px 6px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 12px;
	color: var(--muted);
}

.pos-tag.current {
	border-color: var(--accent);
	color: var(--accent);
}

.pos-x {
	padding: 0 4px;
	font-size: 13px;
	line-height: 1.2;
	background: transparent;
	border: none;
	color: var(--muted);
}

.pos-x:hover {
	color: var(--bad);
}
/*
 * 角标 = 警示灯，不是数据展示（用户定的三态）：
 *   只含当前号位 → 干净无标记
 *   含当前号位 + 还有别的 → 小蓝点（.chip-more）
 *   不含当前号位 → 橙色数字角标（这里），那才是需要一眼看到的情况
 */
.chip-pos {
	position: absolute;
	right: -5px;
	bottom: -5px;
	font-style: normal;
	font-size: 11px;
	line-height: 1;
	padding: 2px 4px;
	border-radius: 999px;
	background: var(--warn);
	color: #201703;
	font-weight: 700;
}

.counter-stat {
	margin-left: auto;
	font-size: 13px;
	color: var(--muted);
	white-space: nowrap;
}

/* 「记过但当前号位用不上」的行内提示 —— 隐藏可以，但不能悄悄隐藏 */
.counter-hidden {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.counter-hidden button {
	font-size: 12px;
	padding: 2px 8px;
}

/* 点开某一条后展开的文字详情 */
.counter-detail {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	margin: -2px 0 6px 8px;
	padding: 6px 10px;
	border-left: 3px solid var(--accent);
	background: var(--panel-2);
	border-radius: 0 6px 6px 0;
	font-size: 13px;
}

.counter-detail img {
	width: 28px;
	border-radius: 4px;
}

.counter-detail em {
	font-style: normal;
}

.counter-detail em.ok {
	color: var(--good);
}

.counter-detail em.bad {
	color: var(--bad);
}

.badge.recorded {
	background: rgba(78, 161, 255, 0.15);
	color: var(--accent);
}

/* ---------------- 阵容缺口 ---------------- */
.composition {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 10px 12px;
	margin-bottom: 10px;
}

.composition:empty {
	display: none;
}

.comp-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 14px;
	margin-bottom: 8px;
}

.counters-title {
	display: flex;
	align-items: center;
	gap: 4px;
}

button.collapse {
	padding: 0 6px;
	font-size: 12px;
	line-height: 1.5;
	color: var(--muted);
}

.comp-head .buttons.small button {
	font-size: 12px;
	padding: 2px 8px;
}

.comp-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
	gap: 6px;
}

.comp-cell {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 4px;
	padding: 4px 8px;
	border-radius: 6px;
	background: var(--panel-2);
	border: 1px solid transparent;
	font-size: 13px;
}

.comp-cell.done {
	border-color: rgba(70, 201, 139, 0.45);
}

.comp-cell.need .comp-value {
	color: var(--warn);
}

.comp-label {
	color: var(--muted);
}

.comp-value {
	font-weight: 700;
}

.comp-value em {
	font-style: normal;
	font-weight: 400;
	color: var(--muted);
	font-size: 12px;
}

.comp-warn {
	margin: 8px 0 0;
	font-size: 13px;
	color: var(--warn);
}

/* ---------------- 已选板 ---------------- */
.board {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

@media (max-width: 700px) {
	.board {
		grid-template-columns: 1fr;
	}
}

.lane {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 8px;
	cursor: pointer;
}

.lane.active {
	border-color: var(--accent);
	box-shadow: 0 0 0 1px var(--accent) inset;
}

.lane-head {
	display: flex;
	justify-content: space-between;
	font-size: 13px;
	color: var(--muted);
	margin-bottom: 6px;
}

.slots {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	min-height: 52px;
}

.slot {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 2px 6px 2px 2px;
	font-size: 13px;
	background: var(--panel-2);
}

.slot img {
	width: 26px;
	border-radius: 3px;
}

.empty {
	color: var(--muted);
	font-size: 13px;
}

/* 盲选机制说明：放在三块盘面**上方**当"卡片组说明"（贴着它要说明的卡片）。
   比放在盘面下面更合理 —— 那句话是给这三张卡片的操作指引，读者应当先看到规则再填。 */
.note {
	margin: 0 0 8px;
	padding: 8px 10px;
	background: #1b2230;
	border-left: 3px solid var(--warn);
	border-radius: 6px;
	font-size: 13px;
	color: #cbd6e4;
}

/* ---------------- 建议 ---------------- */
.advice {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.candidate {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 10px 12px;
}

.candidate-head {
	display: flex;
	align-items: center;
	gap: 8px;
}

.candidate-head img {
	width: 46px;
	border-radius: 4px;
}

.candidate-head strong {
	font-size: 17px;
}

.rank {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--panel-2);
	color: var(--muted);
	font-size: 13px;
	display: grid;
	place-items: center;
}

.score {
	margin-left: auto;
	font-size: 21px;
	font-weight: 700;
	color: var(--accent);
}

.reasons,
.risks {
	margin: 8px 0 0;
	padding-left: 18px;
	font-size: 13px;
}

.reasons li {
	color: #cbd6e4;
}

.risks li {
	color: var(--warn);
}

.candidate .actions {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 10px;
}

.candidate .actions button {
	font-size: 13px;
	padding: 3px 10px;
}

.hint {
	font-size: 13px;
	color: var(--muted);
	margin: 0 0 4px;
}

/* ---------------- 提示条 ---------------- */
.flash {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translate(-50%, 20px);
	background: var(--bad);
	color: #fff;
	padding: 8px 16px;
	border-radius: 8px;
	opacity: 0;
	transition: 0.2s;
	pointer-events: none;
}

.flash.show {
	opacity: 1;
	transform: translate(-50%, 0);
}

footer {
	/* 同 header：跟着 main 的宽度上限，宽屏下一起居中 */
	max-width: var(--content);
	margin: 0 auto;
	padding: 0 24px 32px;
	border-top: 1px solid var(--line);
}

/* ================================================================ 全站导航栏 */

/* 详情页标题：返回按钮就在标题左侧（比单独一行"← 回XX列表"干净，也不占一行高度） */
.page-title {
	display: flex;
	align-items: center;
	gap: 10px;
}

.back-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	border: 1px solid var(--line);
	background: var(--panel);
	color: var(--muted);
	text-decoration: none;
	font-size: 17px;
	line-height: 1;
	transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.back-btn:hover {
	color: var(--accent);
	border-color: var(--accent);
	background: var(--panel-2);
}

.site-nav {
	display: flex;
	align-items: center;
	gap: 6px;
	/*
	 * 导航条在**所有页面**都按同一个宽度排（`--content-wide`），刻意**不跟页面的内容宽度走**。
	 * 否则从 BP 页（内容 1600）切到列表页（内容 1100）时，导航项会整体横移 250px —— 用起来别扭。
	 * 导航是跨页面的固定参照物，位置一致才符合直觉（用户："导航栏保持一致符合使用直觉"）。
	 * 同理它也不用 `max-width`（那会连背景和分隔线一起缩窄），而是用内边距把内容推到同一条竖线上。
	 */
	padding-left: max(24px, calc((100% - var(--content-wide)) / 2 + 24px));
	padding-right: max(24px, calc((100% - var(--content-wide)) / 2 + 24px));
	padding-top: 8px;
	padding-bottom: 8px;
	background: #121826;
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 20;
	flex-wrap: wrap;
}

.site-nav-brand {
	font-size: 14px;
	font-weight: 700;
	color: var(--text);
	margin-right: 10px;
}

.site-nav a {
	padding: 4px 12px;
	border-radius: 999px;
	border: 1px solid transparent;
	color: var(--muted);
	text-decoration: none;
	font-size: 14px;
}

.site-nav a:hover {
	color: var(--text);
	background: var(--panel);
}

.site-nav a.active {
	color: var(--accent);
	background: var(--panel);
	border-color: var(--accent);
}

/* ================================================================ 版本改动页 */

/* 版本页是单栏内容，不套 BP 页的两栏栅格；内容居中，避免宽屏下右侧一大片空白 */
main.single-column {
	display: block;
	max-width: var(--content);
	margin: 0 auto;
	padding: 16px 24px 40px;
}


.patch-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.patch-group h3 {
	margin: 0 0 6px;
	font-size: 17px;
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.patch-row {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 8px 12px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--panel);
	color: var(--text);
	text-decoration: none;
	margin-bottom: 4px;
}

.patch-row:hover {
	border-color: var(--accent);
	background: var(--panel-2);
}

.patch-row .pv {
	font-weight: 700;
	min-width: 76px;
}

.patch-row .pd {
	color: var(--muted);
	min-width: 96px;
	font-size: 13px;
}

.patch-row .ps {
	color: var(--muted);
	font-size: 13px;
	flex: 1;
}

.patch-row.no-notes .pv::after {
	content: ' ↗';
	color: var(--muted);
}

.tag {
	font-size: 12px;
	padding: 0 6px;
	border-radius: 999px;
	border: 1px solid var(--line);
	color: var(--muted);
}

.tag.major {
	border-color: var(--accent);
	color: var(--accent);
}

.tag.site {
	border-color: var(--warn);
	color: var(--warn);
}

.tag.agh {
	margin-left: 6px;
	border-color: #b07be0;
	color: #b07be0;
}

/* ---------------- 版本详情 ---------------- */

.patch-detail h3 {
	margin: 22px 0 8px;
	font-size: 17px;
	border-bottom: 1px solid var(--line);
	padding-bottom: 6px;
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.patch-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
	border-bottom: 1px solid var(--line);
	padding-bottom: 8px;
}

.patch-head h2 {
	margin: 0;
	font-size: 23px;
}

.site-link {
	color: var(--accent);
	font-size: 14px;
}

.pblock {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 8px 12px;
	margin-bottom: 6px;
}

/*
 * 物品 / 中立物品 / 中立生物的改动块。
 *
 * 用 `auto-fill` + **上限宽度**（不是 `1fr`）：块数少的时候（比如某版中立生物只改了 1 项），
 * `1fr` 会把它拉成一条 1000px 的横条、右边一片空还很不好读；上限 380px 后块宽始终正常，
 * 空位留在右侧也不刺眼。
 */
.pcols {
	display: grid;
	/*
	 * 上限 340px：`auto-fill` 是**按上限**算列数的，3×340+间距 = 1032 ≤ 1052 才排得下 3 列；
	 * 设成 350 就变成 3×350+12 = 1062 > 1052，只能排 2 列（实测过，一眼能看出变稀了）。
	 */
	grid-template-columns: repeat(auto-fill, minmax(280px, 340px));
	gap: 6px;
	align-items: start;
	justify-content: start;
}

/* 物品 / 中立物品的条目名：跟着图标一起放大一点（用户要求"稍大一些"） */
.pblock h4 {
	margin: 0 0 6px;
	font-size: 16px;
	color: var(--accent);
	display: flex;
	align-items: center;
	gap: 8px;
}

.pblock.general h4 {
	color: var(--warn);
}

.pnote {
	display: flex;
	gap: 6px;
	font-size: 14px;
	line-height: 1.6;
	color: #cbd6e4;
}

/* 层级用缩进表达（官方给的是 indent_level 1-3） */
.pnote.lv2 {
	padding-left: 18px;
}

.pnote.lv3 {
	padding-left: 36px;
}

.pnote.lv1 > .dot {
	margin-top: 8px;
}

.pnote .dot {
	flex: 0 0 4px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--muted);
	opacity: 0.7;
}

.pnote.blank .dot {
	visibility: hidden;
}

.pnote .info {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	margin-top: 4px;
	border-radius: 50%;
	border: 1px solid var(--line);
	color: var(--muted);
	font-size: 11px;
	line-height: 13px;
	text-align: center;
	cursor: help;
}

.pgroup-label {
	margin: 6px 0 2px;
	font-size: 14px;
	color: var(--muted);
	/* 技能小标题前面也挂图标，用 flex 对齐比 vertical-align 稳 */
	display: flex;
	align-items: center;
	gap: 7px;
}

/*
 * 英雄列表：**多列网格**。
 * 之前是单列 flex，一块占满 1050px，而内容只有"头像 + 名字 + 属性图标"——右侧 900px 全空，
 * 一个版本上百个英雄就变成一条条空荡荡的长条。改成 auto-fill 网格后一行 3 个，留白就没有了。
 * `align-items: start` 保证展开某个英雄时只把那一格撑高，不会带高同一行的其它格。
 */
.hero-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 4px;
	align-items: start;
}

.hero-block {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 6px 12px;
}

/*
 * 展开的英雄**独占一整行**。
 *
 * 起因（用户提的）：改动多的英雄（比如树精卫士）展开后很高，而网格的行高由最高的格子决定，
 * 同一行另外两个就变成"半张空卡片"，改动越大越难看。
 * 让它展开时横跨所有列，就同时解决两件事：
 *   1. 长改动在窄格（348px）里本来就挤，现在有整行宽度；
 *   2. 同行不会再有高低不齐的格子（其它块顺次重排，像手风琴）。
 * 换行后的内容再限一下宽度（820px），免得一行文字拉得太长反而不好读。
 */
.hero-block[open] {
	grid-column: 1 / -1;
}

.hero-block[open] .pgroup-label,
.hero-block[open] .pnote,
.hero-block[open] .ability-notes {
	max-width: 820px;
}

.hero-block summary {
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 8px;
}

/*
 * 英雄名是链接（点它进详情），但**必须显式写样式** ——
 * 忘了写就会用浏览器默认的链接蓝（实测截图里就是蓝字浮着，一眼看出不对）。
 */
.hero-block .hero-link {
	color: var(--text);
	text-decoration: none;
}

.hero-block .hero-link:hover {
	color: var(--accent);
	text-decoration: underline;
}

/* 版本改动里的英雄：小头像 + 主属性图标（"涉及三维的改动一眼能认出来"） */
.hero-mini {
	width: 34px;
	/*
	 * 英雄立绘是 **142×188 的竖图**（不是正方形），要按真实比例给框 ——
	 * 用 34×34 会竖向压扁，头像看着又矮又胖。
	 */
	aspect-ratio: 142 / 188;
	height: auto;
	border-radius: 4px;
	border: 1px solid var(--line);
	/*
	 * 英雄立绘是**透明背景**的 PNG，直接摆在深色块上轮廓会和底融合，
	 * 看起来像名字压着头像。给一块底色，头像区域就清晰了。
	 */
	background: var(--panel-2);
}

.hero-block summary .hero-link {
	margin-left: 2px;
}

.attr-mini {
	width: 16px;
	height: 16px;
	opacity: 0.9;
}

/* 改动块/技能标题前的图标 */
.block-icon {
	/*
	 * 只定宽、高度按真实比例走：技能图标是 128×128 正方，而**物品图是 88×64 的横图** ——
	 * 写死 24×24 会把物品图压扁（和装备页那次是同一个错）。
	 */
	width: 30px;
	height: auto;
	border-radius: 4px;
	flex: 0 0 auto;
}

.hero-block[open] summary {
	color: var(--accent);
	margin-bottom: 4px;
}

/* ================================================================ 英雄详情页 */

.hero-detail h3 {
	margin: 24px 0 8px;
	font-size: 17px;
	border-bottom: 1px solid var(--line);
	padding-bottom: 6px;
}

.hero-head {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	border-bottom: 1px solid var(--line);
	padding-bottom: 12px;
}

.hero-portrait {
	width: 96px;
	border-radius: 8px;
	border: 1px solid var(--line);
}

.hero-title {
	flex: 1;
	min-width: 0;
}

.hero-title h2 {
	margin: 0 0 6px;
	font-size: 23px;
}

.hero-tags {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin: 0 0 6px;
}

/*
 * 生命 / 魔法：照游戏里的样式 —— 左边一条横条（绿=生命、蓝=魔法），数值压在条中间，回复值在条右侧。
 */
.vitals {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin-top: 8px;
	max-width: 420px;
}

.vital {
	display: flex;
	align-items: center;
	gap: 8px;
}

.vital-bar {
	flex: 1;
	height: 24px;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13.5px;
	font-weight: 700;
	color: #f2f6fb;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.vital.hp .vital-bar {
	background: linear-gradient(90deg, #2c6b33, #46b054);
}

.vital.mp .vital-bar {
	background: linear-gradient(90deg, #1f3f7d, #3f74d6);
}

.vital-regen {
	flex: 0 0 auto;
	min-width: 62px;
	font-size: 13px;
	color: var(--good);
}

.vital.mp .vital-regen {
	color: #6fa8ff;
}

.hero-neighbors {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
	text-align: right;
	white-space: nowrap;
}

/*
 * 属性区：**4 列 × 3 行，按列读**（用户定的布局）
 *   力量/敏捷/智力 │ 攻击力/攻击间隔/攻击距离 │ 护甲/魔抗/弹道速度 │ 移动速度/转身速度/视野范围
 * DOM 是列优先顺序，所以用 `grid-auto-flow: column` + 3 行。
 */
.stat-grid {
	display: grid;
	grid-template-rows: repeat(3, auto);
	grid-auto-flow: column;
	grid-auto-columns: minmax(150px, 1fr);
	gap: 6px;
}

/* 窄屏放不下 4 列，回退成按行自适应 */
@media (max-width: 1100px) {
	.stat-grid {
		grid-template-rows: none;
		grid-auto-flow: row;
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}
}

/* 空占位格：近战英雄没有"弹道速度"，但格子要占住（否则列优先排列会整体错位） */
.stat.empty {
	visibility: hidden;
}

/* 属性小图标（官方 herostatic/stats/icon_*.png，构建期自托管） */
.stat-icon {
	width: 15px;
	height: 15px;
	vertical-align: -3px;
	margin-right: 5px;
	opacity: 0.9;
}

/* 属性筛选按钮里的三维图标 */
.buttons .attr-mini {
	width: 14px;
	height: 14px;
	vertical-align: -2px;
	margin-right: 4px;
}

/* 英雄卡右下角的主属性角标 */
.hero-attr {
	position: absolute;
	right: 3px;
	bottom: 3px;
	width: 16px;
	height: 16px;
	border-radius: 3px;
	line-height: 0;
	opacity: 0.9;
}

.hero-attr img {
	width: 16px;
	height: 16px;
}

/* 候选卡里跟在英雄名后面的属性图标 */
.attr-mini.inline {
	width: 14px;
	height: 14px;
	margin-left: 5px;
	vertical-align: -2px;
}

.stat {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 5px 10px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 6px;
	font-size: 14px;
}

.stat.growth {
	border-left-width: 3px;
}

.stat-label {
	color: var(--muted);
}

.stat-value {
	color: var(--text);
	font-weight: 600;
}

.stat-value em {
	font-weight: 400;
	font-style: normal;
}

/*
 * 技能区：**左边技能卡 + 右边侧栏**（用户选的方案 2：把魔晶/神杖升级和天赋放到右侧）。
 * 技能卡里因此只留描述/数值/注记，短了一截；右侧栏也不再空着。
 */
.skills-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 330px;
	gap: 14px;
	align-items: start;
}

@media (max-width: 1180px) {
	.skills-layout {
		grid-template-columns: 1fr;
	}
}

.abilities {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.skills-side {
	display: flex;
	flex-direction: column;
	gap: 10px;
	position: sticky;
	top: 10px;
}

.side-block {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 10px 12px;
}

.side-block h4 {
	margin: 0 0 8px;
	font-size: 14px;
	color: var(--accent);
}

.upgrade-group + .upgrade-group {
	margin-top: 10px;
}

.upgrade-group-title {
	font-size: 13px;
	color: var(--muted);
	margin-bottom: 4px;
}

.upgrade-item {
	font-size: 13.5px;
	line-height: 1.7;
	color: #cbd6e4;
	margin-bottom: 6px;
}

.upgrade-item strong {
	color: var(--text);
	margin-right: 4px;
}

.ability {
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 8px;
	padding: 10px 12px;
}

.ability-head {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

/* 技能图标那一栏：图标下面挂"魔晶升级 / 神杖升级"的标记 */
.ability-icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
	width: 48px;
}

.ability-icon img {
	width: 48px;
	height: 48px;
	border-radius: 6px;
	border: 1px solid var(--line);
}

.icon-placeholder {
	width: 48px;
	height: 48px;
	border-radius: 6px;
	border: 1px dashed var(--line);
	background: var(--panel-2);
}

.icon-badge {
	font-size: 11px;
	line-height: 1.4;
	padding: 0 4px;
	border-radius: 3px;
	border: 1px solid var(--line);
	white-space: nowrap;
}

.icon-badge.shard {
	border-color: #57c7c7;
	color: #57c7c7;
}

.icon-badge.agh {
	border-color: #b07be0;
	color: #b07be0;
}

.ability-head h4 {
	margin: 0 0 4px;
	font-size: 16px;
}

.ability-desc {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: #cbd6e4;
}

.tags {
	display: inline-flex;
	gap: 4px;
	vertical-align: middle;
}

.tag.innate {
	border-color: #7aa2f7;
	color: #7aa2f7;
}

.tag.ult {
	border-color: var(--warn);
	color: var(--warn);
}

.tag.shard {
	border-color: #57c7c7;
	color: #57c7c7;
}

/* 数值表：官方给的中文标签 + 各等级数值 */
.ability-values {
	margin: 8px 0 0;
	border-top: 1px dashed var(--line);
	padding-top: 6px;
}

.value-row {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	font-size: 13.5px;
	line-height: 1.7;
}

.value-label {
	color: var(--muted);
}

.value-nums {
	color: var(--text);
}

.ability-values em.scepter,
.ability-values em.shard {
	font-style: normal;
	margin-left: 6px;
	font-size: 12px;
	padding: 0 5px;
	border-radius: 999px;
	border: 1px solid var(--line);
}

.ability-values em.scepter {
	border-color: #b07be0;
	color: #b07be0;
}

.ability-values em.shard {
	border-color: #57c7c7;
	color: #57c7c7;
}

.ability-meta {
	margin: 6px 0 0;
}

.ability-extra {
	margin: 6px 0 0;
	font-size: 13.5px;
	color: #cbd6e4;
	line-height: 1.6;
}

/* "魔晶升级 / 神杖升级" 的块标题（用户要的写法），后面跟"魔晶 / 神杖"样式的标签 */
.upgrade-title {
	display: inline-block;
	margin-right: 6px;
	padding: 0 6px;
	border-radius: 4px;
	font-size: 12.5px;
	background: var(--panel-2);
	border: 1px solid var(--line);
}

.upgrade-title.shard {
	border-color: #57c7c7;
	color: #57c7c7;
}

.upgrade-title.agh {
	border-color: #b07be0;
	color: #b07be0;
}

.ability-notes {
	margin: 6px 0 0;
	padding-left: 18px;
	font-size: 13.5px;
	color: var(--muted);
	line-height: 1.7;
}

.talents {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* 天赋：照游戏里的布局 —— 左边天赋、中间等级（不写"级"）、右边天赋 */
.talent-row {
	display: flex;
	align-items: center;
	gap: 10px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 6px;
	padding: 6px 10px;
	font-size: 14px;
}

.talent-level {
	flex: 0 0 40px;
	text-align: center;
	color: var(--warn);
	font-size: 14px;
	font-weight: 700;
}

.talent {
	flex: 1;
	min-width: 0;
}

.talent:last-child {
	text-align: right;
}

/*
 * 侧栏里的天赋：宽度只有 330px，横排（左天赋│等级│右天赋）会挤成一团，
 * 改成"等级在左跨两行、两个天赋在右上下排" —— 仍然是游戏里的 25/20/15/10 层级。
 *
 * 注意：DOM 顺序是 `[天赋][等级][天赋]`，所以必须**显式指定格子**，
 * 靠自动放置会把第一个天赋塞进 30px 那一列，文字会被压成竖排（第一版就是这么坏的）。
 */
.skills-side .talent-row {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr);
	gap: 3px 8px;
	padding: 6px 8px;
}

.skills-side .talent-level {
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: center;
	text-align: left;
	flex: none;
}

.skills-side .talent:first-child {
	grid-column: 2;
	grid-row: 1;
}

.skills-side .talent:last-child {
	grid-column: 2;
	grid-row: 2;
	text-align: left;
}

.skills-side .talent {
	font-size: 13.5px;
	min-width: 0;
}

.hero-bio {
	font-size: 14.5px;
	line-height: 1.8;
	color: #cbd6e4;
}

/* ---------------- 英雄页的「最新版本改动」栏 ---------------- */

.patch-history {
	background: var(--panel);
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 14px;
}

.patch-history p {
	margin: 0 0 6px;
}

.patch-history.current {
	border-left-color: var(--good);
}

.patch-history .pnote {
	font-size: 14px;
}

.history-toggle summary {
	cursor: pointer;
	color: var(--muted);
	font-size: 13.5px;
}

.history-toggle[open] summary {
	margin-bottom: 6px;
}

.stat-label img.attr-mini {
	width: 14px;
	height: 14px;
	vertical-align: -2px;
	margin-right: 2px;
}

/* ---------------- 全部英雄列表 ---------------- */

/*
 * 英雄列表：列宽下限 264px —— 这个数是算出来的，不是随手写的：
 * 1052px 的内容区里，`auto-fill` 按下限算列数，(1052+6)/(230+6) = 4.48 会排 **4 列**（每列仅 259px），
 * 而"头像 40 + 中文名（最长"食人魔魔法师" 90px）+ 属性图标 16 + 间距 24 ≈ 170px，只剩 89px 给英文名" ——
 * 实测 55 个英雄的中文名被压出省略号。下限提到 264px 后只排 3 列（每列 ~347px），中文名才放得下。
 */
.hero-index {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
	gap: 6px;
}

.hero-index-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 10px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 8px;
	color: var(--text);
	text-decoration: none;
}

.hero-index-row:hover {
	border-color: var(--accent);
	background: var(--panel-2);
}

.hero-index-row .hv-portrait {
	width: 40px;
	border-radius: 4px;
	flex: 0 0 auto;
}

/* 中文名固定宽度（**绝不压缩**）；英文名贴着右侧，按单词分行（最多两行） */
.hero-index-row .hv-name {
	flex: 0 0 auto;
	/* `flex: 0 0 auto` 在空间不足时仍可能被压，加 max-content 才真的压不动 */
	min-width: max-content;
	white-space: nowrap;
}

.hero-index-row .hv-en {
	flex: 1 1 auto;
	min-width: 0;
	margin-left: auto;
	text-align: right;
	font-size: 13px;
	color: var(--muted);
	line-height: 1.25;
}

.hero-index-row .hv-en-line {
	display: block;
	overflow-wrap: anywhere;
}

.hero-index-row .attr-mini {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	opacity: 0.9;
}

.hero-index-row .hv-name {
	flex: 1;
	min-width: 0;
}

/* ================================================================ 装备页 */

.item-tools {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	margin-bottom: 14px;
}

.item-tools input {
	flex: 1;
	min-width: 240px;
	padding: 7px 10px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 6px;
	color: var(--text);
}

.item-group {
	margin-bottom: 18px;
}

.item-group h3 {
	margin: 0 0 8px;
	font-size: 16px;
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.item-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
	gap: 6px;
}

.item-card {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 8px;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 8px;
	color: var(--text);
	text-decoration: none;
	font-size: 14px;
}

.item-card:hover {
	border-color: var(--accent);
	background: var(--panel-2);
}

/*
 * 装备图标：官方物品图是 **88×64 的横图**（不是正方形），所以不能用 34×34 ——
 * 那样会横向压扁（用户一眼就看出来了）。用 aspect-ratio 声明真实比例，宽度定死、高度自己算。
 */
.item-card img {
	width: 34px;
	aspect-ratio: 88 / 64;
	height: auto;
	flex: 0 0 auto;
}

.item-no-img {
	width: 34px;
	aspect-ratio: 88 / 64;
	border-radius: 4px;
	background: var(--panel-2);
	border: 1px solid var(--line);
}

.item-card .item-name {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.item-card .item-cost {
	font-style: normal;
	font-size: 12.5px;
	color: var(--warn);
	white-space: nowrap;
}

.item-card.compact {
	font-size: 13px;
}

.item-card.compact img,
.item-card.compact .item-no-img {
	width: 28px;
}

.item-head {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	border-bottom: 1px solid var(--line);
	padding-bottom: 12px;
}

.item-portrait {
	width: 96px;
	aspect-ratio: 88 / 64; /* 官方物品图是横图，别用正方形框 */
	height: auto;
}

.item-title h2 {
	margin: 0 0 6px;
	font-size: 23px;
}

/* 装备属性：在图片右侧、名字下方；列宽固定，避免长属性名把整行拉长 */
.item-attrib {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 200px));
	gap: 4px;
	margin-top: 8px;
	max-width: 440px;
}

.item-attrib .stat {
	padding: 4px 8px;
	font-size: 13.5px;
}

.item-desc,
.item-lore {
	font-size: 14.5px;
	line-height: 1.8;
	color: #cbd6e4;
	margin: 0;
}

.item-desc b {
	color: var(--warn);
}

.item-notes {
	font-size: 13.5px;
	line-height: 1.7;
	margin: 8px 0 0;
}

/* 合成树：材料往下逐层展开 */
.recipe-total {
	font-size: 13.5px;
	color: var(--muted);
	margin-bottom: 6px;
}

.recipe-children {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin: 4px 0 4px 14px;
	padding-left: 10px;
	border-left: 1px dashed var(--line);
}

.recipe-branch {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.recipe-children .item-card {
	max-width: 260px;
}