.page-products{
  --pc-line:rgba(94,113,137,.32);
  --pc-line-soft:rgba(94,113,137,.18);
  --pc-card:rgba(14,24,40,.86);
  --pc-neg:#8E3A4F;
  background:var(--ink);
  color:var(--mist);
  overflow-x:hidden;
}

.page-products .pc-section{
  position:relative;
  padding:56px 0;
}

.page-products .pc-section--cut::before{
  content:"";
  position:absolute;
  left:5%;
  right:5%;
  top:0;
  height:2px;
  border-radius:var(--pill);
  background:linear-gradient(90deg,transparent,rgba(69,224,206,.55),rgba(255,122,51,.3),transparent);
  transform:skewY(-3deg);
  transform-origin:center;
}

.page-products .pc-section--index{background:var(--ink);}
.page-products .pc-section--teal{background:var(--deep-teal);}
.page-products .pc-section--ink2{background:var(--ink-2);}
.page-products .pc-section--dir{background:linear-gradient(180deg,var(--ink) 0%,#091018 100%);}
.page-products .pc-section--wine{background:var(--wine);}
.page-products .pc-section--cta{background:var(--ink);}

/* ---------- 首屏 ---------- */
.page-products .pc-hero{
  padding:24px 0 8px;
}

.page-products .pc-hero__frame{
  position:relative;
  margin-top:16px;
  padding:34px 20px 26px;
  border-radius:var(--radius-lg);
  background:
    radial-gradient(120% 90% at 8% 0%,rgba(69,224,206,.16),transparent 58%),
    radial-gradient(90% 80% at 96% 6%,rgba(255,122,51,.14),transparent 60%),
    var(--ink-2);
  border:1px solid rgba(69,224,206,.22);
  overflow:hidden;
}

.page-products .pc-hero__frame::before,
.page-products .pc-hero__frame::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  height:10px;
  background:repeating-linear-gradient(90deg,rgba(69,224,206,.5) 0 1px,transparent 1px 18px);
  opacity:.65;
}
.page-products .pc-hero__frame::before{top:0;}
.page-products .pc-hero__frame::after{bottom:0;}

.page-products .pc-hero h1{
  margin:10px 0 0;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(30px,5.4vw,54px);
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--white);
  transform:skewX(-2deg);
  transform-origin:left center;
}

.page-products .pc-hero__lead{
  max-width:34em;
  margin:16px 0 0;
  font-size:16px;
  line-height:1.85;
  color:var(--mist);
}

.page-products .pc-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:22px;
}

.page-products .pc-stats{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:24px 0 0;
}

.page-products .pc-stats__item{
  display:flex;
  flex-direction:column-reverse;
  gap:2px;
  padding:12px 14px;
  border-radius:var(--radius-sm);
  background:rgba(7,11,20,.55);
  border:1px solid var(--pc-line-soft);
}

.page-products .pc-stats dd{
  margin:0;
  font-family:var(--font-data);
  font-size:22px;
  line-height:1.2;
  color:var(--white);
  letter-spacing:-.01em;
}

.page-products .pc-stats__u{
  margin-left:3px;
  font-family:var(--font-body);
  font-size:12px;
  color:var(--mist);
}

.page-products .pc-stats dt{
  font-size:12px;
  letter-spacing:.04em;
  color:var(--grey);
}

/* ---------- 章节标题 ---------- */
.page-products .pc-block-head{
  margin-bottom:28px;
}

.page-products .pc-h2{
  margin:8px 0 0;
  font-family:var(--font-display);
  font-weight:900;
  font-size:clamp(22px,3.4vw,34px);
  line-height:1.25;
  letter-spacing:-.01em;
  color:var(--white);
  transform:skewX(-2deg);
  transform-origin:left center;
}

.page-products .pc-block-head__lead{
  max-width:38em;
  margin:12px 0 0;
  font-size:16px;
  line-height:1.85;
}

/* ---------- 索引地图 ---------- */
.page-products .pc-map{
  display:grid;
  gap:10px;
}

.page-products .pc-map__node{
  position:relative;
  display:grid;
  grid-template-columns:auto 1fr;
  grid-template-areas:
    "idx name"
    "idx desc";
  gap:2px 12px;
  padding:14px 16px;
  border-radius:var(--radius-md);
  background:var(--pc-card);
  border:1px solid rgba(69,224,206,.18);
  text-decoration:none;
  color:var(--mist);
  transition:border-color var(--dur) var(--ease),transform var(--dur) var(--ease),background var(--dur) var(--ease);
}

.page-products .pc-map__node::before{
  content:"";
  position:absolute;
  left:0;
  top:14px;
  bottom:14px;
  width:3px;
  border-radius:var(--pill);
  background:var(--cyan);
  opacity:0;
  transition:opacity var(--dur) var(--ease);
}

.page-products .pc-map__idx{
  grid-area:idx;
  align-self:center;
  font-size:13px;
  color:var(--cyan);
}

.page-products .pc-map__name{
  grid-area:name;
  font-family:var(--font-display);
  font-weight:900;
  font-size:17px;
  color:var(--white);
  transform:skewX(-2deg);
  transform-origin:left center;
}

.page-products .pc-map__desc{
  grid-area:desc;
  font-size:13px;
  line-height:1.6;
  color:var(--mist);
}

.page-products .pc-map__node:hover,
.page-products .pc-map__node:focus-visible{
  border-color:rgba(69,224,206,.6);
  background:rgba(12,43,51,.9);
  transform:translateY(-2px);
}

.page-products .pc-map__node:hover::before,
.page-products .pc-map__node:focus-visible::before{
  opacity:1;
}

.page-products .pc-map__node:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
}

/* ---------- 图片 ---------- */
.page-products .pc-figure{
  margin:24px 0 0;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:linear-gradient(150deg,#0C2B33,#0E1828 55%,#2A1220);
  border:1px solid var(--pc-line-soft);
}

.page-products .pc-figure img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:cover;
}

.page-products .pc-figure__cap{
  padding:10px 16px 12px;
  font-family:var(--font-data);
  font-size:12px;
  letter-spacing:.02em;
  color:var(--grey);
  border-top:1px dashed var(--pc-line-soft);
}

.page-products .pc-figure--tight{margin-top:20px;}

/* ---------- 图文交错 ---------- */
.page-products .pc-split{
  display:grid;
  gap:26px;
}

.page-products .pc-split__text p{
  margin:0 0 14px;
  font-size:16px;
  line-height:1.85;
  max-width:36em;
}

.page-products .pc-split__text h2{
  margin-bottom:14px;
}

.page-products .pc-split__media{
  margin:0;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:linear-gradient(155deg,#0C2B33,#0A1420 60%,#2A1220);
  border:1px solid var(--pc-line-soft);
}

.page-products .pc-split__media img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  object-fit:cover;
}

/* ---------- 筛选维度 ---------- */
.page-products .pc-ticks{
  list-style:none;
  margin:0 0 16px;
  padding:0;
  display:grid;
  gap:8px;
}

.page-products .pc-ticks__item{
  display:flex;
  gap:10px;
  align-items:baseline;
  padding:10px 14px;
  border-radius:var(--radius-sm);
  background:rgba(7,11,20,.45);
  border-left:3px solid var(--cyan);
  font-size:14px;
  line-height:1.6;
}

.page-products .pc-ticks__item .data{
  min-width:3.2em;
  font-size:13px;
  color:var(--cyan);
}

/* ---------- 路径图 ---------- */
.page-products .pc-path{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  margin:18px 0;
  padding:16px;
  border-radius:var(--radius-md);
  background:rgba(7,11,20,.5);
  border:1px dashed rgba(69,224,206,.28);
}

.page-products .pc-path__step{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 14px;
  border-radius:var(--pill);
  background:rgba(12,43,51,.9);
  border:1px solid rgba(69,224,206,.3);
  font-size:13px;
  line-height:1.4;
}

.page-products .pc-path__no{
  font-size:12px;
  color:var(--cyan);
}

.page-products .pc-path__rail{
  flex:1 1 20px;
  min-width:20px;
  height:1px;
  background:linear-gradient(90deg,var(--cyan),rgba(69,224,206,.1));
}

.page-products .pc-path__step--end{
  border-color:rgba(255,122,51,.55);
  background:rgba(42,18,32,.85);
}

.page-products .pc-path__step--end .pc-path__no{color:var(--orange);}

.page-products .pc-link{
  display:inline-block;
  margin-top:4px;
  color:var(--cyan);
  font-size:14px;
  text-decoration:none;
  border-bottom:1px solid rgba(69,224,206,.45);
  padding-bottom:2px;
  transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}

.page-products .pc-link:hover{color:var(--white);border-color:var(--white);}
.page-products .pc-link:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;}

/* ---------- 战绩折叠分区 ---------- */
.page-products .pc-forms{
  display:grid;
  gap:10px;
  margin-top:28px;
}

.page-products .pc-form{
  border-radius:var(--radius-md);
  background:var(--pc-card);
  border:1px solid var(--pc-line-soft);
  overflow:hidden;
  transition:border-color var(--dur) var(--ease);
}

.page-products .pc-form[open]{
  border-color:rgba(69,224,206,.42);
}

.page-products .pc-form summary{
  list-style:none;
}

.page-products .pc-form summary::-webkit-details-marker{display:none;}

.page-products .pc-form__head{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:
    "tag name rec"
    "tag spark spark";
  align-items:center;
  gap:4px 10px;
  padding:12px 14px;
  cursor:pointer;
}

.page-products .pc-form__head:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:-2px;
}

.page-products .pc-form__tag{
  grid-area:tag;
  padding:3px 9px;
  border-radius:var(--pill);
  background:rgba(69,224,206,.14);
  color:var(--cyan);
  font-family:var(--font-data);
  font-size:11px;
  letter-spacing:.02em;
  white-space:nowrap;
}

.page-products .pc-form__name{
  grid-area:name;
  font-family:var(--font-display);
  font-weight:900;
  font-size:16px;
  color:var(--white);
}

.page-products .pc-form__rec{
  grid-area:rec;
  font-size:13px;
  color:var(--orange);
  white-space:nowrap;
}

.page-products .pc-spark{
  grid-area:spark;
  display:inline-flex;
  gap:4px;
  margin-top:4px;
}

.page-products .pc-spark__d{
  width:9px;
  height:9px;
  border-radius:2px;
  background:var(--grey);
}

.page-products .pc-spark__d--w{background:var(--green);}
.page-products .pc-spark__d--d{background:var(--grey);}
.page-products .pc-spark__d--l{background:var(--pc-neg);}

.page-products .pc-form__body{
  padding:0 14px 14px;
  border-top:1px dashed var(--pc-line-soft);
}

.page-products .pc-form__split{
  margin:12px 0 10px;
  font-size:13px;
  line-height:1.7;
  color:var(--mist);
}

.page-products .pc-form__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:2px;
}

.page-products .pc-form__row{
  display:grid;
  grid-template-columns:5em 3.5em 3.5em auto;
  align-items:baseline;
  gap:8px;
  padding:7px 0;
  font-size:13px;
  border-bottom:1px dashed var(--pc-line-soft);
}

.page-products .pc-form__row:last-child{border-bottom:0;}

.page-products .pc-form__row .data{color:var(--white);font-size:13px;}

.page-products .pc-form__res{
  justify-self:end;
  font-size:12px;
  padding:1px 8px;
  border-radius:var(--pill);
}

.page-products .pc-form__res--w{background:rgba(111,227,154,.16);color:var(--green);}
.page-products .pc-form__res--d{background:rgba(94,113,137,.22);color:var(--mist);}
.page-products .pc-form__res--l{background:rgba(142,58,79,.28);color:#F0A7B6;}

/* ---------- 目录对照表 ---------- */
.page-products .pc-dir{
  border-radius:var(--radius-lg);
  background:rgba(14,24,40,.7);
  border:1px solid var(--pc-line-soft);
  padding:8px 14px;
}

.page-products .pc-dir__head{
  display:none;
}

.page-products .pc-dir__row{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:
    "key num"
    "fields fields";
  gap:2px 12px;
  padding:12px 0;
  border-bottom:1px dashed var(--pc-line-soft);
}

.page-products .pc-dir__row:last-child{border-bottom:0;}

.page-products .pc-dir__key{
  grid-area:key;
  font-family:var(--font-display);
  font-weight:900;
  font-size:15px;
  color:var(--white);
}

.page-products .pc-dir__fields{
  grid-area:fields;
  font-size:13px;
  line-height:1.7;
  color:var(--mist);
}

.page-products .pc-dir__num{
  grid-area:num;
  justify-self:end;
  font-size:14px;
  color:var(--cyan);
}

.page-products .pc-dir__row--total{
  background:rgba(12,43,51,.6);
  border-radius:var(--radius-sm);
  padding:12px 10px;
  margin-top:6px;
  border-bottom:0;
}

.page-products .pc-note{
  max-width:38em;
  margin:18px 0 0;
  font-size:14px;
  line-height:1.8;
  color:var(--mist);
}

/* ---------- 版本折叠 ---------- */
.page-products .pc-folds{
  display:grid;
  gap:10px;
}

.page-products .pc-fold{
  border-radius:var(--radius-md);
  background:rgba(7,11,20,.55);
  border:1px solid rgba(69,224,206,.22);
  overflow:hidden;
}

.page-products .pc-fold summary{list-style:none;cursor:pointer;}
.page-products .pc-fold summary::-webkit-details-marker{display:none;}

.page-products .pc-fold__head{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  padding:14px 14px;
}

.page-products .pc-fold__head:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:-2px;
}

.page-products .pc-fold__ver{
  font-size:13px;
  color:var(--cyan);
  padding:2px 8px;
  border-radius:var(--pill);
  border:1px solid rgba(69,224,206,.35);
}

.page-products .pc-fold__name{
  flex:1 1 auto;
  font-family:var(--font-display);
  font-weight:900;
  font-size:15px;
  color:var(--white);
}

.page-products .pc-fold__meta{
  font-size:12px;
  color:var(--grey);
}

.page-products .pc-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 4px rgba(111,227,154,.14);
  transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}

.page-products .pc-fold[open] .pc-dot{
  background:var(--mist);
  box-shadow:0 0 0 4px rgba(201,214,230,.12);
}

.page-products .pc-fold__body{
  padding:0 14px 16px;
  border-top:1px dashed var(--pc-line-soft);
}

.page-products .pc-fold__body p{
  margin:12px 0 10px;
  font-size:14px;
  line-height:1.8;
  max-width:36em;
}

.page-products .pc-fold__list{
  margin:0;
  padding-left:18px;
  display:grid;
  gap:6px;
  font-size:13px;
  line-height:1.7;
  color:var(--mist);
}

.page-products .pc-version-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:16px;
  margin-top:24px;
}

/* ---------- 控球率条带 ---------- */
.page-products .pc-poss{
  display:grid;
  gap:10px;
  padding:18px 14px;
  border-radius:var(--radius-lg);
  background:rgba(7,11,20,.55);
  border:1px solid var(--pc-line-soft);
}

.page-products .pc-poss__row{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:
    "label score"
    "bar bar"
    "pct pct";
  gap:6px 12px;
  align-items:baseline;
  padding-bottom:10px;
  border-bottom:1px dashed var(--pc-line-soft);
}

.page-products .pc-poss__row:last-child{border-bottom:0;padding-bottom:0;}

.page-products .pc-poss__label{
  grid-area:label;
  font-size:13px;
  color:var(--mist);
}

.page-products .pc-poss__score{
  grid-area:score;
  justify-self:end;
  font-size:16px;
  color:var(--white);
}

.page-products .pc-poss__bar{
  grid-area:bar;
  display:block;
  height:10px;
  border-radius:var(--pill);
  background:rgba(94,113,137,.2);
  overflow:hidden;
}

.page-products .pc-poss__fill{
  display:block;
  height:100%;
  border-radius:var(--pill);
  background:linear-gradient(90deg,var(--green),var(--cyan));
}

.page-products .pc-poss__fill--58{width:58%;}
.page-products .pc-poss__fill--42{width:42%;background:linear-gradient(90deg,rgba(94,113,137,.6),var(--grey));}
.page-products .pc-poss__fill--64{width:64%;}

.page-products .pc-poss__pct{
  grid-area:pct;
  justify-self:end;
  font-size:13px;
  color:var(--cyan);
}

.page-products .pc-figure--wide{margin-top:22px;}

/* ---------- 场景 ---------- */
.page-products .pc-scenes{
  display:grid;
  gap:12px;
}

.page-products .pc-scene{
  padding:18px 16px;
  border-radius:var(--radius-md);
  background:rgba(7,11,20,.5);
  border:1px solid rgba(201,214,230,.12);
}

.page-products .pc-scene__time{
  margin:0 0 8px;
  font-size:12px;
  letter-spacing:.04em;
  color:var(--cyan);
}

.page-products .pc-scene h3{
  margin:0 0 8px;
  font-family:var(--font-display);
  font-weight:900;
  font-size:17px;
  color:var(--white);
}

.page-products .pc-scene p{
  margin:0;
  font-size:14px;
  line-height:1.8;
  color:var(--mist);
}

.page-products .pc-scene__tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:12px;
}

.page-products .pc-scene__tags .pill{
  font-size:12px;
  padding:3px 10px;
  background:rgba(69,224,206,.12);
  color:var(--cyan);
}

/* ---------- 尾部行动 ---------- */
.page-products .pc-cta{
  padding:32px 20px;
  border-radius:var(--radius-lg);
  background:
    radial-gradient(110% 100% at 0% 0%,rgba(255,122,51,.16),transparent 62%),
    var(--ink-2);
  border:1px solid rgba(255,122,51,.24);
}

.page-products .pc-cta p{
  max-width:34em;
  margin:12px 0 0;
  font-size:15px;
  line-height:1.85;
  color:var(--mist);
}

.page-products .pc-cta__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:20px;
}

/* ---------- 平板及以上 ---------- */
@media (min-width:760px){
  .page-products .pc-stats{grid-template-columns:repeat(4,minmax(0,1fr));}
  .page-products .pc-map{grid-template-columns:repeat(2,minmax(0,1fr));}
  .page-products .pc-dir__head{
    display:grid;
    grid-template-columns:6.5em 1fr 4em;
    gap:12px;
    padding:10px 0 8px;
    font-family:var(--font-data);
    font-size:11px;
    letter-spacing:.06em;
    color:var(--grey);
    border-bottom:1px solid var(--pc-line-soft);
  }
  .page-products .pc-dir__row{
    grid-template-columns:6.5em 1fr 4em;
    grid-template-areas:"key fields num";
    align-items:baseline;
  }
  .page-products .pc-dir__num{justify-self:end;}
  .page-products .pc-scenes{grid-template-columns:repeat(2,minmax(0,1fr));}
  .page-products .pc-form__head{
    grid-template-columns:auto 1fr auto auto;
    grid-template-areas:"tag name rec spark";
  }
  .page-products .pc-spark{margin-top:0;}
  .page-products .pc-poss__row{
    grid-template-columns:9em 3.5em 1fr 3.5em;
    grid-template-areas:"label score bar pct";
    gap:12px;
    align-items:center;
  }
  .page-products .pc-poss__score{justify-self:end;}
  .page-products .pc-poss__pct{justify-self:end;}
}

/* ---------- 桌面错位栅格 ---------- */
@media (min-width:900px){
  .page-products .pc-section{padding:76px 0;}
  .page-products .pc-hero__frame{padding:48px 44px 36px;}
  .page-products .pc-map{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;}
  .page-products .pc-map__node:not(:last-child)::after{
    content:"";
    position:absolute;
    top:50%;
    right:-14px;
    width:14px;
    height:1px;
    background:linear-gradient(90deg,rgba(69,224,206,.75),rgba(69,224,206,0));
  }
  .page-products .pc-map__node{
    grid-template-columns:1fr;
    grid-template-areas:
      "idx"
      "name"
      "desc";
    gap:4px;
    padding:16px 16px 18px;
  }
  .page-products .pc-split{
    grid-template-columns:1.05fr .95fr;
    gap:52px;
    align-items:center;
  }
  .page-products .pc-split--flip .pc-split__media{order:-1;}
  .page-products .pc-split__text{padding-left:4%;}
  .page-products .pc-split--flip .pc-split__text{padding-left:0;padding-right:4%;}
  .page-products .pc-figure{margin-top:32px;}
  .page-products .pc-dir{padding:10px 22px;}
  .page-products .pc-poss{padding:22px 24px;}
  .page-products .pc-cta{display:grid;grid-template-columns:1fr auto;align-items:end;gap:24px;padding:44px 40px;}
  .page-products .pc-cta .pc-h2{grid-column:1 / -1;margin-top:0;}
  .page-products .pc-cta p{grid-column:1;margin-top:0;}
  .page-products .pc-cta__actions{grid-column:2;grid-row:2;margin-top:0;}
}

@media (prefers-reduced-motion:reduce){
  .page-products .pc-map__node,
  .page-products .pc-link,
  .page-products .pc-dot{
    transition:none;
  }
  .page-products .pc-map__node:hover{transform:none;}
}