/* ===== 帮助中心 · 服务路径页 ===== */

.page-help {
  --help-signal: var(--color-contrast-accent);
  --help-ring: color-mix(in srgb, var(--color-accent) 22%, transparent);
}

/* ---------- 首屏 ---------- */

.page-help .help-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: calc(var(--space-8) * 1.75) 0 var(--space-8);
  background-color: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
}

.page-help .help-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  opacity: 0.55;
}

.page-help .help-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  background: var(--overlay-scrim);
  pointer-events: none;
}

.page-help .help-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.page-help .help-hero .breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--color-contrast-ink) 62%, transparent);
}

.page-help .help-hero .breadcrumb-list li + li::before {
  content: "/";
  display: inline-block;
  margin: 0 var(--space-2) 0 var(--space-1);
  opacity: 0.45;
}

.page-help .help-hero .breadcrumb-list a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.page-help .help-hero .breadcrumb-list a:hover {
  color: var(--color-contrast-ink);
  border-bottom-color: var(--help-signal);
}

.page-help .help-hero .breadcrumb-current {
  color: var(--color-contrast-ink);
}

.page-help .help-hero__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: var(--measure);
}

.page-help .help-hero__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.16em;
  color: var(--help-signal);
}

.page-help .help-hero__lead {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  color: color-mix(in srgb, var(--color-contrast-ink) 84%, transparent);
}

.page-help .help-hero__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.page-help .help-hero__facts > li {
  padding-left: var(--space-3);
  border-left: 2px solid color-mix(in srgb, var(--help-signal) 55%, transparent);
}

.page-help .help-fact__num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-figure);
  font-weight: var(--weight-heading);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--color-contrast-ink);
}

.page-help .help-fact__label {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-contrast-ink) 70%, transparent);
}

/* 技能树式路径节点 */

.page-help .help-path {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.page-help .help-path__node {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "idx name"
    "meta meta";
  gap: var(--space-1) var(--space-2);
  align-items: baseline;
  padding: var(--space-3);
  border: var(--border-thin) solid var(--color-contrast-line);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-contrast-ink) 6%, transparent);
  transition: transform 0.28s ease, background-color 0.28s ease,
    border-color 0.28s ease, box-shadow 0.28s ease;
}

.page-help .help-path__node::before {
  content: "";
  position: absolute;
  left: var(--space-3);
  top: 0;
  width: var(--space-6);
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--help-signal);
  opacity: 0.85;
}

.page-help .help-path__node:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--help-signal) 70%, transparent);
  background: color-mix(in srgb, var(--help-signal) 13%, transparent);
  box-shadow: var(--shadow-2);
}

.page-help .help-path__idx {
  grid-area: idx;
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--weight-heading);
  line-height: 1;
  color: var(--help-signal);
}

.page-help .help-path__name {
  grid-area: name;
  font-size: var(--text-base);
  font-weight: var(--weight-heading);
  color: var(--color-contrast-ink);
}

.page-help .help-path__meta {
  grid-area: meta;
  margin-top: var(--space-2);
  padding-top: var(--space-2);
  border-top: var(--border-thin) solid var(--color-contrast-line);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: color-mix(in srgb, var(--color-contrast-ink) 60%, transparent);
  transition: color 0.28s ease;
}

.page-help .help-path__node:hover .help-path__meta {
  color: var(--color-contrast-ink);
}

/* ---------- 阶段通用 ---------- */

.page-help .help-stage__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.page-help .help-stage__headtext {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: var(--measure);
}

.page-help .help-stage__idx {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: var(--text-3xl);
  font-weight: var(--weight-heading);
  line-height: 0.85;
  letter-spacing: -0.03em;
  color: var(--color-primary);
  transition: color 0.5s ease;
}

.page-help .help-stage__head[data-inview="true"] .help-stage__idx {
  color: var(--color-accent);
}

.page-help .help-stage__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-1) 0 0;
}

.page-help .help-stage__grid {
  align-items: stretch;
}

.page-help .help-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
}

.page-help .help-panel__foot {
  margin: auto 0 0;
  padding-top: var(--space-2);
}

.page-help .help-panel__foot a {
  text-decoration: none;
}

/* 列表 */

.page-help .help-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.page-help .help-list > li {
  position: relative;
  padding-left: var(--space-3);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.page-help .help-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.72em;
  width: var(--space-1);
  height: 2px;
  border-radius: var(--radius-pill);
  background: var(--color-accent);
}

.page-help .help-list a {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.page-help .help-list a:hover {
  border-bottom-color: var(--color-accent);
  color: var(--color-accent);
}

/* 侧栏速览 */

.page-help .help-brief__rows {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.page-help .help-brief__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-thin) solid var(--color-line);
}

.page-help .help-brief__row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.page-help .help-brief__key {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  white-space: nowrap;
}

.page-help .help-brief__val {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: right;
  color: var(--color-ink);
}

.page-help .help-brief__para {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.page-help .help-brief__para + .help-brief__para {
  margin-top: var(--space-2);
}

.page-help .help-brief__para a {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent);
}

.page-help .help-brief__para a:hover {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* ---------- 图片块 ---------- */

.page-help .help-figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
}

.page-help .help-figure__frame {
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--color-surface-deep);
}

.page-help .help-figure__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.page-help .help-figure:hover .help-figure__img {
  transform: scale(1.03);
}

.page-help .help-figure__cap {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-ink-soft);
}

/* ---------- 深色战术板块 ---------- */

.page-help .bento-block--dark .block-title,
.page-help .bento-block--dark .chapter-title {
  color: var(--color-contrast-ink);
}

.page-help .bento-block--dark .help-list > li {
  color: color-mix(in srgb, var(--color-contrast-ink) 86%, transparent);
}

.page-help .bento-block--dark .help-list > li::before {
  background: var(--help-signal);
}

.page-help .bento-block--dark p {
  color: color-mix(in srgb, var(--color-contrast-ink) 78%, transparent);
}

/* ---------- 焦点块 ---------- */

.page-help .help-focus {
  justify-content: center;
  align-items: flex-start;
  gap: var(--space-2);
}

.page-help .bento-block--focus .block-title {
  color: var(--color-accent-ink);
}

.page-help .help-focus__num {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-figure);
  font-weight: var(--weight-heading);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-accent-ink);
}

.page-help .help-focus__label {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--weight-heading);
  color: var(--color-accent-ink);
}

.page-help .help-focus__note {
  margin: var(--space-2) 0 0;
  padding-top: var(--space-2);
  border-top: 1px solid color-mix(in srgb, var(--color-accent-ink) 32%, transparent);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: color-mix(in srgb, var(--color-accent-ink) 88%, transparent);
}

/* ---------- 问题分流列表 ---------- */

.page-help .help-routes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.page-help .help-route {
  padding: var(--space-3) 0;
  border-top: var(--border-thin) solid var(--color-line);
}

.page-help .help-route:first-child {
  padding-top: 0;
  border-top: 0;
}

.page-help .help-route__q {
  margin: 0 0 var(--space-1);
  font-size: var(--text-base);
  font-weight: var(--weight-heading);
  line-height: 1.4;
  color: var(--color-ink);
}

.page-help .help-route__a {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-ink-soft);
}

/* ---------- 自助 / 人工边界 ---------- */

.page-help .help-boundary {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-3);
}

.page-help .help-boundary__col {
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.page-help .help-boundary__col:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-2);
}

.page-help .help-boundary__col--self {
  background: var(--color-primary-soft);
}

.page-help .help-boundary__col--self .block-title {
  color: var(--color-primary);
}

.page-help .help-boundary__col--human {
  background: var(--color-contrast-surface);
  color: var(--color-contrast-ink);
}

.page-help .help-boundary__col--human .block-title {
  color: var(--color-contrast-ink);
}

.page-help .help-boundary__col--human .help-list > li {
  color: color-mix(in srgb, var(--color-contrast-ink) 86%, transparent);
}

.page-help .help-boundary__col--human .help-list > li::before {
  background: var(--help-signal);
}

.page-help .section--deep .help-boundary__col--human {
  background: var(--color-contrast-surface);
}

/* ---------- 收尾 ---------- */

.page-help .help-closing {
  display: grid;
  gap: var(--space-3);
  max-width: var(--measure);
}

.page-help .help-closing__title {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: var(--weight-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-contrast-ink);
}

.page-help .help-closing__text {
  margin: 0;
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: color-mix(in srgb, var(--color-contrast-ink) 80%, transparent);
}

.page-help .help-closing__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.page-help .help-closing__actions a {
  text-decoration: none;
}

.page-help .help-closing__ghost {
  color: var(--color-contrast-ink);
  border-color: color-mix(in srgb, var(--color-contrast-ink) 38%, transparent);
}

.page-help .help-closing__ghost:hover {
  border-color: var(--help-signal);
  color: var(--help-signal);
}

/* ---------- 可访问性 ---------- */

.page-help a:focus-visible,
.page-help .help-path__node:focus-within {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

/* ---------- 响应式 ---------- */

@media (min-width: 720px) {
  .page-help .help-hero__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
  }
}

@media (min-width: 860px) {
  .page-help .help-stage__head {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
  }

  .page-help .help-boundary {
    grid-template-columns: 1.12fr 0.88fr;
    gap: var(--space-4);
  }
}

@media (min-width: 880px) {
  .page-help .help-path {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-3);
  }

  .page-help .help-path__node:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(var(--space-3) * -1);
    width: var(--space-3);
    height: 2px;
    transform: translateY(-50%);
    background: var(--help-signal);
    opacity: 0.45;
  }
}

@media (min-width: 1024px) {
  .page-help .help-hero {
    padding-top: calc(var(--space-8) * 2);
    padding-bottom: var(--space-8);
  }

  .page-help .help-panel,
  .page-help .help-boundary__col {
    padding: var(--space-4) var(--space-4) var(--space-4);
  }
}

@media (max-width: 719px) {
  .page-help .help-brief__row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .page-help .help-brief__val {
    text-align: left;
  }
}
<<<END>>>