/* ================= 数据面板 · 页面专属样式 ================= */
.page-products{
  --pd-gap:16px;
  --pd-r:22px;
  --pd-dim:rgba(136,149,173,.14);
  --pd-up:#5C8CFF;
}

/* ---------- 面包屑与首屏 ---------- */
.page-products .breadcrumb{
  padding-top:92px;
  margin-bottom:8px;
}

.page-products .pd-hero{
  position:relative;
  isolation:isolate;
  display:grid;
  gap:34px;
  padding-top:24px;
  padding-bottom:56px;
  border-bottom:1px solid var(--line);
}
.page-products .pd-hero::before{
  content:"";
  position:absolute;
  inset:-180px -30% auto -30%;
  height:480px;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(58% 68% at 16% 14%, rgba(92,140,255,.20), transparent 72%),
    radial-gradient(46% 58% at 86% 4%, rgba(56,242,153,.12), transparent 74%),
    radial-gradient(42% 56% at 52% 98%, rgba(232,65,44,.10), transparent 76%);
}
.page-products .page-title{
  margin:14px 0 0;
  font-size:clamp(42px,12vw,88px);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.025em;
  color:var(--hi);
}
.page-products .lede{
  margin:22px 0 0;
  max-width:48ch;
  font-size:17px;
  line-height:1.75;
  color:var(--paper);
}

.page-products .pd-ticker{
  display:grid;
  gap:22px;
  align-content:end;
  padding-left:20px;
  border-left:2px solid var(--line);
}
.page-products .pd-tick{
  display:grid;
  gap:4px;
}
.page-products .pd-tick-num{
  font-family:var(--font-data);
  font-variant-numeric:tabular-nums;
  font-size:clamp(32px,9vw,42px);
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--hi);
}
.page-products .pd-tick:first-child .pd-tick-num{
  color:var(--green);
}
.page-products .pd-tick-label{
  font-size:13px;
  font-weight:300;
  color:var(--muted);
}

/* ---------- 筛选栏 ---------- */
.page-products .pd-filter{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:26px 0 4px;
  position:sticky;
  top:78px;
  z-index:6;
  background:linear-gradient(180deg, var(--ink) 78%, rgba(8,12,22,0));
}
.page-products .filter-btn{
  appearance:none;
  display:inline-flex;
  align-items:center;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--paper);
  border-radius:var(--r-pill);
  padding:9px 16px;
  font-family:var(--font-head);
  font-size:13px;
  line-height:1.2;
  cursor:pointer;
  transition:border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.page-products .filter-btn:hover{
  border-color:var(--link);
}
.page-products .filter-btn:focus-visible{
  outline:2px solid var(--link);
  outline-offset:2px;
}
.page-products .filter-btn[aria-pressed="true"]{
  border-color:var(--green);
  color:var(--green);
  background:rgba(56,242,153,.08);
}
.page-products .filter-count{
  margin-left:7px;
  font-family:var(--font-data);
  font-variant-numeric:tabular-nums;
  font-size:12px;
  color:var(--muted);
}
.page-products .filter-btn[aria-pressed="true"] .filter-count{
  color:var(--green);
}

/* ---------- 区块骨架 ---------- */
.page-products .pd-sec{
  padding:64px 0;
  border-top:1px solid var(--line);
}
.page-products .pd-sec[hidden]{
  display:none;
}
.page-products .pd-head{
  display:grid;
  gap:10px;
  max-width:58ch;
  margin-bottom:36px;
}
.page-products .pd-head .section-title{
  margin:0;
  font-size:clamp(26px,6.4vw,40px);
  line-height:1.15;
  letter-spacing:-.015em;
  color:var(--hi);
}
.page-products .pd-head .section-note{
  margin:0;
  font-size:15px;
  line-height:1.75;
  color:var(--muted);
}

.page-products .pd-split{
  display:grid;
  gap:30px;
}
.page-products .pd-prose{
  margin:28px 0 0;
  max-width:68ch;
  font-size:15px;
  line-height:1.75;
  color:var(--paper);
}
.page-products .pd-prose--wide{
  max-width:74ch;
  color:var(--muted);
}
.page-products .pd-prose a{
  color:var(--link);
}

/* ---------- 媒体容器 ---------- */
.page-products .pd-figure,
.page-products .pd-band-figure{
  margin:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--panel);
}
.page-products .media-frame img{
  display:block;
  width:100%;
  height:auto;
  object-fit:cover;
}
.page-products .media-frame figcaption{
  padding:12px 16px 14px;
  font-family:var(--font-data);
  font-size:12px;
  line-height:1.6;
  color:var(--muted);
  border-top:1px solid var(--line);
}
.page-products .pd-band{
  padding:8px 0 0;
}

/* ---------- 总览：折叠定义 ---------- */
.page-products .pd-defs{
  display:grid;
  gap:12px;
}
.page-products .pd-def{
  border:1px solid var(--line);
  border-left:3px solid var(--pd-dim);
  border-radius:var(--r-md);
  background:var(--panel);
  transition:border-left-color var(--dur) var(--ease);
}
.page-products .pd-def[open]{
  border-left-color:var(--green);
}
.page-products .pd-def[data-metric="discipline"][open]{
  border-left-color:var(--red);
}
.page-products .pd-def[data-metric="stoppage"][open]{
  border-left-color:var(--yellow);
}
.page-products .pd-def-sum{
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 18px;
  cursor:pointer;
  list-style:none;
  font-weight:700;
  font-size:16px;
  color:var(--hi);
}
.page-products .pd-def-sum::-webkit-details-marker{
  display:none;
}
.page-products .pd-def-sum:focus-visible{
  outline:2px solid var(--link);
  outline-offset:-2px;
  border-radius:var(--r-md);
}
.page-products .pd-def-idx{
  font-family:var(--font-data);
  font-size:12px;
  color:var(--muted);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:2px 7px;
}
.page-products .pd-def-name{
  flex:1 1 auto;
}
.page-products .pd-def-body{
  padding:0 18px 18px 48px;
}
.page-products .pd-def-body p{
  margin:0;
  font-size:14px;
  line-height:1.75;
  color:var(--muted);
}
.page-products .pd-def-link{
  display:inline-block;
  margin-top:10px;
  font-size:13px;
  color:var(--link);
}

/* ---------- 判罚计数卡 ---------- */
.page-products .pd-count-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:14px;
  margin-bottom:36px;
}
.page-products .pd-count{
  display:grid;
  gap:6px;
  padding:18px 18px 20px;
  border:1px solid var(--line);
  border-top:2px solid var(--line);
  border-radius:0 0 var(--r-sm) var(--r-sm);
  background:var(--panel);
}
.page-products .pd-count--yellow{
  border-top-color:var(--yellow);
}
.page-products .pd-count--red{
  border-top-color:var(--red);
}
.page-products .pd-count-label{
  font-size:13px;
  font-weight:300;
  color:var(--muted);
}
.page-products .pd-count-num{
  font-family:var(--font-data);
  font-variant-numeric:tabular-nums;
  font-size:clamp(38px,10vw,50px);
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--hi);
}
.page-products .pd-count-num--sm{
  font-size:clamp(26px,7vw,34px);
}
.page-products .pd-count--yellow .pd-count-num{
  color:var(--yellow);
}
.page-products .pd-count--red .pd-count-num{
  color:var(--red);
}
.page-products .pd-count-unit{
  font-size:12px;
  font-weight:300;
  color:var(--muted);
}

/* ---------- 台账表 ---------- */
.page-products .pd-ledger{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
}
.page-products .ledger-caption{
  text-align:left;
  padding-bottom:12px;
  font-size:13px;
  font-weight:300;
  color:var(--muted);
}
.page-products .pd-ledger th,
.page-products .pd-ledger td{
  text-align:left;
  padding:12px 10px 12px 0;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
.page-products .pd-ledger th{
  font-family:var(--font-data);
  font-size:12px;
  font-weight:400;
  letter-spacing:.04em;
  color:var(--muted);
}
.page-products .pd-ledger td{
  color:var(--paper);
  line-height:1.6;
}
.page-products .pd-ledger td:first-child{
  font-family:var(--font-data);
  font-variant-numeric:tabular-nums;
  color:var(--hi);
}
.page-products .pd-ledger td:last-child{
  color:var(--muted);
}

.page-products .pd-sample{
  margin-top:20px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--panel);
}
.page-products .pd-sample summary{
  padding:14px 18px;
  cursor:pointer;
  font-size:14px;
  font-weight:700;
  color:var(--paper);
  list-style:none;
}
.page-products .pd-sample summary::-webkit-details-marker{
  display:none;
}
.page-products .pd-sample summary::before{
  content:"+ ";
  font-family:var(--font-data);
  color:var(--green);
}
.page-products .pd-sample[open] summary::before{
  content:"− ";
}
.page-products .pd-sample summary:focus-visible{
  outline:2px solid var(--link);
  outline-offset:-2px;
  border-radius:var(--r-md);
}
.page-products .pd-sample-body{
  padding:0 18px 18px;
  border-left:2px solid var(--red);
  margin-left:18px;
}
.page-products .pd-sample-body p{
  margin:0 0 10px;
  font-size:14px;
  line-height:1.75;
  color:var(--muted);
}
.page-products .pd-sample-body a{
  color:var(--link);
}

/* ---------- 字段行列表 ---------- */
.page-products .pd-field-list{
  display:grid;
  gap:0;
}
.page-products .pd-field{
  display:grid;
  gap:4px;
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.page-products .pd-field:first-child{
  border-top:1px solid var(--line);
}
.page-products .pd-field-key{
  font-family:var(--font-data);
  font-size:13px;
  letter-spacing:.02em;
  color:var(--hi);
}
.page-products .pd-field-val{
  font-size:14px;
  font-weight:300;
  line-height:1.65;
  color:var(--muted);
}
.page-products .pd-aside-note{
  margin:0;
  padding:20px 0 0 20px;
  border-left:2px solid var(--line);
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
}

/* ---------- 控球率分段条 ---------- */
.page-products .pd-seg{
  margin-bottom:34px;
}
.page-products .pd-seg-bar{
  display:grid;
  grid-template-columns:1fr;
  gap:6px;
}
.page-products .pd-seg-part{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  border-radius:var(--r-sm);
  font-family:var(--font-data);
  font-size:13px;
  color:var(--ink);
  background:var(--panel);
  border:1px solid var(--line);
}
.page-products .pd-seg-txt{
  color:var(--paper);
}
.page-products .pd-seg-part--up{
  background:linear-gradient(90deg, rgba(92,140,255,.30), rgba(92,140,255,.08));
  border-color:rgba(92,140,255,.45);
}
.page-products .pd-seg-part--full{
  background:linear-gradient(90deg, rgba(56,242,153,.28), rgba(56,242,153,.06));
  border-color:rgba(56,242,153,.42);
}
.page-products .pd-seg-part--down{
  background:linear-gradient(90deg, rgba(242,176,30,.28), rgba(242,176,30,.06));
  border-color:rgba(242,176,30,.42);
}
.page-products .pd-seg .note{
  margin:12px 0 0;
  font-size:12px;
  font-weight:300;
  color:var(--muted);
}

/* ---------- 时长 meter ---------- */
.page-products .pd-meter-block{
  display:grid;
  gap:18px;
  margin-bottom:34px;
}
.page-products .pd-meter-row{
  display:grid;
  gap:8px;
}
.page-products .pd-meter-label{
  font-size:13px;
  font-weight:300;
  color:var(--muted);
}
.page-products .pd-meter{
  position:relative;
  height:12px;
  width:100%;
  border-radius:var(--r-pill);
  background:var(--panel);
  border:1px solid var(--line);
  overflow:hidden;
}
.page-products .pd-meter .meter-fill{
  display:block;
  height:100%;
  border-radius:var(--r-pill);
}
.page-products .pd-meter-fill--up{
  background:linear-gradient(90deg, rgba(92,140,255,.9), rgba(92,140,255,.45));
}
.page-products .pd-meter-fill--down{
  background:linear-gradient(90deg, var(--yellow), rgba(242,176,30,.45));
}
.page-products .pd-meter-value{
  font-family:var(--font-data);
  font-variant-numeric:tabular-nums;
  font-size:18px;
  color:var(--yellow);
}
.page-products .pd-count-grid--tight{
  margin-bottom:0;
}

/* ---------- 移动端榜单图 ---------- */
.page-products .pd-phone-media{
  max-width:320px;
  margin-inline:auto;
}

/* ---------- 字段分组胶囊 ---------- */
.page-products .pd-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:38px;
  padding-bottom:28px;
  border-bottom:1px dashed var(--line);
}
.page-products .pd-chip{
  appearance:none;
  border:1px solid var(--line);
  background:transparent;
  color:var(--muted);
  border-radius:var(--r-pill);
  padding:9px 16px;
  font-family:var(--font-head);
  font-size:13px;
  cursor:pointer;
  transition:color var(--dur) var(--ease), border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.page-products .pd-chip:hover{
  border-color:var(--link);
  color:var(--paper);
}
.page-products .pd-chip:focus-visible{
  outline:2px solid var(--link);
  outline-offset:2px;
}
.page-products .pd-chip[aria-pressed="true"]{
  color:var(--ink);
  background:var(--paper);
  border-color:var(--paper);
  font-weight:700;
}

/* ---------- 导出步骤 ---------- */
.page-products .pd-steps{
  list-style:none;
  margin:0 0 30px;
  padding:0;
  display:grid;
  gap:0;
}
.page-products .pd-step{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:16px;
  padding:20px 0;
  border-top:1px solid var(--line);
}
.page-products .pd-step:last-child{
  border-bottom:1px solid var(--line);
}
.page-products .pd-step-idx{
  font-family:var(--font-data);
  font-variant-numeric:tabular-nums;
  font-size:28px;
  line-height:1.05;
  color:var(--green);
}
.page-products .pd-step-title{
  margin:0 0 6px;
  font-size:17px;
  font-weight:700;
  color:var(--hi);
}
.page-products .pd-step p{
  margin:0;
  max-width:60ch;
  font-size:14px;
  line-height:1.75;
  color:var(--muted);
}
.page-products .pd-export-note{
  margin:0;
  max-width:72ch;
  font-size:14px;
  line-height:1.8;
  color:var(--muted);
}
.page-products .pd-export-note a{
  color:var(--link);
}

/* ---------- 平板 ---------- */
@media (min-width:760px){
  .page-products .pd-seg-bar{
    grid-template-columns:1fr 1.6fr 1fr;
    gap:8px;
  }
  .page-products .pd-count-grid{
    gap:16px;
  }
}

/* ---------- 桌面 ---------- */
@media (min-width:900px){
  .page-products .pd-hero{
    grid-template-columns:minmax(0,7fr) minmax(0,4fr);
    align-items:end;
    gap:56px;
    padding-top:30px;
    padding-bottom:72px;
  }
  .page-products .pd-sec{
    padding:84px 0;
  }
  .page-products .pd-split{
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    gap:52px;
    align-items:start;
  }
  .page-products .pd-split--aside{
    grid-template-columns:minmax(0,6fr) minmax(0,5fr);
  }
  .page-products .pd-head{
    margin-bottom:44px;
  }
  .page-products .pd-step{
    grid-template-columns:64px 1fr;
    padding:24px 0;
  }
  .page-products .pd-band{
    padding-top:16px;
  }
}

@media (min-width:1100px){
  .page-products .pd-def-body{
    padding-left:56px;
  }
}

/* ---------- 动效偏好 ---------- */
@media (prefers-reduced-motion:reduce){
  .page-products .filter-btn,
  .page-products .pd-chip,
  .page-products .pd-def{
    transition:none;
  }
}