.page-products{
  --pd-gap:clamp(14px,1.6vw,22px);
  --pd-card:rgba(10,43,35,.86);
  --pd-hair:rgba(31,90,76,.6);
  background:var(--ink);
  color:var(--mist);
}

/* ---------- 首屏 ---------- */
.page-products .pd-hero{
  position:relative;
  padding:clamp(18px,3vw,32px) 0 clamp(36px,5vw,68px);
  background:
    radial-gradient(95% 70% at 100% 0, rgba(63,242,210,.16), transparent 62%),
    linear-gradient(180deg, rgba(10,43,35,.94), rgba(4,24,20,.99));
  border-bottom:1px solid var(--hair);
  overflow:hidden;
}
.page-products .pd-hero .breadcrumb{
  margin-bottom:clamp(18px,3vw,30px);
}
.page-products .pd-hero__grid{
  align-items:start;
  row-gap:clamp(22px,3vw,34px);
}
.page-products .pd-hero__lead{
  grid-column:1 / -1;
}
.page-products .pd-hero__stats{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--pd-gap);
}
.page-products .pd-hero__lead h1{
  font-family:var(--font-head);
  font-weight:800;
  font-size:clamp(1.85rem,4.2vw,3.35rem);
  line-height:1.1;
  letter-spacing:-.012em;
  margin:.34em 0 .5em;
  color:var(--mist);
}
.page-products .pd-hero__lead .lead{
  max-width:56ch;
  margin:0;
  font-size:clamp(.98rem,1.4vw,1.1rem);
  line-height:1.85;
  color:var(--steel);
}
.page-products .pd-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:clamp(20px,3vw,30px);
}
.page-products .pd-stat{
  position:relative;
  overflow:hidden;
  padding:16px 18px 18px;
  border:1px solid var(--hair);
  border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(17,66,54,.92), rgba(10,43,35,.72));
}
.page-products .pd-stat::after{
  content:"";
  position:absolute;
  right:-38%;
  bottom:-58%;
  width:130px;
  height:130px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(63,242,210,.24), transparent 70%);
  pointer-events:none;
}
.page-products .pd-stat__num{
  display:block;
  font-family:var(--font-mono);
  font-weight:700;
  font-size:clamp(1.45rem,2.6vw,2.05rem);
  line-height:1.1;
  letter-spacing:-.02em;
  color:var(--neon);
}
.page-products .pd-stat:nth-child(2) .pd-stat__num,
.page-products .pd-stat:nth-child(4) .pd-stat__num{
  color:var(--amber);
}
.page-products .pd-stat__label{
  display:block;
  margin-top:7px;
  font-size:.8rem;
  line-height:1.5;
  color:var(--steel);
}

/* ---------- 区块标题 ---------- */
.page-products .pd-head{
  max-width:64ch;
  margin-bottom:clamp(20px,3vw,34px);
  padding-left:clamp(12px,1.6vw,18px);
  border-left:3px solid var(--neon);
}
.page-products .pd-head h2{
  font-family:var(--font-head);
  font-weight:800;
  font-size:clamp(1.4rem,2.6vw,2.1rem);
  line-height:1.22;
  letter-spacing:-.008em;
  margin:.34em 0 .42em;
  color:var(--mist);
}
.page-products .pd-head__sub{
  margin:0;
  font-size:.96rem;
  line-height:1.8;
  color:var(--steel);
}

/* ---------- 媒体容器 ---------- */
.page-products .media{
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:linear-gradient(160deg, var(--turf), var(--pitch));
}
.page-products .media img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
.page-products .media__caption{
  display:block;
  margin-top:10px;
  font-size:.8rem;
  line-height:1.6;
  color:var(--steel);
}

/* ---------- 四类数据包 ---------- */
.page-products .pd-packs{
  align-items:start;
  row-gap:var(--pd-gap);
}
.page-products .pd-packs__media,
.page-products .pd-packs__list{
  grid-column:1 / -1;
}
.page-products .pd-packs__media{
  margin:0;
}
.page-products .pd-packs__list{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--pd-gap);
}
.page-products .pd-pack{
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:18px 18px 20px;
  border:1px solid var(--hair);
  border-radius:var(--radius);
  background:var(--pd-card);
  transition:border-color .25s var(--ease), transform .25s var(--ease);
}
.page-products .pd-pack:hover{
  border-color:var(--teal);
  transform:translateY(-2px);
}
.page-products .pd-pack__no{
  font-family:var(--font-mono);
  font-size:.7rem;
  letter-spacing:.16em;
  color:var(--amber);
}
.page-products .pd-pack h3{
  margin:0;
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.06rem;
  color:var(--mist);
}
.page-products .pd-pack__use{
  margin:0;
  font-size:.9rem;
  line-height:1.72;
  color:var(--steel);
}
.page-products .pd-pack__fields{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:4px 0 0;
  padding:0;
  list-style:none;
}
.page-products .pd-field{
  padding:3px 9px;
  border:1px solid rgba(63,242,210,.3);
  border-radius:999px;
  background:rgba(63,242,210,.08);
  font-family:var(--font-mono);
  font-size:.71rem;
  letter-spacing:.02em;
  color:var(--neon);
}

/* ---------- 筛选与分段控件 ---------- */
.page-products .pd-filters{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 16px;
  padding:12px 16px;
  margin-bottom:16px;
  border:1px solid var(--hair);
  border-radius:var(--radius-sm);
  background:rgba(17,66,54,.5);
}
.page-products .pd-filters__label{
  margin:0;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.14em;
  color:var(--steel);
}
.page-products .pd-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.page-products .chip{
  display:inline-block;
  padding:4px 12px;
  border:1px solid var(--hair);
  border-radius:999px;
  background:var(--pitch);
  font-size:.79rem;
  line-height:1.5;
  color:var(--steel);
}
.page-products .chip--on{
  border-color:var(--neon);
  background:rgba(63,242,210,.12);
  color:var(--neon);
}
.page-products .chip--amber{
  border-color:rgba(255,181,71,.55);
  color:var(--amber);
}
.page-products .season-switch{
  margin-bottom:16px;
}

/* ---------- 数据表 ---------- */
.page-products .pd-panel{
  margin-bottom:18px;
}
.page-products .pd-tablewrap{
  overflow-x:auto;
  border:1px solid var(--hair);
  border-radius:var(--radius);
  background:rgba(10,43,35,.62);
}
.page-products .pd-table{
  width:100%;
  min-width:640px;
  border-collapse:collapse;
  font-size:.88rem;
}
.page-products .pd-table caption{
  caption-side:top;
  padding:12px 16px;
  border-bottom:1px solid var(--hair);
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:.03em;
  text-align:left;
  color:var(--amber);
}
.page-products .pd-table th,
.page-products .pd-table td{
  padding:11px 16px;
  text-align:left;
  border-bottom:1px solid var(--pd-hair);
  white-space:nowrap;
}
.page-products .pd-table thead th{
  position:sticky;
  top:0;
  z-index:2;
  background:var(--turf);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.09em;
  color:var(--steel);
}
.page-products .pd-table tbody tr:last-child td{
  border-bottom:none;
}
.page-products .pd-table tbody tr:hover{
  background:rgba(63,242,210,.06);
}
.page-products .pd-table td.num{
  font-family:var(--font-mono);
  color:var(--mist);
}
.page-products .pd-table td.hl{
  color:var(--amber);
  font-weight:600;
}
.page-products .pd-note{
  margin:10px 2px 0;
  font-size:.82rem;
  line-height:1.7;
  color:var(--steel);
}
.page-products .pd-table-figure{
  margin:24px 0 0;
}

/* ---------- 签表树 ---------- */
.page-products .pd-brackets{
  align-items:start;
  row-gap:var(--pd-gap);
}
.page-products .pd-brackets__tree,
.page-products .pd-brackets__media{
  grid-column:1 / -1;
}
.page-products .pd-brackets__media{
  margin:0;
}
.page-products .pd-cup{
  margin-bottom:12px;
  border:1px solid var(--hair);
  border-radius:var(--radius);
  background:linear-gradient(150deg, rgba(43,42,107,.5), rgba(10,43,35,.86));
  overflow:hidden;
}
.page-products .pd-cup[open]{
  border-color:var(--teal);
}
.page-products .pd-cup > summary{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:8px 14px;
  padding:14px 18px;
  font-family:var(--font-head);
  font-weight:700;
  font-size:.98rem;
  color:var(--mist);
  cursor:pointer;
  list-style:none;
}
.page-products .pd-cup > summary::-webkit-details-marker{
  display:none;
}
.page-products .pd-cup > summary:hover{
  color:var(--neon);
}
.page-products .pd-cup__meta{
  font-family:var(--font-mono);
  font-size:.72rem;
  font-weight:400;
  letter-spacing:.03em;
  color:var(--steel);
}
.page-products .pd-cup__body{
  padding:2px 18px 18px;
}
.page-products .pd-tree{
  margin:0;
  padding:0;
  list-style:none;
}
.page-products .pd-tree > li{
  position:relative;
  padding:5px 0 5px 20px;
  border-left:1px solid var(--pd-hair);
}
.page-products .pd-tree > li::before{
  content:"";
  position:absolute;
  left:0;
  top:16px;
  width:12px;
  height:1px;
  background:var(--pd-hair);
}
.page-products .pd-tree > li:last-child{
  border-left-color:transparent;
}
.page-products .pd-tree .pd-tree{
  margin-top:5px;
}
.page-products .pd-node{
  display:inline-block;
  padding:4px 11px;
  border:1px solid var(--hair);
  border-radius:var(--radius-sm);
  background:rgba(17,66,54,.78);
  font-size:.83rem;
  line-height:1.6;
  color:var(--mist);
}
.page-products .pd-node--amber{
  border-color:rgba(255,181,71,.5);
  color:var(--amber);
}

/* ---------- 租借时间轴 ---------- */
.page-products .pd-loantrack{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(240px,84%);
  gap:var(--pd-gap);
  overflow-x:auto;
  margin:0 0 4px;
  padding:0 2px 14px;
  list-style:none;
  scroll-snap-type:x mandatory;
}
.page-products .pd-loan{
  scroll-snap-align:start;
  position:relative;
  padding:18px 18px 20px;
  border:1px solid var(--hair);
  border-top:3px solid var(--hair);
  border-radius:var(--radius);
  background:var(--pd-card);
}
.page-products .pd-loan--window{
  border-top-color:var(--neon);
}
.page-products .pd-loan__when{
  display:block;
  margin-bottom:8px;
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.06em;
  color:var(--steel);
}
.page-products .pd-loan h3{
  margin:0 0 8px;
  font-family:var(--font-head);
  font-weight:700;
  font-size:1rem;
  color:var(--mist);
}
.page-products .pd-loan p{
  margin:0;
  font-size:.88rem;
  line-height:1.75;
  color:var(--steel);
}
.page-products .pd-loan__states{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:12px 0 0;
  padding:0;
  list-style:none;
}
.page-products .pd-state{
  padding:2px 10px;
  border:1px solid var(--hair);
  border-radius:999px;
  font-size:.72rem;
  color:var(--steel);
}
.page-products .pd-state--amber{
  border-color:rgba(255,181,71,.55);
  color:var(--amber);
}
.page-products .pd-loan-figure{
  margin:22px 0 0;
}

/* ---------- 下载格式 ---------- */
.page-products .pd-formats{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--pd-gap);
  margin-bottom:22px;
}
.page-products .pd-format{
  padding:20px 20px 22px;
  border:1px solid var(--hair);
  border-radius:var(--radius-lg);
  background:linear-gradient(155deg, rgba(17,66,54,.9), rgba(10,43,35,.7));
}
.page-products .pd-format--json{
  background:linear-gradient(155deg, rgba(43,42,107,.55), rgba(10,43,35,.85));
  border-color:rgba(63,242,210,.28);
}
.page-products .pd-format__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.page-products .pd-format__head h3{
  margin:0;
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.5rem;
  letter-spacing:.1em;
  color:var(--neon);
}
.page-products .pd-format p{
  margin:0;
  font-size:.9rem;
  line-height:1.75;
  color:var(--steel);
}
.page-products .pd-codes{
  display:flex;
  flex-wrap:wrap;
  gap:6px 8px;
  margin:14px 0 0;
  padding:0;
  list-style:none;
}
.page-products .pd-codes li{
  padding:4px 10px;
  border:1px solid var(--pd-hair);
  border-radius:var(--radius-sm);
  background:rgba(4,24,20,.5);
  font-size:.75rem;
  color:var(--mist);
}
.page-products .pd-dlmeta{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  border:1px solid var(--hair);
  border-radius:var(--radius);
  overflow:hidden;
}
.page-products .pd-dlmeta__row{
  display:grid;
  gap:4px;
  padding:14px 18px;
  border-bottom:1px solid var(--pd-hair);
  background:rgba(10,43,35,.5);
}
.page-products .pd-dlmeta__row:last-child{
  border-bottom:none;
}
.page-products .pd-dlmeta__k{
  font-family:var(--font-mono);
  font-size:.72rem;
  letter-spacing:.1em;
  color:var(--steel);
}
.page-products .pd-dlmeta__v{
  font-size:.92rem;
  line-height:1.7;
  color:var(--mist);
}
.page-products .pd-dlmeta__v.mono{
  font-family:var(--font-mono);
  font-size:.82rem;
  color:var(--neon);
  word-break:break-word;
}

/* ---------- 季票信息 ---------- */
.page-products .pd-tickets{
  align-items:start;
  row-gap:var(--pd-gap);
}
.page-products .pd-ticket-list,
.page-products .pd-tickets__media{
  grid-column:1 / -1;
}
.page-products .pd-tickets__media{
  margin:0;
}
.page-products .pd-ticket-list{
  display:grid;
  grid-template-columns:1fr;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}
.page-products .pd-ticket{
  display:grid;
  gap:3px;
  padding:12px 16px;
  border:1px solid var(--pd-hair);
  border-left:3px solid var(--teal);
  border-radius:var(--radius-sm);
  background:rgba(17,66,54,.45);
}
.page-products .pd-ticket__name{
  font-family:var(--font-head);
  font-weight:700;
  font-size:.92rem;
  color:var(--mist);
}
.page-products .pd-ticket__note{
  font-size:.8rem;
  line-height:1.65;
  color:var(--steel);
}

/* ---------- 使用流程与场景 ---------- */
.page-products .pd-steps{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--pd-gap);
  margin:0 0 22px;
  padding:0;
  list-style:none;
  counter-reset:pdstep;
}
.page-products .pd-step{
  position:relative;
  padding:18px 18px 20px;
  border:1px solid var(--hair);
  border-radius:var(--radius);
  background:var(--pd-card);
}
.page-products .pd-step::after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  bottom:0;
  height:2px;
  background:linear-gradient(90deg, var(--neon), transparent);
  opacity:.55;
}
.page-products .pd-step__no{
  display:block;
  margin-bottom:8px;
  font-size:.78rem;
  letter-spacing:.16em;
  color:var(--amber);
}
.page-products .pd-step h3{
  margin:0 0 8px;
  font-family:var(--font-head);
  font-weight:700;
  font-size:1rem;
  color:var(--mist);
}
.page-products .pd-step p{
  margin:0;
  font-size:.88rem;
  line-height:1.75;
  color:var(--steel);
}
.page-products .pd-scenes{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--pd-gap);
}
.page-products .pd-scene{
  padding:18px 18px 20px;
  border:1px solid var(--hair);
  border-radius:var(--radius);
  background:linear-gradient(160deg, rgba(110,31,58,.42), rgba(10,43,35,.82));
}
.page-products .pd-scene h3{
  margin:0 0 8px;
  font-family:var(--font-head);
  font-weight:700;
  font-size:.98rem;
  color:var(--mist);
}
.page-products .pd-scene p{
  margin:0;
  font-size:.88rem;
  line-height:1.75;
  color:var(--steel);
}

/* ---------- 收尾 ---------- */
.page-products .pd-cta{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  padding:clamp(22px,3vw,34px);
}
.page-products .pd-cta__text h2{
  margin:0 0 12px;
  font-family:var(--font-head);
  font-weight:800;
  font-size:clamp(1.25rem,2.3vw,1.75rem);
  line-height:1.28;
  color:var(--mist);
}
.page-products .pd-cta__text p{
  margin:0;
  font-size:.92rem;
  line-height:1.8;
  color:var(--steel);
}
.page-products .pd-cta__links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 18px;
  align-content:start;
}

/* ---------- 响应式 ---------- */
@media (min-width:640px){
  .page-products .pd-packs__list,
  .page-products .pd-ticket-list,
  .page-products .pd-scenes{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .page-products .pd-steps{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .page-products .pd-dlmeta__row{
    grid-template-columns:180px minmax(0,1fr);
    align-items:baseline;
    gap:16px;
  }
}

@media (min-width:900px){
  .page-products .pd-loantrack{
    grid-auto-flow:row;
    grid-template-columns:repeat(4,minmax(0,1fr));
    grid-auto-columns:auto;
    overflow:visible;
    padding-bottom:0;
  }
  .page-products .pd-formats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .page-products .pd-cta{
    grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
    align-items:center;
  }
}

@media (min-width:960px){
  .page-products .pd-hero__grid{
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:clamp(20px,2.4vw,34px);
  }
  .page-products .pd-hero__lead{
    grid-column:span 7;
    padding-right:clamp(0px,2vw,24px);
  }
  .page-products .pd-hero__stats{
    grid-column:span 5;
  }
  .page-products .pd-packs__media{
    grid-column:span 5;
    position:sticky;
    top:calc(var(--topbar-h) + 18px);
  }
  .page-products .pd-packs__list{
    grid-column:span 7;
  }
  .page-products .pd-brackets__tree{
    grid-column:span 7;
  }
  .page-products .pd-brackets__media{
    grid-column:span 5;
  }
  .page-products .pd-ticket-list{
    grid-column:span 7;
  }
  .page-products .pd-tickets__media{
    grid-column:span 5;
    position:sticky;
    top:calc(var(--topbar-h) + 18px);
  }
  .page-products .pd-steps{
    grid-template-columns:repeat(4,minmax(0,1fr));
  }
}

@media (prefers-reduced-motion:reduce){
  .page-products .pd-pack,
  .page-products .pd-cup > summary{
    transition:none;
  }
  .page-products .pd-pack:hover{
    transform:none;
  }
}