:root {
  --white: #FFFFFF;
  --ink: #111111;
  --blue: #2563EB;
  --blue-deep: #1C4FD9;
  --blue-soft: #EAF1FF;
  --sub: #5B6472;
  --preview-bg: #F7FAFF;
  --footer-bg: #0F172A;
  --border: #E6E9F0;
  --radius: 20px;
  --maxw: 1200px;
  --log-w: 104px;          /* 更新日志：左侧「日期 + 版本」栏宽度（时间轴竖线位置＝该值） */
  --log-gap: 22px;         /* 版本标签右边缘到竖线的间距 */
  --font: "PingFang SC", "Microsoft YaHei", "Sarasa Gothic SC", "Hiragino Sans GB", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

/* 页内锚点跳转时，给固定顶栏留出高度，避免标题被遮住 */
section[id], #top { scroll-margin-top: 72px; }

body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 120px; }

/* ===== 顶栏 ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.site-header.scrolled {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 30px rgba(17, 24, 39, .07);
  border-bottom-color: var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; }
/* 真实 LOGO 为透明底圆角图标，四角为透明像素，深浅底通用，无需再加圆角/背景 */
.logo-img { display: block; width: 32px; height: 32px; transition: transform .25s ease; }
.logo:hover .logo-img { transform: rotate(-6deg) scale(1.06); }
.nav { display: flex; gap: 36px; font-size: 15px; color: var(--sub); }
.nav a { position: relative; padding: 6px 0; transition: color .15s ease; }
.nav a:hover, .nav a.active { color: var(--blue); }
.nav a.active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 2px; border-radius: 2px; background: var(--blue);
}
.header-cta { margin-left: 8px; }

/* ===== 按钮 ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 24px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary { background: var(--blue); color: #fff; box-shadow: 0 8px 20px rgba(37, 99, 235, .20); }
.btn-primary:hover { background: var(--blue-deep); transform: translateY(-2px); box-shadow: 0 14px 30px rgba(37, 99, 235, .30); }
.btn-outline { background: #fff; color: var(--blue); border-color: var(--border); }
.btn-outline:hover { border-color: var(--blue); transform: translateY(-2px); color: var(--blue-deep); }
.btn-white { background: #fff; color: var(--blue); }
.btn-white:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, .15); }
.btn-sm { padding: 9px 18px; font-size: 14px; }

/* 导航栏「先体验」按钮（2026-10-04）：给「还没决定要不要装 exe」的人一条零门槛的路。
   口径与站内既有两按钮一致（铁律 40 —— 尺寸同规格、底色分家）：
   主操作「免费下载」实心蓝，次操作「先体验」浅蓝底蓝字，一眼分得清主次。 */
.btn-ghost { background: var(--blue-soft); color: var(--blue); border-color: transparent; }
.btn-ghost:hover { background: #DBE8FF; color: var(--blue-deep); transform: translateY(-2px); }
/* 导航栏右侧两个 CTA（「先体验」+「免费下载」）：
   ⚠️ `.header-cta{margin-left:8px}` 会作用在**每个** CTA 上 ——
   两个按钮时 margin 叠加 + flex gap，实测间距飙到 69px，两按钮像不相干。
   改成：靠 `.header-cta-group` 统一控制组内贴紧（4px）+ 组外留白，
   组内按钮不再各自吃 margin。 */
.header-cta-group {
  display: flex;
  align-items: center;
  gap: 4px;              /* 组内：两个按钮贴一起，视觉上是一组 */
  margin-left: 20px;     /* 组与左侧导航之间的间距 */
}
.header-cta-group .header-cta { margin-left: 0; }   /* 抵消旧的单按钮 margin */

/* 「先在线体验再说」小注（2026-10-04 锋哥两次澄清后定稿）
   —— 位置：**浮在「网页预览版」按钮的右上角**（不是放在「免费下载」右边）。
   做法：按钮本身 `position:relative`（新加），小注 `position:absolute` + `top/right` 负值上移，
        绝对定位**不占布局空间**，所以不会把两个按钮撑开。
   颜色用警示橙红：这是「还没决定要不要装」的关键提示，要比普通说明更醒目。 */
/* 「网页预览版」按钮：主标题 + 副标题**内嵌两行**（2026-10-04 锋哥 19:00 定稿）
   ------------------------------------------------------------------
   【为什么从「外挂角标」改成内嵌两行】
   ① 外挂角标靠 `top:-8px` 负值定位，紧贴 header 顶边 —— 换字号/换文案就得重量一次；
   ② 角标用橙红，与两个蓝按钮构成「第三种颜色」，视觉上打架；
   ③ 内嵌后**结构上不可能被裁**，也不需要 `position:relative` 锚点 / `pointer-events`。
   副标题做"按钮上的小字"而不是"外挂标签"，语义也更贴：它是**这个按钮的补充说明**，不是贴纸。 */
.header-cta--try {
  flex-direction: column;      /* 两行竖排（覆盖 .btn 的 align-items:center 布局方向） */
  align-items: flex-start;     /* 左对齐：两行左边缘齐平，比居中更整齐 */
  justify-content: center;     /* 垂直居中（column 方向下是主轴），保证与「免费下载」视觉齐平 */
  gap: 1px;
  /* ⚠️ 必须显式给 height，不能只靠 padding 撑：
       两行内容（15px 主 + 11px 副 + 1px gap ≈ 41px）会比单行的「免费下载」（50px）矮 9px，
       实测 TOP_ALIGNED 差 4px、BTN_H 差 -9px。显式 min-height 后两栏严格等高。 */
  min-height: 50px;
  padding-top: 0;
  padding-bottom: 0;
}
.cta-main {
  font-size: 15px;             /* 与「免费下载」同一号，两个按钮视觉分量对等 */
  font-weight: 700;
  line-height: 1.2;
}
.cta-sub {
  font-size: 11px;             /* 小一号 */
  font-weight: 500;
  line-height: 1.2;
  color: #6E93D8;              /* 浅蓝（同色系下更淡），hover 时随主色一起加深 */
  white-space: nowrap;         /* 六个字绝不能断行（铁律 6） */
}
.btn-ghost:hover .cta-sub { color: #4A7FD0; }

/* ===== 公共：section 副标题 ===== */
.kicker { display: inline-block; color: var(--blue); font-size: 13px; font-weight: 600; letter-spacing: 1px; }
.badge {
  display: inline-block;
  background: rgba(37, 99, 235, .08);
  color: var(--blue);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 999px;
  margin-bottom: 22px;
}
.hero-title { font-size: 44px; line-height: 1.25; font-weight: 800; letter-spacing: -.5px; }
.section-title { font-size: 36px; font-weight: 800; margin-top: 16px; }
.section-sub { margin-top: 12px; font-size: 17px; color: var(--sub); }
/* 真实截图：按原始比例完整展示，不裁切；圆角 + 细边框 + 轻阴影；可点开看大图 */
.shot-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 12px 30px rgba(17, 24, 39, .10);
  background: #F2F5FB;
  cursor: zoom-in;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.shot-img:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 48px rgba(37, 99, 235, .20);
  border-color: #CFE0FF;
}

/* ===== 界面画廊 ===== */
.gallery { background: #fff; padding: 96px 0; }

/* ===== 界面画廊（轮播切换） ===== */
.carousel { margin-top: 48px; max-width: 100%; margin-left: auto; margin-right: auto; }
.carousel-stage { position: relative; display: flex; align-items: center; justify-content: center; }
.car-main {
  position: relative;
  width: 100%; max-width: 940px;
  margin: 0; cursor: zoom-in;
}
.car-img {
  display: block;
  width: 100%; height: auto;
  border-radius: 14px;
  border: 1px solid var(--border);
  box-shadow: 0 16px 40px rgba(17, 24, 39, .12);
  background: #F2F5FB;
  transition: transform .25s ease, box-shadow .25s ease;
}
.car-main:hover .car-img { box-shadow: 0 26px 54px rgba(37, 99, 235, .20); transform: translateY(-3px); }
.car-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%;
  border: none; cursor: pointer;
  background: rgba(255, 255, 255, .92);
  color: var(--blue); font-size: 26px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(17, 24, 39, .16);
  transition: background .2s ease, color .2s ease, transform .18s ease;
  z-index: 2;
}
.car-arrow:hover { background: var(--blue); color: #fff; }
.car-arrow:active { transform: translateY(-50%) scale(.94); }
.car-prev { left: -6px; }
.car-next { right: -6px; }
.car-meta { margin-top: 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.car-cap { font-size: 15px; font-weight: 600; color: var(--ink); }
.car-count { font-size: 14px; color: var(--sub); white-space: nowrap; }
.car-count strong { color: var(--blue); font-size: 16px; }
.car-thumbs {
  margin-top: 18px;
  display: flex; gap: 10px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}
.car-thumb {
  flex: 0 0 auto;
  width: 86px; aspect-ratio: 1257 / 1105;
  border-radius: 10px;
  border: 2px solid transparent;
  overflow: hidden; background: #F2F5FB;
  cursor: pointer; padding: 0;
  opacity: .72;
  transition: border-color .18s ease, opacity .18s ease, transform .18s ease;
}
.car-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.car-thumb:hover { opacity: 1; transform: translateY(-2px); }
.car-thumb.active { border-color: var(--blue); opacity: 1; box-shadow: 0 6px 16px rgba(37, 99, 235, .22); }
/* 缩略图条滚动条：细、圆角、低对比，避免默认粗灰条显脏 */
.car-thumbs::-webkit-scrollbar { height: 6px; }
.car-thumbs::-webkit-scrollbar-track { background: transparent; }
.car-thumbs::-webkit-scrollbar-thumb { background: #D7DEEA; border-radius: 3px; }
.car-thumbs::-webkit-scrollbar-thumb:hover { background: #C2CCDD; }

@media (max-width: 960px) {
  .carousel { max-width: 100%; }
  .car-main { max-width: 100%; }
}
@media (max-width: 640px) {
  .car-arrow { width: 38px; height: 38px; font-size: 22px; }
  .car-prev { left: 6px; } .car-next { right: 6px; }
  .car-thumb { width: 64px; }
  .car-thumbs { gap: 8px; }
}

/* ===== 更新日志 ===== */
.changelog { background: var(--preview-bg); padding: 96px 0; }
.log-list { list-style: none; margin-top: 48px; position: relative; }
/* 时间轴竖线：位于「日期 + 版本」栏的右边缘 */
.log-list::before {
  content: ""; position: absolute;
  left: var(--log-w); top: 10px; bottom: 10px;
  width: 2px; background: var(--border);
}
.log-item { display: flex; gap: 28px; padding: 18px 0; position: relative; }
/* 左栏：日期在上、版本在下，右对齐贴住竖线 */
.log-ver {
  flex: 0 0 var(--log-w);
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 7px; padding-right: var(--log-gap); padding-top: 3px;
}
.ver-date { font-size: 11px; color: var(--sub); white-space: nowrap; letter-spacing: .2px; }
.ver-line { position: relative; display: inline-flex; align-items: center; }
.ver-tag {
  font-size: 13px; font-weight: 700; color: var(--blue);
  background: var(--blue-soft); border-radius: 999px; padding: 5px 12px;
  white-space: nowrap;
}
/* 圆点：压在竖线上、与版本标签同一行（间距由 --log-gap 推导） */
.ver-dot {
  position: absolute; top: 50%; transform: translateY(-50%);
  right: calc(-1 * (var(--log-gap) + 7px));
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 3px solid var(--blue);
}
.log-body { flex: 1; min-width: 0; }
.log-body h3 { font-size: 19px; font-weight: 700; margin-bottom: 10px; }
.log-body h3 + ul { margin-bottom: 18px; }
.log-body ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.log-body li { position: relative; padding-left: 20px; color: var(--sub); font-size: 15px; }
.log-body li::before { content: ""; position: absolute; left: 4px; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: #C2D2F5; }

/* ===== 下载与安装 ===== */
.download { padding: 96px 0; }
.download-row {
  margin-top: 48px;
  display: flex;
  /* 2026-10-04 先改上下堆叠（为放长哈希值），当天又改回左右两栏（锋哥要求）。
     保留两条经验：
     ① 右栏「怎么用」内容只有几行，所以给**固定占比**而不是 1:1 —— 免得左栏被压窄。
     ② `align-items` 要显式写 `flex-start`（原值 `stretch` 会把右栏拉到与左栏等高，
        下方留一大片空白）。 */
  flex-direction: row;
  /* 两栏等高（卡片边框一起到齐底），但右栏内部**不留大片空白**：
     `.steps-card` 改成纵向 flex + 末块 `margin-top:auto`，把多出来的高度
     匀给「系统要求」与「遇到问题？」之间的间距，而不是堆在文字下方。
     ⚠️ 别改回 `stretch` + 块级内容 —— 那正是右栏被拉高、下方空一大片的老毛病。 */
  align-items: stretch;
  gap: 32px;
}
.download-card {
  /* 左右两栏：左栏吃掉右栏固定宽度后剩下的全部空间。
     ⚠️ 别写回 `flex: 1 1 0` —— basis 为 0 时，
     一旦父容器转成 column（上下堆叠），**高度也会被压成 0**，
     症状是卡片只剩一条底色、内容全不见（2026-10-04 踩过）。 */
  flex: 1 1 auto;
  min-width: 0;
  background: linear-gradient(135deg, #2563EB 0%, #1C4FD9 100%);
  border-radius: var(--radius);
  padding: 40px 36px;
  color: #fff;
  box-shadow: 0 24px 50px rgba(37, 99, 235, .22);
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
}
.download-card::after {
  content: ""; position: absolute; right: -60px; top: -60px;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, 0) 70%);
  pointer-events: none;
}
.dc-badge {
  align-self: flex-start; font-size: 12px; font-weight: 700;
  background: rgba(255, 255, 255, .18); color: #fff;
  padding: 5px 12px; border-radius: 999px; margin-bottom: 16px;
}
.dc-title { font-size: 26px; font-weight: 700; }
.dc-desc { margin-top: 14px; font-size: 15px; color: #E6ECFF; }
.dc-meta { margin-top: 18px; font-size: 13px; color: #C9D4FF; }
.dc-checks { margin-top: 20px; display: flex; flex-direction: column; gap: 9px; font-size: 13px; color: #D6E0FF; }
.dc-checks span { display: flex; align-items: center; }

/* 双版本下载选项 */
.dl-options { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.dl-opt {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .20);
  border-radius: 14px;
  padding: 14px 16px;
  transition: background .2s ease, border-color .2s ease;
}
.dl-opt:hover { background: rgba(255, 255, 255, .20); border-color: rgba(255, 255, 255, .36); }
/* flex:1 1 0 —— info 主动占满剩余空间（长说明文字折行），
   否则 note 一长整块就把右侧下载按钮挤到下一行左下角（2026-11-02 绿色完整版/分体组实测） */
.dl-opt-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 0; }
.dl-opt-name { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: #fff; }
.dl-opt-rec {
  font-style: normal; font-size: 11px; font-weight: 700; line-height: 1.5;
  background: #fff; color: var(--blue);
  padding: 2px 9px; border-radius: 999px;
}
.dl-opt-note { font-size: 12px; color: #C9D4FF; }

/* 校验值区（当前只有 MD5）
   —— 2026-10-04 改版经过（留着免得以后重犯）：
   ① 数值原带半透明白底 + 圆角 → 像"按钮/标签"，锋哥要求**去掉边框框**，只要数字。
   ② MD5 原与按钮同处一行 → 右侧按钮一挤就断行。
      现在 DOM 里 `.dl-opt-hash` 放在按钮**之后**，靠父级 flex-wrap 换到第二行
      并 `flex-basis:100%` 占满整行 —— 于是**数值可以超出「下载安装版」按钮的宽度**。
   ③ 曾试过补 SHA256（64 位），因页面偏挤、锋哥决定**只留 MD5**。
   ④ 版式当天又试过"上下堆叠"（为放长哈希值），最终改回**左右两栏**（锋哥要求）。 */
.dl-opt {
  flex-wrap: wrap;          /* 关键：允许哈希值整块换行到下一行 */
}
.dl-opt-hash {
  flex-basis: 100%;         /* 独占一整行，不与按钮抢宽度 */
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 2px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, .22);   /* 与上方说明文字之间的分割线 */
}
.dl-opt-hash-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11px;
  color: #C9D4FF;
  line-height: 1.6;
}
.dl-opt-hash-row > code {
  font-family: Consolas, 'Courier New', monospace;
  font-size: 11px;
  color: #E8EEFF;          /* 无底色、无边框，只要数字本身 */
  white-space: nowrap;     /* 32/64 位校验值绝不能换行（铁律 6） */
  letter-spacing: .2px;
  /* 窄屏时宁可让整行横向滚动也不要折行 —— 折行的校验值等于给用户错误信息 */
  overflow-x: auto;
}
.dl-opt-hash-row > code::-webkit-scrollbar { height: 0; }
/* 绿色版的更新说明（2026-10-04 新增）
   —— 需求：绿色版也联网查更新，但它是单文件 exe、无法自我升级，
   提示新版时要回官网重下。
   口径：独占整行（与 .dl-opt-hash 同理，不能跟右侧按钮抢宽度）；
   「更新」二字做成小徽章，让用户一眼扫到关键动作。 */
.dl-opt-upd {
  flex-basis: 100%;
  margin: 9px 0 0;
  padding: 9px 11px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .10);
  font-size: 11.5px;
  line-height: 1.7;
  color: #DCE5FF;
}
.dl-opt-upd strong { color: #fff; font-weight: 700; }
.dl-opt-upd-tag {
  display: inline-block;
  margin-right: 6px;
  padding: 0 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .22);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 16px;
  vertical-align: 1px;
}
/* 2026-11-02 绿色版拆包：下载条目分组标题（三个完整版本 / 绿色版分体下载，两组之间的隔断） */
.dl-group-title {
  margin: 20px 0 2px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .16);
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
}
.dl-group-title small {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 400;
  color: #9aa7d6;
}
/* 下载体积标签：紧贴版本名，标明「下载多少 M」 */
.dl-opt-size {
  font-size: 11px; font-weight: 700; line-height: 1.6;
  color: #fff; background: rgba(255, 255, 255, .18);
  border-radius: 999px; padding: 1px 9px;
}

/* 使用方式流程 */
.steps-card {
  /* 右栏内容只有几行，给固定宽度而不是 1:1 —— 左栏要放下下载项 + 哈希值，太窄会挤。
     ⚠️ 宽度不是拍脑袋，是**量出来的**：
     「下载安装程序 → 双击安装 → 桌面启动」三步一行实测需 332px（`.flow-line` clientWidth）。
     400px 装不下（差 6px，第三个格子会折行），420px 才刚好一行。 */
  flex: 0 0 420px;
  background: var(--preview-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 40px 36px;
  /* 与左栏等高时，把多余高度匀给内容之间的间距（而不是堆在文字下方留白）。
     末块 `.tip-box` 用 `margin-top:auto` 顶到卡片底部 —— 见下方规则。 */
  display: flex;
  flex-direction: column;
}
.steps-card > .tip-box { margin-top: auto; }
/* `.tip-box` 的 `margin-top:auto` 会把顶开它的空间全吃掉，必要时最小间距会变成 0。
   所以最小间距挂在**前一块**的 margin-bottom 上 —— auto 只吃「多余的」，不会把 14px 吃掉。 */
.steps-card > .req-box { margin-bottom: 14px; }
.steps-title { font-size: 18px; font-weight: 700; margin-bottom: 26px; }
.flow { margin-bottom: 26px; }
.flow:last-of-type { margin-bottom: 0; }
.flow-label {
  display: inline-block;
  font-size: 12px; font-weight: 700; color: var(--blue);
  background: var(--blue-soft);
  border-radius: 999px; padding: 4px 12px; margin-bottom: 12px;
}
.flow-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.flow-step {
  font-size: 14px; color: #374151; background: #fff;
  border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 13px; white-space: nowrap;
}
.flow-arrow { color: #B7C0D0; font-size: 14px; }

/* 徽章里的更新日期（2026-10-04）：与「最新版」同体，只是用低透明度区分 */
.dc-badge-date {
  margin-left: 8px;
  font-weight: 500;
  opacity: .72;
}

/* 系统要求块（2026-10-04 改版）
   原来只是一行小字（`.req-label`），内容少、右栏下半截空着；
   现在做成一个带边框的小块：系统要求列点 + 补充说明，把空间填上、内容也更清楚。 */
.req-box {
  margin-top: 26px;
  padding: 15px 16px;
  background: #F8FAFD;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.req-title {
  margin: 0 0 9px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.req-list { margin: 0; padding-left: 18px; }
.req-list li {
  font-size: 13px;
  line-height: 1.75;
  color: var(--sub);
}
/* Win7 那条：整行标红 —— 「不支持」是用户最需要一眼看到的信息 */
.req-no { color: #C2410C !important; }
.req-no strong, .req-no { font-weight: 600; }
/* 括号里的原因：同样醒目但字小一档，避免和「不支持」抢眼 */
.req-no-why { font-weight: 400; font-size: 12px; opacity: .9; }
.req-note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--sub);
}

/* 「遇到问题」块：把右栏剩余空间填上（2026-10-04 锋哥指出右栏「没到底」）。
   用浅蓝底与上方灰白 req-box 区分，也顺带给 QQ 群一个曝光位。 */
.tip-box {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--blue-soft);
  border-radius: 12px;
}
.tip-title { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--blue-deep); }
.tip-text  { margin: 0; font-size: 13px; line-height: 1.7; color: #2B3A55; }

/* ===== 关注作者 ===== */
.author { background: var(--preview-bg); padding: 96px 0; }
.author-row { margin-top: 48px; display: flex; gap: 32px; align-items: stretch; }

/* 左：平台账号列表 */
.author-card {
  flex: 1 1 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 32px;
}
.ac-title { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 9px; margin-bottom: 18px; }
.ac-title::before { content: ""; width: 4px; height: 16px; border-radius: 2px; background: var(--blue); }
.ac-list { list-style: none; display: flex; flex-direction: column; }
.ac-item { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid #F1F3F8; }
.ac-item:first-child { border-top: none; }
.ac-ico {
  flex: none; width: 30px; height: 30px; border-radius: 8px;
  color: #fff; font-size: 14px; font-weight: 700; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.ico-bili { background: #FB7299; }
.ico-toutiao { background: #F04142; }
.ico-douyin { background: #161823; }
.ico-kuaishou { background: #FF5000; }
.ico-qq { background: #12B7F5; }
.ac-name { flex: 0 0 86px; font-size: 15px; font-weight: 600; color: var(--ink); }
.ac-user { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--sub); }
.ac-act {
  flex: none;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--blue);
  background: var(--blue-soft);
  border-radius: 999px; padding: 6px 14px;
  transition: background .18s ease, transform .18s ease;
}
.ac-act:hover { background: #DCE8FF; transform: translateY(-1px); }
.ac-play {
  width: 0; height: 0;
  border-left: 7px solid currentColor;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
/* 说明型标签（抖音那项，指向右侧二维码，不做链接） */
.ac-act.muted { color: #97A1B2; background: #F2F4F8; cursor: default; }
.ac-act.muted:hover { background: #F2F4F8; transform: none; }

/* 右：抖音二维码 */
.author-qr {
  flex: 0 0 300px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 28px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
}
.author-qr .ac-title { justify-content: center; margin-bottom: 20px; }
.author-qr .ac-title::before { display: none; }
.qr-img { display: block; width: 190px; height: 190px; border-radius: 14px; }
.qr-tip { margin-top: 18px; font-size: 13px; color: var(--sub); }
.qr-tip b { color: var(--ink); font-weight: 700; }

/* ===== 页脚 ===== */
.site-footer { background: var(--footer-bg); color: #C7CEDA; padding: 64px 0 40px; }
.footer-top { display: flex; align-items: center; justify-content: space-between; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-logo { width: 28px; height: 28px; }
.footer-name { color: #fff; font-weight: 700; font-size: 16px; }
.footer-tagline { font-size: 13px; color: #8A94A6; }
.footer-nav { display: flex; gap: 28px; font-size: 14px; }
.footer-nav a:hover { color: #fff; }
/* 分隔线：margin 必须保留 auto 居中，且背景只画在内容区（background-clip），
   否则会覆盖 .container 的 margin:0 auto 而整体左移、右侧对不齐 */
.footer-divider {
  height: 1px;
  background: rgba(255, 255, 255, .1);
  background-clip: content-box;
  margin: 32px auto;
}
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 13px; color: #8A94A6; flex-wrap: wrap; }
.icp { color: #C7CEDA; }
.declaration { max-width: 620px; }
.copyright { color: #6B7488; }

/* ===== 返回顶部 ===== */
.back-top {
  position: fixed; right: 28px; bottom: 28px;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--blue);
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(37, 99, 235, .3);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s ease, visibility .2s ease, transform .15s ease;
  z-index: 60;
}
.back-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.back-top:hover { transform: translateY(-2px); }

/* ===== 滚动入场动画 ===== */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ===== 移动端菜单按钮 ===== */
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.nav-toggle span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: .2s; }
/* 手机档汉堡菜单里的 CTA 按钮组：全局默认隐藏，只在手机档 nav.open 时显示 */
.nav-mobile-cta { display: none; }

/* ===== 响应式 ===== */
@media (max-width: 1100px) {
  .container { padding: 0 32px; }
  /* 下载区竖排（原本在 819px 以下才切）：
     ⚠️ 实测 1024 宽时左栏卡片内容变高（下载项挤成多行，807px），
        右栏只有 667px —— 差 140px，右侧又出现「没到底」的空白。
        所以把竖排断点**提到 1100px**：窄于此就用竖排，两栏各自按内容高度，
        谁也不用「硬撑到和对方一样高」。 */
  .download-row { flex-direction: column; }
  .author-row { flex-direction: column; }
  .author-qr { flex: none; width: 100%; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
  .container { padding: 0 20px; }
  /* ⚠️ `.header-cta-group` 必须和 `.header-cta` 一起隐藏（2026-10-04）：
     窄屏下两个按钮都 `display:none` 了，但 group 这个**容器 div 自己还在**，
     不跟着隐藏就会变成「一个空 div 杵在汉堡菜单旁边」，把布局顶歪。 */
  .nav, .header-cta, .header-cta-group { display: none; }
  .nav-toggle { display: flex; }
  .nav.open {
    display: flex; flex-direction: column; gap: 18px;
    position: absolute; top: 72px; left: 0; right: 0;
    background: #fff; padding: 20px 20px; border-bottom: 1px solid var(--border);
  }
  .nav.open a { font-size: 16px; }
  /* 手机档汉堡菜单里的 CTA 按钮组：桌面档已全局隐藏，手机档 nav.open 时显示 */
  .nav.open .nav-mobile-cta {
    display: flex; flex-direction: column; gap: 10px; margin-top: 8px;
  }
  .nav.open .nav-mobile-cta .btn { font-size: 15px; padding: 12px 20px; }
  .hero-title { font-size: 32px; }
  .section-title { font-size: 28px; }
  .changelog, .download, .author { padding: 64px 0; }

  /* 作者账号列表：窄屏按钮独占一行，避免挤字 */
  .ac-item { flex-wrap: wrap; row-gap: 10px; }
  .ac-name { flex: 0 0 auto; }
  .ac-act { flex: 1 1 100%; justify-content: center; }

  /* 下载选项在窄屏改成竖排，按钮占满一行 */
  .dl-opt { flex-direction: column; align-items: flex-start; gap: 12px; }
  .dl-opt .btn-sm { width: 100%; }

  /* 更新日志：窄屏收掉时间轴，改成「版本 + 日期」横排，避免挤字 */
  .log-list::before { display: none; }
  .log-item { flex-direction: column; gap: 12px; padding: 16px 0; }
  .log-ver { flex: none; flex-direction: row; align-items: center; gap: 10px; padding: 0; }
  .ver-dot { display: none; }
  .ver-date { order: 2; }
}

/* ===== 截图放大查看（lightbox） ===== */
.lightbox {
  position: fixed; inset: 0; z-index: 999;
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
  background: rgba(15, 23, 42, .84);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .22s ease, visibility .22s ease;
}
.lightbox.open { opacity: 1; visibility: visible; }
.lb-img {
  max-width: 100%; max-height: 100%;
  border-radius: 12px;
  box-shadow: 0 36px 90px rgba(0, 0, 0, .55);
  background: #fff;
  transform: scale(.96);
  transition: transform .24s ease;
}
.lightbox.open .lb-img { transform: scale(1); }
.lb-close {
  position: absolute; top: 26px; right: 30px;
  width: 46px; height: 46px; border-radius: 50%;
  border: none; cursor: pointer;
  background: rgba(255, 255, 255, .14);
  color: #fff; font-size: 28px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s ease, transform .25s ease;
}
.lb-close:hover { background: rgba(255, 255, 255, .28); transform: rotate(90deg); }
@media (max-width: 640px) {
  .lightbox { padding: 16px; }
  .lb-close { top: 14px; right: 14px; width: 40px; height: 40px; font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ===== 首页：软件简介入口（摘要 + 跳独立页） ===== */
.intro-teaser { background: var(--preview-bg); padding: 80px 0; border-top: 1px solid var(--border); }
.intro-teaser--white { background: #fff; }
.intro-teaser .section-sub { max-width: 720px; }
.intro-teaser .btn { margin-top: 28px; }

/* ===== 介绍类区块（首页 / 功能页 / 反馈页复用） ===== */
.intro-hero { position: relative; overflow: hidden; padding: 84px 0 64px; background: linear-gradient(180deg, #F7FAFF 0%, #FFFFFF 100%); }
/* ⚠️ 这里曾写死 max-width:880px（从老 intro.html 的阅读型窄栏继承来），
   导致首屏内容比下面各区块窄 320px、左边缘对不齐。
   容器宽必须跟随全站 --maxw，只给正文段落单独限宽控制行宽 */
.intro-lead { margin-top: 20px; max-width: 720px; font-size: 18px; color: var(--sub); line-height: 1.75; }
.intro-hero-ctas { margin-top: 30px; display: flex; gap: 16px; flex-wrap: wrap; }

.intro-section { padding: 88px 0; }
.intro-section.alt { background: var(--preview-bg); }
.intro-section .section-sub { margin-top: 12px; }

/* ===== 致谢页（thanks.html）：支持作者 / 打赏名单 / 建议致谢 ===== */

/* 支持作者：标题与说明（居中，无 kicker 故不带 margin-top） */
.support-title { font-size: 34px; font-weight: 800; text-align: center; }
.support-lead { margin-top: 16px; font-size: 17px; color: var(--ink); text-align: center; }
.support-sub { margin: 10px auto 0; max-width: 720px; font-size: 15px; line-height: 1.7; color: var(--sub); text-align: center; }

/* 收款码两张卡：顶栏用微信/支付宝品牌色，一眼认出扫哪个 */
.pay-row { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 40px; justify-content: center; }
.pay-card { flex: 0 1 240px; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding-bottom: 20px; text-align: center; }
.pay-badge { display: block; padding: 12px 10px; font-size: 14px; font-weight: 700; color: #fff; }
.pay-card--wechat .pay-badge { background: #07C160; }
.pay-card--alipay .pay-badge { background: #1677FF; }
.pay-qr { display: flex; justify-content: center; margin: 24px auto 0; }
.pay-note { margin-top: 30px; font-size: 14px; color: var(--sub); text-align: center; }

/* 支持区折叠：默认只给一个按钮，点下去才摊开收款码。
   高度用 grid 的 0fr→1fr 过渡（浏览器自动算高度），不写死 max-height，内容增减都不会出错。 */
.support-cta { margin-top: 34px; text-align: center; }
.support-reveal { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .4s ease, opacity .4s ease; }
.support-reveal > .support-reveal-inner { min-height: 0; overflow: hidden; }
.support-reveal.is-open { grid-template-rows: 1fr; opacity: 1; }

/* 支持按钮：深色胶囊（跟站内主色蓝区分开，避免跟「免费下载」抢注意力） */
.btn-support { padding: 14px 44px; font-size: 16px; font-family: inherit; background: #1E3A5F; color: #fff; box-shadow: 0 10px 24px rgba(15, 23, 42, .18); }
.btn-support:hover { background: #162C49; }
.btn-support.is-thanked,
.btn-support.is-thanked:hover { background: #16A34A; box-shadow: 0 10px 24px rgba(22, 163, 74, .22); cursor: pointer; }
/* 按钮双文案：收起态显「不错支持」，展开态显「感谢你的支持」（JS 在 btn 上加 .is-thanked 标记） */
.btn-support .sb-idle { display: inline; }
.btn-support .sb-open { display: none; }
.btn-support.is-thanked .sb-idle { display: none; }
.btn-support.is-thanked .sb-open { display: inline; }

@media (prefers-reduced-motion: reduce) { .support-reveal { transition: none; } }

/* 名单：胶囊流（头像 + 昵称） */
.pill-wall { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 0; padding: 0; list-style: none; }
.pill { display: inline-flex; align-items: center; gap: 9px; padding: 6px 16px 6px 7px; background: #EEF2F9; border-radius: 999px; font-size: 14px; line-height: 1; color: var(--ink); }
/* 灰底区块内改用白胶囊，免得跟区块底色糊成一片（特异性 0,2,0 > 0,1,0） */
.intro-section.alt .pill { background: #fff; }
.pill-avatar { flex: none; display: block; width: 28px; height: 28px; border-radius: 50%; overflow: hidden; }
.pill-avatar svg { display: block; width: 100%; height: 100%; }
.pill-name { white-space: nowrap; }

/* 纯文字胶囊（建议致谢名单：无头像，撑得更满一点） */
.pill-wall--plain .pill { padding: 9px 18px; }

/* 名单底部一句话 */
.wall-note { margin-top: 30px; font-size: 14px; color: var(--sub); text-align: center; }

/* ── 反馈表单样式已删（2026-10-04：改为只留 QQ 群）── */

@media (max-width: 640px) {
  .pay-row { flex-direction: column; }
  .pay-card { flex: 1 1 auto; }
}

@media (max-width: 640px) {
  .intro-hero { padding: 60px 0 48px; }
  .intro-section { padding: 60px 0; }
}
/* ===== 更新日志：版本快捷跳转 ===== */
.log-nav { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.log-nav a {
  font-size: 13px; font-weight: 600; color: var(--blue);
  background: var(--blue-soft); border-radius: 999px; padding: 6px 14px;
  transition: background .15s ease, color .15s ease;
}
.log-nav a:hover { background: var(--blue); color: #fff; }
/* 锚点落到某个版本时避开固定顶栏（li 不在 section[id] 那条规则范围内） */
.log-item[id] { scroll-margin-top: 100px; }
/* 更新条目变详细后，长文本行距略放开，读起来不糊成一块 */
.log-body li { line-height: 1.75; }
.log-body li strong { color: var(--ink); font-weight: 600; }
.log-body li::before { top: 10px; }

/* ===== 常见问题 FAQ ===== */
.faq { background: var(--preview-bg); padding: 96px 0; }
.faq-list { margin-top: 48px; display: flex; flex-direction: column; gap: 18px; }
.faq-card { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 28px 32px; }
.faq-card h3 { font-size: 18px; font-weight: 700; line-height: 1.5; }
.faq-a { margin-top: 12px; font-size: 15px; line-height: 1.85; color: var(--sub); }
.faq-a p + p { margin-top: 10px; }
.faq-a ol, .faq-a ul { margin-top: 10px; padding-left: 22px; }
.faq-a li { margin-top: 6px; }
.faq-a strong { color: var(--ink); font-weight: 600; }
.faq-a a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.faq-a a:hover { color: var(--blue-deep); }
/* 重点条目：蓝色描边凸显 */
.faq-card--hot { border-color: var(--blue); box-shadow: 0 12px 32px rgba(37, 99, 235, .08); }

/* ---------- 杀毒误报块里的「多引擎检测报告」证明 ---------- */
/* 口径：主操作实心蓝（看报告），次操作浅底蓝字（下载 PDF）——
   与项目既有「并排两按钮，尺寸同规格、底色分家」一致（铁律 40）。 */
.scan-proof {
  margin-top: 16px;
  padding: 14px 16px;
  background: #F8FAFF;
  border: 1px solid #DBE6FF;
  border-radius: 10px;
}
.scan-proof-lead {
  font-size: 14px; font-weight: 600; color: var(--ink);
  margin: 0 0 10px;
}
.scan-proof-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.scan-proof-btn {
  display: inline-flex; align-items: center;
  height: 34px; padding: 0 16px;
  font-size: 14px; font-weight: 600;
  border-radius: 8px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  white-space: nowrap;          /* 中文按钮铁律 6：禁止换行 */
  transition: background .2s, color .2s;
}
.scan-proof-btn:not(.scan-proof-btn--alt) {
  background: var(--blue); color: #fff;
}
.scan-proof-btn:not(.scan-proof-btn--alt):hover { background: var(--blue-deep); }
.scan-proof-btn--alt {
  background: #E8F0FE; color: var(--blue);
}
.scan-proof-btn--alt:hover { background: #D3E2FD; }
.scan-proof-note {
  margin: 10px 0 0;
  font-size: 13px; color: var(--sub); line-height: 1.7;
}
/* 结论句：先给答案，再展开细节 */
.scan-verdict {
  margin: 0 0 4px;
  padding: 12px 16px;
  background: #EFFAF4;
  border: 1px solid #B8DDD0;
  border-radius: 10px;
  font-size: 15px; line-height: 1.7;
  color: #14614E;
}
.scan-verdict strong { color: #0A4D3C; font-weight: 600; }
/* 补充说明：降为次要文字，小字号 + 弱化色，不与结论句争视觉层级 */
.scan-fine {
  margin: 14px 0 0;
  font-size: 13.5px; line-height: 1.85;
  color: var(--sub);
  font-weight: 400;
}
.scan-fine a { font-weight: 500; }
.faq-more { margin-top: 32px; font-size: 15px; color: var(--sub); }
.faq-more a { color: var(--blue); font-weight: 600; }

@media (max-width: 640px) {
  .faq { padding: 60px 0; }
  .faq-list { margin-top: 32px; gap: 14px; }
  .faq-card { padding: 20px; border-radius: 14px; }
  .faq-card h3 { font-size: 17px; }
}
/* 引导区放多个按钮时靠 flex 排布（单按钮时仍走 .intro-teaser .btn 的 margin-top） */
.intro-teaser-ctas { margin-top: 28px; display: flex; gap: 16px; flex-wrap: wrap; }
.intro-teaser-ctas .btn { margin-top: 0; }

/* ===== 在线体验版入口（download.html）===== */
.dl-online {
  margin-top: 28px;
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  background: var(--blue-soft); border: 1px solid var(--border);
  border-radius: 16px; padding: 24px 28px;
}
.dl-online-text { flex: 1; min-width: 280px; }
.dl-online-title { font-size: 17px; font-weight: 700; color: var(--ink); }
.dl-online-desc { margin-top: 8px; font-size: 14px; line-height: 1.8; color: var(--sub); }
.dl-online-desc strong { color: var(--blue); font-weight: 600; }
.dl-online-limit { margin-top: 6px; font-size: 13px; line-height: 1.75; color: #b45309; }
.dl-online-btn { flex: none; margin-top: 0; }

@media (max-width: 640px) {
  .dl-online { padding: 20px; gap: 18px; }
  .dl-online-btn { width: 100%; text-align: center; }
}

/* 完整安装版体积明细（2026-10-26 新增，源自锋哥给的体积说明） */
.dl-opt-detail {
  flex-basis: 100%;
  margin-top: 8px;
  padding: 10px 12px;
  border-radius: 9px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
}
.dl-opt-detail-title { margin: 0 0 7px; font-size: 12px; font-weight: 700; color: #fff; }
.dl-opt-detail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.dl-opt-detail-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; font-size: 12px; color: #C9D4FF; }
.dl-opt-detail-list li b { color: #fff; font-weight: 700; white-space: nowrap; }
.dl-opt-detail-list li small { color: #9aa7d6; font-weight: 400; }
.dl-opt-detail-note { margin: 8px 0 0; font-size: 11px; line-height: 1.6; color: #9aa7d6; }

/* 右侧「怎么用」卡片 · 三个版本怎么选（2026-10-26 锋哥要求：长说明从下载区挪到「怎么用」区，
   下载区只保留一句话 + 按钮 + MD5 的干净选择） */
.ver-compare { margin-bottom: 30px; }
.ver-compare-title {
  font-size: 13px; font-weight: 700; color: var(--blue);
  margin: 0 0 14px;
}
.ver-compare-item { margin-bottom: 18px; }
.ver-compare-item:last-child { margin-bottom: 0; }
.ver-compare-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--ink); margin: 0 0 5px;
}
.ver-compare-t {
  margin: 0; font-size: 12px; line-height: 1.7; color: var(--sub);
}

/* 右栏 steps-card 为浅色背景，覆盖从深色下载卡片搬来的浅色文字（2026-10-26 锋哥指出右栏对比度过低、看不清）。
   变量 var(--ink) / var(--sub) / var(--blue) 已在右栏 req-box / req-list / flow 等处用于浅底、确认可见，复用保证一致。 */
.steps-card .ver-compare-h { color: var(--ink); }
.steps-card .ver-compare-t { color: var(--sub); }
.steps-card .dl-opt-detail {
  background: #F8FAFD;
  border: 1px solid var(--border);
}
.steps-card .dl-opt-detail-title { color: #1a1a1a; }
.steps-card .dl-opt-detail-list li { color: #4b5563; }
.steps-card .dl-opt-detail-list li b { color: #1a1a1a; }
.steps-card .dl-opt-detail-list li small { color: #8a94a6; }
.steps-card .dl-opt-detail-note { color: #8a94a6; }
/* 2026-11-02 绿色版分体：右栏「手动安装模型」三步操作 + 示意图 */
.dl-opt-steps {
  margin: 0; padding-left: 18px;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: #4b5563; line-height: 1.6;
}
.dl-opt-steps-img {
  display: block; width: 100%;
  margin-top: 8px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  cursor: zoom-in;   /* 点击可在灯箱中放大查看（script.js 已绑定） */
}
.ver-compare .dl-opt-upd {
  margin: 18px 0 0;
  background: #F8FAFD;
  border: 1px solid var(--border);
  color: #4b5563;
}
.ver-compare .dl-opt-upd strong { color: #1a1a1a; }
.ver-compare .dl-opt-upd .dl-opt-upd-tag {
  background: var(--blue);
  color: #fff;
}

/* ============================================================
   首页 2026-10-26 全新改版（hm- 前缀，仅 index.html 引用）
   目标：转化导向 —— 3 秒讲清价值、首屏即可下载、痛点式文案
   ============================================================ */

/* ---------- 首屏 Hero · SaaS 风格 ---------- */
.hm-hero {
  position: relative;
  overflow: hidden;
  /* 更深的渐变：顶部偏蓝 → 底部纯白，光斑叠上去才有层次 */
  background: linear-gradient(180deg, #EEF4FF 0%, #F5F8FF 45%, #FFFFFF 100%);
  padding: 72px 0 80px;
}
/* 三层光斑：左深蓝 / 右淡蓝 / 中紫，各自轻微浮动 */
.hm-hero-glow {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(80px);
}
.hm-hero-glow-1 {
  width: 600px; height: 600px;
  left: -180px; top: -200px;
  background: radial-gradient(circle, #C7D8FF 0%, rgba(199,216,255,0) 70%);
  opacity: .55;
  animation: hmGlowA 11s ease-in-out infinite;
}
.hm-hero-glow-2 {
  width: 520px; height: 520px;
  right: -160px; top: -140px;
  background: radial-gradient(circle, #E0E7FF 0%, rgba(224,231,255,0) 70%);
  opacity: .6;
  animation: hmGlowB 13s ease-in-out infinite;
}
.hm-hero-glow-3 {
  width: 440px; height: 440px;
  right: 10%; bottom: -240px;
  background: radial-gradient(circle, #D8D5FF 0%, rgba(216,213,255,0) 70%);
  opacity: .45;
  animation: hmGlowC 14s ease-in-out infinite;
}
@keyframes hmGlowA { 0%,100% { transform: translate(0,0); } 50% { transform: translate(20px,24px); } }
@keyframes hmGlowB { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-26px,18px); } }
@keyframes hmGlowC { 0%,100% { transform: translate(0,0); } 50% { transform: translate(16px,-22px); } }

.hm-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: .9fr 1.1fr; /* 右侧手绘窗口加大占比（2026-10-26 锋哥要求画大些） */
  gap: 48px;
  align-items: center;
}
/* Badge：玻璃拟态 pill，带微弱边框 */
.hm-hero-badge {
  display: inline-block;
  font-size: 12.5px; font-weight: 600; color: var(--blue);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(37,99,235,.12);
  padding: 7px 16px; border-radius: 999px;
  box-shadow: 0 2px 10px rgba(37, 99, 235, .06);
}

.hm-hero-title {
  margin-top: 18px;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.24;
  font-weight: 800;
  letter-spacing: -.5px;
}
.hm-hero-title em {
  font-style: normal;
  background: linear-gradient(92deg, var(--blue) 10%, #7C3AED 90%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--blue);
}

.hm-hero-sub {
  margin-top: 18px;
  font-size: 17px; line-height: 1.75; color: var(--sub);
  max-width: 560px;
}
.hm-hero-sub b { color: var(--ink); }

/* CTA 按钮组 */
.hm-hero-ctas {
  margin-top: 30px;
  display: flex; align-items: stretch; gap: 18px; flex-wrap: wrap;
}
.hm-btn-main {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  background: var(--blue); color: #fff;
  padding: 14px 34px; border-radius: 16px;
  box-shadow: 0 12px 28px rgba(37, 99, 235, .30);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.hm-btn-main:hover {
  background: var(--blue-deep); transform: translateY(-3px);
  box-shadow: 0 18px 36px rgba(37, 99, 235, .36);
}
.hm-btn-main-t { font-size: 19px; font-weight: 700; letter-spacing: .5px; white-space: nowrap; }
.hm-btn-main-s { font-size: 12.5px; font-weight: 500; color: rgba(255,255,255,.82); white-space: nowrap; }

.hm-hero-cta-col { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.hm-btn-sub {
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.8); color: var(--blue);
  border: 1px solid rgba(37,99,235,.18);
  font-size: 14px; font-weight: 600;
  padding: 9px 18px; border-radius: 12px;
  transition: border-color .15s ease, transform .15s ease, color .15s ease, background .15s ease;
  white-space: nowrap;
}
.hm-btn-sub:hover { border-color: var(--blue); color: var(--blue-deep); background: #fff; transform: translateY(-2px); }
.hm-btn-ghost { font-size: 13px; color: var(--sub); text-align: center; }
.hm-btn-ghost:hover { color: var(--blue); }

/* 信任条：3 个玻璃 pill（替代旧的 5 个 ✓ 列表） */
.hm-hero-trust {
  margin-top: 22px;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.hm-trust-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: #16A34A;
  background: rgba(255,255,255,.8); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(22,163,74,.14);
  padding: 7px 14px; border-radius: 999px;
}
.hm-trust-pill svg { flex: none; }

/* 右侧主视觉容器 */
.hm-hero-visual { position: relative; }

/* 浮动信息卡（更轻量的 glass pill，只保留 2 个） */
.hm-float {
  position: absolute;
  background: rgba(255,255,255,.88);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(37,99,235,.12);
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(17, 24, 39, .10);
  padding: 12px 16px;
  line-height: 1.45;
  animation: hmFloat 4.5s ease-in-out infinite;
}
.hm-float b { display: block; font-size: 13px; color: var(--blue); font-weight: 700; }
.hm-float span { font-size: 11.5px; color: var(--sub); white-space: nowrap; }
.hm-float-right { top: -10px; right: -6px; animation-delay: 0s; }
.hm-float-left  { left: -16px; bottom: 60px; animation-delay: 1.5s; }
@keyframes hmFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* 数字背书条：玻璃拟态半透明 + 柔和阴影 */
.hm-stats {
  position: relative;
  margin-top: 52px;
  display: flex;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(37,99,235,.10);
  border-radius: 20px;
  box-shadow: 0 20px 48px rgba(37, 99, 235, .10), 0 2px 6px rgba(17, 24, 39, .04);
  padding: 22px 10px;
}
.hm-stat {
  flex: 1; text-align: center;
  padding: 2px 8px;
}
.hm-stat + .hm-stat { border-left: 1px solid rgba(37,99,235,.10); }
.hm-stat b { display: block; font-size: 26px; font-weight: 800; color: var(--blue); line-height: 1.25; }
.hm-stat b small { font-size: 14px; font-weight: 700; margin-left: 2px; }
.hm-stat span { font-size: 13px; color: var(--sub); }

/* ---------- 痛点区 · SaaS 风格 ---------- */
.hm-pain {
  background: linear-gradient(180deg, #FFFFFF 0%, #F3F6FC 100%);
  padding: 76px 0 80px;
}
.hm-pain-grid {
  margin-top: 40px;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px;
}
.hm-pain-card {
  position: relative;
  background: #fff;
  border: 1px solid rgba(37,99,235,.08);
  border-radius: 20px;
  box-shadow: 0 4px 14px rgba(17, 24, 39, .04);
  overflow: hidden;
  transition: transform .20s ease, box-shadow .20s ease, border-color .20s ease;
}
.hm-pain-card:hover {
  transform: translateY(-5px);
  border-color: rgba(37,99,235,.28);
  box-shadow: 0 22px 48px rgba(37, 99, 235, .10), 0 4px 10px rgba(17, 24, 39, .04);
}
/* 数字序号（01 / 02 / 03 / 04） */
.hm-pain-num {
  position: absolute;
  top: 18px; right: 20px;
  font-size: 28px; font-weight: 800;
  color: #DBE3F0; letter-spacing: -1px; line-height: 1;
  font-variant-numeric: tabular-nums;
  transition: color .25s ease;
}
.hm-pain-card:hover .hm-pain-num { color: #C2D3EF; }
/* 渐变色 icon 圆圈 */
.hm-pain-ico {
  position: absolute;
  top: 18px; left: 20px;
  width: 46px; height: 46px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #EAF1FF, #F0F6FF);
  color: var(--blue);
  border: 1px solid rgba(37,99,235,.10);
  transition: transform .22s ease, background .22s ease;
}
.hm-pain-card:nth-child(2) .hm-pain-ico { background: linear-gradient(135deg, #EEF2FF, #F3EDFF); color: #7C3AED; border-color: rgba(124,58,237,.12); }
.hm-pain-card:nth-child(3) .hm-pain-ico { background: linear-gradient(135deg, #F0FDF4, #EFF8FF); color: #059669; border-color: rgba(5,150,105,.12); }
.hm-pain-card:nth-child(4) .hm-pain-ico { background: linear-gradient(135deg, #FFF7ED, #FEF3C7); color: #EA580C; border-color: rgba(234,88,12,.12); }
.hm-pain-card:hover .hm-pain-ico { transform: scale(1.08) rotate(-3deg); }

/* 问题区 */
.hm-pain-q {
  position: relative;
  margin-top: 78px;
  padding: 20px 24px;
  font-size: 15px; font-weight: 600; color: #475569; line-height: 1.6;
  background: linear-gradient(180deg, #F5F8FE 0%, #FAFBFE 100%);
  border-top: 1px solid rgba(37,99,235,.06);
  border-bottom: 1px dashed rgba(37,99,235,.12);
}
/* 箭头：问题 → 解法 的因果链 */
.hm-pain-arrow {
  text-align: center;
  font-size: 16px;
  color: var(--blue);
  line-height: 1;
  padding: 8px 0 4px;
  opacity: .65;
  transition: opacity .2s ease, transform .2s ease;
}
.hm-pain-card:hover .hm-pain-arrow { opacity: 1; transform: translateY(2px); }
/* 解法区 */
.hm-pain-a { padding: 14px 24px 22px; }
.hm-pain-a b {
  display: flex; align-items: center; gap: 8px;
  font-size: 15.5px; color: var(--blue); font-weight: 700;
}
.hm-pain-a b::before {
  content: "";
  width: 22px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--blue), rgba(37,99,235,0));
}
.hm-pain-a p { margin-top: 8px; font-size: 14px; line-height: 1.7; color: var(--sub); }

/* ---------- 八大模块速览 · SaaS 风格 ---------- */
.hm-mods { padding: 76px 0 66px; }
.hm-mods-grid {
  margin-top: 40px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.hm-mod {
  position: relative; overflow: hidden;
  display: block;
  background: #fff;
  border: 1px solid rgba(37,99,235,.06);
  border-radius: 18px;
  padding: 22px 20px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.hm-mod::before {
  /* hover 时顶部一条渐变光带 */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--blue), #7C3AED);
  opacity: 0;
  transition: opacity .22s ease;
}
.hm-mod:hover {
  transform: translateY(-4px);
  border-color: rgba(37, 99, 235, .35);
  box-shadow: 0 18px 40px rgba(37, 99, 235, .12);
}
.hm-mod:hover::before { opacity: 1; }

/* icon 圆圈：尺寸加大 + 更通透的渐变底色 */
.hm-mod-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px;
  background: linear-gradient(135deg, #EAF1FF, #DCE8FF);
  color: var(--blue);
  border: 1px solid rgba(37,99,235,.08);
  transition: transform .22s ease;
}
/* 非 AI 模块的 icon 独立渐变（4 个基础模块用不同色调交替，视觉不单调） */
.hm-mod:nth-child(1) .hm-mod-ico { background: linear-gradient(135deg, #EAF1FF, #DCE8FF); color: #2563EB; } /* 水印：蓝 */
.hm-mod:nth-child(2) .hm-mod-ico { background: linear-gradient(135deg, #ECFDF5, #D1FAE5); color: #059669; } /* 调整：绿 */
.hm-mod:nth-child(3) .hm-mod-ico { background: linear-gradient(135deg, #FFF7ED, #FED7AA); color: #EA580C; } /* 拼图：橙 */
.hm-mod:nth-child(4) .hm-mod-ico { background: linear-gradient(135deg, #EEF2FF, #E0E7FF); color: #4F46E5; } /* 批注：靛蓝 */
/* AI 模块：紫粉渐变 + 柔和光晕 */
.hm-ico-ai {
  background: linear-gradient(135deg, #2563EB 0%, #7C3AED 60%, #EC4899 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 16px rgba(124, 58, 237, .30);
}
.hm-mod:hover .hm-mod-ico { transform: rotate(-5deg) scale(1.06); }

.hm-mod b { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 15.5px; color: var(--ink); font-weight: 700; }
.hm-mod p { margin-top: 5px; font-size: 13px; line-height: 1.65; color: var(--sub); }
/* 新标记：更精致的紫粉渐变 pill */
.hm-new {
  display: inline-block;
  font-size: 10.5px; font-weight: 700; line-height: 1;
  color: #fff;
  background: linear-gradient(135deg, #7C3AED, #EC4899);
  padding: 3px 7px; border-radius: 999px;
  letter-spacing: .5px;
  margin-left: 2px;
  box-shadow: 0 2px 6px rgba(124,58,237,.30);
}
/* ---------- 界面实拍 ---------- */
.hm-shots { background: #F8FAFD; padding: 72px 0 80px; }

/* ---------- 底部大 CTA · SaaS 风格 ---------- */
.hm-cta { padding: 76px 0 90px; }
.hm-cta-box {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #1E3A8A 0%, #1D4ED8 40%, #2563EB 70%, #3B82F6 100%);
  border-radius: 28px;
  color: #fff;
  text-align: center;
  padding: 60px 40px 52px;
  box-shadow:
    0 40px 80px rgba(29, 78, 216, .32),
    0 4px 16px rgba(29, 78, 216, .18),
    inset 0 1px 0 rgba(255,255,255,.12);
  isolation: isolate;
}
/* CTA 卡内光斑：紫色 / 青色 / 淡蓝，跟底部深蓝渐变叠加出层次 */
.hm-cta-glow {
  position: absolute; border-radius: 50%; pointer-events: none;
  filter: blur(70px); z-index: -1;
}
.hm-cta-glow-1 {
  width: 380px; height: 380px;
  top: -160px; right: -80px;
  background: radial-gradient(circle, rgba(167,139,250,.55) 0%, rgba(167,139,250,0) 70%);
  animation: hmCtaGlowA 12s ease-in-out infinite;
}
.hm-cta-glow-2 {
  width: 300px; height: 300px;
  bottom: -120px; left: -60px;
  background: radial-gradient(circle, rgba(56,189,248,.40) 0%, rgba(56,189,248,0) 70%);
  animation: hmCtaGlowB 15s ease-in-out infinite;
}
.hm-cta-glow-3 {
  width: 220px; height: 220px;
  top: 20%; left: 48%;
  background: radial-gradient(circle, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 70%);
  opacity: .6;
}
@keyframes hmCtaGlowA { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-18px,14px); } }
@keyframes hmCtaGlowB { 0%,100% { transform: translate(0,0); } 50% { transform: translate(14px,-18px); } }

/* 顶部 stat pill：比 h2 标题先露出来，给一个「可信」的锚点 */
.hm-cta-stat {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.14);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.22);
  padding: 7px 16px; border-radius: 999px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
}
.hm-cta-stat b { font-weight: 700; color: #FDE68A; }

.hm-cta-box h2 {
  margin-top: 18px;
  font-size: clamp(26px, 3.4vw, 40px); font-weight: 800; letter-spacing: -.3px;
}
.hm-cta-box > p { margin-top: 12px; font-size: 16px; color: rgba(255,255,255,.85); }

.hm-cta-btns {
  margin-top: 36px;
  display: flex; justify-content: center; align-items: stretch; gap: 16px; flex-wrap: wrap;
}
.hm-cta-btn {
  position: relative;
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
  min-width: 220px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 18px;
  color: #fff;
  padding: 20px 22px;
  text-align: center;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .20s ease, background .20s ease, border-color .20s ease, box-shadow .20s ease;
}
/* hover 时从底部漫上来一条细光 */
.hm-cta-btn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.9), rgba(255,255,255,0));
  opacity: 0;
  transition: opacity .22s ease;
  border-radius: 0 0 18px 18px;
}
.hm-cta-btn:hover {
  transform: translateY(-4px);
  background: rgba(255, 255, 255, .20);
  border-color: rgba(255, 255, 255, .45);
  box-shadow: 0 16px 36px rgba(0, 0, 0, .18);
}
.hm-cta-btn:hover::after { opacity: 1; }

.hm-cta-btn b { font-size: 16.5px; font-weight: 700; }
.hm-cta-btn span { font-size: 12.5px; line-height: 1.6; color: rgba(255,255,255,.80); }

/* 主按钮：实心白卡 + pulse ring 微动画 */
.hm-cta-btn.is-primary {
  background: #fff; border-color: #fff; color: var(--blue-deep);
  box-shadow:
    0 16px 36px rgba(0, 0, 0, .20),
    0 0 0 0 rgba(255,255,255,.40);
  animation: hmPulse 2.8s ease-out infinite;
}
@keyframes hmPulse {
  0%,100% { box-shadow: 0 16px 36px rgba(0,0,0,.20), 0 0 0 0 rgba(255,255,255,.35); }
  50%     { box-shadow: 0 16px 36px rgba(0,0,0,.20), 0 0 0 10px rgba(255,255,255,0); }
}
.hm-cta-btn.is-primary span { color: #475569; }
.hm-cta-btn.is-primary:hover {
  transform: translateY(-4px);
  background: #F8FAFF;
  box-shadow: 0 22px 44px rgba(0, 0, 0, .24);
  animation: none;
}
.hm-cta-btn.is-primary::after { display: none; }

/* 底部 trust pills：替代原来的一条说明 */
.hm-cta-trust {
  margin-top: 32px;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;
}
.hm-cta-trust .hm-trust-pill {
  font-size: 12.5px;
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  color: #FFF;
}
.hm-cta-trust .hm-trust-pill svg { color: #4ADE80; }
.hm-cta-note { margin-top: 20px; font-size: 13px; color: rgba(255,255,255,.72); }
.hm-cta-note a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.hm-cta-note a:hover { color: rgba(255,255,255,.95); }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .hm-hero-inner { grid-template-columns: 1fr; gap: 44px; }
  .hm-hero-visual { max-width: 640px; margin: 0 auto; width: 100%; }
  .hm-mods-grid { grid-template-columns: repeat(2, 1fr); }
  /* 手机预览图下浮动卡位置调整 */
  .hm-float-right { right: 10px; top: -10px; }
  .hm-float-left  { left: 10px; bottom: 40px; }
}
@media (max-width: 760px) {
  .hm-hero { padding: 44px 0 56px; }
  .hm-stats { flex-wrap: wrap; row-gap: 14px; }
  .hm-stat { flex: 1 1 32%; }
  .hm-stat:nth-child(4) { border-left: none; }
  .hm-pain-grid { grid-template-columns: 1fr; }
  .hm-cta-btns { flex-direction: column; align-items: center; }
  .hm-cta-btn { width: 100%; max-width: 360px; }
  .hm-hero-ctas { flex-direction: column; }
  .hm-hero-cta-col { flex-direction: row; flex-wrap: wrap; }
  .hm-float { display: none; }   /* 手机上浮动卡太挤，先隐掉 */
}

/* ---------- 首屏右侧「软件窗口」预览 · SaaS 风格 ---------- */
.hm-win {
  background: #fff;
  border-radius: 22px;
  border: 1px solid rgba(37,99,235,.10);
  box-shadow:
    0 4px 6px rgba(17, 24, 39, .04),
    0 24px 56px rgba(37, 99, 235, .14);
  overflow: hidden;
}
.hm-win-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 11px 16px;
  background: linear-gradient(180deg, #F8FAFD, #F1F4F9);
  border-bottom: 1px solid rgba(37,99,235,.08);
}
.hm-win-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.hm-win-dot-r { background: #FF5F57; }
.hm-win-dot-y { background: #FEBC2E; }
.hm-win-dot-g { background: #28C840; }
.hm-win-title {
  margin-left: 10px; font-size: 14px; font-weight: 700;
  color: var(--sub); letter-spacing: .2px;
}
/* 主预览图：一张强感知的主图（水印模块） */
.hm-win-main {
  padding: 10px;
  line-height: 0;
}
.hm-win-main img {
  width: 100%; height: auto; display: block;
  border-radius: 12px;
  border: 1px solid rgba(37,99,235,.06);
  box-shadow: 0 4px 16px rgba(17, 24, 39, .06);
}

/* AI 能力标签条（更紧凑，靠主图右下） */
.hm-win-ai {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 10px 14px 14px;
}
.hm-win-ai-label {
  font-size: 10.5px; font-weight: 700; color: #7C3AED;
  background: linear-gradient(135deg, #EEF2FF, #F5F3FF);
  border: 1px solid #DDD6FE;
  padding: 4px 8px; border-radius: 999px;
  white-space: nowrap;
}
.hm-win-ai-item {
  font-size: 11.5px; font-weight: 600; color: var(--ink);
  background: #F5F7FB; border: 1px solid rgba(37,99,235,.08);
  padding: 4px 9px; border-radius: 999px;
  white-space: nowrap;
}

/* ---------- 手绘软件界面示意（纯 SVG/CSS，无截图）· 2026-10-26 ---------- */
.hm-win-ui { padding: 12px 12px 14px; }
.hm-win-tabs {
  display: flex; gap: 3px; flex-wrap: nowrap;
  padding: 0 2px 8px;
  border-bottom: 1px solid rgba(37,99,235,.07);
  margin-bottom: 8px;
}
.hm-win-tabs span {
  font-size: 12px; line-height: 1; color: var(--sub);
  padding: 6px 10px; border-radius: 7px;
  white-space: nowrap;
}
.hm-win-tabs .is-on { background: var(--blue); color: #fff; font-weight: 600; }
.hm-win-tabs .is-ai { color: #7C3AED; font-weight: 600; }
.hm-win-body { display: flex; gap: 8px; }
.hm-win-side { display: flex; flex-direction: column; gap: 5px; flex: none; }
.hs-ico {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: #F3F4F6; color: #9CA3AF;
}
.hs-ico.is-on { background: var(--blue); color: #fff; }
.hm-win-canvas {
  flex: 1; min-width: 0;
  border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(37,99,235,.10);
  line-height: 0;
  box-shadow: 0 2px 10px rgba(17, 24, 39, .05);
}
.hm-win-canvas svg { width: 100%; height: 100%; display: block; } /* 拉伸填满画布框（配合 slice 防白边） */
.hm-win-panel {
  width: 150px; flex: none;
  background: #F8FAFC; border: 1px solid rgba(37,99,235,.08);
  border-radius: 10px; padding: 10px 10px 9px;
  display: flex; flex-direction: column; gap: 9px;
}
.hm-win-panel > b { font-size: 12.5px; color: var(--ink); }
.hp-row { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--sub); }
.hp-row > span:first-child { flex: none; }
.hp-slider {
  position: relative; flex: 1; height: 5px;
  background: #E5E7EB; border-radius: 999px;
}
.hp-slider i {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--blue); border-radius: 999px;
}
.hp-slider em {
  position: absolute; top: 50%; transform: translate(-50%, -50%);
  width: 11px; height: 11px;
  background: var(--blue); border: 2px solid #fff;
  border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.hp-switch {
  margin-left: auto; width: 30px; height: 16px;
  border-radius: 999px; background: #D1D5DB;
  position: relative; flex: none;
}
.hp-switch i {
  position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%; background: #fff;
}
.hp-switch.is-on { background: var(--blue); }
.hp-switch.is-on i { left: auto; right: 2px; }
.hp-apply {
  margin-top: 2px;
  background: var(--blue); color: #fff;
  font-size: 12px; font-weight: 600;
  text-align: center; padding: 6px 0; border-radius: 6px;
}
@media (max-width: 560px) {
  .hm-win-panel { display: none; } /* 极窄屏隐藏参数面板，保画布完整 */
}