/* ============================================================
   G6M Group Badges Premium V491
   GTA VI neon glass — unique color identity per group
   Cascade: load LAST (after critical / member-style / chips v470)
   Icons: Heroicons-style SVG masks in styles/g6m/badges/icons/
   ============================================================ */

:root {
  --g6m-badge-h: 30px;
  --g6m-badge-pad-x: 14px;
  --g6m-badge-gap: 0.45em;
  --g6m-badge-radius: 999px;
  --g6m-badge-font: Rajdhani, "Segoe UI", system-ui, sans-serif;
  --g6m-badge-weight: 700;
  --g6m-badge-tracking: 1px;
  --g6m-badge-ease: 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  --g6m-badge-icon: 14px;
  --g6m-skyline: url("badges/icons/skyline.svg");
}

/* ---------- Kill legacy adornments / emoji ghosts ---------- */
html body .userBanner-before,
html body .userBanner-after {
  display: none !important;
}

/* ---------- Flex wrap containers (no overflow / no forced single line) ---------- */
html body .message-userDetails,
html body .message-cell--user .message-userDetails,
html body .memberHeader-banners,
html body .memberTooltip-header .memberTooltip-banners,
html body .menu--account .g6m-account-menu-banners,
html body .g6m-visitor-banners {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0.35rem !important;
}

/* ---------- Base geometry (identical for ALL badges) ---------- */
html body .userTitle,
html body .message-userTitle,
html body .userTitle.message-userTitle,
html body .userBanner,
html body .message-userBanner,
html body .memberTooltip .userBanner,
html body .memberTooltip-header .userBanner,
html body .tooltip--member .userBanner,
html body .menu--account .userBanner,
html body .menu--account .g6m-account-menu-banners .userBanner,
html body .contentRow-minor .userTitle,
html body .memberHeader-blurb .userTitle,
html body .memberHeader .userBanner,
html body .userBanner[class*="userBanner--g6m"],
html body .userBanner.userBanner--staff {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--g6m-badge-gap) !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: var(--g6m-badge-h) !important;
  min-height: var(--g6m-badge-h) !important;
  max-height: var(--g6m-badge-h) !important;
  padding: 0 var(--g6m-badge-pad-x) !important;
  margin: 0 !important;
  border-radius: var(--g6m-badge-radius) !important;
  font-family: var(--g6m-badge-font) !important;
  font-size: 0.72rem !important;
  font-weight: var(--g6m-badge-weight) !important;
  letter-spacing: var(--g6m-badge-tracking) !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  vertical-align: middle !important;
  position: relative !important;
  isolation: isolate !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.35) !important;
  background-clip: border-box !important;
  -webkit-background-clip: border-box !important;
  backdrop-filter: blur(10px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.2) !important;
  transform: translateZ(0) !important;
  will-change: transform, filter, box-shadow !important;
  transition:
    transform var(--g6m-badge-ease),
    box-shadow var(--g6m-badge-ease),
    filter var(--g6m-badge-ease),
    border-color var(--g6m-badge-ease),
    opacity var(--g6m-badge-ease) !important;
  animation: none !important;
}

/* Glossy + scanlines overlay (all badges) */
html body .userTitle::after,
html body .message-userTitle::after,
html body .userBanner::after,
html body .message-userBanner::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  z-index: 1 !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, transparent 42%, rgba(0, 0, 0, 0.28) 100%),
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 1px,
      rgba(0, 0, 0, 0.16) 1px,
      rgba(0, 0, 0, 0.16) 2px
    ) !important;
  animation: none !important;
}

/* Icon slot — SVG mask (Heroicons) */
html body .userTitle::before,
html body .message-userTitle::before,
html body .userBanner::before,
html body .message-userBanner::before {
  content: "" !important;
  display: inline-block !important;
  flex: 0 0 auto !important;
  width: var(--g6m-badge-icon) !important;
  height: var(--g6m-badge-icon) !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  z-index: 2 !important;
  opacity: 1 !important;
  background-color: #ffffff !important;
  background-image: none !important;
  -webkit-mask: url("badges/icons/user.svg") center / contain no-repeat !important;
  mask: url("badges/icons/user.svg") center / contain no-repeat !important;
  filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.35)) !important;
  animation: none !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

html body .userTitle:hover,
html body .message-userTitle:hover,
html body .userBanner:hover,
html body .message-userBanner:hover {
  transform: scale(1.04) translateZ(0) !important;
  filter: brightness(1.08) !important;
}

/* ============================================================
   ROLE PALETTE — mandatory unique identities (ETAPE 3)
   ============================================================ */

/* —— FONDATEUR — Or Royal —— */
html body .userBanner--g6mFounder,
html body .message-userDetails:has(.username--admin) .userTitle,
html body .message-userDetails:has(.username--admin) .message-userTitle,
html body .message-userDetails:has(.username--style3) .userTitle,
html body .message-userDetails:has(.username--style3) .message-userTitle,
html body .message-userDetails:has(.username--styleAdmin) .userTitle,
html body .memberTooltip:has(.username--admin) .userTitle,
html body .memberTooltip:has(.username--style3) .userTitle,
html body .contentRow-main:has(.username--admin) .userTitle,
html body .contentRow-main:has(.username--style3) .userTitle,
html body .menu--account:has(.username--admin) .userBanner,
html body .menu--account .userBanner--g6mFounder {
  border-color: #ffd86b !important;
  background:
    linear-gradient(180deg, rgba(255, 216, 107, 0.22), rgba(0, 0, 0, 0.55)),
    linear-gradient(135deg, #ffd86b 0%, #ffb300 48%, #c57a00 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 0 14px rgba(255, 179, 0, 0.55),
    0 0 28px rgba(197, 122, 0, 0.28),
    0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
html body .userBanner--g6mFounder:hover,
html body .message-userDetails:has(.username--admin) .userTitle:hover,
html body .message-userDetails:has(.username--style3) .userTitle:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    0 0 20px rgba(255, 179, 0, 0.75),
    0 0 36px rgba(255, 216, 107, 0.35),
    0 4px 14px rgba(0, 0, 0, 0.45) !important;
}
html body .userBanner--g6mFounder::before,
html body .message-userDetails:has(.username--admin) .userTitle::before,
html body .message-userDetails:has(.username--admin) .message-userTitle::before,
html body .message-userDetails:has(.username--style3) .userTitle::before,
html body .message-userDetails:has(.username--style3) .message-userTitle::before {
  -webkit-mask-image: url("badges/icons/crown.svg") !important;
  mask-image: url("badges/icons/crown.svg") !important;
  filter: drop-shadow(0 0 6px rgba(255, 216, 107, 0.85)) !important;
}
html body .userBanner--g6mFounder::after,
html body .message-userDetails:has(.username--admin) .userTitle::after,
html body .message-userDetails:has(.username--style3) .userTitle::after {
  background:
    var(--g6m-skyline) right 8px center / 56px 22px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, transparent 42%, rgba(0, 0, 0, 0.28) 100%),
    repeating-linear-gradient(0deg, transparent 0, transparent 1px, rgba(0, 0, 0, 0.16) 1px, rgba(0, 0, 0, 0.16) 2px) !important;
}

/* —— ADMINISTRATEUR — Rouge profond —— */
html body .userBanner--g6mAdmin,
html body .message-userDetails:has(.username--style5):not(:has(.username--style3)):not(:has(.username--admin)) .userTitle,
html body .message-userDetails:has(.username--style5):not(:has(.username--style3)):not(:has(.username--admin)) .message-userTitle,
html body .memberTooltip:has(.username--style5):not(:has(.username--style3)):not(:has(.username--admin)) .userTitle,
html body .contentRow-main:has(.username--style5):not(:has(.username--style3)):not(:has(.username--admin)) .userTitle,
html body .menu--account .userBanner--g6mAdmin {
  border-color: #ff4d4d !important;
  background:
    linear-gradient(180deg, rgba(255, 77, 77, 0.22), rgba(0, 0, 0, 0.55)),
    linear-gradient(135deg, #ff4d4d 0%, #c62828 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 0 14px rgba(255, 77, 77, 0.55),
    0 0 26px rgba(198, 40, 40, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
html body .userBanner--g6mAdmin:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 22px rgba(255, 77, 77, 0.8),
    0 0 34px rgba(198, 40, 40, 0.4),
    0 4px 14px rgba(0, 0, 0, 0.45) !important;
}
html body .userBanner--g6mAdmin::before,
html body .message-userDetails:has(.username--style5):not(:has(.username--style3)):not(:has(.username--admin)) .userTitle::before,
html body .message-userDetails:has(.username--style5):not(:has(.username--style3)):not(:has(.username--admin)) .message-userTitle::before {
  -webkit-mask-image: url("badges/icons/shield.svg") !important;
  mask-image: url("badges/icons/shield.svg") !important;
  filter: drop-shadow(0 0 6px rgba(255, 77, 77, 0.85)) !important;
}

/* —— DÉVELOPPEUR — Bleu électrique —— */
html body .userBanner--g6mDeveloper,
html body .userBanner--g6mDev,
html body .message-userDetails:has(.username--style8) .userTitle,
html body .message-userDetails:has(.username--style8) .message-userTitle {
  border-color: #42a5f5 !important;
  background:
    linear-gradient(180deg, rgba(66, 165, 245, 0.22), rgba(0, 0, 0, 0.55)),
    linear-gradient(135deg, #42a5f5 0%, #1565c0 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 0 14px rgba(66, 165, 245, 0.55),
    0 0 26px rgba(21, 101, 192, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
html body .userBanner--g6mDeveloper:hover,
html body .userBanner--g6mDev:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 22px rgba(66, 165, 245, 0.8),
    0 0 34px rgba(21, 101, 192, 0.4),
    0 4px 14px rgba(0, 0, 0, 0.45) !important;
}
html body .userBanner--g6mDeveloper::before,
html body .userBanner--g6mDev::before,
html body .message-userDetails:has(.username--style8) .userTitle::before {
  -webkit-mask-image: url("badges/icons/code.svg") !important;
  mask-image: url("badges/icons/code.svg") !important;
  filter: drop-shadow(0 0 6px rgba(66, 165, 245, 0.85)) !important;
}

/* —— MODÉRATEUR / SUPER MOD / STAFF XF — Turquoise —— */
html body .userBanner--g6mModerator,
html body .userBanner--g6mSuperMod,
html body .message-userDetails:has(.username--moderator):not(:has(.username--admin)) .userTitle,
html body .message-userDetails:has(.username--moderator):not(:has(.username--admin)) .message-userTitle,
html body .message-userDetails:has(.username--style4) .userTitle,
html body .message-userDetails:has(.username--style6) .userTitle,
html body .message-userDetails:has(.username--style7) .userTitle,
html body .memberTooltip:has(.username--moderator):not(:has(.username--admin)) .userTitle,
html body .contentRow-main:has(.username--moderator):not(:has(.username--admin)) .userTitle,
html body .menu--account .userBanner--g6mModerator,
html body .menu--account .userBanner--g6mSuperMod {
  border-color: #00e5ff !important;
  background:
    linear-gradient(180deg, rgba(0, 229, 255, 0.2), rgba(0, 0, 0, 0.55)),
    linear-gradient(135deg, #00e5ff 0%, #00acc1 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 0 14px rgba(0, 229, 255, 0.55),
    0 0 26px rgba(0, 172, 193, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
html body .userBanner--g6mModerator:hover,
html body .userBanner--g6mSuperMod:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 22px rgba(0, 229, 255, 0.8),
    0 0 34px rgba(0, 172, 193, 0.4),
    0 4px 14px rgba(0, 0, 0, 0.45) !important;
}
html body .userBanner--g6mModerator::before,
html body .userBanner--g6mSuperMod::before,
html body .message-userDetails:has(.username--moderator):not(:has(.username--admin)) .userTitle::before,
html body .message-userDetails:has(.username--moderator):not(:has(.username--admin)) .message-userTitle::before {
  -webkit-mask-image: url("badges/icons/shield.svg") !important;
  mask-image: url("badges/icons/shield.svg") !important;
  filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.85)) !important;
}

/* Staff banner (MEMBRE DU PERSONNEL) — magenta distinct, not palette-adjacent to Premium */
html body .userBanner.userBanner--staff:not(.userBanner--g6mAdmin):not(.userBanner--g6mFounder):not(.userBanner--g6mModerator):not(.userBanner--g6mSuperMod),
html body .memberTooltip .userBanner--staff:not(.userBanner--g6mAdmin):not(.userBanner--g6mFounder),
html body .menu--account .userBanner.userBanner--staff:not(.userBanner--g6mAdmin):not(.userBanner--g6mFounder) {
  border-color: #ff2d95 !important;
  background:
    linear-gradient(180deg, rgba(255, 45, 149, 0.22), rgba(0, 0, 0, 0.55)),
    linear-gradient(135deg, #ff2d95 0%, #c2185b 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 0 14px rgba(255, 45, 149, 0.55),
    0 0 26px rgba(194, 24, 91, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
html body .userBanner.userBanner--staff:not(.userBanner--g6mAdmin):not(.userBanner--g6mFounder):not(.userBanner--g6mModerator):not(.userBanner--g6mSuperMod)::before,
html body .memberTooltip .userBanner--staff:not(.userBanner--g6mAdmin):not(.userBanner--g6mFounder)::before {
  -webkit-mask-image: url("badges/icons/users.svg") !important;
  mask-image: url("badges/icons/users.svg") !important;
  filter: drop-shadow(0 0 6px rgba(255, 45, 149, 0.85)) !important;
}

/* —— SUPPORT — Vert —— */
html body .userBanner--g6mSupport,
html body .message-userDetails:has(.username--style18) .userTitle {
  border-color: #7cfc00 !important;
  background:
    linear-gradient(180deg, rgba(124, 252, 0, 0.2), rgba(0, 0, 0, 0.55)),
    linear-gradient(135deg, #7cfc00 0%, #2ecc71 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 0 14px rgba(124, 252, 0, 0.5),
    0 0 26px rgba(46, 204, 113, 0.28),
    0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
html body .userBanner--g6mSupport:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 22px rgba(124, 252, 0, 0.75),
    0 0 34px rgba(46, 204, 113, 0.4),
    0 4px 14px rgba(0, 0, 0, 0.45) !important;
}
html body .userBanner--g6mSupport::before,
html body .message-userDetails:has(.username--style18) .userTitle::before {
  -webkit-mask-image: url("badges/icons/headset.svg") !important;
  mask-image: url("badges/icons/headset.svg") !important;
  filter: drop-shadow(0 0 6px rgba(124, 252, 0, 0.85)) !important;
}

/* —— MEMBRE PREMIUM / DONATEUR — Violet —— */
html body .userBanner--g6mPremium,
html body .message-userDetails:has(.username--style11) .userTitle,
html body .message-userDetails:has(.username--style13) .userTitle {
  border-color: #a855f7 !important;
  background:
    linear-gradient(180deg, rgba(168, 85, 247, 0.22), rgba(0, 0, 0, 0.55)),
    linear-gradient(135deg, #a855f7 0%, #7c3aed 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 0 14px rgba(168, 85, 247, 0.55),
    0 0 26px rgba(124, 58, 237, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
html body .userBanner--g6mPremium:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 22px rgba(168, 85, 247, 0.8),
    0 0 34px rgba(124, 58, 237, 0.4),
    0 4px 14px rgba(0, 0, 0, 0.45) !important;
}
html body .userBanner--g6mPremium::before,
html body .message-userDetails:has(.username--style11) .userTitle::before,
html body .message-userDetails:has(.username--style13) .userTitle::before {
  -webkit-mask-image: url("badges/icons/star.svg") !important;
  mask-image: url("badges/icons/star.svg") !important;
  filter: drop-shadow(0 0 6px rgba(168, 85, 247, 0.85)) !important;
}
html body .userBanner--g6mPremium::after {
  background:
    var(--g6m-skyline) right 8px center / 56px 22px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, transparent 42%, rgba(0, 0, 0, 0.28) 100%),
    repeating-linear-gradient(0deg, transparent 0, transparent 1px, rgba(0, 0, 0, 0.16) 1px, rgba(0, 0, 0, 0.16) 2px) !important;
}

/* —— VIP — Orange —— */
html body .userBanner--g6mVIP,
html body .userBanner--g6mVipGold,
html body .userBanner--primary,
html body .userBanner--accent,
html body .message-userDetails:has(.username--style24) .userTitle,
html body .message-userDetails:has(.username--style12) .userTitle,
html body .memberTooltip:has(.username--style24) .userTitle,
html body .contentRow-main:has(.username--style24) .userTitle,
html body .contentRow-main:has(.username--style12) .userTitle {
  border-color: #ff9800 !important;
  background:
    linear-gradient(180deg, rgba(255, 152, 0, 0.22), rgba(0, 0, 0, 0.55)),
    linear-gradient(135deg, #ff9800 0%, #f57c00 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 0 14px rgba(255, 152, 0, 0.55),
    0 0 26px rgba(245, 124, 0, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
html body .userBanner--g6mVIP:hover,
html body .userBanner--g6mVipGold:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 0 22px rgba(255, 152, 0, 0.8),
    0 0 34px rgba(245, 124, 0, 0.4),
    0 4px 14px rgba(0, 0, 0, 0.45) !important;
}
html body .userBanner--g6mVIP::before,
html body .userBanner--g6mVipGold::before,
html body .message-userDetails:has(.username--style24) .userTitle::before,
html body .message-userDetails:has(.username--style12) .userTitle::before {
  -webkit-mask-image: url("badges/icons/gem.svg") !important;
  mask-image: url("badges/icons/gem.svg") !important;
  filter: drop-shadow(0 0 6px rgba(255, 152, 0, 0.85)) !important;
}

/* VIP tiers — keep distinct accents, same geometry */
html body .userBanner--g6mVipBronze,
html body .message-userDetails:has(.username--style22) .userTitle {
  border-color: #cd7f32 !important;
  background:
    linear-gradient(180deg, rgba(205, 127, 50, 0.25), rgba(0, 0, 0, 0.55)),
    linear-gradient(135deg, #a05a28 0%, #5c3414 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 220, 180, 0.3), 0 0 12px rgba(180, 90, 30, 0.45), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
html body .userBanner--g6mVipBronze::before {
  -webkit-mask-image: url("badges/icons/gem.svg") !important;
  mask-image: url("badges/icons/gem.svg") !important;
}

html body .userBanner--g6mVipSilver,
html body .message-userDetails:has(.username--style23) .userTitle {
  border-color: #e2e8f0 !important;
  background:
    linear-gradient(180deg, rgba(226, 232, 240, 0.2), rgba(0, 0, 0, 0.55)),
    linear-gradient(135deg, #94a3b8 0%, #475569 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 12px rgba(148, 163, 184, 0.4), 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}
html body .userBanner--g6mVipSilver::before {
  -webkit-mask-image: url("badges/icons/gem.svg") !important;
  mask-image: url("badges/icons/gem.svg") !important;
}

html body .userBanner--g6mVipPlatinum,
html body .message-userDetails:has(.username--style25) .userTitle {
  border-color: #f8fafc !important;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.22), rgba(0, 0, 0, 0.55)),
    linear-gradient(135deg, #cbd5e1 0%, #64748b 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 0 14px rgba(226, 232, 240, 0.4), 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}
html body .userBanner--g6mVipPlatinum::before {
  -webkit-mask-image: url("badges/icons/gem.svg") !important;
  mask-image: url("badges/icons/gem.svg") !important;
}

html body .userBanner--g6mVipDiamond,
html body .message-userDetails:has(.username--style26) .userTitle {
  border-color: #22d3ee !important;
  background:
    linear-gradient(180deg, rgba(34, 211, 238, 0.22), rgba(0, 0, 0, 0.55)),
    linear-gradient(135deg, #22d3ee 0%, #0369a1 100%) !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 14px rgba(34, 211, 238, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
html body .userBanner--g6mVipDiamond::before {
  -webkit-mask-image: url("badges/icons/gem.svg") !important;
  mask-image: url("badges/icons/gem.svg") !important;
  filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.85)) !important;
}

html body .userBanner--g6mVipUltimate,
html body .message-userDetails:has(.username--style27) .userTitle {
  border-color: #ff0b8b !important;
  background:
    linear-gradient(180deg, rgba(255, 11, 139, 0.2), rgba(0, 0, 0, 0.55)),
    linear-gradient(135deg, #ff0b8b 0%, #8d38ff 50%, #00d7ff 100%) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 16px rgba(255, 11, 139, 0.5), 0 0 22px rgba(0, 215, 255, 0.25), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
html body .userBanner--g6mVipUltimate::before {
  -webkit-mask-image: url("badges/icons/star.svg") !important;
  mask-image: url("badges/icons/star.svg") !important;
}

/* —— MEMBRE — Bleu gris —— */
html body .userTitle,
html body .message-userTitle,
html body .userTitle.message-userTitle,
html body .userBanner--g6mMember,
html body .userBanner--g6mNew,
html body .contentRow-minor .userTitle,
html body .message-userDetails:has(.username--style2) .userTitle,
html body .message-userDetails:has(.username--style2) .message-userTitle,
html body .message-userDetails:has(.username--style19) .userTitle,
html body .message-userDetails:has(.username--style19) .message-userTitle,
html body .message-userDetails:has(.username--styleMember) .userTitle,
html body .message-userDetails:has(.username--styleMember) .message-userTitle,
html body .message-userDetails:has(.username--style20) .userTitle {
  border-color: #94a3b8 !important;
  background:
    linear-gradient(180deg, rgba(100, 116, 139, 0.28), rgba(0, 0, 0, 0.55)),
    linear-gradient(135deg, #64748b 0%, #475569 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(0, 0, 0, 0.35),
    0 0 10px rgba(100, 116, 139, 0.28),
    0 4px 12px rgba(0, 0, 0, 0.35) !important;
}
html body .userBanner--g6mMember::before,
html body .userBanner--g6mNew::before,
html body .userTitle::before,
html body .message-userTitle::before,
html body .message-userDetails:has(.username--style2) .userTitle::before,
html body .message-userDetails:has(.username--style19) .userTitle::before,
html body .message-userDetails:has(.username--styleMember) .userTitle::before,
html body .message-userDetails:has(.username--style20) .userTitle::before {
  -webkit-mask-image: url("badges/icons/user.svg") !important;
  mask-image: url("badges/icons/user.svg") !important;
  filter: drop-shadow(0 0 4px rgba(148, 163, 184, 0.55)) !important;
}
html body .userBanner--g6mMember::after,
html body .userBanner--g6mNew::after {
  background:
    var(--g6m-skyline) right 8px center / 48px 20px no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.12) 0%, transparent 42%, rgba(0, 0, 0, 0.28) 100%),
    repeating-linear-gradient(0deg, transparent 0, transparent 1px, rgba(0, 0, 0, 0.16) 1px, rgba(0, 0, 0, 0.16) 2px) !important;
}

/* —— BANNI — Gris sombre, glow off —— */
html body .userBanner--g6mBanned,
html body .userBanner--banned,
html body .message-userDetails:has(.username--banned) .userTitle {
  border-color: #616161 !important;
  background:
    linear-gradient(180deg, rgba(66, 66, 66, 0.35), rgba(0, 0, 0, 0.65)),
    linear-gradient(135deg, #424242 0%, #212121 100%) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.45) !important;
  opacity: 0.9 !important;
  filter: grayscale(0.15) !important;
}
html body .userBanner--g6mBanned:hover,
html body .userBanner--banned:hover {
  transform: none !important;
  filter: grayscale(0.15) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.45) !important;
}
html body .userBanner--g6mBanned::before,
html body .userBanner--banned::before {
  -webkit-mask-image: url("badges/icons/ban.svg") !important;
  mask-image: url("badges/icons/ban.svg") !important;
  filter: none !important;
  opacity: 0.85 !important;
}

/* —— Supporting ranks (keep unique, same shell) —— */
html body .userBanner--g6mCreator {
  border-color: #22d3ee !important;
  background: linear-gradient(180deg, rgba(34, 211, 238, 0.2), rgba(0, 0, 0, 0.55)), linear-gradient(135deg, #0891b2, #22d3ee) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 12px rgba(34, 211, 238, 0.4), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
html body .userBanner--g6mCreator::before {
  -webkit-mask-image: url("badges/icons/star.svg") !important;
  mask-image: url("badges/icons/star.svg") !important;
}

html body .userBanner--g6mPartner {
  border-color: #4ade80 !important;
  background: linear-gradient(180deg, rgba(74, 222, 128, 0.2), rgba(0, 0, 0, 0.55)), linear-gradient(135deg, #15803d, #4ade80) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 12px rgba(74, 222, 128, 0.4), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
html body .userBanner--g6mPartner::before {
  -webkit-mask-image: url("badges/icons/users.svg") !important;
  mask-image: url("badges/icons/users.svg") !important;
}

html body .userBanner--g6mStreamer {
  border-color: #fb7185 !important;
  background: linear-gradient(180deg, rgba(251, 113, 133, 0.2), rgba(0, 0, 0, 0.55)), linear-gradient(135deg, #be123c, #fb7185) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 12px rgba(251, 113, 133, 0.4), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
html body .userBanner--g6mStreamer::before {
  -webkit-mask-image: url("badges/icons/users.svg") !important;
  mask-image: url("badges/icons/users.svg") !important;
}

html body .userBanner--g6mBeta {
  border-color: #74d7ff !important;
  background: linear-gradient(180deg, rgba(116, 215, 255, 0.2), rgba(0, 0, 0, 0.55)), linear-gradient(135deg, #0369a1, #74d7ff) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 12px rgba(116, 215, 255, 0.4), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
html body .userBanner--g6mBeta::before {
  -webkit-mask-image: url("badges/icons/code.svg") !important;
  mask-image: url("badges/icons/code.svg") !important;
}

html body .userBanner--g6mModder {
  border-color: #c55cff !important;
  background: linear-gradient(180deg, rgba(197, 92, 255, 0.2), rgba(0, 0, 0, 0.55)), linear-gradient(135deg, #6d28d9, #c55cff) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 0 12px rgba(197, 92, 255, 0.4), 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}
html body .userBanner--g6mModder::before {
  -webkit-mask-image: url("badges/icons/code.svg") !important;
  mask-image: url("badges/icons/code.svg") !important;
}

/* ---------- Dedup: hide banner when title chip already present ---------- */
html body .message-userDetails:has(.message-userTitle) .userBanner--staff,
html body .message-userDetails:has(.message-userTitle) .userBanner--g6mAdmin,
html body .message-userDetails:has(.message-userTitle) .userBanner--g6mFounder,
html body .message-userDetails:has(.message-userTitle) .userBanner--g6mModerator,
html body .message-userDetails:has(.message-userTitle) .userBanner--g6mSuperMod,
html body .message-cell--user:has(.message-userTitle) .userBanner--staff,
html body .message-cell--user:has(.message-userTitle) .userBanner--g6mAdmin,
html body .message-cell--user:has(.message-userTitle) .userBanner--g6mFounder,
html body .message-cell--user:has(.message-userTitle) .userBanner--g6mModerator,
html body .message-cell--user:has(.message-userTitle) .userBanner--g6mSuperMod,
html body .message-userDetails:has(.message-userTitle) .userBanner[class*="userBanner--g6mVip"],
html body .message-userDetails:has(.message-userTitle) .userBanner--g6mVIP,
html body .message-userDetails:has(.message-userTitle) .userBanner--g6mPremium,
html body .message-userDetails:has(.message-userTitle) .userBanner--g6mMember {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  font-size: 0 !important;
  box-shadow: none !important;
}

/* ---------- Shop wallet sizing (preserve v480 layout) ---------- */
html body[data-template*="dbtech_shop"] .g6m-shop-wallet__value--badge .userBanner,
html body[data-template*="dbtech_shop"] .g6m-shop-wallet-badge.userBanner {
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: 0 12px !important;
}

/* ---------- Light mode readability ---------- */
html body[data-color-scheme="light"] .userBanner,
html body[data-color-scheme="light"] .userTitle,
html body[data-color-scheme="light"] .message-userTitle {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65) !important;
}
@media (prefers-color-scheme: light) {
  html body:not([data-color-scheme="dark"]) .userBanner,
  html body:not([data-color-scheme="dark"]) .userTitle,
  html body:not([data-color-scheme="dark"]) .message-userTitle {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65) !important;
  }
}

/* ---------- Responsive — same height, wrap only ---------- */
@media (max-width: 900px) {
  html body .userTitle,
  html body .message-userTitle,
  html body .userBanner,
  html body .message-userBanner {
    font-size: 0.68rem !important;
    padding: 0 12px !important;
    height: var(--g6m-badge-h) !important;
    min-height: var(--g6m-badge-h) !important;
    max-height: var(--g6m-badge-h) !important;
  }
}
@media (max-width: 560px) {
  html body .userTitle,
  html body .message-userTitle,
  html body .userBanner,
  html body .message-userBanner {
    font-size: 0.64rem !important;
    padding: 0 11px !important;
    letter-spacing: 0.8px !important;
    height: var(--g6m-badge-h) !important;
    min-height: var(--g6m-badge-h) !important;
    max-height: var(--g6m-badge-h) !important;
  }
}
@media (min-width: 1920px) {
  :root {
    --g6m-badge-h: 32px;
    --g6m-badge-icon: 15px;
  }
  html body .userTitle,
  html body .message-userTitle,
  html body .userBanner,
  html body .message-userBanner {
    font-size: 0.78rem !important;
  }
}
@media (min-width: 2560px) {
  :root {
    --g6m-badge-h: 34px;
    --g6m-badge-icon: 16px;
    --g6m-badge-pad-x: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .userTitle,
  html body .message-userTitle,
  html body .userBanner,
  html body .message-userBanner {
    transition: none !important;
    animation: none !important;
  }
  html body .userTitle:hover,
  html body .message-userTitle:hover,
  html body .userBanner:hover,
  html body .message-userBanner:hover {
    transform: none !important;
  }
}

/* END G6M_GROUP_BADGES_V491 */