/* 顶部导航「推广奖励」入口 v1
   设计目标：在纯文字导航中形成唯一一个品牌色入口
   —— 礼盒图标 + 浅蓝→浅紫胶囊底 + ≥1280 的「返 15%」徽章，
   悬停整块转为品牌渐变并让礼盒轻晃一下，引导点击但不做无限循环动画。 */

header .header-nav > li.ub-nav-rebate {
  margin: 0 4px 0 8px;
}
header .header-nav > li.ub-nav-rebate > a {
  padding: 0 2px;
}
header .header-nav .ub-rebate-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  padding: 0 12px 0 11px;
  border-radius: 999px;
  background: linear-gradient(135deg, #eef4ff 0%, #f4f0ff 100%);
  box-shadow: inset 0 0 0 1px rgba(45, 90, 255, 0.18), 0 8px 18px -14px rgba(45, 90, 255, 0.55);
  color: #2d5aff;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  transform: translateZ(0);
  transition: color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}
header .header-nav .ub-rebate-icon {
  display: block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  transform-origin: 50% 62%;
}
header .header-nav .ub-rebate-tag {
  display: none;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2d5aff 0%, #7b5cff 100%);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 20px;
  letter-spacing: 0.2px;
}
@media (min-width: 1280px) {
  header .header-nav .ub-rebate-tag {
    display: inline-block;
  }
}

/* 悬停 / 键盘聚焦：整块渐变点亮 */
header .header-nav > li.ub-nav-rebate > a:hover .ub-rebate-pill,
header .header-nav > li.ub-nav-rebate > a:focus-visible .ub-rebate-pill {
  color: #fff;
  background: linear-gradient(135deg, #2d5aff 0%, #7b5cff 100%);
  box-shadow: 0 12px 24px -14px rgba(45, 90, 255, 0.85), inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  transform: translateY(-1px);
}
header .header-nav > li.ub-nav-rebate > a:hover .ub-rebate-tag,
header .header-nav > li.ub-nav-rebate > a:focus-visible .ub-rebate-tag {
  background: rgba(255, 255, 255, 0.22);
}
header .header-nav > li.ub-nav-rebate > a:hover .ub-rebate-icon,
header .header-nav > li.ub-nav-rebate > a:focus-visible .ub-rebate-icon {
  animation: ub-rebate-wiggle 0.55s ease;
}
@keyframes ub-rebate-wiggle {
  0%,
  100% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(-10deg) scale(1.06);
  }
  65% {
    transform: rotate(8deg);
  }
}

/* 1024–1279：导航最挤的区间，胶囊收窄、去掉徽章（徽章仅 ≥1280 展示） */
@media (min-width: 1024px) and (max-width: 1279px) {
  header .header-nav > li.ub-nav-rebate {
    margin: 0 2px 0 4px;
  }
  header .header-nav .ub-rebate-pill {
    gap: 5px;
    height: 30px;
    padding: 0 10px 0 8px;
    font-size: 15px;
  }
  header .header-nav .ub-rebate-icon {
    width: 16px;
    height: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  header .header-nav .ub-rebate-pill {
    transition: none;
  }
  header .header-nav > li.ub-nav-rebate > a:hover .ub-rebate-icon,
  header .header-nav > li.ub-nav-rebate > a:focus-visible .ub-rebate-icon {
    animation: none;
  }
}

/* 移动端菜单：整行浅蓝打底 + 图标 + 返佣比例标签 */
header .mobile-header-nav .mobile-nav-item.ub-mnav-rebate .mobile-nav-title {
  background: #f6f9ff;
  border-bottom-color: #e6eeff;
}
header .mobile-header-nav .ub-mnav-rebate-main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #2d5aff;
  font-weight: 600;
}
header .mobile-header-nav .ub-mnav-rebate-main svg {
  display: block;
  width: 19px;
  height: 19px;
}
header .mobile-header-nav .ub-mnav-rebate-tag {
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #2d5aff 0%, #7b5cff 100%);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 600;
  line-height: 20px;
}