/*
 * download-site.css — 下载站（quickfind-download）专属版式层
 *
 * ⚠ download 站专属资产：手写，不在 _tools/sync_download_site.js 同步清单内。
 *   与 docs-site.css / support-site.css 同一理由——同步来的资产不能手改。
 *   由 build_download_pages.js 通过 <link> 注入，排在 footer.css 之后。
 *
/*
 * 覆盖八块：
 *   1. hero 升级（双栏 · 版本 pill + OS 探测主 CTA + 产品预览 + 信任条 + chips）
 *   2. ① 版本与通道卡 / ② 构建物表 / 平台状态条
 *   3. ③ 下载源说明 / ⑥ 系统要求指标卡 / ⑦ 安装 FAQ
 *   4. 分区骨架（.dl-sec）
 *   5. 下载行的 SHA 复制按钮（主站 download.js 渲染的 .sha 是纯文本）
 *   6. 镜像条说明行
 *   7. 三步流程时间线
 *   8. 深色微调 + 窄屏 + 减少动效
 *
 * 全部只用 --qf-* 变量（tokens.css 有完整 [data-theme="dark"] 覆盖）。
 */

:root {
  --dl-maxw: 1120px;
  --dl-chip-h: 34px;
}

/* ---------------------------------------------------------------------------
   1. Hero
   --------------------------------------------------------------------------- */
.page-hero.dl-hero {
  padding: 56px 0 44px;
  text-align: left;
  background:
    radial-gradient(880px 320px at 82% -38%, var(--qf-brand-glow), transparent 62%),
    linear-gradient(180deg, var(--qf-surface-hover), var(--qf-bg));
  border-bottom: 1px solid var(--qf-border-soft);
}

/* 双栏：左文案决策 + 右产品实感。
   断点 960px —— 实测 1440px 下右栏有 ~700px 全空，那是首屏最大的一笔浪费。
   低于 960px 折成单栏（预览落在 CTA 之后，不在之前：先给答案，再给预览）。 */
.dl-hero .container { max-width: var(--dl-maxw); }

.dl-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 48px;
  align-items: center;
}

.dl-hero-main { min-width: 0; }

.dl-hero-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

/* ---- 产品界面预览（纯 CSS，无图片）----
   为什么不用截图：改 App 界面就要换图，且深色主题下浅色截图色调不对。
   这里跟主题变量走，改配色只需改这里一处。 */
.dl-shot {
  overflow: hidden;
  border: 1px solid var(--qf-border);
  border-radius: var(--qf-radius-lg);
  background: var(--qf-surface);
  box-shadow: var(--qf-shadow-lg);
  /* 轻微倾斜 = 有实物感；不倾斜则更像"代码画的产品图" */
  transform: perspective(1400px) rotateY(-7deg) rotateX(2deg);
  transform-origin: center right;
}

.dl-shot-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--qf-border-soft);
  background: var(--qf-surface-hover);
}

.dl-shot-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--qf-border);
}

.dl-shot-title {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--qf-text-muted);
}

.dl-shot-body { padding: 14px; }

.dl-shot-box {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 13px;
  border: 1px solid var(--qf-primary-ring);
  border-radius: var(--qf-radius-md);
  background: var(--qf-primary-soft);
  box-shadow: 0 0 0 3px var(--qf-primary-ring);
}

.dl-shot-box svg { width: 16px; height: 16px; flex: none; color: var(--qf-primary); }

.dl-shot-q {
  font-size: 14px;
  font-weight: 600;
  color: var(--qf-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.dl-shot-q em { color: var(--qf-primary); font-style: normal; }

.dl-shot-kbd {
  margin-left: auto;
  padding: 2px 7px;
  border: 1px solid var(--qf-border);
  border-radius: 5px;
  background: var(--qf-surface);
  font-size: 10.5px;
  font-weight: 600;
  color: var(--qf-text-muted);
}

.dl-shot-rows { display: grid; gap: 2px; margin-top: 10px; }

.dl-shot-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: var(--qf-radius-sm);
}

.dl-shot-row.is-hi { background: var(--qf-primary-soft); }
.dl-shot-row.is-dim { opacity: .55; }

.dl-shot-ic {
  flex: none;
  width: 15px;
  height: 18px;
  border-radius: 3px;
  background: var(--qf-border);
}

/* 文件类型色块：用 currentColor 家族不成立（要区分类型），故走 --qf-* */
.dl-shot-ic.is-doc { background: var(--qf-info); }
.dl-shot-ic.is-img { background: var(--qf-success); }
.dl-shot-ic.is-pdf { background: var(--qf-danger); }
.dl-shot-ic.is-code { background: var(--qf-primary); }

.dl-shot-l1 {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--qf-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-shot-l2 { flex: none; font-size: 11.5px; color: var(--qf-text-muted); }

/* ---- 信任背书条 ---- */
.dl-trust {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--qf-border-soft);
  border-radius: var(--qf-radius-lg);
  background: var(--qf-border-soft);
  overflow: hidden;
}

.dl-trust-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 15px 18px;
  background: var(--qf-surface);
}

.dl-trust-item b { font-size: 13.6px; color: var(--qf-text); }
.dl-trust-item span { font-size: 12.4px; color: var(--qf-text-muted); }

/* 版本 pill：版本号 + 发布日期 + 产物数，一屏说清「这是什么版本」 */
.dl-ver {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--qf-border);
  border-radius: 999px;
  background: var(--qf-surface);
  box-shadow: var(--qf-shadow-sm);
  font-size: 13px;
  color: var(--qf-text-muted);
}

.dl-ver b {
  font-size: 15px;
  font-weight: 700;
  color: var(--qf-primary);
  font-variant-numeric: tabular-nums;
}

.dl-ver [data-dl="date"] { font-size: 12.4px; }
.dl-ver [data-dl="count"] {
  padding-left: 8px;
  border-left: 1px solid var(--qf-border);
  font-size: 12.4px;
}

.page-hero.dl-hero h1 {
  margin: 0 0 12px;
  font-size: clamp(30px, 4.4vw, 44px);
  line-height: 1.14;
  letter-spacing: -.02em;
}

.page-hero.dl-hero .lead {
  max-width: 60ch;
  margin: 0 0 22px;
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--qf-text-muted);
}

.dl-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.dl-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: var(--dl-chip-h);
  padding: 0 14px;
  border: 1px solid var(--qf-border);
  border-radius: 999px;
  background: var(--qf-surface);
  color: var(--qf-text);
  font-size: 13.4px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}

.dl-chip:hover {
  border-color: var(--qf-primary);
  background: var(--qf-primary-soft);
  color: var(--qf-primary);
}

.dl-chip svg { width: 15px; height: 15px; flex: none; opacity: .82; }

/* ---------------------------------------------------------------------------
   1b. 主 CTA（OS 探测 · 设计稿七件套之首）
   —— 这一屏是「点什么」的唯一答案：主按钮 + 副标 + 次按钮 + 其他平台。
   --------------------------------------------------------------------------- */
.dl-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0 0 20px;
}

/* ⚠ hidden 属性必须显式压掉：本块设了 display:flex，
   hidden 的默认 display:none 会被 flex 覆盖，CTA 会在没有数据时露出来。 */
.dl-cta[hidden] { display: none; }

.dl-cta-pick {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dl-cta-os {
  font-size: 13.4px;
  font-weight: 600;
  color: var(--qf-text-muted);
}

.dl-cta-switch {
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--qf-border);
  border-radius: 999px;
  background: var(--qf-surface);
  color: var(--qf-primary);
  font: inherit;
  font-size: 12.8px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease;
}

.dl-cta-switch:hover { border-color: var(--qf-primary); background: var(--qf-primary-soft); }

.dl-cta-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--qf-z-dropdown);
  min-width: 200px;
  padding: 6px;
  border: 1px solid var(--qf-border);
  border-radius: var(--qf-radius-md);
  background: var(--qf-surface);
  box-shadow: var(--qf-shadow-md);
}

.dl-cta-menu[hidden] { display: none; }

.dl-cta-opt {
  display: block;
  width: 100%;
  padding: 9px 11px;
  border: 0;
  border-radius: var(--qf-radius-sm);
  background: transparent;
  color: var(--qf-text);
  font: inherit;
  font-size: 13.6px;
  text-align: left;
  cursor: pointer;
}

.dl-cta-opt:hover { background: var(--qf-surface-hover); }
.dl-cta-opt[aria-current="true"] { color: var(--qf-primary); font-weight: 600; }

.dl-cta-main {
  min-width: 260px;
  text-align: center;
}

/* 置灰但**不是**禁用：仍然可点（跳到构建物表看未发布状态）。
   用 aria-disabled 而不是 disabled 属性，就是这个意思。 */
.dl-cta-main.is-soon {
  background: var(--qf-surface-hover);
  border-color: var(--qf-border);
  color: var(--qf-text-muted);
}

.dl-cta-sub {
  margin: 0;
  font-size: 13.4px;
  color: var(--qf-text-muted);
  font-variant-numeric: tabular-nums;
}

.dl-cta-sub.is-soon { max-width: 52ch; line-height: 1.6; }

.dl-cta-alt { min-width: 220px; text-align: center; }

.dl-cta-other {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--qf-text-muted);
}

/* 「其他平台」的入口是按钮（点了切换 CTA），视觉上要像链接 */
.dl-cta-jump {
  padding: 0;
  border: 0;
  background: none;
  color: var(--qf-text-muted);
  font: inherit;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.dl-cta-jump:hover { color: var(--qf-primary); }

.dl-cta-verify {
  margin: 0;
  font-size: 13px;
}

.dl-cta-verify a { color: var(--qf-primary); font-weight: 600; }

/* hero 里的未签名提示：首屏就要看见，别占太宽 */
.page-hero.dl-hero .callout-warn {
  max-width: 68ch;
  margin: 4px 0 0;
}

/* ---------------------------------------------------------------------------
   1c. 分区骨架
   --------------------------------------------------------------------------- */
.dl-sec { margin: 46px 0; }
.dl-sec:first-child { margin-top: 8px; }

/* 通栏的交替底色区块要自己补纵向内边距（.section-alt 只给底色和边线） */
.dl-sec.section-alt {
  margin: 0;
  padding: 46px 0;
}

.dl-noscript {
  margin: 12px 0 0;
  font-size: 13.4px;
  color: var(--qf-text-muted);
}

/* ---------------------------------------------------------------------------
   2. ① 版本与通道 / ② 构建物表
   --------------------------------------------------------------------------- */
.dl-ch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}

.dl-ch-card {
  padding: 18px 18px 16px;
  border: 1px solid var(--qf-border);
  border-radius: var(--qf-radius-lg);
  background: var(--qf-surface);
  box-shadow: var(--qf-shadow-sm);
}

.dl-ch-card.is-beta { border-style: dashed; background: var(--qf-surface-hover); }
.dl-ch-card.is-asked { border-color: var(--qf-primary); box-shadow: 0 0 0 3px var(--qf-primary-ring); }

.dl-ch-top {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
}

.dl-ch-top b { font-size: 15.5px; }

.dl-ch-badge {
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--qf-primary-soft);
  color: var(--qf-primary);
  font-size: 11.6px;
  font-weight: 700;
}

.dl-ch-dl { margin: 0 0 10px; }

.dl-ch-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--qf-border-soft);
}

.dl-ch-row:last-child { border-bottom: 0; }
.dl-ch-row dt { flex: none; width: 62px; font-size: 12.8px; color: var(--qf-text-muted); }
.dl-ch-row dd { margin: 0; font-size: 13.6px; font-weight: 600; font-variant-numeric: tabular-nums; }

.dl-ch-note,
.dl-ch-empty {
  margin: 0 0 10px;
  font-size: 13.2px;
  line-height: 1.62;
  color: var(--qf-text-muted);
}

.dl-ch-links { margin: 0; font-size: 13.2px; }
.dl-ch-links a { color: var(--qf-primary); font-weight: 600; }

.dl-ch-asked {
  margin: 10px 0 0;
  padding: 9px 11px;
  border-radius: var(--qf-radius-sm);
  background: var(--qf-primary-soft);
  color: var(--qf-primary);
  font-size: 12.8px;
  font-weight: 600;
}

/* ---- 构建物表 ---- */
.dl-builds-tbl { font-size: 13.4px; }
.dl-builds-tbl th,
.dl-builds-tbl td { vertical-align: middle; }
.dl-builds-tbl code { font-size: 12.4px; word-break: break-all; }

/* ---- 平台状态条（2026-10-16 大厂化）
   把原来三块 ~110px 的 platform-head 压成三行 ~46px。
   ⚠ #winList 里的 .dl-row 是主站 download.js 渲染的（同步资产，不能改结构），
     这里只调它在本条里的密度；#winList .btn 上挂着远程停下载开关，别动 display。 */
.dl-plat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--qf-border-soft);
  border-radius: var(--qf-radius-md);
  background: var(--qf-surface);
}

.dl-plat + .dl-plat-list + .dl-plat,
.dl-plat-list:not(:empty) { margin-top: 8px; }

.dl-plat.is-soon {
  border-style: dashed;
  background: var(--qf-surface-hover);
}

.dl-plat-name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.dl-plat-name b { font-size: 14px; color: var(--qf-text); }
.dl-plat.is-soon .dl-plat-name b { color: var(--qf-text-muted); }

.pl-icon.is-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--qf-radius-sm);
  background: var(--qf-primary-soft);
  color: var(--qf-primary);
}

.pl-icon.is-sm svg { width: 15px; height: 15px; }

.dl-plat.is-soon .pl-icon.is-sm {
  background: var(--qf-surface);
  color: var(--qf-text-muted);
}

.dl-plat-note {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--qf-text-muted);
}

.dl-plat-state {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.6px;
  font-weight: 700;
}

.dl-plat-state.is-ready {
  background: var(--qf-success-soft);
  color: var(--qf-success);
}

/* winList 的行在本条里横排（原来是一行 meta + 一个右侧大按钮的竖排卡） */
.dl-plat-list .dl-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 11px 14px;
  border: 1px solid var(--qf-border-soft);
  border-radius: var(--qf-radius-md);
  background: var(--qf-surface);
}

.dl-plat-list .dl-row .meta { flex: 1; min-width: 0; }
.dl-plat-list .dl-row h4 { font-size: 14px; }
.dl-plat-list .dl-row small { font-size: 12.6px; }
.dl-plat-list .dl-row .btn { flex: none; }

/* SHA 在上面的「全部构建物」表里已完整列出；这里压成一行 + 省略号，
   只保留「这里有校验值、能复制」的信息，不重复占整行宽度。
   ⚠ 不能 display:none 掉 .sha：wireShaCopy() 要读它 textContent 才能挂复制按钮
     （font-size/截断都不影响 textContent，只有 display:none 会）。 */
.dl-plat-list .sha {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 260px;
  min-width: 0;
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
}

.dl-plat-list .sha { text-overflow: ellipsis; }
.dl-plat-list .dl-sha-copy { flex: none; }

/* 空态（macOS/Linux 未发布）：压到一行，别占大块 */
.dl-plat-list .dl-row-empty { padding: 10px 14px; }
.dl-plat-list .dl-row-empty h4 { font-size: 13px; }
.dl-plat-list .dl-row-empty small { font-size: 12.4px; }

.dl-b-os { font-weight: 600; }
.dl-b-size { font-variant-numeric: tabular-nums; white-space: nowrap; }

.dl-b-sha { min-width: 190px; }
.dl-b-sha-txt { margin-right: 6px; color: var(--qf-text-muted); }

.dl-b-src { white-space: nowrap; }

.dl-b-btn {
  display: inline-block;
  min-width: 62px;
  margin-right: 6px;
  padding: 5px 11px;
  border: 1px solid var(--qf-border);
  border-radius: 999px;
  background: var(--qf-surface);
  color: var(--qf-text);
  font-size: 12.4px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}

.dl-b-btn:hover {
  border-color: var(--qf-primary);
  background: var(--qf-primary-soft);
  color: var(--qf-primary);
}

/* 未发布平台：整行压暗，但仍可读（不隐藏——设计稿要的就是「看得见的空」） */
.dl-builds-tbl tr.is-soon th,
.dl-builds-tbl tr.is-soon td { color: var(--qf-text-muted); }
.dl-builds-tbl tr.is-soon { background: var(--qf-surface-hover); }

.dl-b-soon { font-size: 12.6px; color: var(--qf-text-muted); }

/* ---------------------------------------------------------------------------
   3. ③ 下载源 / ⑥ 系统要求 / ⑦ 安装 FAQ
   --------------------------------------------------------------------------- */
.dl-src-list {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
}

.dl-src-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--qf-border-soft);
  border-radius: var(--qf-radius-md);
  background: var(--qf-surface);
}

.dl-src-item.is-off { background: var(--qf-surface-hover); border-style: dashed; }
.dl-src-item.is-off .dl-src-main b { color: var(--qf-text-muted); }

.dl-src-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.dl-src-main b { font-size: 14px; }
.dl-src-desc { font-size: 12.8px; color: var(--qf-text-muted); }
.dl-src-link { font-size: 13px; font-weight: 600; color: var(--qf-primary); white-space: nowrap; }

.dl-src-off {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--qf-surface-hover);
  color: var(--qf-text-muted);
  font-size: 12px;
  font-weight: 600;
}

.dl-req-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.dl-req-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px 16px;
  border: 1px solid var(--qf-border-soft);
  border-radius: var(--qf-radius-md);
  background: var(--qf-surface);
}

.dl-req-card b {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--qf-text);
}

.dl-req-card span { font-size: 12.8px; color: var(--qf-text-muted); }

.dl-req-more { margin: 16px 0 0; text-align: center; }

.dl-faq-list { display: grid; gap: 10px; }

.dl-faq-item {
  display: block;
  padding: 14px 16px;
  border: 1px solid var(--qf-border-soft);
  border-radius: var(--qf-radius-md);
  background: var(--qf-surface);
  text-decoration: none;
  transition: border-color .16s ease, transform .16s ease;
}

.dl-faq-item:hover { border-color: var(--qf-primary); transform: translateY(-1px); }

/* ------------------------------------------------------------------
 * 更新日志（#changelog）— 2026-10-16 新增
 *
 * 【竖向时间线而不是 grid】
 *   更新日志的语义是「时间上有先后」，横排网格会把这个关系抹掉；
 *   而且只有一个版本时（现在就是），grid 的 auto-fit 会铺出
 *   "1152px 0px 0px" 隐式轨道、把单卡拉成一条横幅（product 站踩过）。
 *   所以：单列 + 左侧竖线 + 节点圆点。
 * ------------------------------------------------------------------ */
.dl-log-list {
  display: grid;
  gap: 12px;
  /* 左侧留出「轨道」：竖线与圆点都画在这条留白里，卡片不压在它上面。
     踩过一次：没留 gutter，把竖线设成 left:7px、圆点 left:3.5px，
     结果两者的 z 位都在卡片背景**下面** —— 线整条看不见，圆点只剩半个方块。 */
  position: relative;
  padding-left: 22px;
}

.dl-log-card {
  position: relative;
  padding: 16px 18px;
  border: 1px solid var(--qf-border-soft);
  border-radius: var(--qf-radius-md);
  background: var(--qf-surface);
}

/* 竖线：画在左侧 gutter 里（容器 left:7px + 宽 2 → 中心 8px） */
.dl-log-list::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: var(--qf-border-soft);
  border-radius: 2px;
}

/* 圆点相对卡片定位：卡片左边缘 = gutter 右边缘（22px），
   要让圆心落在竖线中心 8px 处 → left = 8 - 4.5 - 22 = -18.5px */
.dl-log-card::before {
  content: "";
  position: absolute;
  left: -18.5px;
  top: 21px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--qf-border);
}

.dl-log-card.is-latest::before {
  background: var(--qf-primary);
  box-shadow: 0 0 0 3px var(--qf-primary-soft);
}

.dl-log-card.is-latest {
  border-color: var(--qf-primary-ring);
  background: var(--qf-primary-soft);
}

.dl-log-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.dl-log-ver {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--qf-text);
}

.dl-log-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--qf-primary);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
}

.dl-log-chan {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--qf-surface-hover);
  color: var(--qf-text-muted);
  font-size: 11.5px;
  font-weight: 600;
}

.dl-log-head time { font-size: 12.5px; color: var(--qf-text-muted); }

.dl-log-t {
  margin: 0 0 8px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--qf-text);
}

/* 条目勾号用 data-URI 画在 ::before 上，**不要**再往 li 里内联 SVG：
   内联 SVG 没有内在尺寸会撑满整行（145px 的三条列表实测能到 1455px）。 */
.dl-log-points {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dl-log-points li {
  position: relative;
  padding-left: 20px;
  font-size: 13.2px;
  line-height: 1.65;
  color: var(--qf-text-muted);
}

.dl-log-points li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .55em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--qf-primary);
  border-bottom: 2px solid var(--qf-primary);
  transform: rotate(-45deg);
}

.dl-log-empty {
  margin: 0;
  padding: 16px 18px;
  border: 1px dashed var(--qf-border-soft);
  border-radius: var(--qf-radius-md);
  font-size: 13px;
  color: var(--qf-text-muted);
  text-align: center;
}

.dl-log-more {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 18px 0 0;
}

.dl-log-note { font-size: 13px; color: var(--qf-text-muted); text-decoration: underline; }
.dl-log-note:hover { color: var(--qf-primary); }

/* ---------------------------------------------------------------------------
   7. 三步流程（#steps）—— 2026-10-16 大厂化
   ---------------------------------------------------------------------------
   原来三张等宽灰卡平铺，读起来是「三个并列的点」。
   但步骤的语义是**时间上有先后**（装 → 索引 → 呼出），横排网格把这个关系抹掉了。
   改成带序号徽标 + 连接线的时间线，并给第一步一个"主步骤"的重量。

   ⚠ .steps / .step 是主站同步资产的类名，download.js 不碰它们（纯静态文案），
     所以可以放心重排版式；但不要改标签结构（h4/p 在里面，i18n 键挂在 h4 上）。
   --------------------------------------------------------------------------- */
.dl-steps {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

/* ⚠ 主站 .step 是 `display:flex; flex-direction:column` 的横排卡（site.css），
   且 .steps 是三列 grid —— 不显式覆盖的话：① 卡片保持列向，文字被挤成
   2~3 行竖条；② 主站自带的圆形序号点还在，我的 dl-step-no 变成第二个圆点。
   这里把列向改回行向（序号在左、正文在右），是本站唯一需要的偏离。 */
.dl-steps .step {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 22px;
  border: 1px solid var(--qf-border-soft);
  border-radius: var(--qf-radius-lg);
  background: var(--qf-surface);
  box-shadow: var(--qf-shadow-sm);
}

/* ⚠ 主站 site.css 的 `.step::before` 会画一个蓝色圆点序号（site.css:361 + ui.css:136）。
   本站改成显式序号徽标（.dl-step-no），必须把这个伪元素关掉 ——
   否则每张卡左边出现两个圆点（本条的序号 + 主站那个），且看不出哪个是真序号。 */
.dl-steps .step::before { content: none; }

/* 连接线画在两卡之间的 gap 里（卡片 padding 让位，线不会压在卡片上） */
.dl-steps .step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 41px;
  top: 100%;
  width: 2px;
  height: 14px;
  background: var(--qf-border);
  border-radius: 2px;
}

.dl-step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--qf-primary-soft);
  color: var(--qf-primary);
  font-size: 16px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* 第一步是「唯一要动手的」，给它实心徽标做视觉锚点 */
.dl-steps .step:first-child .dl-step-no {
  background: var(--qf-primary);
  color: #fff;
  box-shadow: 0 0 0 4px var(--qf-primary-ring);
}

/* 快捷键高亮（不是 <kbd>，见生成器里的说明）：
   applyI18n 会用 textContent 覆盖文本节点，HTML 里包 <kbd> 会被一起抹平。
   所以只给带 .dl-kbd 的文本节点一个样式钩子，由 markShortcut() 在 i18n 之后
   把「Ctrl+Alt+Space」包进 <mark class="dl-kbd">（mark 是 phrasing 内容，不破行）。 */
.dl-kbd {
  display: inline-block;
  margin: 0 3px;
  padding: 1px 7px;
  border: 1px solid var(--qf-border);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--qf-surface-hover);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
  font-weight: 600;
  color: var(--qf-text);
  white-space: nowrap;
}

.dl-steps .step h4 {
  margin: 2px 0 0;
  font-size: 16px;
  letter-spacing: -.01em;
}

.dl-steps .step p {
  margin: 6px 0 0;
  font-size: 13.6px;
  line-height: 1.7;
  color: var(--qf-text-muted);
}

.dl-faq-q { display: block; font-size: 14.2px; font-weight: 600; color: var(--qf-text); }
.dl-faq-a { display: block; margin-top: 5px; font-size: 13px; line-height: 1.6; color: var(--qf-text-muted); }

.dl-cta-band {
  margin-top: 22px;
  padding: 26px 22px;
  border-radius: var(--qf-radius-lg);
  background: var(--qf-brand-grad-soft);
  text-align: center;
}

.dl-cta-band h2 { margin: 0 0 8px; font-size: 20px; }
.dl-cta-band p { margin: 0 0 16px; font-size: 14px; color: var(--qf-text-muted); }

/* ---------------------------------------------------------------------------
   4. 下载行 SHA 复制
   --------------------------------------------------------------------------- */
/*
 * 主站 download.js 渲染的结构：
 *   <div class="sha">SHA256 <64位十六进制></div>
 * 这里把 sha 变成「文本 + 复制按钮」的 flex 行。
 * ⚠ 不用 :has() / 复杂选择器：主站 CSS 版本对 .sha 有固定样式，
 *   只用 flex 覆盖子元素布局，不动 .sha 自身。
 */
#winList .sha,
#macList .sha,
#linuxList .sha {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.dl-sha-copy {
  flex: none;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--qf-border);
  border-radius: 999px;
  background: var(--qf-surface);
  color: var(--qf-text-muted);
  font: inherit;
  font-size: 11.8px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background .16s ease;
}

.dl-sha-copy:hover {
  border-color: var(--qf-primary);
  background: var(--qf-primary-soft);
  color: var(--qf-primary);
}

.dl-sha-copy:focus-visible {
  outline: 2px solid var(--qf-primary);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   3. 镜像条说明
   --------------------------------------------------------------------------- */
.dl-mirror-note {
  margin: 10px 0 0;
  font-size: 12.8px;
  color: var(--qf-text-muted);
}

.dl-mirror-note[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   8. 深色 + 窄屏 + 减少动效
   --------------------------------------------------------------------------- */
[data-theme="dark"] .page-hero.dl-hero {
  background:
    radial-gradient(880px 320px at 82% -38%, rgba(43, 92, 255, .22), transparent 62%),
    linear-gradient(180deg, #14161C, var(--qf-bg));
}

[data-theme="dark"] .dl-cta-menu { box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }

/* 预览卡在深色下要压掉投影亮度，否则会"浮"在页面上像贴纸 */
[data-theme="dark"] .dl-shot { box-shadow: 0 24px 60px rgba(0, 0, 0, .5); }

/* ---- 960px：Hero 双栏折单栏 ----
   断点定 960 而不是 720：1440/1280 都得保住双栏（那是本次改造的主要收益），
   768~960 的平板竖屏放不下 1.05fr + .95fr 两列，会把 CTA 挤到 ~330px 宽。 */
@media (max-width: 960px) {
  .dl-hero { padding: 40px 0 36px; }
  .dl-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  /* 单栏时预览不再倾斜 —— 倾斜在小宽度下会露出卡片边缘 */
  .dl-shot { transform: none; }
  .dl-trust { margin-top: 26px; }
}

@media (max-width: 720px) {
  .dl-ver { width: 100%; }
  .dl-ver [data-dl="count"] { padding-left: 0; border-left: 0; }
  .dl-cta-main,
  .dl-cta-alt { width: 100%; min-width: 0; }
  .dl-cta-menu { right: 0; }
.dl-req-grid,
.dl-ch-grid { grid-template-columns: 1fr; }
  .dl-src-item { flex-direction: column; align-items: flex-start; }
  .dl-log-list { padding-left: 18px; }
  .dl-log-card { padding: 14px; }
  .dl-log-more { flex-direction: column; gap: 10px; }

  /* 平台状态条：窄屏下 note 换行到第二行，徽标不被挤没 */
  .dl-plat { flex-wrap: wrap; gap: 8px; }
  .dl-plat-note { flex: 1 0 100%; order: 3; }

  /* 三步时间线：连接线左移到徽标正下方（徽标缩小后 41px 会错位） */
  .dl-steps .step { padding: 16px 16px; gap: 12px; }
  .dl-step-no { width: 32px; height: 32px; font-size: 14px; }
  .dl-steps .step:not(:last-child)::after { left: 33px; }
}

/* ---- 极窄（≤420px）：信任条降为单列，徽标与标题同行 ---- */
@media (max-width: 420px) {
  .dl-trust { grid-template-columns: 1fr; }
  .dl-plat-list .dl-row { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  .dl-chip,
  .dl-sha-copy,
  .dl-cta-switch,
  .dl-b-btn,
  .dl-faq-item { transition: none; }
  .dl-faq-item:hover { transform: none; }
  /* 预览卡的 3D 倾斜属于装饰性动效，减少动效偏好下一并去掉 */
  .dl-shot { transform: none; }
}