/* ===== 帮助中心页面专属样式 ===== */
.page-faq {
  --faq-gold-line: #C9A96E;
  --faq-grass-bg: #2D6A4F;
  --faq-grass-light: #3A7D5E;
  --faq-sky-dark: #1B3A4B;
  --faq-bg-card: #FFFFFF;
  --faq-bg-soft: #F4F1EA;
  --faq-radius: 0.5rem;
  --faq-clip-offset: 0.75rem;

  display: flex;
  flex-direction: column;
  gap: 0;
  background-color: var(--faq-bg-soft);
  font-family: var(--font-body, 'Lora', Georgia, serif);
  color: #1F2937;
  line-height: 1.6;
  padding-bottom: 3rem;
}

/* ---------- 顶部横幅 ---------- */
.faq-hero {
  position: relative;
  width: 100%;
  height: auto;
  min-height: 220px;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--faq-clip-offset)), 0 100%);
  margin-bottom: 0;
}
.faq-hero__image-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.faq-hero__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  max-width: 100%;
  height: auto;
}
.faq-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(135deg, rgba(15,26,28,0.72) 0%, rgba(27,58,75,0.60) 60%, rgba(45,106,79,0.40) 100%);
}
.faq-hero__content {
  position: relative;
  z-index: 2;
  padding: 2.25rem 1.25rem 2.75rem;
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/* 面包屑 */
.faq-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-heading, 'Montserrat', system-ui, sans-serif);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 1.25rem;
  color: rgba(255,255,255,0.85);
}
.faq-breadcrumb__link {
  color: var(--faq-gold-line, #C9A96E);
  text-decoration: none;
  transition: color 0.2s;
}
.faq-breadcrumb__link:hover {
  color: #ffffff;
}
.faq-breadcrumb__sep {
  color: rgba(255,255,255,0.5);
  font-size: 0.6rem;
}
.faq-breadcrumb__current {
  color: #ffffff;
  font-weight: 600;
}

/* 标题 */
.faq-hero__title {
  font-family: var(--font-heading, 'Montserrat', system-ui, sans-serif);
  font-size: clamp(1.75rem, 4.5vw, 3rem);
  font-weight: 900;
  color: #ffffff;
  margin: 0 0 0.5rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.faq-hero__subtitle {
  font-family: var(--font-body, 'Lora', Georgia, serif);
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  color: rgba(255,255,255,0.90);
  max-width: 560px;
  margin: 0;
  line-height: 1.5;
  font-weight: 400;
}

/* ---------- 搜索框 ---------- */
.faq-search-wrap {
  max-width: 720px;
  margin: -1.2rem auto 0;
  padding: 0 1.25rem;
  position: relative;
  z-index: 5;
  width: 100%;
  box-sizing: border-box;
}
.faq-search__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.faq-search__inner {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: var(--faq-radius, 0.5rem);
  box-shadow: 0 8px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  padding: 0 1rem;
  transition: box-shadow 0.25s;
  border: 2px solid transparent;
}
.faq-search__inner:focus-within {
  border-color: var(--faq-grass-bg, #2D6A4F);
  box-shadow: 0 8px 28px rgba(45,106,79,0.14);
}
.faq-search__icon {
  font-size: 1.1rem;
  margin-right: 0.6rem;
  opacity: 0.55;
  flex-shrink: 0;
}
.faq-search__input {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0.85rem 0;
  font-family: var(--font-body, 'Lora', Georgia, serif);
  font-size: 0.95rem;
  color: #1F2937;
  outline: none;
  min-width: 0;
}
.faq-search__input::placeholder {
  color: #9CA3AF;
  font-style: italic;
}

/* ---------- FAQ 列表 ---------- */
.faq-list {
  max-width: 720px;
  margin: 2rem auto 0;
  padding: 0 1.25rem;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* 单个问题卡片 */
.faq-item {
  background: var(--faq-bg-card, #FFFFFF);
  border-radius: var(--faq-radius, 0.5rem);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.5rem), calc(100% - 0.5rem) 100%, 0 100%);
  transition: box-shadow 0.25s, transform 0.2s;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.04);
}
.faq-item[open] {
  box-shadow: 0 6px 20px rgba(0,0,0,0.07);
}

/* 问题标题（summary） */
.faq-item__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1.25rem 0.9rem 1.25rem;
  background: var(--faq-grass-bg, #2D6A4F);
  color: #ffffff;
  font-family: var(--font-heading, 'Montserrat', system-ui, sans-serif);
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  font-weight: 700;
  cursor: pointer;
  list-style: none;
  transition: background 0.25s;
  user-select: none;
}
.faq-item__summary::-webkit-details-marker {
  display: none;
}
.faq-item__summary:hover {
  background: var(--faq-grass-light, #3A7D5E);
}
.faq-item[open] .faq-item__summary {
  background: var(--faq-grass-light, #3A7D5E);
  border-bottom: 3px solid var(--faq-gold-line, #C9A96E);
}

.faq-item__q {
  flex: 1;
  line-height: 1.3;
}
.faq-item__icon {
  flex-shrink: 0;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1;
  transition: transform 0.3s;
  color: rgba(255,255,255,0.85);
}
.faq-item[open] .faq-item__icon {
  transform: rotate(45deg);
}

/* 答案区域 */
.faq-item__answer {
  padding: 1.25rem 1.25rem 1.5rem;
  font-family: var(--font-body, 'Lora', Georgia, serif);
  font-size: 0.95rem;
  color: #374151;
  line-height: 1.7;
  background: #ffffff;
  border-top: none;
}
.faq-item__answer p {
  margin: 0 0 0.5rem;
}
.faq-item__answer p:last-child {
  margin-bottom: 0;
}

.faq-link {
  color: var(--faq-grass-bg, #2D6A4F);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(45,106,79,0.3);
  font-weight: 500;
  transition: text-decoration-color 0.2s, color 0.2s;
}
.faq-link:hover {
  color: var(--faq-sky-dark, #1B3A4B);
  text-decoration-color: currentColor;
}
.faq-link--gold {
  color: var(--faq-gold-line, #C9A96E);
  text-decoration-color: rgba(201,169,110,0.3);
}
.faq-link--gold:hover {
  color: #A8894E;
}

/* ---------- 联系支持 ---------- */
.faq-support {
  max-width: 960px;
  margin: 2.5rem auto 0;
  padding: 0 1.25rem;
  width: 100%;
  box-sizing: border-box;
}
.faq-support__inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background: #ffffff;
  border-radius: var(--faq-radius, 0.5rem);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--faq-clip-offset)), var(--faq-clip-offset) 100%, 0 calc(100% - var(--faq-clip-offset)));
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
  padding: 1.75rem 1.5rem 2rem;
  border: 1px solid rgba(201,169,110,0.15);
  border-top: 4px solid var(--faq-gold-line, #C9A96E);
}
.faq-support__text {
  flex: 1;
}
.faq-support__title {
  font-family: var(--font-heading, 'Montserrat', system-ui, sans-serif);
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--faq-sky-dark, #1B3A4B);
  margin: 0 0 0.4rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.faq-support__title::after {
  content: '';
  display: block;
  width: 3.2rem;
  height: 3px;
  background: var(--faq-gold-line, #C9A96E);
  margin-top: 0.5rem;
  border-radius: 2px;
}
.faq-support__desc {
  font-family: var(--font-body, 'Lora', Georgia, serif);
  font-size: 0.95rem;
  color: #4B5563;
  margin: 0.75rem 0 1.25rem;
  line-height: 1.6;
}
.faq-support__channels {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.faq-support__channel {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem 0.75rem;
  padding: 0.7rem 1rem;
  background: var(--faq-bg-soft, #F4F1EA);
  border-radius: 0.375rem;
  border-left: 3px solid var(--faq-grass-bg, #2D6A4F);
}
.faq-support__channel-label {
  font-family: var(--font-heading, 'Montserrat', system-ui, sans-serif);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--faq-sky-dark, #1B3A4B);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  min-width: 8rem;
}
.faq-support__channel-note {
  font-size: 0.8rem;
  color: #6B7280;
  font-style: italic;
  margin-left: auto;
}
.faq-support__disclaimer {
  font-size: 0.85rem;
  color: #6B7280;
  border-top: 1px solid #E5E7EB;
  padding-top: 0.9rem;
  margin-top: 0.25rem;
  line-height: 1.5;
}

.faq-support__image-wrap {
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  border-radius: 0.375rem;
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 0.6rem), calc(100% - 0.6rem) 100%, 0 100%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.faq-support__image {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  aspect-ratio: 2 / 1;
}

/* ---------- 响应式 ---------- */
/* 移动端优先：默认已适配窄屏 */
@media (min-width: 640px) {
  .faq-hero__content {
    padding: 3rem 2rem 3.5rem;
  }
  .faq-hero {
    min-height: 260px;
  }
  .faq-hero__title {
    font-size: 2.6rem;
  }
  .faq-item__summary {
    padding: 1rem 1.5rem;
    font-size: 1.05rem;
  }
  .faq-item__answer {
    padding: 1.5rem 1.5rem 1.75rem;
    font-size: 0.975rem;
  }
  .faq-support__inner {
    flex-direction: row;
    align-items: flex-start;
    padding: 2rem 2rem 2.25rem;
  }
  .faq-support__image-wrap {
    width: 300px;
    min-width: 240px;
    margin-top: 0.25rem;
  }
  .faq-support__image {
    aspect-ratio: auto;
    height: auto;
  }
  .faq-support__channel {
    flex-wrap: nowrap;
  }
  .faq-support__channel-label {
    min-width: 10rem;
  }
}

@media (min-width: 1024px) {
  .faq-hero__content {
    padding: 4rem 3rem 4.5rem;
  }
  .faq-hero {
    min-height: 300px;
  }
  .faq-hero__title {
    font-size: 3rem;
  }
  .faq-list {
    margin-top: 2.5rem;
    gap: 0.875rem;
  }
  .faq-support {
    margin-top: 3.5rem;
  }
  .faq-support__inner {
    padding: 2.5rem 2.5rem 2.75rem;
  }
  .faq-support__image-wrap {
    width: 360px;
  }
  .faq-search-wrap {
    margin-top: -1.5rem;
  }
}

/* 确保图片响应式不溢出 */
.page-faq img {
  max-width: 100%;
  height: auto;
}

/* 切角面板通用装饰 */
.page-faq .image-frame {
  display: block;
  overflow: hidden;
}
</<|<PAGE_CSS>>>
请注意，最终的 `</<|<PAGE_CSS>>>` 标记应为 `` 的闭合标记。实际输出时需去掉多余的 `<` 符号，保持标记格式为 `` 与 `` 闭合。根据您的协议，输出应为 `` 开头并以 `` 结尾，但此处因格式转义显示异常。请直接使用标准三尖括号闭合。
