/* =====================================================
   下载APP按钮美化 (小王科技 App)
   覆盖: PC头部 / 移动顶栏 / 移动底部导航 / 个人中心
   依赖 remixicon 与商城主题变量 --lg-c1/c2/c3
   ===================================================== */

/* ---------- 通用渐变胶囊按钮(PC头部等) ---------- */
.app-dl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 16px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  color: #fff !important;
  text-decoration: none;
  vertical-align: middle;
  background: linear-gradient(135deg, var(--lg-c1, #ff9a44), var(--lg-c2, #ff5e3a) 55%, var(--lg-c3, #ff2e63));
  box-shadow: 0 6px 16px rgba(255, 80, 60, .32);
  position: relative;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease;
}
.app-dl::after {
  content: '';
  position: absolute;
  top: -20%;
  left: -80%;
  width: 45%;
  height: 140%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: skewX(-20deg);
  animation: appDlShine 3.4s ease-in-out infinite;
}
.app-dl i { font-size: 16px; }
.app-dl:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(255, 80, 60, .42); }
.app-dl:active { transform: translateY(0); }
@keyframes appDlShine {
  0%, 55% { left: -80%; }
  100%    { left: 135%; }
}

/* ---------- 移动端顶栏: 渐变圆形图标按钮 ---------- */
.m-app-fab {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  font-size: 17px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--lg-c1, #ff9a44), var(--lg-c2, #ff5e3a) 55%, var(--lg-c3, #ff2e63));
  box-shadow: 0 4px 10px rgba(255, 80, 60, .35);
  animation: mAppFabPulse 2.8s ease-in-out infinite;
}
.m-app-fab::after {
  content: '';
  position: absolute;
  top: -30%;
  left: -80%;
  width: 55%;
  height: 160%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-20deg);
  animation: appDlShine 3.4s ease-in-out infinite;
}
.m-app-fab:active { transform: scale(.92); }
.m-header .m-app-fab { margin-right: 8px; }
@keyframes mAppFabPulse {
  0%, 100% { box-shadow: 0 4px 10px rgba(255, 80, 60, .35); }
  50%      { box-shadow: 0 4px 18px rgba(255, 80, 60, .6); }
}

/* ---------- 移动端底部导航: APP 渐变圆图标 + 呼吸 ---------- */
#mTabbar .m-tab[data-nav="app"] .m-tab-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--lg-c1, #ff9a44), var(--lg-c2, #ff5e3a) 55%, var(--lg-c3, #ff2e63));
  box-shadow: 0 3px 8px rgba(255, 80, 60, .38);
}
#mTabbar .m-tab[data-nav="app"] .m-tab-icon i {
  color: #fff;
  font-size: 13px;
  line-height: 1;
}
#mTabbar .m-tab[data-nav="app"] { animation: mTabAppPulse 2.6s ease-in-out infinite; }
@keyframes mTabAppPulse {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-1px); }
}

/* ---------- 个人中心: hero 上的下载按钮(呼吸光环) ---------- */
.app-hero-dl { animation: appHeroDlGlow 2.4s ease-in-out infinite; }
@keyframes appHeroDlGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .0); }
  50%      { box-shadow: 0 0 16px 2px rgba(255, 255, 255, .55); }
}