/* PixelOS inner page content styles
   Token sources:
   - Colors : theme.css 双模式语义 token(--bg --fg --accent --border ...)唯一来源;
              旧 token(--ink --line --cta ...)已于 Task 7 全量替换,临时桥已拆除。
   - Fonts  : base.css   (--font-body --font-mono)
   - Nav h  : 本文件 chrome 段 (--h-nav-h)
   No hardcoded hex / no Tailwind. */

/* ── Page wrapper ─────────────────────────────────── */
.h-page {
  position: relative; /* 供页首/页尾网格伪层定位 */
  background: var(--bg);
  color: var(--fg);
  min-height: calc(100dvh - var(--h-nav-h, 72px));
}

/* 全局网格三段式(2026-07-29 定标):顶部与底部各保完整数行全强度,中段才做光圈式不规则渐变。
   实现:::before 满页只画网格(上下边缘天然整行清晰);::after 收缩为中段专用干涉盖片层
   (两枚异圆心 repeating-radial 同心环 + 斜向条带,弧形光斑纵横两维)。
   渐隐不走 mask 防 1px 线摊薄;不用全宽 vw 单位(D12.4 红线,字面量不入注释以免误报)。 */
.h-page::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(180deg, var(--grid-line) 1px, transparent 1px);
  background-size: 36px 36px;
}
.h-page::after {
  content: '';
  position: absolute;
  top: 216px;    /* 顶部完整 6 行(6×36px)不受干涉 */
  bottom: 180px; /* 底部完整 5 行(5×36px)不受干涉 */
  left: 0;
  right: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-radial-gradient(circle at 12% -6%,
      transparent 0, transparent 300px,
      color-mix(in srgb, var(--bg) 86%, transparent) 640px,
      color-mix(in srgb, var(--bg) 86%, transparent) 780px,
      transparent 1150px),
    repeating-radial-gradient(circle at 98% 34%,
      transparent 0, transparent 380px,
      color-mix(in srgb, var(--bg) 74%, transparent) 820px,
      transparent 1460px),
    repeating-linear-gradient(115deg,
      transparent 0, transparent 420px,
      color-mix(in srgb, var(--bg) 55%, transparent) 900px,
      transparent 1560px);
}

/* ── Content container ─────────────────────────────── */
.h-page-inner {
  position: relative;
  z-index: 1; /* 内容盖在网格伪层之上(首页 .h-section-inner 同款) */
  max-width: 960px;
  margin: 0 auto;
  padding: 0 24px;
}

/* ── Hero section (H1 + subtitle) ─────────────────── */
.h-page-hero {
  /* 用 padding-block:blog/docs 首页与 .h-page-inner 同挂,shorthand 会把 24px 横距清零 */
  padding-block: 72px 56px;
  border-bottom: 1px solid var(--border);
}

.h-page-hero h1 {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 500;
  line-height: 1.1;
  color: var(--fg);
  margin: 0 0 20px;
  letter-spacing: -0.02em;
}

.h-page-hero p {
  font-family: var(--font-body);
  font-size: 1.125rem;
  line-height: 1.7;
  color: var(--fg-mute);
  max-width: 640px;
  margin: 0;
}

.h-page-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 0 0 20px;
}

/* ── Content section ───────────────────────────────── */
.h-page-section {
  /* 用 padding-block:与 .h-page-inner 同挂时不再用 shorthand 把 24px 横距清零(移动端贴边病) */
  padding-block: 56px;
  border-bottom: 1px solid var(--border);
}

.h-page-section h2 {
  font-family: var(--font-mono);
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--fg);
  margin: 0 0 24px;
}

.h-page-section h3 {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--fg);
  margin: 0 0 12px;
}

.h-page-section p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--fg-mute);
  margin: 0 0 16px;
}

.h-page-section a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.h-page-section a.h-btn-primary { text-decoration: none; } /* 按钮不吃正文链接的下划线规则 */

/* ── Long-form prose (privacy/terms/blog/docs) ──────── */
.h-prose {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.75;
  color: var(--fg-mute);
}

.h-prose h1,
.h-prose h2,
.h-prose h3,
.h-prose h4 {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--fg);
  margin: 2em 0 0.75em;
}

.h-prose h1 { font-size: 1.75rem; }
.h-prose h2 { font-size: 1.25rem; }
.h-prose h3 { font-size: 1.05rem; }

.h-prose p { margin: 0 0 1em; }

.h-prose a {
  color: var(--fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.h-prose ul,
.h-prose ol {
  margin: 0 0 1em 1.5em;
  padding: 0;
}

.h-prose li { margin: 0.25em 0; }

.h-prose strong { font-weight: 600; color: var(--fg); }

.h-prose code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--bg-inset);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

.h-prose blockquote {
  border-left: 3px solid var(--border);
  padding-left: 1em;
  color: var(--fg-faint);
  margin: 1.5em 0;
}

.h-prose hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2em 0;
}

/* ── Card ──────────────────────────────────────────── */
.h-card {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  padding: 32px;
  display: flex;
  flex-direction: column;
}

.h-card-featured {
  background: var(--bg-raised);
  border: 2px solid var(--accent);
}

/* ── Grid ──────────────────────────────────────────── */
.h-page-grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 640px) {
  .h-page-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .h-page-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .h-page-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } /* 四卡:平板 2×2 */
  .h-page-grid.cols-5 { grid-template-columns: repeat(3, 1fr); } /* 五卡:平板 3+2 */
}

@media (min-width: 1080px) {
  .h-page-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
  .h-page-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }
}

/* 平台面板:一卡两行——上行已上线(icon+名+下载钮),下行 coming 弱化队列(COMING 只出现一次) */
.h-plat-panel {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px 28px;
}
.h-plat-live { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.h-plat-icons { display: inline-flex; gap: 8px; }
.h-plat-icons .h-plat-icon { width: 34px; height: 34px; }
.h-plat-live-name { font-size: 1rem; font-weight: 500; color: var(--fg); white-space: nowrap; }
.h-plat-live .h-btn-primary { margin-left: auto; }
.h-plat-panel-div { border-top: 1px solid var(--border); margin: 20px 0; }
.h-plat-coming { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 24px; }
.h-plat-coming-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.h-plat-coming-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: var(--fg-mute);
  opacity: 0.8;
  white-space: nowrap;
}
.h-plat-coming-item .h-plat-coming-icon { width: 20px; height: 20px; }
.h-accent { color: var(--accent); font-weight: 500; } /* 强调字(与 home.css 同名同义) */

/* 价格卡分区(横线分行,四卡同区水平对齐):blurb → 时长大字高亮 → 能力清单。
   对齐机制走 subgrid(见下方 .h-plan-grid),不再用 blurb 定高那套魔法数 ——
   原实现是 height:3em「定高=两行位」,假设 blurb 永远不超两行;文案一加长,
   德语 Max 直接五行,溢出去把「ZUHÖRZEIT」标签和「Unbegrenzt」大字压成叠字(实测)。
   min-height 保留两行位只为兜底:浏览器不支持 subgrid 时至少短文案仍对齐,且永不裁切。 */
.h-page-section .h-plan-blurb {
  font-family: var(--font-body);
  color: var(--fg-mute);
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 0 0 14px;
  min-height: 3em;
}

/* 四档价格卡的结构性对齐:父网格声明行轨,每张卡 span 全部行轨并继承(subgrid)。
   于是「档名行 / 价格 / blurb / 分隔线 / 时长标签 / 时长大字 / 时长注 / 分隔线 /
   能力标题 / 能力清单」十个分区在四卡之间逐行对齐,与各语文案长短无关 ——
   新增语言或改文案都不会再碎。行数 = 卡内直接子元素个数,改结构时两处要同步。
   只在多列布局下生效:单列时上下堆叠,本就无需跨卡对齐。 */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 768px) {
    .h-plan-grid { grid-template-rows: repeat(10, auto); }
    .h-plan-grid > .h-card {
      display: grid;
      grid-row: span 10;
      grid-template-rows: subgrid;
    }
  }
}
.h-plan-div { border-top: 1px solid var(--border); margin: 0 0 14px; }
.h-page-section .h-plan-hours-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 0 0 6px;
}
/* 时长大字。white-space 从 nowrap 改为按词换行:nowrap 会把这行的固有宽度顶给栅格列,
   德语「20 Std. / Monat」固有 230px,而 1080px 视口下四列每列内容区只有约 176px ——
   整页因此横向溢出 94px(实测)。这是既有缺陷,长期没被发现是因为五档视口门禁取的是
   375/430/1440/1920/2560,恰好跳过 1080 这个四列布局的起始断点。
   改成可换行后,超长的那一档自己折两行;跨卡对齐由上面的 subgrid 负责,不会因此错位。 */
.h-page-section .h-plan-hours-big {
  font-family: var(--font-mono);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--accent);
  white-space: normal;
  overflow-wrap: break-word;
  margin: 0 0 6px;
}
.h-page-section .h-plan-hours-sub {
  font-size: 0.75rem;
  color: var(--fg-faint);
  margin: 0 0 14px;
  height: 1.4em;        /* 定高一行 + 禁折,保四卡分区绝对对齐 */
  white-space: nowrap;
}

/* 价格卡全量能力清单(四档同权,只差时长) */
.h-page-section .h-plan-feats-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin: 0 0 10px;
}
.h-plan-feats {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.h-plan-feats li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--fg-mute);
}
.h-plan-feats li svg { width: 13px; height: 13px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }


/* ── 像素方格纸工具类 ──────────────────────────────────
   9px 细格方格纸(卡片内衬密度档;home.css 网格伪层的 36px 是段落底纹档),
   线色走 --grid-line。只声明 background-image,配合元素自身 background-color
   使用(注意宿主元素要用 background-color 而非 background 短写,避免互相覆盖)。 */
.px-grid {
  background-image:
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px),
    linear-gradient(180deg, var(--grid-line) 1px, transparent 1px);
  background-size: 9px 9px;
}

/* ── 六能力:图文交替两栏行(首页语汇,无内衬网格) ── */
.h-feat-list {
  display: flex;
  flex-direction: column;
}
.h-feat-row {
  display: grid;
  gap: 28px;
  padding-block: 48px;
  border-bottom: 1px solid var(--border);
}
.h-feat-row:last-child { border-bottom: 0; }
.h-feat-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin: 0 0 12px;
}
.h-feat-row h2 {
  font-size: 1.25rem;
  line-height: 1.3;
  margin: 0 0 12px;
}
.h-feat-lead {
  max-width: 640px;
  margin: 0 0 20px;
}
.h-feat-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.h-feat-points li {
  position: relative;
  padding-left: 20px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--fg-mute);
  max-width: 640px;
}
.h-feat-points li::before {
  /* 像素感绿方块:直角不圆角(home.css 信任三点 h3::before 同款) */
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 8px;
  height: 8px;
  background: var(--accent);
}
/* ── 六能力示意图槽(首页 .shot-frag 同款框) + 纯 CSS mock 元素 ── */
.h-feat-visual { margin: 0; min-width: 0; }
.h-feat-shot {
  border: 1px solid var(--border);
  border-radius: 14px;
  background-color: var(--bg-raised);
  box-shadow: var(--shadow);
  overflow: hidden;
  padding: 20px;
}
.h-feat-shot-img { padding: 0; }
.h-feat-shot-img img { display: block; width: 100%; height: 340px; object-fit: cover; object-position: center 22%; }
.h-feat-shot-img.h-feat-shot-wide img { height: auto; object-fit: contain; } /* agent-session 横幅原比例;双类压过媒体查询里的定高 */
.h-feat-visual-cap {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
/* mock 通用件:逐字稿行 / chip / 按钮 / 水印数字,全 token,双主题自适应 */
.h-mock { position: relative; display: flex; flex-direction: column; gap: 8px; }
.h-mock-utt { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; }
.h-mock-utt:first-child { margin-top: 0; }
.h-mock-spk { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--fg); }
.h-mock-spk.is-unknown { color: var(--fg-faint); border-bottom: 1px dotted var(--fg-faint); font-weight: 400; }
.h-mock-ts { font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); margin-left: auto; }
.h-mock-tag {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 4px; padding: 1px 6px;
}
.h-mock-line { margin: 0; font-size: 0.85rem; line-height: 1.55; color: var(--fg-mute); }
.h-mock-title { margin: 0; font-family: var(--font-mono); font-size: 1.05rem; font-weight: 500; color: var(--fg); }
.h-mock-meta { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-faint); }
.h-mock-chiprow { display: flex; flex-wrap: wrap; gap: 6px; }
/* chip 内文案永不折行:长语种(es/it/fr)的行动项文案会挤压 flex 行内 chip,
   导致「Mike ·」/「vie」在胶囊内断成两行;chip 不参与收缩,由左侧文案自行换行。 */
.h-mock-chip {
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-mute);
  background-color: var(--bg-inset); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px;
  white-space: nowrap; flex: 0 0 auto;
}
.h-mock-chip.is-me { color: var(--accent-fg); background-color: var(--accent); border-color: var(--accent); font-weight: 600; }
.h-mock-cat {
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.1em;
  color: var(--accent); background-color: color-mix(in srgb, var(--accent) 14%, transparent);
  border-radius: 4px; padding: 2px 8px;
}
.h-mock-action { display: flex; align-items: center; gap: 8px; }
.h-mock-check { color: var(--accent); font-weight: 700; }
.h-mock-topic { padding-right: 96px; }
.h-mock-count {
  position: absolute; top: 4px; right: 14px;
  font-family: var(--font-mono); font-size: 64px; font-weight: 700; line-height: 1;
  color: var(--fg-faint); opacity: 0.35;
}
.h-mock-center { align-items: center; justify-content: center; min-height: 260px; }
.h-feat-shot-watchimg { display: flex; align-items: center; justify-content: center; padding: 24px; }
.h-feat-shot-watchimg img { display: block; height: 320px; width: auto; } /* watch v2 设计稿聆听态实截(docs/design/watch-app/v2),透明底原比例 */
.h-mock-keybox {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg);
  background-color: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.h-mock-schedrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fg-mute);
  background-color: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
}
.h-mock-pill { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; color: var(--fg-faint); }
.h-mock-pill.is-on { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); font-weight: 600; }
.h-mock-search {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-faint);
  background-color: var(--bg-inset);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  margin-bottom: 4px;
}
.h-mock-rec { margin: 0; font-family: var(--font-mono); font-size: 11px; color: var(--fg-faint); padding-left: 10px; border-left: 2px solid var(--border); }
.h-mock-player { display: flex; align-items: center; gap: 8px; }
.h-mock-pbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--border); color: var(--fg-mute);
  font-size: 10px; line-height: 1;
}
.h-mock-pbtn.is-play { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.h-mock-keyrow { display: flex; align-items: center; gap: 10px; }
.h-mock-keyrow .h-mock-keybox { flex: 1; }
.h-mock-newkey {
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  color: var(--accent-fg); background: var(--accent);
  border-radius: 6px; padding: 6px 10px; white-space: nowrap;
}
/* 终端窗示意(真文本,替代 agent-session 图片):深色窗体恒定,不随主题翻转(与截图类素材同策略);
   绿色用固定 #7FBA13——浅色主题的 --accent 深绿在深窗上对比不足(同 home.css cap 系列豁免) */
.h-feat-shot-term { padding: 0; background-color: #0e1216; }
.h-mock-termbar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.10); }
.h-mock-dot-r, .h-mock-dot-y, .h-mock-dot-g { width: 10px; height: 10px; border-radius: 50%; }
.h-mock-dot-r { background: #ff5f57; }
.h-mock-dot-y { background: #febc2e; }
.h-mock-dot-g { background: #28c840; }
.h-mock-termname { margin-left: 6px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; color: rgba(255, 255, 255, 0.45); }
.h-mock-termbody { padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 12px; }
.h-mock-termbody p { margin: 0; font-family: var(--font-mono); font-size: 0.85rem; line-height: 1.6; }
/* 前缀 .h-page-section 抬特异性:裸单类会被 .h-page-section p 的颜色压掉,终端变单色(历史踩坑) */
.h-page-section .h-mock-cmd { color: #e8eaec; }
.h-page-section .h-mock-ok { color: #7FBA13; }
.h-page-section .h-mock-mut { color: rgba(255, 255, 255, 0.55); }
.h-mock-btnrow { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.h-mock-btn {
  font-family: var(--font-mono); font-size: 12px; color: var(--fg-mute);
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px;
}
.h-mock-btn.is-accent { color: var(--accent-fg); background-color: var(--accent); border-color: var(--accent); font-weight: 600; }
.h-mock-btn.is-accent em { font-style: normal; opacity: 0.75; font-size: 11px; margin-left: 4px; }

@media (min-width: 768px) {
  .h-feat-row {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 56px;
    padding-block: 56px;
  }
  .h-feat-row:nth-child(even) .h-feat-visual { order: -1; } /* 图文左右交替 */
  .h-feat-row h2 {
    font-size: 1.5rem;
  }
  .h-feat-shot-img img { height: 400px; }
  .h-feat-shot-watchimg img { height: 360px; }
}

/* ── Table ─────────────────────────────────────────── */
.h-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-body);
  font-size: 0.9rem;
}

.h-table th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
  text-align: left;
  padding: 12px 8px 12px 0;
  border-bottom: 1px solid var(--border);
}

.h-table th:first-child { padding-left: 0; }

.h-table td {
  padding: 16px 8px 16px 0;
  border-bottom: 1px solid var(--border);
  color: var(--fg-mute);
  vertical-align: middle;
}

.h-table td:first-child { padding-left: 0; }

/* ── Buttons ───────────────────────────────────────── */
.h-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  background: var(--accent);
  color: var(--accent-fg);   /* 深色态绿底配深字、浅色态配白字(theme.css 对比度记录),不再硬编码白 */
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: opacity 0.15s;
  text-align: center;
}

.h-btn-primary:hover { background: var(--accent-hover); }
.h-btn-primary svg { width: 16px; height: 16px; }

.h-btn-outline {
  display: inline-block;
  padding: 12px 24px;
  border: 1px solid var(--border);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  transition: background 0.15s;
  text-align: center;
}

.h-btn-outline:hover { background: var(--bg-inset); }

/* ── CTA section ───────────────────────────────────── */
.h-page-cta {
  padding: 80px 24px;   /* 独立使用(无 .h-page-inner 包裹),自带 24px 横距防移动端贴边 */
  text-align: center;
}

.h-page-cta h2 {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  font-weight: 500;
  color: var(--fg);
  margin: 0 0 24px;
}

/* ── Blog/changelog list ───────────────────────────── */
.h-entry-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.h-entry-item {
  padding: 32px 0;
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: 8px;
}

.h-entry-date {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-faint);
}

.h-entry-title {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--fg);
  text-decoration: none;
}

.h-entry-title:hover { opacity: 0.75; }

/* 索引卡片上的回退标注(比正文提示条更轻,只是一行小字) */
.h-entry-item .h-entry-fallback {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-faint);
  margin: 0;
}

/* 正文语种提示条(法律页「以英文为准」+ 博客回退英文两处共用)。
   position/z-index 不可省:本条是 .h-page 的直接子元素,而 .h-page::after 那层网格干涉盖片
   同在 z-index 0 且后绘制 —— 不抬层就会被盖成一条几乎读不出来的灰影(实测踩过)。
   配色也刻意比装饰性小字重:这条是「你正在读的不是本语言原文」这种必须读到的信息,
   用 --fg-mute 而不是 --fg-faint。 */
.h-body-notice {
  position: relative;
  z-index: 1;
  background: var(--bg-inset);
  border-block: 1px solid var(--border);
  padding: 10px 24px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--fg-mute);
}

/* 该语言暂无文章时的空状态(2026-08-01 起为八语常态,不是异常态) */
.h-entry-empty {
  padding: 48px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: grid;
  gap: 10px;
}

/* 前缀 .h-entry-empty 抬特异性:裸单类(0,1,0)会被 .h-page-section p(0,1,1)压掉 —— 同一个坑
   在终端配色上踩过一次(见本文件 527 行注释),这里预防性抬到 (0,2,0) */
.h-entry-empty .h-entry-empty-title {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--fg);
  margin: 0;
}

.h-entry-empty .h-entry-empty-body {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--fg-mute);
  line-height: 1.6;
  max-width: 52ch;
  margin: 0;
}

.h-entry-excerpt {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--fg-mute);
  line-height: 1.6;
}

/* 行内 coming / placeholder 小标签 */
.mock-badge {
  display: inline-block;
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-faint);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 1px 6px;
  vertical-align: middle;
}

/* ── Docs sidebar layout ───────────────────────────── */
.h-docs-layout {
  display: grid;
  gap: 48px;
  align-items: start;
}

@media (min-width: 768px) {
  .h-docs-layout { grid-template-columns: 200px 1fr; }
}

.h-docs-sidebar {
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.h-docs-sidebar-section { margin-bottom: 24px; }

.h-docs-sidebar-label {
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fg-faint);
  margin: 0 0 8px;
}

.h-docs-sidebar a {
  display: block;
  color: var(--fg-mute);
  text-decoration: none;
  padding: 4px 0;
  transition: color 0.1s;
}

.h-docs-sidebar a:hover,
.h-docs-sidebar a[aria-current] { color: var(--fg); }

/* ── 404 ───────────────────────────────────────────── */
.h-page-404 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100dvh - var(--h-nav-h, 72px));
  text-align: center;
  padding: 48px 24px;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   内页 chrome(Task 6 从 home.css 移植的双模式导航/页脚)
   —— 旧 home-v2/v3.css 退役后,内页的 nav/footer/按钮样式在此承载,
   颜色全部走 theme.css 语义 token(移动优先,375 基准,768/1080 两档往上加)。
   Task 7 已完成:正文旧 token 全量替换 + 旧 token 临时桥拆除。
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── 基础 reset + 排版(与 home.css 同款;仅内页加载本文件,不影响首页)── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
img { max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── 版心(footer 用)── */
.h-section-inner { max-width: 1120px; margin: 0 auto; padding: 0 20px; width: 100%; }

/* ── 按钮基类(nav 下载触发钮用;内容区 CTA 走前文 .h-btn-primary 独立声明)── */
.h-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border: 0;
  border-radius: 6px;
  font-size: 14px;
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.h-btn svg { width: 16px; height: 16px; display: block; }
.h-btn.h-btn-primary {               /* 双类压过前文内容区 .h-btn-primary 的 padding/display */
  display: inline-flex;
  padding: 10px 18px;
  background: var(--accent);
  color: var(--accent-fg);
}
.h-btn.h-btn-primary:hover { background: var(--accent-hover); }

/* ── 导航条(与首页同款,PixelOSNav 结构)── */
:root { --h-nav-h: 60px; }
.h-nav {
  position: sticky; top: 0; z-index: 50;
  height: var(--h-nav-h);
  background: var(--bg);                                    /* 不支持 color-mix 的兜底 */
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: background 0.2s ease;
}
.h-nav.is-scrolled {
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 94%, transparent);
}
.h-nav-inner {
  max-width: 1120px; height: 100%;
  margin: 0 auto; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.h-nav-left { display: flex; align-items: center; gap: 32px; min-width: 0; }
.h-nav-brand { display: flex; align-items: center; flex-shrink: 0; }
.h-nav-logo { height: 24px; width: auto; display: block; }
/* 字标双模式:深色态用白字标,浅色态换墨色字标(两张 img 并排渲染,按主题显隐) */
.h-nav-logo-light { display: none; }
:root[data-theme="light"] .h-nav-logo-dark { display: none; }
:root[data-theme="light"] .h-nav-logo-light { display: block; }
.h-nav-links { display: none; }                              /* 移动端隐藏文字导航 */
.h-nav-links a { color: var(--fg-mute); transition: color 0.15s ease; }
.h-nav-links a:hover { color: var(--fg); }
.h-nav-cta { display: flex; align-items: center; gap: 12px; }

/* 语言切换 dropdown(移动端隐藏,≥768px 显示) */
.h-nav-lang { position: relative; display: block; }   /* 移动端也显示语言切换(应用户要求恢复) */
.h-nav-lang-trigger {
  display: inline-flex; align-items: center; gap: 4px;
  background: none; border: 0; cursor: pointer;
  padding: 8px 0;
  font-size: 14px;
  color: var(--fg-mute);
  transition: color 0.15s ease;
}
.h-nav-lang-trigger:hover { color: var(--fg); }
.h-nav-lang-chevron { width: 14px; height: 14px; transition: transform 0.15s ease; }
.h-nav-lang.is-open .h-nav-lang-chevron { transform: rotate(180deg); }
.h-nav-lang-menu {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  min-width: 132px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  max-height: calc(100vh - 120px);   /* 9 项菜单(2026-07-29 全量放开)矮视口防越屏,超出时菜单内滚动;常规视口自然撑开 */
  max-height: calc(100dvh - 120px);
  overflow-y: auto;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.15s ease, visibility 0.15s ease, transform 0.15s ease;
}
.h-nav-lang.is-open .h-nav-lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.h-nav-lang-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--fg-mute);
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.h-nav-lang-item:hover { background: var(--bg-inset); color: var(--fg); }
.h-nav-lang-item.is-on { color: var(--fg); font-weight: var(--fw-medium); }
.h-nav-lang-item.is-on::after {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  margin-left: 16px;
}

/* ── Footer(与首页同款,PixelOSFooter 结构)── */
.h-foot {
  background: var(--bg-inset);
  border-top: 1px solid var(--border);
  padding: 48px 0 32px;
}
.h-foot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
.h-foot-col { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.h-foot-soon-label {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 12px;               /* 与 .h-foot-head(DOWNLOAD 列头)同参 */
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.h-foot-soon-item { color: var(--fg-faint); cursor: default; }
.h-foot-head {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
  margin-bottom: 4px;
}
.h-foot-col a { color: var(--fg-mute); transition: color 0.15s ease; }
.h-foot-col a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.h-foot-col a.is-coming { color: var(--fg-faint); }
.h-foot-tag-soon {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-faint);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 6px;
}
.h-foot-social { display: flex; gap: 10px; margin-top: 2px; }
.h-foot-social a {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  color: var(--fg-mute);
  transition: background 0.15s ease, color 0.15s ease;
}
.h-foot-social a:hover { background: var(--bg-raised); color: var(--fg); }
.h-foot-social svg { width: 18px; height: 18px; }
.h-foot-bottom {
  max-width: 1120px; margin: 40px auto 0; padding: 20px 20px 0;
  border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 8px;
  font-size: 13px; color: var(--fg-faint);
}
.h-foot-bottom-meta { display: flex; gap: 20px; }
.h-foot-bottom-meta a:hover { color: var(--fg); }

/* ── ≥768px ── */
@media (min-width: 768px) {
  :root { --h-nav-h: 72px; }
  body { font-size: 16px; }
  .h-nav-logo { height: 28px; }
  .h-nav-links { display: flex; gap: 28px; font-size: 14px; }
  .h-foot-grid { grid-template-columns: repeat(4, 1fr); }
  .h-foot-bottom { flex-direction: row; justify-content: space-between; align-items: center; gap: 16px; }
}

/* ── ≥1080px ── */
@media (min-width: 1080px) {
  .h-foot-grid { grid-template-columns: repeat(5, 1fr); }
}

/* ── 动效纪律:reduce 下全部关闭 ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}