.body {
  background-image: url('../assets/index/sy_bj@2x.png');
  background-repeat: no-repeat;
}

.blue-color{
  color: #6C43E2;
}
/* ================= 下载应用页 ================= */
.download-main {
  min-height: calc(100vh - 110px);
  padding: 170px 0 0 0;
  background-image: url('../assets/download/db_bj@2x.png');
  background-repeat: repeat-x;
  background-position: center top;
  background-size: 100% auto;
  text-align: center;
}
.download-main .download-title {
  font-size: 44px;
  font-weight: bold;
  color: #2e2d33;
  letter-spacing: 2px;
}
.download-main .download-title .gradient-text {
  background: linear-gradient(90deg, #7b5cf6 0%, #4c8dff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.download-main .download-subtitle {
  margin-top: 18px;
  font-size: 18px;
  color: #666666;
  letter-spacing: 1px;
}

/* 下载卡片 */
.download-main .download-cards {
  margin-top: 64px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.download-main .download-card {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(80, 60, 160, 0.08);
  padding-top: 150px;
  padding-bottom: 30px;
  text-align: center;
  background-color: #ffffff;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  transition: transform 0.2s, box-shadow 0.2s;
}
/* 各平台卡片头图（整卡背景，顶部为彩色平台区） */
.download-main .download-card.card-windows {
  background-image: url('../assets/download/kp_1@2x.png');
}
.download-main .download-card.card-android {
  background-image: url('../assets/download/kp_2@2x.png');
}
.download-main .download-card.card-ios {
  background-image: url('../assets/download/kp_3@2x.png');
}
.download-main .download-card.card-mac {
  background-image: url('../assets/download/kp_4@2x.png');
}
.download-main .download-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 44px rgba(80, 60, 160, 0.14);
}
.download-main .download-card .platform {
  margin-top: 26px;
  font-size: 20px;
  font-weight: bold;
  color: #333333;
}
.download-main .download-card .version {
  margin-top: 10px;
  font-size: 14px;
  color: #999999;
}
.download-main .download-card .download-icon {
  display: block;
  width: 56px;
  height: 56px;
  margin: 24px auto 0;
  cursor: pointer;
  transition: transform 0.2s;
}
.download-main .download-card .download-icon:hover {
  transform: scale(1.08);
}

/* 卡片底部说明 */
.download-main .download-card .tips {
  margin-top: 26px;
  padding: 0 26px;
  text-align: left;
}
.download-main .download-card .tips li {
  position: relative;
  padding-left: 16px;
  font-size: 13px;
  color: #777777;
  line-height: 30px;
}
.download-main .download-card .tips li::before {
  
  content: '';
  position: absolute;
  left: 3px;
  top: 16px;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: #b7b3ff;
}
.download-main .download-card .tips li::after {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: #8780ff;
}
.download-main .download-card .tips li a {
  color: #777777;
  transition: color 0.2s;
}
.download-main .download-card .tips li a:hover {
  color: #7b5cf6;
}
.download-main .download-card .tips li a.red {
  color: #ff4d4f;
}
.download-main .download-card .tips li a.red:hover {
  text-decoration: underline;
}

/* ---- 二维码悬浮提示 ---- */
.download-icon-wrapper {
  position: relative;
  display: inline-block;
}

.download-icon-wrapper .qrcode-tooltip {
  display: none;
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 14px;
  padding: 8px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.13);
  z-index: 100;
}

.download-icon-wrapper .qrcode-tooltip img {
  display: block;
  width: 160px;
  height: 160px;
  max-width: none;
}

/* 向下三角箭头 */
.download-icon-wrapper .qrcode-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 9px solid transparent;
  border-top-color: #fff;
}

.download-icon-wrapper:hover .qrcode-tooltip {
  display: block;
}
