/*!
 * AIZXS Lumen —— 主样式表
 * 设计语言：Apple 官方色板 + 大字号 + 大留白 + 弱阴影 + 玻璃拟态
 */

/* ================================================================
   1. 设计令牌
   ================================================================ */
:root {
	/* 文字层级（Apple Label Colors）
	   ink-3 / ink-4 大量用于 10–13px 辅助文字，必须满足 WCAG AA 4.5:1。
	   ink-4 原 #86868B 实测对 #FBFBFD 仅 3.50:1（不达标），已加深至 #5A5A5F（6.6:1）。 */
	--lm-ink: #1D1D1F;
	--lm-ink-2: #424245;
	--lm-ink-3: #6E6E73;
	--lm-ink-4: #5A5A5F;

	/* 背景层级（Apple System Backgrounds） */
	--lm-bg: #FBFBFD;
	--lm-surface: #FFFFFF;
	--lm-fill: #F5F5F7;
	--lm-fill-2: #EDEDF0;

	/* 描边 */
	--lm-border: #E5E5EA;
	--lm-border-strong: #D2D2D7;
	--lm-hairline: rgba(0, 0, 0, .07);

	/* 品牌与系统色（Apple System Colors）
	   --lm-blue-text = 主色的「可读文字版」，用于文字与链接（--lm-blue 留给
	   描边、填充、图标等非文字场景）。
	   默认主色 #0071E3 对白底实测 4.70:1、对页面底 #FBFBFD 4.54:1，本身已达标，
	   故这里的静态兜底值与 --lm-blue 相同；真正的价值在于站长自定义主色时：
	   若换成 #FF9500、#34C759 这类浅色，inc/enqueue.php 会按 WCAG 公式自动
	   加深到 4.5:1 再输出。此静态值必须与 PHP 端 lumen_contrast_text() 对
	   默认主色的计算结果一致，否则自定义器保存前后会出现色差。
	   注：落在「浅色主色底」上的文字（如 .cat-pill--learning 的蓝底）
	   需另行指定，见该文件后文。 */
	--lm-blue: #0071E3;
	--lm-blue-deep: #0058B0;
	--lm-blue-text: #0071E3;
	--lm-blue-ring: rgba(0, 113, 227, .16);
	--lm-blue-soft: rgba(0, 113, 227, .07);
	/* 主色作底色时按钮/徽标的前景色。默认主色 #0071E3 相对亮度 0.174 < 0.34 → 白字；
	   自定义高明度主色时由 inc/enqueue.php 的 lumen_on_color() 自动改为 #111111。 */
	--lm-on-blue: #ffffff;
	--lm-purple: #AF52DE;
	--lm-indigo: #5856D6;
	--lm-teal: #00C7BE;
	--lm-green: #34C759;
	--lm-orange: #FF9500;
	--lm-red: #FF3B30;
	--lm-pink: #FF2D55;

	/* 字号阶梯
	   中文最小可读下限为 12px，全站散落的 10px / 11px 硬编码统一收敛到 --lm-fs-2xs。 */
	--lm-fs-display: clamp(42px, 6.2vw, 80px);
	--lm-fs-h1: clamp(34px, 4.4vw, 52px);
	--lm-fs-h2: clamp(28px, 3.2vw, 40px);
	--lm-fs-h3: clamp(20px, 2vw, 24px);
	--lm-fs-h4: 19px;
	--lm-fs-body: 17px;
	--lm-fs-sm: 15px;
	--lm-fs-xs: 13px;
	--lm-fs-2xs: 12px;

	/* 间距 */
	--lm-sp-1: 4px;
	--lm-sp-2: 8px;
	--lm-sp-3: 12px;
	--lm-sp-4: 16px;
	--lm-sp-5: 24px;
	--lm-sp-6: 32px;
	--lm-sp-7: 48px;
	--lm-sp-8: 64px;
	--lm-sp-9: 96px;
	--lm-sp-10: 128px;

	/* 圆角 */
	--lm-r-sm: 10px;
	--lm-r-md: 14px;
	--lm-r-lg: 22px;
	--lm-r-xl: 30px;
	--lm-r-pill: 980px;

	/* 阴影（极弱，Apple 风格） */
	--lm-shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
	--lm-shadow-md: 0 8px 30px rgba(0, 0, 0, .06);
	--lm-shadow-lg: 0 20px 60px rgba(0, 0, 0, .10);

	/* 布局
	   --lm-safe-bottom = 底部固定栏（tabbar）占用高度 + iOS 安全区。
	   桌面端无 tabbar，故默认 0；≤768px 时由媒体查询置为真实值。
	   页脚留白与返回顶部按钮一律引用它，避免在桌面端残留 58px 无效空白。 */
	--lm-maxw: 1200px;
	--lm-maxw-wide: 1000px;
	--lm-maxw-text: 720px;
	/* 80px（原 56px）：按需求加高，走宽松版面风格。
	   80px 下 36px 的 .icon-btn 上下各留 22px；若希望内容更饱满，
	   可等比放大 .brand__logo / .icon-btn / .nav-links a / .btn--sm 四个内部元素。
	   这个变量同时驱动 .mobile-menu 面板起点、.toc 粘顶位置、.lesson-list 锚点偏移，
	   改一处即全局同步，无需逐个调整。 */
	--lm-header-h: 80px;
	--lm-tabbar-h: 58px;
	--lm-safe-bottom: 0px;

	/* 字体
	   自托管中文字体 "Lumen Sans SC"（Noto Sans SC 可变字体，见 assets/css/fonts.css）
	   插在 "Hiragino Sans GB" 之后、"Microsoft YaHei" 之前，这个位置是刻意的：

	   —— 字体匹配是「逐字符」的，浏览器只会为「实际用于渲染的字符」下载字体。
	      macOS / iOS 上中文由 PingFang SC 全部覆盖，Lumen Sans SC 一次都不会被请求，
	      零下载成本，且保留了系统字体的字号渲染与动态字重优化。
	      Windows / Linux / Android 上前面各项均不存在，才真正触发分片下载。

	   —— 为什么需要它：微软雅黑只有 Regular / Bold 两档，本站 400 / 500 / 600 / 700
	      四档字重在 Windows 上会被就近合并，标题层级塌陷（即审计报告 P0-1）。
	      Lumen Sans SC 是可变字体（font-weight: 100 900），四档全部真实存在。

	   —— 为什么不做字符集子集化：子集化后文章里出现子集外的生僻字会回退到系统字体，
	      造成同一段文字字体不一致。本站有海量 UGC 内容且持续更新，漏字风险不可接受；
	      fonts.css 用 unicode-range 覆盖全部 CJK 区段，任何字符都能命中。
	      代价是首屏约 335 KB（仅非 Apple 平台），由 font-display: swap 保证不阻塞渲染。

	   其余调整：
	   1) "SF Pro SC" 提到 "SF Pro Display" 之前 —— 后者不含中文字形，
	      原顺序会让中文多走一次逐字回退；
	   2) 系统字体全部保留在 Lumen Sans SC 之后作兜底，字体加载失败时不影响阅读。 */
	--lm-font: -apple-system, BlinkMacSystemFont, "SF Pro SC", "SF Pro Display", "SF Pro Text",
		"PingFang SC", "Hiragino Sans GB", "Lumen Sans SC", "Segoe UI",
		"Microsoft YaHei UI", "Microsoft YaHei",
		"Noto Sans CJK SC", "Source Han Sans SC", "Noto Sans SC", sans-serif;
	--lm-font-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;

	color-scheme: light;
}

/* ---------- 深色模式（Apple Dark） ---------- */
:root[data-theme="dark"] {
	--lm-ink: #F5F5F7;
	--lm-ink-2: #D0D0D6;
	--lm-ink-3: #98989F;
	/* 原 #7C7C85 对卡片底 #1C1C1E 仅 4.11:1（不达标），已提亮至 #8A8A93（4.97:1）。 */
	--lm-ink-4: #8A8A93;

	/* 页面底用纯黑：与卡片 #1C1C1E 的对比为 1.234:1，是「卡片亮于底色」时
	   能取得的最大分离度。曾改为 #0B0B0D 试图拉出层级，实算后分离度反而
	   降到 1.156:1（底色越接近卡片，边界越弱），故回退为纯黑。 */
	--lm-bg: #000000;
	--lm-surface: #1C1C1E;
	--lm-fill: #232325;
	--lm-fill-2: #2C2C2E;

	--lm-border: #38383A;
	--lm-border-strong: #48484A;
	--lm-hairline: rgba(255, 255, 255, .1);

	--lm-blue: #2997FF;
	--lm-blue-deep: #0A84FF;
	/* 深色下主色本身已足够亮（#2997FF 对 #1C1C1E 实测 5.64:1），文字版与之同值 */
	--lm-blue-text: #2997FF;
	--lm-blue-ring: rgba(41, 151, 255, .22);
	--lm-blue-soft: rgba(41, 151, 255, .12);
	/* #2997FF 相对亮度 0.298 < 0.34 → 主色底上仍用白字 */
	--lm-on-blue: #ffffff;

	--lm-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
	--lm-shadow-md: 0 8px 30px rgba(0, 0, 0, .55);
	--lm-shadow-lg: 0 20px 60px rgba(0, 0, 0, .7);

	color-scheme: dark;
}

/* 跟随系统（用户未手动选择时） */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--lm-ink: #F5F5F7;
		--lm-ink-2: #D0D0D6;
		--lm-ink-3: #98989F;
		--lm-ink-4: #8A8A93;
		--lm-bg: #000000; /* 与上面 :root[data-theme="dark"] 保持一致（纯黑分离度最高） */
		--lm-surface: #1C1C1E;
		--lm-fill: #232325;
		--lm-fill-2: #2C2C2E;
		--lm-border: #38383A;
		--lm-border-strong: #48484A;
		--lm-hairline: rgba(255, 255, 255, .1);
		--lm-blue: #2997FF;
		--lm-blue-deep: #0A84FF;
		--lm-blue-text: #2997FF;
		--lm-blue-ring: rgba(41, 151, 255, .22);
		--lm-blue-soft: rgba(41, 151, 255, .12);
		--lm-on-blue: #ffffff;
		--lm-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
		--lm-shadow-md: 0 8px 30px rgba(0, 0, 0, .55);
		--lm-shadow-lg: 0 20px 60px rgba(0, 0, 0, .7);
		color-scheme: dark;
	}
}

/* ================================================================
   2. 布局容器
   ================================================================ */
.container {
	width: 100%;
	max-width: var(--lm-maxw);
	margin-inline: auto;
	/* 原固定 24px：平板（768–1024）两侧留白相对容器过窄，比例失衡；
	   同时用 max() 兜住刘海机横屏的左右安全区。 */
	padding-inline: max(clamp(20px, 4vw, 32px), env(safe-area-inset-left, 0px));
	padding-right: max(clamp(20px, 4vw, 32px), env(safe-area-inset-right, 0px));
}
.container--wide { max-width: 1400px; }
.container--text { max-width: var(--lm-maxw-text); }
/* 760px / 17px ≈ 44 字，超出中文舒适行宽（30–40 字），收至 680px ≈ 40 字。 */
.container--prose { max-width: 680px; }

.section { padding-block: clamp(56px, 7vw, 104px); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }
.section--fill { background: var(--lm-fill); }
.section--surface { background: var(--lm-surface); }

.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 10000;
	background: var(--lm-blue); color: #fff; padding: 12px 22px;
	border-radius: 0 0 var(--lm-r-md) 0; font-size: var(--lm-fs-sm);
}
.skip-link:focus { left: 0; }

/* ================================================================
   3. 按钮
   ================================================================ */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 22px;
	border: 1px solid transparent;
	border-radius: var(--lm-r-pill);
	background: transparent;
	font-size: var(--lm-fs-sm);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: -.01em;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .22s ease, color .22s ease, border-color .22s ease,
		transform .22s ease, box-shadow .22s ease;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.975); }

/* 前景色走 --lm-on-blue：自定义主色为高明度色时，
   lumen_dynamic_css() 会把它覆盖为深色字，避免白字消失（默认 #fff）。 */
.btn--primary {
	background: var(--lm-blue);
	color: var(--lm-on-blue, #fff);
	box-shadow: 0 6px 20px -8px var(--lm-blue);
}
.btn--primary:hover { background: var(--lm-blue-deep); color: var(--lm-on-blue, #fff); }

.btn--secondary {
	background: var(--lm-fill);
	color: var(--lm-ink);
}
.btn--secondary:hover { background: var(--lm-fill-2); color: var(--lm-ink); }

.btn--outline {
	border-color: var(--lm-border-strong);
	color: var(--lm-ink);
}
.btn--outline:hover { border-color: var(--lm-ink-3); background: var(--lm-fill); }

.btn--ghost { color: var(--lm-blue-text); padding-inline: 4px; }
.btn--ghost:hover { color: var(--lm-blue-deep); }

.btn--lg { padding: 14px 30px; font-size: 17px; }
.btn--sm { padding: 7px 16px; font-size: var(--lm-fs-xs); }
.btn--block { width: 100%; }

.btn__arrow { transition: transform .22s ease; }
.btn:hover .btn__arrow { transform: translateX(3px); }
.btn svg { width: 1em; height: 1em; }

/* 图标基础尺寸：SVG 未显式指定宽高时浏览器会退回 300×150，
   这里统一兜底，各组件再按需覆盖。 */
.lm-icon {
	width: 18px;
	height: 18px;
	flex: none;
	display: inline-block;
	vertical-align: middle;
}

/* ================================================================
   4. 顶部公告条
   ================================================================ */
.topbar {
	background: var(--lm-ink);
	color: var(--lm-bg);
	font-size: var(--lm-fs-xs);
	letter-spacing: .01em;
}
.topbar[hidden] { display: none; }
.topbar__inner {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	min-height: 38px; padding-block: 8px;
	position: relative;
}
.topbar__inner a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.topbar__inner strong { font-weight: 600; }
.topbar__close {
	position: absolute; right: 0; top: 50%; transform: translateY(-50%);
	background: none; border: 0; color: inherit; opacity: .6; cursor: pointer;
	padding: 6px; line-height: 0; border-radius: 50%;
}
.topbar__close:hover { opacity: 1; }
.topbar__close svg { width: 14px; height: 14px; }

/* 深色模式下 --lm-ink 反转为近白、--lm-bg 反转为纯黑，
   若继续沿用「ink 底 + bg 字」，公告条会变成纯黑页面上的一条高亮白带。
   深色下改为表面色底 + 主文字色，并加一条发丝线分隔。 */
:root[data-theme="dark"] .topbar {
	background: var(--lm-surface);
	color: var(--lm-ink);
	border-bottom: 1px solid var(--lm-hairline);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .topbar {
		background: var(--lm-surface);
		color: var(--lm-ink);
		border-bottom: 1px solid var(--lm-hairline);
	}
}

/* ================================================================
   5. 站点头部（玻璃拟态）
   ================================================================ */
.site-header {
	position: sticky;
	top: 0;
	z-index: 900;
	background: color-mix(in srgb, var(--lm-bg) 72%, transparent);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid transparent;
	transition: border-color .3s ease, background-color .3s ease;
}
.site-header.is-stuck { border-bottom-color: var(--lm-hairline); }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }

.header-inner {
	display: flex;
	align-items: center;
	gap: var(--lm-sp-5);
	height: var(--lm-header-h);
}

/* 站点名过长时会挤压主导航，故允许品牌区收缩并设上限（文字 ellipsis 兜底）；
   1024px 以下主导航已收进汉堡菜单，解除上限、给品牌区完整宽度。 */
.brand { display: flex; align-items: center; flex: 0 1 auto; min-width: 0; max-width: 46%; }
@media (max-width: 1024px) { .brand { max-width: none; } }
.brand__link {
	display: flex; align-items: center; gap: 10px;
	min-width: 0; text-decoration: none;
}
.brand__logo {
	max-height: 34px;
	width: auto;
	border-radius: 8px;
	flex: 0 0 auto;
}
.brand__word {
	display: flex; flex-direction: column; line-height: 1.15; min-width: 0;
}
.brand__name {
	font-size: 17px; font-weight: 600; letter-spacing: -.02em; color: var(--lm-ink);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand__tag {
	font-size: var(--lm-fs-2xs); color: var(--lm-ink-3); letter-spacing: .02em;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.brand__link:hover .brand__name { color: var(--lm-blue-text); }
@media (max-width: 600px) { .brand__tag { display: none; } }

/* 主导航：占据 LOGO 与右侧操作区之间的剩余空间并让菜单水平居中 */
.primary-nav { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.nav-links {
	display: flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav-links > li { position: relative; }
.nav-links a {
	display: flex;
	align-items: center;
	gap: 5px;
	padding: 7px 13px;
	border-radius: var(--lm-r-pill);
	font-size: var(--lm-fs-xs);
	font-weight: 500;
	letter-spacing: -.01em;
	color: var(--lm-ink-2);
	transition: color .2s, background-color .2s;
	white-space: nowrap;
}
.nav-links a:hover { color: var(--lm-ink); background: var(--lm-fill); }
/* 当前页：仅「变色 + 加粗」在 13px 下几乎不可辨，
   补一条 2px 指示条，与 hover 的浅填充形成明确区分。 */
.nav-links a[aria-current="page"] {
	color: var(--lm-ink);
	font-weight: 600;
	position: relative;
}
.nav-links a[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 13px;
	right: 13px;
	bottom: 1px;
	height: 2px;
	border-radius: 2px;
	background: var(--lm-blue);
}
/* 菜单图标与分类名水平居中对齐
   图标来源多样（dashicons 字体、内联 svg、<i>、<img>），默认按基线对齐
   会让图标整体偏上。这里统一按 flex 居中，并锁死尺寸防止被拉伸或压缩。 */
.nav-links a { line-height: 1; }
.nav-links .dashicons,
.nav-links ._mi,
.nav-links a > svg,
.nav-links a > img,
.nav-links a > i,
.nav-links a .lm-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	font-size: 14px;
	line-height: 1;
	opacity: .75;
	vertical-align: middle;
	position: relative;
	top: 0;
}
/* dashicons 之类字体图标的字形在伪元素上，伪元素自身也要参与居中。 */
.nav-links .dashicons::before,
.nav-links ._mi::before,
.nav-links a > i::before {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	line-height: 1;
	vertical-align: middle;
}
.nav-links a > svg,
.nav-links a .lm-icon svg { width: 14px; height: 14px; }

/* 图标与文字强制水平居中：覆盖 dashicons 字体 / <img> / 伪元素图标带来的基线偏移，
   并锁定 flex 项不被压缩、无残留定位偏移。 */
.nav-links a { line-height: 1; }
.nav-links a > * { flex: 0 0 auto; }
.nav-links a img { width: 14px; height: 14px; object-fit: contain; }
.nav-links a [class*="dashicons"]::before,
.nav-links a ._mi::before {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	line-height: 1;
	vertical-align: middle;
}
.nav-links a > img { width: 14px; height: 14px; object-fit: contain; }

/* menu-icons 插件冲突修复
   实测插件 CSS（/wp-content/plugins/menu-icons/css/extra.min.css）写了：
     .menu-item i._mi{width:auto;height:auto;margin-top:-.265em;font-size:1.2em;line-height:1}
   其特异性 (0,2,1) 高于本主题原有的 .nav-links ._mi (0,2,0)，所以下列三项全被插件抢走：
     1) margin-top:-.265em —— 为旧版 inline-block 布局做的基线补偿，
        在本主题 flex 布局里会把图标整体上推约 4px，直接破坏 align-items:center；
     2) width/height:auto —— 覆盖本主题锁死的 14px，图标尺寸失控；
     3) font-size:1.2em —— 字形涨到约 15.6px，与 13px 的菜单文字行高不匹配。
   下方用更高特异性 (0,2,2) 重置，无需 !important；
   若插件日后改用 !important，再降级为 !important 兜底。 */
.nav-links a > i._mi,
.nav-links a > ._mi {
	margin: 0;
	width: 14px;
	height: 14px;
	font-size: 14px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

/* 二级菜单
   1) 8px 间隙改用 margin-top 而非 top 偏移，配合下面的 ::before 热区，
      鼠标从父项移向子菜单时不会因穿过缝隙触发 mouseleave 导致菜单闪断；
   2) visibility 关闭时延迟 200ms，进一步吸收指针抖动。 */
.sub-menu {
	position: absolute;
	top: 100%;
	margin-top: 8px;
	left: 0;
	min-width: 200px;
	margin: 0;
	padding: 6px;
	list-style: none;
	background: color-mix(in srgb, var(--lm-surface) 88%, transparent);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border: 1px solid var(--lm-hairline);
	border-radius: var(--lm-r-md);
	box-shadow: var(--lm-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .2s, transform .2s, visibility 0s .2s;
	z-index: 60;
}
.sub-menu a { border-radius: var(--lm-r-sm); padding: 9px 12px; font-size: var(--lm-fs-xs); }
.sub-menu a:hover { background: var(--lm-fill); }

/* 父项与子菜单之间的透明热区（bridging gap） */
.menu-item-has-children::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 8px;
}

/* 靠右的两项：子菜单右对齐，避免 200px 宽的面板溢出容器 / 视口 */
.nav-links > li:nth-last-child(-n + 2) .sub-menu { left: auto; right: 0; }

.menu-item-has-children:hover > .sub-menu,
.menu-item-has-children:focus-within > .sub-menu,
.menu-item-has-children.is-open > .sub-menu {
	opacity: 1; visibility: visible; transform: translateY(0);
	transition: opacity .2s, transform .2s, visibility 0s;
}

/* 头部操作区 */
.header-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

.icon-btn {
	display: grid; place-items: center;
	width: 36px; height: 36px;
	border: 0; border-radius: 50%;
	background: transparent;
	color: var(--lm-ink-2);
	cursor: pointer;
	transition: background-color .2s, color .2s;
}
.icon-btn:hover { background: var(--lm-fill); color: var(--lm-ink); }
/* svg 默认是 inline 元素，会参与行内基线排版。
   搜索按钮的 svg 是 .icon-btn(grid) 的直接子项，会被自动 blockify，所以精确居中；
   而主题切换按钮的 svg 包在 <span class="ico-sun / .ico-moon"> 里 ——
   span 作为 grid item 虽然被 blockify，但它内部的 svg 仍是 inline，
   底部会坐在父级 baseline 上（baseline 下方还留着字体 descender 空间），
   整体比容器中心高约 1.7px。这就是两个图标按钮对不齐的根因。
   统一改 block，被 span 包裹的 svg 也能在 grid 中精确居中。
   注意：不要用手动偏移 path 坐标去「补偿」，那会在本修复后反向偏移。 */
.icon-btn svg { width: 17px; height: 17px; display: block; }

.ico-sun { display: none; }
:root[data-theme="dark"] .ico-sun { display: block; }
:root[data-theme="dark"] .ico-moon { display: none; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .ico-sun { display: block; }
	:root:not([data-theme="light"]) .ico-moon { display: none; }
}

.nav-toggle { display: none; }

@media (max-width: 1024px) {
	.primary-nav { display: none; }
	.nav-toggle {
		display: grid; place-items: center;
		width: 44px; height: 44px; border: 0; border-radius: 50%;
		background: transparent; color: var(--lm-ink-2); cursor: pointer;
	}
	.nav-toggle svg { width: 19px; height: 19px; }
	.nav-toggle .ico-close { display: none; }
	.nav-toggle[aria-expanded="true"] .ico-close { display: block; }
	.nav-toggle[aria-expanded="true"] .ico-menu { display: none; }
}

/* 移动端菜单面板 */
.mobile-menu {
	position: fixed;
	inset: var(--lm-header-h) 0 0 0;
	z-index: 880;
	background: var(--lm-bg);
	padding: var(--lm-sp-5) var(--lm-sp-5) calc(var(--lm-safe-bottom) + var(--lm-sp-7));
	overflow-y: auto;
	display: none;
}
.mobile-menu:not([hidden]) { display: block; }
.mobile-menu-links { list-style: none; margin: 0 0 var(--lm-sp-6); padding: 0; }
.mobile-menu-links li { border-bottom: 1px solid var(--lm-hairline); margin: 0; }
.mobile-menu-links a {
	display: flex; align-items: center; gap: 12px;
	padding: 16px 4px;
	font-size: 19px; font-weight: 500; letter-spacing: -.02em;
	color: var(--lm-ink);
}
.mobile-menu-links .dashicons,
.mobile-menu-links a > svg,
.mobile-menu-links a .lm-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	font-size: 20px;
	line-height: 1;
	opacity: .5;
	vertical-align: middle;
}
.mobile-menu-links a > svg,
.mobile-menu-links a .lm-icon svg { width: 20px; height: 20px; }

/* 同桌面端：图标与文案强制水平居中，覆盖字体图标 / <img> 基线偏移。 */
.mobile-menu-links a { line-height: 1; }
.mobile-menu-links a > * { flex: 0 0 auto; }
.mobile-menu-links a img { width: 20px; height: 20px; object-fit: contain; }
.mobile-menu-links a [class*="dashicons"]::before,
.mobile-menu-links a ._mi::before {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	line-height: 1;
	vertical-align: middle;
}

/* ---------- 移动端子菜单 ----------
   桌面端子菜单只靠 :hover 展开，触屏设备无法触发，
   因此在这里改为内联展开：默认隐藏，由 JS 注入的 .submenu-toggle 切换 .is-open。
   一级 li 改为 flex 换行布局，让「链接 + 展开按钮」同行、子菜单独占下一行。 */
.mobile-menu-links > li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
.mobile-menu-links > li > a { flex: 1 1 auto; min-width: 0; }
.mobile-menu-links > li > .sub-menu { flex: 1 1 100%; }

.mobile-menu-links .menu-item-has-children::before { display: none; }
.mobile-menu-links .sub-menu {
	position: static;
	margin-top: 0;
	min-width: 0;
	padding: 0 0 10px;
	background: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: 0;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	transform: none;
	display: none;
}
.mobile-menu-links .menu-item-has-children.is-open > .sub-menu { display: block; }
.mobile-menu-links .sub-menu a {
	padding: 11px 4px 11px 16px;
	font-size: var(--lm-fs-body);
	font-weight: 400;
	letter-spacing: 0;
	color: var(--lm-ink-2);
}

/* 移动端菜单 CTA 副文案：补充说明，不稀释按钮上的行动指令 */
.mobile-menu-cta__note {
	margin: var(--lm-sp-3) 0 0;
	font-size: var(--lm-fs-xs);
	color: var(--lm-ink-3);
	text-align: center;
}

/* 展开按钮：44×44 触控区，符合移动端最小点击目标 */
.submenu-toggle {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-right: -8px;
	flex: 0 0 auto;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--lm-ink-3);
	cursor: pointer;
}
.submenu-toggle:hover { background: var(--lm-fill); color: var(--lm-ink); }
.submenu-toggle svg { width: 16px; height: 16px; transition: transform .22s ease; }
.submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* 全屏搜索面板 */
.search-panel {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 950;
	background: color-mix(in srgb, var(--lm-bg) 88%, transparent);
	backdrop-filter: blur(24px);
	-webkit-backdrop-filter: blur(24px);
	border-bottom: 1px solid var(--lm-hairline);
	padding: var(--lm-sp-7) 0 var(--lm-sp-7);
	transform: translateY(-100%);
	opacity: 0;
	visibility: hidden;
	transition: transform .34s cubic-bezier(.32, .72, 0, 1), opacity .3s, visibility .3s;
}
.search-panel.open { transform: translateY(0); opacity: 1; visibility: visible; }
.search-panel__inner { max-width: 720px; margin-inline: auto; padding-inline: var(--lm-sp-5); }
.search-panel__label {
	display: block; font-size: var(--lm-fs-xs); color: var(--lm-ink-3);
	letter-spacing: .06em; text-transform: uppercase; margin-bottom: var(--lm-sp-3);
}
.search-field-lg {
	width: 100%;
	border: 0;
	border-bottom: 1px solid var(--lm-border-strong);
	border-radius: 0;
	background: transparent;
	padding: 12px 0;
	font-size: clamp(24px, 3.5vw, 36px);
	font-weight: 500;
	letter-spacing: -.03em;
}
.search-field-lg:focus-visible { outline: none; box-shadow: none; border-color: var(--lm-blue); }
.search-panel__hint { margin-top: var(--lm-sp-4); font-size: var(--lm-fs-xs); color: var(--lm-ink-3); }
.search-panel__hot { display: flex; flex-wrap: wrap; gap: 8px; margin-top: var(--lm-sp-4); }

/* ================================================================
   6. Hero（首屏）
   ================================================================ */
.hero {
	position: relative;
	padding-block: clamp(56px, 8vw, 112px) clamp(40px, 5vw, 72px);
	text-align: center;
	overflow: hidden;
}
.hero::before {
	content: "";
	position: absolute;
	top: -260px; left: 50%; transform: translateX(-50%);
	width: min(1100px, 120vw); height: 620px;
	background: radial-gradient(50% 50% at 50% 50%, var(--lm-blue-soft), transparent 70%);
	filter: blur(20px);
	pointer-events: none;
}
.hero > * { position: relative; }

.hero__eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 5px 14px 5px 10px;
	border: 1px solid var(--lm-hairline);
	border-radius: var(--lm-r-pill);
	background: var(--lm-surface);
	box-shadow: var(--lm-shadow-sm);
	font-size: var(--lm-fs-xs);
	color: var(--lm-ink-3);
	margin-bottom: var(--lm-sp-5);
}
.hero__eyebrow b {
	background: var(--lm-blue); color: var(--lm-on-blue, #fff);
	font-size: var(--lm-fs-2xs); font-weight: 600; letter-spacing: .04em;
	padding: 2px 8px; border-radius: var(--lm-r-pill);
}

.hero__title {
	max-width: 20ch;
	margin-inline: auto;
	font-size: var(--lm-fs-display);
	/* 原 680：字体栈全是非可变字体（PingFang SC / 微软雅黑），
	   640 / 680 会被就近舍入到同一个字重，层级在真机上完全消失，故收敛为 600。 */
	font-weight: 600;
	/* 原 1.05：中文字面高度大于拉丁，多行中文标题会视觉粘连。 */
	line-height: 1.14;
	letter-spacing: -.02em;
	text-wrap: balance;
}
.hero__title em { font-style: normal; }

/* 渐变文字依赖 background-clip:text。
   在不支持该特性的环境（旧浏览器 / 部分 WebView）下，
   背景与文字色会同时失效导致整段不可见，故用 @supports 包一层，
   不支持时自动退回纯主色，保证内容始终可读。 */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.hero__title em {
		background: linear-gradient(96deg, var(--lm-blue) 10%, var(--lm-indigo) 55%, var(--lm-purple) 95%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}

/* Windows 高对比度模式下渐变背景被系统剥离，
   若保留 color:transparent 文字会整段消失，这里强制还原为系统文字色。 */
@media (forced-colors: active) {
	.hero__title em,
	.error-404__code {
		background: none;
		-webkit-background-clip: border-box;
		background-clip: border-box;
		color: CanvasText;
	}
}

.hero__sub {
	max-width: 46ch;
	margin: var(--lm-sp-5) auto 0;
	font-size: clamp(17px, 1.4vw, 21px);
	line-height: 1.5;
	letter-spacing: -.01em;
	color: var(--lm-ink-3);
	text-wrap: pretty;
}

.hero__actions {
	display: flex; flex-wrap: wrap; gap: var(--lm-sp-3);
	justify-content: center; margin-top: var(--lm-sp-6);
}

/* 数据条 */
.stat-strip {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(24px, 5vw, 72px);
	margin-top: clamp(40px, 5vw, 64px);
	padding-top: var(--lm-sp-6);
	border-top: 1px solid var(--lm-hairline);
}
.stat { text-align: center; }
.stat__num {
	display: block;
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 600;
	letter-spacing: -.03em;
	line-height: 1.1;
	color: var(--lm-ink);
	font-variant-numeric: tabular-nums;
}
.stat__num sup {
	font-size: .48em; font-weight: 600; vertical-align: super;
	margin-left: 2px; color: var(--lm-ink-3); letter-spacing: 0;
}
.stat__label {
	display: block; margin-top: 4px;
	font-size: var(--lm-fs-xs); color: var(--lm-ink-3); letter-spacing: .02em;
}

/* 首页搜索框
   原实现用 input 的 padding-right: 118px 为绝对定位按钮预留空间，
   而按钮实际宽度仅约 74px —— 390px 屏上输入框可视宽度被压到约 200px，
   placeholder 必然被截断。改为「容器承载外观 + 内部 flex 排布」：
   描边、圆角、阴影上移到 form，input 只负责文字区域并 min-width: 0 可收缩。 */
.hero-search {
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: 560px;
	margin: var(--lm-sp-6) auto 0;
	padding: 5px 5px 5px 22px;
	border: 1px solid var(--lm-border);
	border-radius: var(--lm-r-pill);
	background: var(--lm-surface);
	box-shadow: var(--lm-shadow-md);
	transition: border-color .2s;
}
.hero-search:focus-within { border-color: var(--lm-blue); }
/* 选择器提升为 input[type="search"]（0,2,1）：
   style.css 在 main.css 之后加载，其通用表单规则 input[type="search"]（0,1,1）
   的 border:1px solid / focus 蓝色 ring 会压过这里同特异性的覆盖——
   这就是 hero 搜索框「里边还有一圈边框」的真正来源。 */
.hero-search input,
.hero-search input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;          /* 允许在窄屏收缩，避免撑破 pill 容器 */
	padding: 10px 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	/* Chrome / Safari 对 input[type=search] 强制套用 searchfield 原生外观
	   （-webkit-appearance: searchfield），会在输入框内部再渲染一层内凹矩形，
	   即用户看到的「中间那个方框」。border:0 只作用于作者样式层，无法消除
	   原生控件外观，必须显式重置 appearance 才有效。 */
	-webkit-appearance: none;
	appearance: none;
}
.hero-search input:focus-visible,
.hero-search input:focus,
.hero-search input[type="search"]:focus-visible,
.hero-search input[type="search"]:focus {
	border: 0;
	box-shadow: none;
	outline: none;   /* style.css 的 input:focus ring 与 Chrome 默认 outline 一并压住 */
}
/* 一并去掉 WebKit 的清除按钮与原生装饰（有输入内容时出现在右侧） */
.hero-search input::-webkit-search-cancel-button,
.hero-search input::-webkit-search-decoration,
.hero-search input::-webkit-search-results-button {
	-webkit-appearance: none;
	appearance: none;
}
.hero-search button {
	flex: 0 0 auto;
	padding: 9px 20px;
	border: 0; border-radius: var(--lm-r-pill);
	background: var(--lm-blue); color: var(--lm-on-blue, #fff);
	font-size: var(--lm-fs-sm); font-weight: 500; cursor: pointer;
	transition: background .2s;
}
.hero-search button:hover { background: var(--lm-blue-deep); }

/* ================================================================
   7. 区块标题
   ================================================================ */
.section-head {
	display: flex;
	/* 原 flex-end 让右侧「更多」贴着描述文字底边，与标题块整体不对齐；
	   flex-start 后链接与标题首行顶部对齐。flex-wrap 保证窄屏整体换行，
	   不再出现「标题被挤成 3 行 + 链接压在末端」的挤压态。 */
	align-items: flex-start;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--lm-sp-4) var(--lm-sp-5);
	margin-bottom: var(--lm-sp-6);
}
.section-head--center { flex-direction: column; align-items: center; text-align: center; }
.section-title {
	margin: 0;
	font-size: var(--lm-fs-h2);
	font-weight: 600;
	letter-spacing: -.028em;
}
.section-desc {
	margin: 10px 0 0;
	max-width: 52ch;
	font-size: var(--lm-fs-sm);
	color: var(--lm-ink-3);
	line-height: 1.55;
}
.section-head--center .section-desc { margin-inline: auto; }
.section-more {
	display: inline-flex; align-items: center; gap: 5px;
	flex: 0 0 auto;
	/* 顶部对齐后下移一点，与 h2 首行的视觉中线对齐（15px 文字 vs 大号标题） */
	margin-top: 8px;
	font-size: var(--lm-fs-sm);
	color: var(--lm-blue-text);
	font-weight: 500;
}
.section-more svg { width: 15px; height: 15px; transition: transform .22s; }
.section-more:hover svg { transform: translateX(3px); }

/* ================================================================
   8. 四宫格入口
   ================================================================ */
.entry-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--lm-sp-4);
}
.entry-card {
	position: relative;
	display: block;
	padding: var(--lm-sp-6) var(--lm-sp-5) var(--lm-sp-5);
	border-radius: var(--lm-r-xl);
	background: var(--lm-surface);
	border: 1px solid var(--lm-hairline);
	box-shadow: var(--lm-shadow-sm);
	overflow: hidden;
	transition: transform .3s cubic-bezier(.32, .72, 0, 1), box-shadow .3s, border-color .3s;
}
.entry-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--lm-shadow-lg);
	border-color: transparent;
	text-decoration: none;
}
.entry-card__icon {
	display: grid; place-items: center;
	width: 46px; height: 46px;
	border-radius: 14px;
	margin-bottom: var(--lm-sp-4);
	color: #fff;
}
.entry-card__icon svg { width: 22px; height: 22px; }
.entry-card--blue .entry-card__icon { background: linear-gradient(140deg, var(--lm-blue), var(--lm-blue-deep)); }
.entry-card--purple .entry-card__icon { background: linear-gradient(140deg, #BF5AF2, #AF52DE); }
.entry-card--orange .entry-card__icon { background: linear-gradient(140deg, #FFB340, #FF9500); }
.entry-card--teal .entry-card__icon { background: linear-gradient(140deg, #40D9D2, #00C7BE); }

.entry-card__title { margin: 0 0 6px; font-size: var(--lm-fs-h4); font-weight: 600; }
.entry-card__desc { margin: 0; font-size: var(--lm-fs-xs); color: var(--lm-ink-3); line-height: 1.55; }
.entry-card__count {
	position: absolute; right: var(--lm-sp-5); top: var(--lm-sp-5);
	font-size: var(--lm-fs-xs); color: var(--lm-ink-4);
	font-variant-numeric: tabular-nums;
}

/* ================================================================
   9. 主题筛选 chips（换行铺满）
   ================================================================ */
/* 原实现为横向滚动（overflow-x:auto），存在两个可用性问题：
   1) 触屏上 4px 滚动条几乎不可见，用户不知道右侧还有内容；
   2) 桌面端鼠标滚轮无法横向滚动，需按 Shift 或拖动滚动条才能看到全部主题。
   改为 flex-wrap 换行：所有主题一屏可见，无需任何滚动交互。
   首页与工具归档页共用本 class，两处同步生效。 */
.topic-scroller {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: var(--lm-sp-6);
}

/* 修饰类：首排 chip 拉满整行宽度（工具库 13 个主题，首排 8 个）——
   给容器同时加 .topic-scroller--fill。
   为什么是 grid 而不是 flex + justify-content: space-between：
   flex-wrap 下 space-between 是【每一行各自分摊本行剩余空间】。首排 8 个能拉满，
   但线上实际有 13 个主题，第二排只剩 5 个，会被摊出 4 个约 146px 的巨型空隙，
   整排散架。改 grid 固定 8 列后：列宽按 max-content 取（chip 保持自身文字宽度），
   剩余空间由 justify-content 均分到列与列之间 —— 首排第 1 个贴左、第 8 个贴右；
   第二排的 5 个仍落在同样的列起点上，与首排左边缘对齐，不会各自乱飘。
   硬编码 8 列是刻意的：需求就是「首排 8 个」，列数写死后不管主题数量怎么变
   （当前 13 个），首排始终 8 个且两端齐平，不依赖字体度量、不会因字数浮动而错位。
   用修饰类而非全局改：文章分类页二级导航（archive.php）只有 3-5 个 chip，
   套 8 列栅格会空出大半列，所以那处不加本修饰类，保持原来的 flex 自然换行。
   目前挂在两处：工具库归档页（archive-tools.php）与首页工具版块（front-page.php），
   两处是同一份 lumen_get_tool_topics() 数据、同一个 .container 宽度，
   一行拉满一行不拉满会像是 bug，故同步生效。 */
.topic-scroller--fill {
	display: grid;
	grid-template-columns: repeat(8, auto);
	justify-content: space-between;
	justify-items: start;
}

/* 8 列栅格需要的最小宽度：单个 chip 约 110-145px，8 列加 7 个 8px 间隙
   最少也要约 960px。低于 1024px 就没有 8 列的空间，退回原来的 flex 自然换行，
   否则 grid 的 max-content 列会撑出容器造成横向溢出。 */
@media (max-width: 1024px) {
	.topic-scroller--fill {
		display: flex;
		justify-content: flex-start;
	}
}

.chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding: 8px 16px;
	border: 1px solid var(--lm-border);
	border-radius: var(--lm-r-pill);
	background: var(--lm-surface);
	color: var(--lm-ink-2);
	font-size: var(--lm-fs-xs);
	font-weight: 500;
	transition: background-color .2s, color .2s, border-color .2s;
}
.chip:hover { border-color: var(--lm-ink-4); color: var(--lm-ink); }
.chip.is-active {
	background: var(--lm-ink);
	border-color: var(--lm-ink);
	color: var(--lm-bg);
	font-weight: 600;
}
.chip__count { opacity: .55; font-variant-numeric: tabular-nums; }

/* ================================================================
   10. 卡片系统
   ================================================================ */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
	gap: var(--lm-sp-5) var(--lm-sp-4);
}
.card-grid--3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.card-grid--2 { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }

.card {
	display: flex;
	flex-direction: column;
	border-radius: var(--lm-r-lg);
	background: var(--lm-surface);
	border: 1px solid var(--lm-hairline);
	box-shadow: var(--lm-shadow-sm);
	overflow: hidden;
	transition: transform .3s cubic-bezier(.32, .72, 0, 1), box-shadow .3s, border-color .3s;
}
/* 灰底区块（--lm-fill）上的白卡：底色与卡面本就只差约 4% 明度，
   再叠 4% 阴影 + 7% 描边时边界几乎不可辨、卡片像悬浮色块。
   这里在灰底上下文中加强描边与阴影，把卡片轮廓重新拉出来。 */
.section--fill .card,
.section--fill .course-card,
.section--fill .feature-post__media {
	border-color: rgba(0, 0, 0, .1);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
}

.card:hover {
	transform: translateY(-3px);
	box-shadow: var(--lm-shadow-lg);
	border-color: transparent;
}

.card__thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: linear-gradient(140deg, var(--lm-fill), var(--lm-fill-2));
}
.card__thumb img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .55s cubic-bezier(.32, .72, 0, 1);
}
.card:hover .card__thumb img { transform: scale(1.045); }
.card__thumb--empty { display: grid; place-items: center; color: var(--lm-ink-4); }
.card__thumb--empty svg { width: 34px; height: 34px; opacity: .5; }

/* 18/20px 硬编码就近归并到 sp-4(16) / sp-5(24)，保持视觉几乎不变但纳入令牌体系 */
.card__body { display: flex; flex-direction: column; gap: var(--lm-sp-2); padding: var(--lm-sp-4) var(--lm-sp-5) var(--lm-sp-5); flex: 1; }

.card__title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: -.015em;
}
.card__title a { color: var(--lm-ink); }
.card__title a:hover { color: var(--lm-blue-text); }

.card__title-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--lm-sp-3);
}
.card__price-badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 3px 8px;
	border-radius: var(--lm-r-pill);
	background: var(--lm-fill);
	color: var(--lm-ink-3);
	font-size: var(--lm-fs-2xs);
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}
.card__price-badge svg { width: 12px; height: 12px; }

.card__excerpt {
	margin: 0;
	font-size: var(--lm-fs-xs);
	color: var(--lm-ink-3);
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
}

.card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.card__tags .chip {
	padding: 3px 10px;
	font-size: var(--lm-fs-2xs);
	background: var(--lm-fill);
	border-color: transparent;
	color: var(--lm-ink-3);
}
.card__tags .chip:hover { background: var(--lm-blue-soft); color: var(--lm-blue-text); }

/* 工具卡价格/评级角标
   角标叠在任意封面图上，白字可读性由底色的不透明度决定。
   最不利情况是纯白封面：rgba(0,0,0,.62) 合成后为 #616161，白字对比度 6.19:1，
   封面越暗对比度越高。原实现已满足 AA，故维持 .62 不改动（曾误按 3.4:1
   的错算值提到 .72 并加内描边，复核后撤销）。 */
.card__badge {
	position: absolute; left: 10px; top: 10px;
	padding: 3px 9px; border-radius: var(--lm-r-pill);
	background: rgba(0, 0, 0, .62);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #fff; font-size: var(--lm-fs-2xs); font-weight: 500;
}
.card__badge--new {
	left: auto; right: 10px;
	background: var(--lm-blue);
	color: #fff;
	font-weight: 600;
}

/* 课程卡 */
.course-card .card__thumb { aspect-ratio: 16 / 9; }
.card__cta {
	display: inline-flex; align-items: center; gap: 5px;
	margin-top: 10px; font-size: var(--lm-fs-xs); font-weight: 500; color: var(--lm-blue-text);
}
.card__cta svg { width: 14px; height: 14px; transition: transform .22s; }
.course-card:hover .card__cta svg { transform: translateX(3px); }

/* 文章卡（列表式） */
.post-list { display: flex; flex-direction: column; }
.post-list__item {
	display: grid;
	/* 缩略图随视口在 96–128px 间伸缩，宽屏下不再显得过小；
	   min-height 保证无图（占位 span）时行高与有图时一致。 */
	grid-template-columns: clamp(96px, 12vw, 128px) 1fr;
	gap: var(--lm-sp-4);
	align-items: center;
	min-height: 92px;
	padding: 14px 0;
	border-bottom: 1px solid var(--lm-hairline);
}
.post-list__item:last-child { border-bottom: 0; }
.post-list__thumb {
	width: 100%;
	aspect-ratio: 3 / 2;   /* 与 lumen-thumb 注册的 192×128 一致，避免二次裁切 */
	height: auto;
	border-radius: var(--lm-r-sm);
	overflow: hidden;
	background: var(--lm-fill);
}
.post-list__thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-list__title {
	margin: 0 0 5px;
	font-size: var(--lm-fs-sm);
	font-weight: 500;
	line-height: 1.45;
	letter-spacing: -.01em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
	overflow: hidden;
}
.post-list__title a { color: var(--lm-ink); }
.post-list__title a:hover { color: var(--lm-blue-text); }
.post-list__meta {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	font-size: var(--lm-fs-2xs); color: var(--lm-ink-4);
}

/* 大号精选卡（主推文章）—— 结构与 V4 主题的 .latest-feature 对齐
   原实现为「图左文右」两列 grid（1.15fr / 1fr），且图、标题、按钮各自是独立链接。
   本卡位于 .split-main 窄栏内（宽屏实测约 560–600px），两列各约 300px，产生三个问题：
   1) 文章无封面图时 .feature-post__media 不输出，grid 第二列整体空缺，
      文字被压缩在左半边、右侧留出接近一半的空白 —— 即反馈的「显示异常」；
   2) 即便有图，300×187 的图与约 320px 高文字区并排，align-items:center 后四周大片留白；
   3) 卡面没有背景与边框，图与文字像散落元素，不像一张「卡」。
   现改为整卡链接的杂志大卡：图在上、文在下，卡面自带边框圆角，分类浮在图上。 */
.feature-post {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: var(--lm-surface);
	border: 1px solid var(--lm-border);
	border-radius: var(--lm-r-xl);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform .25s cubic-bezier(.4, 0, .2, 1), box-shadow .25s, border-color .25s;
}
.feature-post:hover {
	transform: translateY(-4px);
	box-shadow: var(--lm-shadow-lg);
	border-color: transparent;
	color: inherit;
}
.feature-post__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--lm-fill);
	flex: none;
}
.feature-post__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform .4s ease;
}
.feature-post:hover .feature-post__media img { transform: scale(1.04); }
/* 底部渐隐：让浮在图上的分类徽标在浅色封面上也读得清 */
.feature-post__media::after {
	content: ""; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(180deg, transparent 52%, rgba(0, 0, 0, .32));
}
.feature-post__cat {
	position: absolute; top: var(--lm-sp-4); left: var(--lm-sp-4); z-index: 2;
	font-size: var(--lm-fs-xs); font-weight: 600; color: #fff;
	background: rgba(0, 0, 0, .38);
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	padding: 5px 12px;
	border-radius: var(--lm-r-pill);
	border: 1px solid rgba(255, 255, 255, .28);
}
/* 无封面图时的占位：保持 16/9 高度，避免卡面塌陷 */
.feature-post__ph {
	display: grid; place-items: center;
	width: 100%; height: 100%;
	color: var(--lm-ink-4);
}
.feature-post__ph svg { width: 40px; height: 40px; opacity: .45; }

.feature-post__body {
	display: flex; flex-direction: column; gap: var(--lm-sp-3);
	flex: 1 1 auto; min-width: 0;
	padding: var(--lm-sp-5) var(--lm-sp-5) var(--lm-sp-5);
}
.feature-post__title {
	margin: 0;
	font-size: clamp(20px, 2.4vw, 26px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.02em;
	color: var(--lm-ink);
}
.feature-post:hover .feature-post__title { color: var(--lm-blue-text); }
.feature-post__excerpt {
	font-size: var(--lm-fs-sm);
	color: var(--lm-ink-3);
	line-height: 1.7;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	line-clamp: 5;
	overflow: hidden;
}
.feature-post__meta {
	display: flex; align-items: center; gap: 8px;
	margin-top: auto;
	font-size: var(--lm-fs-xs); color: var(--lm-ink-4);
}
.feature-post__meta .dot {
	width: 3px; height: 3px; border-radius: 50%;
	background: var(--lm-border-strong);
}

/* 通用元信息 */
.meta-line {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
	font-size: var(--lm-fs-xs); color: var(--lm-ink-3);
}
.meta-line a { color: var(--lm-ink-3); }
.meta-line a:hover { color: var(--lm-blue-text); }
.meta-line .dot { opacity: .4; }
.meta-line .reading { font-variant-numeric: tabular-nums; }

/* 文章卡片的信息区：分类路径独占第一行，日期 + 阅读时长放第二行。
   原先四样挤在一行，二级分类一展开就把日期挤到下一行，卡片高度忽高忽低。
   用修饰类而不是改 .meta-line 本身 —— single-course / single-ai_tool
   里的 .meta-line 仍是横向单行，不能被波及。 */
.meta-line--stacked {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: var(--lm-sp-2);
	margin-bottom: var(--lm-sp-2);
}
.meta-line__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 8px;
	/* 两行都给到固定行高：文章没挂分类时第一行整体不渲染，
	   靠这个 min-height 兜底，卡片高度才不会参差不齐。 */
	min-height: 20px;
}
.meta-line__row--cats { font-size: var(--lm-fs-2xs); }
.meta-line__row--info { color: var(--lm-ink-4); }

/* 首页「最新发布」侧栏复用同一套两行结构，但侧栏文字区只有约 330px，
   且一次排 6 条 —— 8px 行距 × 6 会明显撑高列表、把主卡拉长。
   这里收紧到 4px，并去掉底部外边距（条目间距由 .post-list 的 gap 负责）。
   特异性 0,2,0：既要压过上面的 .meta-line--stacked，也要压过 .post-list__meta。 */
.post-list__meta.meta-line--stacked {
	gap: var(--lm-sp-1);
	margin-bottom: 0;
}

/* 分类徽标：11px → 12px（中文在 11px 下笔画发糊）。
   文字色对「各自 tint 底合成后的实色」实测均需 ≥4.5:1，实测值如下：
     news    #C77700 3.14 FAIL → #9A5B00 4.92
     side    #248A3D 3.96 FAIL → #1E7A34 4.87
     review  #8944AB 5.15 达标，保留
     蓝色系（兜底 .cat-pill 底 rgba(...,.07)→#edf5fd 4.27 FAIL、
             learning 底 rgba(...,.08)→#ebf4fd 4.23 FAIL）→ #0069D2 4.83 / 4.78
   蓝色系原本用 var(--lm-blue-text)：它按「白底」推导，而这里实际是浅蓝 tint 底，
   比白底更暗、与蓝字更接近，故必须单独指定。选取 #0069D2 是因为它是达标色中
   与 #0071E3 色相最接近的一个，视觉改动最小。
   深色模式下 tint 底很暗（#1a232e 一类），--lm-blue-text(#2997FF) 已达 5.26:1，
   故深色分支交回该变量，随自定义主色自适应。 */
.cat-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: var(--lm-r-pill);
	background: var(--lm-blue-soft);
	color: #0069D2;
	font-size: var(--lm-fs-2xs);
	font-weight: 600;
	letter-spacing: .01em;
}
.cat-pill--news { background: rgba(255, 149, 0, .12); color: #9A5B00; }
.cat-pill--learning { background: rgba(0, 113, 227, .08); color: #0069D2; }
.cat-pill--side { background: rgba(52, 199, 89, .13); color: #1E7A34; }
.cat-pill--review { background: rgba(175, 82, 222, .13); color: #8944AB; }

/* 分类路径「AI 学习 / 行业动态」：一级加粗、次级稍弱，层级一眼可辨。
   分隔符由 implode 拼接，只会落在两个片段之间，首尾不会出现多余的「/」。 */
.cat-pill__sep {
	display: inline-block;
	margin: 0 5px;
	font-weight: 400;
	opacity: .45;
}
.cat-pill__seg--lvl0 { font-weight: 700; }
.cat-pill__seg:not(.cat-pill__seg--lvl0) { font-weight: 500; opacity: .82; }
:root[data-theme="dark"] .cat-pill { color: var(--lm-blue-text); }
:root[data-theme="dark"] .cat-pill--learning { color: var(--lm-blue-text); }
:root[data-theme="dark"] .cat-pill--news { color: #FFD60A; }
:root[data-theme="dark"] .cat-pill--side { color: #30D158; }
:root[data-theme="dark"] .cat-pill--review { color: #DA8FFF; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .cat-pill { color: var(--lm-blue-text); }
	:root:not([data-theme="light"]) .cat-pill--learning { color: var(--lm-blue-text); }
	:root:not([data-theme="light"]) .cat-pill--news { color: #FFD60A; }
	:root:not([data-theme="light"]) .cat-pill--side { color: #30D158; }
	:root:not([data-theme="light"]) .cat-pill--review { color: #DA8FFF; }
}

/* ================================================================
   11. 订阅区块
   ================================================================ */
.subscribe {
	position: relative;
	overflow: hidden;
	border-radius: var(--lm-r-xl);
	background: var(--lm-fill);
	padding: clamp(40px, 6vw, 72px) clamp(28px, 5vw, 64px);
	text-align: center;
}
:root[data-theme="dark"] .subscribe { background: linear-gradient(160deg, #1C1C1E, #101014); }
.subscribe__title { margin: 0 0 10px; font-size: var(--lm-fs-h2); font-weight: 600; letter-spacing: -.028em; }
.subscribe__desc {
	max-width: 46ch; margin: 0 auto var(--lm-sp-6);
	font-size: var(--lm-fs-sm); color: var(--lm-ink-3); line-height: 1.6;
}
.subscribe__form {
	display: flex; gap: 10px; max-width: 480px; margin-inline: auto;
	flex-wrap: wrap;
}
.subscribe__form input { flex: 1 1 240px; }
.subscribe__form button {
	flex: 0 0 auto;
	padding: 11px 26px; border: 0; border-radius: var(--lm-r-pill);
	background: var(--lm-blue); color: #fff;
	font-size: var(--lm-fs-sm); font-weight: 500; cursor: pointer;
	transition: background .2s;
}
.subscribe__form button:hover { background: var(--lm-blue-deep); }
.subscribe__note { margin-top: var(--lm-sp-4); font-size: var(--lm-fs-2xs); color: var(--lm-ink-4); }
.subscribe__msg { margin-top: var(--lm-sp-4); font-size: var(--lm-fs-sm); min-height: 1.4em; }
.subscribe__msg.is-ok { color: var(--lm-green); }
.subscribe__msg.is-err { color: var(--lm-red); }

/* ================================================================
   12. 页脚
   ================================================================ */
.site-footer {
	margin-top: clamp(64px, 8vw, 112px);
	padding-top: clamp(48px, 6vw, 80px);
	/* 原为 calc(var(--lm-tabbar-h) + sp-5)：tabbar 只在 ≤1024px 显示，
	   但此值全断点生效，桌面端白白多出 58px 空白。改引 --lm-safe-bottom。 */
	padding-bottom: calc(var(--lm-safe-bottom) + var(--lm-sp-5));
	background: var(--lm-bg);
	border-top: 1px solid var(--lm-hairline);
	font-size: var(--lm-fs-xs);
	color: var(--lm-ink-3);
}
.footer-grid {
	display: grid;
	grid-template-columns: minmax(240px, 1.5fr) repeat(3, minmax(120px, 1fr));
	gap: var(--lm-sp-7) var(--lm-sp-5);
	padding-bottom: var(--lm-sp-7);
}
@media (max-width: 860px) {
	.footer-grid { grid-template-columns: 1fr 1fr; gap: var(--lm-sp-6) var(--lm-sp-5); }
	.footer-brand { grid-column: 1 / -1; }
}

.footer-brand__link {
	display: flex; align-items: center; gap: 10px;
	margin-bottom: var(--lm-sp-4); text-decoration: none;
}
.footer-brand__logo { max-height: 36px; width: auto; border-radius: 8px; flex: 0 0 auto; }
.footer-brand__word { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.footer-brand__name { font-size: 17px; font-weight: 600; color: var(--lm-ink); letter-spacing: -.02em; }
.footer-brand__tag { font-size: var(--lm-fs-2xs); color: var(--lm-ink-3); letter-spacing: .02em; }
.footer-brand__link:hover .footer-brand__name { color: var(--lm-blue-text); }
.footer-brand__desc { margin: 0 0 var(--lm-sp-4); max-width: 34ch; line-height: 1.65; }

.social-row { display: flex; gap: 8px; }
.social-row a {
	display: grid; place-items: center;
	width: 34px; height: 34px;
	border: 1px solid var(--lm-border);
	border-radius: 50%;
	color: var(--lm-ink-3);
	transition: color .2s, border-color .2s, background .2s, transform .2s;
}
.social-row a:hover { color: var(--lm-blue-text); border-color: var(--lm-blue); background: var(--lm-blue-soft); transform: translateY(-2px); }
.social-row svg { width: 16px; height: 16px; }
/* 社交单字标：与 16px 线性图标保持同等视觉体量（字重视觉补偿后取 600） */
.social-row .social-glyph {
	font-size: 15px;
	line-height: 1;
	font-weight: 600;
	letter-spacing: 0;
	user-select: none;
}

.footer-nav-title {
	margin: 0 0 var(--lm-sp-4);
	font-size: var(--lm-fs-xs);
	font-weight: 600;
	color: var(--lm-ink);
	letter-spacing: .01em;
}
.footer-nav-items { list-style: none; margin: 0; padding: 0; }
.footer-nav-items li { margin-bottom: var(--lm-sp-3); }
.footer-nav-items a { color: var(--lm-ink-3); transition: color .2s; }
.footer-nav-items a:hover { color: var(--lm-ink); }

.footer-bottom {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: var(--lm-sp-3) var(--lm-sp-5);
	padding-top: var(--lm-sp-5);
	border-top: 1px solid var(--lm-hairline);
}
.footer-bottom a { color: var(--lm-ink-3); }
.footer-bottom a:hover { color: var(--lm-ink); }
.footer-bottom__links { display: flex; flex-wrap: wrap; gap: var(--lm-sp-4); }
.footer-platforms { margin-top: 6px; opacity: .8; }
/* ICP 备案号：与版权同行，用 · 分隔 */
.icp-number {
	display: inline-block;
	margin-left: 10px;
	color: var(--lm-ink-4);
	font-size: var(--lm-fs-2xs);
}
.icp-number::before { content: '·'; margin-right: 10px; opacity: .5; }

/* 回到顶部 */
.to-top {
	position: fixed;
	right: 20px;
	/* 同页脚：仅在 tabbar 实际存在时才抬升，并叠加 iOS 底部安全区，
	   否则 iPhone 上按钮会被 tabbar + home indicator 压掉约 14px。 */
	bottom: calc(var(--lm-safe-bottom) + 20px);
	z-index: 800;
	display: grid; place-items: center;
	width: 42px; height: 42px;
	border: 1px solid var(--lm-hairline);
	border-radius: 50%;
	background: color-mix(in srgb, var(--lm-surface) 80%, transparent);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow: var(--lm-shadow-md);
	color: var(--lm-ink-2);
	cursor: pointer;
	opacity: 0; visibility: hidden; transform: translateY(10px);
	transition: opacity .25s, transform .25s, visibility .25s, color .2s;
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { color: var(--lm-blue-text); }
.to-top svg { width: 17px; height: 17px; }

/* ================================================================
   13. 移动端底部标签栏
   ================================================================ */
.tabbar {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 890;
	display: none;
	height: var(--lm-tabbar-h);
	background: color-mix(in srgb, var(--lm-bg) 88%, transparent);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-top: 1px solid var(--lm-hairline);
	padding-bottom: env(safe-area-inset-bottom);
}
.tabbar__inner {
	display: flex; align-items: stretch; height: 100%;
	max-width: 640px; margin-inline: auto;
}
.tabbar__item {
	flex: 1;
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
	color: var(--lm-ink-4);
	font-size: var(--lm-fs-2xs); /* 原 10px：中文在 10px 下笔画糊，且 <12px 触发 iOS 自动放大 */
	transition: color .2s;
}
.tabbar__item svg { width: 21px; height: 21px; }
.tabbar__item.is-active { color: var(--lm-blue-text); }

/* tabbar 出现的同时，把「底部固定栏占位」令牌置为真实值。
   断点必须与上面 .tabbar 的显示断点严格一致，否则页脚留白与 tabbar
   会互相错位。tabbar 自身已通过 padding-bottom 吃掉 iOS 安全区，
   故此处再叠加 env() 供 to-top 抬升使用。

   阈值取 768px 而非 1024px：768–1024px（iPad 竖屏 / 小尺寸平板）屏幕高度
   与宽度都够，用顶部汉堡菜单（.nav-toggle，阈值 1024px）导航更合适，
   底部 tabbar 反而挤占正文高度。三者分工：
     > 1024px          顶部横向主导航
     769–1024px        顶部汉堡菜单（--lm-safe-bottom = 0）
     ≤ 768px           汉堡菜单 + 底部 tabbar（--lm-safe-bottom = 58px + 安全区）
   注意：触控区 44px 的兜底仍保持 1024px 阈值（见文件末尾），
   因为 iPad 同样是触屏设备，不能因为 tabbar 收窄就一起收窄。 */
@media (max-width: 768px) {
	:root { --lm-safe-bottom: calc(var(--lm-tabbar-h) + env(safe-area-inset-bottom, 0px)); }
	.tabbar { display: block; }
}

/* ================================================================
   14. 归档 / 搜索页头
   ================================================================ */
.page-head {
	padding-block: clamp(32px, 4vw, 56px) var(--lm-sp-6);
	border-bottom: 1px solid var(--lm-hairline);
	margin-bottom: var(--lm-sp-6);
}
.breadcrumb {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
	font-size: var(--lm-fs-xs); color: var(--lm-ink-3); margin-bottom: var(--lm-sp-4);
}
.breadcrumb a { color: var(--lm-ink-3); }
.breadcrumb a:hover { color: var(--lm-blue-text); }
.breadcrumb .sep { opacity: .4; }
.breadcrumb [aria-current] { color: var(--lm-ink-2); }

.page-title {
	margin: 0;
	font-size: var(--lm-fs-h1);
	font-weight: 600;
	letter-spacing: -.03em;
}
.page-desc {
	margin: var(--lm-sp-3) 0 0;
	max-width: 58ch;
	font-size: var(--lm-fs-sm);
	color: var(--lm-ink-3);
	line-height: 1.65;
}
/* 分类描述存进数据库时已经过 wpautop，自带 <p>。
   外层容器用 div 承接（用 p 会导致 <p> 套 <p> 被浏览器拆开，
   描述文字反而吃不到上面这些样式），这里再抹掉内层 p 的默认 margin。 */
.page-desc p { margin: 0; }
.page-desc p + p { margin-top: var(--lm-sp-2); }
.page-count { margin-top: var(--lm-sp-3); font-size: var(--lm-fs-xs); color: var(--lm-ink-4); }

/* ================================================================
   15. 单篇文章
   ================================================================ */
.single-head {
	padding-block: clamp(32px, 4vw, 56px) var(--lm-sp-5);
	text-align: center;
}
.single-title {
	/* 24ch → 48ch：用户要求标题区宽度翻倍，长标题不再折成三四行 */
	max-width: 48ch;
	margin: var(--lm-sp-4) auto var(--lm-sp-4);
	/* 字号调整为原来的 80%（30/3.8vw/46 → 24/3.04vw/37） */
	font-size: clamp(24px, 3.04vw, 37px);
	font-weight: 600;
	/* 原 1.15 / -.032em：中文多行标题行间几乎贴合、字距过紧 */
	line-height: 1.22;
	letter-spacing: -.018em;
	text-wrap: balance;
}
.single-meta {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px;
	font-size: var(--lm-fs-xs); color: var(--lm-ink-3);
}
.single-meta a { color: var(--lm-ink-3); }
.single-meta a:hover { color: var(--lm-blue-text); }
.single-meta img.avatar { border-radius: 50%; }

.post-hero {
	border-radius: var(--lm-r-xl);
	overflow: hidden;
	margin-bottom: var(--lm-sp-7);
	box-shadow: var(--lm-shadow-md);
	background: var(--lm-fill);
}
.post-hero img { width: 100%; }

.entry-content { font-size: 17px; line-height: 1.75; letter-spacing: -.003em; }
.entry-content > *:first-child { margin-top: 0; }
.entry-content h2 {
	margin-top: 2em;
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: 600;
	letter-spacing: -.025em;
}
.entry-content h3 { margin-top: 1.6em; font-size: 20px; font-weight: 600; }
.entry-content p { margin: 0 0 1.25em; }
.entry-content a { color: var(--lm-blue-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.entry-content a:hover { text-decoration-thickness: 2px; }
.entry-content ul, .entry-content ol { margin: 0 0 1.25em; padding-left: 1.4em; }
.entry-content li { margin-bottom: .5em; }
.entry-content img { border-radius: var(--lm-r-md); }
.entry-content figure { margin: 1.8em 0; }
.entry-content figcaption { font-size: var(--lm-fs-xs); color: var(--lm-ink-3); text-align: center; margin-top: .6em; }
.entry-content hr { margin: 2.6em 0; }

/* 首字下沉（编辑精选文章可选） */
.entry-content > p.has-dropcap:first-letter {
	float: left;
	font-size: 3.4em;
	line-height: .85;
	font-weight: 600;
	margin: .05em .12em 0 0;
	color: var(--lm-ink);
}

.entry-tags {
	display: flex; flex-wrap: wrap; gap: 8px;
	margin-top: var(--lm-sp-7); padding-top: var(--lm-sp-5);
	border-top: 1px solid var(--lm-hairline);
}

.author-box {
	display: flex; gap: var(--lm-sp-4); align-items: flex-start;
	margin-top: var(--lm-sp-6);
	padding: var(--lm-sp-5);
	border-radius: var(--lm-r-lg);
	background: var(--lm-fill);
}
.author-box__avatar { flex: 0 0 auto; border-radius: 50%; overflow: hidden; }
.author-box__name { margin: 0 0 4px; font-size: var(--lm-fs-sm); font-weight: 600; }
.author-box__bio { margin: 0; font-size: var(--lm-fs-xs); color: var(--lm-ink-3); line-height: 1.6; }
@media (max-width: 600px) { .author-box { flex-direction: column; } }

.post-nav {
	display: grid; grid-template-columns: 1fr 1fr; gap: var(--lm-sp-4);
	margin-top: var(--lm-sp-6);
}
@media (max-width: 700px) { .post-nav { grid-template-columns: 1fr; } }
.post-nav__item {
	padding: var(--lm-sp-5);
	border: 1px solid var(--lm-hairline);
	border-radius: var(--lm-r-lg);
	background: var(--lm-surface);
	transition: border-color .22s, transform .22s;
}
.post-nav__item:hover { border-color: var(--lm-border-strong); transform: translateY(-2px); text-decoration: none; }
.post-nav__item--next { text-align: right; }
@media (max-width: 700px) { .post-nav__item--next { text-align: left; } }
.post-nav__label { display: block; font-size: var(--lm-fs-2xs); color: var(--lm-ink-4); margin-bottom: 6px; }
.post-nav__title { font-size: var(--lm-fs-sm); font-weight: 500; color: var(--lm-ink); line-height: 1.5; }

/* 相关阅读 */
.related { margin-top: var(--lm-sp-9); }

/* ================================================================
   16. 工具详情页
   ================================================================ */
.tool-hero {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: var(--lm-sp-5);
	align-items: center;
	padding-block: clamp(28px, 4vw, 48px) var(--lm-sp-6);
	border-bottom: 1px solid var(--lm-hairline);
	margin-bottom: var(--lm-sp-7);
}
@media (max-width: 780px) {
	.tool-hero { grid-template-columns: auto minmax(0, 1fr); }
	.tool-hero__actions { grid-column: 1 / -1; }
	.tool-hero__actions .btn { flex: 1; }
}
.tool-hero__logo {
	width: 72px; height: 72px;
	border-radius: 18px;
	overflow: hidden;
	background: var(--lm-fill);
	box-shadow: var(--lm-shadow-sm);
	display: grid; place-items: center;
}
.tool-hero__logo img { width: 100%; height: 100%; object-fit: cover; }
.tool-hero__logo svg { width: 32px; height: 32px; color: var(--lm-ink-4); }
.tool-hero__title { margin: 0; font-size: clamp(26px, 3vw, 36px); font-weight: 600; letter-spacing: -.03em; line-height: 1.2; }
.tool-hero__title-wrap {
	display: flex;
	align-items: center;
	gap: var(--lm-sp-3);
	margin: 0 0 8px;
}
.tool-hero__price {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 11px;
	border-radius: var(--lm-r-pill);
	background: var(--lm-blue-soft, var(--lm-fill));
	color: var(--lm-blue-text);
	font-size: 1em;
	line-height: 1;
	font-weight: 500;
	white-space: nowrap;
}
.tool-hero__price svg { width: 1em; height: 1em; }
@media (max-width: 560px) {
	.tool-hero__price { padding: 4px 9px; font-size: .875em; }
}
/* 定价标签旁边的补充说明（如「免费可用，高级功能需付费」）：
   比裸一个「免费增值」更不容易被误读成完全免费。 */
.tool-hero__price-note { font-size: var(--lm-fs-xs); color: var(--lm-ink-4); }
.tool-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* 适合谁 / 不适合谁
   919 款工具里「有什么功能」大家都有，用户真正的问题是「该选哪个」。
   明确写出限制条件，是工具库里最稀缺、也最能建立信任的信息。 */
.tool-fit { margin-top: var(--lm-sp-8); }
.tool-fit__title { margin: 0 0 var(--lm-sp-4); font-size: var(--lm-fs-h4); font-weight: 700; }
.tool-fit__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--lm-sp-4); }
.tool-fit__col {
	padding: var(--lm-sp-5) var(--lm-sp-6);
	border: 1px solid var(--lm-hairline);
	border-radius: var(--lm-r-lg);
	background: var(--lm-surface);
}
.tool-fit__label { margin: 0 0 var(--lm-sp-3); font-size: var(--lm-fs-sm); font-weight: 700; }
.tool-fit__col--yes .tool-fit__label { color: var(--lm-blue-text); }
.tool-fit__col--no .tool-fit__label { color: var(--lm-ink-3); }
.tool-fit__list { margin: 0; padding-left: 1.15em; }
.tool-fit__list li { margin-bottom: 6px; font-size: var(--lm-fs-sm); line-height: 1.75; color: var(--lm-ink-2); }
.tool-fit__list li:last-child { margin-bottom: 0; }

/* 编辑点评：与「搬运信息」区隔开，让详情页有本站的观点 */
.tool-review {
	margin-top: var(--lm-sp-8);
	padding: var(--lm-sp-5) var(--lm-sp-6);
	border-left: 2px solid var(--lm-blue);
	border-radius: 0 var(--lm-r-md) var(--lm-r-md) 0;
	background: var(--lm-fill);
}
.tool-review__title { margin: 0 0 var(--lm-sp-3); font-size: var(--lm-fs-sm); font-weight: 700; }
.tool-review__text { margin: 0; font-size: var(--lm-fs-sm); line-height: 1.8; color: var(--lm-ink-2); }
.tool-hero__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ================================================================
   17. 侧边栏与小工具
   ================================================================ */
.has-sidebar .content-area {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
}
@media (max-width: 1000px) {
	.has-sidebar .content-area { grid-template-columns: 1fr; }
}

.widget { margin-bottom: var(--lm-sp-6); }
.widget:last-child { margin-bottom: 0; }
.widget-title {
	margin: 0 0 var(--lm-sp-4);
	font-size: var(--lm-fs-xs);
	font-weight: 600;
	color: var(--lm-ink);
	letter-spacing: .02em;
}
.widget ul { list-style: none; margin: 0; padding: 0; }
.widget ul li { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--lm-hairline); font-size: var(--lm-fs-xs); }
.widget ul li:last-child { border-bottom: 0; }
.widget a { color: var(--lm-ink-2); }
.widget a:hover { color: var(--lm-blue-text); }
.widget select { width: 100%; }
.widget_search .search-form { flex-direction: column; }
.widget_search .search-submit { width: 100%; }

.tagcloud { display: flex; flex-wrap: wrap; gap: 7px; }
.tagcloud a {
	padding: 5px 12px;
	border: 1px solid var(--lm-border);
	border-radius: var(--lm-r-pill);
	font-size: var(--lm-fs-2xs) !important; /* !important 用于覆盖 WP 标签云内联字号 */
	color: var(--lm-ink-3);
}
.tagcloud a:hover { border-color: var(--lm-blue); color: var(--lm-blue-text); background: var(--lm-blue-soft); }

/* 目录（TOC） */
.toc {
	position: sticky;
	top: calc(var(--lm-header-h) + var(--lm-sp-5));
	padding: var(--lm-sp-5);
	border: 1px solid var(--lm-hairline);
	border-radius: var(--lm-r-lg);
	background: var(--lm-surface);
}
.toc__list { list-style: none; margin: 0; padding: 0; font-size: var(--lm-fs-xs); }
.toc__list li { margin: 0; padding: 0; border: 0; }
.toc__list a {
	display: block; padding: 7px 0 7px 12px;
	border-left: 2px solid var(--lm-border);
	color: var(--lm-ink-3);
	line-height: 1.5;
	transition: color .2s, border-color .2s;
}
.toc__list a:hover { color: var(--lm-blue-text); }
.toc__list a.is-active { color: var(--lm-blue-text); border-left-color: var(--lm-blue); font-weight: 500; }
.toc__list .toc-h3 a { padding-left: 24px; }

/* ================================================================
   18. 分页
   ================================================================ */
.pagination {
	display: flex; justify-content: center;
	margin-top: var(--lm-sp-8);
}
.nav-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 38px; height: 38px; padding: 0 13px;
	border: 1px solid var(--lm-border);
	border-radius: var(--lm-r-pill);
	background: var(--lm-surface);
	color: var(--lm-ink-2);
	font-size: var(--lm-fs-xs);
	font-weight: 500;
	transition: background .2s, color .2s, border-color .2s;
}
a.page-numbers:hover { border-color: var(--lm-ink-4); color: var(--lm-ink); }
.page-numbers.current { background: var(--lm-ink); border-color: var(--lm-ink); color: var(--lm-bg); }
.page-numbers.dots { border: 0; background: none; min-width: auto; }

/* ================================================================
   19. 搜索表单
   ================================================================ */
.search-form { display: flex; gap: 8px; }
.search-form label { flex: 1; }
.search-submit {
	padding: 10px 22px; border: 0; border-radius: var(--lm-r-pill);
	background: var(--lm-blue); color: #fff;
	font-size: var(--lm-fs-sm); font-weight: 500; cursor: pointer;
	transition: background .2s;
}
.search-submit:hover { background: var(--lm-blue-deep); }

/* ================================================================
   20. 404
   ================================================================ */
.error-404 { padding-block: clamp(64px, 10vw, 128px); text-align: center; }
.error-404__code {
	font-size: clamp(72px, 15vw, 148px);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -.05em;
	background: linear-gradient(120deg, var(--lm-blue), var(--lm-indigo) 60%, var(--lm-purple));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.error-404__desc { max-width: 40ch; margin: var(--lm-sp-4) auto var(--lm-sp-6); color: var(--lm-ink-3); }
.error-404__note { margin: var(--lm-sp-6) 0 0; font-size: var(--lm-fs-xs); color: var(--lm-ink-4); }
.error-404__note a { color: var(--lm-blue); text-decoration: underline; text-underline-offset: 2px; }
.error-404__note a:hover { color: var(--lm-blue-text); }

/* 搜索结果页的分页口径说明：避免「总数 66、分组加起来 30」看起来像漏内容 */
.search-note {
	margin: var(--lm-sp-5) 0 0;
	font-size: var(--lm-fs-xs);
	color: var(--lm-ink-4);
}

/* ================================================================
   21. 无结果
   ================================================================ */
.no-results {
	padding: var(--lm-sp-8) var(--lm-sp-5);
	text-align: center;
	border: 1px dashed var(--lm-border);
	border-radius: var(--lm-r-xl);
	background: var(--lm-surface);
	color: var(--lm-ink-3);
}
.no-results .search-form { max-width: 460px; margin: var(--lm-sp-5) auto 0; }

/* ================================================================
   22. 动效降级
   ================================================================ */
html.lm-js [data-reveal] {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .7s cubic-bezier(.32, .72, 0, 1), transform .7s cubic-bezier(.32, .72, 0, 1);
}
html.lm-js [data-reveal].is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	html.lm-js [data-reveal] { opacity: 1; transform: none; }
}

@media print {
	.site-header, .site-footer, .tabbar, .to-top, .search-panel, .topbar { display: none !important; }

	/* 补完打印样式：去掉底色与阴影省墨，展开外链 URL 保证纸上可读 */
	body { background: #fff !important; color: #000 !important; }
	* { box-shadow: none !important; text-shadow: none !important; }
	.entry-content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11pt; color: #555; word-break: break-all; }
	.entry-content img { max-width: 100% !important; }
	pre, code { background: #f5f5f5 !important; }
}

/* ================================================================
   23. 补充：代码复制按钮、评论、杂项
   ================================================================ */
.code-copy {
	position: absolute;
	right: 10px; top: 10px;
	padding: 4px 12px;
	border: 1px solid var(--lm-border);
	border-radius: var(--lm-r-pill);
	background: color-mix(in srgb, var(--lm-surface) 82%, transparent);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--lm-ink-3);
	font-size: var(--lm-fs-2xs);
	cursor: pointer;
	opacity: 0;
	transition: opacity .2s, color .2s, border-color .2s;
}
pre:hover .code-copy,
.code-copy:focus-visible { opacity: 1; }
.code-copy:hover { color: var(--lm-blue-text); border-color: var(--lm-blue); }

/* 上一页/下一页的箭头翻转 */
.page-numbers .lm-icon.is-prev { transform: rotate(180deg); }
.page-numbers { gap: 7px; }
.page-numbers .lm-icon { width: 14px; height: 14px; }
.page-numbers.prev .lm-icon,
.page-numbers.next .lm-icon { margin: 0 2px; }

/* 评论 */
.comments-area {
	margin-top: var(--lm-sp-8);
	padding-top: var(--lm-sp-6);
	border-top: 1px solid var(--lm-hairline);
}
.comments-title { font-size: var(--lm-fs-h3); margin-bottom: var(--lm-sp-5); }
.comment-list { list-style: none; margin: 0 0 var(--lm-sp-7); padding: 0; }
.comment-list .children { list-style: none; margin: 0; padding-left: var(--lm-sp-5); }
.comment-body {
	padding: var(--lm-sp-5);
	margin-bottom: var(--lm-sp-4);
	border-radius: var(--lm-r-lg);
	background: var(--lm-fill);
}
.comment-author { display: flex; align-items: center; gap: var(--lm-sp-3); margin-bottom: var(--lm-sp-3); }
.comment-author .avatar { border-radius: 50%; }
.comment-author cite { font-style: normal; font-weight: 600; font-size: var(--lm-fs-sm); color: var(--lm-ink); }
.comment-metadata { font-size: var(--lm-fs-2xs); color: var(--lm-ink-4); }
.comment-metadata a { color: var(--lm-ink-4); }
.comment-content { font-size: var(--lm-fs-sm); line-height: 1.7; }
.comment-content > *:last-child { margin-bottom: 0; }
.comment-reply-link { font-size: var(--lm-fs-xs); font-weight: 500; color: var(--lm-blue-text); }
.comment-awaiting-moderation {
	margin-top: .8em; padding: 7px 12px; border-radius: var(--lm-r-sm);
	background: var(--lm-blue-soft); color: var(--lm-blue-text); font-size: var(--lm-fs-xs);
}
.no-comments { color: var(--lm-ink-3); font-size: var(--lm-fs-sm); }

.comment-form { display: grid; gap: var(--lm-sp-4); }
.comment-form label { display: block; font-size: var(--lm-fs-xs); font-weight: 500; margin-bottom: 6px; }
.comment-form textarea { min-height: 130px; }
.comment-form .submit {
	justify-self: start;
	padding: 11px 28px; border: 0; border-radius: var(--lm-r-pill);
	background: var(--lm-blue); color: #fff;
	font-size: var(--lm-fs-sm); font-weight: 500; cursor: pointer;
	transition: background .2s;
}
.comment-form .submit:hover { background: var(--lm-blue-deep); }
.comment-notes, .logged-in-as { font-size: var(--lm-fs-xs); color: var(--lm-ink-3); }

/* 小工具细节 */
.widget_calendar table { width: 100%; text-align: center; }
.widget_calendar caption { font-weight: 600; padding-bottom: 8px; }
.widget_calendar #today { background: var(--lm-blue); color: #fff; border-radius: 6px; }
.widget_recent_entries .post-date { display: block; font-size: var(--lm-fs-2xs); color: var(--lm-ink-4); }
.widget_rss li { margin-bottom: 14px; }
.widget_rss .rss-date { display: block; font-size: var(--lm-fs-2xs); color: var(--lm-ink-4); }
.widget_rss .rssSummary { font-size: var(--lm-fs-xs); color: var(--lm-ink-3); }

/* 页脚小工具区 */
.footer-widget { font-size: var(--lm-fs-xs); color: var(--lm-ink-3); }

/* 收录标准说明：放在筛选栏上方，先讲清「凭什么收」再让人挑 */
.archive-note {
	margin: 0 0 var(--lm-sp-5);
	padding: var(--lm-sp-3) var(--lm-sp-4);
	border-left: 2px solid var(--lm-blue, var(--lm-hairline));
	border-radius: 0 var(--lm-r-md) var(--lm-r-md) 0;
	background: var(--lm-fill);
	font-size: var(--lm-fs-sm);
	line-height: 1.7;
	color: var(--lm-ink-3);
}
.archive-note a {
	color: var(--lm-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
	white-space: nowrap;
}
.archive-note a:hover { color: var(--lm-blue-text); }

/* 归档页筛选行 */
.filter-bar {
	display: flex; align-items: center; justify-content: space-between;
	gap: var(--lm-sp-4); flex-wrap: wrap;
	margin-bottom: var(--lm-sp-5);
}
.filter-bar__count { font-size: var(--lm-fs-xs); color: var(--lm-ink-4); }

/* 搜索结果分组 */
.search-group { margin-bottom: var(--lm-sp-8); }
.search-group__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: var(--lm-sp-4);
	font-size: var(--lm-fs-sm);
	font-weight: 600;
	color: var(--lm-ink-2);
}
.search-group__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 20px;
	padding: 0 7px;
	border-radius: var(--lm-r-pill);
	background: var(--lm-fill);
	color: var(--lm-ink-4);
	font-size: var(--lm-fs-2xs);
	font-weight: 500;
	font-variant-numeric: tabular-nums;
}

/* 首页「最新发布」左右分栏
   主卡改为 V4 的杂志大卡后需要更多横向空间，比例从 1.12fr 放宽到 1.4fr；
   align-items 由 start 改为 stretch，让右侧列表与主卡等高、底部对齐。 */
.content-area--split {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: stretch;
}
@media (max-width: 900px) {
	.content-area--split { grid-template-columns: 1fr; gap: var(--lm-sp-6); }
	.content-area--split .split-side { padding-top: var(--lm-sp-5); border-top: 1px solid var(--lm-hairline); }
}

/* 带目录的文章布局 */
.container--with-toc { max-width: 1080px; }
.content-area--toc {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 236px;
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
}
@media (max-width: 1000px) {
	.content-area--toc { grid-template-columns: 1fr; }
	.content-area--toc .toc { display: none; }
}

/* ================================================================
   20. 触屏触控区兜底
   —— 必须置于文件末尾：以下元素的基础尺寸定义分散在前面各节，
      同特异性的媒体查询规则只有出现在其后才会生效。

   阈值保持 1024px，与 tabbar 的 768px 故意不同：
   这一节针对的是「是否触屏」，不是「是否手机」。iPad / Android 平板
   （768–1024px）同样是触屏设备，触控目标必须保持 44px；
   tabbar 收窄到 768px 只是不再占用底部空间，与触控尺寸无关。
   ================================================================ */
@media (max-width: 1024px) {
	/* 鼠标时代的 34–36px 图标控件统一提到 44×44（WCAG 2.5.5 / HIG 最小触控目标）。
	   只放大热区，图标本身尺寸不变，视觉密度不受影响。 */
	.icon-btn { width: 44px; height: 44px; }
	.social-row a { width: 44px; height: 44px; }
	/* 热区放大到 44px 后，单字标同步上调一档，避免视觉上"字太小" */
	.social-row .social-glyph { font-size: 17px; }
	.topbar__close { padding: 10px; }
	/* 筛选 chip 高度约 35px，触屏下补足到 40px */
	.chip { padding-block: 10px; }
	/* 三个头部图标按钮各从 36 → 44px（+24px 总宽），
	   收窄间距补偿，避免 390px 屏上品牌区被挤压换行 */
	.header-actions { gap: 2px; margin-right: -6px; }
}

/* 移动端 Hero 折行拥挤：--lm-fs-display 下限 42px，390px 屏上
   容器仅约 342px，14 字标题要折 2–3 行。手机档降到 30–36px 并收窄 max-width。 */
@media (max-width: 480px) {
	.hero__title {
		font-size: clamp(30px, 8vw, 36px);
		max-width: 14ch;
		line-height: 1.18;
	}
}

/* 首页数据条：4 项在 320–480px 换行后，居中对齐会让末行孤立居中、上下间距失衡。
   窄屏改 2×2 grid，行列对齐更整齐。 */
@media (max-width: 560px) {
	.stat-strip {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--lm-sp-5) var(--lm-sp-4);
	}
	/* 订阅表单换行后按钮仅内容宽、与输入框宽度不齐 → 窄屏拉满 */
	.subscribe__form button { width: 100%; }
}

/* ================================================================
   17. 面包屑与页头间距
   ================================================================ */
/* 文章/页面/课程/工具详情页：面包屑是 .container 的首个子元素，
   直接贴在站点头部下方，需与 header 拉开留白（分类等归档页面包屑包在
   .page-head 内，已由 .page-head 的 padding-block 提供上间距，不受影响）。 */
.container > .breadcrumb { margin-top: var(--lm-sp-6); }

/* ================================================================
   18. 标签页（/tags）
   ================================================================ */
.tags-section { padding-bottom: var(--lm-sp-9); }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-chip {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 8px 14px; border-radius: 999px;
	background: var(--lm-fill); border: 1px solid var(--lm-hairline);
	font-size: var(--lm-fs-sm); color: var(--lm-ink-2);
	transition: border-color .2s, color .2s, background .2s;
}
.tag-chip:hover { border-color: var(--lm-border-strong); color: var(--lm-blue-text); background: var(--lm-blue-soft, var(--lm-fill)); text-decoration: none; }
.tag-count { font-size: var(--lm-fs-2xs); color: var(--lm-ink-4); font-variant-numeric: tabular-nums; }
.archive-empty { color: var(--lm-ink-3); }

/* ================================================================
   19. 课程详情信息网格
   ================================================================ */
.course-info { margin-top: var(--lm-sp-6); }
.course-info-grid {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px;
	background: var(--lm-hairline); border: 1px solid var(--lm-hairline); border-radius: var(--lm-r-lg); overflow: hidden;
}
.info-cell { background: var(--lm-surface); padding: var(--lm-sp-4) var(--lm-sp-5); display: flex; flex-direction: column; gap: 6px; }
.info-label { font-size: var(--lm-fs-2xs); color: var(--lm-ink-4); letter-spacing: .02em; }
.info-value { font-size: var(--lm-fs-sm); font-weight: 600; color: var(--lm-ink); }
.info-value.is-free { color: var(--lm-blue-text); }
/* 付费项说明：课程本身免费，陪跑服务可选 —— 必须说得比「价格 100」清楚 */
.course-info__note {
	margin: var(--lm-sp-3) 0 0;
	font-size: var(--lm-fs-xs);
	color: var(--lm-ink-4);
}

/* 学完你能做到 / 适合谁学 —— 详情页的转化信息，缺了用户无法判断要不要点开 */
.course-outline {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--lm-sp-5);
	margin-top: var(--lm-sp-6);
	text-align: left;
}
.course-outline__block {
	padding: var(--lm-sp-5) var(--lm-sp-6);
	border: 1px solid var(--lm-hairline);
	border-radius: var(--lm-r-lg);
	background: var(--lm-surface);
}
.course-outline__title {
	margin: 0 0 var(--lm-sp-3);
	font-size: var(--lm-fs-sm);
	font-weight: 700;
	color: var(--lm-ink);
}
.course-outline__list { margin: 0; padding-left: 1.15em; }
.course-outline__list li { margin-bottom: 6px; font-size: var(--lm-fs-sm); line-height: 1.75; color: var(--lm-ink-2); }
.course-outline__list li:last-child { margin-bottom: 0; }
.course-outline__text { margin: 0; font-size: var(--lm-fs-sm); line-height: 1.75; color: var(--lm-ink-2); }

/* 课程来源与版权声明：搬运的公开课必须注明原作者 */
.course-source {
	margin: var(--lm-sp-6) 0 0;
	padding-top: var(--lm-sp-4);
	border-top: 1px solid var(--lm-hairline);
	font-size: var(--lm-fs-xs);
	line-height: 1.8;
	color: var(--lm-ink-4);
}

/* 课程目录（课时列表）
   用 1px 间隙 + hairline 背景做分隔线，与 .course-info-grid 的分格语言保持一致。 */
.lesson-list { margin-top: var(--lm-sp-9); scroll-margin-top: calc(var(--lm-header-h) + var(--lm-sp-5)); }
.lesson-list-title {
	display: flex;
	align-items: baseline;
	gap: var(--lm-sp-2);
	margin: 0 0 var(--lm-sp-5);
	font-size: var(--lm-fs-h4);
	font-weight: 700;
	letter-spacing: -.01em;
	color: var(--lm-ink);
}
.lesson-count { font-size: var(--lm-fs-xs); font-weight: 500; letter-spacing: 0; color: var(--lm-ink-4); }
.lessons {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
	background: var(--lm-hairline);
	border: 1px solid var(--lm-hairline);
	border-radius: var(--lm-r-md);
	overflow: hidden;
}
.lesson-item { margin: 0; background: var(--lm-surface); }
.lesson-link {
	display: flex;
	align-items: center;
	gap: var(--lm-sp-3);
	padding: var(--lm-sp-4) var(--lm-sp-5);
	color: var(--lm-ink-2);
	transition: background-color .18s, color .18s;
}
.lesson-link:hover { background: var(--lm-fill); color: var(--lm-ink); }
.lesson-index {
	flex: 0 0 20px;
	text-align: right;
	font-size: var(--lm-fs-xs);
	font-variant-numeric: tabular-nums;
	color: var(--lm-ink-4);
}
.lesson-play {
	flex: 0 0 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: var(--lm-r-pill);
	background: var(--lm-blue-soft);
	color: var(--lm-blue-text);
}
.lesson-play svg { width: 12px; height: 12px; }
.lesson-info { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--lm-sp-2); }
.lesson-title {
	min-width: 0;
	font-size: var(--lm-fs-sm);
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.lesson-free {
	flex: 0 0 auto;
	padding: 1px 7px;
	border-radius: var(--lm-r-pill);
	background: var(--lm-blue-soft);
	color: var(--lm-blue-text);
	font-size: var(--lm-fs-2xs);
	font-weight: 600;
}
.lesson-duration {
	flex: 0 0 auto;
	font-size: var(--lm-fs-xs);
	font-variant-numeric: tabular-nums;
	color: var(--lm-ink-4);
}
.lesson-pagination { margin-top: var(--lm-sp-5); }

/* 无课时时的占位提示 */
.single-notice {
	margin-top: var(--lm-sp-8);
	padding: var(--lm-sp-5) var(--lm-sp-6);
	border: 1px dashed var(--lm-border-strong);
	border-radius: var(--lm-r-md);
	background: var(--lm-surface);
	color: var(--lm-ink-4);
	font-size: var(--lm-fs-sm);
	text-align: center;
}

/* ================================================================
   20. 工具详情参数表
   ================================================================ */
.tool-specs {
	display: grid; gap: 1px; margin-top: var(--lm-sp-6);
	background: var(--lm-hairline); border: 1px solid var(--lm-hairline); border-radius: var(--lm-r-lg); overflow: hidden;
}
.tool-spec { background: var(--lm-surface); padding: var(--lm-sp-4) var(--lm-sp-5); display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: var(--lm-sp-4); }
.tool-spec__label { font-size: var(--lm-fs-xs); color: var(--lm-ink-4); padding-top: 2px; }
.tool-spec__value { font-size: var(--lm-fs-sm); color: var(--lm-ink); word-break: break-all; }
.tool-spec__link { color: var(--lm-blue-text); text-decoration: underline; text-underline-offset: 3px; }
.tool-spec__chips { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 560px) {
	.tool-spec { grid-template-columns: 1fr; gap: 4px; }
}

/* 工具 Logo：优先特色图，其次官网 favicon（加载失败回退到网格图标） */
.tool-hero__logo { position: relative; }
.tool-hero__favicon { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.tool-hero__fallback { display: grid; place-items: center; width: 100%; height: 100%; }
.tool-hero__fallback svg { width: 32px; height: 32px; color: var(--lm-ink-4); }