/* ============ 数据专区 /projects/ ============ */
.page-products{
  --dz-line: rgba(198,207,216,0.28);
  --dz-stripe: rgba(242,233,218,0.045);
  background: var(--ink);
  color: var(--paper);
  overflow-x: clip;
}

.page-products .section{
  padding: clamp(40px, 6.5vw, 84px) 0;
}

.page-products .display-1,
.page-products .display-2,
.page-products .display-3{
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--paper);
  margin: 0.35em 0 0.5em;
}
.page-products .display-1{ font-size: clamp(30px, 7.2vw, 60px); }
.page-products .display-2{ font-size: clamp(23px, 4.4vw, 38px); }
.page-products .display-3{ font-size: clamp(17px, 2.4vw, 22px); }

.page-products .lede{
  font-size: clamp(15px, 1.5vw, 17px);
  line-height: 1.85;
  color: rgba(242,233,218,0.86);
  max-width: 36em;
}
.page-products p{ line-height: 1.85; }
.page-products p{ margin: 0 0 1em; }

.page-products .dz-inline{
  color: var(--cyan);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* 面包屑 */
.page-products .dz-crumb{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  justify-content: space-between;
  padding-top: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--dz-line);
}
.page-products .breadcrumbs a{
  color: var(--paper);
  text-decoration: none;
  border-bottom: 1px solid var(--dz-line);
}
.page-products .dz-crumb__note{
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
}

/* 首屏 */
.page-products .dz-hero{
  position: relative;
  padding: clamp(26px, 4.5vw, 54px) 0 clamp(34px, 5.5vw, 70px);
  border-bottom: 2px solid var(--line);
  background:
    linear-gradient(158deg, rgba(20,39,63,0.95) 0%, rgba(11,21,32,0) 62%),
    var(--ink);
  overflow: hidden;
}
.page-products .dz-hero::before{
  content: "";
  position: absolute;
  right: -12%;
  bottom: -30%;
  width: 70%;
  height: 260px;
  background: repeating-linear-gradient(118deg, rgba(53,224,200,0.12) 0 2px, transparent 2px 24px);
  transform: rotate(-7deg);
  pointer-events: none;
}
.page-products .dz-hero__grid{
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(22px, 3vw, 38px);
  align-items: start;
}
.page-products .dz-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

/* 筛选看板 */
.page-products .dz-board{
  position: relative;
  background: var(--panel);
  border: 2px solid var(--line);
  box-shadow: var(--hard-shadow);
  padding: clamp(14px, 2vw, 20px);
}
.page-products .dz-radio{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.page-products .dz-board__top{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--dz-line);
}
.page-products .dz-board__hint{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--cyan);
}
.page-products .dz-board__filters{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.page-products .dz-chip{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 6px 10px;
  border: 1px solid var(--dz-line);
  color: var(--paper);
  background: transparent;
  cursor: pointer;
  transition: background var(--step-fast), border-color var(--step-fast), color var(--step-fast);
}
.page-products .dz-chip:hover{ border-color: var(--cyan); }

.page-products #dz-pos-all:checked ~ .dz-board__filters label[for="dz-pos-all"],
.page-products #dz-pos-gk:checked ~ .dz-board__filters label[for="dz-pos-gk"],
.page-products #dz-pos-cb:checked ~ .dz-board__filters label[for="dz-pos-cb"],
.page-products #dz-pos-fb:checked ~ .dz-board__filters label[for="dz-pos-fb"],
.page-products #dz-pos-dm:checked ~ .dz-board__filters label[for="dz-pos-dm"],
.page-products #dz-pos-mf:checked ~ .dz-board__filters label[for="dz-pos-mf"],
.page-products #dz-pos-am:checked ~ .dz-board__filters label[for="dz-pos-am"],
.page-products #dz-pos-w:checked ~ .dz-board__filters label[for="dz-pos-w"],
.page-products #dz-pos-st:checked ~ .dz-board__filters label[for="dz-pos-st"]{
  background: var(--cyan);
  border-color: var(--cyan);
  color: var(--ink-deep);
}

.page-products #dz-pos-all:focus-visible ~ .dz-board__filters label[for="dz-pos-all"],
.page-products #dz-pos-gk:focus-visible ~ .dz-board__filters label[for="dz-pos-gk"],
.page-products #dz-pos-cb:focus-visible ~ .dz-board__filters label[for="dz-pos-cb"],
.page-products #dz-pos-fb:focus-visible ~ .dz-board__filters label[for="dz-pos-fb"],
.page-products #dz-pos-dm:focus-visible ~ .dz-board__filters label[for="dz-pos-dm"],
.page-products #dz-pos-mf:focus-visible ~ .dz-board__filters label[for="dz-pos-mf"],
.page-products #dz-pos-am:focus-visible ~ .dz-board__filters label[for="dz-pos-am"],
.page-products #dz-pos-w:focus-visible ~ .dz-board__filters label[for="dz-pos-w"],
.page-products #dz-pos-st:focus-visible ~ .dz-board__filters label[for="dz-pos-st"]{
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.page-products .dz-board__table tbody tr{ display: none; }
.page-products #dz-pos-all:checked ~ .dz-board__table tbody tr{ display: table-row; }
.page-products #dz-pos-gk:checked ~ .dz-board__table tbody tr[data-pos="gk"],
.page-products #dz-pos-cb:checked ~ .dz-board__table tbody tr[data-pos="cb"],
.page-products #dz-pos-fb:checked ~ .dz-board__table tbody tr[data-pos="fb"],
.page-products #dz-pos-dm:checked ~ .dz-board__table tbody tr[data-pos="dm"],
.page-products #dz-pos-mf:checked ~ .dz-board__table tbody tr[data-pos="mf"],
.page-products #dz-pos-am:checked ~ .dz-board__table tbody tr[data-pos="am"],
.page-products #dz-pos-w:checked ~ .dz-board__table tbody tr[data-pos="w"],
.page-products #dz-pos-st:checked ~ .dz-board__table tbody tr[data-pos="st"]{
  display: table-row;
}

.page-products .dz-board__table{
  border: 1px solid var(--dz-line);
  overflow-x: auto;
}
.page-products .dz-board__table table{
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 13px;
}
.page-products .dz-board__table caption{
  caption-side: bottom;
  text-align: left;
  padding: 10px 2px 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--grey);
}
.page-products .dz-board__table th,
.page-products .dz-board__table td{
  padding: 9px 10px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--dz-line);
}
.page-products .dz-board__table thead th{
  background: var(--paper-shade);
  color: var(--ink-deep);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--line);
}
.page-products .dz-board__table .num{
  font-family: var(--font-mono);
  text-align: right;
}
.page-products .dz-board__table tbody tr:nth-child(even){ background: var(--dz-stripe); }
.page-products .dz-board__table tbody tr:hover{
  background: rgba(53,224,200,0.12);
  box-shadow: inset 3px 0 0 var(--cyan);
}
.page-products .dz-th--sortable{ cursor: default; }
.page-products .dz-sort{
  display: inline-block;
  margin-left: 5px;
  color: var(--grey);
  opacity: 0.55;
  transition: transform var(--step-fast), color var(--step-fast), opacity var(--step-fast);
}
.page-products .dz-th--sortable:hover .dz-sort{
  color: var(--ink-deep);
  opacity: 1;
  transform: translateY(-2px);
}

/* 指标条 */
.page-products .dz-metrics{
  position: relative;
  z-index: 1;
  margin-top: clamp(26px, 4vw, 46px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.page-products .dz-metrics .metric{
  background: var(--ink-deep);
  border: 2px solid var(--line);
  padding: 14px 16px;
}
.page-products .dz-metrics .metric__value{
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(20px, 2.6vw, 30px);
  letter-spacing: 0.02em;
  color: var(--paper);
}
.page-products .dz-metrics .metric__label{
  display: block;
  margin-top: 4px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--grey);
}

/* 归档 */
.page-products .dz-archive__grid{
  display: grid;
  gap: clamp(22px, 3.5vw, 46px);
  align-items: start;
}
.page-products .dz-figure{ margin: 0; }
.page-products .dz-figure img{
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: cover;
  border: 2px solid var(--line);
  box-shadow: var(--hard-shadow);
}
.page-products .dz-figure figcaption{
  margin-top: 10px;
  padding-left: 8px;
  border-left: 3px solid var(--yellow);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--grey);
}
.page-products .dz-figure--tall img{ aspect-ratio: 3 / 4; }
.page-products .dz-figure--wide img{ aspect-ratio: 14 / 9; }
.page-products .dz-figure--banner img{ aspect-ratio: 2 / 1; }

.page-products .dz-checklist{
  list-style: none;
  margin: 20px 0 24px;
  padding: 0;
}
.page-products .dz-checklist li{
  display: grid;
  grid-template-columns: minmax(72px, auto) minmax(0, 1fr);
  gap: 10px 16px;
  padding: 11px 0;
  border-top: 1px solid var(--dz-line);
}
.page-products .dz-checklist li:last-child{ border-bottom: 1px solid var(--dz-line); }
.page-products .dz-checklist b{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--yellow);
  font-weight: 400;
}
.page-products .dz-checklist span{
  font-size: 14px;
  color: rgba(242,233,218,0.84);
}

/* 球员数据专区：暖纸面 */
.page-products .dz-players{
  background: var(--paper);
  color: var(--ink-deep);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 34px), 0 100%);
  padding-bottom: clamp(70px, 9vw, 120px);
  border-top: 2px solid var(--line);
}
.page-products .dz-players .display-2,
.page-products .dz-players .display-3{ color: var(--ink-deep); }
.page-products .dz-players .lede{ color: #33465a; }
.page-products .dz-players .eyebrow{ color: var(--red); }
.page-products .dz-players p{ color: #2c3a49; }
.page-products .dz-players__head{ max-width: 62em; }
.page-products .dz-players__grid{
  margin-top: clamp(22px, 3.5vw, 40px);
  display: grid;
  gap: clamp(24px, 3.5vw, 44px);
  align-items: start;
}
.page-products .dz-steps{
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-products .dz-steps li{
  position: relative;
  padding: 16px 0 16px 54px;
  border-top: 1px solid rgba(11,21,32,0.18);
}
.page-products .dz-steps li:last-child{ border-bottom: 1px solid rgba(11,21,32,0.18); }
.page-products .dz-steps__n{
  position: absolute;
  left: 0;
  top: 16px;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--ink);
  color: var(--cyan);
  border: 2px solid var(--ink-deep);
}
.page-products .dz-steps .display-3{ margin: 0 0 6px; }
.page-products .dz-steps p{ margin: 0; font-size: 14.5px; }

/* 下载区 */
.page-products .dz-downloads{
  background: var(--ink-deep);
  border-top: 2px solid var(--line);
  border-bottom: 2px solid var(--line);
}
.page-products .dz-downloads__head{
  display: grid;
  gap: clamp(20px, 3vw, 40px);
  align-items: end;
}
.page-products .dz-formats{ margin-top: clamp(24px, 3.5vw, 42px); }
.page-products .dz-formats__tabs{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.page-products .dz-ticket{
  display: block;
  cursor: pointer;
  padding: 12px 14px 12px 16px;
  background: var(--panel);
  border: 2px solid var(--line);
  border-left: 6px solid var(--grey);
  color: var(--paper);
  transition: transform var(--step-fast), box-shadow var(--step-fast), border-color var(--step-fast), background var(--step-fast), color var(--step-fast);
}
.page-products .dz-ticket:hover{
  transform: translate(-2px, -2px);
  box-shadow: var(--hard-shadow-sm);
}
.page-products .dz-ticket__ext{
  display: block;
  font-family: var(--font-mono);
  font-size: 16px;
  letter-spacing: 0.16em;
}
.page-products .dz-ticket__desc{
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: var(--grey);
}
.page-products #dz-fmt-csv:checked ~ .dz-formats__tabs label[for="dz-fmt-csv"],
.page-products #dz-fmt-pdf:checked ~ .dz-formats__tabs label[for="dz-fmt-pdf"],
.page-products #dz-fmt-xlsx:checked ~ .dz-formats__tabs label[for="dz-fmt-xlsx"]{
  background: var(--paper);
  border-color: var(--ink-deep);
  border-left-color: var(--cyan);
  color: var(--ink-deep);
}
.page-products #dz-fmt-csv:checked ~ .dz-formats__tabs label[for="dz-fmt-csv"] .dz-ticket__desc,
.page-products #dz-fmt-pdf:checked ~ .dz-formats__tabs label[for="dz-fmt-pdf"] .dz-ticket__desc,
.page-products #dz-fmt-xlsx:checked ~ .dz-formats__tabs label[for="dz-fmt-xlsx"] .dz-ticket__desc{
  color: #43576b;
}
.page-products #dz-fmt-csv:focus-visible ~ .dz-formats__tabs label[for="dz-fmt-csv"],
.page-products #dz-fmt-pdf:focus-visible ~ .dz-formats__tabs label[for="dz-fmt-pdf"],
.page-products #dz-fmt-xlsx:focus-visible ~ .dz-formats__tabs label[for="dz-fmt-xlsx"]{
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

.page-products .dz-format{
  display: none;
  margin-top: 18px;
  border: 2px solid var(--line);
  background: var(--panel);
}
.page-products #dz-fmt-csv:checked ~ .dz-format--csv,
.page-products #dz-fmt-pdf:checked ~ .dz-format--pdf,
.page-products #dz-fmt-xlsx:checked ~ .dz-format--xlsx{
  display: block;
}
.page-products .dz-format__bar{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: baseline;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--ink-deep);
  border-bottom: 2px solid var(--line);
}
.page-products .dz-format__hint{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--cyan);
}
.page-products .dz-fields{
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 13.5px;
}
.page-products .dz-fields th{
  padding: 9px 14px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cyan);
  background: rgba(5,8,13,0.6);
}
.page-products .dz-fields td{
  padding: 11px 14px;
  vertical-align: top;
  border-bottom: 1px solid var(--dz-line);
  color: rgba(242,233,218,0.88);
}
.page-products .dz-fields td:first-child{
  font-family: var(--font-mono);
  color: var(--yellow);
  white-space: nowrap;
}
.page-products .dz-fields tbody tr:hover{ background: rgba(53,224,200,0.09); }

/* 使用场景 */
.page-products .dz-scenes__grid{
  display: grid;
  gap: clamp(24px, 3.5vw, 46px);
  align-items: start;
}
.page-products .dz-scene{
  padding: 16px 0 18px;
  border-top: 2px solid var(--line);
}
.page-products .dz-scene:nth-of-type(1){ border-top-color: var(--red); }
.page-products .dz-scene:nth-of-type(2){ border-top-color: var(--yellow); }
.page-products .dz-scene:nth-of-type(3){ border-top-color: var(--cyan); }
.page-products .dz-scene__idx{
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: var(--grey);
  margin-bottom: 6px;
}
.page-products .dz-scene .display-3{ margin: 0 0 8px; }
.page-products .dz-scene p{
  margin: 0;
  max-width: 40em;
  font-size: 14.5px;
  color: rgba(242,233,218,0.84);
}

/* 订阅与联系 */
.page-products .dz-start{ border-top: 2px solid var(--line); }
.page-products .dz-start__grid{
  display: grid;
  gap: clamp(24px, 3.5vw, 46px);
  align-items: center;
}
.page-products .dz-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.page-products .dz-folds{
  margin-top: clamp(30px, 4.5vw, 54px);
  display: grid;
  gap: 10px;
}
.page-products .dz-folds .fold{
  border: 2px solid var(--line);
  background: rgba(20,39,63,0.55);
  transition: border-left-width var(--step-mid), border-left-color var(--step-mid);
}
.page-products .dz-folds .fold[open]{
  border-left: 6px solid var(--cyan);
}
.page-products .dz-folds .fold__summary{
  display: flex;
  gap: 12px;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  color: var(--paper);
}
.page-products .dz-folds .fold__summary::-webkit-details-marker{ display: none; }
.page-products .dz-folds .fold__summary::after{
  content: "+";
  font-family: var(--font-mono);
  color: var(--cyan);
}
.page-products .dz-folds .fold[open] .fold__summary::after{ content: "–"; }
.page-products .dz-folds .fold__body{
  padding: 0 16px 16px;
  font-size: 14.5px;
  color: rgba(242,233,218,0.84);
}
.page-products .dz-folds .fold__body p{ margin: 0; }

/* 响应式 */
@media (min-width: 720px){
  .page-products .dz-metrics{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 900px){
  .page-products .dz-hero__grid{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  }
  .page-products .dz-archive__grid{
    grid-template-columns: minmax(230px, 0.78fr) minmax(0, 1.5fr);
  }
  .page-products .dz-players__grid{
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
  }
  .page-products .dz-downloads__head{
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.85fr);
  }
  .page-products .dz-scenes__grid{
    grid-template-columns: minmax(0, 1.45fr) minmax(220px, 0.7fr);
  }
  .page-products .dz-start__grid{
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

@media (prefers-reduced-motion: reduce){
  .page-products *{
    transition: none !important;
    animation: none !important;
  }
}
</style>