/**
 * /#/promotion — Agency dashboard (premium cyber-luxury, wallet-aligned).
 * Targets promotion layout: hero .container[data-v-6cf5705a]; main column uses classes only (no data-v-600663f7).
 * Load after page-promotion-*.css (or append end of page-promotion-f94a2c43.css).
 */

:root {
  --prom-bg: #020617;
  --prom-cyan: #00cfff;
  --prom-gold: #ffd700;
  --prom-purple: #a855f7;
  --prom-card-a: #0b3c91;
  --prom-card-b: #1a0b2e;
}

/* 10X WIN banner style — inset glow pulse (matches single-file demo) */
@keyframes prom-navbar-bar-glow {
  0%,
  100% {
    box-shadow:
      inset 0 0 0.4rem rgba(0, 150, 255, 0.22),
      inset 0 0 0.65rem rgba(255, 180, 0, 0.12),
      0 0.04rem 0.28rem rgba(0, 0, 0, 0.45) !important;
  }
  50% {
    box-shadow:
      inset 0 0 0.5rem rgba(0, 150, 255, 0.32),
      inset 0 0 0.8rem rgba(255, 180, 0, 0.2),
      0 0.06rem 0.32rem rgba(0, 0, 0, 0.4) !important;
  }
}

@keyframes prom-navbar-agency-glow {
  0%,
  100% {
    text-shadow:
      0 0 20px rgba(0, 210, 255, 0.35),
      0 0 6px rgba(255, 255, 255, 0.1) !important;
  }
  50% {
    text-shadow:
      0 0 32px rgba(255, 215, 0, 0.35),
      0 0 14px rgba(0, 220, 255, 0.45) !important;
  }
}

@keyframes prom-navbar-filter-pulse {
  0%,
  100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.1),
      inset 0 -8px 16px rgba(0, 0, 0, 0.35),
      0 0 16px rgba(255, 160, 50, 0.22),
      0 4px 12px rgba(0, 0, 0, 0.45) !important;
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.14),
      inset 0 -8px 16px rgba(0, 0, 0, 0.35),
      0 0 24px rgba(0, 207, 255, 0.28),
      0 0 18px rgba(255, 180, 80, 0.35),
      0 4px 12px rgba(0, 0, 0, 0.45) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body #app:has(.container[data-v-6cf5705a]) .navbar .navbar__content-right,
  body #app:has(.container[data-v-6cf5705a]) .navbar .navbar__content,
  body #app:has(.container[data-v-6cf5705a]) .navbar .navbar__content::before,
  body #app:has(.container[data-v-6cf5705a]) .navbar .navbar__content::after,
  body #app:has(.container[data-v-6cf5705a]) .navbar .navbar__content-center {
    animation: none !important;
  }
}

/* --- Page shell (main promotion view with hero) --- */
html:has(.container[data-v-6cf5705a]),
body:has(.container[data-v-6cf5705a]) {
  background-color: var(--prom-bg) !important;
}

body #app:has(.container[data-v-6cf5705a]) {
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, rgba(0, 207, 255, 0.12), transparent 50%),
    radial-gradient(ellipse 90% 50% at 100% 20%, rgba(168, 85, 247, 0.08), transparent 55%),
    radial-gradient(ellipse 70% 40% at 0% 40%, rgba(255, 215, 0, 0.05), transparent 50%),
    var(--prom-bg) !important;
  min-height: 100vh;
}

/* Nav shell — outer strip transparent so only .navbar-fixed shows the pill */
body #app:has(.container[data-v-6cf5705a]) .navbar.main.white,
body #app:has(.container[data-v-6cf5705a]) .navbar.white,
body #app:has(.container[data-v-6cf5705a]) nav.navbar.white {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Fixed shell — transparent; bar art + logo live on .navbar__content */
body #app:has(.container[data-v-6cf5705a]) .navbar .navbar-fixed,
body #app:has(.container[data-v-6cf5705a]) .navbar-fixed {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  padding-top: max(0.12rem, env(safe-area-inset-top, 0px)) !important;
  padding-left: 0.22rem !important;
  padding-right: 0.22rem !important;
  padding-bottom: 1.55rem !important;
  min-height: calc(env(safe-area-inset-top, 0px) + 1.75rem) !important;
  border-radius: 0 !important;
  isolation: isolate !important;
  overflow: visible !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: none !important;
  z-index: 9998 !important;
}

/* 10X WIN banner — demo-aligned: horizontal base, inset glow, pattern, dual radials, logo + PNG in stack */
body #app:has(.container[data-v-6cf5705a]) .navbar .navbar__content {
  position: relative !important;
  width: 100% !important;
  max-width: 9.75rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  min-height: 1.38rem !important;
  padding: 0.26rem 0.56rem !important;
  z-index: 2 !important;
  border-radius: 9999px !important;
  isolation: isolate !important;
  overflow: hidden !important;
  background-color: #0a1f3d !important;
  background-image:
    url("/10xwinicon.png"),
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(0, 150, 255, 0.35) 32%,
      transparent 68%
    ),
    radial-gradient(circle at 30% 50%, rgba(0, 150, 255, 0.25), transparent 60%),
    radial-gradient(circle at 70% 50%, rgba(255, 180, 0, 0.25), transparent 60%),
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.05) 0,
      rgba(255, 255, 255, 0.05) 2px,
      transparent 2px,
      transparent 20px
    ),
    url("images/background/header/navbar.png"),
    linear-gradient(90deg, #0a1f3d 0%, #0b2a5a 40%, #5a3a00 100%) !important;
  background-position:
    center calc(50% - 0.02rem),
    center center,
    center center,
    center center,
    center center,
    center center,
    center center !important;
  background-size:
    1.48rem auto,
    100% 100%,
    100% 100%,
    100% 100%,
    auto,
    cover,
    100% 100% !important;
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    repeat,
    no-repeat,
    no-repeat !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  animation: prom-navbar-bar-glow 2.5s ease-in-out infinite !important;
}

body #app:has(.container[data-v-6cf5705a]) .navbar .navbar__content::before,
body #app:has(.container[data-v-6cf5705a]) .navbar .navbar__content::after {
  content: none !important;
  display: none !important;
}

/* AGENCY — compact badge under pill (reads like product UI, not empty chrome) */
body #app:has(.container[data-v-6cf5705a]) .navbar .navbar__content-center {
  font-family: "Rajdhani", "Bebas Neue", "Teko", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.34rem !important;
  line-height: 1.15 !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  position: absolute !important;
  left: 50% !important;
  top: calc(100% + 0.38rem) !important;
  bottom: auto !important;
  transform: translateX(-50%) !important;
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0.1rem 0.28rem 0.1rem 0.36rem !important;
  max-width: min(88%, 6.5rem) !important;
  width: max-content !important;
  z-index: 5 !important;
  text-align: center !important;
  box-sizing: border-box !important;
  color: #f1f5f9 !important;
  -webkit-text-fill-color: #f1f5f9 !important;
  text-shadow: 0 0 20px rgba(0, 210, 255, 0.35), 0 0 8px rgba(255, 255, 255, 0.08) !important;
  background: linear-gradient(165deg, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.75) 100%) !important;
  border-radius: 9999px !important;
  border: 1px solid rgba(148, 163, 184, 0.25) !important;
  box-shadow:
    0 0 0 1px rgba(0, 207, 255, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  filter: none !important;
  animation: prom-navbar-agency-glow 3.5s ease-in-out infinite !important;
}

body #app:has(.container[data-v-6cf5705a]) .navbar .navbar__content-center::before {
  content: none !important;
  display: none !important;
}

body #app:has(.container[data-v-6cf5705a]) .navbar .navbar__content-center::after {
  content: none !important;
  display: none !important;
}

/* Hide back slot on promotion (Vue still renders nav slot) */
body #app:has(.container[data-v-6cf5705a]) .navbar .navbar__content-left {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Right action — same horizontal inset as pill (right: 0.28rem), below the pill / under navbar-fixed stack */
body #app:has(.container[data-v-6cf5705a]) .navbar .navbar__content-right {
  position: absolute !important;
  top: calc(100% + 0.38rem) !important;
  right: 0.24rem !important;
  left: auto !important;
  transform: translateY(0.04rem) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 0.76rem !important;
  height: 0.76rem !important;
  border-radius: 0.14rem !important;
  box-sizing: border-box !important;
  z-index: 6 !important;
  background:
    radial-gradient(ellipse 100% 100% at 50% 35%, rgba(255, 200, 100, 0.35), transparent 65%),
    linear-gradient(165deg, rgba(28, 14, 8, 0.95) 0%, rgba(12, 8, 22, 0.92) 100%) !important;
  border: 1px solid rgba(255, 185, 90, 0.5) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -8px 16px rgba(0, 0, 0, 0.35),
    0 0 18px rgba(255, 160, 50, 0.28),
    0 4px 12px rgba(0, 0, 0, 0.45) !important;
  animation: prom-navbar-filter-pulse 4s ease-in-out infinite !important;
}

body #app:has(.container[data-v-6cf5705a]) .navbar__content-right svg,
body #app:has(.container[data-v-6cf5705a]) .navbar .navbar__content-right svg {
  filter: drop-shadow(0 0 6px rgba(255, 180, 80, 0.95)) !important;
  color: #ffd89a !important;
}

/* Kill legacy hero overlay band (keep ::before for Today’s commission card frame) */
body #app:has(.container[data-v-6cf5705a]) .container[data-v-6cf5705a]::after {
  display: none !important;
  content: none !important;
}

/* --- Hero shell: two stacked cards (commission vs team stats) --- */
body #app:has(.container[data-v-6cf5705a]) .container[data-v-6cf5705a] {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(2.75rem, 37%) 1fr !important;
  grid-template-rows: auto auto auto !important;
  gap: 0.24rem 0.4rem !important;
  align-items: start !important;
  width: min(100%, 15rem) !important;
  max-width: 15rem !important;
  margin: 0 auto !important;
  padding: 1.55rem 0.6rem 0.52rem !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Today’s total commission — bordered panel only (rows 1–2); info_content is a separate card below */
/* Must override legacy .container:before { position:absolute; height:3.15rem } or grid rows collapse and info_content overlaps */
body #app:has(.container[data-v-6cf5705a]) .container[data-v-6cf5705a]::before {
  content: "" !important;
  display: block !important;
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  margin: 0 !important;
  transform: none !important;
  -webkit-transform: none !important;
  grid-column: 1 / -1 !important;
  grid-row: 1 / 3 !important;
  z-index: 0 !important;
  align-self: stretch !important;
  justify-self: stretch !important;
  min-height: 3.2rem !important;
  overflow: visible !important;
  pointer-events: none !important;
  border-radius: 0.48rem !important;
  background:
    linear-gradient(155deg, rgba(11, 59, 145, 0.28) 0%, rgba(26, 11, 46, 0.38) 48%, rgba(2, 6, 23, 0.52) 100%),
    url("/images/background/account/promotion/total-commision.png") center center / cover no-repeat !important;
  border: 2px solid rgba(0, 207, 255, 0.5) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255, 215, 0, 0.22),
    inset 0 0 24px rgba(0, 207, 255, 0.08),
    inset 0 -20px 50px rgba(168, 85, 247, 0.08),
    0 0 0 1px rgba(255, 215, 0, 0.12),
    0 0 32px rgba(0, 207, 255, 0.22),
    0 12px 36px rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(16px) saturate(130%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(130%) !important;
}

body #app:has(.container[data-v-6cf5705a]) .container[data-v-6cf5705a] .amount[data-v-6cf5705a] {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  align-self: center !important;
  justify-self: center !important;
  margin: 0 !important;
  transform: translateX(calc(-0.2rem + 0.5cm)) !important;
  width: auto !important;
  max-width: none !important;
  aspect-ratio: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  z-index: 1 !important;
  font-size: 0.98rem !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: var(--prom-gold) !important;
  text-align: center !important;
  text-shadow: none !important;
  letter-spacing: 0.02em !important;
  padding: 0 !important;
}

body #app:has(.container[data-v-6cf5705a]) .container[data-v-6cf5705a] .amount[data-v-6cf5705a]::before,
body #app:has(.container[data-v-6cf5705a]) .container[data-v-6cf5705a] .amount[data-v-6cf5705a]::after {
  content: none !important;
  display: none !important;
}

body #app:has(.container[data-v-6cf5705a]) .container[data-v-6cf5705a] .amount_txt[data-v-6cf5705a] {
  grid-column: 2 !important;
  grid-row: 1 !important;
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0.06rem 0.2rem 0 0 !important;
  text-align: left !important;
  font-size: 0.47rem !important;
  font-weight: 600 !important;
  color: #f8fafc !important;
  line-height: 1.48 !important;
  white-space: normal !important;
  overflow: visible !important;
}

body #app:has(.container[data-v-6cf5705a]) .container[data-v-6cf5705a] .tip[data-v-6cf5705a] {
  grid-column: 2 !important;
  grid-row: 2 !important;
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  width: 100% !important;
  padding: 0.04rem 0.12rem 0 0 !important;
  text-align: left !important;
  font-size: 0.36rem !important;
  color: rgba(186, 230, 253, 0.75) !important;
  line-height: 1.45 !important;
  white-space: normal !important;
  overflow: visible !important;
}

body #app:has(.container[data-v-6cf5705a]) .container[data-v-6cf5705a] .tip[data-v-6cf5705a]::after {
  content: none !important;
  display: none !important;
}

/* Team stats — two separate cards (blue Direct / cyan Team) + inset row panel */
body #app:has(.container[data-v-6cf5705a]) .container[data-v-6cf5705a] .info_content[data-v-6cf5705a],
body #app:has(.container[data-v-6cf5705a]) .container .info_content[data-v-6cf5705a] {
  grid-column: 1 / -1 !important;
  grid-row: 3 !important;
  align-self: start !important;
  position: relative !important;
  z-index: 1 !important;
  margin-top: 0.4rem !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  padding: 0.12rem 0.06rem 0.2rem !important;
  gap: 0.22rem !important;
  overflow: visible !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body #app:has(.container[data-v-6cf5705a]) .container .info_content[data-v-6cf5705a]::before,
body #app:has(.container[data-v-6cf5705a]) .container .info_content[data-v-6cf5705a]::after {
  content: none !important;
  display: none !important;
}

/* Shared table shell */
body #app:has(.container[data-v-6cf5705a]) .container .info_content .info[data-v-6cf5705a] {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: calc(50% - 0.11rem) !important;
  display: table !important;
  table-layout: fixed !important;
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  border-radius: 0.32rem !important;
}

/* Direct — indigo / blue card */
body #app:has(.container[data-v-6cf5705a]) .container .info_content .info[data-v-6cf5705a]:first-of-type {
  padding: 0.1rem !important;
  border: 1px solid rgba(96, 165, 250, 0.45) !important;
  background: linear-gradient(165deg, rgba(15, 23, 42, 0.92) 0%, rgba(15, 23, 58, 0.88) 50%, rgba(2, 6, 23, 0.95) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 1px rgba(59, 130, 246, 0.12),
    0 0 20px rgba(59, 130, 246, 0.18),
    0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

/* Team — cyan / teal card */
body #app:has(.container[data-v-6cf5705a]) .container .info_content .info[data-v-6cf5705a]:nth-of-type(2) {
  padding: 0.1rem !important;
  border: 1px solid rgba(34, 211, 238, 0.42) !important;
  background: linear-gradient(165deg, rgba(15, 23, 42, 0.92) 0%, rgba(6, 32, 42, 0.85) 50%, rgba(2, 6, 23, 0.95) 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 1px rgba(34, 211, 238, 0.14),
    0 0 22px rgba(34, 211, 238, 0.2),
    0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

body #app:has(.container[data-v-6cf5705a]) .container .info_content .info thead th[data-v-6cf5705a],
body #app:has(.container[data-v-6cf5705a]) .container .info_content .info tbody td[data-v-6cf5705a] {
  border: none !important;
  vertical-align: middle !important;
}

body #app:has(.container[data-v-6cf5705a]) .container .info_content .info thead th[data-v-6cf5705a] {
  padding: 0.12rem 0.08rem 0.14rem !important;
}

body #app:has(.container[data-v-6cf5705a]) .container .info_content .info tbody td[data-v-6cf5705a] {
  padding: 0 0.08rem !important;
}

body #app:has(.container[data-v-6cf5705a]) .container .info_content .info tbody tr:first-of-type td[data-v-6cf5705a] {
  padding-top: 0.06rem !important;
}

body #app:has(.container[data-v-6cf5705a]) .container .info_content .info tbody tr:last-of-type td[data-v-6cf5705a] {
  padding-bottom: 0.1rem !important;
}

/* Inset darker panel behind stat rows */
body #app:has(.container[data-v-6cf5705a]) .container .info_content .info[data-v-6cf5705a]:first-of-type tbody[data-v-6cf5705a] {
  background: rgba(0, 0, 0, 0.38) !important;
  border-radius: 0.24rem !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

body #app:has(.container[data-v-6cf5705a]) .container .info_content .info[data-v-6cf5705a]:nth-of-type(2) tbody[data-v-6cf5705a] {
  background: rgba(0, 0, 0, 0.38) !important;
  border-radius: 0.24rem !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

body #app:has(.container[data-v-6cf5705a]) .container .info_content .info .head[data-v-6cf5705a] {
  font-family: "Orbitron", system-ui, sans-serif !important;
  color: rgba(248, 250, 252, 0.96) !important;
  font-size: 0.22rem !important;
  font-weight: 700 !important;
  text-align: left !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  line-height: 1.28 !important;
  height: auto !important;
  min-height: 0 !important;
  white-space: normal !important;
  overflow: visible !important;
  word-break: break-word !important;
  margin: 0 0 0.1rem !important;
  border-bottom: none !important;
  background: transparent !important;
}

body #app:has(.container[data-v-6cf5705a]) .container .info_content .info:first-of-type .head[data-v-6cf5705a]:not(.u2) {
  text-shadow:
    0 0 14px rgba(96, 165, 250, 0.45),
    0 0 28px rgba(59, 130, 246, 0.15) !important;
}

body #app:has(.container[data-v-6cf5705a]) .container .info_content .info .head.u2[data-v-6cf5705a] {
  text-shadow:
    0 0 14px rgba(34, 211, 238, 0.5),
    0 0 26px rgba(6, 182, 212, 0.2) !important;
}

body #app:has(.container[data-v-6cf5705a]) .container .info_content .info .head[data-v-6cf5705a] svg {
  flex-shrink: 0 !important;
  width: 0.44rem !important;
  height: 0.44rem !important;
}

body #app:has(.container[data-v-6cf5705a]) .container .info_content .info:first-of-type .head[data-v-6cf5705a]:not(.u2) svg {
  filter: drop-shadow(0 0 8px rgba(96, 165, 250, 0.55)) !important;
}

body #app:has(.container[data-v-6cf5705a]) .container .info_content .info .head.u2[data-v-6cf5705a] svg {
  filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.55)) !important;
}

body #app:has(.container[data-v-6cf5705a]) .container .info_content .info .head[data-v-6cf5705a] span {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body #app:has(.container[data-v-6cf5705a]) .container .info_content .info .line1[data-v-6cf5705a],
body #app:has(.container[data-v-6cf5705a]) .container .info_content .info .line2[data-v-6cf5705a],
body #app:has(.container[data-v-6cf5705a]) .container .info_content .info .line3[data-v-6cf5705a] {
  color: rgba(226, 232, 240, 0.9) !important;
  font-size: 0.28rem !important;
  padding: 0.18rem 0.06rem !important;
  margin: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02) !important;
  align-items: center !important;
  min-width: 0 !important;
}

body #app:has(.container[data-v-6cf5705a]) .container .info_content .info:first-of-type .line1[data-v-6cf5705a],
body #app:has(.container[data-v-6cf5705a]) .container .info_content .info:first-of-type .line2[data-v-6cf5705a],
body #app:has(.container[data-v-6cf5705a]) .container .info_content .info:first-of-type .line3[data-v-6cf5705a] {
  border-bottom: 1px solid rgba(59, 130, 246, 0.14) !important;
}

body #app:has(.container[data-v-6cf5705a]) .container .info_content .info:nth-of-type(2) .line1[data-v-6cf5705a],
body #app:has(.container[data-v-6cf5705a]) .container .info_content .info:nth-of-type(2) .line2[data-v-6cf5705a],
body #app:has(.container[data-v-6cf5705a]) .container .info_content .info:nth-of-type(2) .line3[data-v-6cf5705a] {
  border-bottom: 1px solid rgba(34, 211, 238, 0.14) !important;
}

body #app:has(.container[data-v-6cf5705a]) .container .info_content .info tbody tr:last-of-type td .line1[data-v-6cf5705a],
body #app:has(.container[data-v-6cf5705a]) .container .info_content .info tbody tr:last-of-type td .line2[data-v-6cf5705a],
body #app:has(.container[data-v-6cf5705a]) .container .info_content .info tbody tr:last-of-type td .line3[data-v-6cf5705a] {
  border-bottom: none !important;
}

/* Direct — row icons (blue) */
body #app:has(.container[data-v-6cf5705a]) .container .info_content .info:first-of-type .line1[data-v-6cf5705a]::before {
  border-color: rgba(96, 165, 250, 0.5) !important;
  box-shadow:
    0 0 12px rgba(96, 165, 250, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2360A5FA' d='M12 12a4.5 4.5 0 1 0-4.5-4.5A4.5 4.5 0 0 0 12 12Zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5Z'/%3E%3C/svg%3E") !important;
  background-color: rgba(96, 165, 250, 0.12) !important;
  border: 1px solid rgba(96, 165, 250, 0.28) !important;
}

body #app:has(.container[data-v-6cf5705a]) .container .info_content .info:first-of-type .line2.r[data-v-6cf5705a]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2360A5FA' d='M3 7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v2H3V7Zm0 5h18v5a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-5Zm12 2a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2h-4Z'/%3E%3C/svg%3E") !important;
  background-color: rgba(96, 165, 250, 0.12) !important;
  border: 1px solid rgba(96, 165, 250, 0.28) !important;
  border-color: rgba(96, 165, 250, 0.5) !important;
  box-shadow:
    0 0 12px rgba(96, 165, 250, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

/* Team — row icons (cyan); deposit row uses .line2:not(.r) */
body #app:has(.container[data-v-6cf5705a]) .container .info_content .info:nth-of-type(2) .line1[data-v-6cf5705a]::before {
  border-color: rgba(34, 211, 238, 0.45) !important;
  box-shadow:
    0 0 12px rgba(34, 211, 238, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2322D3EE' d='M12 12a4.5 4.5 0 1 0-4.5-4.5A4.5 4.5 0 0 0 12 12Zm0 2c-4.4 0-8 2.2-8 5v1h16v-1c0-2.8-3.6-5-8-5Z'/%3E%3C/svg%3E") !important;
  background-color: rgba(34, 211, 238, 0.1) !important;
  border: 1px solid rgba(34, 211, 238, 0.26) !important;
}

body #app:has(.container[data-v-6cf5705a]) .container .info_content .info:nth-of-type(2) .line2:not(.r)[data-v-6cf5705a]::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2322D3EE' d='M3 7a3 3 0 0 1 3-3h12a3 3 0 0 1 3 3v2H3V7Zm0 5h18v5a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-5Zm12 2a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2h-4Z'/%3E%3C/svg%3E") !important;
  background-color: rgba(34, 211, 238, 0.1) !important;
  border: 1px solid rgba(34, 211, 238, 0.26) !important;
  border-color: rgba(34, 211, 238, 0.45) !important;
  box-shadow:
    0 0 12px rgba(34, 211, 238, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

body #app:has(.container[data-v-6cf5705a]) .container .info_content .info .line3[data-v-6cf5705a]::before {
  border-color: rgba(255, 215, 0, 0.42) !important;
  box-shadow:
    0 0 12px rgba(255, 215, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

body #app:has(.container[data-v-6cf5705a]) .container .info_content .info .line1 > div[data-v-6cf5705a],
body #app:has(.container[data-v-6cf5705a]) .container .info_content .info .line2 > div[data-v-6cf5705a],
body #app:has(.container[data-v-6cf5705a]) .container .info_content .info .line3 > div[data-v-6cf5705a] {
  color: rgba(248, 250, 252, 0.98) !important;
  font-variant-numeric: tabular-nums !important;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.08) !important;
}

/* --- Main column: CTA + promotion data + actions --- */
body #app:has(.container[data-v-6cf5705a]) .content {
  gap: 0.36rem !important;
  padding: 0.85rem 0.32rem 2.6rem !important;
}

/* Primary CTA — reference: dark glass pill + starfield + gradient ring + split blue/gold glow + Rajdhani + ›› */
@keyframes prom-invite-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-0.04rem);
  }
}

@keyframes prom-invite-pulse-blue {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.72;
  }
}

@keyframes prom-invite-pulse-gold {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.65;
  }
}

/* Outside .content (sibling under #app) — match column inset + gap */
body #app:has(.container[data-v-6cf5705a]) .shareBtnContainer {
  position: relative !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 0 0.32rem !important;
  margin-bottom: 0.36rem !important;
  animation: prom-invite-float 3s ease-in-out infinite !important;
}

/* Left blue outer glow */
body #app:has(.container[data-v-6cf5705a]) .shareBtnContainer::before {
  content: "" !important;
  position: absolute !important;
  inset: -0.08rem !important;
  border-radius: 999px !important;
  clip-path: inset(0 50% 0 0 round 999px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  box-shadow:
    0 0 0.18rem 0.04rem rgba(0, 120, 255, 0.35),
    0 0 0.35rem 0.08rem rgba(0, 80, 220, 0.2),
    inset 0 0 0.2rem 0.02rem rgba(0, 100, 255, 0.1) !important;
  animation: prom-invite-pulse-blue 3s ease-in-out infinite !important;
}

/* Right gold outer glow */
body #app:has(.container[data-v-6cf5705a]) .shareBtnContainer::after {
  content: "" !important;
  position: absolute !important;
  inset: -0.08rem !important;
  border-radius: 999px !important;
  clip-path: inset(0 0 0 50% round 999px) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 1 !important;
  filter: none !important;
  background: transparent !important;
  box-shadow:
    0 0 0.18rem 0.04rem rgba(255, 160, 0, 0.4),
    0 0 0.35rem 0.08rem rgba(220, 130, 0, 0.25),
    inset 0 0 0.2rem 0.02rem rgba(200, 130, 0, 0.1) !important;
  animation: prom-invite-pulse-gold 3s ease-in-out infinite 0.5s !important;
}

body #app:has(.container[data-v-6cf5705a]) .shareBtnContainer:hover::before {
  box-shadow:
    0 0 0.25rem 0.08rem rgba(0, 140, 255, 0.5),
    0 0 0.5rem 0.14rem rgba(0, 100, 240, 0.3),
    inset 0 0 0.25rem 0.04rem rgba(0, 120, 255, 0.15) !important;
  transition: box-shadow 0.3s ease !important;
}

body #app:has(.container[data-v-6cf5705a]) .shareBtnContainer:hover::after {
  box-shadow:
    0 0 0.25rem 0.08rem rgba(255, 180, 0, 0.55),
    0 0 0.5rem 0.14rem rgba(220, 150, 0, 0.35),
    inset 0 0 0.25rem 0.04rem rgba(200, 140, 0, 0.15) !important;
  transition: box-shadow 0.3s ease !important;
}

body #app:has(.container[data-v-6cf5705a]) .shareBtnContainer .shareBtn {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 0.96rem !important;
  padding: 0.28rem 1.05rem 0.28rem 0.88rem !important;
  border-radius: 999px !important;
  border: 2px solid transparent !important;
  font-family: "Rajdhani", "Arial Black", system-ui, sans-serif !important;
  font-weight: 700 !important;
  font-style: normal !important;
  font-size: 0.3rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  -webkit-font-smoothing: antialiased !important;
  color: #ffffff !important;
  text-shadow:
    0 0 0.1rem rgba(120, 200, 255, 0.9),
    0 0 0.25rem rgba(80, 160, 255, 0.6),
    0 0 0.5rem rgba(40, 120, 255, 0.3) !important;
  background:
    linear-gradient(180deg, rgba(150, 220, 255, 0.35) 0%, transparent 14%),
    linear-gradient(
      90deg,
      rgba(0, 100, 255, 0.15) 0%,
      rgba(0, 60, 180, 0.08) 45%,
      rgba(180, 120, 0, 0.08) 55%,
      rgba(200, 140, 0, 0.12) 100%
    ),
    radial-gradient(1px 1px at 15% 30%, rgba(100, 180, 255, 0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 70%, rgba(100, 180, 255, 0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 20%, rgba(100, 180, 255, 0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 80%, rgba(255, 180, 50, 0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 40%, rgba(100, 180, 255, 0.2) 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 60%, rgba(255, 200, 80, 0.4) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 25%, rgba(255, 180, 50, 0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 85% 75%, rgba(255, 180, 50, 0.5) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 20% 50%, rgba(80, 160, 255, 0.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 80% 45%, rgba(255, 200, 60, 0.6) 0%, transparent 100%),
    linear-gradient(90deg, #0a1a35 0%, #0d1f3c 40%, #1a1a08 70%, #1a1200 100%),
    linear-gradient(
      90deg,
      rgba(0, 150, 255, 0) 0%,
      rgba(30, 180, 255, 0.9) 15%,
      rgba(80, 200, 255, 1) 30%,
      rgba(30, 180, 255, 0.9) 45%,
      rgba(200, 150, 0, 0.9) 55%,
      rgba(255, 200, 50, 1) 70%,
      rgba(220, 160, 0, 0.9) 85%,
      rgba(200, 130, 0, 0) 100%
    ) !important;
  background-clip: padding-box, padding-box, padding-box, padding-box, padding-box, padding-box, padding-box, padding-box, padding-box, padding-box, padding-box, padding-box, padding-box, border-box !important;
  background-origin: border-box !important;
  background-repeat: no-repeat !important;
  box-shadow:
    inset 0 1px 0 rgba(150, 220, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 0.1rem 0.28rem rgba(0, 0, 0, 0.45) !important;
  position: relative !important;
  z-index: 3 !important;
  overflow: hidden !important;
  cursor: pointer !important;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    text-shadow 0.3s ease !important;
}

body #app:has(.container[data-v-6cf5705a]) .shareBtnContainer:hover .shareBtn {
  text-shadow:
    0 0 0.14rem rgba(140, 220, 255, 1),
    0 0 0.35rem rgba(100, 180, 255, 0.8),
    0 0 0.7rem rgba(60, 140, 255, 0.5) !important;
}

body #app:has(.container[data-v-6cf5705a]) .shareBtnContainer .shareBtn:active {
  transform: scale(0.97) !important;
  box-shadow:
    inset 0 1px 0 rgba(150, 220, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 0.06rem 0.2rem rgba(0, 0, 0, 0.5) !important;
}

body #app:has(.container[data-v-6cf5705a]) .shareBtnContainer .shareBtn::before {
  content: "" !important;
  position: absolute !important;
  left: 0.28rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 0.42rem !important;
  height: 0.42rem !important;
  flex-shrink: 0 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71' stroke='rgba(120,200,255,0.95)' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71' stroke='rgba(120,200,255,0.95)' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat !important;
  filter: drop-shadow(0 0 0.08rem rgba(80, 180, 255, 0.9)) drop-shadow(0 0 0.16rem rgba(40, 140, 255, 0.6)) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

body #app:has(.container[data-v-6cf5705a]) .shareBtnContainer .shareBtn::after {
  content: "››" !important;
  position: absolute !important;
  right: 0.3rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  font-family: "Rajdhani", "Arial Black", system-ui, sans-serif !important;
  font-size: 0.28rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  line-height: 1 !important;
  color: rgba(255, 200, 80, 0.95) !important;
  text-shadow: none !important;
  filter: drop-shadow(0 0 0.06rem rgba(255, 180, 0, 0.9)) drop-shadow(0 0 0.14rem rgba(220, 140, 0, 0.6)) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

@media (max-width: 480px) {
  body #app:has(.container[data-v-6cf5705a]) .shareBtnContainer .shareBtn {
    font-size: 0.28rem !important;
    padding: 0.24rem 0.95rem 0.24rem 0.8rem !important;
    letter-spacing: 0.16em !important;
  }

  body #app:has(.container[data-v-6cf5705a]) .shareBtnContainer .shareBtn::after {
    font-size: 0.26rem !important;
    right: 0.26rem !important;
  }
}

/* Standalone class (PHP / static HTML) — match reference pill */
.invite-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  width: 100%;
  max-width: 100%;
  padding: 0.28rem 1.05rem 0.28rem 0.88rem;
  border-radius: 999px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
  font-family: "Rajdhani", "Arial Black", system-ui, sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 0.3rem;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  color: #ffffff;
  text-shadow:
    0 0 0.1rem rgba(120, 200, 255, 0.9),
    0 0 0.25rem rgba(80, 160, 255, 0.6),
    0 0 0.5rem rgba(40, 120, 255, 0.3);
  background:
    linear-gradient(180deg, rgba(150, 220, 255, 0.35) 0%, transparent 14%),
    linear-gradient(
      90deg,
      rgba(0, 100, 255, 0.15) 0%,
      rgba(0, 60, 180, 0.08) 45%,
      rgba(180, 120, 0, 0.08) 55%,
      rgba(200, 140, 0, 0.12) 100%
    ),
    radial-gradient(1px 1px at 15% 30%, rgba(100, 180, 255, 0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 80%, rgba(255, 180, 50, 0.3) 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 25%, rgba(255, 180, 50, 0.3) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 20% 50%, rgba(80, 160, 255, 0.6) 0%, transparent 100%),
    radial-gradient(1.5px 1.5px at 80% 45%, rgba(255, 200, 60, 0.6) 0%, transparent 100%),
    linear-gradient(90deg, #0a1a35 0%, #0d1f3c 40%, #1a1a08 70%, #1a1200 100%),
    linear-gradient(
      90deg,
      rgba(0, 150, 255, 0) 0%,
      rgba(30, 180, 255, 0.9) 15%,
      rgba(80, 200, 255, 1) 30%,
      rgba(30, 180, 255, 0.9) 45%,
      rgba(200, 150, 0, 0.9) 55%,
      rgba(255, 200, 50, 1) 70%,
      rgba(220, 160, 0, 0.9) 85%,
      rgba(200, 130, 0, 0) 100%
    );
  background-clip: padding-box, padding-box, padding-box, padding-box, padding-box, padding-box, padding-box, border-box;
  background-origin: border-box;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(150, 220, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 0.1rem 0.28rem rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease, text-shadow 0.3s ease;
}

.invite-btn:active {
  transform: scale(0.97);
  box-shadow:
    inset 0 1px 0 rgba(150, 220, 255, 0.25),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 0.06rem 0.2rem rgba(0, 0, 0, 0.5);
}

.invite-btn:hover {
  text-shadow:
    0 0 0.14rem rgba(140, 220, 255, 1),
    0 0 0.35rem rgba(100, 180, 255, 0.8),
    0 0 0.7rem rgba(60, 140, 255, 0.5);
}

.invite-btn .invite-icon {
  font-size: 0.34rem;
  filter: drop-shadow(0 0 0.08rem rgba(80, 180, 255, 0.9)) drop-shadow(0 0 0.16rem rgba(40, 140, 255, 0.6));
  z-index: 1;
}

.invite-btn .invite-text {
  flex: 1;
  text-align: center;
  white-space: nowrap;
  z-index: 1;
}

.invite-btn .invite-arrow {
  font-family: "Rajdhani", "Arial Black", system-ui, sans-serif;
  font-size: 0.28rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  color: rgba(255, 200, 80, 0.95);
  filter: drop-shadow(0 0 0.06rem rgba(255, 180, 0, 0.9)) drop-shadow(0 0 0.14rem rgba(220, 140, 0, 0.6));
  z-index: 1;
}

@media (max-width: 480px) {
  .invite-btn {
    font-size: 0.28rem;
    letter-spacing: 0.16em;
    padding: 0.24rem 0.95rem 0.24rem 0.8rem;
  }
}

/* Promotion data — reference: section-card + shimmer border + 4-col stats + stat tiles */
@keyframes prom-section-border-shimmer {
  0% {
    background-position: 0% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

/* Reference: .section-card — #0b1528, 18px radius, padding 18×14px */
body #app:has(.container[data-v-6cf5705a]) .content .commission {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 0.16rem !important;
  padding: 0.36rem 0.28rem 0.36rem !important;
  margin: 0 !important;
  background: #0b1528 !important;
  border: none !important;
  border-radius: 0.36rem !important;
  box-shadow:
    0 0 0 1px rgba(0, 160, 255, 0.35),
    0 0 14px 2px rgba(0, 120, 255, 0.22),
    0 0 32px 4px rgba(0, 80, 220, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 0 30px rgba(0, 60, 180, 0.07) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body #app:has(.container[data-v-6cf5705a]) .content .commission::before {
  content: "" !important;
  position: absolute !important;
  inset: -0.02rem !important;
  border-radius: 0.38rem !important;
  padding: 1px !important;
  background: linear-gradient(
    135deg,
    rgba(0, 200, 255, 0.55) 0%,
    rgba(0, 100, 255, 0.28) 25%,
    rgba(0, 50, 180, 0.08) 50%,
    rgba(0, 100, 255, 0.28) 75%,
    rgba(0, 200, 255, 0.55) 100%
  ) !important;
  background-size: 200% 200% !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  mask-composite: exclude !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: prom-section-border-shimmer 4s linear infinite !important;
}

/* Reference: .section-card::after — top edge highlight (right) */
body #app:has(.container[data-v-6cf5705a]) .content .commission::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  right: 0.36rem !important;
  width: 1.2rem !important;
  height: 1px !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(0, 220, 255, 0.75), transparent) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

body #app:has(.container[data-v-6cf5705a]) .content .commission__title {
  grid-column: 1 / -1 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 0.2rem !important;
  margin: 0 0 0.32rem 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  font-family: "Orbitron", system-ui, sans-serif !important;
  font-size: 0.24rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #f8fafc !important;
  text-shadow: 0 0 14px rgba(30, 144, 255, 0.5) !important;
}

body #app:has(.container[data-v-6cf5705a]) .content .commission__title svg {
  width: 0.44rem !important;
  height: 0.44rem !important;
  flex-shrink: 0 !important;
  color: #1e90ff !important;
  filter: drop-shadow(0 0 6px rgba(0, 180, 255, 0.8)) !important;
}

body #app:has(.container[data-v-6cf5705a]) .content .commission__body {
  display: contents !important;
}

body #app:has(.container[data-v-6cf5705a]) .content .commission__body > span {
  display: none !important;
}

/* Stat tiles — icon in padding area; value/label stacked with even label block height */
body #app:has(.container[data-v-6cf5705a]) .content .commission__body > div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: center !important;
  gap: 0.14rem !important;
  box-sizing: border-box !important;
  /* Top padding must clear background icon (pos + size) so it never overlaps the number */
  padding: 0.78rem 0.1rem 0.28rem !important;
  margin: 0 !important;
  min-height: 2.45rem !important;
  height: 100% !important;
  align-self: stretch !important;
  background-color: #0d1a2e !important;
  background-repeat: no-repeat !important;
  background-position: center 0.22rem !important;
  background-size: 0.5rem 0.5rem !important;
  border: none !important;
  border-radius: 0.26rem !important;
  box-shadow:
    0 0 0 1px rgba(0, 130, 255, 0.2),
    0 0 10px 1px rgba(0, 100, 220, 0.1),
    inset 0 0 18px rgba(0, 60, 160, 0.08) !important;
  position: relative !important;
  overflow: hidden !important;
  z-index: 1 !important;
}

/* Reference: .stat-card::after — bottom cyan hairline */
body #app:has(.container[data-v-6cf5705a]) .content .commission__body > div::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 15% !important;
  right: 15% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(0, 200, 255, 0.4), transparent) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Reference: .stat-card divider dot between tiles (4-column row) */
body #app:has(.container[data-v-6cf5705a]) .content .commission__body > div:not(:last-child)::before {
  content: "" !important;
  position: absolute !important;
  right: -0.08rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 0.08rem !important;
  height: 0.08rem !important;
  border-radius: 50% !important;
  background: rgba(0, 180, 255, 0.4) !important;
  box-shadow: 0 0 6px rgba(0, 180, 255, 0.6) !important;
  z-index: 2 !important;
}

/* Vue DOM: .commission > .commission__title (1st child), then two .commission__body (2nd & 3rd).
   Each body is: div, comment, span, div — use nth-of-type for stat divs, not :first-of-type on body. */
body #app:has(.container[data-v-6cf5705a])
  .content
  .commission__body:nth-child(2)
  > div:nth-of-type(1) {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Crect%20x%3D%223%22%20y%3D%2213%22%20width%3D%224%22%20height%3D%228%22%20rx%3D%221%22%20fill%3D%22%231e90ff%22%20fill-opacity%3D%220.55%22%2F%3E%3Crect%20x%3D%2210%22%20y%3D%228%22%20width%3D%224%22%20height%3D%2213%22%20rx%3D%221%22%20fill%3D%22%231e90ff%22%20fill-opacity%3D%220.8%22%2F%3E%3Crect%20x%3D%2217%22%20y%3D%223%22%20width%3D%224%22%20height%3D%2218%22%20rx%3D%221%22%20fill%3D%22%231e90ff%22%2F%3E%3C%2Fsvg%3E") !important;
}

body #app:has(.container[data-v-6cf5705a])
  .content
  .commission__body:nth-child(2)
  > div:nth-of-type(2) {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Cellipse%20cx%3D%2212%22%20cy%3D%226%22%20rx%3D%228%22%20ry%3D%222.8%22%20fill%3D%22%231e90ff%22%20fill-opacity%3D%220.45%22%2F%3E%3Cpath%20d%3D%22M4%206v4c0%201.55%203.58%202.8%208%202.8s8-1.25%208-2.8V6%22%20fill%3D%22%231e90ff%22%20fill-opacity%3D%220.65%22%2F%3E%3Cpath%20d%3D%22M4%2010v4c0%201.55%203.58%202.8%208%202.8s8-1.25%208-2.8v-4%22%20fill%3D%22%231e90ff%22%20fill-opacity%3D%220.88%22%2F%3E%3C%2Fsvg%3E") !important;
}

body #app:has(.container[data-v-6cf5705a])
  .content
  .commission__body:nth-child(3)
  > div:nth-of-type(1) {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22%20fill%3D%22%231e90ff%22%20fill-opacity%3D%220.85%22%2F%3E%3Cpath%20d%3D%22M4%2020c0-4%203.58-7%208-7s8%203%208%207%22%20fill%3D%22%231e90ff%22%20fill-opacity%3D%220.55%22%2F%3E%3C%2Fsvg%3E") !important;
}

body #app:has(.container[data-v-6cf5705a])
  .content
  .commission__body:nth-child(3)
  > div:nth-of-type(2) {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%226.5%22%20r%3D%223%22%20fill%3D%22%231e90ff%22%20fill-opacity%3D%220.6%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%226.5%22%20r%3D%223%22%20fill%3D%22%231e90ff%22%20fill-opacity%3D%220.9%22%2F%3E%3Cpath%20d%3D%22M2%2019.5c0-3.2%202.6-5.5%206-5.5%22%20stroke%3D%22%231e90ff%22%20stroke-opacity%3D%220.6%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M22%2019.5c0-3.2-2.6-5.5-6-5.5%22%20stroke%3D%22%231e90ff%22%20stroke-opacity%3D%220.6%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%3Cpath%20d%3D%22M9.5%2014c0-2.8%201.2-4.5%202.5-4.5s2.5%201.7%202.5%204.5%22%20fill%3D%22%231e90ff%22%20fill-opacity%3D%220.75%22%2F%3E%3C%2Fsvg%3E") !important;
}

body #app:has(.container[data-v-6cf5705a]) .content .commission__body > div span:first-of-type {
  font-family: "Orbitron", system-ui, sans-serif !important;
  font-size: 0.44rem !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  width: 100% !important;
  text-align: center !important;
  color: #ffffff !important;
  text-decoration: none !important;
  text-shadow: 0 0 14px rgba(0, 200, 255, 0.5) !important;
  font-variant-numeric: tabular-nums !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

body #app:has(.container[data-v-6cf5705a]) .content .commission__body > div span:last-of-type {
  font-family: "Exo 2", system-ui, sans-serif !important;
  font-size: 0.19rem !important;
  font-weight: 600 !important;
  line-height: 1.42 !important;
  color: #4e7090 !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 0.02rem !important;
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  hyphens: auto !important;
  overflow-wrap: break-word !important;
  word-break: break-word !important;
  /* Keeps short + long labels visually balanced in one row */
  min-height: 2.85em !important;
}

@media (max-width: 380px) {
  body #app:has(.container[data-v-6cf5705a]) .content .commission {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  body #app:has(.container[data-v-6cf5705a]) .content .commission__title {
    grid-column: 1 / -1 !important;
  }

  /* 2×2 grid: only first stat column in each row keeps the divider dot */
  body #app:has(.container[data-v-6cf5705a]) .content .commission__body > div:nth-of-type(2)::before {
    display: none !important;
  }
}

/* Action list — reference: second section-card + menu rows */
body #app:has(.container[data-v-6cf5705a]) .content .promote__cell {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  margin-top: 0.14rem !important;
  padding: 0.12rem 0.14rem 0.04rem !important;
  background: #0b1528 !important;
  border: none !important;
  border-radius: 0.36rem !important;
  box-shadow:
    0 0 0 1px rgba(0, 160, 255, 0.35),
    0 0 12px 2px rgba(0, 120, 255, 0.25),
    0 0 30px 4px rgba(0, 80, 220, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 0 30px rgba(0, 60, 180, 0.08) !important;
  backdrop-filter: none !important;
}

body #app:has(.container[data-v-6cf5705a]) .content .promote__cell::before {
  content: "" !important;
  position: absolute !important;
  inset: -0.02rem !important;
  border-radius: 0.38rem !important;
  padding: 1px !important;
  background: linear-gradient(
    135deg,
    rgba(0, 200, 255, 0.55) 0%,
    rgba(0, 100, 255, 0.28) 25%,
    rgba(0, 50, 180, 0.08) 50%,
    rgba(0, 100, 255, 0.28) 75%,
    rgba(0, 200, 255, 0.55) 100%
  ) !important;
  background-size: 200% 200% !important;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) !important;
  mask-composite: exclude !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: prom-section-border-shimmer 4s linear infinite !important;
}

body #app:has(.container[data-v-6cf5705a]) .content .promote__cell::after {
  content: "" !important;
  position: absolute !important;
  top: -0.02rem !important;
  right: 0.36rem !important;
  width: 0.6rem !important;
  height: 0.04rem !important;
  border-radius: 999px !important;
  background: linear-gradient(90deg, transparent, rgba(0, 220, 255, 0.8), transparent) !important;
  pointer-events: none !important;
  z-index: 2 !important;
}

body #app:has(.container[data-v-6cf5705a]) .promote__cell-item {
  position: relative !important;
  z-index: 1 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.22rem !important;
  margin: 0 !important;
  padding: 0.28rem 0.06rem !important;
  border-radius: 0.08rem !important;
  border-bottom: 1px solid rgba(0, 150, 255, 0.08) !important;
  background: transparent !important;
  transition: background 0.18s ease !important;
}

body #app:has(.container[data-v-6cf5705a]) .promote__cell-item:last-child {
  border-bottom: none !important;
}

body #app:has(.container[data-v-6cf5705a]) .promote__cell-item:hover {
  background: rgba(0, 150, 255, 0.06) !important;
}

body #app:has(.container[data-v-6cf5705a]) .promote__cell-item:active {
  background: rgba(0, 150, 255, 0.08) !important;
  box-shadow: none !important;
}

body #app:has(.container[data-v-6cf5705a]) .promote__cell-item .label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.22rem !important;
  flex: 1 !important;
  min-width: 0 !important;
}

body #app:has(.container[data-v-6cf5705a]) .promote__cell-item .label svg {
  flex-shrink: 0 !important;
  width: 0.36rem !important;
  height: 0.36rem !important;
  padding: 0.08rem !important;
  border-radius: 0.12rem !important;
  box-sizing: content-box !important;
  background: rgba(0, 80, 200, 0.2) !important;
  border: 1px solid rgba(0, 150, 255, 0.2) !important;
  color: #1e90ff !important;
  filter: drop-shadow(0 0 4px rgba(0, 180, 255, 0.5)) !important;
}

body #app:has(.container[data-v-6cf5705a]) .promote__cell-item .label span {
  font-family: "Exo 2", system-ui, sans-serif !important;
  font-size: 0.26rem !important;
  font-weight: 600 !important;
  color: #c8e4ff !important;
}

body #app:has(.container[data-v-6cf5705a]) .promote__cell-item .arrow .van-icon,
body #app:has(.container[data-v-6cf5705a]) .promote__cell-item .arrow svg {
  color: #3a5a78 !important;
  opacity: 0.95 !important;
}

/* Copy invitation code — full-width row inside menu card */
body #app:has(.container[data-v-6cf5705a]) .content .promote__cell-item:has(.arrow > span) {
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  gap: 0.16rem 0.12rem !important;
  padding: 0.24rem 0.06rem 0.28rem !important;
  margin: 0 !important;
  border-bottom: 1px solid rgba(0, 150, 255, 0.08) !important;
  background: transparent !important;
}

body #app:has(.container[data-v-6cf5705a]) .content .promote__cell-item:has(.arrow > span):active {
  background: rgba(0, 150, 255, 0.05) !important;
}

body #app:has(.container[data-v-6cf5705a]) .content .promote__cell-item:has(.arrow > span) .label {
  flex: 1 1 100% !important;
  min-width: 0 !important;
}

body #app:has(.container[data-v-6cf5705a]) .content .promote__cell-item:has(.arrow > span) .label span {
  font-family: "Exo 2", system-ui, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  font-size: 0.26rem !important;
  color: #c8e4ff !important;
  text-shadow: none !important;
}

body #app:has(.container[data-v-6cf5705a]) .content .promote__cell-item:has(.arrow > span) .label svg {
  filter: drop-shadow(0 0 4px rgba(0, 180, 255, 0.5)) !important;
}

body #app:has(.container[data-v-6cf5705a]) .content .promote__cell-item:has(.arrow > span) .arrow {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

body #app:has(.container[data-v-6cf5705a]) .content .promote__cell-item:has(.arrow > span) .arrow > span {
  width: 100% !important;
  min-width: 0 !important;
  margin-right: 0 !important;
  padding: 0.14rem 0.12rem 0.14rem 0.16rem !important;
  justify-content: space-between !important;
  gap: 0.16rem !important;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
  font-size: 0.26rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  color: rgba(226, 232, 240, 0.96) !important;
  word-break: break-all !important;
  background: rgba(0, 0, 0, 0.35) !important;
  border-radius: 0.24rem !important;
  border: 1px solid rgba(0, 150, 255, 0.22) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

body #app:has(.container[data-v-6cf5705a]) .content .promote__cell-item:has(.arrow > span) .arrow > span svg {
  flex-shrink: 0 !important;
  width: 0.44rem !important;
  height: 0.44rem !important;
  padding: 0.08rem !important;
  border-radius: 0.14rem !important;
  background: rgba(0, 100, 200, 0.25) !important;
  border: 1px solid rgba(0, 150, 255, 0.35) !important;
  box-shadow: 0 0 10px rgba(0, 150, 255, 0.2) !important;
  filter: drop-shadow(0 0 4px rgba(0, 180, 255, 0.45)) !important;
}

/* Team Partner — invitation link row (same neon language) */
body #app:has(.partner-code[data-v-28c19aaa]) .partner-title[data-v-28c19aaa] {
  font-family: "Orbitron", system-ui, sans-serif !important;
  color: rgba(248, 250, 252, 0.96) !important;
  text-shadow: 0 0 14px rgba(34, 211, 238, 0.4) !important;
  letter-spacing: 0.05em !important;
}

body #app:has(.partner-code[data-v-28c19aaa]) .partner-title[data-v-28c19aaa]::before {
  background: linear-gradient(180deg, #22d3ee 0%, #0ea5e9 100%) !important;
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.5) !important;
  border-radius: 0.04rem !important;
}

body #app:has(.partner-code[data-v-28c19aaa]) .partner-code[data-v-28c19aaa] {
  height: auto !important;
  min-height: 0 !important;
  padding: 0.14rem 0.12rem 0.14rem 0.16rem !important;
  margin-bottom: 0.4rem !important;
  line-height: 1.45 !important;
  background: rgba(0, 0, 0, 0.4) !important;
  border: 1px solid rgba(34, 211, 238, 0.22) !important;
  border-radius: 0.28rem !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 1px rgba(34, 211, 238, 0.12),
    0 0 18px rgba(34, 211, 238, 0.12) !important;
}

body #app:has(.partner-code[data-v-28c19aaa]) .partner-code[data-v-28c19aaa]::before,
body #app:has(.partner-code[data-v-28c19aaa]) .partner-code[data-v-28c19aaa]::after {
  content: none !important;
  display: none !important;
}

body #app:has(.partner-code[data-v-28c19aaa]) .partner-code span[data-v-28c19aaa]:first-of-type {
  width: auto !important;
  max-width: none !important;
  flex: 1 1 auto !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  word-break: break-all !important;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important;
  font-size: 0.26rem !important;
  font-weight: 500 !important;
  color: rgba(226, 232, 240, 0.96) !important;
}

body #app:has(.partner-code[data-v-28c19aaa]) .partner-code span[data-v-28c19aaa]:last-child {
  position: relative !important;
  z-index: 1 !important;
  padding: 0.06rem !important;
}

body #app:has(.partner-code[data-v-28c19aaa]) .partner-code svg[data-v-28c19aaa] {
  width: 0.44rem !important;
  height: 0.44rem !important;
  padding: 0.08rem !important;
  border-radius: 0.14rem !important;
  background: rgba(34, 211, 238, 0.12) !important;
  border: 1px solid rgba(34, 211, 238, 0.3) !important;
  box-shadow: 0 0 14px rgba(34, 211, 238, 0.2) !important;
  color: rgba(248, 250, 252, 0.95) !important;
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.45)) !important;
}

@media (prefers-reduced-motion: reduce) {
  body #app:has(.container[data-v-6cf5705a]) .shareBtnContainer,
  body #app:has(.container[data-v-6cf5705a]) .shareBtnContainer .shareBtn {
    animation: none !important;
  }

  body #app:has(.container[data-v-6cf5705a]) .shareBtnContainer::before,
  body #app:has(.container[data-v-6cf5705a]) .shareBtnContainer::after {
    animation: none !important;
  }

  body #app:has(.container[data-v-6cf5705a]) .content .commission::before,
  body #app:has(.container[data-v-6cf5705a]) .content .promote__cell::before {
    animation: none !important;
  }

  body #app:has(.container[data-v-6cf5705a]) .promote__cell-item {
    transition: none !important;
  }
}