.page-news {
  --news-month-col: 46px;
  --news-radius: 0;
  background: var(--wl-paper);
  color: var(--wl-ink);
}

/* ---------- 面包屑 ---------- */
.page-news > .wl-container:first-child {
  padding-top: 18px;
  padding-bottom: 4px;
}

/* ---------- 封面 ---------- */
.page-news .news-cover {
  position: relative;
  overflow: hidden;
  padding: 40px 0 44px;
  background: linear-gradient(152deg, var(--wl-indigo-mid) 0%, var(--wl-indigo) 52%, #0d1626 100%);
  color: var(--wl-paper);
}

.page-news .news-cover::before,
.page-news .news-cover::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.page-news .news-cover::before {
  top: -80px;
  left: -90px;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(0, 194, 168, 0.3);
  transform: rotate(18deg);
}

.page-news .news-cover::after {
  right: -70px;
  bottom: -90px;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(251, 250, 247, 0.14);
  transform: rotate(34deg);
}

.page-news .news-cover__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 30px;
}

.page-news .news-cover__kicker {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--wl-cyan);
}

.page-news .news-cover__title {
  margin: 0 0 16px;
  font-family: var(--wl-serif);
  font-weight: 700;
  font-size: clamp(28px, 5.6vw, 50px);
  line-height: 1.26;
  letter-spacing: -0.01em;
  color: #fff;
}

.page-news .news-cover__lede {
  margin: 0 0 24px;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.85;
  color: rgba(251, 250, 247, 0.82);
}

.page-news .news-cover__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-news .news-cover__index {
  padding-top: 18px;
  border-top: 1px solid rgba(251, 250, 247, 0.22);
}

.page-news .news-cover__index-title {
  margin: 0 0 12px;
  font-family: var(--wl-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--wl-cyan);
}

.page-news .news-cover__index ol {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ni;
}

.page-news .news-cover__index li {
  counter-increment: ni;
}

.page-news .news-cover__index a {
  display: inline-flex;
  gap: 10px;
  align-items: baseline;
  font-size: 15px;
  color: rgba(251, 250, 247, 0.86);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
}

.page-news .news-cover__index a::before {
  content: counter(ni, decimal-leading-zero);
  font-family: var(--wl-mono);
  font-size: 12px;
  color: var(--wl-cyan);
}

.page-news .news-cover__index a:hover,
.page-news .news-cover__index a:focus-visible {
  border-bottom-color: var(--wl-cyan);
  color: #fff;
}

/* 深底按钮可读性 */
.page-news .news-cover__actions .wl-btn--ghost,
.page-news .news-echo__links .wl-btn--ghost {
  color: var(--wl-paper);
  border-color: rgba(251, 250, 247, 0.42);
}

.page-news .news-cover__actions .wl-btn--ghost:hover,
.page-news .news-cover__actions .wl-btn--ghost:focus-visible,
.page-news .news-echo__links .wl-btn--ghost:hover,
.page-news .news-echo__links .wl-btn--ghost:focus-visible {
  border-color: var(--wl-cyan);
  color: var(--wl-cyan);
}

/* ---------- 本期变更说明 ---------- */
.page-news .news-changelog {
  display: grid;
  gap: 26px;
}

.page-news .news-changelog__panel {
  position: relative;
  padding: 26px 22px 24px;
  background: var(--wl-orange-soft);
  border-left: 4px solid var(--wl-orange);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}

.page-news .news-changelog__ver {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--wl-orange);
}

.page-news .news-changelog__panel h3 {
  margin: 0 0 18px;
  font-family: var(--wl-serif);
  font-size: 22px;
  line-height: 1.42;
  color: var(--wl-ink);
}

.page-news .news-changelog__list {
  display: grid;
  gap: 14px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.page-news .news-changelog__list li {
  padding-left: 14px;
  border-left: 2px solid var(--wl-rule);
  font-size: 15px;
  line-height: 1.78;
  color: var(--wl-ink);
}

.page-news .news-changelog__list strong {
  display: block;
  margin-bottom: 3px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--wl-indigo);
}

.page-news .news-changelog__figure {
  margin: 0;
}

.page-news .news-changelog__figure .wl-figure__frame {
  background: var(--wl-indigo-soft);
}

/* ---------- 条目流 ---------- */
.page-news .news-feed {
  display: grid;
  gap: 28px;
}

.page-news .news-feed__side {
  align-self: start;
}

.page-news .news-feed__side-title {
  margin: 0 0 12px;
  font-family: var(--wl-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--wl-ink-soft);
}

.page-news .news-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-news .news-feed__hint {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--wl-ink-soft);
}

.page-news .news-feed__list {
  display: grid;
  gap: 2px;
  border-top: 1px solid var(--wl-rule);
}

.page-news .news-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--news-month-col);
  gap: 14px;
  align-items: center;
  padding: 20px 10px;
  border-bottom: 1px solid var(--wl-rule);
  background: transparent;
  transition: background 0.2s ease;
}

.page-news .news-item:hover,
.page-news .news-item:focus-within {
  background: var(--wl-cyan-soft);
}

.page-news .news-item__main {
  min-width: 0;
}

.page-news .news-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
}

.page-news .news-item__ver {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--wl-ink-soft);
}

.page-news .news-item__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.52;
  color: var(--wl-ink);
}

.page-news .news-item__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--wl-ink-soft);
}

.page-news .news-item__month {
  display: grid;
  justify-items: center;
  gap: 1px;
  padding-left: 12px;
  border-left: 1px solid var(--wl-rule);
  color: var(--wl-ink-soft);
}

.page-news .news-item__month-n {
  font-size: 20px;
  line-height: 1;
  color: var(--wl-indigo);
}

.page-news .news-item__month-u {
  font-size: 12px;
  letter-spacing: 0.08em;
}

/* ---------- 版本演进 ---------- */
.page-news .news-lead {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--wl-ink-soft);
}

.page-news .news-track {
  display: flex;
  gap: 0;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.page-news .news-track__node {
  position: relative;
  flex: 1 0 140px;
  padding: 24px 16px 4px 0;
  border-top: 1px solid var(--wl-rule);
  scroll-snap-align: start;
}

.page-news .news-track__node:last-child {
  padding-right: 0;
}

.page-news .news-track__dot {
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border: 2px solid var(--wl-cyan);
  border-radius: 50%;
  background: var(--wl-paper);
}

.page-news .news-track__node--now {
  border-top-color: var(--wl-orange);
}

.page-news .news-track__node--now .news-track__dot {
  border-color: var(--wl-orange);
  background: var(--wl-orange);
}

.page-news .news-track__ver {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--wl-indigo);
}

.page-news .news-track__node--now .news-track__ver {
  color: var(--wl-orange);
}

.page-news .news-track__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--wl-ink-soft);
}

.page-news .news-track__figure {
  margin: 40px 0 0;
}

.page-news .news-track__figure .wl-figure__frame {
  background: var(--wl-indigo-soft);
}

/* ---------- 专题系列 ---------- */
.page-news .news-series__cover {
  margin: 0 0 26px;
}

.page-news .news-series__cover .wl-figure__frame {
  background: var(--wl-indigo-soft);
}

.page-news .news-series {
  display: grid;
  gap: 16px;
}

.page-news .news-series__card {
  padding: 22px 20px;
  background: var(--wl-paper);
  border: 1px solid var(--wl-rule);
  border-top: 3px solid var(--wl-indigo);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}

.page-news .news-series__no {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--wl-cyan-deep);
}

.page-news .news-series__card h3 {
  margin: 10px 0 10px;
  font-size: 19px;
  line-height: 1.46;
  color: var(--wl-ink);
}

.page-news .news-series__card p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--wl-ink-soft);
}

.page-news .news-series__count {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--wl-indigo);
}

.page-news .news-series__chart {
  margin: 34px 0 0;
}

.page-news .news-series__chart .wl-figure__frame {
  background: var(--wl-indigo-soft);
}

/* ---------- 反馈与回音 ---------- */
.page-news .news-echo {
  display: grid;
  gap: 34px;
}

.page-news .news-echo__text p {
  margin: 0;
  font-size: 16px;
  line-height: 1.85;
  color: rgba(251, 250, 247, 0.86);
}

.page-news .news-echo__steps {
  display: grid;
  gap: 16px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.page-news .news-echo__steps li {
  position: relative;
  padding-left: 46px;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(251, 250, 247, 0.82);
  counter-increment: step;
}

.page-news .news-echo__steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  padding: 1px 6px;
  border: 1px solid rgba(0, 194, 168, 0.5);
  font-family: var(--wl-mono);
  font-size: 12px;
  color: var(--wl-cyan);
}

.page-news .news-echo__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-news .news-echo__stats {
  padding-top: 26px;
  border-top: 1px solid rgba(251, 250, 247, 0.2);
}

.page-news .news-echo__stats .wl-data {
  display: grid;
  gap: 22px;
}

.page-news .news-echo__stats .wl-data__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(251, 250, 247, 0.14);
}

.page-news .news-echo__stats .wl-data__num {
  font-size: 56px;
  line-height: 1;
  color: #fff;
}

.page-news .news-echo__stats .wl-data__unit {
  font-size: 14px;
  color: var(--wl-cyan);
}

.page-news .news-echo__stats .wl-data__note {
  flex: 1 0 100%;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(251, 250, 247, 0.72);
}

.page-news .news-echo__more {
  margin: 26px 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(251, 250, 247, 0.78);
}

.page-news .news-echo__more a {
  color: var(--wl-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 194, 168, 0.45);
}

.page-news .news-echo__more a:hover,
.page-news .news-echo__more a:focus-visible {
  border-bottom-color: var(--wl-cyan);
  color: #fff;
}

/* 深底区块标题 */
.page-news .wl-section--deep .wl-section__title {
  color: var(--wl-paper);
}

.page-news .wl-section--deep .wl-section__num {
  color: rgba(251, 250, 247, 0.55);
}

/* ---------- 平板与桌面 ---------- */
@media (min-width: 720px) {
  .page-news .news-cover {
    padding: 56px 0 58px;
  }

  .page-news .news-changelog {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: start;
    gap: 34px;
  }

  .page-news .news-series {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .page-news .news-changelog__panel {
    padding: 32px 30px 30px;
  }
}

@media (min-width: 1024px) {
  .page-news .news-cover__inner {
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    align-items: end;
    gap: 48px;
  }

  .page-news .news-cover__index {
    border-top: none;
    border-left: 1px solid rgba(251, 250, 247, 0.22);
    padding-top: 0;
    padding-left: 24px;
  }

  .page-news .news-feed {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: 44px;
  }

  .page-news .news-feed__side {
    position: sticky;
    top: 96px;
  }

  .page-news .news-filter {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-news .news-item__title {
    font-size: 19px;
  }

  .page-news .news-echo {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 56px;
    align-items: start;
  }

  .page-news .news-echo__stats {
    padding-top: 0;
    border-top: none;
    border-left: 1px solid rgba(251, 250, 247, 0.2);
    padding-left: 32px;
  }

  .page-news .news-echo__stats .wl-data {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .page-news .news-echo__stats .wl-data__item {
    display: block;
    padding-bottom: 0;
    border-bottom: none;
  }

  .page-news .news-echo__stats .wl-data__num {
    font-size: 62px;
  }

  .page-news .news-echo__stats .wl-data__note {
    display: block;
    margin-top: 8px;
  }

  .page-news .news-series {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .page-news .news-cover__title {
    max-width: 16em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .news-item {
    transition: none;
  }
}
</main>
<<<END>>>

等等，最后一个 `<<<END>>>` 是我加的，但格式要求里没有这个。我应该输出 ``、`` 两个标记，每个标记出现一次。我多写了 `<<<END>>>`，需要删掉。

另外检查 `</main>` 的位置——它应该在 CSS 之前，还是之后？规则是“从 `<main id="main-content" class="page-news">` 开始，到 `</main>` 结束”，所以 `</main>` 必须闭合整个 HTML 部分。它应该放在 `` 之前。我已经这样做了，很好。

现在把 `<<<END>>>` 删掉，重新输出，确保没有多余内容。

另外再检查一下有没有遗漏的细节：
- `wl-section--deep` 里的 `.wl-section__head` 里的标签用的是 `wl-tag--alert`，橙色，在深靛蓝上可见。
- 链接都有真实目标。
- 品牌名“万利”在 h1 里出现了。
- 唯一一个 h1。
- 面包屑存在。
- data-filter-group 正确。
- 所有图片都有 `loading="lazy"`（除了第一张 `news-changelog__figure`，按规则首屏主图不要 lazy，但那张在首屏下面。不过它也不是“首屏主图”，所以还是要加 lazy。等等，规则说“首屏主图不要 lazy，其余图片添加 `loading="lazy"`”。“首屏主图”——封面区没有主图，是渐变。第一张图在 changelog 区块，不在首屏。那就加上 `loading="lazy"` 和 `decoding="async"`。

其实第一张图片只带 alt，没有 lazy。为了稳妥，加 `loading="lazy" decoding="async"` 吧。它确实不在首屏。

好，加上。

还有 `.page-news > .wl-container:first-child` —— 这个 `main` 的第一个子元素确实是那个 `wl-container` 包着的面包屑。没问题。

不过选择器 `> .wl-container:first-child` 作用域是 `.page-news`，OK。

等等：这个 `.wl-container:first-child` 里包含了面包屑导航。我给它设了 padding-top 18px、padding-bottom 4px。但共享的 `.wl-container` 本身可能已经有 padding 了。加这些值应该还行。

嗯，就算 `.wl-container` 没有水平内边距，面包屑也会贴边。但共享的 `.wl-container` 大概率已经管了水平方向，问题不大。

关于“确认”这个词——用在“确认反馈链路正常”里。这个词不在禁用列表里。没问题。

再确认一下“追溯”——没问题。

“核对”没有出现。“口径”也没有。

好。再检查 `news-item` 的 grid：`grid-template-columns: minmax(0, 1fr) var(--news-month-col);`。移动端上没问题。

再看 `news-track__node` 用 `flex: 1 0 140px`，加了 `overflow-x: auto`，小屏会滚动，不溢出。

`clip-path` 用在 `news-changelog__panel` 和 `news-series__card` 上，没问题。

还有 `news-series__card p` 会影响 `news-series__count` 吗？`.news-series__count` 是 `p` 标签，会命中 `.news-series__card p { margin: 0 0 14px; font-size:15px; color: var(--wl-ink-soft); }`，而 `.news-series__count` 只是用 font-size 12px 覆盖了字号。`margin` 还是会保留 14px。再确认下 `.news-series__count` 的规则写没写全：margin: 0; font-size: 12px; color: var(--wl-indigo);。可以。

再看 `.news-echo__more` 在深色背景上的链接，颜色对比够了。

好，确定最终版。

还有一件事：`.page-news .news-feed__side` 配了 `sticky`——共享的 `.wl-side` 可能已经被设成 sticky 了，不过这没关系。

再确认没漏掉 `wl-section__status`。改用 `wl-tag` 了。

最终检查一下文字长度和重复情况。可以。

输出。
<main id="main-content" class="page-news">

  <div class="wl-container">
    <nav class="wl-breadcrumb" aria-label="当前位置">
      <a href="/">首页</a>
      <span class="wl-breadcrumb__sep" aria-hidden="true">/</span>
      <span aria-current="page">动态与洞察</span>
    </nav>
  </div>

  <section class="news-cover">
    <div class="wl-container news-cover__inner">
      <div class="news-cover__main">
        <p class="news-cover__kicker wl-mono">CHANGELOG &amp; INSIGHT</p>
        <h1 class="news-cover__title">万利版本改了什么、通道切换后要检查什么，都拆成能照着做的几步</h1>
        <p class="wl-lede news-cover__lede">这一栏按期记录功能调整、界面变化与同行的落地做法。您想知道最近动了哪里、切换后要不要动手确认、下一版往哪个方向走，翻最近几条就能对上手头的活。</p>
        <div class="news-cover__actions">
          <a class="wl-btn wl-btn--accent" href="#feed">看最新条目</a>
          <a class="wl-btn wl-btn--ghost" href="/answers/">使用中遇到问题</a>
        </div>
      </div>
      <aside class="news-cover__index">
        <p class="news-cover__index-title">本期索引</p>
        <ol>
          <li><a href="#changelog">本期变更说明</a></li>
          <li><a href="#feed">最新条目</a></li>
          <li><a href="#versions">版本演进</a></li>
          <li><a href="#series">专题系列</a></li>
          <li><a href="#echo">反馈与回音</a></li>
        </ol>
      </aside>
    </div>
  </section>

  <section class="wl-section" id="changelog">
    <div class="wl-container">
      <div class="wl-section__head">
        <span class="wl-section__num wl-mono">01</span>
        <h2 class="wl-section__title">本期变更说明</h2>
        <span class="wl-tag wl-tag--alert">最近更新</span>
      </div>

      <div class="news-changelog">
        <article class="news-changelog__panel">
          <p class="news-changelog__ver wl-mono">V06 正式版 · 已全量开放</p>
          <h3>结算与对账合并成一条流程，月度关账少走两个来回</h3>
          <ul class="news-changelog__list">
            <li>
              <strong>功能调整</strong>
              对账单与结算单在同一页确认，差异项自动落到待处理清单，处理完再回到原单据，不用两头翻。
            </li>
            <li>
              <strong>界面变化</strong>
              会员中心首页把数据看板、库存与订单三个入口提到首屏，小屏上不必再展开菜单找。
            </li>
            <li>
              <strong>数据看板</strong>
              门店经营概况新增品类维度，同一批数据可以按门店、区域或品类切换着看。
            </li>
          </ul>
          <p class="wl-notice">通道切换完成后，请到会员中心的问题反馈入口发一条测试反馈；链路正常了再投入日常使用，避免真正有事时才发现发不出去。</p>
        </article>

        <figure class="wl-figure news-changelog__figure">
          <div class="wl-figure__frame wl-figure__frame--tall">
            <img src="{zhanqunpic:h:1400w:1000}" width="1000" height="1400" alt="会员中心变更说明面板与通道切换入口的手机端界面示意" loading="lazy" decoding="async">
          </div>
          <figcaption class="wl-figure__caption">通道切换与变更说明在同一屏，改完立刻能验证一次。</figcaption>
        </figure>
      </div>
    </div>
  </section>

  <section class="wl-section wl-section--alt" id="feed">
    <div class="wl-container">
      <div class="wl-section__head">
        <span class="wl-section__num wl-mono">02</span>
        <h2 class="wl-section__title">最新条目</h2>
        <span class="wl-tag wl-tag--muted wl-mono">按距今月份排序</span>
      </div>

      <div class="wl-split news-feed">
        <aside class="wl-side news-feed__side">
          <p class="news-feed__side-title">按类别查看</p>
          <div class="wl-filter news-filter" data-filter-group="#news-list" role="group" aria-label="按类别筛选条目">
            <button type="button" class="wl-chip is-active" data-filter="all" aria-pressed="true">全部</button>
            <button type="button" class="wl-chip" data-filter="版本更新" aria-pressed="false">版本更新</button>
            <button type="button" class="wl-chip" data-filter="通道与访问" aria-pressed="false">通道与访问</button>
            <button type="button" class="wl-chip" data-filter="界面与体验" aria-pressed="false">界面与体验</button>
            <button type="button" class="wl-chip" data-filter="数据看板" aria-pressed="false">数据看板</button>
            <button type="button" class="wl-chip" data-filter="行业观察" aria-pressed="false">行业观察</button>
            <button type="button" class="wl-chip" data-filter="专题系列" aria-pressed="false">专题系列</button>
          </div>
          <p class="news-feed__hint">点一个类别只看相关内容，再点「全部」回到整份目录。每条右侧的数字是距今月份。</p>
        </aside>

        <div class="news-feed__list" id="news-list">

          <article class="news-item" data-filter-item="版本更新">
            <div class="news-item__main">
              <p class="news-item__meta">
                <span class="wl-tag">版本更新</span>
                <span class="news-item__ver wl-mono">V06</span>
              </p>
              <h3 class="news-item__title">结算与对账合并到一条流程，月度关账少走两个来回</h3>
              <p class="news-item__excerpt">对账单与结算单在同一页确认，差异项落到待处理清单，财务不用再对着两套单子来回比。</p>
            </div>
            <div class="news-item__month" aria-label="距今 1 个月更新">
              <span class="news-item__month-n wl-mono">01</span>
              <span class="news-item__month-u">月</span>
            </div>
          </article>

          <article class="news-item" data-filter-item="通道与访问">
            <div class="news-item__main">
              <p class="news-item__meta">
                <span class="wl-tag">通道与访问</span>
              </p>
              <h3 class="news-item__title">切换到内地服务通道后，先花一分钟确认反馈入口</h3>
              <p class="news-item__excerpt">会员中心会在提示条里给出自检步骤，发一条测试反馈就能确认链路通畅，之后再放心用。</p>
            </div>
            <div class="news-item__month" aria-label="距今 2 个月更新">
              <span class="news-item__month-n wl-mono">02</span>
              <span class="news-item__month-u">月</span>
            </div>
          </article>

          <article class="news-item" data-filter-item="界面与体验">
            <div class="news-item__main">
              <p class="news-item__meta">
                <span class="wl-tag">界面与体验</span>
              </p>
              <h3 class="news-item__title">会员中心首页重排，常用入口不再藏在第二层</h3>
              <p class="news-item__excerpt">数据看板、库存与订单三个高频入口提到首屏，手机竖屏一屏之内就能点到。</p>
            </div>
            <div class="news-item__month" aria-label="距今 2 个月更新">
              <span class="news-item__month-n wl-mono">02</span>
              <span class="news-item__month-u">月</span>
            </div>
          </article>

          <article class="news-item" data-filter-item="数据看板">
            <div class="news-item__main">
              <p class="news-item__meta">
                <span class="wl-tag">数据看板</span>
              </p>
              <h3 class="news-item__title">经营概况新增品类查看，门店之间的差异一眼能比</h3>
              <p class="news-item__excerpt">除了按门店和区域，现在还能切到品类维度，看清是哪几类货在拉动，哪几类在拖后腿。</p>
            </div>
            <div class="news-item__month" aria-label="距今 3 个月更新">
              <span class="news-item__month-n wl-mono">03</span>
              <span class="news-item__month-u">月</span>
            </div>
          </article>

          <article class="news-item" data-filter-item="行业观察">
            <div class="news-item__main">
              <p class="news-item__meta">
                <span class="wl-tag">行业观察</span>
              </p>
              <h3 class="news-item__title">换季库存怎么排：纺织服装门店的三段式节奏</h3>
              <p class="news-item__excerpt">把换季拆成上新、清尾与并柜三段，每段的补货和调拨动作分开安排，避免一次压太多货。</p>
            </div>
            <div class="news-item__month" aria-label="距今 4 个月更新">
              <span class="news-item__month-n wl-mono">04</span>
              <span class="news-item__month-u">月</span>
            </div>
          </article>

          <article class="news-item" data-filter-item="版本更新">
            <div class="news-item__main">
              <p class="news-item__meta">
                <span class="wl-tag">版本更新</span>
                <span class="news-item__ver wl-mono">V05</span>
              </p>
              <h3 class="news-item__title">巡检任务支持批量派发，连锁门店不用逐店点一遍</h3>
              <p class="news-item__excerpt">一次选中多家门店生成同一份巡检表，结果按门店汇总回看，区域经理巡店前的准备时间明显短了。</p>
            </div>
            <div class="news-item__month" aria-label="距今 4 个月更新">
              <span class="news-item__month-n wl-mono">04</span>
              <span class="news-item__month-u">月</span>
            </div>
          </article>

          <article class="news-item" data-filter-item="专题系列">
            <div class="news-item__main">
              <p class="news-item__meta">
                <span class="wl-tag">专题系列</span>
              </p>
              <h3 class="news-item__title">仓储盘点系列开篇：差异通常从哪几个环节冒出来</h3>
              <p class="news-item__excerpt">收货未及时上架、退换货没归位、调拨单据滞后，是最常见的三类来源，先分清楚再谈改流程。</p>
            </div>
            <div class="news-item__month" aria-label="距今 5 个月更新">
              <span class="news-item__month-n wl-mono">05</span>
              <span class="news-item__month-u">月</span>
            </div>
          </article>

          <article class="news-item" data-filter-item="通道与访问">
            <div class="news-item__main">
              <p class="news-item__meta">
                <span class="wl-tag">通道与访问</span>
              </p>
              <h3 class="news-item__title">新会员开通后的第一周，建议先走通这三屏</h3>
              <p class="news-item__excerpt">首页看入口、数据看板看概览、问题反馈看回音，把该走的路先跑一遍，后面上手就快了。</p>
            </div>
            <div class="news-item__month" aria-label="距今 6 个月更新">
              <span class="news-item__month-n wl-mono">06</span>
              <span class="news-item__month-u">月</span>
            </div>
          </article>

          <article class="news-item" data-filter-item="界面与体验">
            <div class="news-item__main">
              <p class="news-item__meta">
                <span class="wl-tag">界面与体验</span>
              </p>
              <h3 class="news-item__title">表格首列固定，长清单横向滑动时不再迷路</h3>
              <p class="news-item__excerpt">供应商、货品与门店三张长表都改了首列固定，行悬停整行高亮，对到哪一行心里有数。</p>
            </div>
            <div class="news-item__month" aria-label="距今 7 个月更新">
              <span class="news-item__month-n wl-mono">07</span>
              <span class="news-item__month-u">月</span>
            </div>
          </article>

          <article class="news-item" data-filter-item="行业观察">
            <div class="news-item__main">
              <p class="news-item__meta">
                <span class="wl-tag">行业观察</span>
              </p>
              <h3 class="news-item__title">食品加工的季节性用工与排产怎么配合</h3>
              <p class="news-item__excerpt">按旺季峰值倒推排产节奏，把临时用工的培训提前到旺季前两周，头几天的手忙脚乱能省掉。</p>
            </div>
            <div class="news-item__month" aria-label="距今 8 个月更新">
              <span class="news-item__month-n wl-mono">08</span>
              <span class="news-item__month-u">月</span>
            </div>
          </article>

          <article class="news-item" data-filter-item="数据看板">
            <div class="news-item__main">
              <p class="news-item__meta">
                <span class="wl-tag">数据看板</span>
              </p>
              <h3 class="news-item__title">经营概况支持按时段对比，早晚班差异也能看出来</h3>
              <p class="news-item__excerpt">选两个时段并排看，客流、客单与库存周转的变化放在同一张图上，排班调整有依据。</p>
            </div>
            <div class="news-item__month" aria-label="距今 9 个月更新">
              <span class="news-item__month-n wl-mono">09</span>
              <span class="news-item__month-u">月</span>
            </div>
          </article>

          <article class="news-item" data-filter-item="版本更新">
            <div class="news-item__main">
              <p class="news-item__meta">
                <span class="wl-tag">版本更新</span>
                <span class="news-item__ver wl-mono">V04</span>
              </p>
              <h3 class="news-item__title">订单与结算的联动规则写进系统，改单不再靠口头知会</h3>
              <p class="news-item__excerpt">订单变更后结算单同步生成差异条目，谁在什么时候改了什么，都留下记录。</p>
            </div>
            <div class="news-item__month" aria-label="距今 10 个月更新">
              <span class="news-item__month-n wl-mono">10</span>
              <span class="news-item__month-u">月</span>
            </div>
          </article>

        </div>
      </div>
    </div>
  </section>

  <section class="wl-section" id="versions">
    <div class="wl-container">
      <div class="wl-section__head">
        <span class="wl-section__num wl-mono">03</span>
        <h2 class="wl-section__title">版本演进</h2>
        <span class="wl-tag wl-mono">全年 6 个正式版</span>
      </div>

      <p class="wl-prose news-lead">万利全年发布 6 个正式版本，重要版本会提前 7 天挂出预告。您可以按自己的忙季安排更新时间，不必挤在业务高峰动手。</p>

      <ol class="news-track">
        <li class="news-track__node">
          <span class="news-track__dot" aria-hidden="true"></span>
          <span class="news-track__ver wl-mono">V01</span>
          <p class="news-track__text">基础台账与权限分级，先把采购、库存的底账立起来。</p>
        </li>
        <li class="news-track__node">
          <span class="news-track__dot" aria-hidden="true"></span>
          <span class="news-track__ver wl-mono">V02</span>
          <p class="news-track__text">数据看板与多门店视角，经营概况第一次能横向比。</p>
        </li>
        <li class="news-track__node">
          <span class="news-track__dot" aria-hidden="true"></span>
          <span class="news-track__ver wl-mono">V03</span>
          <p class="news-track__text">库存与订单打通，出库与开单不再分两处登。</p>
        </li>
        <li class="news-track__node">
          <span class="news-track__dot" aria-hidden="true"></span>
          <span class="news-track__ver wl-mono">V04</span>
          <p class="news-track__text">订单与结算联动，改单后的差异自动留痕。</p>
        </li>
        <li class="news-track__node">
          <span class="news-track__dot" aria-hidden="true"></span>
          <span class="news-track__ver wl-mono">V05</span>
          <p class="news-track__text">巡检与任务派发成体系，连锁门店统一动作。</p>
        </li>
        <li class="news-track__node news-track__node--now">
          <span class="news-track__dot" aria-hidden="true"></span>
          <span class="news-track__ver wl-mono">V06</span>
          <p class="news-track__text">结算与对账合并，月度关账路径缩短。</p>
        </li>
      </ol>

      <figure class="wl-figure news-track__figure">
        <div class="wl-figure__frame wl-figure__frame--wide">
          <img src="{zhanqunpic:h:720w:1280}" width="1280" height="720" alt="万利中心全年六个正式版本的重点方向与演进节奏示意" loading="lazy" decoding="async">
        </div>
        <figcaption class="wl-figure__caption">从立台账到看板，再到结算联动，六个版本沿着日常经营的顺序往前走。</figcaption>
      </figure>
    </div>
  </section>

  <section class="wl-section wl-section--alt" id="series">
    <div class="wl-container">
      <div class="wl-section__head">
        <span class="wl-section__num wl-mono">04</span>
        <h2 class="wl-section__title">专题系列</h2>
        <span class="wl-tag">四组连载</span>
      </div>

      <figure class="wl-figure news-series__cover">
        <div class="wl-figure__frame wl-figure__frame--wide">
          <img src="{zhanqunpic:h:720w:1200}" width="1200" height="720" alt="万利中心专题系列内容的封面组合示意" loading="lazy" decoding="async">
        </div>
      </figure>

      <div class="news-series">
        <article class="news-series__card">
          <p class="news-series__no wl-mono">SERIES 01</p>
          <h3>门店效率：从排班到交接班</h3>
          <p>把高峰时段的动作固定下来，交接班不再靠口头交代，新人照着做也不会漏。</p>
          <p class="news-series__count wl-mono">9 篇连载 · 每月更新</p>
        </article>
        <article class="news-series__card">
          <p class="news-series__no wl-mono">SERIES 02</p>
          <h3>仓储盘点：差异从哪来、怎么追溯</h3>
          <p>先把差异分类，再谈流程改动。盘点表怎么设计、复盘会怎么开，都写在里面。</p>
          <p class="news-series__count wl-mono">12 篇连载 · 每月更新</p>
        </article>
        <article class="news-series__card">
          <p class="news-series__no wl-mono">SERIES 03</p>
          <h3>结算对账：月度关账前的准备清单</h3>
          <p>关账前一天该做完哪几件事，差异单据走什么路径处理，按顺序列清楚。</p>
          <p class="news-series__count wl-mono">8 篇连载 · 每月更新</p>
        </article>
        <article class="news-series__card">
          <p class="news-series__no wl-mono">SERIES 04</p>
          <h3>区域经营：多门店看板该看哪几行</h3>
          <p>同一张看板，总部和店长关注的行的确不一样。先分清角色，再决定看什么。</p>
          <p class="news-series__count wl-mono">11 篇连载 · 每月更新</p>
        </article>
      </div>

      <figure class="wl-figure news-series__chart">
        <div class="wl-figure__frame">
          <img src="{zhanqunpic:h:800w:1200}" width="1200" height="800" alt="门店经营数据观察的图表型配图示意" loading="lazy" decoding="async">
        </div>
        <figcaption class="wl-figure__caption">区域经营系列常用的一组对比视角：同一个指标分门店、分时段看，结论往往不一样。</figcaption>
      </figure>
    </div>
  </section>

  <section class="wl-section wl-section--deep" id="echo">
    <div class="wl-container">
      <div class="wl-section__head">
        <span class="wl-section__num wl-mono">05</span>
        <h2 class="wl-section__title">有变化，也有回声</h2>
        <span class="wl-tag wl-tag--alert">反馈闭环</span>
      </div>

      <div class="news-echo">
        <div class="news-echo__text">
          <p>读到跟自家情况不一样的地方，或者切换之后觉得某个入口不顺手，都可以直接提。提问不会石沉大海，处理结论也会回到这一栏，让后面的人少问一次。</p>
          <ol class="news-echo__steps">
            <li>在会员中心的问题反馈入口提交，写清门店、账号与操作步骤。</li>
            <li>客户成功团队在工作日 9:00–18:00 跟进，客户问题平均首次响应 2 小时。</li>
            <li>确认属于共性问题后，处理结论写回变更说明或帮助中心的对应条目。</li>
          </ol>
          <div class="news-echo__links">
            <a class="wl-btn wl-btn--accent" href="/answers/">去帮助中心查答案</a>
            <a class="wl-btn wl-btn--ghost" href="/contact/">联系客户成功团队</a>
          </div>
        </div>

        <div class="news-echo__stats">
          <div class="wl-data">
            <div class="wl-data__item">
              <span class="wl-data__num wl-mono">2</span><span class="wl-data__unit">小时</span>
              <span class="wl-data__note">客户问题平均首次响应时长</span>
            </div>
            <div class="wl-data__item">
              <span class="wl-data__num wl-mono">64</span><span class="wl-data__unit">人</span>
              <span class="wl-data__note">客户成功团队规模</span>
            </div>
            <div class="wl-data__item">
              <span class="wl-data__num wl-mono">2</span><span class="wl-data__unit">场 / 月</span>
              <span class="wl-data__note">直播答疑，会员可直接提问</span>
            </div>
          </div>
          <p class="news-echo__more">还想看同行怎么落地？<a href="/projects/">翻一翻十二组行业案例</a>，也可以从首页的<a href="/">通道切换入口</a>重新出发。</p>
        </div>
      </div>
    </div>
  </section>

</main>

.page-news {
  --news-month-col: 46px;
  background: var(--wl-paper);
  color: var(--wl-ink);
}

/* ---------- 面包屑 ---------- */
.page-news > .wl-container:first-child {
  padding-top: 18px;
  padding-bottom: 4px;
}

/* ---------- 封面 ---------- */
.page-news .news-cover {
  position: relative;
  overflow: hidden;
  padding: 40px 0 44px;
  background: linear-gradient(152deg, var(--wl-indigo-mid) 0%, var(--wl-indigo) 52%, #0d1626 100%);
  color: var(--wl-paper);
}

.page-news .news-cover::before,
.page-news .news-cover::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.page-news .news-cover::before {
  top: -80px;
  left: -90px;
  width: 240px;
  height: 240px;
  border: 1px solid rgba(0, 194, 168, 0.3);
  transform: rotate(18deg);
}

.page-news .news-cover::after {
  right: -70px;
  bottom: -90px;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(251, 250, 247, 0.14);
  transform: rotate(34deg);
}

.page-news .news-cover__inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 30px;
}

.page-news .news-cover__kicker {
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 0.24em;
  color: var(--wl-cyan);
}

.page-news .news-cover__title {
  margin: 0 0 16px;
  font-family: var(--wl-serif);
  font-weight: 700;
  font-size: clamp(28px, 5.6vw, 50px);
  line-height: 1.26;
  letter-spacing: -0.01em;
  color: #fff;
}

.page-news .news-cover__lede {
  margin: 0 0 24px;
  max-width: 34em;
  font-size: 16px;
  line-height: 1.85;
  color: rgba(251, 250, 247, 0.82);
}

.page-news .news-cover__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.page-news .news-cover__index {
  padding-top: 18px;
  border-top: 1px solid rgba(251, 250, 247, 0.22);
}

.page-news .news-cover__index-title {
  margin: 0 0 12px;
  font-family: var(--wl-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--wl-cyan);
}

.page-news .news-cover__index ol {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: ni;
}

.page-news .news-cover__index li {
  counter-increment: ni;
}

.page-news .news-cover__index a {
  display: inline-flex;
  gap: 10px;
  align-items: baseline;
  padding-bottom: 1px;
  font-size: 15px;
  color: rgba(251, 250, 247, 0.86);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.page-news .news-cover__index a::before {
  content: counter(ni, decimal-leading-zero);
  font-family: var(--wl-mono);
  font-size: 12px;
  color: var(--wl-cyan);
}

.page-news .news-cover__index a:hover,
.page-news .news-cover__index a:focus-visible {
  border-bottom-color: var(--wl-cyan);
  color: #fff;
}

.page-news .news-cover__actions .wl-btn--ghost,
.page-news .news-echo__links .wl-btn--ghost {
  color: var(--wl-paper);
  border-color: rgba(251, 250, 247, 0.42);
}

.page-news .news-cover__actions .wl-btn--ghost:hover,
.page-news .news-cover__actions .wl-btn--ghost:focus-visible,
.page-news .news-echo__links .wl-btn--ghost:hover,
.page-news .news-echo__links .wl-btn--ghost:focus-visible {
  border-color: var(--wl-cyan);
  color: var(--wl-cyan);
}

/* ---------- 本期变更说明 ---------- */
.page-news .news-changelog {
  display: grid;
  gap: 26px;
}

.page-news .news-changelog__panel {
  position: relative;
  padding: 26px 22px 24px;
  background: var(--wl-orange-soft);
  border-left: 4px solid var(--wl-orange);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%);
}

.page-news .news-changelog__ver {
  margin: 0 0 10px;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--wl-orange);
}

.page-news .news-changelog__panel h3 {
  margin: 0 0 18px;
  font-family: var(--wl-serif);
  font-size: 22px;
  line-height: 1.42;
  color: var(--wl-ink);
}

.page-news .news-changelog__list {
  display: grid;
  gap: 14px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.page-news .news-changelog__list li {
  padding-left: 14px;
  border-left: 2px solid var(--wl-rule);
  font-size: 15px;
  line-height: 1.78;
  color: var(--wl-ink);
}

.page-news .news-changelog__list strong {
  display: block;
  margin-bottom: 3px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--wl-indigo);
}

.page-news .news-changelog__figure {
  margin: 0;
}

.page-news .news-changelog__figure .wl-figure__frame {
  background: var(--wl-indigo-soft);
}

/* ---------- 条目流 ---------- */
.page-news .news-feed {
  display: grid;
  gap: 28px;
}

.page-news .news-feed__side {
  align-self: start;
}

.page-news .news-feed__side-title {
  margin: 0 0 12px;
  font-family: var(--wl-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--wl-ink-soft);
}

.page-news .news-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.page-news .news-feed__hint {
  margin: 14px 0 0;
  font-size: 13px;
  line-height: 1.75;
  color: var(--wl-ink-soft);
}

.page-news .news-feed__list {
  display: grid;
  gap: 2px;
  border-top: 1px solid var(--wl-rule);
}

.page-news .news-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--news-month-col);
  gap: 14px;
  align-items: center;
  padding: 20px 10px;
  border-bottom: 1px solid var(--wl-rule);
  background: transparent;
  transition: background 0.2s ease;
}

.page-news .news-item:hover,
.page-news .news-item:focus-within {
  background: var(--wl-cyan-soft);
}

.page-news .news-item__main {
  min-width: 0;
}

.page-news .news-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
}

.page-news .news-item__ver {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--wl-ink-soft);
}

.page-news .news-item__title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.52;
  color: var(--wl-ink);
}

.page-news .news-item__excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
  font-size: 15px;
  line-height: 1.8;
  color: var(--wl-ink-soft);
}

.page-news .news-item__month {
  display: grid;
  justify-items: center;
  gap: 1px;
  padding-left: 12px;
  border-left: 1px solid var(--wl-rule);
  color: var(--wl-ink-soft);
}

.page-news .news-item__month-n {
  font-size: 20px;
  line-height: 1;
  color: var(--wl-indigo);
}

.page-news .news-item__month-u {
  font-size: 12px;
  letter-spacing: 0.08em;
}

/* ---------- 版本演进 ---------- */
.page-news .news-lead {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--wl-ink-soft);
}

.page-news .news-track {
  display: flex;
  gap: 0;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.page-news .news-track__node {
  position: relative;
  flex: 1 0 140px;
  padding: 24px 16px 4px 0;
  border-top: 1px solid var(--wl-rule);
  scroll-snap-align: start;
}

.page-news .news-track__node:last-child {
  padding-right: 0;
}

.page-news .news-track__dot {
  position: absolute;
  top: -5px;
  left: 0;
  width: 9px;
  height: 9px;
  border: 2px solid var(--wl-cyan);
  border-radius: 50%;
  background: var(--wl-paper);
}

.page-news .news-track__node--now {
  border-top-color: var(--wl-orange);
}

.page-news .news-track__node--now .news-track__dot {
  border-color: var(--wl-orange);
  background: var(--wl-orange);
}

.page-news .news-track__ver {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--wl-indigo);
}

.page-news .news-track__node--now .news-track__ver {
  color: var(--wl-orange);
}

.page-news .news-track__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.72;
  color: var(--wl-ink-soft);
}

.page-news .news-track__figure {
  margin: 40px 0 0;
}

.page-news .news-track__figure .wl-figure__frame {
  background: var(--wl-indigo-soft);
}

/* ---------- 专题系列 ---------- */
.page-news .news-series__cover {
  margin: 0 0 26px;
}

.page-news .news-series__cover .wl-figure__frame {
  background: var(--wl-indigo-soft);
}

.page-news .news-series {
  display: grid;
  gap: 16px;
}

.page-news .news-series__card {
  padding: 22px 20px;
  background: var(--wl-paper);
  border: 1px solid var(--wl-rule);
  border-top: 3px solid var(--wl-indigo);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
}

.page-news .news-series__no {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--wl-cyan-deep);
}

.page-news .news-series__card h3 {
  margin: 10px 0;
  font-size: 19px;
  line-height: 1.46;
  color: var(--wl-ink);
}

.page-news .news-series__card p {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--wl-ink-soft);
}

.page-news .news-series__count {
  margin: 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--wl-indigo);
}

.page-news .news-series__chart {
  margin: 34px 0 0;
}

.page-news .news-series__chart .wl-figure__frame {
  background: var(--wl-indigo-soft);
}

/* ---------- 反馈与回音 ---------- */
.page-news .news-echo {
  display: grid;
  gap: 34px;
}

.page-news .news-echo__text p {
  margin: 0;
  font-size: 16px;
  line-height: 1.85;
  color: rgba(251, 250, 247, 0.86);
}

.page-news .news-echo__steps {
  display: grid;
  gap: 16px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.page-news .news-echo__steps li {
  position: relative;
  padding-left: 46px;
  font-size: 15px;
  line-height: 1.8;
  color: rgba(251, 250, 247, 0.82);
  counter-increment: step;
}

.page-news .news-echo__steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  padding: 1px 6px;
  border: 1px solid rgba(0, 194, 168, 0.5);
  font-family: var(--wl-mono);
  font-size: 12px;
  color: var(--wl-cyan);
}

.page-news .news-echo__links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.page-news .news-echo__stats {
  padding-top: 26px;
  border-top: 1px solid rgba(251, 250, 247, 0.2);
}

.page-news .news-echo__stats .wl-data {
  display: grid;
  gap: 22px;
}

.page-news .news-echo__stats .wl-data__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(251, 250, 247, 0.14);
}

.page-news .news-echo__stats .wl-data__num {
  font-size: 56px;
  line-height: 1;
  color: #fff;
}

.page-news .news-echo__stats .wl-data__unit {
  font-size: 14px;
  color: var(--wl-cyan);
}

.page-news .news-echo__stats .wl-data__note {
  flex: 1 0 100%;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.7;
  color: rgba(251, 250, 247, 0.72);
}

.page-news .news-echo__more {
  margin: 26px 0 0;
  font-size: 15px;
  line-height: 1.85;
  color: rgba(251, 250, 247, 0.78);
}

.page-news .news-echo__more a {
  color: var(--wl-cyan);
  text-decoration: none;
  border-bottom: 1px solid rgba(0, 194, 168, 0.45);
}

.page-news .news-echo__more a:hover,
.page-news .news-echo__more a:focus-visible {
  border-bottom-color: var(--wl-cyan);
  color: #fff;
}

.page-news .wl-section--deep .wl-section__title {
  color: var(--wl-paper);
}

.page-news .wl-section--deep .wl-section__num {
  color: rgba(251, 250, 247, 0.55);
}

/* ---------- 平板与桌面 ---------- */
@media (min-width: 720px) {
  .page-news .news-cover {
    padding: 56px 0 58px;
  }

  .page-news .news-changelog {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    align-items: start;
    gap: 34px;
  }

  .page-news .news-changelog__panel {
    padding: 32px 30px 30px;
  }

  .page-news .news-series {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
}

@media (min-width: 1024px) {
  .page-news .news-cover__inner {
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    align-items: end;
    gap: 48px;
  }

  .page-news .news-cover__index {
    padding-top: 0;
    padding-left: 24px;
    border-top: none;
    border-left: 1px solid rgba(251, 250, 247, 0.22);
  }

  .page-news .news-feed {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    gap: 44px;
  }

  .page-news .news-feed__side {
    position: sticky;
    top: 96px;
  }

  .page-news .news-filter {
    flex-direction: column;
    align-items: flex-start;
  }

  .page-news .news-item__title {
    font-size: 19px;
  }

  .page-news .news-echo {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 56px;
    align-items: start;
  }

  .page-news .news-echo__stats {
    padding-top: 0;
    padding-left: 32px;
    border-top: none;
    border-left: 1px solid rgba(251, 250, 247, 0.2);
  }

  .page-news .news-echo__stats .wl-data {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .page-news .news-echo__stats .wl-data__item {
    display: block;
    padding-bottom: 0;
    border-bottom: none;
  }

  .page-news .news-echo__stats .wl-data__num {
    font-size: 62px;
  }

  .page-news .news-echo__stats .wl-data__note {
    display: block;
    margin-top: 8px;
  }

  .page-news .news-series {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .page-news .news-cover__title {
    max-width: 16em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-news .news-item {
    transition: none;
  }
}