/* YHTYG — 用户体验官获奖名单 */

html {
  font-size: calc(100vw / 1920 * 100) !important;
}

img {
  width: 100%;
}

@font-face {
  font-family: 'Alibaba PuHuiTi Heavy';
  src: url('../../bts/fonts/AlibabaPuHuiTi-2-105-Heavy.woff2') format('woff2'),
       url('../../bts/fonts/AlibabaPuHuiTi-2-105-Heavy.ttf') format('truetype');
  font-display: swap;
}

#yhtygContainer.main {
  overflow-x: hidden;
  background: #fbfcff;
}

.yhtyg-page-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-sizing: border-box;
}

.yhtyg-page-inner > .yhtyg-banner {
  width: 100%;
}

.wrap {
  width: 14.4rem;
  max-width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ① Banner — 对齐 MAAS/MIDSAL：双端背景图 + 负 margin */
.yhtyg-banner.details_banner,
.yhtyg-banner {
  position: relative;
  z-index: 0;
  height: 4.8rem;
  overflow: hidden;
  background-color: #f6f4ff;
  margin-bottom: -1.5rem;
}

.yhtyg-banner__bg-img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100% !important;
  height: 4.8rem !important;
  max-width: none;
  object-fit: cover;
  object-position: center top;
  pointer-events: none;
  z-index: 0;
}

/* 移动端背景默认隐藏，媒体查询内再显示 */
.yhtyg-banner__bg-img-m,
.yhtyg-banner .none_pc {
  display: none;
}

.yhtyg-banner__wrap {
  position: relative;
  z-index: 1;
  width: 14.4rem;
  max-width: 90%;
  margin: 0 auto;
  padding-top: 0.4rem;
  box-sizing: border-box;
}

.yhtyg-banner__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  width: 100%;
  max-width: 8.2rem;
  box-sizing: border-box;
}

.yhtyg-banner__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.16rem;
  padding: 0.05rem 0.28rem 0.05rem 0.18rem;
  border-radius: 0.32rem;
  background: #fff;
  box-shadow: 0 0.04rem 0.16rem rgba(0, 0, 0, 0.04);
  color: #595959;
  font-size: 0.18rem;
  line-height: 1.56;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

.yhtyg-banner__pill-dot {
  display: block;
  width: 0.06rem;
  height: 0.06rem;
  border-radius: 50%;
  background: #2b5dff;
  box-shadow: 0 0 0 0.06rem rgba(43, 93, 255, 0.16);
  flex-shrink: 0;
}

.yhtyg-banner__pill-text {
  white-space: nowrap;
}

.yhtyg-banner__title {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  font-family: 'Alibaba PuHuiTi Heavy', "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 0.72rem;
  line-height: 1.2;
  letter-spacing: 0;
  color: #262626;
}

/* Figma 13:1946：渐变 #2730BC → #7A71FF */
.yhtyg-banner__title-brand {
  display: inline-block;
  background-image: linear-gradient(90deg, #2730bc 0%, #7a71ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Figma 13:1945：实色 #262626；稿 gap -24 */
.yhtyg-banner__title-rest {
  display: inline-block;
  color: #262626;
  -webkit-text-fill-color: #262626;
  margin-left: -0.24rem;
}

.yhtyg-banner__sub {
  margin: 0;
  max-width: 7.2rem;
  color: #262626;
  font-size: 0.28rem;
  line-height: 1.2;
  letter-spacing: 0.05em;
  font-weight: 300;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

/* 「1000万元」橙色强调 */
.yhtyg-banner__sub-em {
  display: inline;
  color: #f28c38;
  font-weight: 400;
}

.yhtyg-banner__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.08rem;
  margin-top: 0.16rem;
  padding: 0.12rem 0.24rem 0.12rem 0.32rem;
  border-radius: 0.64rem;
  background: linear-gradient(90deg, #0600b7 0%, #265dee 100%);
  color: #fff;
  font-size: 0.18rem;
  font-weight: 700;
  line-height: 1.78;
  text-decoration: none;
  cursor: pointer;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
  box-sizing: border-box;
}

.yhtyg-banner__cta:hover {
  opacity: 0.94;
  color: #fff!important;
}

.yhtyg-banner__cta-arrow {
  display: inline-block;
  width: 0.18rem;
  height: 0.18rem;
  background: currentColor;
  clip-path: polygon(35% 10%, 75% 50%, 35% 90%, 25% 78%, 52% 50%, 25% 22%);
}

.yhtyg-banner__trophy {
  position: absolute;
  right: -0.2rem;
  top: 0.24rem;
  width: 9.4rem !important;
  height: auto !important;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
}

/* 内容区底图 + 上叠 Banner（对齐 MAAS .maas-body） */
.yhtyg-body {
  position: relative;
  z-index: 1;
  width: 100%;
  background-image: var(--yhtyg-body-bg-pc);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  padding-top: 0.16rem;
  padding-bottom: 0.8rem;
  box-sizing: border-box;
}

/* ② 月份排行榜 */
.yhtyg-rank {
  position: relative;
  padding: 0;
}

.yhtyg-rank__wrap {
  display: flex;
  align-items: flex-start;
  gap: 0.51rem;
}

.yhtyg-rank__tabs {
  width: 2.4rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
  position: sticky;
  top: 1rem;
}

/* Figma 16:2095 — 左栏月份 Tab */
.yhtyg-rank__tab {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 0.56rem;
  padding: 0.12rem 0.2rem;
  border: 0.0067rem solid #e2e8f0;
  border-radius: 0.08rem;
  background: rgba(255, 255, 255, 0.48);
  cursor: pointer;
  text-align: left;
  box-sizing: border-box;
  overflow: hidden;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

.yhtyg-rank__tab.is-active {
  height: auto;
  min-height: 0.56rem;
  padding: 0.16rem 0.2rem 0.14rem;
  background: #fff;
  border-color: transparent;
}

.yhtyg-rank__tab.is-active .yhtyg-rank__tab-bar {
  opacity: 1;
}

.yhtyg-rank__tab.is-disabled,
.yhtyg-rank__tab:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.yhtyg-rank__tab-bar {
  position: absolute;
  left: 0;
  top: 0;
  width: 0.04rem;
  height: 100%;
  background: #265dee;
  opacity: 0;
  pointer-events: none;
}

.yhtyg-rank__tab-main {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 0.1rem;
  min-width: 0;
}

.yhtyg-rank__tab-name {
  color: #62748e;
  font-size: 0.2rem;
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
}

.yhtyg-rank__tab.is-active .yhtyg-rank__tab-name {
  color: #000;
  font-weight: 700;
}

.yhtyg-rank__tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0.04rem 0.1rem;
  border-radius: 999rem;
  font-size: 0.14rem;
  font-weight: 500;
  line-height: 1.14;
  border: 0.0067rem solid transparent;
  box-sizing: border-box;
  white-space: nowrap;
  font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

/* 获奖已公布 */
.yhtyg-rank__tab-badge.is-published {
  background: #fffbeb;
  border-color: #fee685;
  color: #e17100;
}

/* 活动进行中 */
.yhtyg-rank__tab-badge.is-pending {
  background: #f0fff9;
  border-color: #5ed192;
  color: #1dc407;
}

.yhtyg-rank__panels {
  flex: 1;
  min-width: 0;
}

.yhtyg-rank__panel {
  display: none;
}

.yhtyg-rank__panel.is-active {
  display: block;
}

/* Figma 19:3263 — 领奖说明：白底卡片 + 左蓝条，深色标题 / 半透明正文 */
.yhtyg-note {
  position: relative;
  padding: 0.16rem 0.27rem 0.2rem;
  margin-bottom: 0.3rem;
  border-radius: 0.08rem;
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
}

.yhtyg-note::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 0.04rem;
  height: 100%;
  background: #155dfc;
  pointer-events: none;
}

.yhtyg-note__title {
  position: relative;
  margin: 0 0 0.16rem;
  padding: 0;
  border: 0;
  color: #262626;
  font-size: 0.24rem;
  font-weight: 700;
  line-height: 1.27;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

.yhtyg-note__body {
  color: rgba(38, 38, 38, 0.6);
  font-size: 0.2rem;
  font-weight: 400;
  line-height: 1.65;
  font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

.yhtyg-note__body p {
  margin: 0;
}

.yhtyg-note__body p + p {
  margin-top: 0;
}

/* Figma 17:2175 / 18:2303 — 区标题：渐变字 + 勋章 + 渐变分隔线 */
.yhtyg-section-head {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0 0 0.2rem;
}

.yhtyg-section-head__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
  gap: 0.08rem;
}

.yhtyg-section-head__title {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  font-family: 'Alibaba PuHuiTi Heavy', "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 0.44rem;
  line-height: 1.4;
  background: linear-gradient(90deg, #061b61 0%, #6470da 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* 标题后勋章 icon（覆盖全局 img{width:100%}） */
.yhtyg-section-head__icon,
.yhtyg-section-head__medal {
  display: block;
  width: 0.74rem !important;
  height: 0.74rem !important;
  max-width: none !important;
  flex-shrink: 0;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.yhtyg-section-head__line {
  width: 100%;
  height: 0.02rem;
  border: 0;
  background: linear-gradient(90deg, #255aec 0%, #f7f7ff 100%);
}

.yhtyg-officers {
  margin-bottom: 0.4rem;
}

.yhtyg-officers__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.2rem;
}

.yhtyg-officer {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.08rem;
  min-height: 2.3rem;
  padding: 0.12rem 0.2rem;
  border: 0.0067rem solid #f1f5f9;
  border-radius: 0.16rem;
  background: #fff;
  box-sizing: border-box;
  overflow: hidden;
}

/* Figma 18:2279 等：右上角渐变序号水印（#F0F0FE → #FFF）
   稿：高约 91px、贴顶约 5px、靠右（宽 127–143，卡片 262）
   覆盖全局 img{width:100%}，避免水印被拉满 */
.yhtyg-officer__no {
  position: absolute;
  right: 0;
  top: 0.05rem;
  z-index: 0;
  display: block;
  min-width: 0.72rem;
  color: rgba(241, 241, 253, 0.92);
  font-family: Arial, "Microsoft YaHei", sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1;
  text-align: right;
  white-space: nowrap;
  background: linear-gradient(180deg, #f0f0fe 0%, #ffffff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
  user-select: none;
}

.yhtyg-officer__avatar {
  position: relative;
  z-index: 1;
  width: 0.68rem;
  height: 0.68rem;
  border-radius: 50%;
  object-fit: cover;
}

.yhtyg-officer__tag {
  position: relative;
  z-index: 1;
  display: inline-flex;
  padding: 0.04rem 0.12rem;
  border-radius: 999rem;
  background: #eef2ff;
  color: #3730a3;
  font-size: 0.12rem;
  line-height: 1.3;
  border: 0.0067rem solid #c7d2fe;
}

.yhtyg-officer__name {
  position: relative;
  z-index: 1;
  color: #0f172a;
  font-size: 0.2rem;
  font-weight: 700;
  line-height: 1.4;
}

.yhtyg-officer__phone {
  position: relative;
  z-index: 1;
  color: #64748b;
  font-size: 0.14rem;
  line-height: 1.4;
}

.yhtyg-participants__table {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.3rem;
}

.yhtyg-participants__col {
  display: flex;
  flex-direction: column;
  border: 0.0074rem solid #f1f5f9;
  border-radius: 0.16rem;
  background: #fff;
  box-shadow: 0 0.02rem 0.24rem rgba(39, 48, 188, 0.07);
  overflow: hidden;
}

.yhtyg-participants__col .yhtyg-participants__head {
  order: 0;
}

.yhtyg-participants__head,
.yhtyg-participants__row {
  display: grid;
  grid-template-columns: 0.8rem 1fr 1.4rem;
  gap: 0.08rem;
  align-items: center;
  padding: 0.14rem 0.2rem;
  box-sizing: border-box;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

.yhtyg-participants__head {
  background: #f8fafc;
  color: #64748b;
  font-size: 0.14rem;
  font-weight: 600;
}

.yhtyg-participants__row {
  color: #0f172a;
  font-size: 0.14rem;
  border-top: 0.0067rem solid #f1f5f9;
}

.yhtyg-participants__col > .yhtyg-participants__row:nth-child(even) {
  background: #fcfcff;
}

/* activityover */
.message-box {
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  display: none;
}

.message-box.on {
  display: block;
}

.message {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 0.4rem 0.5rem 0.24rem;
  width: 4.8rem;
  max-width: calc(100% - 0.32rem);
  text-align: center;
  color: #262626;
  border-radius: 0.09rem;
  box-sizing: border-box;
}

.message img {
  width: 1.02rem;
  height: auto;
}

.message .tip {
  margin: 0.16rem 0 0.08rem;
  font-size: 0.2rem;
  font-weight: 600;
}

.message .desc {
  margin: 0 0 0.2rem;
  font-size: 0.14rem;
  color: #666;
  line-height: 1.6;
}

.message .btns {
  display: flex;
  justify-content: center;
  gap: 0.12rem;
}

.message .btns a,
.message .btns button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.2rem;
  height: 0.4rem;
  padding: 0 0.2rem;
  border: 0;
  border-radius: 0.04rem;
  background: #265dee;
  color: #fff;
  font-size: 0.14rem;
  cursor: pointer;
  text-decoration: none;
}

@media screen and (max-width: 750px) {
  html {
    font-size: calc(100vw / 750 * 100) !important;
  }

  .wrap {
    width: 100%;
    padding: 0 0.32rem;
    box-sizing: border-box;
  }

  .yhtyg-banner.details_banner,
  .yhtyg-banner {
    height: auto;
    min-height: 6.6rem;
    margin-bottom: 0;
    background-image: none !important;
  }

  .yhtyg-banner__bg-img,
  .yhtyg-banner .none_phone {
    display: none !important;
  }

  .yhtyg-banner__bg-img-m,
  .yhtyg-banner .none_pc.yhtyg-banner__bg-img-m {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    object-position: center top;
    pointer-events: none;
    z-index: 0;
  }

  .yhtyg-banner__wrap {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 100%;
    padding: 0.96rem 0.32rem 0.64rem;
  }

  .yhtyg-banner__inner {
    max-width: 100%;
    gap: 0.24rem;
  }

  .yhtyg-banner__title {
    font-size: 0.48rem;
  }

  .yhtyg-banner__title-rest {
    margin-left: -0.12rem;
  }

  .yhtyg-banner__sub {
    font-size: 0.28rem;
    max-width: 100%;
  }

  .yhtyg-banner__pill-text {
    white-space: normal;
  }

  .yhtyg-banner__cta {
    margin-top: 0.2rem;
    box-sizing: border-box;
  }

  .yhtyg-banner__trophy {
    display: none;
  }

  /* 移动：对齐 MAAS body 上叠 + 移动底图 */
  .yhtyg-body {
    padding: 0.32rem 0 0.64rem;
    background-image: var(--yhtyg-body-bg-m, var(--yhtyg-body-bg-pc));
    background-position: center top;
    background-size: cover;
  }

  .yhtyg-rank {
    padding: 0;
  }

  .yhtyg-rank__wrap {
    flex-direction: column;
    gap: 0.24rem;
  }

  .yhtyg-rank__tabs {
    width: 100%;
    position: static;
    flex-direction: row;
    overflow-x: auto;
    gap: 0.12rem;
    -webkit-overflow-scrolling: touch;
  }

  .yhtyg-rank__tab {
    flex: 0 0 auto;
    width: auto;
    min-width: 2.4rem;
  }

  .yhtyg-rank__tab.is-active {
    padding: 0.12rem 0.2rem;
  }

  .yhtyg-rank__tab.is-active .yhtyg-rank__tab-bar {
    width: 100%;
    height: 0.04rem;
    top: auto;
    bottom: 0;
    left: 0;
  }

  .yhtyg-note {
    padding: 0.24rem 0.28rem 0.28rem 0.32rem;
  }

  .yhtyg-note__title {
    font-size: 0.28rem;
    margin-bottom: 0.2rem;
  }

  .yhtyg-note__body {
    font-size: 0.24rem;
  }

  .yhtyg-section-head {
    gap: 0.16rem;
    margin-bottom: 0.24rem;
  }

  .yhtyg-section-head__title {
    font-size: 0.4rem;
  }

  .yhtyg-section-head__icon,
  .yhtyg-section-head__medal {
    width: 0.56rem !important;
    height: 0.56rem !important;
  }

  .yhtyg-officers__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.16rem;
  }

  .yhtyg-officer__no {
    min-width: 0.56rem;
    font-size: 0.68rem;
  }

  .yhtyg-participants__table {
    grid-template-columns: 1fr;
    gap: 0.16rem;
  }

  /* 移动端字号下限 0.24rem（仅抬升原本更小的字号） */
  .yhtyg-banner__pill,
  .yhtyg-banner__cta,
  .yhtyg-rank__tab-name,
  .yhtyg-rank__tab-badge,
  .yhtyg-officer__tag,
  .yhtyg-officer__name,
  .yhtyg-officer__phone,
  .yhtyg-participants__head,
  .yhtyg-participants__row,
  .message .tip,
  .message .desc,
  .message .btns a,
  .message .btns button {
    font-size: 0.24rem;
    grid-template-columns: 1rem 1fr 2.4rem;

  }

  .message {
    width: 6.2rem;
  }
}