.page-products{
  --pg-gap:16px;
  --pg-card:linear-gradient(158deg, rgba(28,50,71,.94), rgba(11,27,43,.96));
  --pg-edge:2px solid var(--line-strong);
  --pg-edge-soft:1px solid var(--line);
  --pg-radius:3px;
  padding-bottom:56px;
}
.page-products img{max-width:100%;height:auto;display:block}
.page-products .pg-crumb-wrap{padding-top:18px}

/* ---------- hero ---------- */
.page-products .pg-hero{
  position:relative;
  padding:20px 0 28px;
  background:
    radial-gradient(120% 92% at 8% 0%, rgba(47,167,160,.22), rgba(47,167,160,0) 58%),
    repeating-linear-gradient(90deg, rgba(232,238,243,.045) 0 1px, transparent 1px 72px),
    linear-gradient(180deg, rgba(6,17,28,.9), rgba(11,27,43,.15));
  border-bottom:2px solid var(--line);
  overflow:hidden;
}
.page-products .pg-hero__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
}
.page-products .pg-hero__main .tag-label{display:inline-block;margin-bottom:14px}
.page-products .pg-hero h1{
  font-family:var(--font-serif);
  font-weight:700;
  font-size:clamp(1.95rem, 7vw, 3.2rem);
  line-height:1.2;
  letter-spacing:.01em;
  color:var(--paper);
  margin:0 0 16px;
}
.page-products .pg-hero .lede{
  font-size:clamp(.98rem, 2.4vw, 1.06rem);
  line-height:1.85;
  color:var(--mist);
  max-width:60ch;
  margin:0 0 22px;
}
.page-products .pg-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.page-products .pg-hero__aside{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.page-products .quick{
  border:var(--pg-edge-soft);
  border-left:4px solid var(--steel);
  background:rgba(28,50,71,.55);
  padding:14px 16px;
  display:grid;
  gap:4px;
}
.page-products .quick--lake{border-left-color:var(--lake);background:linear-gradient(120deg, rgba(47,167,160,.18), rgba(28,50,71,.6))}
.page-products .quick--legacy{border-left-color:var(--legacy);background:linear-gradient(120deg, rgba(124,143,163,.16), rgba(28,50,71,.5))}
.page-products .quick__label{
  font-size:.72rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--legacy);
}
.page-products .quick__value{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:1.5rem;
  line-height:1.2;
  color:var(--amber);
  font-variant-numeric:tabular-nums;
}
.page-products .quick__note{
  font-size:.82rem;
  line-height:1.6;
  color:rgba(232,238,243,.72);
}

.page-products .pg-figure{padding-top:26px}

/* ---------- sections ---------- */
.page-products .pg-section{
  padding:46px 0;
  border-bottom:1px solid var(--line-soft);
}
.page-products .pg-section--tight{padding:44px 0 24px;border-bottom:0}
.page-products .pg-section--wide{
  background:
    linear-gradient(180deg, rgba(28,50,71,.42), rgba(11,27,43,0) 70%);
  border-top:2px solid var(--line);
  border-bottom:2px solid var(--line);
}
.page-products .pg-head{margin-bottom:26px}
.page-products .pg-head .tag-label{display:inline-block;margin-bottom:12px}
.page-products .pg-head h2{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:clamp(1.4rem, 4.4vw, 2.15rem);
  line-height:1.32;
  color:var(--paper);
  margin:0 0 12px;
}
.page-products .pg-head .lede{
  font-size:.98rem;
  line-height:1.9;
  color:rgba(232,238,243,.82);
  max-width:66ch;
  margin:0;
}
.page-products .pg-head--split{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
}

/* ---------- 主客场对比 ---------- */
.page-products .compare{
  display:grid;
  gap:18px;
}
.page-products .compare__board{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--pg-gap);
}
.page-products .side{
  background:var(--pg-card);
  border:var(--pg-edge);
  border-radius:var(--pg-radius);
  box-shadow:var(--shadow-hard);
  padding:18px 16px 20px;
  position:relative;
}
.page-products .side--home{border-top:5px solid var(--lake)}
.page-products .side--away{border-top:5px solid var(--grass)}
.page-products .side__head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.page-products .side__head h3{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:1.1rem;
  color:var(--mist);
  margin:0;
}
.page-products .side__trend-label{
  font-size:.74rem;
  letter-spacing:.14em;
  color:var(--legacy);
  margin:0 0 8px;
}
.page-products .form{
  display:flex;
  gap:6px;
  list-style:none;
  margin:0 0 18px;
  padding:0;
}
.page-products .form__item{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  font-size:.78rem;
  font-weight:700;
  border:1px solid var(--line-strong);
  color:var(--mist);
}
.page-products .form__item--w{background:rgba(95,191,107,.28);border-color:var(--grass);color:#dbffe0}
.page-products .form__item--d{background:rgba(124,143,163,.24);border-color:var(--legacy)}
.page-products .form__item--l{background:rgba(201,101,47,.24);border-color:var(--warn);color:#ffdcc4}

.page-products .metric-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.page-products .metric-row{
  display:grid;
  grid-template-columns:80px 1fr 52px;
  align-items:center;
  gap:10px;
}
.page-products .metric-row__label{
  font-size:.82rem;
  color:rgba(232,238,243,.78);
}
.page-products .metric-row__bar{
  height:9px;
  background:rgba(6,17,28,.7);
  border:1px solid var(--line);
  overflow:hidden;
}
.page-products .metric-row__fill{
  display:block;
  height:100%;
  width:var(--w,50%);
  background:linear-gradient(90deg, var(--lake), rgba(47,167,160,.45));
  transition:width .35s var(--ease);
}
.page-products .side--away .metric-row__fill{
  background:linear-gradient(90deg, var(--grass), rgba(95,191,107,.4));
}
.page-products .metric-row__num{
  font-family:var(--font-mono);
  font-weight:700;
  font-size:.98rem;
  color:var(--amber);
  text-align:right;
  font-variant-numeric:tabular-nums;
}
.page-products .compare__hint{
  font-size:.86rem;
  line-height:1.75;
  color:var(--legacy);
  border-left:2px dashed var(--line-strong);
  padding-left:12px;
  margin:0;
}

/* ---------- 积分榜赛程 ---------- */
.page-products .table-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}
.page-products .table-panel{padding:0;overflow:hidden}
.page-products .panel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  padding:14px 16px;
  border-bottom:2px solid var(--line);
  background:rgba(6,17,28,.45);
}
.page-products .table-scroll{overflow-x:auto}
.page-products .data-table{
  width:100%;
  min-width:520px;
  border-collapse:collapse;
  font-size:.86rem;
}
.page-products .data-table th{
  text-align:left;
  padding:10px 12px;
  font-weight:600;
  font-size:.74rem;
  letter-spacing:.1em;
  color:var(--legacy);
  border-bottom:1px solid var(--line-strong);
  white-space:nowrap;
}
.page-products .data-table td{
  padding:11px 12px;
  color:var(--mist);
  border-bottom:1px solid var(--line-soft);
  font-variant-numeric:tabular-nums;
}
.page-products .data-table td.num{
  font-family:var(--font-mono);
  font-weight:600;
  color:var(--mist);
}
.page-products .data-table tbody tr:hover{background:rgba(47,167,160,.1)}
.page-products .data-table__focus{background:rgba(47,167,160,.16)}
.page-products .data-table__focus td{border-top:2px solid var(--lake);border-bottom:2px solid var(--lake)}
.page-products .data-table__focus td:first-child{box-shadow:inset 4px 0 0 var(--lake)}
.page-products .data-table__focus td.num{color:var(--amber)}

.page-products .fixture-list{list-style:none;margin:0;padding:0}
.page-products .fixture{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:
    "round match state"
    "round meta state";
  gap:2px 12px;
  align-items:center;
  padding:13px 16px;
  border-bottom:1px solid var(--line-soft);
}
.page-products .fixture__round{
  grid-area:round;
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--lake);
  writing-mode:horizontal-tb;
  white-space:nowrap;
}
.page-products .fixture__match{
  grid-area:match;
  font-size:.9rem;
  color:var(--mist);
  font-weight:600;
}
.page-products .fixture__meta{grid-area:meta;font-size:.78rem;color:var(--legacy)}
.page-products .fixture__state{
  grid-area:state;
  font-size:.72rem;
  letter-spacing:.08em;
  padding:4px 8px;
  border:1px solid var(--line-strong);
  color:var(--mist);
  white-space:nowrap;
}
.page-products .fixture__state--next{border-color:var(--amber);color:var(--amber)}
.page-products .fixture__state--done{border-color:var(--grass);color:var(--grass)}
.page-products .fixture-note{
  margin:0;
  padding:14px 16px 18px;
  font-size:.82rem;
  line-height:1.72;
  color:rgba(232,238,243,.7);
}
.page-products .table-figure{margin-top:22px}

/* ---------- 战报时间轴 ---------- */
.page-products .timeline-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:22px;
}
.page-products .timeline{
  list-style:none;
  margin:0;
  padding:0 0 0 22px;
  position:relative;
}
.page-products .timeline::before{
  content:"";
  position:absolute;
  left:5px;
  top:6px;
  bottom:6px;
  width:2px;
  background:linear-gradient(180deg, var(--lake), rgba(47,167,160,.12));
}
.page-products .timeline__item{
  position:relative;
  padding:0 0 24px 4px;
}
.page-products .timeline__item::before{
  content:"";
  position:absolute;
  left:-22px;
  top:6px;
  width:12px;
  height:12px;
  border:2px solid var(--lake);
  background:var(--night);
  transform:rotate(45deg);
}
.page-products .timeline__item:last-child{padding-bottom:0}
.page-products .timeline__meta{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.page-products .timeline__time{
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--amber);
  font-variant-numeric:tabular-nums;
}
.page-products .timeline__title{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:1.05rem;
  line-height:1.5;
  color:var(--paper);
  margin:0 0 8px;
}
.page-products .timeline__item p{
  font-size:.9rem;
  line-height:1.85;
  color:rgba(232,238,243,.78);
  margin:0;
}
.page-products .timeline-figure{margin:0}
.page-products .pg-more{margin:26px 0 0}

/* ---------- 旧版对照 ---------- */
.page-products .pg-section--legacy{
  background:
    linear-gradient(180deg, rgba(124,143,163,.16), rgba(11,27,43,.9) 78%);
  border-top:2px solid rgba(124,143,163,.45);
  border-bottom:2px solid rgba(124,143,163,.45);
}
.page-products .pg-section--legacy .pg-head h2{color:#dfe7ee}
.page-products .version-switch{display:grid;gap:18px}
.page-products .version-board{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--pg-gap);
}
.page-products .version-card{padding:0;overflow:hidden}
.page-products .version-list{list-style:none;margin:0;padding:16px}
.page-products .version-list li{
  display:grid;
  grid-template-columns:76px 1fr;
  gap:10px;
  padding:9px 0;
  border-bottom:1px dashed var(--line-soft);
  font-size:.85rem;
  line-height:1.65;
}
.page-products .version-list li:last-child{border-bottom:0}
.page-products .version-list__key{color:var(--lake);font-weight:600}
.page-products .version-list__val{color:rgba(232,238,243,.82)}
.page-products .version-stack{
  list-style:none;
  margin:0;
  padding:16px;
  display:grid;
  gap:12px;
}
.page-products .version-stack__item{
  border-left:3px solid var(--legacy);
  padding:6px 0 6px 12px;
  background:rgba(124,143,163,.09);
}
.page-products .version-stack__tag{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.12em;
  color:#a9bccd;
  margin-bottom:5px;
}
.page-products .version-stack__item p{
  margin:0;
  font-size:.83rem;
  font-weight:300;
  line-height:1.75;
  color:rgba(201,213,224,.86);
}
.page-products .version-note{
  margin:0;
  padding:0 16px 18px;
  font-size:.8rem;
  line-height:1.7;
  color:#9fb2c4;
}
.page-products .legacy-figure{margin-top:22px;filter:saturate(.62)}
.page-products .pg-section--legacy .media-frame__caption{color:#9fb2c4}

/* ---------- 场景 ---------- */
.page-products .scene-wrap{display:grid;gap:18px}
.page-products .scene-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--pg-gap);
}
.page-products .scene{
  background:var(--pg-card);
  border:var(--pg-edge);
  box-shadow:var(--shadow-soft);
  border-radius:var(--pg-radius);
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.page-products .scene h3{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:1.02rem;
  line-height:1.5;
  color:var(--paper);
  margin:0;
}
.page-products .scene p{
  font-size:.87rem;
  line-height:1.8;
  color:rgba(232,238,243,.78);
  margin:0;
  flex:1;
}
.page-products .scene .btn{align-self:flex-start}
.page-products .scene-figure{margin-top:22px}

/* ---------- 三步路径 ---------- */
.page-products .steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:1fr;
  gap:var(--pg-gap);
  counter-reset:none;
}
.page-products .step{
  border:2px solid var(--line-strong);
  background:rgba(6,17,28,.5);
  padding:18px 16px;
  position:relative;
  box-shadow:var(--shadow-soft);
}
.page-products .step__num{
  display:block;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:1.7rem;
  line-height:1;
  color:var(--amber);
  margin-bottom:12px;
  font-variant-numeric:tabular-nums;
}
.page-products .step h3{
  font-family:var(--font-serif);
  font-weight:600;
  font-size:1rem;
  margin:0 0 8px;
}
.page-products .step h3 a{
  color:var(--mist);
  text-decoration:none;
  border-bottom:2px solid var(--lake);
  padding-bottom:2px;
}
.page-products .step h3 a:hover{color:var(--lake)}
.page-products .step p{
  margin:0;
  font-size:.85rem;
  line-height:1.8;
  color:rgba(232,238,243,.75);
}
.page-products .pg-close{
  margin-top:28px;
  padding:20px 18px;
  border:2px solid var(--lake);
  background:linear-gradient(140deg, rgba(47,167,160,.16), rgba(6,17,28,.6));
}
.page-products .pg-close p{
  margin:0 0 16px;
  font-size:.92rem;
  line-height:1.9;
  color:rgba(232,238,243,.86);
  max-width:70ch;
}
.page-products .pg-close__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

/* ---------- 响应式 ---------- */
@media (min-width:600px){
  .page-products .pg-hero__aside{grid-template-columns:repeat(3,1fr)}
  .page-products .scene-grid{grid-template-columns:repeat(2,1fr)}
  .page-products .steps{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:900px){
  .page-products .pg-hero{padding:34px 0 40px}
  .page-products .pg-hero__grid{grid-template-columns:1.55fr .95fr;gap:34px;align-items:start}
  .page-products .pg-hero__aside{grid-template-columns:1fr}
  .page-products .pg-head--split{grid-template-columns:1.05fr 1fr;align-items:end;gap:26px}
  .page-products .compare__board{grid-template-columns:1fr 1fr;gap:0}
  .page-products .side--home{border-right:0}
  .page-products .side--away{margin-top:22px}
  .page-products .table-layout{grid-template-columns:1.45fr 1fr;align-items:start}
  .page-products .timeline-layout{grid-template-columns:1.6fr .8fr;align-items:start;gap:30px}
  .page-products .version-board{grid-template-columns:1fr 1fr}
  .page-products .pg-section{padding:60px 0}
  .page-products .pg-close{padding:26px 24px}
}
@media (min-width:1100px){
  .page-products .side{padding:22px 20px 24px}
  .page-products .scene{padding:22px 20px}
}
@media (prefers-reduced-motion:reduce){
  .page-products .metric-row__fill{transition:none}
}
<<<END>>>

.page-products {
  --w: 1rem;
}