/**
 * 合集前台：正文栏与工具卡同宽（卡 = max-w-3xl = 48rem）
 * + 引用卡下半截折叠（优缺点/截图）；评分常显清晰，点分数同样可展开
 * 整页 .mytb-coll-body + 悬浮面板共用，不依赖主题 rebuild。
 */
.mytb-coll-body .entry-content {
	max-width: 48rem;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/*
 * 合集 / 知识库章节正文垂直节奏（2026-08-13）
 * 只覆盖这两处，文章页主题 .entry-content 默认值不动。
 * 知识库阅读页也会 enqueue 本文件（mytheme_kb_is_context）。
 *
 * 正文 16 / 行高 28（长文阅读档）；全站 body token 仍是 16/1.5。
 * 段距 20 / 段→列表 16 / 列表项 8 /
 * 上块→H2 36、H2→首段 12 / 上块→H3 28、H3→首段 12 /
 * 列表左缩进 24（圆点 + 4px 再接正文）
 */
:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) {
	font-size: 16px;
	line-height: 28px;
}

/*
 * 正文超链接：蓝字，默认不带下划线（2026-08-18 用户改拍板：现在正文里有手动「下划线」
 * 按钮了，链接自己不用再强制常显下划线，需要强调再手动加）。
 * 只覆盖合集 / 知识库正文；文章页 .entry-content a（红字）不动。
 * 蓝色沿用日报阅读器已在用的 #2563eb / hover #1d4ed8，全站一套蓝。
 * :not(...) 排除按钮态链接与包着截图/视频的整块链接（如 B 站卡）。
 * 选择器 (0,2,1) 压过主题 .entry-content a 的 (0,1,1)。
 */
:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content)
	a:not(.wp-block-button__link):not([class*='btn-']):not(.mytb-screenshot-frame):not(.mytb-bilibili-external):not(.mytheme-kb-file-card) {
	color: #2563eb;
	text-decoration: none;
}

:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content)
	a:not(.wp-block-button__link):not([class*='btn-']):not(.mytb-screenshot-frame):not(.mytb-bilibili-external):not(.mytheme-kb-file-card):hover {
	color: #1d4ed8;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
	text-decoration-skip-ink: auto;
}

:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content)
	a:not(.wp-block-button__link):not([class*='btn-']):not(.mytb-screenshot-frame):not(.mytb-bilibili-external):not(.mytheme-kb-file-card):focus-visible {
	outline: 2px solid #111;
	outline-offset: 2px;
	border-radius: 2px;
}

/*
 * Markdown/HTML <u> 默认点线（2026-08-24）。
 * 实线只认 .mytb-u--solid（编辑器里手动选）；点距变量与主题 main.css 保持一致。
 * 写在这份文件里：合集/知识库不依赖主题 rebuild 就能立刻生效。
 */
.entry-content u:not(.mytb-u--solid) {
	--mytb-u-dot: 2px;
	--mytb-u-gap: 4px;
	text-decoration: none;
	background-image: linear-gradient(
		to right,
		#e03030 0 var(--mytb-u-dot),
		transparent var(--mytb-u-dot) calc(var(--mytb-u-dot) + var(--mytb-u-gap))
	);
	background-repeat: repeat-x;
	background-size: calc(var(--mytb-u-dot) + var(--mytb-u-gap)) var(--mytb-u-dot);
	background-position: 0 100%;
	padding-bottom: 1px;
}

/*
 * 合集面板右侧大纲（PostPanelToc 默认 text-subhead 15）。
 * 用 :has 锁合集面板，避免文章面板大纲跟着变。
 */
.grid:has(.mytb-coll-body) aside .post-panel-toc-scroll a {
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
}

:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) p {
	margin-bottom: 20px;
}

:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) p:has(+ ul),
:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) p:has(+ ol) {
	margin-bottom: 16px;
}

:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) ul,
:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) ol {
	margin-top: 0;
	margin-bottom: 20px;
}

:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) li {
	margin-bottom: 8px;
}

:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) li:last-child {
	margin-bottom: 0;
}

/*
 * 阅读档标题（2026-08-26）：H1 28/600/36 · H2 24/600/32 · H3 20/600/28。
 * H3 20px 是阅读档例外，不上全站 24 token。负字距仍随字号略收。
 * 间距仍是上远下近（H2 36/12、H3 28/12）。
 */
.mytb-coll-body > header h1,
.mytheme-kb-content-header h1 {
	font-size: 28px;
	font-weight: 600;
	line-height: 36px;
	letter-spacing: -0.02em;
}

:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) h2 {
	font-size: 24px;
	font-weight: 600;
	line-height: 32px;
	letter-spacing: -0.02em;
	margin-top: 36px;
	margin-bottom: 12px;
}

:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) h3 {
	/* WHY 20px：用户 2026-08-26 定的阅读档 H3，不是全站 page 24 */
	font-size: 20px;
	font-weight: 600;
	line-height: 28px;
	letter-spacing: -0.01em;
	margin-top: 28px;
	margin-bottom: 12px;
}

/*
 * H2 左侧红条 / H3 左侧红点（主色 #e03030）。
 * 只合集 + 知识库正文；标记挂在字左边的 gutter，标题字仍跟正文齐平。
 */
:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) h2,
:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) h3 {
	position: relative;
	padding-left: 14px;
	margin-left: -14px;
}

:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) h2::before,
:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) h3::before {
	content: '';
	position: absolute;
	left: 0;
	background: #e03030;
}

:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) h2::before {
	top: 0.12em;
	width: 4px;
	height: 0.92em;
	border-radius: 1px;
}

:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) h3::before {
	top: calc((1.4em - 6px) / 2);
	width: 6px;
	height: 6px;
	border-radius: 50%;
}

/* 段首标题：页标题/卡片已隔开，不再叠 36/28 */
:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) h2:first-child,
:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) h3:first-child {
	margin-top: 0;
}

:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) ul > li,
:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) ol > li {
	padding-left: 24px;
}

:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) ul > li::before {
	left: 14px;
	width: 6px;
	height: 6px;
}

:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) strong,
:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) b {
	font-weight: 600;
}

:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) .wp-block-spacer {
	height: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
}

/* 正文↔卡片 20px（与段距同档）；有 segment-gap 时以空行为准，不再叠。 */
.mytb-coll-body .entry-content:has(+ .mytb-coll-items):not(:has(> .mytb-coll-segment-gap:last-child)) > :last-child {
	margin-bottom: 20px;
}

.mytb-coll-body .mytb-coll-items + .entry-content:not(:has(> .mytb-coll-segment-gap:first-child)) {
	margin-top: 20px;
}

.mytb-coll-body .mytb-coll-items + .entry-content:has(> h2:first-child) {
	margin-top: 36px;
}

.mytb-coll-body .mytb-coll-items + .entry-content:has(> h3:first-child) {
	margin-top: 28px;
}

/*
 * 合集整页（刷新打开）：去掉正文白框，跟知识库阅读页一样平铺。
 * 面板态仍用 .card，这里只锁 body.single-tool_collection。
 */
body.single-tool_collection .mytb-coll-page-body {
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

.mytb-coll-body .mytb-coll-items {
	max-width: 48rem;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* 合集「回车空行」占位：禁止被 flex/折叠吃掉高度 */
.mytb-coll-body .mytb-coll-segment-gap {
	display: block;
	width: 100%;
	flex-shrink: 0;
	pointer-events: none;
}

/*
 * 视觉隐藏、仅保留给屏幕阅读器（WP 标准写法）。
 * WHY 补这条：part-tool-card.php 里「展开详情」文案用了这个 class 名，
 * 以为跟 wp-admin 一样天生隐藏——但那是后台样式，前台从没加载过，
 * 结果这段文字在卡片折叠按钮上一直明晃晃露着（2026-08-06 用户反馈截图发现）。
 */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* —— 合集引用卡折叠（PHP 整页态原生 details） ——
 * WHY 收起时禁止 display:flex：flex 会破坏 details 原生隐藏，
 * 导致未 open 时优缺点仍露出、分数却一直糊（2026-07-20）。
 */
.mytb-card-fold {
	display: block;
}

.mytb-card-fold[open] {
	display: flex;
	flex-direction: column;
}

.mytb-card-fold[open] > .mytb-card-fold__body {
	order: 1;
}

.mytb-card-fold[open] > .mytb-card-fold__toggle {
	order: 2;
}

.mytb-card-fold > .mytb-card-fold__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.625rem 0;
	cursor: pointer;
	list-style: none;
}

.mytb-card-fold > .mytb-card-fold__toggle::-webkit-details-marker,
.mytb-card-fold > .mytb-card-fold__toggle::marker {
	display: none;
	content: '';
}

/* 红底圆 + 白三角（对齐官网下载按钮 primary-500 #E03030） */
.mytb-card-fold__chevron {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 9999px;
	background: #e03030;
	color: #fff;
	transition: transform 0.2s ease;
}

.mytb-card-fold__chevron::after {
	content: '';
	display: block;
	width: 8px;
	height: 8px;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
	margin-top: -3px;
}

/*
 * 旋转优先跟 .is-open（JS 在点击那一刻同步，见 collection-front.js
 * syncFoldState）：收起动效播放期间 details.open 仍是 true（内容要留到播完
 * 再真的隐藏），但箭头得立刻转回去，不然像点了没反应。
 * 同时保留 [open] 兜底——JS 未执行（禁用/异常）时原生瞬间展开仍有正确朝向。
 */
.mytb-card-fold[open] > .mytb-card-fold__toggle .mytb-card-fold__chevron,
.mytb-card-fold.is-open > .mytb-card-fold__toggle .mytb-card-fold__chevron {
	transform: rotate(180deg);
}

.mytb-card-fold[open] > .mytb-card-fold__toggle .mytb-card-fold__chevron::after,
.mytb-card-fold.is-open > .mytb-card-fold__toggle .mytb-card-fold__chevron::after {
	margin-top: 3px;
}

/* 评分触发：分数常显清晰（2026-08-05 起不再模糊），点分数仍可展开/收起折叠
 * WHY flex-end：详情条带三维条时环+条贴卡右缘，与左侧 logo 对称（居中会让环比条更靠内，右白边显大） */
.mytb-card-fold-score {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	flex-shrink: 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
}

.mytb-card-fold-score:focus-visible {
	outline: 2px solid rgba(224, 48, 48, 0.4);
	outline-offset: 2px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.mytb-card-fold__chevron {
		transition: none;
	}
}

/*
 * 紧邻列表 / 标题 / 图片的「空段落」清零（JS 加 class，见 collection-front.js）。
 * 文字↔文字之间的空行仍保留；列表、标题、图片自己已有 margin，再叠空段会撑出两三行空白。
 */
.entry-content p.mytb-coll-blank-tight,
.mytb-coll-body p.mytb-coll-blank-tight {
	margin: 0;
	height: 0;
	min-height: 0;
	line-height: 0;
	font-size: 0;
	overflow: hidden;
}

/*
 * 从 Gutenberg 文章搬运/粘贴进来的正文常带 <figure class="wp-block-image">，
 * 站内没有加载对应的区块库 CSS，figure 会退回浏览器默认样式（margin: 1em 40px），
 * 左右多出 40px 缩进、看起来图片没居中；这里按站内其它插图统一收成 1em 上下间距。
 */
/*
 * 图上下 30px（2026-08-26）；表仍跟段距 20px。
 * 选择器含知识库无嵌入章节（单层 .mytheme-kb-entry-content）。
 * 图里的 img 不再吃主题 my-4，避免 figure 30 + img 16 再叠一截。
 */
:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) figure,
:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) .wp-block-image,
:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) .mytb-content-img-wrap {
	margin: 30px auto;
}

:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) table {
	margin: 20px auto;
}

:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) img {
	box-shadow: 0 1px 2px rgba(17, 17, 17, 0.10), 0 3px 8px rgba(17, 17, 17, 0.08);
}

:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) img.emoji,
:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) img.wp-smiley,
:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) .mytb-content-img-wrap--long img {
	box-shadow: none;
}

:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) .wp-block-image img,
:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) figure img,
:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) .mytb-content-img-wrap .mytb-content-img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

/*
 * 图片底部解说：白字叠在图底，黑渐变跟着文字长高。
 * 字号 caption 14 / 字重 medium 500。解说节点在 wrap / 图组 host 里，不进 <a>。
 */
:is(.mytb-coll-body, .mytheme-kb-entry-content) .mytb-content-img-wrap--captioned,
:is(.mytb-coll-body, .mytheme-kb-entry-content) .mytb-content-img-wrap:has(.mytb-content-img-caption),
:is(.mytb-coll-body, .mytheme-kb-entry-content) .mytb-img-cap-host {
	position: relative;
	overflow: hidden;
}

:is(.mytb-coll-body, .mytheme-kb-entry-content) .mytb-content-img-wrap--captioned:not(.mytb-content-img-wrap--long),
:is(.mytb-coll-body, .mytheme-kb-entry-content) .mytb-content-img-wrap:has(.mytb-content-img-caption):not(.mytb-content-img-wrap--long) {
	border-radius: 8px;
}

:is(.mytb-coll-body, .mytheme-kb-entry-content) .mytb-content-img-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 40px 14px 12px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.42) 46%, rgba(0, 0, 0, 0.78) 100%);
	color: #ffffff;
	font-size: 14px; /* text-caption */
	font-weight: 500;
	line-height: 1.45;
	text-align: left;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	pointer-events: none;
}

/* —— 合集正文插图：单张占比 + 图组（前台升级为工具同款轮播） —— */
.mytb-coll-body .entry-content .mytb-content-img-wrap {
	display: block;
	margin: 30px auto;
	max-width: 100%;
}

.mytb-coll-body .entry-content .mytb-content-img-wrap:has(img.alignleft) {
	margin-left: 0;
	margin-right: auto;
}

.mytb-coll-body .entry-content .mytb-content-img-wrap:has(img.alignright) {
	margin-left: auto;
	margin-right: 0;
}

.mytb-coll-body .entry-content .mytb-content-img-wrap--w25 {
	width: 25%;
}

.mytb-coll-body .entry-content .mytb-content-img-wrap--w50 {
	width: 50%;
}

.mytb-coll-body .entry-content .mytb-content-img-wrap--w75 {
	width: 75%;
}

.mytb-coll-body .entry-content .mytb-content-img-wrap--w100 {
	width: 100%;
}

.mytb-coll-body .entry-content .mytb-content-img-wrap .mytb-content-img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
	cursor: zoom-in;
}

/*
 * 带链接的单张图：悬停（或手机点一下）中间出「放大 / 跳转」。
 * 长图 / 图组不走这套。没链接的图仍是点一下放大。
 */
:is(.mytb-coll-body, .mytheme-kb-entry-content) .mytb-content-img-wrap--linked,
:is(.mytb-coll-body, .mytheme-kb-entry-content) .mytb-content-img-link {
	position: relative;
	display: block;
}

:is(.mytb-coll-body, .mytheme-kb-entry-content) .mytb-content-img-wrap--linked > a,
:is(.mytb-coll-body, .mytheme-kb-entry-content) .mytb-content-img-link > a {
	display: block;
}

:is(.mytb-coll-body, .mytheme-kb-entry-content) .mytb-content-img-wrap--linked .mytb-content-img,
:is(.mytb-coll-body, .mytheme-kb-entry-content) .mytb-content-img-link .mytb-content-img {
	cursor: default;
}

:is(.mytb-coll-body, .mytheme-kb-entry-content) .mytb-img-link-actions {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 16px;
	background: rgba(17, 17, 17, 0.42);
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
	transition: opacity 160ms ease;
}

:is(.mytb-coll-body, .mytheme-kb-entry-content) .mytb-content-img-wrap--linked:hover .mytb-img-link-actions,
:is(.mytb-coll-body, .mytheme-kb-entry-content) .mytb-content-img-wrap--linked:focus-within .mytb-img-link-actions,
:is(.mytb-coll-body, .mytheme-kb-entry-content) .mytb-content-img-wrap--linked.is-actions-open .mytb-img-link-actions,
:is(.mytb-coll-body, .mytheme-kb-entry-content) .mytb-content-img-link:hover .mytb-img-link-actions,
:is(.mytb-coll-body, .mytheme-kb-entry-content) .mytb-content-img-link:focus-within .mytb-img-link-actions,
:is(.mytb-coll-body, .mytheme-kb-entry-content) .mytb-content-img-link.is-actions-open .mytb-img-link-actions {
	opacity: 1;
	pointer-events: auto;
}

:is(.mytb-coll-body, .mytheme-kb-entry-content) .mytb-img-link-actions__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background: #ffffff;
	color: #222222;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(17, 17, 17, 0.08);
}

:is(.mytb-coll-body, .mytheme-kb-entry-content) a.mytb-img-link-actions__btn {
	color: #222222;
	text-decoration: none;
}

:is(.mytb-coll-body, .mytheme-kb-entry-content) .mytb-img-link-actions__btn:hover {
	background: #f8f8f8;
}

:is(.mytb-coll-body, .mytheme-kb-entry-content) .mytb-img-link-actions__btn:focus-visible {
	outline: 2px solid #111111;
	outline-offset: 2px;
}

@media (max-width: 640px) {
	:is(.mytb-coll-body, .mytheme-kb-entry-content) .mytb-img-link-actions__btn {
		width: 44px;
		height: 44px;
		min-width: 44px;
		min-height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	:is(.mytb-coll-body, .mytheme-kb-entry-content) .mytb-img-link-actions {
		transition: none;
	}
}

/*
 * 长图：正文里框住裁切，框内不滚；点开才全屏纵向滚动。
 * 知识库章节共用同一 class（insert-ui 共享）。
 *
 * 2026-08-18 · 视觉加固：原来边框 #e5e5e5 + 纯文字提示，遇到截图本身背景就是
 * 浅色/白色时几乎看不出来是个独立卡片（用户反馈「不像个模块」）。
 * 改成：明显描边 + 卡片阴影（跟截图内容色调无关都看得出边界）+
 * 实底深色圆角提示条（不再是可能被截图内容吃掉的纯文字浮层）。
 */
:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) .mytb-content-img-wrap--long {
	position: relative;
	max-height: 420px;
	overflow: hidden;
	border: 1px solid #d8d8d8;
	border-radius: 10px;
	background: #fafafa;
	box-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 6px 16px rgba(17, 17, 17, 0.08);
	cursor: zoom-in;
}

:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) .mytb-content-img-wrap--long:hover {
	border-color: #bbbbbb;
}

:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) .mytb-content-img-wrap--long:focus-visible {
	outline: 2px solid #111;
	outline-offset: 2px;
}

:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) .mytb-content-img-wrap--long .mytb-content-img {
	pointer-events: none;
}

:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) .mytb-content-img-wrap--long::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 88px;
	background: linear-gradient(to top, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.55) 55%, transparent);
	pointer-events: none;
}

:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) .mytb-content-img-wrap--long::before {
	content: '⤢ 长图 · 点击查看全图';
	position: absolute;
	left: 50%;
	bottom: 14px;
	z-index: 1;
	transform: translateX(-50%);
	padding: 6px 14px;
	border-radius: 9999px;
	font-size: 13px;
	line-height: 1.4;
	font-weight: 500;
	color: #ffffff;
	background: rgba(17, 17, 17, 0.72);
	white-space: nowrap;
	pointer-events: none;
}

:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) .mytb-content-img-wrap--long-short::before,
:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) .mytb-content-img-wrap--long-short::after,
:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) .mytb-content-img-wrap--long.mytb-content-img-wrap--captioned::before,
:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) .mytb-content-img-wrap--long.mytb-content-img-wrap--captioned::after {
	content: none;
}

@media (max-width: 640px) {
	:is(.mytb-coll-body .entry-content, .entry-content.mytheme-kb-entry-content) .mytb-content-img-wrap--long {
		max-height: 320px;
	}
}

.mytb-long-image-viewer {
	position: fixed;
	inset: 0;
	z-index: 10050;
	display: flex;
	flex-direction: column;
	background: rgba(17, 17, 17, 0.72);
}

.mytb-long-image-viewer__scroller {
	flex: 1 1 auto;
	min-height: 0;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding: 64px 16px 40px;
}

.mytb-long-image-viewer__scroller img {
	display: block;
	width: min(56rem, 100%);
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: 8px;
	background: #fff;
}

.mytb-long-image-viewer__caption {
	flex: 0 0 auto;
	max-height: 40vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 16px 20px 20px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(17, 17, 17, 0.72) 28%, rgba(17, 17, 17, 0.88) 100%);
	color: #ffffff;
	font-size: 14px; /* text-caption */
	font-weight: 500;
	line-height: 1.45;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.mytb-long-image-viewer__close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 10;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 9999px;
	background: #fff;
	color: #666666;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.mytb-long-image-viewer__close:focus-visible {
	outline: 2px solid #111;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.mytb-long-image-viewer {
		background: rgba(17, 17, 17, 0.88);
	}
}

/*
 * 图组入库形态：.mytb-image-group > img
 * 前台由 tool-screenshots.js 升级成 .mytb-screenshots 轮播（左右切 + 圆点 + 灯箱）
 * 升级前兜底：只露第一张，避免并排误以为是终态
 */
.mytb-coll-body .entry-content .mytb-image-group {
	position: relative;
	margin: 1em 0;
	width: 100%;
}

.mytb-coll-body .entry-content .mytb-image-group > img {
	display: none;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
}

.mytb-coll-body .entry-content .mytb-image-group > img:first-child {
	display: block;
}

.mytb-coll-body .entry-content .mytb-screenshots,
.mytb-coll-body .entry-content .mytb-content-screenshots {
	margin: 1em 0;
}

.mytb-coll-body .entry-content .mytb-screenshots .mytb-screenshot-img {
	margin-top: 0;
	margin-bottom: 0;
}

@media (max-width: 640px) {
	.mytb-coll-body .entry-content .mytb-content-img-wrap--w25,
	.mytb-coll-body .entry-content .mytb-content-img-wrap--w50,
	.mytb-coll-body .entry-content .mytb-content-img-wrap--w75 {
		width: 100%;
	}
}

/*
 * 合集 / 知识库正文表格：圆角外框 + 浅灰表头 + 横竖都画线。
 * separate + spacing:0 才能让圆角落在整张表上；collapse 会把 radius 吃掉。
 */
.mytb-coll-body .entry-content table,
.entry-content.mytheme-kb-entry-content table {
	width: 100%;
	margin: 20px 0;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid #dedede;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	font-size: inherit;
	line-height: 1.5;
}

.mytb-coll-body .entry-content thead,
.entry-content.entry-content.mytheme-kb-entry-content thead,
.mytb-coll-body .entry-content th,
.entry-content.mytheme-kb-entry-content th {
	background: #f5f5f5;
}

.mytb-coll-body .entry-content th,
.entry-content.mytheme-kb-entry-content th,
.mytb-coll-body .entry-content td,
.entry-content.mytheme-kb-entry-content td {
	color: #222222;
	text-align: left;
	vertical-align: top;
	padding: 12px 16px;
	border-right: 1px solid #dedede;
	border-bottom: 1px solid #dedede;
}

.mytb-coll-body .entry-content th,
.entry-content.mytheme-kb-entry-content th {
	font-weight: 600;
}

.mytb-coll-body .entry-content td,
.entry-content.mytheme-kb-entry-content td {
	background: #fff;
	font-weight: 400;
}

.mytb-coll-body .entry-content th:last-child,
.entry-content.mytheme-kb-entry-content th:last-child,
.mytb-coll-body .entry-content td:last-child,
.entry-content.mytheme-kb-entry-content td:last-child {
	border-right: none;
}

.mytb-coll-body .entry-content tr:last-child th,
.entry-content.mytheme-kb-entry-content tr:last-child th,
.mytb-coll-body .entry-content tr:last-child td,
.entry-content.mytheme-kb-entry-content tr:last-child td {
	border-bottom: none;
}

/* 单元格里若套了 <p>，不要再吃正文段距 */
.mytb-coll-body .entry-content table p,
.entry-content.mytheme-kb-entry-content table p {
	margin: 0;
}

@media (max-width: 640px) {
	.mytb-coll-body .entry-content table,
	.entry-content.mytheme-kb-entry-content table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/*
 * 合集正文「插入视频」独占块（B 站）：与自定义插入迷你条同级，但占满一整块，
 * 视觉对齐工具详情的 B 站视频封面（mytb-bilibili-*），但独立命名——不挂进
 * .mytb-screenshots，避免被 tool-screenshots.js 的截图灯箱逻辑误接管点击。
 */
.mytb-coll-video-block {
	margin: 1.25rem auto;
	width: 100%;
}

/* 跟插图占比同一档：相对正文栏（max-w-3xl = 48rem）再收一截 */
.mytb-coll-video-block--w25 {
	width: 25%;
	max-width: 12rem;
}

.mytb-coll-video-block--w50 {
	width: 50%;
	max-width: 24rem;
}

.mytb-coll-video-block--w75 {
	width: 75%;
	max-width: 36rem;
}

@media (max-width: 640px) {
	.mytb-coll-video-block--w25,
	.mytb-coll-video-block--w50,
	.mytb-coll-video-block--w75 {
		width: 100%;
		max-width: none;
	}
}

.mytb-coll-video-frame {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 12px;
	overflow: hidden;
	background: #111;
	cursor: pointer;
	text-decoration: none;
	padding: 0;
	box-shadow: none;
}

/*
 * 本地视频按片源比例撑开，不要锁 16:9。
 * 锁了以后 4:3 / 窗口录屏会在左右（或上下）露出 #111 黑边。
 */
.mytb-coll-video-frame.mytb-coll-video-frame--local {
	display: block;
	aspect-ratio: auto;
	height: auto;
	background: transparent;
	cursor: default;
	overflow: hidden;
}

.mytb-coll-video-frame--local .mytb-coll-video-player {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 80vh;
	object-fit: contain;
	background: transparent;
	margin-inline: auto;
	vertical-align: middle;
	/* WHY: 父级 overflow 裁不掉播放器控制条，圆角要写在 video 自己身上，底下才圆 */
	border-radius: 12px;
	clip-path: inset(0 round 12px);
}

.mytb-coll-video-frame--local .mytb-coll-video-caption {
	display: none;
}

.mytb-coll-video-frame.is-playing {
	cursor: default;
	background: #000;
}

.mytb-coll-video-poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.mytb-coll-video-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(145deg, #1a1a1a 0%, #2c2c2c 100%);
}

.mytb-coll-video-play {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 9999px;
	background: rgba(0, 0, 0, 0.55);
	color: #fff;
	pointer-events: none;
	transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
}

/*
 * 封面底部标题：叠在图上，四档 ink 不够对比，用白字。
 * 字号 caption 14 / 字重 medium 500。无标题时 PHP/React 不输出此节点。
 */
.mytb-coll-video-caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	box-sizing: border-box;
	padding: 28px 12px 10px;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.78) 100%);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
	text-align: left;
}

.mytb-coll-video-frame:hover .mytb-coll-video-play,
.mytb-coll-video-frame:focus-visible .mytb-coll-video-play {
	transform: translate(-50%, -50%) scale(1.06);
	background: rgba(0, 0, 0, 0.7);
}

.mytb-coll-video-iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.mytb-coll-video-external {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	padding: 6px 10px;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid #ededed;
	color: #222;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.mytb-coll-video-external:hover,
.mytb-coll-video-external:focus-visible {
	background: #fff;
	color: #222;
}

@media (prefers-reduced-motion: reduce) {
	.mytb-coll-video-play {
		transition: none;
	}
}

/*
 * 自定义插入链接卡（整卡可点，无独立按钮）
 * 参考：圆角白卡 + 圆形 Logo + 标题/简介；整页 PHP 与面板 Vue 共用 class。
 */
.mytb-card-custom-mini {
	display: block;
	width: 100%;
	max-width: 48rem;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid #ededed;
	border-radius: 20px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.mytb-card-custom-mini:hover,
.mytb-card-custom-mini:focus-visible {
	border-color: #d4d4d4;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	outline: none;
}

.mytb-card-custom-mini:focus-visible {
	box-shadow: 0 0 0 2px #111, 0 8px 24px rgba(0, 0, 0, 0.08);
}

.mytb-card-custom-mini__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.125rem 1.25rem;
	min-width: 0;
}

.mytb-card-custom-mini__logo {
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 9999px;
	object-fit: cover;
	background: #f5f5f5;
	flex-shrink: 0;
	margin: 0 !important;
	display: block;
}

.mytb-card-custom-mini__logo--fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #f0f0f0;
	color: #999;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	object-fit: unset;
}

.mytb-card-custom-mini__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-width: 0;
	flex: 1;
}

.mytb-card-custom-mini__title {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	color: #222;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color 0.15s ease;
}

.mytb-card-custom-mini:hover .mytb-card-custom-mini__title,
.mytb-card-custom-mini:focus-visible .mytb-card-custom-mini__title {
	color: #e03030;
}

.mytb-card-custom-mini__intro {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.45;
	color: #666;
}

@media (prefers-reduced-motion: reduce) {
	.mytb-card-custom-mini,
	.mytb-card-custom-mini__title {
		transition: none;
	}
}

/*
 * 合集 / 知识库章节「多栏格子」：[mytb_grid]…[/mytb_grid] 视频 + 图混排（2~4 格）。
 * 整页 PHP（includes/collection/grid-card.php）与面板 React 共用同一套 class。
 * 块上下间距对齐本文件 20px 档（段距 / 视频块 / 插图同一档），格间距 12px。
 */
.mytb-coll-grid {
	display: grid;
	gap: 12px;
	margin: 20px 0;
}

/* WHY minmax(0,1fr)：默认 1fr = minmax(auto,1fr)，格子按内容最小宽度撑开，
 * 两列里标签一长就会把评分顶出白卡（第二格更常见）。0 下限才能均分、可收缩。 */
.mytb-coll-grid--cols2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mytb-coll-grid--cols3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mytb-coll-grid--cols4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mytb-coll-grid__cell {
	min-width: 0;
}

/* 格内视频：压掉独占块外壳的占比宽度与外边距，宽度由格子决定 */
.mytb-coll-grid__cell .mytb-coll-video-frame {
	width: 100%;
	margin: 0;
}

/*
 * WHY 不要 height:auto：frame 是 flex + aspect-ratio，封面又 loading=lazy。
 * auto 会让图在加载前高度为 0，浏览器以为不在视口里，封面永远不请求，只剩黑底播放钮。
 * 跟独占块一样用 100% 铺满 16:9 框。
 */
.mytb-coll-grid__cell .mytb-coll-video-poster {
	width: 100%;
	height: 100%;
	object-fit: cover;
	flex-shrink: 0;
	align-self: stretch;
}

/* 圆角对齐本文件现有图片卡（mytb-content-img-wrap--long 的 10px） */
.mytb-coll-grid__img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 10px;
}

/* 格内图复用单独图片 wrap：去掉段距，圆角裁切悬停层 */
.mytb-coll-grid__cell .mytb-content-img-wrap {
	display: block;
	width: 100%;
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
}

/* 手机端堆叠（用户拍板 767 一档，不跟文件内插图的 640 断点） */
@media (max-width: 767px) {
	.mytb-coll-grid {
		grid-template-columns: 1fr !important;
	}
}

/*
 * 工具/资源格子：卡片填满格，去掉合集正文 max-w-3xl；2 列收一点内边距。
 * 3 列简洁卡按钮可折行；手机仍走上面的 1 列堆叠。
 *
 * 两列评分卡：行宽不够并排两张像样的卡时自动改成一列（知识库中栏 / 窄面板
 * 视口仍 >767，旧的手机断点管不到）。评分默认在窄格藏起——主题 Tailwind
 * 的 .inline-flex 会后加载盖掉普通 display:none，必须 !important。
 */
.mytb-coll-grid--tools.mytb-coll-grid--cols2 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.mytb-coll-grid--tools.mytb-coll-grid--cols3 {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
}

.mytb-coll-grid--tools .mytb-coll-grid__cell {
	container-type: inline-size;
	container-name: mytb-tool-cell;
}

.mytb-coll-grid--tools .mytb-card-detail-wrap,
.mytb-coll-grid--tools .mytb-card-compact {
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	height: 100%;
	min-width: 0;
	overflow: hidden;
}

/* 三列简洁卡：卡身拉满格子，按钮贴底；简介无论 1/2 行都占两行高，避免「访问官网」参差 */
.mytb-coll-grid--tools .mytb-card-compact {
	display: flex;
	flex-direction: column;
}

.mytb-card-compact__pad {
	flex: 1 1 auto;
	min-height: 0;
}

.mytb-card-compact__tagline,
.mytb-card-compact__pad > .text-footnote {
	min-height: calc(1.45em * 2);
	min-height: 2lh;
}

.mytb-card-compact__actions {
	margin-top: auto;
}

.mytb-coll-grid--tools .mytb-card-detail__head,
.mytb-coll-grid--tools .mytb-card-detail,
.mytb-coll-grid--tools .mytb-card-detail__body {
	min-width: 0;
}

/* 评分还在时，标题/简介不能被挤成一字一行 */
.mytb-coll-grid--tools .mytb-card-detail__title,
.mytb-coll-grid--tools .mytb-card-detail__tagline {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	word-break: normal;
	overflow-wrap: normal;
}

.mytb-coll-grid--tools .mytb-tool-specs,
.mytb-coll-grid--tools .mytb-tool-specs__row,
.mytb-coll-grid--tools .mytb-tool-specs__chip--tags {
	min-width: 0;
	max-width: 100%;
}

.mytb-coll-grid--tools .mytb-tool-specs__row {
	flex-wrap: wrap;
}

.mytb-coll-grid--tools .mytb-tool-specs__chip--tags {
	display: flex;
	flex-wrap: wrap;
}

.mytb-coll-grid--tools .mytb-tool-specs__chip--tags > span {
	min-width: 0;
	flex-wrap: wrap;
	white-space: normal;
}

/* 单颗标签比格子还长时裁省略号，不把评分顶出去 */
.mytb-coll-grid--tools .mytb-tool-specs__chip--tags .whitespace-nowrap {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/*
 * 窄格藏评分。!important：盖过后加载的主题 .inline-flex。
 * .is-tight 由 collection-front.js 按实宽打上，container query 失效时仍能藏。
 */
.mytb-coll-grid--tools .mytb-coll-grid__cell.is-tight .mytb-score-ring,
.mytb-coll-grid--tools .mytb-coll-grid__cell.is-tight .mytb-card-fold-score,
.mytb-coll-grid--tools .mytb-coll-grid__cell.is-tight .mytb-card-detail + * {
	display: none !important;
}

@container mytb-tool-cell (max-width: 380px) {
	.mytb-score-ring,
	.mytb-card-fold-score,
	.mytb-card-detail + * {
		display: none !important;
	}
}

.mytb-coll-grid--tools .mytb-card-detail__pad,
.mytb-coll-grid--cols2 .mytb-card-detail-wrap > .flex {
	padding: 12px;
}

.mytb-coll-grid--cols3 .mytb-card-compact__actions .btn-tool-primary,
.mytb-coll-grid--cols3 .mytb-card-compact__actions .btn-tool-secondary {
	height: 28px;
	font-size: 13px;
	padding-left: 10px;
	padding-right: 10px;
}

.mytb-card-compact__logo {
	width: 48px;
	height: 48px;
	border-radius: 8px;
	object-fit: contain;
	background: #f9fafb;
	display: block;
}

.mytb-card-compact__logo--fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 600;
	color: #999;
	background: #f3f4f6;
}