@charset "UTF-8";
/* ==========================================================================
   components.css —— 可复用组件
   按钮 / 圆角标 / 卡片 / 图标块 / 列表 / 问答 / 时间线 / 筛选片 / 二维码 / 图片位
   ========================================================================== */

/* ---------------------------------------------------------------- 排版原子 */
.h-display { font-size: var(--fs-display); font-weight: var(--fw-black); }
.h-title   { font-size: var(--fs-title);   font-weight: var(--fw-black); }
.h2        { font-size: var(--fs-h2);      font-weight: var(--fw-black); }
.h3        { font-size: var(--fs-h3);      font-weight: var(--fw-black); }
.h4        { font-size: var(--fs-h4);      font-weight: var(--fw-black); }
.h5        { font-size: var(--fs-h5);      font-weight: var(--fw-bold); }
.h-card    { font-size: var(--fs-card);    font-weight: var(--fw-bold); }

.lead    { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--text-muted); }
.body    { font-size: var(--fs-body); line-height: var(--lh-read);  color: var(--text-muted); }
.caption { font-size: var(--fs-cap);  color: var(--text-muted); }
.micro   { font-size: var(--fs-micro); }

/* ---------------------------------------------------------------- 按钮 */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 16px 28px;
  border: 0;
  border-radius: var(--r-btn);
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--dur) ease, color var(--dur) ease,
              border-color var(--dur) ease;
}

.btn:hover { text-decoration: none; }

.btn--primary { background: var(--brand); color: var(--text-on-brand); }
.btn--primary:hover { background: var(--brand-grad-from); }

.btn--neutral { background: var(--bg-neutral); color: var(--text); }
.btn--neutral:hover { background: var(--bg-soft); }

.btn--white { background: var(--bg); color: var(--text-body); }
.btn--white:hover { background: var(--bg-soft); }

/* 次级动作按钮：描边款。用 inset 阴影代替 border —— 1px 实边框会把按钮撑高 2px，
   和同一行里的实心按钮对不齐；浅灰底上的实心次级按钮又容易被看成禁用态。 */
.btn--outline {
  background: transparent;
  color: var(--brand-ink);
  box-shadow: inset 0 0 0 1px var(--brand);
}
.btn--outline:hover { background: var(--brand-surface); }

/* 落在品牌渐变卡上的两种按钮：实白 + 白描边（描边款白字对比度 6.3:1） */
.btn--on-brand { background: var(--bg); color: var(--brand-ink); }
.btn--on-brand:hover { background: var(--brand-surface); }

.btn--ghost-on-brand {
  background: transparent;
  color: var(--text-on-brand);
  border: 1px solid rgba(255, 255, 255, 0.72);
}
.btn--ghost-on-brand:hover { background: rgba(255, 255, 255, 0.16); }

.btn--sm { padding: 11px 22px; font-size: var(--fs-body); }
.btn--lg { padding: 17px 30px; }
.btn--block { width: 100%; }

/* 按钮组 */
.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.btn-row--top { padding-block-start: var(--sp-2); }

/* ---------------------------------------------------------------- 圆角标 */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 6px 14px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--brand-surface);
  color: var(--brand);
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  line-height: 1.5;
  white-space: nowrap;
}

.pill--fill { background: var(--brand); color: var(--text-on-brand); font-weight: var(--fw-bold); }
.pill--sm { padding: 5px 14px; }

/* ---------------------------------------------------------------- 图标块 */
.icon-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--r-btn);
  background: var(--brand-surface);
  color: var(--brand-mark);
}

.icon-tile svg { width: 24px; height: 24px; }

.icon-tile--round {
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
}

/* ---------------------------------------------------------------- 卡片 */
.card {
  background: var(--bg-soft);
  border-radius: var(--r-card);
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.card--plain { gap: var(--sp-2); }
.card--lg { padding: var(--sp-6) 36px; gap: var(--sp-5); }
.card--roomy { padding: 28px 28px; gap: var(--sp-4); }
.card--white { background: var(--bg); }

/* 卡片顶部一行（左标题 + 右徽标） */
.card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* ---------------------------------------------------------------- 分隔线 */
.rule {
  width: 100%;
  height: 1px;
  border: 0;
  background: var(--line);
}

/* ---------------------------------------------------------------- 圆点列表 */
.bullet-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding-block-start: var(--sp-1);
}

.bullet-list__item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: var(--fs-body);
  color: var(--text-body);
}

.bullet-list__dot {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 9px;               /* 与首行文字视觉居中 */
  border-radius: 50%;
  background: var(--brand-mark);
}

/* ---------------------------------------------------------------- 问答卡 */
.qa-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.qa {
  background: var(--bg-soft);
  border-radius: var(--r-md);
  padding: 22px var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.qa__q {
  display: flex;
  gap: var(--sp-2);
  align-items: baseline;
  font-size: var(--fs-lead);
  font-weight: var(--fw-medium);
  color: var(--text);
}

.qa__mark { flex: 0 0 auto; font-weight: var(--fw-bold); color: var(--brand); }
.qa__a { font-size: var(--fs-body); line-height: var(--lh-read); color: var(--text-muted); max-width: none; }

/* 分组标题 */
.qa-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* ---------------------------------------------------------------- 更新日志时间线 */
.timeline {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.tl-item {
  background: var(--bg-soft);
  border-radius: var(--r-card);
  padding: 26px 28px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.tl-item__head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

.tl-item__date { font-size: var(--fs-cap); color: var(--text-muted); }

/* 更新条目逐条列出，行距与设计稿的 190% 一致 */
.changelog-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  font-size: var(--fs-body);
  line-height: 1.9;
  color: var(--text-body);
}

.changelog-list li::before {
  content: "· ";
}

/* ---------------------------------------------------------------- 筛选片 */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.chip {
  padding: 10px var(--sp-4);
  border: 0;
  border-radius: var(--r-pill);
  background: var(--bg-neutral);
  color: var(--text-muted);
  font-size: var(--fs-cap);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background-color var(--dur) ease, color var(--dur) ease;
}

.chip:hover { background: var(--brand-surface); color: var(--brand); }

.chip[aria-pressed="true"] {
  background: var(--brand);
  color: var(--text-on-brand);
}

/* ---------------------------------------------------------------- 面包屑 */
.breadcrumb {
  font-size: var(--fs-cap);
  color: var(--text-muted);
}

.breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
}

.breadcrumb li + li::before {
  content: "/";
  margin-inline: var(--sp-1);
  color: var(--text-muted);
}

.breadcrumb a { color: var(--text-muted); }
.breadcrumb [aria-current="page"] { color: var(--text); }

/* ---------------------------------------------------------------- 二维码 */
.qr-plate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-2);
  background: var(--bg);
  border-radius: var(--r-md);
  width: 164px;
  height: 164px;
}

.qr-plate img { width: 144px; height: 144px; }

.qr-zone {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}

.qr-zone__caption { font-size: var(--fs-cap); color: var(--text-on-brand); }

/* ---------------------------------------------------------------- 图片位（手机竖版） */
.media {
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--bg-neutral);
}

.media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media--phone { width: 168px; aspect-ratio: 168 / 363; }
.media--tall  { width: 272px; aspect-ratio: 272 / 520; }

/* 截图墙：能一行就一行，放不下自动折行 —— 不写死列数，
   否则窄一点的机型上 width:100% 会把竖图拉成半屏高的巨幅。
   图位在墙里可伸缩，但不超过它自己的 168px。 */
.shot-wall {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-4);
}

.shot-wall > .media--phone {
  flex: 1 1 120px;
  max-width: 168px;
}

/* ---------------------------------------------------------------- 数据条 */
.data-bar {
  display: flex;
  align-items: center;
}

.data-bar__item {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  text-align: center;
}

.data-bar__num {
  font-size: var(--fs-stat);
  font-weight: var(--fw-black);
  line-height: var(--lh-tight);
  color: var(--text);
}

.data-bar__label { font-size: var(--fs-cap); color: var(--text-muted); }

.data-bar__divider {
  flex: 0 0 auto;
  width: 1px;
  height: 44px;
  background: var(--line);
}

/* ---------------------------------------------------------------- 步骤卡 */
.step-card {
  background: var(--bg-soft);
  border-radius: var(--r-card);
  padding: 28px var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ---------------------------------------------------------------- 下载弹窗 */
/* 浮层用 width 定尺寸、不写 max-width：它不是内容栏，不参与「内容宽度只有两档」
   的约束；同时显式 max-width:none 中和掉 UA 给 <dialog> 的默认上限。 */
.download-modal {
  position: fixed;
  inset: 0;
  width: min(560px, 100% - var(--sp-7));
  max-width: none;
  height: fit-content;
  max-height: min(760px, 100% - var(--sp-7));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--r-card);
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 24px 64px rgba(20, 22, 28, 0.24);
  overflow: hidden;               /* 滚动条由内部 __body 承担，圆角不被切角 */
  display: none;
  flex-direction: column;
}

.download-modal[open] { display: flex; }

.download-modal::backdrop { background: rgba(20, 22, 28, 0.56); }

.download-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  border-block-end: 1px solid var(--line);
}

.download-modal__title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  color: var(--text);
}

.download-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--r-sm);
  background: var(--bg-neutral);
  color: var(--text-body);
  cursor: pointer;
  transition: background-color var(--dur) ease, color var(--dur) ease;
}

.download-modal__close:hover { background: var(--brand-surface); color: var(--brand-ink); }

/* 弹窗主体：左边选下载地址，右边扫码 —— 在电脑上取包的人拿手机扫更快。
   二维码原本挂在下载页侧栏，横排改版后收进这里。 */
.download-modal__body {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-5);
  padding: var(--sp-5);
  overflow-y: auto;
}

.download-modal__opts {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.download-modal__qr {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

/* 弹窗里的码比首页那个小一号（128 而非 164），不把地址行挤瘦：
   33 个模块落在 ~112px 上仍有约 3.4px/模块，手机扫得动。
   白底压白底会看不出边界，补一圈描边（码本身 light 色是纯白，底色不能改灰）。 */
.download-modal__qr .qr-plate {
  width: 128px;
  height: 128px;
  padding: var(--r-xs);
  border: 1px solid var(--line);
}

.download-modal__qr .qr-plate img { width: 100%; height: 100%; }

.download-modal__qr .caption { text-align: center; }

/* 一条下载地址。整行可点，右侧「下载」只是个视觉按钮（a 里不能套 a） */
.download-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  background: var(--bg-soft);
  color: var(--text);
}

.download-opt:hover {
  background: var(--brand-surface);
  border-color: var(--brand);
  text-decoration: none;
}

.download-opt__name {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--text);
}

.download-opt__go { flex: 0 0 auto; }

/* ==========================================================================
   组件级响应式覆盖 —— 必须跟组件定义放在同一个文件里，
   否则会被后加载的样式表以同优先级盖掉（CSS 覆盖失败是静默的）。
   ========================================================================== */
@media (max-width: 860px) {
  /* 数据条折成 2×2；换行后竖分隔线没有意义，去掉 */
  .data-bar {
    flex-wrap: wrap;
    row-gap: var(--sp-5);
    padding-block: var(--sp-6);
  }

  .data-bar__item { flex: 1 1 40%; }
  .data-bar__divider { display: none; }
}

@media (max-width: 640px) {
  /* 收窄按钮左右内距，让 Hero 的两个按钮在 390px 上仍能并排一行 */
  .btn { padding-inline: var(--sp-4); }

  /* 弹窗在窄屏靠 40px 边距留白太奢侈，收到 24px；行内距也跟着收 */
  .download-modal { width: min(560px, 100% - 24px); }

  .download-modal__head { padding: var(--sp-4) var(--sp-4) var(--sp-3); }

  /* 窄屏放不下左右两栏，回落竖排；地址行占满整宽，二维码居中收尾 */
  .download-modal__body {
    flex-direction: column;
    align-items: center;
    padding: var(--sp-4);
    gap: var(--sp-4);
  }

  .download-modal__opts { width: 100%; }
  .download-opt { padding: var(--sp-3); }
}