/* ============================================
   下载中心 - .page-products 页面专属样式
   移动端优先，桌面端增强
============================================ */
.page-products {
  --pp-deep: #0b1f3a;
  --pp-gold: #c9a063;
  --pp-silver: #c0c0c0;
  --pp-light: #f4f6fa;
  --pp-android: #3ddc84;
  --pp-ios: #dfe6ee;
  --pp-windows: #5f8fc9;
  --pp-macos: #8d97a5;
  --pp-ink: #1a1a1a;
  --pp-muted: #4a4a4a;
  background: var(--pp-light);
  overflow-x: clip;
}

/* ---------- Hero ---------- */
.pp-hero {
  position: relative;
  overflow: hidden;
  background: var(--pp-deep);
  color: #ffffff;
  padding: calc(var(--space-2) + var(--space-2)) 0 var(--space-4);
}
.pp-hero::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -120px;
  top: -120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 160, 99, 0.22), transparent 70%);
  pointer-events: none;
}
.pp-hero::after {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  left: -110px;
  bottom: -110px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(43, 92, 138, 0.32), transparent 70%);
  pointer-events: none;
}
.pp-hero .container {
  position: relative;
  z-index: 1;
}
.page-products .pp-hero .breadcrumbs {
  margin-bottom: var(--space-3);
}
.page-products .pp-hero .breadcrumbs a,
.page-products .pp-hero .breadcrumbs li {
  color: rgba(255, 255, 255, 0.72);
}
.page-products .pp-hero .breadcrumbs li[aria-current="page"] {
  color: var(--pp-gold);
}
.pp-hero__grid {
  display: grid;
  gap: var(--space-4);
  align-items: center;
}
.pp-hero__content {
  display: grid;
  gap: var(--space-2);
}
.page-products .pp-hero .section-head__title {
  color: #ffffff;
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.12;
}
.pp-hero__lead {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--pp-gold);
  border-left: 3px solid var(--pp-gold);
  padding-left: var(--space-2);
  margin: 0;
}
.pp-hero__desc {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.96rem;
  line-height: 1.8;
  max-width: 36em;
  margin: 0;
}
.pp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-1);
}
.btn.pp-btn-light {
  border: 2px solid rgba(255, 255, 255, 0.85);
  color: #ffffff;
  background: transparent;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.btn.pp-btn-light:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #ffffff;
}
.pp-hero__visual svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.35));
}

/* ---------- 多平台支持区 ---------- */
.pp-platforms {
  padding: var(--space-4) 0 0;
}
.pp-platforms__intro {
  color: var(--pp-muted);
  font-size: 0.95rem;
  max-width: 34em;
  margin: var(--space-1) 0 var(--space-3);
}

.pp-platform {
  border-top: var(--border-thick) solid var(--pp-deep);
  padding: var(--space-3) 0;
}
.pp-platform--android {
  border-top-color: var(--pp-android);
}
.pp-platform--ios {
  border-top-width: 2px;
  border-top-color: var(--pp-silver);
  border-bottom: 1px solid rgba(192, 192, 192, 0.4);
}
.pp-platform--windows {
  background: var(--pp-deep);
  border-top: 0;
  padding: var(--space-4) var(--space-2);
  box-shadow: var(--shadow-hard);
  margin: var(--space-2) 0;
}
.pp-platform--macos {
  border-top-color: var(--pp-macos);
}

.pp-platform__grid {
  display: grid;
  gap: var(--space-3);
  align-items: center;
}
.pp-platform__body {
  order: 1;
}
.pp-platform__media {
  order: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 220px;
}
.pp-platform__media img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 14px;
  box-shadow: var(--shadow-soft);
}
.pp-platform--android .pp-platform__media img {
  max-width: 240px;
}
.pp-platform--windows .pp-platform__media img {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

.pp-platform__head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}
.pp-platform__head::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, var(--pp-gold), transparent);
}
.pp-platform--android .pp-platform__head::after {
  background: linear-gradient(to right, var(--pp-android), transparent);
}
.pp-platform--ios .pp-platform__head::after {
  background: linear-gradient(to right, var(--pp-silver), transparent);
}
.pp-platform--windows .pp-platform__head::after {
  background: linear-gradient(to right, var(--pp-windows), transparent);
}
.pp-platform--macos .pp-platform__head::after {
  background: linear-gradient(to right, var(--pp-macos), transparent);
}

.pp-platform__no {
  font-family: var(--font-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--pp-gold);
  border: 1px solid currentColor;
  border-radius: 999px;
  padding: 0.25em 0.7em;
  white-space: nowrap;
}
.pp-platform--android .pp-platform__no {
  color: var(--pp-android);
}
.pp-platform--ios .pp-platform__no {
  color: var(--pp-macos);
}
.pp-platform--windows .pp-platform__no {
  color: var(--pp-windows);
}
.pp-platform--macos .pp-platform__no {
  color: var(--pp-macos);
}

.pp-platform h3 {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 900;
  margin: 0;
  letter-spacing: 0.02em;
}
.pp-platform p {
  color: var(--pp-muted);
  font-size: 0.94rem;
  line-height: 1.8;
  margin: var(--space-1) 0 0;
  max-width: 40em;
}
.pp-platform--windows h3 {
  color: #ffffff;
}
.pp-platform--windows > .pp-platform__grid > .pp-platform__body > p {
  color: rgba(255, 255, 255, 0.8);
}

.pp-platform__features {
  list-style: none;
  margin: var(--space-2) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-1);
}
.pp-platform__features li {
  position: relative;
  padding-left: 1.2em;
  font-size: 0.92rem;
  color: var(--pp-muted);
}
.pp-platform__features li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.52em;
  width: 7px;
  height: 7px;
  background: var(--pp-gold);
  transform: rotate(45deg);
}
.pp-platform--android .pp-platform__features li::before {
  background: var(--pp-android);
}
.pp-platform--ios .pp-platform__features li::before {
  background: var(--pp-silver);
}
.pp-platform--windows .pp-platform__features li::before {
  background: var(--pp-windows);
}
.pp-platform--macos .pp-platform__features li::before {
  background: var(--pp-macos);
}
.pp-platform--windows .pp-platform__features li {
  color: rgba(255, 255, 255, 0.75);
}

.pp-dl-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}
.pp-dl-line__icon {
  width: 30px;
  height: 30px;
  object-fit: contain;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.pp-dl-line__meta {
  font-family: var(--font-display);
  font-size: 0.84rem;
  letter-spacing: 0.05em;
  color: var(--pp-muted);
  border-left: 2px solid var(--pp-gold);
  padding-left: var(--space-1);
}
.pp-platform--windows .pp-dl-line__meta {
  color: rgba(255, 255, 255, 0.72);
  border-left-color: var(--pp-windows);
}
.pp-dl-note {
  font-size: 0.88rem;
  color: var(--pp-muted);
  background: rgba(201, 160, 99, 0.1);
  border-left: 3px solid var(--pp-gold);
  padding: var(--space-1) var(--space-2);
  margin-top: var(--space-1);
  max-width: 40em;
  line-height: 1.7;
}
.pp-platform--windows .pp-dl-note {
  background: rgba(95, 143, 201, 0.14);
  color: rgba(255, 255, 255, 0.78);
  border-left-color: var(--pp-windows);
}

/* ---------- 版本选择 ---------- */
.pp-versions {
  background: var(--pp-deep);
  color: rgba(255, 255, 255, 0.88);
  padding: var(--space-4) 0;
  margin-top: var(--space-4);
}
.page-products .pp-versions .section-head__title {
  color: #ffffff;
}
.pp-versions__intro {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  line-height: 1.8;
  max-width: 36em;
  margin: var(--space-1) 0 var(--space-3);
}
.pp-versions__selector {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin-bottom: var(--space-3);
}
.pp-versions__tab {
  display: inline-block;
  padding: 0.4em 1em;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-display);
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.pp-versions__tab:hover {
  background: var(--pp-gold);
  border-color: var(--pp-gold);
  color: var(--pp-deep);
}

.pp-timeline {
  display: grid;
  gap: 0;
  position: relative;
}
.pp-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: var(--space-1) var(--space-2);
  padding-bottom: var(--space-3);
}
.pp-timeline__item::before {
  content: "";
  position: absolute;
  left: 1.32rem;
  top: 2.2rem;
  bottom: 0.4rem;
  width: 2px;
  background: linear-gradient(to bottom, var(--pp-gold), rgba(201, 160, 99, 0.12));
}
.pp-timeline__item:last-child::before {
  display: none;
}
.pp-timeline__rail {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: var(--space-1);
}
.pp-timeline__dot {
  width: 12px;
  height: 12px;
  background: var(--pp-gold);
  border: 2px solid var(--pp-deep);
  box-shadow: 0 0 0 2px var(--pp-gold);
  border-radius: 50%;
  margin-top: 0.28rem;
  position: relative;
  z-index: 1;
}
.pp-timeline__no {
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.6);
}
.pp-timeline__card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-left: 3px solid var(--pp-gold);
  border-radius: 4px;
  padding: var(--space-2);
}
.pp-timeline__card h3 {
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 700;
  margin: 0 0 0.4rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.pp-timeline__card p {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9rem;
  line-height: 1.75;
  margin: 0;
}
.pp-timeline__item:target .pp-timeline__card {
  background: rgba(201, 160, 99, 0.12);
  border-left-color: var(--pp-gold);
}

/* ---------- 下载前必读 ---------- */
.pp-before {
  padding: var(--space-4) 0;
  background: var(--pp-light);
}
.pp-before__grid {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.pp-step {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid rgba(11, 31, 58, 0.14);
  padding-bottom: var(--space-2);
}
.pp-step__no {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 2rem;
  line-height: 1;
  color: var(--pp-gold);
  -webkit-text-stroke: 1px rgba(201, 160, 99, 0.3);
  min-width: 2.4rem;
}
.pp-step__body h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.3rem;
}
.pp-step__body p {
  color: var(--pp-muted);
  font-size: 0.92rem;
  line-height: 1.75;
  margin: 0;
  max-width: 36em;
}
.pp-before__foot {
  margin-top: var(--space-3);
  padding: var(--space-2);
  border: var(--border-med) solid var(--pp-deep);
  box-shadow: var(--shadow-hard);
  background: #ffffff;
  font-size: 0.9rem;
  color: var(--pp-muted);
  display: grid;
  gap: var(--space-2);
  line-height: 1.8;
}
.pp-before__foot p {
  margin: 0;
}
.pp-before__foot a {
  color: var(--color-link);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(43, 92, 138, 0.4);
}
.pp-before__foot a:hover {
  border-bottom-color: var(--color-link);
}

/* ---------- 桌面端增强 ---------- */
@media (min-width: 680px) {
  .pp-before__grid {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-4);
  }
  .pp-dl-line {
    flex-wrap: nowrap;
  }
}

@media (min-width: 900px) {
  .pp-hero {
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
  }
  .pp-hero__grid {
    grid-template-columns: 1.1fr 0.9fr;
    gap: var(--space-5);
  }
  .pp-hero__lead {
    font-size: 1.22rem;
  }
  .pp-hero__desc {
    font-size: 1rem;
  }

  .pp-platform {
    padding: var(--space-4) 0;
  }
  .pp-platform__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4) var(--space-5);
  }
  .pp-platform__body {
    order: 2;
  }
  .pp-platform__media {
    order: 1;
  }
  .pp-platform--ios .pp-platform__media,
  .pp-platform--macos .pp-platform__media {
    order: 2;
  }
  .pp-platform--ios .pp-platform__body,
  .pp-platform--macos .pp-platform__body {
    order: 1;
  }
  .pp-platform--android .pp-platform__media img {
    max-width: 300px;
  }
  .pp-platform__head {
    margin-bottom: var(--space-2);
  }
  .pp-platform h3 {
    font-size: 1.5rem;
  }

  .pp-versions {
    padding: var(--space-5) 0;
    margin-top: var(--space-5);
  }
  .pp-timeline {
    grid-template-columns: 1fr 1fr;
    column-gap: var(--space-5);
    row-gap: var(--space-2);
  }
  .pp-timeline__item {
    padding-bottom: var(--space-3);
  }
  .pp-timeline__item::before {
    left: 1.32rem;
  }
  .pp-versions__intro {
    margin-bottom: var(--space-4);
  }

  .pp-before__foot {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    padding: var(--space-3);
  }
}