/* 我的页 VIP 等级卡片 — 余额下方 / 提现存款上方（原轮播槽位） */
html[data-cs-mine-vip="1"] #app [class*="mine-1-vip"],
html[data-cs-mine-vip="1"] #app [class*="vip-container"]:not(#cs-mine-vip-card),
html[data-cs-mine-vip="1"] #app [class*="user-vip"]:not(#cs-mine-vip-card),
html[data-cs-mine-vip="1"] #cs-mine-banner,
html[data-cs-mine-vip="1"] #app .cs-mine-banner {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

html[data-cs-mine-vip="1"] #app [class*="navCard"] > [data-cs-nav-hidden="1"],
html[data-cs-mine-vip="1"] #app [class*="navCardContainer"] > [data-cs-nav-hidden="1"],
body.cs-mine [class*="navCard"] > [data-cs-nav-hidden="1"],
body.cs-mine [class*="navCardContainer"] > [data-cs-nav-hidden="1"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

#cs-mine-vip-card {
  position: relative;
  display: block !important;
  box-sizing: border-box;
  width: calc(100% - 0.4rem) !important;
  max-width: 7.1rem !important;
  margin: 0.32rem auto 0.1rem !important;
  padding: 0 !important;
  border-radius: 0.2rem;
  overflow: hidden;
  isolation: isolate;
  clear: both;
  z-index: 2;
  animation: cs-mv-enter 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

html[data-cs-mine-vip="1"] #app [class*="bgImg"] #cs-mine-vip-card,
html[data-cs-mine-vip="1"] #app [class*="user-card-box"] + #cs-mine-vip-card {
  margin-top: 0.36rem !important;
  margin-bottom: 0.1rem !important;
}

html[data-cs-mine-vip="1"] #app [class*="mine2-navs-wrap"],
html[data-cs-mine-vip="1"] #app [class*="mine3-navs-wrap"],
html[data-cs-mine-vip="1"] #app [class*="mine4-navs-wrap"],
html[data-cs-mine-vip="1"] #app [class*="mine-navs-wrap"] {
  margin-top: 0.06rem !important;
}

/* 提现/存款 与下方四列菜单对称：左半区 / 右半区居中 */
html[data-cs-mine-vip="1"] #app [class*="navCard"].cs-mine-nav-grid-4,
html[data-cs-mine-vip="1"] body.cs-mine [class*="navCard"].cs-mine-nav-grid-4 {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  justify-items: center !important;
  align-items: start !important;
  width: 100% !important;
  max-width: 7.1rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0.1rem 0.2rem 0 !important;
  box-sizing: border-box !important;
  gap: 0 !important;
}

html[data-cs-mine-vip="1"] #app [class*="navCard"].cs-mine-nav-grid-4 > [data-cs-nav-role="withdraw"],
html[data-cs-mine-vip="1"] body.cs-mine [class*="navCard"].cs-mine-nav-grid-4 > [data-cs-nav-role="withdraw"] {
  grid-column: 1 / 3 !important;
  grid-row: 1 !important;
  justify-self: center !important;
}

html[data-cs-mine-vip="1"] #app [class*="navCard"].cs-mine-nav-grid-4 > [data-cs-nav-role="deposit"],
html[data-cs-mine-vip="1"] body.cs-mine [class*="navCard"].cs-mine-nav-grid-4 > [data-cs-nav-role="deposit"] {
  grid-column: 3 / 5 !important;
  grid-row: 1 !important;
  justify-self: center !important;
}

html[data-cs-mine-vip="1"] #app [class*="navCard"].cs-mine-nav-grid-4 > [data-cs-nav-hidden="1"],
html[data-cs-mine-vip="1"] body.cs-mine [class*="navCard"].cs-mine-nav-grid-4 > [data-cs-nav-hidden="1"] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

@keyframes cs-mv-enter {
  from {
    opacity: 0;
    transform: translateY(0.18rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#cs-mine-vip-card .cs-mv-card {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: 1.72rem;
  padding: 0.22rem 0.24rem 0.24rem 0.28rem;
  border-radius: inherit;
  border: 0.02rem solid rgba(209, 174, 82, 0.28);
  background:
    radial-gradient(ellipse 85% 120% at 100% 50%, rgba(56, 189, 172, 0.14) 0%, transparent 58%),
    radial-gradient(ellipse 60% 80% at 0% 100%, rgba(209, 174, 82, 0.1) 0%, transparent 55%),
    linear-gradient(135deg, #242424 0%, #1c1c1c 48%, #1f2528 100%);
  box-shadow:
    0 0.06rem 0.2rem rgba(0, 0, 0, 0.35),
    inset 0 0.01rem 0 rgba(255, 255, 255, 0.06);
}

#cs-mine-vip-card .cs-mv-wave {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.45;
  background:
    repeating-linear-gradient(
      -12deg,
      transparent,
      transparent 0.28rem,
      rgba(209, 174, 82, 0.03) 0.28rem,
      rgba(209, 174, 82, 0.03) 0.3rem
    );
  animation: cs-mv-wave 8s linear infinite;
}

@keyframes cs-mv-wave {
  from { transform: translateX(0); }
  to { transform: translateX(-0.6rem); }
}

#cs-mine-vip-card .cs-mv-shimmer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.04) 50%,
    transparent 62%
  );
  transform: translateX(-120%);
  animation: cs-mv-shimmer 4.2s ease-in-out infinite;
}

@keyframes cs-mv-shimmer {
  0%, 72% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

#cs-mine-vip-card .cs-mv-main {
  position: relative;
  z-index: 1;
  flex: 1;
  min-width: 0;
  padding-right: 0.12rem;
}

#cs-mine-vip-card .cs-mv-tag {
  display: inline-block;
  padding: 0.04rem 0.14rem;
  border-radius: 999px;
  font-size: 0.2rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
}

#cs-mine-vip-card .cs-mv-head {
  display: flex;
  align-items: center;
  gap: 0.12rem;
  margin-top: 0.1rem;
}

#cs-mine-vip-card .cs-mv-level {
  margin: 0;
  font-size: 0.44rem;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: 0.01rem;
  color: #e8edf5;
  text-shadow: 0 0.02rem 0.08rem rgba(0, 0, 0, 0.35);
}

#cs-mine-vip-card .cs-mv-upgrade {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.02rem;
  padding: 0.06rem 0.16rem;
  border: 0.02rem solid rgba(209, 174, 82, 0.45);
  border-radius: 999px;
  background: rgba(26, 26, 26, 0.72);
  color: #d1ae52;
  font-size: 0.22rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}

#cs-mine-vip-card .cs-mv-upgrade:active {
  transform: scale(0.96);
}

#cs-mine-vip-card .cs-mv-upgrade span {
  font-size: 0.24rem;
  line-height: 1;
}

#cs-mine-vip-card .cs-mv-prog {
  margin-top: 0.14rem;
}

#cs-mine-vip-card .cs-mv-prog-track {
  position: relative;
  display: flex;
  align-items: center;
  height: 0.28rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.35);
  border: 0.01rem solid rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

#cs-mine-vip-card .cs-mv-prog-pct {
  position: relative;
  z-index: 3;
  flex-shrink: 0;
  min-width: 0.72rem;
  padding: 0 0.1rem;
  font-size: 0.18rem;
  font-weight: 800;
  color: #fff;
  text-align: center;
  line-height: 0.28rem;
  background: linear-gradient(135deg, #2a4a6b, #1e3550);
  border-radius: 999px 0 0 999px;
}

#cs-mine-vip-card .cs-mv-prog-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #3d6a8f, #5a9fd4 45%, #d1ae52 100%);
  box-shadow: 0 0 0.12rem rgba(90, 159, 212, 0.35);
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

#cs-mine-vip-card .cs-mv-prog-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: cs-mv-prog-glow 2.4s ease-in-out infinite;
}

@keyframes cs-mv-prog-glow {
  0%, 35% { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

#cs-mine-vip-card .cs-mv-prog-next {
  position: absolute;
  right: 0.12rem;
  z-index: 2;
  font-size: 0.2rem;
  font-style: italic;
  font-weight: 700;
  color: rgba(209, 174, 82, 0.88);
  pointer-events: none;
}

#cs-mine-vip-card .cs-mv-hint {
  margin: 0.12rem 0 0;
  font-size: 0.22rem;
  line-height: 1.45;
  color: rgba(201, 210, 225, 0.88);
}

#cs-mine-vip-card .cs-mv-badge {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  width: 1.56rem;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: cs-mv-badge-float 3.2s ease-in-out infinite;
}

@keyframes cs-mv-badge-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.06rem); }
}

#cs-mine-vip-card .cs-mv-badge-ring {
  position: absolute;
  width: 1.38rem;
  height: 1.38rem;
  border-radius: 50%;
  border: 0.03rem dashed rgba(209, 174, 82, 0.35);
  animation: cs-mv-ring-spin 12s linear infinite;
  pointer-events: none;
}

@keyframes cs-mv-ring-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

#cs-mine-vip-card .cs-mv-badge-glow {
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(209, 174, 82, 0.35) 0%, transparent 70%);
  animation: cs-mv-badge-pulse 2.6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes cs-mv-badge-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.92); }
  50% { opacity: 0.85; transform: scale(1.08); }
}

#cs-mine-vip-card .cs-mv-badge-img {
  position: relative;
  z-index: 1;
  width: 1.28rem;
  height: 1.28rem;
  object-fit: contain;
  filter: drop-shadow(0 0.06rem 0.14rem rgba(0, 0, 0, 0.45));
  pointer-events: none;
  user-select: none;
}

#cs-mine-vip-card.is-max .cs-mv-prog-next {
  color: #d1ae52;
}

#cs-mine-vip-card.is-loading .cs-mv-level,
#cs-mine-vip-card.is-loading .cs-mv-hint {
  opacity: 0.55;
}

#cs-mine-vip-card.is-guest .cs-mv-hint {
  color: #999;
}