@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════
   helpcenter-r44.css — 帮助中心(help-center):加插图、分类卡、问答排版(2026-09-29)
   Yannie:「優化幫助中心,增加插圖,豐富整個頁面」

   改前(1440 实测):首屏标题一栏占满、右半边空着;首屏底到搜索框之间
   64(首屏底内距)+ 128(#faq 顶内距)= 192px 空白;下面 19 条纯文字问答一条到底。

   这一轮做四件事
     §1 首屏右列一块 .fig-plate 线描图版(图意「自助查找答案」,
        生成器 _mains/figart-helpcenter-r44.py),收掉首屏下方的空白
     §2 分类筛选换成一排分类卡:图标 + 分类名 + 条数,名字与条数由
        helpcenter-r27.js 从 help-faq.json 现取(卡片仍是 data-hc-chip 按钮)
     §3 每个分类标题前加同一枚图标的小牌;≥1024 改成「分类头 | 问答」两栏
     §4 问答本身:字号、行距、展开态

   ⛔ 这里为什么看不到 .fig-plate、也看不到 fx-* 的配方
     .fig-plate 与大半 fx-* 住 home-v6.css;fx-filed 住 figart-r34.css §3。
     本页 <head> 里两者都排在本文件之前。home-v6.css 其余选择器
     (.svc/.core/.hflow/.stance/#highlights…)在本页 0 命中,figart-r34.css 除 §3 外
     全被 .page-about/.page-careers/.fg34 锁住 —— 引它们是安全的(r44 用「禁用样式表
     前后 computed style 逐元素 diff」验过,见交付报告);抄一份进来 = 两份配方。

   配色零新增:一个 hex 都没有,全部 var(--c-*) + color-mix。
   不加投影:.fig-plate 自带一道 0 44px 80px 的外投影,分类卡与标题小牌上撤掉,
   只留玻璃内高光 —— 一排五张卡各拖一道影子,会读成五块浮起来的按钮而不是一排目录。

   回退:两页 head 删 home-v6 / figart-r34 / helpcenter-r44 三行,helpcenter-r27.js 改回
        ?v=2 并还原该文件;四个文件删 <!-- r44:fig:hero --> 包块
        (或整组从 prd/retu-home-v5/_bak/helpcenter-r44-20260929-122823/ 还原)。
   ══════════════════════════════════════════════════════════════════ */


/* ══ §1 · 首屏 ═════════════════════════════════════════════════════ */

/* identity-r13.css:301 在深色档把所有内页首屏压成单列((0,4,0)),理由是那一列
   插图撤掉后标题被挤成三行。本页右列又有图了,只在本页、只在 ≥1024 放回两列。
   本选择器 (0,4,2) 压过那一条,且只命中帮助中心;浅色档同样生效。
   中文标题两段 block 在 1440 左列 652px 里放得下;1024 档左列 ≈532,标题字号随 clamp 缩。 */
@media (min-width: 1024px) {
  html[data-page="help-center"] body.page-help .hero .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    column-gap: var(--s-8);
    align-items: center;
  }
}
@media (min-width: 1280px) {
  html[data-page="help-center"] body.page-help .hero .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    column-gap: var(--s-9);
  }
}

.hc44-hero {
  margin: 0;
  inline-size: 100%;
  max-inline-size: 420px;
  justify-self: end;
}
@media (max-width: 1023.98px) {
  .hc44-hero { justify-self: start; max-inline-size: 460px; }
}
@media (max-width: 767.98px) {
  .hc44-hero { max-inline-size: none; padding: var(--s-4); }
}

/* 环境光:玻璃的前提(平底色上开 blur 等于没开 —— r34 / r37 的教训)。
   首屏的 .hero__bg 层在 z-index 0、.hero__inner 在 z-index 2,所以光铺在
   .hero__inner 自己的底上:它正好在图版背后、又在氛围底图之上。
   位置按图版实测:≥1024 图版在右列、竖向居中(中心 = 右缘 − 内距 32 − 半宽 210);
   <1024 图版落在文案下面。
   ⚠️ 光斑的 72% 衰减圈必须整个落在 .hero__inner 盒子里:第一版多铺了一团贴右上角的
   副光,被盒子上缘切出一道硬边,实拍里是页头下面一块发亮的矩形。 */
@media (min-width: 1024px) {
  .page-help #hero .hero__inner {
    background-image:
      radial-gradient(300px 210px at calc(100% - 242px) 50%,
        color-mix(in srgb, var(--c-primary-500) 16%, transparent), transparent 72%);
  }
}
@media (max-width: 1023.98px) {
  .page-help #hero .hero__inner {
    background-image:
      radial-gradient(70% 180px at 40% calc(100% - 200px),
        color-mix(in srgb, var(--c-primary-500) 15%, transparent), transparent 72%);
  }
}

/* 首屏底 → 搜索框:原来 64 + 128 = 192px 的空白(1440;1024 档是 48 + 128),#faq 顶内距收到与首屏底内距同档。
   只改顶,不改底:底下是页脚,节奏由全站 --sec-pad 管。 */
.page-help #faq { padding-block-start: var(--s-8); }
@media (max-width: 767.98px) {
  .page-help #faq { padding-block-start: var(--s-6); }
}
/* 第二刀(r44 复核轮):只收 #faq 之后,1440 实测按钮底 → 搜索框仍有 64 + 48 = 112px
   (改前 192),截图上仍读成「首屏和工具区之间空着一截」。首屏底内距只在本页、只在 ≥768 收到 s-6,
   按钮底 → 搜索框 = 32 + 48 = 80px。<768 不动:那里图版排在按钮下面,图版底 → 搜索框本来就是 80。
   (1,2,0) 压过 site.css 的 .hero--page .hero__inner (0,2,0)。 */
@media (min-width: 768px) {
  .page-help #hero .hero__inner { padding-block-end: var(--s-6); }
}


/* ══ §2 · 搜索 + 分类卡 ════════════════════════════════════════════ */

.page-help .hc-tools { gap: var(--s-5); margin-bottom: var(--s-9); }
.page-help .hc-search { flex: 1 1 100%; }

.page-help .hc-search__input {
  padding: var(--s-3) var(--s-5);
  font-size: var(--fs-body);
  background: color-mix(in srgb, var(--c-surface) 55%, transparent);
  border-color: color-mix(in srgb, var(--c-border-strong) 40%, transparent);
}
.page-help .hc-search__input:hover { border-color: color-mix(in srgb, var(--c-border-strong) 70%, transparent); }

.hc44-cats {
  flex: 1 1 100%;
  display: grid;
  /* 2026-09-30:不再写死 5 列 —— 分类数会变(当天删了「公司与其他」),写死就空一格。
     有几张卡就平分几格;窄屏那条媒体查询里换回两列。 */
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.hc44-cats__li { display: flex; min-width: 0; }

/* 卡片本身就是 .fig-plate(图标的 fx-* 配色只在 .fig-plate 里生效),这里改的是
   按钮该有的东西 + 比图版小一号的内距与圆角;玻璃底、发丝边照 home-v6 不动。 */
.fig-plate.hc44-cat {
  appearance: none;
  inline-size: 100%;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: var(--s-3);
  row-gap: 2px;
  padding: var(--s-4) var(--s-4) var(--s-4) var(--s-4);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-text) 8%, transparent);
  font: inherit;
  color: var(--c-text);
  text-align: start;
  cursor: pointer;
}
.hc44-cat .hc44-ico {
  grid-row: 1 / 3;
  align-self: center;
  inline-size: 40px;
  block-size: 40px;
}
.hc44-cat__name {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.35;
}
.hc44-cat__n {
  font-size: var(--fs-eyebrow);
  color: var(--c-text-3);
  line-height: 1.35;
}

@media (hover: hover) {
  .fig-plate.hc44-cat:hover { border-color: color-mix(in srgb, var(--c-border-strong) 60%, transparent); }
}
.fig-plate.hc44-cat[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--c-primary-600) 70%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c-primary-500) 12%, color-mix(in srgb, var(--c-surface) 76%, transparent)),
    color-mix(in srgb, var(--c-surface) 52%, transparent));
}
.fig-plate.hc44-cat:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* 图标:每枚里只有一件 .hc44-ico__k,选中时它变品牌蓝 —— 一张图最多一处蓝。
   ⛔ 用类改 stroke,不用 SVG 上的 stroke 属性(类声明赢过呈现属性,写了也不生效)。 */
.fig-plate .hc44-ico { display: block; overflow: visible; }
.fig-plate .hc44-ico .fx-line { stroke-width: 1.5; opacity: .9; }
.fig-plate .hc44-ico .fx-line-soft { stroke-width: 1.3; opacity: .6; }
.fig-plate.hc44-cat[aria-pressed="true"] .hc44-ico__k,
.hc-cat .fig-plate.hc44-badge .hc44-ico__k {
  stroke: var(--c-primary-600);
  opacity: 1;
}

/* <1280 改成图标在上:1024 档每张卡只有 ≈146 宽,图标占左边时英文分类名只剩 ≈90,
   「Account application and verification」被挤成三行 */
@media (max-width: 1279.98px) {
  .fig-plate.hc44-cat { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; row-gap: 4px; }
  .hc44-cat .hc44-ico { grid-row: auto; inline-size: 32px; block-size: 32px; margin-bottom: var(--s-2); }
}
/* 窄屏:两列;「全部」跨满一行、横排,免得五张卡落成 2+2+1 缺一角 */
@media (max-width: 767.98px) {
  .page-help .hc-tools { margin-bottom: var(--s-7); gap: var(--s-4); }
  .hc44-cats { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .hc44-cats__li--all { grid-column: 1 / -1; }
  /* 分类数为奇数时,最后一张落单 —— 让它也跨满,不留缺角 */
  .hc44-cats__li:last-child:nth-child(even) { grid-column: 1 / -1; }
  .fig-plate.hc44-cat { padding: var(--s-3) var(--s-4); }
  .hc44-cats__li--all .fig-plate.hc44-cat {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto;
    align-items: center;
  }
  .hc44-cats__li--all .hc44-ico { margin-bottom: 0; inline-size: 28px; block-size: 28px; }
}


/* ══ §3 · 分类标题 + 两栏 ══════════════════════════════════════════ */

.fig-plate.hc44-badge {
  flex: none;
  display: inline-grid;
  place-items: center;
  inline-size: 36px;
  block-size: 36px;
  padding: 0;
  border-radius: 10px;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-text) 8%, transparent);
}
.hc44-badge .hc44-ico { inline-size: 24px; block-size: 24px; }

.page-help .hc-cat__head { align-items: center; padding-bottom: var(--s-3); margin-bottom: 0; }
.page-help .hc-cat__title { font-size: var(--fs-h4); letter-spacing: 0; }
/* 英文「7 questions」在 390 上被挤成两行 */
.page-help .hc-cat__count { white-space: nowrap; }
.page-help .hc-cat + .hc-cat { margin-top: var(--s-9); }

/* ≥1024:左栏分类头(小牌 / 分类名 / 条数竖排,随滚动吸顶),右栏问答。
   19 条问答原来一条到底、每条 1136 宽 —— 问题只有一行,右边大片空着;
   两栏之后问答列 ≈ 850 宽,答案正文仍由 .hc-a 的 max-width 管行长。 */
@media (min-width: 1024px) {
  .page-help .hc-cat {
    display: grid;
    grid-template-columns: minmax(0, 232px) minmax(0, 1fr);
    column-gap: var(--s-8);
    align-items: start;
  }
  .page-help .hc-cat__head {
    position: sticky;
    top: calc(var(--header-h, 74px) + var(--s-5));
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-4) 0 0;
    border-bottom: 0;
  }
  .page-help .hc-cat__count { margin-left: 0; }
  .fig-plate.hc44-badge { inline-size: 48px; block-size: 48px; border-radius: 12px; }
  .hc44-badge .hc44-ico { inline-size: 30px; block-size: 30px; }
  .hc44-items { border-top: 1px solid var(--c-border-strong); }
}


/* ══ §4 · 问答 ═════════════════════════════════════════════════════
   可读性优先:问题从 14px 提到正文档 16px;展开态给一块淡底把「问 + 答」圈成一件,
   答案行距放宽。问题左边的箭头与答案对齐关系沿用 r27(答案左缘 = 问题文字左缘)。 */
.page-help .hc-item {
  border-bottom-color: var(--c-divider);
  border-radius: 10px;
  transition: background-color var(--dur-1) var(--ease);
}
.page-help .hc-q {
  padding: var(--s-4) var(--s-3);
  font-size: var(--fs-body);
  line-height: 1.55;
}
.page-help .hc-q::before { margin-top: .5em; }
@media (hover: hover) {
  .page-help .hc-item:not([open]) > .hc-q:hover {
    color: var(--c-text);
    background: color-mix(in srgb, var(--c-surface-subtle) 70%, transparent);
    border-radius: 10px;
  }
}
.page-help .hc-item[open] {
  background: color-mix(in srgb, var(--c-surface) 60%, transparent);
  border-bottom-color: transparent;
  margin-block: var(--s-2);
}
.page-help .hc-item[open] > .hc-q::before { border-color: var(--c-text-2); }

/* 左缘:问题内距 s-3 + 箭头 7px + gap s-3 = 答案左缘 */
.page-help .hc-a {
  padding: 0 var(--s-5) var(--s-5) 0;
  margin-left: calc(var(--s-3) + 7px + var(--s-3));
  font-size: 15px;
  line-height: 1.8;
  max-width: 44rem;
}
.page-help .hc-a > * { margin-bottom: var(--s-4); }
.page-help .hc-a > *:last-child { margin-bottom: 0; }

@media (max-width: 767.98px) {
  .page-help .hc-q { padding: var(--s-4) var(--s-2); font-size: 15px; }
  .page-help .hc-a { margin-left: calc(var(--s-2) + 7px + var(--s-3)); padding-right: var(--s-3); }
  .page-help .hc-cat + .hc-cat { margin-top: var(--s-8); }
}

@media (prefers-reduced-motion: reduce) {
  .page-help .hc-item { transition: none; }
}

/* ══ §5 · 出入金一格的组内小标题 + 有序列表(2026-09-30) ══════════
   出入金一格 25 条,按原稿分「入金 / 出金 / 其他」三组;小标题只是路标,
   字号比问题小一档、用次级字色,不抢问题的戏。第一组紧贴分类顶线,不另起空。 */
.page-help .hc-sub {
  margin: var(--s-7) 0 var(--s-2);
  padding: 0 var(--s-3);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--c-text-2);
}
.page-help .hc44-items > .hc-sub:first-child { margin-top: var(--s-4); }
.page-help .hc-a ol { padding-left: 1.4em; list-style: decimal outside; }
.page-help .hc-a ol li::marker { color: var(--c-text-2); font-variant-numeric: tabular-nums; }
.page-help .hc-a ol li { margin-bottom: .4em; }
/* ul 原来被全站 reset 吃掉了圆点(r27 只给了缩进),「哪些资金暂时不能出」四条读起来像四段散文 */
.page-help .hc-a ul { list-style: disc outside; }
.page-help .hc-a ul li::marker { color: var(--c-text-2); }
@media (max-width: 767.98px) {
  .page-help .hc-sub { padding: 0 var(--s-2); margin-top: var(--s-6); }
}