/* ============================================================
   帮助中心专属样式（前缀 ph-，作用域 .ph-page；公共底座见 page-g.css）
   设计稿：docs/preview/ai-images/二级页-G风格/2-帮助中心.png
   结构：页头 → 叠在页头底边的 4 个快捷入口 → 左侧吸顶目录 + 右侧每组一张手风琴白卡 → 「还有问题？」三张链接卡
   ============================================================ */

/* 页头底部多留出快捷入口压上去的高度 */
.ph-page .ph-hero { padding-bottom: 104px; }
.ph-page .ph-hero .pg-hero-art img:nth-of-type(1) { width: 176px; left: 18%; top: 0; }
.ph-page .ph-hero .pg-hero-art img:nth-of-type(2) { width: 136px; left: auto; right: 2%; top: 70px; }

/* h1 只在标点处换行（「帮助中心：」后、「、」后），不在「怎么 / 收费」这类词中间断开；不加额外标签，h1 文本保持干净 */
.ph-page .ph-hero h1 { word-break: keep-all; }

/* 组图标：App 同款 3D 图标直接放，不套底色方块（快捷入口、组标题、底部卡片共用；目录里用 .ph-toc-ico 24px） */
.ph-page .ph-gico {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(37, 99, 235, .22));
}
.ph-page .ph-gico--sm { width: 44px; height: 44px; }
.ph-page .ph-toc-ico { flex-shrink: 0; width: 24px; height: 24px; object-fit: contain; }

/* 快捷入口比底座 .pg-section--overlap 的 48px 压得更深，盖住页头底边（设计稿里一半在蓝底上） */
.ph-page .ph-body > .pg-wrap { margin-top: -64px; }
.ph-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}
.ph-quick-item {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 96px;
  padding: 20px 22px;
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--g-shadow);
}
.ph-quick-item:focus-visible { outline: 3px solid var(--g-blue); outline-offset: 2px; }
.ph-quick-text {
  flex: 1;
  min-width: 0;
  font-size: 17px;
  font-weight: 700;
  color: var(--g-title);
}
.ph-page .ph-quick-arrow { color: var(--g-blue); }

/* ── 两栏：左目录 + 右问答 ── */
.ph-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.ph-aside {
  position: sticky;
  top: calc(var(--pg-nav-h) + 24px);
}
.ph-toc {
  display: grid;
  gap: 6px;
  padding: 12px;
  border-radius: 20px;
  background: rgba(255, 255, 255, .6);
}
.ph-toc a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-radius: 14px;
  font-size: 15px;
  font-weight: 600;
  color: #4B5563;
  transition: background .2s, color .2s;
}
.ph-toc a:hover { background: #fff; color: var(--g-blue-deep); }
.ph-toc a.is-active { background: var(--g-bg-blue-2); color: var(--g-blue-deep); }

.ph-groups { display: grid; gap: 24px; min-width: 0; }
.ph-group { scroll-margin-top: calc(var(--pg-nav-h) + 24px); }
/* 组图标放在 h2 外面（同一行左侧），h2 里只有组名文字，标题文本不混进图片 alt */
.ph-group-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.ph-group h2 {
  font-size: 22px;
  line-height: 1.4;
  font-weight: 800;
  color: var(--g-title);
}

/* 手风琴：用底座 .pg-faq > details.pg-faq-item，这里只把「灰底圆角块」改成设计稿的细分隔线，展开项浅蓝底 */
.ph-page .ph-faq { gap: 0; }
.ph-page .ph-faq-item {
  border: 0;
  border-top: 1px solid var(--g-line);
  border-radius: 0;
  background: transparent;
}
.ph-page .ph-faq-item:last-child { border-bottom: 1px solid var(--g-line); }
.ph-page .ph-faq-item[open] {
  border-top-color: transparent;
  border-radius: 14px;
  background: var(--g-bg-blue);
}
.ph-page .ph-faq-item[open] + .ph-faq-item { border-top-color: transparent; }
.ph-page .ph-faq-item summary {
  justify-content: flex-start;
  gap: 10px;
  padding: 16px 14px;
  line-height: 1.5;
}
.ph-page .ph-faq-item summary > span { flex: 1; min-width: 0; }
.ph-page .ph-faq-item summary:hover { color: var(--g-blue-deep); }
/* 底座会把 summary 里所有图标展开时转 180°，左侧小箭头不转 */
.ph-page .ph-faq-item summary svg.ph-faq-caret { width: 16px; height: 16px; color: #374151; transform: none; }
.ph-page .ph-faq-item[open] summary svg.ph-faq-caret { color: var(--g-blue-deep); transform: none; }
.ph-page .ph-faq-item > p { padding: 0 14px 18px 40px; }

/* ── 还有问题？ ── */
.ph-more { padding: 56px 0; }
.ph-more-inner {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 24px;
  align-items: center;
}
.ph-more-head { margin-bottom: 0; }
.ph-more-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.ph-more-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 20px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--g-line);
  box-shadow: var(--g-shadow-sm);
}
.ph-more-card:focus-visible { outline: 3px solid var(--g-blue); outline-offset: 2px; }
.ph-more-text { flex: 1; min-width: 0; display: grid; gap: 4px; }
.ph-more-text b { font-size: 16px; color: var(--g-title); }
.ph-more-text small { font-size: 13px; color: var(--g-muted); }
.ph-page .ph-more-arrow { color: var(--g-blue); }

/* ── 响应式 ── */
@media (max-width: 1100px) {
  .ph-quick { gap: 14px; }
  .ph-quick-item { padding: 16px; gap: 12px; }
  .ph-more-inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .ph-page .ph-hero { padding-bottom: 96px; }
  .ph-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ph-layout { grid-template-columns: minmax(0, 1fr); }
  .ph-aside { display: none; }   /* 窄屏目录由上方快捷入口代替 */
  .ph-more-cards { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@media (max-width: 640px) {
  .ph-page .ph-hero { padding-bottom: 80px; }
  .ph-page .ph-body > .pg-wrap { margin-top: -24px; }   /* 手机上副标题和快捷入口之间至少留 20px */
  .ph-quick { gap: 10px; margin-bottom: 20px; }
  .ph-quick-item { min-height: 72px; padding: 14px 12px; gap: 10px; border-radius: 16px; }
  .ph-page .ph-quick-item .ph-gico { width: 44px; height: 44px; }
  .ph-quick-text { font-size: 15px; }
  .ph-page .ph-quick-arrow { display: none; }
  .ph-groups { gap: 16px; }
  .ph-group-head { gap: 10px; }
  .ph-group h2 { font-size: 19px; }
  .ph-page .ph-group-head .ph-gico--sm { width: 38px; height: 38px; }
  .ph-page .ph-faq-item summary { padding: 14px 8px; font-size: 15px; }
  .ph-page .ph-faq-item > p { padding: 0 10px 16px 34px; font-size: 14px; }
  .ph-more { padding: 40px 0; }
}
/* 360px 及以下：快捷入口卡只有 137px 宽，15px 字配 44px 图标时组名会拆成「收费与积 / 分」。
   组名不换行，字号 14、图标 36、间距 8，320 宽下 5 个字刚好一行放下（文字 73px，卡片 137px） */
@media (max-width: 360px) {
  .ph-quick-item { padding: 12px 10px; gap: 8px; }
  .ph-page .ph-quick-item .ph-gico { width: 36px; height: 36px; }
  .ph-quick-text { font-size: 14px; white-space: nowrap; }
}

/* ============ 动效（全站统一参数：悬停 .22s、进场 .6s、缓动 cubic-bezier(.2,.7,.2,1)）============
   卡片悬停上浮用独立的 translate 属性，不占用 transform：进场动效 [data-reveal] 用的是 transform，
   两者分开过渡，互不覆盖。只动 translate / scale / box-shadow / color / border-color，不引起布局偏移。
   快捷入口在首屏，只做悬停，不加 data-reveal；第一组问答在首屏也不加。 */
.ph-page {
  --ph-ease: cubic-bezier(.2, .7, .2, 1);
  --ph-hover-shadow: 0 16px 40px rgba(37, 99, 235, .12);
}
.ph-page .ph-quick-item,
.ph-page .ph-more-card {
  transition: translate .22s var(--ph-ease), box-shadow .22s var(--ph-ease), border-color .22s var(--ph-ease);
}
/* 带 data-reveal 的卡片：进场的 opacity / transform 与悬停的 translate / box-shadow 合在一条 transition 里 */
.js-motion .page-g.ph-page .ph-more-card[data-reveal].is-in {
  transition:
    opacity .6s var(--ph-ease) var(--reveal-delay, 0s),
    transform .6s var(--ph-ease) var(--reveal-delay, 0s),
    translate .22s var(--ph-ease),
    box-shadow .22s var(--ph-ease),
    border-color .22s var(--ph-ease);
}
.ph-page .ph-quick-item:hover,
.ph-page .ph-more-card:hover {
  translate: 0 -4px;
  box-shadow: var(--ph-hover-shadow);
}
.ph-page .ph-more-card:hover { border-color: rgba(59, 130, 246, .35); }
.ph-page .ph-quick-item .ph-gico,
.ph-page .ph-more-card .ph-gico { transition: scale .22s var(--ph-ease); }
.ph-page .ph-quick-item:hover .ph-gico,
.ph-page .ph-more-card:hover .ph-gico { scale: 1.06; }
.ph-page .ph-quick-arrow,
.ph-page .ph-more-arrow { transition: translate .22s var(--ph-ease); }
.ph-page .ph-quick-item:hover .ph-quick-arrow,
.ph-page .ph-more-card:hover .ph-more-arrow { translate: 3px 0; }
.ph-page .ph-toc a { transition: background .22s var(--ph-ease), color .22s var(--ph-ease); }
.ph-page .ph-faq-item summary { transition: color .22s var(--ph-ease); }
@media (prefers-reduced-motion: reduce) {
  .ph-page .ph-quick-item:hover,
  .ph-page .ph-more-card:hover,
  .ph-page .ph-quick-item:hover .ph-quick-arrow,
  .ph-page .ph-more-card:hover .ph-more-arrow { translate: none; }
  .ph-page .ph-quick-item:hover .ph-gico,
  .ph-page .ph-more-card:hover .ph-gico { scale: none; }
}