/* ============================================================
   使用帮助主题层 —— 延续程序官网（program-site.css）设计系统
   作用域：body.help-ps-theme；支持 html[data-theme="light"|"dark"]
   在 styles.css / dark-system.css 之后加载，
   以更高特异性覆盖完成换肤，不改动帮助页内容与结构
   ============================================================ */

/* ---------- 令牌桥接：站点基础令牌映射为 ps 设计令牌 ---------- */
body.help-ps-theme {
  --ink: var(--ps-text);
  --muted: var(--ps-text-secondary);
  --line: var(--ps-line);
  --surface: var(--ps-surface);
  --soft: var(--ps-bg-soft);
  --shadow: var(--ps-card-shadow);
  --purple-dark: var(--product-accent, #8b73ff);
  margin: 0;
  color: var(--ps-text);
  background-color: var(--ps-bg);
  background-image: none;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "PingFang SC", "Helvetica Neue", "Microsoft YaHei", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.35s var(--ps-ease), color 0.35s var(--ps-ease);
}

html[data-theme="dark"] body.help-ps-theme { --surface: #0b1836; }

body.help-ps-theme img { max-width: 100%; }

/* ---------- 顶部导航：悬浮胶囊毛玻璃 ---------- */
body.help-ps-theme .site-header {
  height: var(--ps-header-height);
  grid-template-columns: minmax(140px, 1fr) auto minmax(140px, 1fr);
  padding: 0 12px 0 20px;
  border: 1px solid var(--ps-nav-capsule-border);
  border-radius: 999px;
  color: var(--ps-text);
  background: var(--ps-nav-capsule-bg);
  box-shadow: var(--ps-nav-capsule-shadow);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  transition: background-color 0.35s var(--ps-ease), border-color 0.35s var(--ps-ease), box-shadow 0.35s var(--ps-ease);
}
body.help-ps-theme .site-header::before,
body.help-ps-theme .site-header::after { content: none; }
body.help-ps-theme .site-header.scrolled {
  border-color: var(--ps-nav-capsule-border);
  background: var(--ps-header-bg);
  box-shadow: var(--ps-nav-capsule-shadow);
}

body.help-ps-theme .brand { color: var(--ps-text); font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
body.help-ps-theme .brand-mark { width: 30px; height: 30px; border-radius: 9px; }

body.help-ps-theme .main-nav {
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.help-ps-theme .main-nav a {
  min-height: 0;
  padding: 7px 15px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  color: var(--ps-text-secondary);
  font-size: 13px;
  font-weight: 500;
  isolation: auto;
  transition: color 0.2s var(--ps-ease), background-color 0.2s var(--ps-ease);
}
body.help-ps-theme .main-nav a::before { content: none; }
body.help-ps-theme .main-nav a:not([aria-current="page"]):hover,
body.help-ps-theme .main-nav a:not([aria-current="page"]):focus-visible {
  color: var(--ps-text);
  background: var(--ps-pill-bg);
  box-shadow: none;
  transform: none;
  outline: none;
}
body.help-ps-theme .main-nav a[aria-current="page"] {
  color: var(--ps-text);
  border: 0;
  background: var(--ps-pill-bg-hover);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transform: none;
}
body.help-ps-theme .main-nav a[aria-current="page"]::after { content: none; }

body.help-ps-theme .help-header-actions { justify-self: end; display: flex; align-items: center; gap: 10px; }

body.help-ps-theme .header-download {
  min-height: 0;
  padding: 8px 18px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: var(--product-accent, #8b73ff);
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  transition: filter 0.2s var(--ps-ease);
}
body.help-ps-theme .header-download:hover,
body.help-ps-theme .header-download:focus-visible { filter: brightness(1.08); outline: none; }
body.help-ps-theme .header-download span { color: inherit; }

/* ---------- Hero：延续 ps-hero 光晕背景 ---------- */
body.help-ps-theme .support-detail-help {
  color: var(--ps-text);
  background:
    radial-gradient(ellipse 72% 48% at 50% -6%, var(--ps-hero-glow), transparent),
    var(--ps-bg);
}
body.help-ps-theme .support-detail-hero::before,
body.help-ps-theme .support-detail-help::after { content: none; }
body.help-ps-theme .help-hero-visual::before,
body.help-ps-theme .help-hero-visual::after { content: none; }
body.help-ps-theme .support-detail-help h1 { color: var(--ps-text); }
body.help-ps-theme .support-detail-help h1 em {
  color: var(--product-accent, #8b73ff);
  background: none;
  animation: none;
}

/* ---------- 卡片与面板：surface + 细边 + 柔和阴影 ---------- */
body.help-ps-theme .help-card,
body.help-ps-theme .help-onboarding-panel,
body.help-ps-theme .support-next {
  color: var(--ps-text);
  border: 1px solid var(--ps-line);
  background: var(--surface);
  box-shadow: var(--ps-card-shadow);
}
body.help-ps-theme .help-onboarding-panel { border-radius: var(--ps-radius-lg); }
body.help-ps-theme .help-card { border-radius: var(--ps-radius-md); }
body.help-ps-theme .support-next { border-radius: var(--ps-radius-md); }
body.help-ps-theme .help-onboarding-list li { border-color: var(--ps-line); background: transparent; }
body.help-ps-theme .help-card summary small,
body.help-ps-theme .support-next span { color: var(--ps-text-secondary); }
body.help-ps-theme .help-card summary i { border-color: var(--ps-line); }
body.help-ps-theme .help-card > p b { color: var(--ps-text); }

/* ---------- 快速导航：surface 化，悬停保留 accent 实底 ---------- */
body.help-ps-theme .help-jump-nav a {
  color: var(--ps-text);
  border: 1px solid var(--ps-line);
  border-radius: var(--ps-radius-sm);
  background: var(--ps-surface);
  box-shadow: var(--ps-card-shadow);
}
body.help-ps-theme .help-jump-copy small { color: var(--ps-text-secondary); }
@media (hover: hover) {
  body.help-ps-theme .help-jump-nav a:hover {
    color: #fff;
    border-color: var(--help-jump-accent);
    background: var(--help-jump-accent);
    box-shadow: 0 18px 38px color-mix(in srgb, var(--help-jump-accent) 23%, transparent);
    transform: translateY(-4px);
  }
  body.help-ps-theme .help-jump-nav a:hover .help-jump-copy small { color: rgba(255, 255, 255, 0.76); }
}
body.help-ps-theme .help-jump-nav a:focus-visible {
  color: #fff;
  border-color: var(--help-jump-accent);
  background: var(--help-jump-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--help-jump-accent) 20%, transparent);
}

/* ---------- 五步流程文字与分隔线 ---------- */
body.help-ps-theme .help-workflow { border-top-color: var(--ps-line); }
body.help-ps-theme .help-workflow > li { border-bottom-color: var(--ps-line); }
body.help-ps-theme .help-step-copy > strong { color: var(--ps-text); }
body.help-ps-theme .help-step-copy > p,
body.help-ps-theme .help-step-copy li,
body.help-ps-theme .help-workflow > li > em { color: var(--ps-text-secondary); }

/* ---------- 学习中心区背景跟随主题 ---------- */
body.help-ps-theme .help-learning-section { background: var(--ps-bg-soft); }

/* ---------- 页脚 ---------- */
body.help-ps-theme footer {
  color: var(--ps-text-secondary);
  border-top: 1px solid var(--ps-line);
  background: var(--ps-bg);
}
body.help-ps-theme .footer-brand strong { color: var(--ps-text); }
body.help-ps-theme footer a:hover { color: var(--ps-text); }

/* ---------- 下载对话框：跟随主题 ---------- */
html[data-theme="light"] body.help-ps-theme .download-dialog {
  border-color: var(--ps-line-strong);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.24);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
}
html[data-theme="light"] body.help-ps-theme .download-dialog::backdrop { background: rgba(0, 0, 0, 0.32); backdrop-filter: blur(8px); }
html[data-theme="light"] body.help-ps-theme .download-dialog .dialog-shell {
  color: var(--ps-text);
  background:
    radial-gradient(circle at 86% 8%, color-mix(in srgb, var(--product-accent, #8b73ff) 9%, transparent), transparent 31%),
    linear-gradient(145deg, #ffffff, #f5f5f7);
}
html[data-theme="light"] body.help-ps-theme .download-dialog .dialog-close { color: var(--ps-text); border-color: var(--ps-line); background: var(--ps-pill-bg); box-shadow: none; }
html[data-theme="light"] body.help-ps-theme .download-dialog .dialog-close:hover { color: var(--ps-text); border-color: var(--ps-line-strong); background: var(--ps-pill-bg-hover); }
html[data-theme="light"] body.help-ps-theme .download-dialog .dialog-heading span { color: var(--product-accent, #8b73ff); }
html[data-theme="light"] body.help-ps-theme .download-dialog .dialog-heading h2 { color: var(--ps-text); }
html[data-theme="light"] body.help-ps-theme .download-dialog .dialog-heading p,
html[data-theme="light"] body.help-ps-theme .download-dialog .dialog-note { color: var(--ps-text-secondary); }
html[data-theme="light"] body.help-ps-theme .download-dialog .platform-card {
  border-color: var(--ps-line);
  color: var(--ps-text);
  background: var(--ps-surface);
  box-shadow: var(--ps-card-shadow);
}
html[data-theme="light"] body.help-ps-theme .download-dialog .platform-card.coming-soon { background: var(--ps-bg-soft); }
html[data-theme="light"] body.help-ps-theme .download-dialog .platform-symbol { color: var(--ps-text); border-color: var(--ps-line); background: var(--ps-pill-bg); }
html[data-theme="light"] body.help-ps-theme .download-dialog .platform-heading h3 { color: var(--ps-text); }
html[data-theme="light"] body.help-ps-theme .download-dialog .platform-heading p { color: var(--ps-text-secondary); }
html[data-theme="light"] body.help-ps-theme .download-dialog .platform-heading b {
  color: var(--product-accent, #8b73ff);
  border-color: color-mix(in srgb, var(--product-accent, #8b73ff) 28%, transparent);
  background: color-mix(in srgb, var(--product-accent, #8b73ff) 9%, transparent);
}
html[data-theme="light"] body.help-ps-theme .download-dialog .package-row { border-color: var(--ps-line); background: var(--ps-bg-soft); box-shadow: none; }
html[data-theme="light"] body.help-ps-theme .download-dialog .package-row strong { color: var(--ps-text); }
html[data-theme="light"] body.help-ps-theme .download-dialog .package-row div > span { color: var(--ps-text-secondary); }
html[data-theme="light"] body.help-ps-theme .download-dialog .package-release-inline {
  border-color: var(--ps-line);
  color: var(--ps-text-secondary);
  background: var(--ps-pill-bg);
  box-shadow: none;
}
html[data-theme="light"] body.help-ps-theme .download-dialog .package-release-inline b { color: var(--product-accent, #8b73ff); }
html[data-theme="light"] body.help-ps-theme .download-dialog .package-release-inline small { color: var(--ps-text-secondary); }
html[data-theme="light"] body.help-ps-theme .download-dialog .package-action {
  color: #fff;
  border: 0;
  background: var(--product-accent, #8b73ff);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--product-accent, #8b73ff) 32%, transparent);
}
html[data-theme="light"] body.help-ps-theme .download-dialog .package-action:hover { background: var(--product-accent, #8b73ff); filter: brightness(1.08); }
html[data-theme="light"] body.help-ps-theme .download-dialog .package-action small { color: var(--product-accent, #8b73ff); background: #fff; }

html[data-theme="dark"] body.help-ps-theme .download-dialog {
  border-color: var(--ps-line);
  background: rgba(7, 14, 36, 0.82);
  box-shadow: 0 52px 150px rgba(0, 2, 12, 0.6);
}
html[data-theme="dark"] body.help-ps-theme .download-dialog::backdrop { background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(10px); }
html[data-theme="dark"] body.help-ps-theme .download-dialog .dialog-shell {
  color: var(--ps-text);
  background:
    radial-gradient(circle at 86% 8%, color-mix(in srgb, var(--product-accent, #8b73ff) 12%, transparent), transparent 31%),
    linear-gradient(145deg, #0b1836, #071230);
}
html[data-theme="dark"] body.help-ps-theme .download-dialog .platform-card { border-color: var(--ps-line); background: linear-gradient(145deg, #0d1c40, #0a1633); }
html[data-theme="dark"] body.help-ps-theme .download-dialog .package-row { border-color: var(--ps-line); background: #071230; }
html[data-theme="dark"] body.help-ps-theme .download-dialog .package-action {
  border: 0;
  background: var(--product-accent, #8b73ff);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--product-accent, #8b73ff) 28%, transparent);
}
html[data-theme="dark"] body.help-ps-theme .download-dialog .package-action small { color: var(--product-accent, #8b73ff); background: #fff; }

/* ---------- 响应式 ---------- */
@media (max-width: 1100px) {
  body.help-ps-theme .main-nav a { padding: 7px 11px; }
}

@media (max-width: 960px) {
  body.help-ps-theme .site-header { width: min(calc(100% - 24px), 1320px); }
  body.help-ps-theme .main-nav a:not([aria-current="page"]) { display: none; }
}

@media (max-width: 720px) {
  body.help-ps-theme .site-header { top: 10px; height: 56px; border-radius: 22px; }
  body.help-ps-theme .main-nav { display: none; }
  body.help-ps-theme .main-nav.open {
    display: grid;
    top: 76px;
    border: 1px solid var(--ps-nav-capsule-border);
    border-radius: var(--ps-radius-md);
    background: var(--ps-header-bg);
    box-shadow: var(--ps-nav-capsule-shadow);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
  }
  body.help-ps-theme .main-nav.open a { display: flex; color: var(--ps-text-secondary); }
  body.help-ps-theme .main-nav.open a[aria-current="page"] { color: var(--ps-text); }
  body.help-ps-theme .nav-toggle {
    justify-self: end;
    width: 40px;
    height: 40px;
    padding: 11px;
    display: grid;
    align-content: center;
    gap: 4px;
    border: 1px solid var(--ps-line);
    border-radius: 12px;
    background: var(--ps-pill-bg);
  }
  body.help-ps-theme .nav-toggle span:not(.sr-only) { display: block; width: 100%; height: 2px; border-radius: 2px; background: var(--ps-text); }
  body.help-ps-theme .help-header-actions .header-download { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  body.help-ps-theme,
  body.help-ps-theme .site-header,
  body.help-ps-theme .main-nav a,
  body.help-ps-theme .header-download { transition: none; }
}