/* ===== 易倍体育 帮助指南 页面专属样式 ===== */
.page-faq {
  --faq-hero-bg: linear-gradient(135deg, #0B1A3A 0%, #1A2D5A 100%);
  --faq-index-bg: linear-gradient(160deg, #0B1A3A 0%, #15274D 100%);
  --faq-index-active: #FF6B35;
  --faq-index-hover: rgba(255, 107, 53, 0.12);
  --faq-card-bg: #FCF9F4;
  --faq-card-border: #E8E2D6;
  --faq-accent-line: #FF6B35;
  --faq-step-marker: #FF6B35;
  --faq-toggle-color: #39FF14;
  --faq-breadcrumb-color: rgba(255, 255, 255, 0.65);
  display: block;
}

/* ---- 顶部 Hero ---- */
.page-faq .faq-hero {
  background: var(--faq-hero-bg);
  padding: 2rem 0 2.8rem;
  position: relative;
  overflow: hidden;
}

.page-faq .faq-hero::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 107, 53, 0.04) 0px,
    rgba(255, 107, 53, 0.04) 8px,
    transparent 8px,
    transparent 16px
  );
  pointer-events: none;
}

.page-faq .faq-hero__inner {
  max-width: var(--content-max, 1200px);
  margin: 0 auto;
  padding: 0 var(--content-pad, 24px);
  position: relative;
  z-index: 1;
}

.page-faq .faq-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  color: var(--faq-breadcrumb-color);
  margin-bottom: 1.4rem;
}

.page-faq .faq-breadcrumb a {
  color: var(--faq-breadcrumb-color);
  text-decoration: none;
  transition: color var(--transition-fast, 0.2s);
}

.page-faq .faq-breadcrumb a:hover {
  color: var(--accent-orange, #FF6B35);
}

.page-faq .faq-breadcrumb__sep {
  color: rgba(255, 255, 255, 0.35);
}

.page-faq .faq-hero__main {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.page-faq .faq-hero__icon {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 12px rgba(57, 255, 20, 0.18));
}

.page-faq .faq-hero__title {
  font-family: var(--font-heading, 'Impact', sans-serif);
  font-size: 2.2rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0;
  line-height: 1.1;
}

.page-faq .faq-hero__desc {
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.85);
  margin: 0.2rem 0 0 0;
  width: 100%;
  max-width: 520px;
  line-height: 1.5;
}

/* ---- 主体布局 ---- */
.page-faq .faq-body {
  background: var(--warm-paper, #F5F0E8);
  padding: 2rem 0 3rem;
}

.page-faq .faq-body__inner {
  max-width: var(--content-max, 1200px);
  margin: 0 auto;
  padding: 0 var(--content-pad, 24px);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* ---- 左侧索引（移动端优先：水平紧凑排列） ---- */
.page-faq .faq-index {
  background: var(--faq-index-bg);
  border-radius: 0;
  clip-path: polygon(
    0 0,
    calc(100% - 12px) 0,
    100% 12px,
    100% calc(100% - 12px),
    calc(100% - 12px) 100%,
    0 100%
  );
  padding: 1.2rem 1.4rem;
  color: #FFFFFF;
  flex-shrink: 0;
  box-shadow: 0 8px 28px rgba(11, 26, 58, 0.25);
  position: relative;
}

.page-faq .faq-index::before {
  content: '';
  position: absolute;
  top: 12px;
  left: 0;
  width: 3px;
  height: calc(100% - 24px);
  background: var(--accent-orange, #FF6B35);
  opacity: 0.5;
}

.page-faq .faq-index__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.8rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.page-faq .faq-index__title {
  font-family: var(--font-heading, 'Impact', sans-serif);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0;
  color: #FFFFFF;
}

.page-faq .faq-index__count {
  font-family: var(--font-number, 'Courier New', monospace);
  font-size: 0.75rem;
  color: var(--accent-orange, #FF6B35);
  background: rgba(255, 107, 53, 0.15);
  padding: 0.15rem 0.6rem;
  border-radius: 10px;
}

.page-faq .faq-index__list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.page-faq .faq-index__link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.6rem 0.55rem 0.4rem;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9rem;
  border-left: 2px solid transparent;
  transition: all var(--transition-fast, 0.2s);
  border-radius: 0 4px 4px 0;
}

.page-faq .faq-index__link:hover {
  background: var(--faq-index-hover);
  color: #FFFFFF;
  border-left-color: var(--faq-index-active);
}

.page-faq .faq-index__link:focus-visible {
  outline: 2px solid var(--accent-green, #39FF14);
  outline-offset: 2px;
}

/* :target 高亮 */
.page-faq .faq-index__link[href*="faq"]:target,
.page-faq .faq-index__link:focus-within {
  color: #FFFFFF;
  border-left-color: var(--faq-index-active);
  background: var(--faq-index-hover);
}

/* 使用 js 不可用时仍然纯 css 高亮：通过 :has 配合页面锚点 */
/* 由于 :has 支持有限，改用更稳妥的方式：每个答案区的 :target 会触发，但索引链接高亮需要配合 */
/* 我们使用 .faq-index__link 的 href 与页面 hash 匹配，但纯 CSS 无法实现动态匹配，故降级为 hover 和 focus 高亮 */
/* 实际交互通过点击跳转后浏览器的 :target 伪类作用于答案区，索引区则通过 JS 增强（可选），纯静态下保持 hover 反馈 */

.page-faq .faq-index__num {
  font-family: var(--font-number, 'Courier New', monospace);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--accent-orange, #FF6B35);
  min-width: 1.8rem;
  opacity: 0.85;
}

.page-faq .faq-index__text {
  flex: 1;
  line-height: 1.3;
}

.page-faq .faq-index__footer {
  margin-top: 1rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  justify-content: flex-end;
}

.page-faq .faq-index__status {
  font-size: 0.7rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  color: var(--accent-green, #39FF14);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  letter-spacing: 0.05em;
  opacity: 0.8;
}

/* ---- 右侧答案区 ---- */
.page-faq .faq-answers {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

/* ---- 单个答案卡片 ---- */
.page-faq .faq-item {
  background: var(--faq-card-bg);
  border: 1px solid var(--faq-card-border);
  border-radius: 0;
  clip-path: polygon(
    0 0,
    calc(100% - 8px) 0,
    100% 8px,
    100% calc(100% - 8px),
    calc(100% - 8px) 100%,
    0 100%
  );
  padding: 1.4rem 1.4rem 1.6rem;
  box-shadow: var(--shadow-card, 0 4px 20px rgba(11,26,58,0.08));
  transition: box-shadow var(--transition-fast, 0.2s), transform var(--transition-fast, 0.2s);
  scroll-margin-top: calc(var(--header-h, 62px) + 1rem);
  position: relative;
}

.page-faq .faq-item:target {
  box-shadow: 0 0 0 2px var(--accent-orange, #FF6B35), var(--shadow-hover, 0 12px 40px rgba(11,26,58,0.15));
  transform: translateY(-2px);
  border-color: var(--accent-orange, #FF6B35);
}

.page-faq .faq-item:target .faq-item__num {
  background: var(--accent-orange, #FF6B35);
  color: #FFFFFF;
}

.page-faq .faq-item__header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
}

.page-faq .faq-item__num {
  font-family: var(--font-number, 'Courier New', monospace);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-dark, #0B1A3A);
  background: var(--warm-paper-light, #FCF9F4);
  border: 1px solid var(--faq-card-border);
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-fast, 0.2s);
  clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px));
}

.page-faq .faq-item__title {
  font-family: var(--font-heading, 'Impact', sans-serif);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-dark, #0B1A3A);
  margin: 0;
  line-height: 1.3;
}

.page-faq .faq-item__body {
  padding-left: 0;
  font-family: var(--font-body, 'Inter', sans-serif);
  color: var(--text-dark, #0B1A3A);
}

.page-faq .faq-item__summary {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #2A3A5A;
  margin: 0 0 0.8rem 0;
}

/* ---- 折叠详情 ---- */
.page-faq .faq-item__details {
  margin: 0.6rem 0 0.8rem;
  border: 1px dashed var(--divider-color, rgba(255,107,53,0.3));
  border-radius: 4px;
  padding: 0.2rem 0.8rem;
  background: rgba(255, 255, 255, 0.6);
}

.page-faq .faq-item__details-summary {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary-dark, #0B1A3A);
  cursor: pointer;
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  user-select: none;
  list-style: none;
}

.page-faq .faq-item__details-summary::-webkit-details-marker {
  display: none;
}

.page-faq .faq-item__details-summary:hover {
  color: var(--accent-orange, #FF6B35);
}

.page-faq .faq-item__toggle-icon {
  display: inline-block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--faq-toggle-color, #39FF14);
  transition: transform var(--transition-fast, 0.2s);
  line-height: 1;
}

.page-faq .faq-item__details[open] .faq-item__toggle-icon {
  transform: rotate(45deg);
  color: var(--accent-orange, #FF6B35);
}

.page-faq .faq-item__details-content {
  padding: 0.6rem 0 0.8rem 0.2rem;
  border-top: 1px solid rgba(11, 26, 58, 0.06);
  margin-top: 0.2rem;
}

.page-faq .faq-item__steps {
  margin: 0;
  padding: 0 0 0 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: #1A2A4A;
}

.page-faq .faq-item__steps--unordered {
  padding-left: 1.2rem;
  list-style-type: disc;
}

.page-faq .faq-item__steps li {
  padding-left: 0.2rem;
}

.page-faq .faq-item__steps li::marker {
  color: var(--faq-step-marker, #FF6B35);
  font-weight: 700;
}

.page-faq .faq-item__note {
  font-size: 0.8rem;
  color: var(--muted-text, #8A8FA0);
  margin: 0.6rem 0 0 0;
  padding: 0.4rem 0.6rem;
  background: rgba(57, 255, 20, 0.06);
  border-left: 2px solid var(--accent-green, #39FF14);
  font-style: italic;
}

/* ---- 步骤图 ---- */
.page-faq .faq-item__img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1rem 0 0.2rem;
  border-radius: 4px;
  border: 1px solid var(--faq-card-border);
  object-fit: cover;
  aspect-ratio: 3 / 2;
  background: #F0ECE2;
}

/* ---- 底部脚注 ---- */
.page-faq .faq-answers__footnote {
  padding: 1rem 1.2rem;
  background: rgba(11, 26, 58, 0.04);
  border-left: 3px solid var(--accent-orange, #FF6B35);
  font-family: var(--font-body, 'Inter', sans-serif);
  font-size: 0.9rem;
  color: var(--text-dark, #0B1A3A);
  margin-top: 0.2rem;
}

.page-faq .faq-answers__footnote a {
  color: var(--accent-orange, #FF6B35);
  text-decoration: none;
  font-weight: 600;
  position: relative;
}

.page-faq .faq-answers__footnote a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width var(--transition-fast, 0.2s);
}

.page-faq .faq-answers__footnote a:hover::after {
  width: 100%;
}

/* ===== 响应式：桌面端（≥768px） ===== */
@media (min-width: 768px) {
  .page-faq .faq-hero {
    padding: 2.4rem 0 3.2rem;
  }

  .page-faq .faq-hero__title {
    font-size: 2.8rem;
  }

  .page-faq .faq-hero__icon {
    width: 80px;
    height: 80px;
  }

  .page-faq .faq-hero__main {
    gap: 1.6rem;
  }

  .page-faq .faq-hero__desc {
    font-size: 1.05rem;
  }

  .page-faq .faq-body {
    padding: 2.8rem 0 4rem;
  }

  .page-faq .faq-body__inner {
    flex-direction: row;
    align-items: flex-start;
    gap: 2.5rem;
  }

  /* 左侧索引：固定宽度竖向面板 */
  .page-faq .faq-index {
    width: 280px;
    position: sticky;
    top: calc(var(--header-h, 62px) + 1.2rem);
    padding: 1.4rem 1.2rem;
    flex-shrink: 0;
  }

  .page-faq .faq-index__title {
    font-size: 1.2rem;
  }

  .page-faq .faq-index__link {
    font-size: 0.92rem;
    padding: 0.6rem 0.7rem;
  }

  .page-faq .faq-answers {
    flex: 1;
    min-width: 0;
    gap: 2rem;
  }

  .page-faq .faq-item {
    padding: 1.6rem 1.8rem 1.8rem;
  }

  .page-faq .faq-item__title {
    font-size: 1.35rem;
  }

  .page-faq .faq-item__img {
    max-width: 300px;
  }

  .page-faq .faq-answers__footnote {
    padding: 1.2rem 1.6rem;
    font-size: 0.95rem;
  }
}

/* ===== 大桌面端（≥1024px） ===== */
@media (min-width: 1024px) {
  .page-faq .faq-hero__title {
    font-size: 3.2rem;
  }

  .page-faq .faq-hero__desc {
    font-size: 1.1rem;
    max-width: 600px;
  }

  .page-faq .faq-index {
    width: 310px;
    padding: 1.6rem 1.4rem;
  }

  .page-faq .faq-item {
    padding: 1.8rem 2rem 2rem;
  }

  .page-faq .faq-item__title {
    font-size: 1.45rem;
  }
}

/* ===== 窄屏安全适配（≤400px） ===== */
@media (max-width: 400px) {
  .page-faq .faq-hero__title {
    font-size: 1.6rem;
  }

  .page-faq .faq-hero__icon {
    width: 48px;
    height: 48px;
  }

  .page-faq .faq-index {
    padding: 0.8rem 0.8rem;
  }

  .page-faq .faq-index__link {
    font-size: 0.82rem;
    padding: 0.4rem 0.4rem;
  }

  .page-faq .faq-item {
    padding: 1rem 0.8rem 1.2rem;
  }

  .page-faq .faq-item__title {
    font-size: 1rem;
  }

  .page-faq .faq-item__details {
    padding: 0.2rem 0.4rem;
  }
}
<<<PAGE_JS>>>
(function() {
  'use strict';

  // 平滑滚动：点击问题索引链接时，平滑滚动到对应答案区
  var indexLinks = document.querySelectorAll('.page-faq .faq-index__link');
  indexLinks.forEach(function(link) {
    link.addEventListener('click', function(e) {
      var href = this.getAttribute('href');
      if (href && href.startsWith('#')) {
        var target = document.getElementById(href.substring(1));
        if (target) {
          e.preventDefault();
          var headerH = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-h')) || 62;
          var extraOffset = 20;
          var rect = target.getBoundingClientRect();
          var scrollTop = window.pageYOffset + rect.top - headerH - extraOffset;
          window.scrollTo({ top: scrollTop, behavior: 'smooth' });
          // 更新 URL hash 但不触发跳转
          history.pushState(null, '', href);
          // 移除其他项的 active 样式，手动高亮当前项
          indexLinks.forEach(function(item) { item.classList.remove('faq-index__link--active'); });
          this.classList.add('faq-index__link--active');
        }
      }
    });
  });

  // 页面加载时如果有 hash，高亮对应索引项
  function highlightFromHash() {
    var hash = window.location.hash;
    if (hash) {
      indexLinks.forEach(function(link) {
        link.classList.remove('faq-index__link--active');
        if (link.getAttribute('href') === hash) {
          link.classList.add('faq-index__link--active');
          // 滚动到对应位置（延迟保证布局稳定）
          setTimeout(function() {
            var target = document.getElementById(hash.substring(1));
            if (target) {
              var headerH = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-h')) || 62;
              var extraOffset = 20;
              var rect = target.getBoundingClientRect();
              var scrollTop = window.pageYOffset + rect.top - headerH - extraOffset;
              window.scrollTo({ top: scrollTop, behavior: 'smooth' });
            }
          }, 100);
        }
      });
    } else {
      // 默认高亮第一个
      if (indexLinks.length) {
        indexLinks[0].classList.add('faq-index__link--active');
      }
    }
  }

  // 监听 hash 变化
  window.addEventListener('hashchange', function() {
    indexLinks.forEach(function(link) { link.classList.remove('faq-index__link--active'); });
    var hash = window.location.hash;
    if (hash) {
      indexLinks.forEach(function(link) {
        if (link.getAttribute('href') === hash) {
          link.classList.add('faq-index__link--active');
        }
      });
    }
  });

  // 动态年份填充
  var yearEls = document.querySelectorAll('[data-year]');
  if (yearEls.length) {
    var currentYear = new Date().getFullYear();
    yearEls.forEach(function(el) { el.textContent = currentYear; });
  }

  // 滚动进度条（如果存在）
  var progressBar = document.querySelector('[data-scroll-progress]');
  if (progressBar) {
    window.addEventListener('scroll', function() {
      var scrollTop = window.pageYOffset;
      var docHeight = document.documentElement.scrollHeight - window.innerHeight;
      var progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0;
      progressBar.style.width = progress + '%';
    });
  }

  // 初始化高亮
  highlightFromHash();

  // 点击答案区时，更新索引高亮（交叉观察作为增强）
  if (window.IntersectionObserver) {
    var faqItems = document.querySelectorAll('.page-faq .faq-item');
    var observer = new IntersectionObserver(function(entries) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          var id = entry.target.getAttribute('id');
          if (id) {
            indexLinks.forEach(function(link) {
              link.classList.remove('faq-index__link--active');
              if (link.getAttribute('href') === '#' + id) {
                link.classList.add('faq-index__link--active');
              }
            });
          }
        }
      });
    }, { rootMargin: '-80px 0px -60% 0px', threshold: 0.1 });
    faqItems.forEach(function(item) { observer.observe(item); });
  }

})();
<<<PAGE_CSS_EXTRA>>>
/* 索引链接 active 状态（JS 驱动） */
.page-faq .faq-index__link--active {
  color: #FFFFFF !important;
  border-left-color: var(--faq-index-active, #FF6B35) !important;
  background: var(--faq-index-hover, rgba(255,107,53,0.12)) !important;
}

.page-faq .faq-index__link--active .faq-index__num {
  color: var(--accent-orange, #FF6B35);
  opacity: 1;
}

/* 确保 details 在无 JS 时亦可正常展开/收起 */
/* 无额外覆盖，保留浏览器默认行为 */