.page-home {
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(232, 178, 60, .095), transparent 58%),
    var(--ink-abyss);
  color: var(--text-strong);
  font-family: var(--f-body);
}

.page-home a {
  color: inherit;
}

.page-home .c5-sticky {
  position: sticky;
  top: 24px;
}

/* ---------- 刊头首屏 ---------- */

.ph-hero {
  position: relative;
  padding: clamp(26px, 4.4vw, 58px) 0 clamp(24px, 3.6vw, 46px);
  border-bottom: 1px solid var(--line-hair);
  overflow: hidden;
}

.ph-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, var(--line-hair) 0 1px, transparent 1px 88px);
  opacity: .4;
  pointer-events: none;
}

.ph-hero::after {
  content: "";
  position: absolute;
  top: -170px;
  right: -140px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(232, 178, 60, .2), transparent 66%);
  pointer-events: none;
}

.ph-hero__inner {
  position: relative;
  display: grid;
  gap: clamp(20px, 3vw, 38px);
}

.ph-hero__aside {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.ph-stamp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 9px 16px;
  border: 1px solid var(--line-hair);
  border-radius: var(--r-pill);
  background: rgba(18, 34, 47, .74);
}

.ph-stamp__sep {
  color: var(--signal-red);
}

.ph-stamp__clock {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t22);
  font-weight: 700;
  color: var(--warm-gold);
  letter-spacing: .02em;
}

.ph-hero__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--t14);
  color: var(--text-soft);
}

.ph-hero__main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.ph-hero__title {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(34px, 6.4vw, 72px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.ph-hero__lede {
  max-width: 46ch;
  margin: 0;
  font-size: var(--t17);
  line-height: 1.7;
  color: var(--text-soft);
}

.ph-hero__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.ph-hero__fig {
  position: relative;
  margin: 0;
  border: 1px solid var(--line-hair);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-panel);
}

.ph-hero__fig img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ---------- 区块标题 ---------- */

.ph-sec__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: clamp(20px, 2.6vw, 32px);
}

.ph-sec__head--tight {
  margin-bottom: 18px;
}

.ph-sec__title {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(24px, 3.4vw, 44px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
}

.ph-sec__lede {
  max-width: 64ch;
  margin: 0;
  font-size: var(--t17);
  line-height: 1.7;
  color: var(--text-soft);
}

/* ---------- 开奖时间选择 ---------- */

.ph-pick {
  padding: clamp(34px, 5vw, 68px) 0;
  border-bottom: 1px solid var(--line-hair);
}

.ph-pick__grid {
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  grid-template-columns: 1fr;
}

.ph-pick__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 22px 22px 24px;
  border: 1px solid var(--line-hair);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(18, 34, 47, .92), rgba(15, 29, 41, .92));
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.ph-pick__card:hover {
  transform: translateY(-2px);
  border-color: var(--warm-gold);
}

.ph-pick__card--main {
  background: linear-gradient(180deg, rgba(240, 68, 56, .12), rgba(15, 29, 41, .94));
}

.ph-pick__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.ph-pick__hour {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 700;
  line-height: 1;
  color: var(--warm-gold);
  letter-spacing: -.01em;
}

.ph-pick__meta {
  margin: 0;
  font-size: var(--t14);
  color: var(--text-soft);
}

.ph-pick__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 14px 0 0;
  list-style: none;
  border-top: 1px dashed var(--line-hair);
}

.ph-pick__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--t14);
}

.ph-pick__list .c5-mono {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t17);
  color: var(--text-strong);
}

.ph-pick__hint {
  margin: 0;
  font-size: var(--t12);
  line-height: 1.6;
  color: var(--state-pending);
}

.ph-pick__foot {
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  font-size: var(--t14);
  line-height: 1.7;
  color: var(--text-soft);
}

.ph-pick__foot a {
  color: var(--warm-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 主看板：三栏 ---------- */

.ph-board {
  padding: clamp(34px, 5vw, 68px) 0;
  border-bottom: 1px solid var(--line-hair);
}

.ph-board__grid {
  display: grid;
  gap: clamp(22px, 3vw, 36px);
  grid-template-columns: minmax(0, 1fr);
}

.ph-rail__inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ph-rail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ph-legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t12);
  line-height: 1.5;
  color: var(--text-soft);
}

.ph-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ph-board__feed {
  min-width: 0;
}

.ph-figstrip {
  margin: 0 0 22px;
  border: 1px solid var(--line-hair);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ink-panel-2);
}

.ph-figstrip img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.ph-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ph-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 14px;
  align-items: center;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--line-hair);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(18, 34, 47, .9), rgba(15, 29, 41, .9));
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.ph-row:hover {
  transform: translateY(-2px);
  border-color: var(--warm-gold);
}

.ph-row[hidden] {
  display: none;
}

.ph-row__dot {
  align-self: center;
}

.ph-row__main {
  min-width: 0;
}

.ph-row__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}

.ph-row__line--sub {
  margin-top: 5px;
  font-size: var(--t12);
}

.ph-row__lot {
  font-size: var(--t14);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-strong);
}

.ph-row__issue {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(24px, 3.2vw, 30px);
  font-weight: 700;
  line-height: 1;
  color: var(--text-strong);
  letter-spacing: -.01em;
}

.ph-row__sep {
  color: var(--line-hair);
}

.ph-row__state {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
}

.ph-feed__more {
  margin: 20px 0 0;
  font-size: var(--t14);
  line-height: 1.7;
  color: var(--text-soft);
}

.ph-feed__more a {
  color: var(--warm-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 右侧评测卡 ---------- */

.ph-eval {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 20px 22px;
}

.ph-eval__fig {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-hair);
  object-fit: cover;
}

.ph-eval__title {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--t22);
  font-weight: 800;
  line-height: 1.2;
}

.ph-eval__desc {
  margin: 0;
  font-size: var(--t14);
  line-height: 1.65;
  color: var(--text-soft);
}

.ph-eval__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ph-eval__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
}

.ph-eval__name {
  font-size: var(--t12);
  color: var(--text-strong);
  overflow-wrap: anywhere;
}

.ph-eval__val {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t12);
  color: var(--warm-gold);
  text-align: right;
  white-space: nowrap;
}

.ph-eval__bar {
  grid-column: 1 / -1;
  display: block;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--line-hair);
  overflow: hidden;
}

.ph-eval__fill {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
}

.ph-eval__fill--5 {
  width: 100%;
  background: var(--warm-gold);
}

.ph-eval__fill--4 {
  width: 82%;
  background: var(--state-live);
}

.ph-eval__fill--3 {
  width: 62%;
  background: var(--state-expired);
}

.ph-eval__cta {
  align-self: flex-start;
}

/* ---------- 内容中心 ---------- */

.ph-hub {
  padding: clamp(34px, 5vw, 68px) 0;
  border-bottom: 1px solid var(--line-hair);
}

.ph-hub__grid {
  display: grid;
  gap: clamp(18px, 2.6vw, 30px);
  grid-template-columns: minmax(0, 1fr);
}

.ph-hub__fig {
  margin: 0;
  border: 1px solid var(--line-hair);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-panel-2);
}

.ph-hub__fig img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.ph-hub__cats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ph-cat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line-hair);
  border-radius: var(--r-md);
  background: var(--ink-panel);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.ph-cat:hover {
  transform: translateY(-2px);
  border-color: var(--warm-gold);
}

.ph-cat__name {
  font-size: var(--t17);
  font-weight: 700;
}

.ph-cat__n {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t22);
  font-weight: 700;
  color: var(--warm-gold);
  line-height: 1;
}

.ph-hub__series {
  margin-top: clamp(22px, 3vw, 34px);
  padding-top: clamp(20px, 2.6vw, 30px);
  border-top: 1px solid var(--line-hair);
}

.ph-series {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.ph-series a {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid var(--line-hair);
  border-radius: var(--r-pill);
  font-size: var(--t14);
  color: var(--text-strong);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.ph-series a:hover {
  border-color: var(--signal-red);
  color: var(--signal-red);
}

.ph-hub__note {
  margin: 14px 0 0;
  font-size: var(--t12);
  color: var(--text-soft);
}

/* ---------- 服务与合作 ---------- */

.ph-serve {
  padding: clamp(34px, 5vw, 68px) 0 clamp(44px, 6vw, 76px);
}

.ph-serve__grid {
  display: grid;
  gap: clamp(22px, 3vw, 36px);
  grid-template-columns: minmax(0, 1fr);
}

.ph-serve__lead {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.ph-serve__facts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 0;
  padding: 18px 0 0;
  list-style: none;
  border-top: 1px solid var(--line-hair);
  font-size: var(--t14);
  color: var(--text-soft);
}

.ph-serve__facts .c5-mono {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t22);
  font-weight: 700;
  margin-right: 6px;
}

.ph-serve__cards {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
}

.ph-serve__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 14px;
  align-items: center;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--line-hair);
  border-radius: var(--r-md);
  background: var(--ink-panel);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.ph-serve__card:hover {
  transform: translateY(-2px);
  border-color: var(--signal-red);
}

.ph-serve__card .c5-label {
  grid-column: 1;
}

.ph-serve__name {
  grid-column: 1;
  font-size: var(--t17);
  font-weight: 700;
  line-height: 1.35;
}

.ph-serve__go {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--signal-red);
  font-size: var(--t22);
}

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

@media (min-width: 640px) {
  .ph-pick__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ph-pick__card--main {
    grid-column: 1 / -1;
  }

  .ph-hub__cats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ph-serve__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .ph-hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    grid-template-areas:
      "aside fig"
      "main  fig";
    align-items: start;
    column-gap: clamp(28px, 4vw, 56px);
  }

  .ph-hero__aside {
    grid-area: aside;
  }

  .ph-hero__main {
    grid-area: main;
  }

  .ph-hero__fig {
    grid-area: fig;
    align-self: end;
  }

  .ph-pick__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ph-pick__card--main {
    grid-column: auto;
  }

  .ph-hub__grid {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: start;
  }

  .ph-serve__grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: start;
  }
}

@media (min-width: 1000px) {
  .ph-board__grid {
    grid-template-columns: 186px minmax(0, 1fr) 320px;
    align-items: start;
  }

  .ph-rail__inner {
    position: sticky;
    top: 24px;
  }

  .ph-rail__tags {
    flex-direction: column;
    align-items: stretch;
  }

  .ph-rail__tags .c5-tag {
    justify-content: flex-start;
    width: 100%;
  }

  .ph-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 18px 22px;
  }

  .ph-row__state {
    grid-column: 3;
    justify-self: end;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }

  .ph-hub__cats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
<<<END>>>

等等，我得再核对一下间距和取值。好了，收尾。

还有一点：`.ph-hero` 用的是 `overflow: hidden`，这样能把 `::after` 光晕裁掉，不会撑出水平滚动，可以。

`.ph-row[hidden] { display: none; }` 是为了保证标签筛选在整页过滤时对 flex 或 grid 布局也能生效。行，没问题。

收尾。
<main id="main-content" class="page-home">

  <section class="ph-hero">
    <div class="c5-wrap ph-hero__inner">

      <div class="ph-hero__aside">
        <p class="ph-stamp">
          <span class="c5-label">当期看板</span>
          <span class="ph-stamp__sep" aria-hidden="true">⟶</span>
          <span class="c5-mono ph-stamp__clock" data-clock>21:07:36</span>
          <span class="c5-soft">24 小时制</span>
        </p>
        <p class="ph-hero__note">
          <span class="c5-dot c5-dot--live" aria-hidden="true"></span>
          最近一次更新 <span class="c5-mono c5-live-text">刚刚</span> · 第 7 版时间看板
        </p>
      </div>

      <div class="ph-hero__main">
        <p class="c5-kicker">开奖时间 · 期号状态 · 入口用时</p>
        <h1 class="ph-hero__title">
          开奖时间与期号更新，<span class="c5-gold">一屏看清</span>
        </h1>
        <p class="ph-hero__lede">
          500彩讯把每天的开奖时间、期号状态和刷新用时集中在一块会走的看板上。你打开就能看到哪一期刚更新、哪个入口先出结果，不用在几个页面之间来回翻。
        </p>
        <div class="ph-hero__acts">
          <a class="c5-btn c5-btn--red" href="#time-picker">选择开奖时间</a>
          <a class="c5-btn c5-btn--ghost" href="#live-feed">看最近更新</a>
          <button class="c5-btn c5-btn--ghost c5-btn--sm" type="button" data-copy-latest>复制最近期号</button>
        </div>
      </div>

      <figure class="ph-hero__fig">
        <img src="{zhanqunpic:h:900w:1600}" width="1600" height="900" alt="深墨蓝底上横向排布的时间刻度线与脉冲光点，表现开奖时间持续推进的节奏">
      </figure>

    </div>
  </section>

  <section class="ph-pick" id="time-picker">
    <div class="c5-wrap">
      <header class="ph-sec__head">
        <h2 class="ph-sec__title">开奖时间选择</h2>
        <p class="ph-sec__lede">先认准你常看的开奖档口，再看这一档里哪些彩种已经出结果。每天固定来的话，记住一个时间点就够了。</p>
      </header>

      <div class="ph-pick__grid">

        <article class="ph-pick__card ph-pick__card--main">
          <div class="ph-pick__top">
            <span class="ph-pick__hour c5-mono">20:30</span>
            <span class="c5-status c5-status--live">已更新</span>
          </div>
          <p class="ph-pick__meta">4 个彩种 · 今日用时 51–95 秒</p>
          <ul class="ph-pick__list">
            <li><span class="c5-mono">大乐透</span><span class="c5-soft">95 秒</span></li>
            <li><span class="c5-mono">排列三</span><span class="c5-soft">51 秒</span></li>
            <li><span class="c5-mono">排列五</span><span class="c5-soft">54 秒</span></li>
            <li><span class="c5-mono">七星彩</span><span class="c5-soft">88 秒</span></li>
          </ul>
        </article>

        <article class="ph-pick__card">
          <div class="ph-pick__top">
            <span class="ph-pick__hour c5-mono">21:15</span>
            <span class="c5-status c5-status--live">已更新</span>
          </div>
          <p class="ph-pick__meta">3 个彩种 · 今日用时 42–78 秒</p>
          <ul class="ph-pick__list">
            <li><span class="c5-mono">双色球</span><span class="c5-soft">78 秒</span></li>
            <li><span class="c5-mono">福彩3D</span><span class="c5-soft">42 秒</span></li>
            <li><span class="c5-mono">七乐彩</span><span class="c5-soft">66 秒</span></li>
          </ul>
        </article>

        <article class="ph-pick__card">
          <div class="ph-pick__top">
            <span class="ph-pick__hour c5-mono">21:30</span>
            <span class="c5-status c5-status--pending">待更新</span>
          </div>
          <p class="ph-pick__meta">1 个彩种 · 下一期约 23 分钟后</p>
          <ul class="ph-pick__list">
            <li><span class="c5-mono">快乐8</span><span class="c5-pending-text">等待中</span></li>
          </ul>
          <p class="ph-pick__hint">到点后页面自动刷新，状态点由琥珀转青绿。</p>
        </article>

      </div>

      <p class="ph-pick__foot">
        记不住档口？把常用彩种加进浏览器的期号悬浮条，
        <a href="/download/">下载中心</a> 里有三款工具的安装包与体积说明。
      </p>
    </div>
  </section>

  <section class="ph-board" id="live-feed">
    <div class="c5-wrap ph-board__grid">

      <aside class="ph-board__rail">
        <div class="c5-sticky ph-rail__inner">
          <p class="c5-label">按彩种筛</p>
          <div class="c5-tags ph-rail__tags" data-tags>
            <button class="c5-tag" type="button" data-tag="双色球" data-state="live" aria-pressed="false"><span class="c5-tag__dot"></span>双色球</button>
            <button class="c5-tag" type="button" data-tag="福彩3D" data-state="live" aria-pressed="false"><span class="c5-tag__dot"></span>福彩3D</button>
            <button class="c5-tag" type="button" data-tag="七乐彩" data-state="live" aria-pressed="false"><span class="c5-tag__dot"></span>七乐彩</button>
            <button class="c5-tag" type="button" data-tag="大乐透" data-state="live" aria-pressed="false"><span class="c5-tag__dot"></span>大乐透</button>
            <button class="c5-tag" type="button" data-tag="排列三" data-state="live" aria-pressed="false"><span class="c5-tag__dot"></span>排列三</button>
            <button class="c5-tag" type="button" data-tag="排列五" data-state="live" aria-pressed="false"><span class="c5-tag__dot"></span>排列五</button>
            <button class="c5-tag" type="button" data-tag="七星彩" data-state="live" aria-pressed="false"><span class="c5-tag__dot"></span>七星彩</button>
            <button class="c5-tag" type="button" data-tag="快乐8" data-state="pending" aria-pressed="false"><span class="c5-tag__dot"></span>快乐8</button>
          </div>

          <p class="c5-label">状态说明</p>
          <ul class="ph-legend">
            <li><span class="c5-dot c5-dot--live" aria-hidden="true"></span>已更新，页面已出结果</li>
            <li><span class="c5-dot c5-dot--pending" aria-hidden="true"></span>待更新，到点自动刷新</li>
            <li><span class="c5-dot c5-dot--expired" aria-hidden="true"></span>已过期，看往期档案</li>
          </ul>
        </div>
      </aside>

      <div class="ph-board__feed">
        <header class="ph-sec__head ph-sec__head--tight">
          <h2 class="ph-sec__title">最近更新的期号</h2>
          <p class="ph-sec__lede">按刷新时间倒序。看到状态点变青绿，就说明这一期已经落定。</p>
        </header>

        <figure class="ph-figstrip">
          <img src="{zhanqunpic:h:480w:1200}" width="1200" height="480" alt="青绿、琥珀与灰蓝三枚状态圆点并列，各自带一条短刻度线，对应已更新、待更新与已过期" loading="lazy" decoding="async">
        </figure>

        <div class="ph-feed">

          <article class="ph-row" data-lottery="双色球" data-reveal>
            <span class="ph-row__dot c5-dot c5-dot--live" aria-hidden="true"></span>
            <div class="ph-row__main">
              <p class="ph-row__line">
                <span class="ph-row__lot">双色球</span>
                <span class="ph-row__issue c5-mono" data-latest-issue>2024118</span>
              </p>
              <p class="ph-row__line ph-row__line--sub">
                <span class="c5-mono c5-gold">21:15</span>
                <span class="c5-soft">开奖</span>
                <span class="ph-row__sep" aria-hidden="true">·</span>
                <span class="c5-mono">78 秒</span>
                <span class="c5-soft">完成刷新</span>
              </p>
            </div>
            <div class="ph-row__state">
              <span class="c5-status c5-status--live">已更新</span>
              <span class="c5-label">刚刚</span>
            </div>
          </article>

          <article class="ph-row" data-lottery="福彩3D" data-reveal>
            <span class="ph-row__dot c5-dot c5-dot--live" aria-hidden="true"></span>
            <div class="ph-row__main">
              <p class="ph-row__line">
                <span class="ph-row__lot">福彩3D</span>
                <span class="ph-row__issue c5-mono">2024118</span>
              </p>
              <p class="ph-row__line ph-row__line--sub">
                <span class="c5-mono c5-gold">21:15</span>
                <span class="c5-soft">开奖</span>
                <span class="ph-row__sep" aria-hidden="true">·</span>
                <span class="c5-mono">42 秒</span>
                <span class="c5-soft">完成刷新</span>
              </p>
            </div>
            <div class="ph-row__state">
              <span class="c5-status c5-status--live">已更新</span>
              <span class="c5-label">刚刚</span>
            </div>
          </article>

          <article class="ph-row" data-lottery="七乐彩" data-reveal>
            <span class="ph-row__dot c5-dot c5-dot--live" aria-hidden="true"></span>
            <div class="ph-row__main">
              <p class="ph-row__line">
                <span class="ph-row__lot">七乐彩</span>
                <span class="ph-row__issue c5-mono">2024118</span>
              </p>
              <p class="ph-row__line ph-row__line--sub">
                <span class="c5-mono c5-gold">21:15</span>
                <span class="c5-soft">开奖</span>
                <span class="ph-row__sep" aria-hidden="true">·</span>
                <span class="c5-mono">66 秒</span>
                <span class="c5-soft">完成刷新</span>
              </p>
            </div>
            <div class="ph-row__state">
              <span class="c5-status c5-status--live">已更新</span>
              <span class="c5-label">3 分钟前</span>
            </div>
          </article>

          <article class="ph-row" data-lottery="大乐透" data-reveal>
            <span class="ph-row__dot c5-dot c5-dot--live" aria-hidden="true"></span>
            <div class="ph-row__main">
              <p class="ph-row__line">
                <span class="ph-row__lot">大乐透</span>
                <span class="ph-row__issue c5-mono">24118</span>
              </p>
              <p class="ph-row__line ph-row__line--sub">
                <span class="c5-mono c5-gold">20:30</span>
                <span class="c5-soft">开奖</span>
                <span class="ph-row__sep" aria-hidden="true">·</span>
                <span class="c5-mono">95 秒</span>
                <span class="c5-soft">完成刷新</span>
              </p>
            </div>
            <div class="ph-row__state">
              <span class="c5-status c5-status--live">已更新</span>
              <span class="c5-label">今日</span>
            </div>
          </article>

          <article class="ph-row" data-lottery="排列三" data-reveal>
            <span class="ph-row__dot c5-dot c5-dot--live" aria-hidden="true"></span>
            <div class="ph-row__main">
              <p class="ph-row__line">
                <span class="ph-row__lot">排列三</span>
                <span class="ph-row__issue c5-mono">24298</span>
              </p>
              <p class="ph-row__line ph-row__line--sub">
                <span class="c5-mono c5-gold">20:30</span>
                <span class="c5-soft">开奖</span>
                <span class="ph-row__sep" aria-hidden="true">·</span>
                <span class="c5-mono">51 秒</span>
                <span class="c5-soft">完成刷新</span>
              </p>
            </div>
            <div class="ph-row__state">
              <span class="c5-status c5-status--live">已更新</span>
              <span class="c5-label">今日</span>
            </div>
          </article>

          <article class="ph-row" data-lottery="排列五" data-reveal>
            <span class="ph-row__dot c5-dot c5-dot--live" aria-hidden="true"></span>
            <div class="ph-row__main">
              <p class="ph-row__line">
                <span class="ph-row__lot">排列五</span>
                <span class="ph-row__issue c5-mono">24298</span>
              </p>
              <p class="ph-row__line ph-row__line--sub">
                <span class="c5-mono c5-gold">20:30</span>
                <span class="c5-soft">开奖</span>
                <span class="ph-row__sep" aria-hidden="true">·</span>
                <span class="c5-mono">54 秒</span>
                <span class="c5-soft">完成刷新</span>
              </p>
            </div>
            <div class="ph-row__state">
              <span class="c5-status c5-status--live">已更新</span>
              <span class="c5-label">今日</span>
            </div>
          </article>

          <article class="ph-row" data-lottery="快乐8" data-reveal>
            <span class="ph-row__dot c5-dot c5-dot--pending" aria-hidden="true"></span>
            <div class="ph-row__main">
              <p class="ph-row__line">
                <span class="ph-row__lot">快乐8</span>
                <span class="ph-row__issue c5-mono">2024298</span>
              </p>
              <p class="ph-row__line ph-row__line--sub">
                <span class="c5-mono c5-pending-text">21:30</span>
                <span class="c5-soft">开奖</span>
                <span class="ph-row__sep" aria-hidden="true">·</span>
                <span class="c5-soft">约 23 分钟后刷出</span>
              </p>
            </div>
            <div class="ph-row__state">
              <span class="c5-status c5-status--pending">待更新</span>
              <span class="c5-label">倒计时中</span>
            </div>
          </article>

          <article class="ph-row" data-lottery="七星彩" data-reveal>
            <span class="ph-row__dot c5-dot c5-dot--expired" aria-hidden="true"></span>
            <div class="ph-row__main">
              <p class="ph-row__line">
                <span class="ph-row__lot">七星彩</span>
                <span class="ph-row__issue c5-mono">24117</span>
              </p>
              <p class="ph-row__line ph-row__line--sub">
                <span class="c5-mono c5-expired-text">20:30</span>
                <span class="c5-soft">开奖</span>
                <span class="ph-row__sep" aria-hidden="true">·</span>
                <span class="c5-mono">88 秒</span>
                <span class="c5-soft">昨日刷新</span>
              </p>
            </div>
            <div class="ph-row__state">
              <span class="c5-status c5-status--expired">已过期</span>
              <span class="c5-label">可查档案</span>
            </div>
          </article>

        </div>

        <p class="ph-feed__more">
          想往前翻？<a href="/column/">期号档案</a> 可回溯至 2019 年，累计 21 万条记录。</p>
      </div>

      <aside class="ph-board__side">
        <div class="c5-sticky">
          <div class="ph-eval c5-card">
            <img class="ph-eval__fig" src="{zhanqunpic:h:640w:960}" width="960" height="640" alt="五级刻度的横向条形对比图，暖金标注最快档，灰蓝标注最慢档" loading="lazy" decoding="async">
            <h3 class="ph-eval__title">常用入口更新用时</h3>
            <p class="ph-eval__desc">同一次开奖，不同入口出结果的时间能差一分钟以上。我们按刷新用时把 36 个常用入口排了序。</p>
            <ul class="ph-eval__list">
              <li class="ph-eval__item">
                <span class="ph-eval__name">时间看板客户端 v7.2</span>
                <span class="ph-eval__bar"><i class="ph-eval__fill ph-eval__fill--5"></i></span>
                <span class="ph-eval__val c5-mono">75 秒</span>
              </li>
              <li class="ph-eval__item">
                <span class="ph-eval__name">站内开奖时间选择</span>
                <span class="ph-eval__bar"><i class="ph-eval__fill ph-eval__fill--5"></i></span>
                <span class="ph-eval__val c5-mono">90 秒</span>
              </li>
              <li class="ph-eval__item">
                <span class="ph-eval__name">浏览器期号悬浮条 v3.4</span>
                <span class="ph-eval__bar"><i class="ph-eval__fill ph-eval__fill--4"></i></span>
                <span class="ph-eval__val c5-mono">96 秒</span>
              </li>
              <li class="ph-eval__item">
                <span class="ph-eval__name">桌面组件 v2.8</span>
                <span class="ph-eval__bar"><i class="ph-eval__fill ph-eval__fill--4"></i></span>
                <span class="ph-eval__val c5-mono">105 秒</span>
              </li>
              <li class="ph-eval__item">
                <span class="ph-eval__name">RSS／JSON 订阅</span>
                <span class="ph-eval__bar"><i class="ph-eval__fill ph-eval__fill--3"></i></span>
                <span class="ph-eval__val c5-mono">150 秒</span>
              </li>
            </ul>
            <a class="c5-btn c5-btn--ghost c5-btn--sm ph-eval__cta" href="/download/">看全部入口评测</a>
          </div>
        </div>
      </aside>

    </div>
  </section>

  <section class="ph-hub" id="content-hub">
    <div class="c5-wrap">
      <header class="ph-sec__head">
        <h2 class="ph-sec__title">内容中心与分类标签</h2>
        <p class="ph-sec__lede">8 个彩种大类、42 个子栏目，从当期结果一路排到往期档案。挑一个常看的，下次直接从这里进。</p>
      </header>

      <div class="ph-hub__grid">
        <figure class="ph-hub__fig">
          <img src="{zhanqunpic:h:600w:1200}" width="1200" height="600" alt="网格叠加的抽象矩形阵列，每格内一个极简几何图标，对应八个彩种大类" loading="lazy" decoding="async">
        </figure>

        <div class="ph-hub__cats">
          <a class="ph-cat" href="/column/"><span class="ph-cat__name">双色球</span><span class="ph-cat__n c5-mono">7</span><span class="c5-label">子栏目</span></a>
          <a class="ph-cat" href="/column/"><span class="ph-cat__name">福彩3D</span><span class="ph-cat__n c5-mono">6</span><span class="c5-label">子栏目</span></a>
          <a class="ph-cat" href="/column/"><span class="ph-cat__name">七乐彩</span><span class="ph-cat__n c5-mono">5</span><span class="c5-label">子栏目</span></a>
          <a class="ph-cat" href="/column/"><span class="ph-cat__name">大乐透</span><span class="ph-cat__n c5-mono">6</span><span class="c5-label">子栏目</span></a>
          <a class="ph-cat" href="/column/"><span class="ph-cat__name">排列三</span><span class="ph-cat__n c5-mono">5</span><span class="c5-label">子栏目</span></a>
          <a class="ph-cat" href="/column/"><span class="ph-cat__name">排列五</span><span class="ph-cat__n c5-mono">4</span><span class="c5-label">子栏目</span></a>
          <a class="ph-cat" href="/column/"><span class="ph-cat__name">七星彩</span><span class="ph-cat__n c5-mono">5</span><span class="c5-label">子栏目</span></a>
          <a class="ph-cat" href="/column/"><span class="ph-cat__name">快乐8</span><span class="ph-cat__n c5-mono">4</span><span class="c5-label">子栏目</span></a>
        </div>
      </div>

      <div class="ph-hub__series">
        <p class="c5-label">品牌专栏系列</p>
        <ul class="ph-series">
          <li><a href="/column/">期号时间观察</a></li>
          <li><a href="/column/">入口评测报告</a></li>
          <li><a href="/column/">数据更新周记</a></li>
          <li><a href="/column/">彩种分类档案</a></li>
          <li><a href="/column/">用户上手笔记</a></li>
          <li><a href="/column/">行业合规观察</a></li>
        </ul>
        <p class="ph-hub__note">6 个系列，每周至少更新 3 篇，入口评测报告按月发布。</p>
      </div>
    </div>
  </section>

  <section class="ph-serve" id="service">
    <div class="c5-wrap">
      <div class="ph-serve__grid">

        <div class="ph-serve__lead">
          <h2 class="ph-sec__title">需要人工协助，或想接入时间源</h2>
          <p class="ph-sec__lede">38 人编辑与数据团队，其中 9 人专做校对，排班覆盖 07:00–24:00。期号对不上、时间有疑问，或者你想把这份时间源接进自己的选题排期里，都可以直接找我们。</p>
          <ul class="ph-serve__facts">
            <li><span class="c5-mono c5-gold">31</span> 个省级行政区有访客长期使用</li>
            <li><span class="c5-mono c5-gold">60</span> 余家媒体与地方资讯平台已建立内容合作</li>
            <li><span class="c5-mono c5-gold">4</span> 小时内给予邮件答复</li>
          </ul>
        </div>

        <div class="ph-serve__cards">
          <a class="ph-serve__card" href="/find-us/">
            <span class="c5-label">人工协助</span>
            <span class="ph-serve__name">核对某期号或反馈问题</span>
            <span class="ph-serve__go" aria-hidden="true">⟶</span>
          </a>
          <a class="ph-serve__card" href="/values/">
            <span class="c5-label">内容合作</span>
            <span class="ph-serve__name">接入时间源与档案内容</span>
            <span class="ph-serve__go" aria-hidden="true">⟶</span>
          </a>
          <a class="ph-serve__card" href="/faqs/">
            <span class="c5-label">常见问答</span>
            <span class="ph-serve__name">状态色与刷新频率怎么看</span>
            <span class="ph-serve__go" aria-hidden="true">⟶</span>
          </a>
          <a class="ph-serve__card" href="/download/">
            <span class="c5-label">工具与订阅</span>
            <span class="ph-serve__name">装一款随时看期号的客户端</span>
            <span class="ph-serve__go" aria-hidden="true">⟶</span>
          </a>
        </div>

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

</main>

.page-home {
  background:
    radial-gradient(120% 70% at 100% 0%, rgba(232, 178, 60, .095), transparent 58%),
    var(--ink-abyss);
  color: var(--text-strong);
  font-family: var(--f-body);
}

.page-home a {
  color: inherit;
}

.page-home .c5-sticky {
  position: sticky;
  top: 24px;
}

/* ---------- 刊头首屏 ---------- */

.ph-hero {
  position: relative;
  padding: clamp(26px, 4.4vw, 58px) 0 clamp(24px, 3.6vw, 46px);
  border-bottom: 1px solid var(--line-hair);
  overflow: hidden;
}

.ph-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(90deg, var(--line-hair) 0 1px, transparent 1px 88px);
  opacity: .4;
  pointer-events: none;
}

.ph-hero::after {
  content: "";
  position: absolute;
  top: -170px;
  right: -140px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(232, 178, 60, .2), transparent 66%);
  pointer-events: none;
}

.ph-hero__inner {
  position: relative;
  display: grid;
  gap: clamp(20px, 3vw, 38px);
}

.ph-hero__aside {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.ph-stamp {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: 100%;
  margin: 0;
  padding: 9px 16px;
  border: 1px solid var(--line-hair);
  border-radius: var(--r-pill);
  background: rgba(18, 34, 47, .74);
}

.ph-stamp__sep {
  color: var(--signal-red);
}

.ph-stamp__clock {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t22);
  font-weight: 700;
  color: var(--warm-gold);
  letter-spacing: .02em;
}

.ph-hero__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--t14);
  color: var(--text-soft);
}

.ph-hero__main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.ph-hero__title {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(34px, 6.4vw, 72px);
  font-weight: 900;
  line-height: 1.04;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.ph-hero__lede {
  max-width: 46ch;
  margin: 0;
  font-size: var(--t17);
  line-height: 1.7;
  color: var(--text-soft);
}

.ph-hero__acts {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.ph-hero__fig {
  position: relative;
  margin: 0;
  border: 1px solid var(--line-hair);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-panel);
}

.ph-hero__fig img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ---------- 区块标题 ---------- */

.ph-sec__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: clamp(20px, 2.6vw, 32px);
}

.ph-sec__head--tight {
  margin-bottom: 18px;
}

.ph-sec__title {
  margin: 0;
  font-family: var(--f-display);
  font-size: clamp(24px, 3.4vw, 44px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.02em;
}

.ph-sec__lede {
  max-width: 64ch;
  margin: 0;
  font-size: var(--t17);
  line-height: 1.7;
  color: var(--text-soft);
}

/* ---------- 开奖时间选择 ---------- */

.ph-pick {
  padding: clamp(34px, 5vw, 68px) 0;
  border-bottom: 1px solid var(--line-hair);
}

.ph-pick__grid {
  display: grid;
  gap: clamp(14px, 2vw, 22px);
  grid-template-columns: 1fr;
}

.ph-pick__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  padding: 22px 22px 24px;
  border: 1px solid var(--line-hair);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(18, 34, 47, .92), rgba(15, 29, 41, .92));
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.ph-pick__card:hover {
  transform: translateY(-2px);
  border-color: var(--warm-gold);
}

.ph-pick__card--main {
  background: linear-gradient(180deg, rgba(240, 68, 56, .12), rgba(15, 29, 41, .94));
}

.ph-pick__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.ph-pick__hour {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(30px, 4vw, 44px);
  font-weight: 700;
  line-height: 1;
  color: var(--warm-gold);
  letter-spacing: -.01em;
}

.ph-pick__meta {
  margin: 0;
  font-size: var(--t14);
  color: var(--text-soft);
}

.ph-pick__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 14px 0 0;
  list-style: none;
  border-top: 1px dashed var(--line-hair);
}

.ph-pick__list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--t14);
}

.ph-pick__list .c5-mono {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t17);
  color: var(--text-strong);
}

.ph-pick__hint {
  margin: 0;
  font-size: var(--t12);
  line-height: 1.6;
  color: var(--state-pending);
}

.ph-pick__foot {
  margin: clamp(20px, 2.4vw, 28px) 0 0;
  font-size: var(--t14);
  line-height: 1.7;
  color: var(--text-soft);
}

.ph-pick__foot a {
  color: var(--warm-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 主看板：三栏 ---------- */

.ph-board {
  padding: clamp(34px, 5vw, 68px) 0;
  border-bottom: 1px solid var(--line-hair);
}

.ph-board__grid {
  display: grid;
  gap: clamp(22px, 3vw, 36px);
  grid-template-columns: minmax(0, 1fr);
}

.ph-rail__inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ph-rail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.ph-legend {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t12);
  line-height: 1.5;
  color: var(--text-soft);
}

.ph-legend li {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ph-board__feed {
  min-width: 0;
}

.ph-figstrip {
  margin: 0 0 22px;
  border: 1px solid var(--line-hair);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--ink-panel-2);
}

.ph-figstrip img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.ph-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ph-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 14px;
  align-items: center;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--line-hair);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, rgba(18, 34, 47, .9), rgba(15, 29, 41, .9));
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.ph-row:hover {
  transform: translateY(-2px);
  border-color: var(--warm-gold);
}

.ph-row[hidden] {
  display: none;
}

.ph-row__dot {
  align-self: center;
}

.ph-row__main {
  min-width: 0;
}

.ph-row__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}

.ph-row__line--sub {
  margin-top: 5px;
  font-size: var(--t12);
}

.ph-row__lot {
  font-size: var(--t14);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text-strong);
}

.ph-row__issue {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: clamp(24px, 3.2vw, 30px);
  font-weight: 700;
  line-height: 1;
  color: var(--text-strong);
  letter-spacing: -.01em;
}

.ph-row__sep {
  color: var(--line-hair);
}

.ph-row__state {
  grid-column: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
}

.ph-feed__more {
  margin: 20px 0 0;
  font-size: var(--t14);
  line-height: 1.7;
  color: var(--text-soft);
}

.ph-feed__more a {
  color: var(--warm-gold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- 右侧评测卡 ---------- */

.ph-eval {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px 20px 22px;
}

.ph-eval__fig {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-hair);
  object-fit: cover;
}

.ph-eval__title {
  margin: 0;
  font-family: var(--f-display);
  font-size: var(--t22);
  font-weight: 800;
  line-height: 1.2;
}

.ph-eval__desc {
  margin: 0;
  font-size: var(--t14);
  line-height: 1.65;
  color: var(--text-soft);
}

.ph-eval__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ph-eval__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: center;
}

.ph-eval__name {
  font-size: var(--t12);
  color: var(--text-strong);
  overflow-wrap: anywhere;
}

.ph-eval__val {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t12);
  color: var(--warm-gold);
  text-align: right;
  white-space: nowrap;
}

.ph-eval__bar {
  grid-column: 1 / -1;
  display: block;
  height: 6px;
  border-radius: var(--r-pill);
  background: var(--line-hair);
  overflow: hidden;
}

.ph-eval__fill {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
}

.ph-eval__fill--5 {
  width: 100%;
  background: var(--warm-gold);
}

.ph-eval__fill--4 {
  width: 82%;
  background: var(--state-live);
}

.ph-eval__fill--3 {
  width: 62%;
  background: var(--state-expired);
}

.ph-eval__cta {
  align-self: flex-start;
}

/* ---------- 内容中心 ---------- */

.ph-hub {
  padding: clamp(34px, 5vw, 68px) 0;
  border-bottom: 1px solid var(--line-hair);
}

.ph-hub__grid {
  display: grid;
  gap: clamp(18px, 2.6vw, 30px);
  grid-template-columns: minmax(0, 1fr);
}

.ph-hub__fig {
  margin: 0;
  border: 1px solid var(--line-hair);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--ink-panel-2);
}

.ph-hub__fig img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.ph-hub__cats {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ph-cat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line-hair);
  border-radius: var(--r-md);
  background: var(--ink-panel);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.ph-cat:hover {
  transform: translateY(-2px);
  border-color: var(--warm-gold);
}

.ph-cat__name {
  font-size: var(--t17);
  font-weight: 700;
}

.ph-cat__n {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t22);
  font-weight: 700;
  color: var(--warm-gold);
  line-height: 1;
}

.ph-hub__series {
  margin-top: clamp(22px, 3vw, 34px);
  padding-top: clamp(20px, 2.6vw, 30px);
  border-top: 1px solid var(--line-hair);
}

.ph-series {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.ph-series a {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid var(--line-hair);
  border-radius: var(--r-pill);
  font-size: var(--t14);
  color: var(--text-strong);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

.ph-series a:hover {
  border-color: var(--signal-red);
  color: var(--signal-red);
}

.ph-hub__note {
  margin: 14px 0 0;
  font-size: var(--t12);
  color: var(--text-soft);
}

/* ---------- 服务与合作 ---------- */

.ph-serve {
  padding: clamp(34px, 5vw, 68px) 0 clamp(44px, 6vw, 76px);
}

.ph-serve__grid {
  display: grid;
  gap: clamp(22px, 3vw, 36px);
  grid-template-columns: minmax(0, 1fr);
}

.ph-serve__lead {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

.ph-serve__facts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 0;
  padding: 18px 0 0;
  list-style: none;
  border-top: 1px solid var(--line-hair);
  font-size: var(--t14);
  color: var(--text-soft);
}

.ph-serve__facts .c5-mono {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t22);
  font-weight: 700;
  margin-right: 6px;
}

.ph-serve__cards {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr);
}

.ph-serve__card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 14px;
  align-items: center;
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--line-hair);
  border-radius: var(--r-md);
  background: var(--ink-panel);
  text-decoration: none;
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.ph-serve__card:hover {
  transform: translateY(-2px);
  border-color: var(--signal-red);
}

.ph-serve__card .c5-label {
  grid-column: 1;
}

.ph-serve__name {
  grid-column: 1;
  font-size: var(--t17);
  font-weight: 700;
  line-height: 1.35;
}

.ph-serve__go {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--signal-red);
  font-size: var(--t22);
}

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

@media (min-width: 640px) {
  .ph-pick__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ph-pick__card--main {
    grid-column: 1 / -1;
  }

  .ph-hub__cats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ph-serve__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .ph-hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    grid-template-areas:
      "aside fig"
      "main  fig";
    align-items: start;
    column-gap: clamp(28px, 4vw, 56px);
  }

  .ph-hero__aside {
    grid-area: aside;
  }

  .ph-hero__main {
    grid-area: main;
  }

  .ph-hero__fig {
    grid-area: fig;
    align-self: end;
  }

  .ph-pick__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ph-pick__card--main {
    grid-column: auto;
  }

  .ph-hub__grid {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    align-items: start;
  }

  .ph-serve__grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
    align-items: start;
  }
}

@media (min-width: 1000px) {
  .ph-board__grid {
    grid-template-columns: 186px minmax(0, 1fr) 320px;
    align-items: start;
  }

  .ph-rail__inner {
    position: sticky;
    top: 24px;
  }

  .ph-rail__tags {
    flex-direction: column;
    align-items: stretch;
  }

  .ph-rail__tags .c5-tag {
    justify-content: flex-start;
    width: 100%;
  }

  .ph-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 18px 22px;
  }

  .ph-row__state {
    grid-column: 3;
    justify-self: end;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
  }

  .ph-hub__cats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}