/* ===== 工具与设备中心（page-products）===== */
.page-products{
  --pd-hair:rgba(167,162,208,.2);
  --pd-cyan-glow:rgba(0,232,206,.32);
  --pd-orange-glow:rgba(255,122,26,.24);
  --pd-violet-glow:rgba(91,71,214,.38);
  color:var(--yh-ink);
  display:block;
}

.page-products .yh-section{
  padding-block:56px;
}
.page-products .yh-section--tight{
  padding-block:40px 72px;
}

/* ---------- 首屏 ---------- */
.page-products .pd-hero{
  padding-block:24px 48px;
}
.page-products .pd-hero__layout{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:32px;
  align-items:center;
}
.page-products .pd-hero__copy .yh-display{
  margin:10px 0 18px;
}
.page-products .pd-hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:26px;
}

.page-products .pd-console{
  position:relative;
  border-radius:var(--yh-radius);
  padding:22px 20px 20px;
  border:1px solid var(--pd-hair);
  background:
    radial-gradient(120% 90% at 84% -6%, var(--pd-cyan-glow), transparent 58%),
    radial-gradient(90% 80% at 0% 110%, var(--pd-violet-glow), transparent 62%),
    linear-gradient(158deg, var(--yh-lift), var(--yh-deep) 60%, var(--yh-void));
  clip-path:polygon(0 0, 100% 0, 100% 96%, 0 100%);
  overflow:hidden;
}
.page-products .pd-console::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(236,234,251,.1) 1px, transparent 1px);
  background-size:16px 16px;
  opacity:.5;
  pointer-events:none;
}
.page-products .pd-console__strip{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-bottom:16px;
  border-bottom:1px dashed var(--pd-hair);
}
.page-products .pd-console__coord{
  font-size:11px;
  letter-spacing:.1em;
  color:var(--yh-cyan);
}
.page-products .pd-console__pill{
  flex:none;
  padding:5px 16px;
  border-radius:var(--yh-pill);
  background:linear-gradient(140deg, var(--yh-gold), #ffb036);
  color:var(--yh-panel-ink);
  font-size:13px;
  font-weight:700;
}

.page-products .pd-rig{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:14px;
  margin:46px 0 34px;
}
.page-products .pd-rig__item{
  position:relative;
  display:block;
  border-radius:10px;
  border:1px solid rgba(0,232,206,.42);
  background:linear-gradient(180deg, rgba(0,232,206,.18), rgba(91,71,214,.12));
  box-shadow:0 12px 28px -18px var(--pd-cyan-glow);
}
.page-products .pd-rig__item::after{
  content:attr(data-label);
  position:absolute;
  left:50%;
  bottom:-22px;
  transform:translateX(-50%);
  font-family:var(--yh-font-mono);
  font-size:11px;
  letter-spacing:.08em;
  color:var(--yh-mist);
  white-space:nowrap;
}
.page-products .pd-rig__item--phone{width:42px;height:74px;border-radius:9px}
.page-products .pd-rig__item--tablet{width:60px;height:84px}
.page-products .pd-rig__item--laptop{width:92px;height:58px;border-radius:8px 8px 4px 4px}
.page-products .pd-rig__item--desktop{width:82px;height:64px}

.page-products .pd-console__note{
  position:relative;
  z-index:1;
  margin:0;
  font-size:13px;
  line-height:1.7;
  color:var(--yh-text-soft);
}

/* ---------- 苹果通道 ---------- */
.page-products .pd-channel__grid{
  align-items:start;
}
.page-products .pd-channel__media{
  margin:0;
}
.page-products .pd-channel__copy .yh-h2{
  margin:10px 0 16px;
}
.page-products .pd-channel__text{
  max-width:60ch;
  color:var(--yh-text-soft);
}
.page-products .pd-channel__text + .pd-steps{
  margin-top:28px;
}

.page-products .pd-steps{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:2px;
}
.page-products .pd-steps__item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:14px;
  padding:18px 0;
  border-top:1px solid var(--pd-hair);
}
.page-products .pd-steps__item:last-child{
  border-bottom:1px solid var(--pd-hair);
}
.page-products .pd-steps__num{
  font-size:16px;
  line-height:1.6;
  color:var(--yh-cyan);
}
.page-products .pd-steps__item .yh-h3{
  margin:0 0 6px;
}
.page-products .pd-steps__item p{
  margin:0;
  font-size:15px;
  line-height:1.75;
  color:var(--yh-text-soft);
}
.page-products .pd-channel__foot{
  margin:22px 0 0;
  font-size:14px;
  color:var(--yh-mist);
}
.page-products .pd-channel__foot a,
.page-products .pd-weak__link a{
  color:var(--yh-cyan);
  text-decoration:none;
  border-bottom:1px solid rgba(0,232,206,.42);
}
.page-products .pd-channel__foot a:hover,
.page-products .pd-weak__link a:hover{
  border-bottom-color:var(--yh-cyan);
}

/* ---------- 设备自查 ---------- */
.page-products .pd-checks{
  list-style:none;
  margin:8px 0 0;
  padding:0;
  display:grid;
  gap:0;
}
.page-products .pd-checks__item{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:6px 16px;
  padding:22px 0;
  border-top:1px solid var(--pd-hair);
}
.page-products .pd-checks__item:last-child{
  border-bottom:1px solid var(--pd-hair);
}
.page-products .pd-checks__num{
  font-size:20px;
  line-height:1.2;
  color:var(--yh-cyan);
}
.page-products .pd-checks__body .yh-h3{
  margin:0 0 8px;
}
.page-products .pd-checks__body p{
  margin:0;
  max-width:62ch;
  font-size:15px;
  line-height:1.78;
  color:var(--yh-text-soft);
}
.page-products .pd-checks__item .yh-chip{
  grid-column:2;
  justify-self:start;
  margin-top:10px;
}
.page-products .pd-selfcheck__media{
  margin:34px 0 0;
}

/* ---------- 画质分档 ---------- */
.page-products .pd-quality__tabs{
  margin-top:6px;
}
.page-products .pd-quality__tablist{
  display:flex;
  flex-wrap:wrap;
  gap:6px 18px;
}
.page-products .pd-quality__panel{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:24px;
  padding-top:26px;
}
.page-products .pd-stage{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:186px;
  border-radius:var(--yh-radius);
  border:1px solid var(--pd-hair);
  background:
    radial-gradient(72% 78% at 50% 42%, var(--pd-stage-glow), transparent 70%),
    linear-gradient(160deg, var(--yh-deep), var(--yh-void));
  overflow:hidden;
}
.page-products .pd-stage--smooth{--pd-stage-glow:rgba(0,232,206,.42)}
.page-products .pd-stage--standard{--pd-stage-glow:rgba(91,71,214,.46)}
.page-products .pd-stage--light{--pd-stage-glow:rgba(255,122,26,.22)}
.page-products .pd-stage__screen{
  display:block;
  width:min(64%,240px);
  height:96px;
  border-radius:14px;
  border:1px solid rgba(0,232,206,.5);
  background:linear-gradient(180deg, rgba(0,232,206,.2), rgba(91,71,214,.1));
  box-shadow:0 22px 60px -30px var(--pd-stage-glow);
}
.page-products .pd-stage--light .pd-stage__screen{
  border-color:rgba(255,122,26,.55);
  background:linear-gradient(180deg, rgba(255,122,26,.2), rgba(10,10,28,.4));
}
.page-products .pd-quality__copy .yh-h3{
  margin:0 0 10px;
}
.page-products .pd-quality__copy p{
  margin:0 0 16px;
  max-width:60ch;
  font-size:15px;
  line-height:1.78;
  color:var(--yh-text-soft);
}
.page-products .pd-quality__list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.page-products .pd-quality__list li{
  position:relative;
  padding-left:22px;
  font-size:15px;
  line-height:1.7;
  color:var(--yh-ink);
}
.page-products .pd-quality__list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:10px;
  height:2px;
  background:var(--yh-orange);
}
.page-products .pd-quality__infographic{
  margin:36px 0 0;
}
.page-products .pd-quality__foot{
  margin:18px 0 0;
  font-size:14px;
  color:var(--yh-mist);
}

/* ---------- 浏览器与系统版本 ---------- */
.page-products .pd-specs{
  display:grid;
  gap:1px;
  margin-top:8px;
  border-radius:var(--yh-radius);
  overflow:hidden;
  background:var(--pd-hair);
}
.page-products .pd-specs__row{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:6px;
  padding:18px 20px;
  background:var(--yh-void);
}
.page-products .pd-specs__key{
  font-size:13px;
  letter-spacing:.08em;
  color:var(--yh-orange);
}
.page-products .pd-specs__val{
  font-size:15px;
  line-height:1.75;
  color:var(--yh-text-soft);
}
.page-products .pd-browsers__foot{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  margin-top:22px;
}
.page-products .pd-browsers__hint{
  margin:0;
  font-size:14px;
  color:var(--yh-mist);
}

/* ---------- 弱网应急 ---------- */
.page-products .pd-weak__grid{
  align-items:center;
}
.page-products .pd-weak__copy .yh-h2{
  margin:10px 0 14px;
}
.page-products .pd-weak__copy > p{
  max-width:60ch;
  color:var(--yh-text-soft);
}
.page-products .pd-weak__list{
  margin:20px 0 0;
  padding-left:20px;
  display:grid;
  gap:12px;
}
.page-products .pd-weak__list li{
  font-size:15px;
  line-height:1.78;
  color:var(--yh-ink);
}
.page-products .pd-weak__list li::marker{
  color:var(--yh-cyan);
}
.page-products .pd-weak__link{
  margin:18px 0 0;
  font-size:14px;
  color:var(--yh-mist);
}
.page-products .pd-weak__media{
  margin:0;
}

/* ---------- 排查 ---------- */
.page-products .pd-flow{
  display:block;
  width:100%;
  max-width:720px;
  height:auto;
  margin:6px 0 28px;
}
.page-products .pd-trouble__list{
  display:grid;
  gap:0;
}
.page-products .pd-trouble__list .yh-details{
  border-top:1px solid var(--pd-hair);
}
.page-products .pd-trouble__list .yh-details:last-child{
  border-bottom:1px solid var(--pd-hair);
}
.page-products .pd-trouble__steps{
  margin:0;
  padding-left:20px;
  display:grid;
  gap:10px;
}
.page-products .pd-trouble__steps li{
  font-size:15px;
  line-height:1.78;
  color:var(--yh-text-soft);
}
.page-products .pd-trouble__steps li::marker{
  color:var(--yh-orange);
  font-family:var(--yh-font-mono);
}

/* ---------- 下一步 ---------- */
.page-products .pd-next__title{
  margin:0 0 18px;
  color:var(--yh-mist);
}
.page-products .pd-next__links{
  display:grid;
  gap:10px;
}
.page-products .pd-next__link{
  display:block;
  padding:16px 20px;
  border-radius:var(--yh-radius-sm);
  border:1px solid var(--pd-hair);
  background:rgba(36,28,85,.42);
  color:var(--yh-ink);
  font-size:15px;
  line-height:1.6;
  text-decoration:none;
  transition:border-color .16s var(--yh-ease), background-color .16s var(--yh-ease);
}
.page-products .pd-next__link:hover{
  border-color:var(--yh-line-strong);
  background:rgba(36,28,85,.68);
}

/* ---------- 响应式 ---------- */
@media (min-width:600px){
  .page-products .pd-checks__item{
    grid-template-columns:auto minmax(0,1fr) auto;
    align-items:start;
    gap:18px 20px;
    padding:24px 4px;
  }
  .page-products .pd-checks__item .yh-chip{
    grid-column:3;
    margin-top:2px;
  }
  .page-products .pd-specs__row{
    grid-template-columns:minmax(0,4fr) minmax(0,8fr);
    align-items:baseline;
    gap:24px;
  }
  .page-products .pd-next__links{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }
}

@media (min-width:900px){
  .page-products .yh-section{
    padding-block:72px;
  }
  .page-products .pd-hero{
    padding-block:32px 64px;
  }
  .page-products .pd-hero__layout{
    grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    gap:56px;
  }
  .page-products .pd-quality__panel{
    grid-template-columns:minmax(0,5fr) minmax(0,7fr);
    align-items:center;
    gap:44px;
    padding-top:32px;
  }
  .page-products .pd-stage{
    min-height:240px;
  }
  .page-products .pd-stage__screen{
    height:120px;
  }
}

@media (max-width:599px){
  .page-products .pd-rig{
    gap:10px;
  }
  .page-products .pd-rig__item--phone{width:34px;height:60px}
  .page-products .pd-rig__item--tablet{width:48px;height:68px}
  .page-products .pd-rig__item--laptop{width:70px;height:46px}
  .page-products .pd-rig__item--desktop{width:62px;height:50px}
  .page-products .pd-rig__item::after{
    font-size:10px;
  }
  .page-products .pd-hero__actions .yh-btn{
    flex:1 1 100%;
    text-align:center;
  }
}

@media (prefers-reduced-motion:reduce){
  .page-products .pd-next__link{
    transition:opacity .12s linear;
  }
}
</main>