/* ============================================================
   HM Skill 板块布局（v2.2）——按 Skillry 的实测区块规格重做
   列表页 / 详情页 / 定价页（定价 v2.2 收进板块内：/skills/pricing/）
   v2.2 新增：板块内二级导航 .hm-subnav（全部 Skill ｜ 定价 ｜ 分类）

   约定：
   - 不引入 CSS 框架、不新增色板；颜色全部来自 hm-shop 的 :root token
     （--ink / --ink-soft / --accent / --surface / --line / --ok-soft ...）
   - 这里只补「布局与尺度」：栅格列宽、侧栏、卡片比例、区块高度、断点
   - 局部尺寸变量统一 hm- 前缀，避免和插件样式打架
   ============================================================ */

:root {
	--sk-sidebar: 236px;      /* 列表页左侧筛选栏宽度（规格 236px） */
	--sk-gap: 16px;           /* 栅格行/列间距（规格 16px） */
	--sk-card-radius: 22px;   /* 卡片与缩略图圆角（规格 22px） */
	--sk-panel-radius: 20px;  /* 详情页决策面板圆角（规格 20px） */
	--sk-plan-radius: 24px;   /* 价格卡圆角（规格 24px） */
	--sk-header-h: 64px;      /* 粘性 header 高度（规格 64px） */
	--sk-promo-h: 0px;        /* 促销条高度，body.hm-has-promo 时变 44px */
}

body.hm-has-promo { --sk-promo-h: 44px; }

/* ---------- 0/1. 促销条 + 粘性 header ---------- */

.hm-promo {
	position: sticky;
	top: 0;
	z-index: 60;
	height: 44px;
	background: var(--ink);
	color: #f7f2e8;
	display: flex;
	align-items: center;
	font-size: 12.5px;
}
.hm-promo-in { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; height: 44px; }
.hm-promo-dot {
	width: 6px; height: 6px; border-radius: 50%;
	background: #4ade80; flex: 0 0 auto;
	box-shadow: 0 0 0 3px rgba(74, 222, 128, .18);
}
.hm-promo-tx { margin: 0; font-size: 12.5px; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-promo-cta { font-weight: 700; color: #fff; white-space: nowrap; border-bottom: 1px solid rgba(255, 255, 255, .45); }
.hm-promo-cta:hover { color: var(--accent-bright); border-color: var(--accent-bright); }
.hm-promo-x {
	margin-left: 8px; margin-right: 12px; flex: 0 0 auto;
	width: 24px; height: 24px; flex: 0 0 auto;
	border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .12); color: #fff;
	font-size: 14px; line-height: 1; cursor: pointer;
}
.hm-promo-x:hover { background: rgba(255, 255, 255, .24); }

/* header 粘在促销条下面（关闭促销条后 body 类去掉，自动回到 0） */
.hm-header { top: var(--sk-promo-h); }
.hm-header-in { height: var(--sk-header-h); }
.hm-mobile-nav { background: rgba(251, 246, 236, .96); }

/* ============================================================
   缩略图占位（规格：16:9、圆角 22、1px 黑 10% 描边、真实成品图优先）
   我们暂时没有成品图库，用 CSS 画「成品排版示意」，换成 <img> 时外框不变。
   ============================================================ */

.hm-prev {
	position: relative;
	aspect-ratio: 16 / 9;
	width: 100%;
	overflow: hidden;
	border-radius: var(--sk-card-radius);
	border: 1px solid rgba(0, 0, 0, .10);
	display: flex;
	flex-direction: column;
	background: linear-gradient(135deg, #fff3e6, #f6e7d3);
}
.hm-prev--thumb { border-radius: 12px; }
.hm-prev--peach  { background: linear-gradient(135deg, #ffe9e1, #ffd7c9); }
.hm-prev--violet { background: linear-gradient(135deg, #f1ecff, #ded2ff); }
.hm-prev--sky    { background: linear-gradient(135deg, #e6f3ff, #cde6ff); }
.hm-prev--mint   { background: linear-gradient(135deg, #e6f8ef, #cfeedd); }

.hm-prev-bar {
	display: flex; align-items: center; gap: 4px;
	padding: 7px 9px 0;
	height: 22px; flex: 0 0 auto;
}
.hm-prev-bar span {
	width: 5px; height: 5px; border-radius: 50%;
	background: rgba(32, 28, 48, .22);
}
.hm-prev-bar em {
	margin-left: auto;
	font-style: normal;
	font-size: 9px;
	font-weight: 800;
	letter-spacing: .04em;
	color: rgba(32, 28, 48, .42);
	background: rgba(255, 255, 255, .55);
	border-radius: 999px;
	padding: 1px 7px;
}

.hm-prev-body {
	position: relative;
	flex: 1;
	margin: 6px 9px 9px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .62);
	padding: 9px 10px;
	display: block;
	overflow: hidden;
}

.hm-prev-t {
	height: 9px; width: 62%;
	border-radius: 3px;
	background: rgba(32, 28, 48, .26);
	margin-bottom: 5px;
}
.hm-prev-t--short { width: 34%; height: 6px; background: rgba(32, 28, 48, .16); }

.hm-prev-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5px;
	margin-top: 8px;
}
.hm-prev-grid i { display: block; height: 22px; border-radius: 5px; background: rgba(32, 28, 48, .10); }
.hm-prev-grid i:nth-child(2) { background: var(--accent-ring-soft); }
.hm-prev-grid i:nth-child(3) { background: rgba(91, 33, 182, .12); }
.hm-prev-grid i:nth-child(4) { background: rgba(29, 122, 74, .14); }

.hm-prev-lines { margin-top: 8px; display: grid; gap: 4px; }
.hm-prev-lines b { display: block; height: 4px; border-radius: 2px; background: rgba(32, 28, 48, .13); }
.hm-prev-lines b:nth-child(2) { width: 88%; }
.hm-prev-lines b:nth-child(3) { width: 62%; }

.hm-prev-play {
	position: absolute;
	right: 12px; bottom: 10px;
	width: 26px; height: 26px; border-radius: 50%;
	background: rgba(32, 28, 48, .72);
	display: none;
}
.hm-prev-play::after {
	content: "";
	position: absolute; left: 10px; top: 8px;
	border-left: 8px solid #fff;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
}

.hm-prev-chip {
	position: absolute;
	left: 10px; bottom: 8px;
	max-width: calc(100% - 60px);
	font-size: 9px; font-weight: 700;
	color: rgba(32, 28, 48, .55);
	background: rgba(255, 255, 255, .78);
	border-radius: 999px;
	padding: 2px 8px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 详情页大图：同一套骨架按比例放大，避免大尺寸下显得空 */
.hm-prev--lg .hm-prev-bar { height: 34px; padding: 12px 16px 0; }
.hm-prev--lg .hm-prev-bar span { width: 8px; height: 8px; }
.hm-prev--lg .hm-prev-bar em { font-size: 11px; padding: 2px 10px; }
.hm-prev--lg .hm-prev-body { margin: 14px 16px 16px; border-radius: 16px; padding: 22px 24px; }
.hm-prev--lg .hm-prev-t { height: 20px; width: 56%; border-radius: 6px; margin-bottom: 10px; }
.hm-prev--lg .hm-prev-t--short { height: 12px; width: 30%; }
.hm-prev--lg .hm-prev-grid { grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.hm-prev--lg .hm-prev-grid i { height: 76px; border-radius: 10px; }
.hm-prev--lg .hm-prev-lines { gap: 9px; margin-top: 16px; }
.hm-prev--lg .hm-prev-lines b { height: 8px; border-radius: 4px; }
.hm-prev--lg .hm-prev-chip { font-size: 11px; padding: 4px 12px; left: 20px; bottom: 16px; max-width: 60%; }
.hm-prev--lg .hm-prev-play { width: 52px; height: 52px; right: 24px; bottom: 20px; }
.hm-prev--lg .hm-prev-play::after { left: 21px; top: 16px; border-left-width: 16px; border-top-width: 10px; border-bottom-width: 10px; }

/* 版式：图片=九宫格 / 幻灯片=标题+文字行 / 视频=播放框 / 网页=标题+块+文字行 */
.hm-prev--l1 .hm-prev-t,
.hm-prev--l1 .hm-prev-lines { display: none; }
.hm-prev--l2 .hm-prev-grid { display: none; }
.hm-prev--l3 .hm-prev-grid,
.hm-prev--l3 .hm-prev-lines { display: none; }
.hm-prev--l3 .hm-prev-play { display: block; }
.hm-prev--l4 .hm-prev-grid i { height: 14px; }

/* ============================================================
   卡片（规格：273×184 骨架；16:9 缩略图 + 单行标题 26px + 右侧 agent 叠标
   + 右下角下载/收藏；hover 上移 4px，右上类型图标淡出，缩略图换图）
   我们按结论补了标签位与价格/按钮行，所以卡更高，宽度与栅格不变。
   ============================================================ */

.hm-sk-card {
	min-width: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--sk-card-radius);
	transition: transform .3s ease;
	overflow: hidden;
}
.hm-sk-card:hover { transform: translateY(-4px); }
.hm-sk-card-in { display: block; height: 100%; }

.hm-sk-thumb { position: relative; margin: 0; }
.hm-sk-thumb .hm-prev { border-radius: var(--sk-card-radius); border-width: 0; }
.hm-sk-thumb-alt {
	position: absolute; inset: 0;
	opacity: 0; transition: opacity .3s ease;
	pointer-events: none;
}
.hm-sk-thumb-alt .hm-prev { border-radius: var(--sk-card-radius); border-width: 0; }
.hm-sk-card:hover .hm-sk-thumb-alt { opacity: 1; }

.hm-sk-badge {
	position: absolute; left: 10px; top: 10px;
	font-size: 10px; font-weight: 800; letter-spacing: .06em;
	padding: 3px 8px; border-radius: 999px;
	border: 1px solid rgba(0, 0, 0, .15);
	box-shadow: 0 1px 4px rgba(32, 28, 48, .14);
	background: #fff;
}
.hm-sk-badge--free { background: var(--ok-soft); color: var(--ok); }
/* v2.4：示例技能角标（真实实跑产物的占位商品，明确告诉访客不是正式商品） */
.hm-sk-badge--demo { background: var(--ink); color: #fff; }
.hm-skd-pick--demo { background: var(--ink); color: #fff; }
.hm-skd-demo-note--top { margin: 0 0 10px; font-size: 12px; color: var(--accent-ink); font-weight: 700; }
.hm-sk-badge--pick { background: var(--accent-soft); color: var(--accent-ink); }
.hm-sk-badge--new  { background: var(--warn-soft); color: #8a5b10; }

.hm-sk-out {
	position: absolute; right: 10px; top: 10px;
	width: 24px; height: 24px; border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--ink);
	display: grid; place-items: center;
	font-size: 11px; font-weight: 800;
	transition: opacity .3s ease;
}
.hm-sk-card:hover .hm-sk-out { opacity: 0; }

.hm-sk-scrim {
	position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
	background: linear-gradient(to top, rgba(16, 13, 28, .62), rgba(16, 13, 28, 0));
	pointer-events: none;
	opacity: .9;
}
.hm-sk-metrics {
	position: absolute; right: 9px; bottom: 7px;
	display: flex; gap: 8px;
	color: #fff; font-size: 10px; font-weight: 700;
	letter-spacing: .02em;
}
.hm-sk-metrics span { display: inline-flex; align-items: center; gap: 2px; }

.hm-sk-body { padding: 8px 12px 10px; }
.hm-sk-title {
	font-size: 13px; font-weight: 600;
	line-height: 26px; height: 26px;
	margin: 0;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	color: var(--ink);
}
.hm-sk-sub {
	font-size: 11.5px; color: var(--ink-soft);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	margin-top: -2px;
}

.hm-sk-tags { display: flex; gap: 4px; margin-top: 7px; overflow: hidden; }
.hm-sk-tag {
	font-size: 10.5px; font-weight: 700;
	padding: 1px 7px; border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--bg);
	color: var(--ink-soft);
	white-space: nowrap;
}
.hm-sk-tag--output { background: var(--info-soft); border-color: #cbe1fb; color: var(--info-ink); }
.hm-sk-tag--role   { background: var(--violet-soft); border-color: #ded2ff; color: var(--violet-ink); }
.hm-sk-tag--usecase{ background: var(--ok-soft); border-color: #c3ebd8; color: var(--ok); }
.hm-sk-tag--agent  { background: var(--warn-soft); border-color: #f4e2b0; color: #8a5b10; }
.hm-sk-tag--more   { background: transparent; color: var(--ink-faint); border-style: dashed; }

.hm-sk-foot {
	display: flex; align-items: center; justify-content: space-between;
	gap: 8px; margin-top: 9px;
}
.hm-sk-price { font-size: 14px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.hm-sk-agents { display: inline-flex; align-items: center; }
.hm-sk-agents i {
	width: 16px; height: 16px; margin-left: -4px;
	border-radius: 50%;
	background: var(--bg-2);
	border: 1px solid #fff;
	display: grid; place-items: center;
	font-size: 8px; font-weight: 800; font-style: normal;
	color: var(--ink-soft);
}
.hm-sk-agents i:first-child { margin-left: 0; }
.hm-sk-agents em {
	margin-left: 3px; font-style: normal;
	font-size: 9.5px; font-weight: 800; color: var(--ink-faint);
}

.hm-sk-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 9px; }
.hm-sk-btn {
	display: inline-flex; align-items: center; justify-content: center;
	height: 30px; border-radius: 999px;
	font-size: 11.5px; font-weight: 800;
	border: 1.5px solid transparent;
}
.hm-sk-btn--ghost { border-color: var(--line); color: var(--ink-soft); background: var(--surface); }
.hm-sk-btn--solid { background: var(--ink); color: #fff; }
.hm-sk-card:hover .hm-sk-btn--solid { background: #100d1c; }

/* ============================================================
   列表页
   ============================================================ */

.hm-sk-page { padding: 10px 0 56px; }

/* 外层：1440 下内容 1376 = 236 侧栏 + 1140 栅格（4×273 + 3×16） */
.hm-sk-wrap { max-width: 1500px; margin: 0 auto; padding: 0 32px; }

.hm-sk-head {
	display: flex; align-items: flex-end; justify-content: space-between;
	gap: 24px;
	padding: 6px 0 18px;
	min-height: 92px;
}
.hm-sk-head-copy { min-width: 0; }
.hm-sk-h1 {
	display: flex; align-items: center; gap: 12px;
	font-size: 34px; letter-spacing: -.03em; margin: 0 0 6px;
}
.hm-sk-count-pill {
	font-size: 12px; font-weight: 800; letter-spacing: 0;
	padding: 5px 11px; border-radius: 999px;
	background: var(--surface); border: 1px solid var(--line);
	color: var(--ink-soft);
	white-space: nowrap;
}
.hm-sk-lead { margin: 0; font-size: 13.5px; color: var(--ink-soft); max-width: 46em; }

/* 排序：一组胶囊分段控件（规格 386×42，选中为白色浮起小胶囊） */
.hm-sk-sort {
	display: inline-flex; align-items: center;
	gap: 2px; padding: 4px;
	width: 386px; height: 42px;
	border-radius: 999px;
	background: var(--bg-2);
	border: 1px solid var(--line);
	flex: 0 0 auto;
}
.hm-sk-sort-tab {
	flex: 1 1 0;
	height: 32px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 999px;
	font-size: 12.5px; font-weight: 700;
	color: var(--ink-soft);
}
.hm-sk-sort-tab:hover { color: var(--ink); }
.hm-sk-sort-tab.is-on {
	background: var(--surface);
	color: var(--ink);
	box-shadow: 0 1px 3px rgba(32, 28, 48, .14), 0 0 0 1px rgba(32, 28, 48, .04);
}

/* 移动端工具条（≤lg 才出现） */
.hm-sk-toolbar { display: none; }

.hm-sk-layout {
	display: grid;
	grid-template-columns: var(--sk-sidebar) minmax(0, 1fr);
	column-gap: 0;
	align-items: start;
}

/* 左侧筛选栏：236px、sticky、16px 内边距 */
.hm-sk-filters {
	position: sticky;
	top: calc(var(--sk-promo-h) + var(--sk-header-h) + 12px);
	max-height: calc(100vh - var(--sk-promo-h) - var(--sk-header-h) - 24px);
	padding: 0 16px 16px 0;
	align-self: start;
	/* v2.3：状态 + 三组筛选变长，改成「选项区自己滚、底部按钮固定」，按钮不再压在选项上 */
	display: flex;
	flex-direction: column;
}
.hm-sk-fscroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	padding-right: 2px;
}
.hm-sk-fscroll::-webkit-scrollbar { width: 6px; }
.hm-sk-fscroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; background-clip: padding-box; }
.hm-sk-filters::-webkit-scrollbar { width: 6px; }
.hm-sk-filters::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; background-clip: padding-box; }

.hm-sk-filters-head { display: none; }
.hm-sk-filters-head strong { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }

.hm-sk-fgroup { padding: 12px 0; border-bottom: 1px solid var(--line); }
.hm-sk-fgroup:first-of-type { padding-top: 0; }
.hm-sk-fgroup-head {
	display: flex; align-items: baseline; gap: 6px;
	font-size: 11.5px; font-weight: 800;
	letter-spacing: .02em;
	color: var(--ink-faint);
	text-transform: uppercase;
	margin-bottom: 8px;
}
.hm-sk-fgroup-head span { font-size: 10.5px; letter-spacing: 0; text-transform: none; font-weight: 600; }

.hm-sk-flist { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.hm-sk-fopt {
	display: flex; align-items: center; gap: 8px;
	padding: 4px 6px 4px 4px;
	border-radius: 8px;
	font-size: 12.5px; color: var(--ink-soft);
}
.hm-sk-fopt:hover { background: var(--bg-2); color: var(--ink); }
.hm-sk-fbox {
	width: 14px; height: 14px; border-radius: 4px; flex: 0 0 auto;
	border: 1.5px solid #d8cdbc; background: var(--surface);
	display: grid; place-items: center;
}
.hm-sk-fopt.is-on { color: var(--ink); font-weight: 700; }
.hm-sk-fopt.is-on .hm-sk-fbox { background: var(--ink); border-color: var(--ink); }
.hm-sk-fopt.is-on .hm-sk-fbox::after { content: "✓"; color: #fff; font-size: 9px; line-height: 1; }
.hm-sk-flabel { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-sk-fcount { font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.hm-sk-fopt.is-off { opacity: .42; }

.hm-sk-filters-foot {
	/* v2.3：固定在筛选栏底部，不随选项区滚动 */
	flex: 0 0 auto;
	padding: 14px 0 0; display: grid; gap: 8px;
	border-top: 1px solid var(--line);
	margin-top: 10px;
	background: var(--bg);
}
.hm-sk-apply {
	display: inline-flex; align-items: center; justify-content: center;
	height: 38px; border-radius: 999px;
	background: var(--ink); color: #fff;
	font-size: 12.5px; font-weight: 800;
}
.hm-sk-apply:hover { background: #100d1c; }
.hm-sk-clear { text-align: center; font-size: 11.5px; color: var(--ink-faint); }
.hm-sk-clear:hover { color: var(--accent-ink); }

/* 栅格：4 列 × 273，gap 16 */
.hm-sk-results { min-width: 0; padding-left: 0; }
.hm-sk-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sk-gap);
	align-items: start;
}
/* 门户首页「精选 skill」只有 3 条 */
.hm-sk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .hm-sk-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hm-sk-grid--3 { grid-template-columns: minmax(0, 1fr); } }

.hm-sk-empty {
	grid-column: 1 / -1;
	padding: 46px 24px;
	text-align: center;
	background: var(--surface);
	border: 1px dashed var(--line);
	border-radius: var(--radius);
}
.hm-sk-empty p { color: var(--ink-soft); font-size: 13px; }

/* 无限滚动 */
.hm-sk-more {
	display: grid; place-items: center; gap: 8px;
	padding: 30px 0 6px;
	min-height: 66px;
}
.hm-sk-more-loading { font-size: 12.5px; color: var(--ink-faint); display: inline-flex; align-items: center; gap: 8px; }
.hm-sk-more.is-loading .hm-sk-more-loading::before {
	content: ""; width: 13px; height: 13px; border-radius: 50%;
	border: 2px solid var(--line); border-top-color: var(--accent);
	animation: hm-spin .7s linear infinite;
}
@keyframes hm-spin { to { transform: rotate(360deg); } }
.hm-sk-more-fallback { display: none; font-size: 12.5px; font-weight: 700; color: var(--accent-ink); }
.hm-sk-more.is-error .hm-sk-more-fallback { display: inline-block; }
.hm-sk-more.is-error .hm-sk-more-loading { display: none; }
.hm-sk-more-done { font-size: 12px; color: var(--ink-faint); }

/* 抽屉遮罩（≤lg） */
.hm-sk-drawer-scrim {
	position: fixed; inset: 0; z-index: 70;
	background: rgba(16, 13, 28, .38);
}

/* ============================================================
   详情页
   ============================================================ */

.hm-skd-page { padding: 8px 0 64px; }
.hm-skd-wrap { max-width: 1500px; margin: 0 auto; padding: 0 32px; }

/* 首屏两栏：668 / 668，gap 40（1440 下） */
.hm-skd-hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
	padding-top: 6px;
}

.hm-skd-gallery { min-width: 0; }
.hm-skd-stage { border-radius: var(--sk-card-radius); overflow: hidden; }
.hm-skd-stage .hm-prev { border-radius: var(--sk-card-radius); }
.hm-skd-strip {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 8px;
	margin-top: 10px;
}
.hm-skd-thumb {
	padding: 0; border: 0; background: none; cursor: pointer;
	border-radius: 12px;
	outline: 2px solid transparent; outline-offset: 2px;
}
.hm-skd-thumb.is-on { outline-color: var(--accent); }
.hm-skd-thumb:hover { outline-color: #d9cdbb; }

/* 右栏决策面板：20px 圆角、1px 描边、24px 内边距、sticky */
.hm-skd-panel {
	position: sticky;
	top: calc(var(--sk-promo-h) + var(--sk-header-h) + 16px);
	background: #fffdf8;
	border: 1px solid var(--line);
	border-radius: var(--sk-panel-radius);
	padding: 24px;
	box-shadow: var(--shadow);
}

.hm-skd-picks { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.hm-skd-pick {
	font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
	padding: 3px 9px; border-radius: 999px;
	background: var(--bg-2); color: var(--ink-soft);
}
.hm-skd-pick--cat { background: var(--violet-soft); color: var(--violet-ink); }
.hm-skd-pick--pick { background: var(--accent-soft); color: var(--accent-ink); }

.hm-skd-h1 { font-size: 36px; line-height: 1.12; letter-spacing: -.03em; margin: 0 0 10px; }

.hm-skd-metrics { display: flex; gap: 18px; margin-bottom: 12px; }
.hm-skd-metric { display: inline-flex; align-items: baseline; gap: 5px; }
.hm-skd-metric b { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }
.hm-skd-metric i { font-style: normal; font-size: 11px; color: var(--ink-faint); }

.hm-skd-intro { font-size: 14px; color: var(--ink-soft); margin: 0 0 14px; }

/* 价格块：三态换文案 + 换底色（不只换按钮文字） */
.hm-skd-priceblock {
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	background: var(--bg);
	border: 1px solid var(--line);
	margin-bottom: 10px;
}
.hm-skd-priceblock--sub { background: var(--ok-soft); border-color: #bfe8d4; }
.hm-skd-priceblock--life { background: var(--ink); border-color: var(--ink); color: #fff; }
.hm-skd-priceblock--free { background: var(--ok-soft); border-color: #bfe8d4; }
.hm-skd-price-main { display: flex; align-items: baseline; gap: 8px; }
.hm-skd-price-main b { font-size: 28px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.hm-skd-price-main em { font-style: normal; font-size: 12px; color: var(--ink-soft); }
.hm-skd-priceblock--life .hm-skd-price-main em { color: rgba(255, 255, 255, .72); }
.hm-skd-price-alt { font-size: 11.5px; color: var(--ink-faint); margin-top: 3px; }

/* 订阅横条 */
.hm-skd-substrip {
	display: flex; align-items: center; gap: 10px;
	padding: 10px 12px;
	border-radius: 12px;
	background: var(--warn-soft);
	border: 1px solid #f2dfa9;
	color: #6f4a08;
	margin-bottom: 12px;
}
.hm-skd-substrip.is-owned { background: var(--ok-soft); border-color: #bfe8d4; color: var(--ok); }
.hm-skd-substrip-ic { font-size: 14px; font-weight: 800; }
.hm-skd-substrip-tx { display: grid; line-height: 1.3; flex: 1 1 auto; min-width: 0; }
.hm-skd-substrip-tx b { font-size: 12.5px; }
.hm-skd-substrip-tx small { font-size: 11px; opacity: .8; }
.hm-skd-substrip-go { font-weight: 800; }

.hm-skd-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hm-skd-btn {
	display: inline-flex; align-items: center; justify-content: center;
	height: 48px; border-radius: 999px;
	font-size: 13px; font-weight: 800;
	border: 1.5px solid transparent;
	cursor: pointer;
}
.hm-skd-btn--solid { background: var(--ink); color: #fff; }
.hm-skd-btn--solid:hover { background: #100d1c; }
.hm-skd-btn--ghost { background: var(--surface); border-color: var(--ink); color: var(--ink); }
.hm-skd-btn--ghost:hover { background: var(--bg-2); }

.hm-skd-facts { margin-top: 16px; display: grid; gap: 7px; }
.hm-skd-fact { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; }
.hm-skd-fact-l { color: var(--ink-faint); font-weight: 700; letter-spacing: .02em; }
.hm-skd-fact-v { color: var(--ink); font-weight: 600; display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.hm-skd-agent {
	width: 18px; height: 18px; border-radius: 50%;
	background: var(--bg-2); color: var(--ink-soft);
	display: inline-grid; place-items: center;
	font-size: 8.5px; font-weight: 800; font-style: normal;
}

.hm-skd-demo { margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--line); display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.hm-skd-demo-label { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.hm-skd-demo-chips { display: inline-flex; gap: 4px; }
.hm-skd-demo-chips a {
	font-size: 11px; font-weight: 700;
	padding: 3px 9px; border-radius: 999px;
	border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
}
.hm-skd-demo-chips a.is-on { background: var(--ink); border-color: var(--ink); color: #fff; }
.hm-skd-demo-note { font-size: 10.5px; color: var(--ink-faint); margin: 6px 0 0; line-height: 1.5; }

/* 区块通用头 */
.hm-skd-section-head {
	display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
	margin-bottom: 14px;
}
.hm-skd-section-head h2 { margin: 0; font-size: 22px; letter-spacing: -.02em; }
.hm-skd-section-sub { font-size: 12.5px; color: var(--ink-faint); }
.hm-skd-more { font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.hm-skd-more:hover { color: var(--accent-ink); }

/* 相似推荐横滑 */
.hm-skd-similar { position: relative; margin-top: 44px; }
.hm-skd-rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 288px;
	gap: var(--sk-gap);
	overflow-x: auto;
	padding-bottom: 6px;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.hm-skd-rail::-webkit-scrollbar { display: none; }
.hm-skd-rail .hm-sk-card { scroll-snap-align: start; }
.hm-skd-rail-arrow {
	position: absolute; right: -6px; top: 52%;
	width: 40px; height: 40px; border-radius: 50%;
	border: 1px solid var(--line); background: var(--surface);
	box-shadow: var(--shadow-lift);
	cursor: pointer; font-size: 15px; font-weight: 800; color: var(--ink);
}
.hm-skd-rail-arrow:hover { background: var(--bg-2); }

/* 正文三块 */
.hm-skd-cols {
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin-top: 34px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 22px;
	box-shadow: var(--shadow);
}
.hm-skd-col h3 { font-size: 14px; margin-bottom: 10px; }
.hm-skd-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.hm-skd-col li { font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; }
.hm-skd-col li.is-yes { color: var(--ink); }

.hm-skd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.hm-skd-tag {
	font-size: 11.5px; font-weight: 700;
	padding: 4px 11px; border-radius: 999px;
	border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft);
}
.hm-skd-tag:hover { border-color: #d9cdbb; color: var(--ink); }

/* 说明（左气泡 + 右正文） */
.hm-skd-about {
	display: grid; grid-template-columns: 330px minmax(0, 1fr);
	gap: 34px;
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid var(--line);
}
.hm-skd-bubble {
	background: var(--accent-soft);
	border: 1px solid var(--accent-line);
	border-radius: 18px;
	padding: 14px 16px;
}
.hm-skd-bubble-label { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.hm-skd-bubble p { margin: 8px 0 6px; font-size: 13px; line-height: 1.6; color: var(--ink); }
.hm-skd-bubble-tip { font-size: 10.5px; color: var(--ink-soft); }
.hm-skd-about-meta { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.hm-skd-about-meta li { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--ink-faint); border-bottom: 1px dashed var(--line); padding-bottom: 5px; }
.hm-skd-about-meta b { color: var(--ink); font-weight: 700; }
.hm-skd-about-body h2 { font-size: 22px; margin-bottom: 12px; }
.hm-skd-content { font-size: 14px; color: var(--ink-soft); }
.hm-skd-content p { margin-bottom: 10px; }

/* 效果样例 */
.hm-skd-samples { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.hm-skd-sample-list { display: grid; gap: 14px; }
.hm-skd-sample {
	margin: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.hm-skd-sample figcaption {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 10px 16px;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
}
.hm-skd-sample-title { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.hm-skd-sample-tag {
	font-size: 10px; font-weight: 800; letter-spacing: .06em;
	background: var(--accent-soft); color: var(--accent-ink);
	padding: 2px 8px; border-radius: 999px;
}
.hm-skd-sample pre {
	margin: 0; padding: 14px 16px;
	background: #fffdf9;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12.5px; line-height: 1.75; color: #4a4557;
	white-space: pre-wrap; word-break: break-word;
}

/* 怎么用 */
.hm-skd-howto { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); }
.hm-skd-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hm-skd-step {
	display: grid;
	grid-template-columns: 30px minmax(0, 1fr) 152px;
	gap: 14px; align-items: center;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
}
.hm-skd-step-no {
	width: 26px; height: 26px; border-radius: 9px;
	background: var(--ink); color: #fff;
	display: grid; place-items: center;
	font-size: 12px; font-weight: 800;
}
.hm-skd-step-tx strong { display: block; font-size: 13.5px; margin-bottom: 2px; }
.hm-skd-step-tx span { font-size: 12.5px; color: var(--ink-soft); line-height: 1.55; }
.hm-skd-step-thumb .hm-prev { border-radius: 10px; }

/* 更新日志 */
.hm-skd-changelog { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--sk-promo-h) + var(--sk-header-h) + 16px); }
.hm-skd-loglist { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.hm-skd-log {
	display: grid; grid-template-columns: 74px 100px minmax(0, 1fr);
	gap: 10px; align-items: baseline;
	padding: 11px 16px; font-size: 12.5px;
	border-bottom: 1px solid var(--line);
}
.hm-skd-log:last-child { border-bottom: 0; }
.hm-skd-log-ver { font-weight: 800; }
.hm-skd-log-date { color: var(--ink-faint); font-variant-numeric: tabular-nums; }
.hm-skd-log-note { color: var(--ink-soft); }

/* 定价区 / FAQ */
.hm-skd-pricing,
.hm-skd-faq { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--sk-promo-h) + var(--sk-header-h) + 16px); }
.hm-skd-pricing .hm-plans { max-width: 1120px; margin: 0 auto; }
.hm-skd-pricing-note { text-align: center; font-size: 12px; color: var(--ink-faint); margin: 16px 0 0; }
.hm-skd-faq-list { display: grid; gap: 8px; }

/* ============================================================
   三档价格卡（定价页与详情页共用）
   规格：三卡同尺寸 363×548、圆角 24、内边距 24、间距 16；
   推荐位（年付）= 2px 实心深色描边 + 黄色「最受欢迎」胶囊 + 实心 CTA
   ============================================================ */

.hm-plans {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	align-items: stretch;
}
.hm-plan {
	display: flex; flex-direction: column;
	min-height: 548px;
	padding: 24px;
	border-radius: var(--sk-plan-radius);
	border: 1px solid rgba(32, 28, 48, .12);
	background: var(--surface);
	transition: transform .2s ease;
}
.hm-plan:hover { transform: translateY(-2px); }
.hm-plan--pick { border: 2px solid var(--ink); }
.hm-plan--life { border: 1px solid rgba(32, 28, 48, .12); background: #fffdf8; }

.hm-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 26px; }
.hm-plan-topline { font-size: 11px; font-weight: 700; color: var(--ink-faint); line-height: 1.35; }
.hm-plan-badge {
	font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
	padding: 3px 9px; border-radius: 999px;
	background: var(--warn-soft); color: #7a5109;
	white-space: nowrap;
}
.hm-plan-badge--soft { background: var(--bg-2); color: var(--ink-soft); }

.hm-plan-name { font-size: 28px; letter-spacing: -.03em; margin: 16px 0 8px; }
.hm-plan-price { font-size: 40px; font-weight: 800; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.hm-plan-price em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--ink-soft); letter-spacing: 0; margin-left: 4px; }
.hm-plan-note { font-size: 12.5px; color: var(--ink-soft); margin: 8px 0 16px; min-height: 2.6em; }

.hm-plan-feats { list-style: none; margin: 0 0 18px; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 9px; flex: 1 1 auto; }
.hm-plan-feats li { display: flex; gap: 8px; font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; }
.hm-plan-feats li.is-diff { color: var(--ink); font-weight: 700; }
.hm-plan-tick { color: var(--ok); font-weight: 800; flex: 0 0 auto; }

.hm-plan-cta { margin-top: auto; }
.hm-plan-btn {
	width: 100%; height: 48px; border-radius: 999px;
	font-size: 13px; font-weight: 800;
	border: 1.5px solid var(--line);
	background: var(--surface); color: var(--ink);
	cursor: pointer;
}
.hm-plan-btn--solid { background: var(--ink); border-color: var(--ink); color: #fff; }
.hm-plan-btn--ghost:hover { background: var(--bg-2); }
.hm-plan-btn--solid:hover { background: #100d1c; }
.hm-plan-btn[disabled] { cursor: default; opacity: 1; }

/* ============================================================
   Skill 板块二级导航（v2.2）
   出现在 /skills/、/skills/<slug>/、/skills/pricing/ 三个页面。
   横向胶囊：全部 Skill ｜ 定价 ｜ 分类（分类 v2.2 先留位置，不可点）
   ============================================================ */

.hm-subnav { padding: 10px 0 0; }
.hm-subnav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.hm-subnav-tab {
	display: inline-flex;
	align-items: center;
	height: 34px;
	padding: 0 14px;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--surface);
	color: var(--ink-soft);
	font-size: 13px;
	font-weight: 800;
	text-decoration: none;
	white-space: nowrap;
	transition: background .15s, color .15s, border-color .15s;
}
a.hm-subnav-tab:hover { background: var(--bg-2); color: var(--ink); }
.hm-subnav-tab.is-current { background: var(--ink); border-color: var(--ink); color: #fff; }
.hm-subnav-tab--soon { color: var(--ink-faint); border-style: dashed; cursor: default; }

/* ============================================================
   定价页
   ============================================================ */

.hm-pricing-page { padding: 14px 0 60px; }
.hm-pricing-wrap { max-width: 1500px; margin: 0 auto; padding: 0 32px; }

.hm-pricing-hero { padding-top: 26px; }
.hm-pricing-hero-copy { text-align: center; max-width: 720px; margin: 0 auto 30px; }
.hm-pricing-h1 { font-size: 64px; line-height: 1.04; letter-spacing: -.045em; margin: 0 0 14px; }
.hm-pricing-em {
	display: inline-block;
	/* 手绘式强调：只在下半行铺一条浅色底，不用图片、不用伪元素叠层 */
	background-image: linear-gradient(transparent 58%, var(--accent-soft) 58%, var(--accent-soft) 92%, transparent 92%);
	background-repeat: no-repeat;
	padding: 0 .12em;
}
.hm-pricing-lead { font-size: 15px; color: var(--ink-soft); margin: 0 auto; max-width: 34em; }

.hm-pricing-social {
	display: inline-flex; align-items: center; gap: 10px;
	margin-top: 18px; font-size: 12.5px; color: var(--ink-soft);
	background: var(--surface); border: 1px solid var(--line);
	border-radius: 999px; padding: 6px 16px 6px 8px;
}
.hm-pricing-avatars { display: inline-flex; }
.hm-pricing-avatars i {
	width: 22px; height: 22px; margin-left: -6px;
	border-radius: 50%; border: 2px solid var(--surface);
	background: var(--bg-2); color: var(--ink-soft);
	display: grid; place-items: center;
	font-size: 9.5px; font-weight: 800; font-style: normal;
}
.hm-pricing-avatars i:first-child { margin-left: 0; }

/* 定价页的三卡严格限定在 1120 容器里：363 = (1120 - 32) / 3 */
.hm-pricing-hero .hm-plans { max-width: 1120px; margin: 0 auto; }
.hm-pricing-footnote { text-align: center; font-size: 12px; color: var(--ink-faint); margin: 16px auto 0; max-width: 60em; }

/* 定价 FAQ：左 443 / 右 885，gap 48 */
.hm-pricing-faq { margin-top: 56px; }
.hm-pricing-faq-in {
	display: grid;
	grid-template-columns: 443px minmax(0, 1fr);
	gap: 48px;
	align-items: start;
	max-width: 1500px;
}
.hm-pricing-faq-copy h2 { font-size: 40px; letter-spacing: -.035em; margin: 0 0 8px; }
.hm-pricing-faq-copy p { font-size: 13.5px; color: var(--ink-soft); margin: 0; }
.hm-pricing-faq-list { display: grid; gap: 0; }

/* 手风琴（定价 FAQ / 详情 FAQ 共用） */
.hm-faq-item { border-bottom: 1px solid var(--line); }
.hm-faq-item summary {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 15px 2px;
	cursor: pointer;
	font-size: 14px; font-weight: 800;
	list-style: none;
}
.hm-faq-item summary::-webkit-details-marker { display: none; }
.hm-faq-chevron {
	width: 9px; height: 9px; flex: 0 0 auto;
	border-right: 1.8px solid var(--ink-faint);
	border-bottom: 1.8px solid var(--ink-faint);
	transform: rotate(45deg);
	transition: transform .2s ease;
	margin-right: 4px;
}
.hm-faq-item[open] .hm-faq-chevron { transform: rotate(-135deg); }
.hm-faq-a { padding: 0 2px 16px; font-size: 13px; color: var(--ink-soft); line-height: 1.7; max-width: 60em; }

/* ============================================================
   断点
   ≥1280：4 列 / 侧栏 236 / 32px 边距
   1024–1279：3 列 / 侧栏 236 / 24px 边距
   ≤1023（lg）：侧栏收成 Filters 按钮 + 抽屉；2 列
   ≤640：1 列 / 16px 边距
   ============================================================ */

@media (max-width: 1339px) {
	.hm-sk-wrap, .hm-skd-wrap, .hm-pricing-wrap { padding: 0 24px; }
	.hm-sk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hm-pricing-h1 { font-size: 54px; }
	.hm-pricing-faq-in { grid-template-columns: 380px minmax(0, 1fr); gap: 36px; }
}

@media (max-width: 1023px) {
	/* 侧栏收起 */
	.hm-sk-layout { grid-template-columns: minmax(0, 1fr); }

	.hm-sk-toolbar {
		display: flex; align-items: center; gap: 10px;
		padding: 0 0 14px;
	}
	.hm-sk-filters-btn {
		display: inline-flex; align-items: center; gap: 8px;
		height: 38px; padding: 0 16px;
		border-radius: 999px;
		border: 1px solid var(--line);
		background: var(--surface);
		font-size: 13px; font-weight: 800; color: var(--ink);
	}
	.hm-sk-filters-num {
		background: var(--ink); color: #fff;
		border-radius: 999px; min-width: 18px; height: 18px;
		display: inline-grid; place-items: center;
		font-size: 10.5px;
	}
	.hm-sk-reset { font-size: 12px; color: var(--ink-faint); }
	.hm-sk-toolbar-total { margin-left: auto; font-size: 12px; color: var(--ink-faint); }

	.hm-sk-filters {
		display: none;
		position: fixed;
		top: 0; left: 0; bottom: auto;
		height: 100vh;
		height: 100dvh;
		width: min(360px, 88vw);
		z-index: 80;
		background: var(--surface);
		padding: 16px 16px 22px;
		max-height: none;
		overflow: auto;
		box-shadow: var(--shadow-lift);
		overscroll-behavior: contain;
	}
	.hm-sk-filters.is-open { display: block; }
	.hm-sk-filters-head {
		display: flex; align-items: center; justify-content: space-between;
		padding-bottom: 12px; margin-bottom: 4px;
		border-bottom: 1px solid var(--line);
	}
	.hm-sk-filters-close {
		width: 30px; height: 30px; border-radius: 50%;
		border: 1px solid var(--line); background: var(--surface);
		font-size: 16px; line-height: 1; cursor: pointer;
	}
	.hm-sk-fgroup { padding: 14px 0; }
	.hm-sk-fgroup-head { font-size: 11px; }

	/* 抽屉：Show N skills 常驻底部，长列表不用滚到底才能应用 */
	.hm-sk-filters-foot {
		position: sticky;
		bottom: 0;
		margin: 0 -16px -22px;
		padding: 12px 16px 16px;
		background: var(--surface);
		box-shadow: 0 -10px 18px rgba(32, 28, 48, .07);
	}
	.hm-sk-flist { gap: 2px; }
	.hm-sk-fopt { padding: 7px 6px; font-size: 13.5px; }
	.hm-sk-fbox { width: 17px; height: 17px; }

	.hm-sk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.hm-sk-head { flex-direction: column; align-items: flex-start; gap: 14px; }
	.hm-sk-h1 { font-size: 28px; }
	.hm-sk-sort { width: 100%; }

	/* 详情页单列：决策面板不再 sticky */
	.hm-skd-hero { grid-template-columns: minmax(0, 1fr); gap: 22px; }
	.hm-skd-panel { position: static; }
	.hm-skd-h1 { font-size: 30px; }
	.hm-skd-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hm-skd-about { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.hm-skd-rail { grid-auto-columns: 320px; }
	.hm-skd-step { grid-template-columns: 30px minmax(0, 1fr) 120px; }

	.hm-plans { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin: 0 auto; }
	.hm-plan { min-height: 0; }

	.hm-pricing-h1 { font-size: 42px; }
	.hm-pricing-faq-in { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.hm-pricing-faq-copy h2 { font-size: 30px; }
}

@media (max-width: 640px) {
	.hm-promo-tx { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
	.hm-promo-cta { display: none; }

	.hm-sk-page, .hm-skd-page, .hm-pricing-page { padding-bottom: 40px; }
	.hm-sk-wrap, .hm-skd-wrap, .hm-pricing-wrap { padding: 0 16px; }

	/* 二级导航在窄屏横滑，不换行 */
	.hm-subnav { padding-top: 8px; }
	.hm-subnav-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.hm-subnav-list::-webkit-scrollbar { display: none; }
	.hm-subnav-tab { height: 32px; padding: 0 12px; font-size: 12.5px; }

	.hm-sk-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sk-gap); }
	.hm-sk-h1 { font-size: 25px; flex-wrap: wrap; gap: 8px; }
	.hm-sk-lead { font-size: 13px; }
	.hm-sk-sort { width: 100%; height: 40px; }
	.hm-sk-sort-tab { font-size: 12px; }

	.hm-skd-h1 { font-size: 25px; }
	.hm-skd-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.hm-skd-ctas { grid-template-columns: minmax(0, 1fr); }
	.hm-skd-cols { grid-template-columns: minmax(0, 1fr); padding: 18px; }
	.hm-skd-rail { grid-auto-columns: 300px; }
	.hm-skd-step { grid-template-columns: 26px minmax(0, 1fr); }
	.hm-skd-step-thumb { display: none; }
	.hm-skd-log { grid-template-columns: 62px 84px minmax(0, 1fr); font-size: 12px; }
	.hm-skd-loglist { border-radius: 12px; }

	.hm-pricing-h1 { font-size: 32px; }
	.hm-pricing-em { padding: 0 .08em; }
	.hm-plan { padding: 20px; }
	.hm-plan-name { font-size: 24px; }
	.hm-plan-price { font-size: 34px; }
	.hm-faq-item summary { font-size: 13.5px; }
}

/* ============================================================
   v2.5 链路（chain）—— 列表页「按链路」那一组共用现有 .hm-sk-f* 样式，
   这里只补三处新界面：
     1) 详情页顶部的链路胶囊（.hm-skd-chains）
     2) 链路落地页 /skills/chains/<slug>/（.hm-chain-*）
     3) 链路入口页 /skills/chains/（.hm-chain-card*）
   颜色仍然只用插件 :root 的 token，不新增色板。
   ============================================================ */

.hm-chain-wrap { max-width: 1500px; margin: 0 auto; padding: 0 32px; }

/* ---------- 详情页：链路胶囊（置顶一行） ---------- */

.hm-skd-chains {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	margin-bottom: 12px;
}
.hm-skd-chains-label { font-size: 11px; letter-spacing: .04em; color: var(--ink-faint); }
.hm-skd-chain {
	display: inline-flex; align-items: center; gap: 2px;
	height: 26px; padding: 0 11px;
	border-radius: 999px;
	border: 1px solid var(--ink);
	background: var(--surface);
	font-size: 12px; font-weight: 700; color: var(--ink);
	transition: background .15s, color .15s;
}
.hm-skd-chain:hover { background: var(--ink); color: #fff; }
.hm-skd-chain-step { font-weight: 600; opacity: .75; }

/* ---------- 链路落地页：四块 ---------- */

.hm-chain-page { padding-bottom: 56px; }

.hm-chain-hero {
	padding: 26px 0 24px;
	border-bottom: 1px solid var(--line);
}
.hm-chain-kicker {
	display: inline-flex; align-items: center; gap: 7px;
	margin: 0 0 10px;
	font-size: 11.5px; letter-spacing: .08em; font-weight: 700;
	color: var(--ink-soft); text-transform: uppercase;
}
.hm-chain-kicker-dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}
.hm-chain-h1 { font-size: 42px; margin: 0 0 12px; }
.hm-chain-lead {
	max-width: 880px;
	font-size: 16px; line-height: 1.75; color: var(--ink-soft);
	margin: 0 0 18px;
}
.hm-chain-who {
	display: flex; gap: 12px; align-items: flex-start;
	max-width: 880px;
	padding: 14px 16px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}
.hm-chain-who-label {
	flex: 0 0 auto;
	font-size: 12px; font-weight: 700;
	padding: 2px 9px; border-radius: 999px;
	background: var(--accent-soft); color: var(--accent-ink);
}
.hm-chain-who p { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.hm-chain-stats { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 16px; }
.hm-chain-stat { font-size: 12.5px; color: var(--ink-soft); }
.hm-chain-stat b { font-size: 20px; color: var(--ink); margin-right: 4px; }
.hm-chain-stat--soft { color: var(--ink-faint); }

.hm-chain-section-head {
	display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
	margin: 0 0 16px;
}
.hm-chain-section-head h2 { font-size: 24px; margin: 0; }
.hm-chain-section-sub { font-size: 12.5px; color: var(--ink-faint); }

/* ② 顺序图：一步一行，左边序号，中间输入输出，右边入口 */
.hm-chain-flow { padding: 36px 0 8px; }
.hm-chain-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hm-chain-step {
	position: relative;
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	gap: 14px;
	align-items: flex-start;
	padding: 16px 18px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}
.hm-chain-step + .hm-chain-step::before {
	content: "";
	position: absolute;
	left: 40px; top: -10px;
	width: 1px; height: 10px;
	background: var(--line);
}
.hm-chain-step.is-soon { background: rgba(255, 255, 255, .55); border-style: dashed; }
.hm-chain-step-no {
	width: 34px; height: 34px; border-radius: 50%;
	display: grid; place-items: center;
	font-size: 14px; font-weight: 800;
	background: var(--ink); color: #fff;
}
.hm-chain-step.is-soon .hm-chain-step-no { background: var(--bg-2); color: var(--ink-faint); }
.hm-chain-step-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 5px; }
.hm-chain-step-head h3 { margin: 0; font-size: 17px; }
.hm-chain-step-code {
	font-size: 11px; font-weight: 800; letter-spacing: .04em;
	padding: 1px 7px; border-radius: 999px;
	background: var(--violet-soft); color: var(--violet-ink);
}
.hm-chain-step-state {
	font-size: 11px; font-weight: 700;
	padding: 1px 8px; border-radius: 999px;
	background: var(--ok-soft); color: var(--ok);
}
.hm-chain-step.is-soon .hm-chain-step-state { background: var(--warn-soft); color: var(--warn); }
.hm-chain-step-io { margin: 0; font-size: 13px; line-height: 1.7; color: var(--ink-soft); }
.hm-chain-step-act { align-self: center; }
.hm-chain-step-go { font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.hm-chain-step-go:hover { color: var(--accent-ink); }
.hm-chain-step-go.is-off { color: var(--ink-faint); font-weight: 600; }

/* ③ 关键引导：底色块 + 左侧粗线，别做成普通段落 */
.hm-chain-guide {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 22px;
	margin: 34px 0 0;
	padding: 24px 26px;
	background: var(--bg-2);
	border-radius: var(--radius);
}
.hm-chain-guide h2 { font-size: 21px; margin: 0 0 12px; }
.hm-chain-quote {
	margin: 0;
	padding: 2px 0 2px 16px;
	border-left: 4px solid var(--accent);
	font-size: 18px; font-weight: 800; line-height: 1.6; color: var(--ink);
	letter-spacing: -.01em;
}
.hm-chain-guide-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); }
.hm-chain-guide-steps {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 8px; align-content: start;
	counter-reset: hmcg;
}
.hm-chain-guide-steps li {
	position: relative;
	padding: 10px 14px 10px 40px;
	background: var(--surface);
	border-radius: 12px;
	font-size: 13px; color: var(--ink);
	counter-increment: hmcg;
}
.hm-chain-guide-steps li::before {
	content: counter(hmcg);
	position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
	width: 20px; height: 20px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--accent-soft); color: var(--accent-ink);
	font-size: 11px; font-weight: 800;
}
.hm-chain-guide--index { margin-top: 28px; }

/* ④ CTA 占位 */
.hm-chain-cta {
	display: flex; align-items: center; justify-content: space-between; gap: 20px;
	flex-wrap: wrap;
	margin: 30px 0 0;
	padding: 22px 26px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
}
.hm-chain-cta-copy h2 { font-size: 19px; margin: 0 0 6px; }
.hm-chain-cta-copy p { margin: 0; max-width: 640px; font-size: 12.5px; color: var(--ink-soft); }
.hm-chain-cta-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.hm-chain-btn {
	display: inline-flex; align-items: center; justify-content: center;
	height: 44px; padding: 0 22px;
	border-radius: 999px;
	font-size: 13.5px; font-weight: 700;
	border: 1px solid transparent;
	cursor: pointer;
}
.hm-chain-btn--solid { background: var(--ink); color: #fff; border-color: var(--ink); }
.hm-chain-btn--solid[disabled] {
	background: var(--bg-2); color: var(--ink-faint);
	border-color: var(--line); cursor: not-allowed;
}
.hm-chain-btn--ghost { background: var(--surface); border-color: var(--ink); color: var(--ink); }
.hm-chain-btn--ghost:hover { background: var(--ink); color: #fff; }

/* 另外两条链路 */
.hm-chain-others { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 22px; }
.hm-chain-other {
	display: flex; align-items: center; gap: 10px;
	padding: 14px 18px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
}
.hm-chain-other:hover { border-color: var(--ink); }
.hm-chain-other-label { font-size: 11px; color: var(--ink-faint); }
.hm-chain-other strong { font-size: 15px; }
.hm-chain-other-go { margin-left: auto; color: var(--ink-soft); }
.hm-chain-other:hover .hm-chain-other-go { color: var(--ink); }

.hm-chain-empty { padding: 60px 0; text-align: center; }
.hm-chain-empty h1 { font-size: 30px; margin: 0 0 10px; }
.hm-chain-empty p { color: var(--ink-soft); }
.hm-chain-empty .hm-chain-btn { margin-top: 8px; }

/* ---------- 链路入口页：三张卡 ---------- */

.hm-chain-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.hm-chain-card {
	display: flex; flex-direction: column; gap: 10px;
	padding: 22px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	transition: border-color .15s, transform .15s;
}
.hm-chain-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.hm-chain-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.hm-chain-card-top h2 { font-size: 21px; margin: 0; }
.hm-chain-card-go { color: var(--ink-soft); }
.hm-chain-card-lead { margin: 0; font-size: 12.5px; line-height: 1.7; color: var(--ink-soft); }
.hm-chain-card-meta { display: flex; gap: 14px; margin-top: auto; font-size: 11.5px; color: var(--ink-faint); }

/* ---------- 断点 ---------- */

@media (max-width: 1023px) {
	.hm-chain-wrap { padding: 0 24px; }
	.hm-chain-h1 { font-size: 34px; }
	.hm-chain-cards { grid-template-columns: minmax(0, 1fr); }
	.hm-chain-guide { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
	.hm-chain-wrap { padding: 0 16px; }
	.hm-chain-h1 { font-size: 26px; }
	.hm-chain-lead { font-size: 14px; }
	.hm-chain-who { flex-direction: column; gap: 8px; }
	.hm-chain-step { grid-template-columns: 34px minmax(0, 1fr); padding: 14px; }
	.hm-chain-step-no { width: 28px; height: 28px; font-size: 12px; }
	.hm-chain-step-act { grid-column: 2; }
	.hm-chain-quote { font-size: 16px; }
	.hm-chain-cta { flex-direction: column; align-items: stretch; }
	.hm-chain-cta-btns { flex-direction: column; }
	.hm-chain-btn { width: 100%; }
	.hm-chain-others { grid-template-columns: minmax(0, 1fr); }
	.hm-chain-section-head h2 { font-size: 20px; }
}

/* ============================================================
   v2.4 详情页补的 7 块：三指标占位 / 6 图缩略条 / 大图灯箱 /
   依赖工具 / 角色胶囊堆 / 安装指引 / 用户评价
   —— 全部沿用上面的 :root token，不引入框架、不改卡片尺寸
   ============================================================ */

/* ---------- 1) 首屏三指标：图标 + 数值 + 名称；没有数据显示 — ---------- */
.hm-skd-metric { align-items: center; }
.hm-skd-metric-ic { font-style: normal; font-size: 12px; line-height: 1; color: var(--accent); }
.hm-skd-metric.is-na .hm-skd-metric-ic { color: var(--ink-faint); }
.hm-skd-metric.is-na b { color: var(--ink-faint); font-weight: 700; }

/* ---------- 2) 大图：放大按钮 + 缩略条说明 ---------- */
.hm-skd-stagewrap { position: relative; }
.hm-skd-zoom {
	position: absolute; right: 12px; top: 12px;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 6px 12px; border: 0; border-radius: 999px;
	background: rgba(32, 28, 48, .72); color: #fff;
	font-size: 11.5px; font-weight: 700; cursor: zoom-in;
	opacity: 0; transition: opacity .18s ease;
}
.hm-skd-stagewrap:hover .hm-skd-zoom,
.hm-skd-zoom:focus-visible { opacity: 1; }
.hm-skd-zoom-ic { font-size: 13px; }
.hm-skd-strip-note { font-size: 11px; color: var(--ink-faint); margin: 8px 0 0; line-height: 1.5; }

/* ---------- 3) 依赖工具 + 最常用的人 ---------- */
.hm-skd-decide {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: 16px;
	margin-top: 18px;
}
.hm-skd-decide-card {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 18px 20px;
	box-shadow: var(--shadow);
	min-width: 0;
}
.hm-skd-decide-card h2 { font-size: 15px; margin: 0 0 4px; letter-spacing: -.01em; }
.hm-skd-decide-sub { font-size: 12px; color: var(--ink-soft); margin: 0 0 12px; line-height: 1.55; }
.hm-skd-tool-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.hm-skd-tool { display: flex; gap: 10px; align-items: flex-start; }
.hm-skd-tool-ic {
	flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px;
	display: grid; place-items: center;
	background: var(--bg-2); color: var(--ink);
	font-size: 13px; font-weight: 800;
}
.hm-skd-tool--none .hm-skd-tool-ic { background: var(--ok-soft); color: var(--ok); }
.hm-skd-tool-tx { display: grid; line-height: 1.45; min-width: 0; }
.hm-skd-tool-tx b { font-size: 13px; }
.hm-skd-tool-tx small { font-size: 11.5px; color: var(--ink-faint); }
.hm-skd-picked-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-skd-picked-chip {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px;
	background: #fffdf8; font-size: 12.5px; font-weight: 600; color: var(--ink);
}
.hm-skd-picked-chip:hover { border-color: #d9cdbb; color: var(--accent-ink); }
.hm-skd-picked-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); display: block; }
.hm-skd-picked-go { color: var(--ink-faint); font-size: 11px; }
.hm-skd-decide-empty { font-size: 12.5px; color: var(--ink-faint); margin: 0; }

/* ---------- 4) 安装指引（三档装法分栏） ---------- */
.hm-skd-install {
	margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line);
	scroll-margin-top: calc(var(--sk-promo-h) + var(--sk-header-h) + 16px);
}
.hm-skd-install-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin-top: 14px;
}
.hm-skd-install-col {
	display: flex; flex-direction: column; gap: 10px;
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius-sm); padding: 18px; box-shadow: var(--shadow); min-width: 0;
}
.hm-skd-install-col h3 { font-size: 14px; margin: 0; display: flex; align-items: center; gap: 8px; }
.hm-skd-install-col h3::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.hm-skd-install-row { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 12px; }
.hm-skd-install-lab { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; color: var(--ink-faint); }
.hm-skd-install-row code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11.5px; color: var(--ink);
	background: var(--bg-2); border-radius: 6px; padding: 2px 6px;
	word-break: break-all;
}
.hm-skd-install-cmd {
	margin: 0; padding: 10px 12px; border-radius: 10px;
	background: #201c30; color: #f4eee6;
	font-size: 11px; line-height: 1.6; overflow-x: auto;
}
.hm-skd-install-cmd code {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	white-space: pre; background: none; color: inherit; padding: 0;
}
.hm-skd-install-verify { margin: 0; font-size: 12px; line-height: 1.55; color: var(--ink); }
.hm-skd-install-verify b { display: block; font-size: 10.5px; letter-spacing: .04em; color: var(--ok); margin-bottom: 2px; }
.hm-skd-install-note { margin: 0; font-size: 11.5px; line-height: 1.55; color: var(--ink-faint); }
.hm-skd-install-foot { margin-top: 12px; display: grid; gap: 4px; }
.hm-skd-install-fallback,
.hm-skd-install-doc { margin: 0; font-size: 12px; color: var(--ink-soft); line-height: 1.6; }
.hm-skd-install-fallback b { color: var(--ink); margin-right: 6px; }
.hm-skd-install-doc a { color: var(--accent-ink); font-weight: 700; }

/* ---------- 5) 用户评价：左汇总 + 星级分布 / 右列表或空态 ---------- */
.hm-skd-reviews {
	margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line);
	scroll-margin-top: calc(var(--sk-promo-h) + var(--sk-header-h) + 16px);
}
.hm-skd-rev-in { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 18px; margin-top: 16px; align-items: start; }
.hm-skd-rev-sum {
	background: #fffdf8; border: 1px solid var(--line); border-radius: var(--radius-sm);
	padding: 18px; text-align: center; align-self: start;
}
.hm-skd-rev-score {
	display: block; font-size: 38px; font-weight: 800; letter-spacing: -.03em;
	line-height: 1.1; font-variant-numeric: tabular-nums;
}
.hm-stars { position: relative; display: inline-block; font-size: 15px; letter-spacing: 2px; color: #e2dccf; }
.hm-stars::before {
	content: "★★★★★"; position: absolute; left: 0; top: 0;
	width: var(--fill, 0%); overflow: hidden; white-space: nowrap; color: #f0a92b;
}
.hm-skd-rev-count { display: block; font-size: 11.5px; color: var(--ink-faint); margin-top: 4px; }
.hm-skd-rev-dist { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 5px; }
.hm-skd-rev-dist li {
	display: grid; grid-template-columns: 30px minmax(0, 1fr) 22px;
	gap: 6px; align-items: center; font-size: 11px; color: var(--ink-faint);
}
.hm-skd-rev-bar { height: 6px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.hm-skd-rev-bar i { display: block; height: 100%; background: #f0a92b; border-radius: 999px; }
.hm-skd-rev-n { text-align: right; font-variant-numeric: tabular-nums; }
.hm-skd-rev-body { min-width: 0; }
.hm-skd-rev-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hm-skd-rev {
	display: flex; gap: 12px;
	background: var(--surface); border: 1px solid var(--line);
	border-radius: var(--radius-sm); padding: 14px 16px; box-shadow: var(--shadow);
}
.hm-skd-rev-av {
	flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
	background: var(--violet-soft); color: var(--violet-ink);
	display: grid; place-items: center; font-size: 12px; font-weight: 800;
}
.hm-skd-rev-main { min-width: 0; display: grid; gap: 4px; }
.hm-skd-rev-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.hm-skd-rev-stars { color: #f0a92b; letter-spacing: 1px; font-size: 12px; }
.hm-skd-rev-date { color: var(--ink-faint); font-size: 11px; font-style: normal; }
.hm-skd-rev-tx { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); }
.hm-skd-rev-empty {
	display: grid; place-items: center; text-align: center; gap: 6px;
	background: var(--surface); border: 1px dashed #ddd2c1;
	border-radius: var(--radius-sm); padding: 40px 24px;
}
.hm-skd-rev-empty-ic { font-size: 30px; line-height: 1; color: #e2dccf; }
.hm-skd-rev-empty b { font-size: 14px; }
.hm-skd-rev-empty p { margin: 0; max-width: 46ch; font-size: 12px; line-height: 1.6; color: var(--ink-faint); }

/* ---------- 6) 大图灯箱 ---------- */
.hm-skd-lb { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; }
.hm-skd-lb[hidden] { display: none; }
.hm-skd-lb-scrim { position: absolute; inset: 0; background: rgba(16, 13, 28, .84); }
.hm-skd-lb-panel { position: relative; width: min(940px, 100%); display: grid; gap: 10px; }
.hm-skd-lb-stage { background: var(--bg); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lift); }
.hm-skd-lb-stage .hm-prev { border: 0; border-radius: 0; }
.hm-skd-lb-x,
.hm-skd-lb-nav {
	border: 0; cursor: pointer; color: #fff;
	background: rgba(255, 255, 255, .16);
	display: grid; place-items: center;
}
.hm-skd-lb-x:hover,
.hm-skd-lb-nav:hover,
.hm-skd-lb-x:focus-visible,
.hm-skd-lb-nav:focus-visible { background: rgba(255, 255, 255, .3); }
.hm-skd-lb-x { position: absolute; right: 0; top: -46px; width: 34px; height: 34px; border-radius: 50%; font-size: 19px; line-height: 1; }
.hm-skd-lb-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; font-size: 18px; }
.hm-skd-lb-prev { left: -58px; }
.hm-skd-lb-next { right: -58px; }
.hm-skd-lb-bar { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; color: rgba(255, 255, 255, .84); }
.hm-skd-lb-cap { font-weight: 700; }
.hm-skd-lb-count { font-variant-numeric: tabular-nums; }
html.hm-lb-open, html.hm-lb-open body { overflow: hidden; }

/* ---------- 7) 缩略图第 5、6 种版式（表格 / 前后对照），与 1–4 不重复 ---------- */
.hm-prev-table { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 7px; }
.hm-prev-table b { display: block; height: 13px; border-radius: 4px; background: rgba(32, 28, 48, .09); }
.hm-prev-table b.is-head { height: 16px; background: rgba(32, 28, 48, .24); }

.hm-prev-split { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 7px; }
.hm-prev-side {
	display: grid; gap: 4px; align-content: start;
	min-height: 42px; padding: 6px; border-radius: 6px;
	background: rgba(255, 255, 255, .7);
}
.hm-prev-side-lab { display: block; width: 42%; height: 5px; border-radius: 3px; background: rgba(32, 28, 48, .3); }
.hm-prev-side i { display: block; height: 5px; border-radius: 3px; background: rgba(32, 28, 48, .12); }
.hm-prev-side.is-after .hm-prev-side-lab { background: rgba(29, 122, 74, .5); }
.hm-prev-side.is-after i { background: rgba(29, 122, 74, .22); }

.hm-prev--lg .hm-prev-table { gap: 9px; margin-top: 16px; }
.hm-prev--lg .hm-prev-table b { height: 40px; border-radius: 8px; }
.hm-prev--lg .hm-prev-table b.is-head { height: 48px; }
.hm-prev--lg .hm-prev-split { gap: 14px; margin-top: 16px; }
.hm-prev--lg .hm-prev-side { min-height: 208px; padding: 16px; border-radius: 12px; gap: 9px; }
.hm-prev--lg .hm-prev-side-lab { height: 10px; width: 36%; border-radius: 5px; }
.hm-prev--lg .hm-prev-side i { height: 10px; border-radius: 5px; }

/* ---------- 8) 窄屏：新块全部单列，缩略条 3 列两行，灯箱箭头收进画面内 ---------- */
@media (max-width: 1023px) {
	.hm-skd-decide { grid-template-columns: minmax(0, 1fr); }
	.hm-skd-install-grid { grid-template-columns: minmax(0, 1fr); }
	.hm-skd-rev-in { grid-template-columns: minmax(0, 1fr); }
	.hm-skd-rev-sum { text-align: left; }
	.hm-skd-lb-prev { left: 6px; }
	.hm-skd-lb-next { right: 6px; }
	.hm-skd-lb-x { right: 0; top: -44px; }
}
@media (max-width: 640px) {
	.hm-skd-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hm-skd-lb { padding: 12px; }
	.hm-skd-lb-panel { width: 100%; }
	.hm-skd-lb-nav { width: 36px; height: 36px; font-size: 15px; }
	.hm-skd-rev-empty { padding: 28px 16px; }
}

/* ---------- 9) 第 4 张的「文档 / 结构」版式（l7） ---------- */
.hm-prev-doc { margin-top: 7px; display: grid; gap: 4px; }
.hm-prev-doc b { display: block; height: 5px; border-radius: 3px; background: rgba(32, 28, 48, .13); }
.hm-prev-doc b.is-short { width: 58%; }
.hm-prev-quote {
	display: block; margin: 4px 0 2px; height: 22px; border-radius: 5px;
	background: rgba(32, 28, 48, .06);
	border-left: 3px solid rgba(32, 28, 48, .34);
}
.hm-prev--lg .hm-prev-doc { gap: 10px; margin-top: 16px; }
.hm-prev--lg .hm-prev-doc b { height: 10px; border-radius: 5px; }
.hm-prev--lg .hm-prev-quote { height: 92px; margin: 10px 0 6px; border-radius: 10px; border-left-width: 6px; }

/* ---------- 10) 缩略图条里的小尺寸（约 104×59）：只留能区分的形状 ----------
   6 张在 1440 下每张只有 104px 宽，正文区净高约 18px，所以这里不缩字号而是「减元素」：
   标题占位与多余文字行在缩略图里隐藏，只留下每张版式各自的识别形（栅格 / 文字行 /
   播放按钮 / 引用块 / 表格 / 前后两栏）。 */
.hm-prev-bar em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-prev--thumb .hm-prev-bar { height: 17px; padding: 5px 6px 0; gap: 3px; }
.hm-prev--thumb .hm-prev-bar span { width: 4px; height: 4px; }
.hm-prev--thumb .hm-prev-bar em { font-size: 7px; padding: 1px 5px; max-width: 68%; letter-spacing: 0; }
.hm-prev--thumb .hm-prev-body { margin: 4px 6px 6px; padding: 5px 6px; border-radius: 7px; }
/* 大图（lg）下把网页 / 卡片骨架的块拉高，避免 16:9 大图显得上半空 */
.hm-prev--lg.hm-prev--l4 .hm-prev-grid i { height: 52px; }
.hm-prev--thumb .hm-prev-chip { display: none; }
.hm-prev--thumb .hm-prev-t { display: none; }

.hm-prev--thumb .hm-prev-grid { gap: 3px; margin-top: 0; }
.hm-prev--thumb .hm-prev-grid i { height: 7px; border-radius: 2px; }
.hm-prev--thumb.hm-prev--l4 .hm-prev-lines { display: none; }

.hm-prev--thumb .hm-prev-lines { gap: 3px; margin-top: 0; }
.hm-prev--thumb .hm-prev-lines b { height: 3px; }

.hm-prev--thumb .hm-prev-play { width: 16px; height: 16px; right: 7px; bottom: 6px; }
.hm-prev--thumb .hm-prev-play::after { left: 6px; top: 4px; border-left-width: 6px; border-top-width: 4px; border-bottom-width: 4px; }

.hm-prev--thumb .hm-prev-table { gap: 2px; margin-top: 0; }
.hm-prev--thumb .hm-prev-table b { height: 3px; border-radius: 2px; }
.hm-prev--thumb .hm-prev-table b.is-head { height: 5px; }
.hm-prev--thumb .hm-prev-table b:nth-of-type(n+10) { display: none; }

.hm-prev--thumb .hm-prev-split { gap: 3px; margin-top: 0; }
.hm-prev--thumb .hm-prev-side { min-height: 0; padding: 3px; gap: 2px; border-radius: 3px; }
.hm-prev--thumb .hm-prev-side i,
.hm-prev--thumb .hm-prev-side-lab { height: 3px; }
.hm-prev--thumb .hm-prev-side i:nth-of-type(n+3) { display: none; }

.hm-prev--thumb .hm-prev-doc { gap: 2px; margin-top: 0; }
.hm-prev--thumb .hm-prev-doc b { display: none; }
.hm-prev--thumb .hm-prev-quote { height: 16px; margin: 0; border-left-width: 2px; border-radius: 3px; }