/* ============================================================
   tier-theme.css · bascule subtile des accents selon warrior_level
   ============================================================
   tier-theme.js applique html[data-tier="ruby"] (ou emerald, diamond).
   Ce CSS override les couleurs sapphire pour basculer le site
   sur la couleur du tier · STYLE LUXURY SUBTIL :
   · Fond noir/or conservé partout (l'ambiance reste premium)
   · Seuls les ACCENTS bleus deviennent rouge/vert/blanc
   · Sapphire badges des autres users restent bleus
     (uniquement le THEME utilisateur courant change)

   Inclure dans toutes les pages clients :
   <link rel="stylesheet" href="tier-theme.css?v=1">
   ============================================================ */

/* ============================================================
   RUBY THEME · rouge sapphire-1/2/3 → ruby
   ============================================================ */
html[data-tier="ruby"] {
  --sapphire-1: #ffd0d6;
  --sapphire-2: #ff5074;
  --sapphire-3: #5a0a18;
}

/* Override variables Tailwind-style/CSS si présentes */
html[data-tier="ruby"] body {
  --accent-primary: #ff5074;
  --accent-deep: #5a0a18;
  --accent-glow: rgba(255,138,154,0.35);
}

/* Hover et focus états · garder la cohérence ruby */
html[data-tier="ruby"] input:focus,
html[data-tier="ruby"] textarea:focus,
html[data-tier="ruby"] select:focus {
  border-color: #ff5074 !important;
  box-shadow: 0 0 0 2px rgba(255,80,116,0.15);
}

/* ============================================================
   EMERALD THEME · vert
   ============================================================ */
html[data-tier="emerald"] {
  --sapphire-1: #b8ecd0;
  --sapphire-2: #2fb56a;
  --sapphire-3: #0a4a2a;
}

html[data-tier="emerald"] body {
  --accent-primary: #2fb56a;
  --accent-deep: #0a4a2a;
  --accent-glow: rgba(127,214,168,0.35);
}

html[data-tier="emerald"] input:focus,
html[data-tier="emerald"] textarea:focus,
html[data-tier="emerald"] select:focus {
  border-color: #2fb56a !important;
  box-shadow: 0 0 0 2px rgba(47,181,106,0.15);
}

/* ============================================================
   DIAMOND THEME · blanc/diamant + or premium
   ============================================================ */
html[data-tier="diamond"] {
  --sapphire-1: #d8e8ff;
  --sapphire-2: #ffffff;
  --sapphire-3: #7080a0;
}

html[data-tier="diamond"] body {
  --accent-primary: #d8e8ff;
  --accent-deep: #7080a0;
  --accent-glow: rgba(216,232,255,0.4);
}

html[data-tier="diamond"] input:focus,
html[data-tier="diamond"] textarea:focus,
html[data-tier="diamond"] select:focus {
  border-color: #d8e8ff !important;
  box-shadow: 0 0 0 2px rgba(216,232,255,0.2);
}

/* ============================================================
   Banner "Mon accès" sticky · adapter couleur selon tier
   (visible sur Dashboard, V.U.E, Modules etc · cf .access-banner)
   ============================================================ */
html[data-tier="ruby"] .access-banner,
html[data-tier="ruby"] .access-banner-sticky,
html[data-tier="ruby"] [data-tier-banner] {
  background: linear-gradient(90deg, rgba(255,80,116,0.12), rgba(10,5,3,0.45)) !important;
  border-color: rgba(255,138,154,0.4) !important;
  color: #ffd0d6 !important;
}

html[data-tier="emerald"] .access-banner,
html[data-tier="emerald"] .access-banner-sticky,
html[data-tier="emerald"] [data-tier-banner] {
  background: linear-gradient(90deg, rgba(47,181,106,0.12), rgba(10,5,3,0.45)) !important;
  border-color: rgba(127,214,168,0.4) !important;
  color: #b8ecd0 !important;
}

html[data-tier="diamond"] .access-banner,
html[data-tier="diamond"] .access-banner-sticky,
html[data-tier="diamond"] [data-tier-banner] {
  background: linear-gradient(90deg, rgba(216,232,255,0.12), rgba(10,5,3,0.45)) !important;
  border-color: rgba(255,255,255,0.4) !important;
  color: #d8e8ff !important;
}

/* ============================================================
   Boutons CTA · ruby/emerald/diamond accents
   ============================================================ */
html[data-tier="ruby"] [data-tier-cta],
html[data-tier="ruby"] .cta-tier {
  background: linear-gradient(180deg, #ff8a9a, #c8283c) !important;
  color: #fff !important;
  border-color: #c8283c !important;
}

html[data-tier="emerald"] [data-tier-cta],
html[data-tier="emerald"] .cta-tier {
  background: linear-gradient(180deg, #7fd6a8, #2fb56a) !important;
  color: #0a2e1c !important;
  border-color: #2fb56a !important;
}

html[data-tier="diamond"] [data-tier-cta],
html[data-tier="diamond"] .cta-tier {
  background: linear-gradient(180deg, #ffffff, #d8e8ff) !important;
  color: #0a0500 !important;
  border-color: #ffffff !important;
}

/* ============================================================
   Particles / halos / glows · adapter au tier
   ============================================================ */
html[data-tier="ruby"] body::before {
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,80,116,0.06), transparent 60%) !important;
}

html[data-tier="emerald"] body::before {
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(47,181,106,0.06), transparent 60%) !important;
}

html[data-tier="diamond"] body::before {
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(216,232,255,0.08), transparent 60%) !important;
}

/* ============================================================
   Indicateur visuel discret · badge tier dans la sidebar
   (déjà géré par tier-theme.js qui modifie aria-label et SVG)
   ============================================================ */

/* ============================================================
   Override · les éléments bleus "sapphire" hardcodés
   On ne touche PAS aux badges tier des autres users (ex: dans
   community où les autres users restent leur couleur d'origine)
   ============================================================ */
html[data-tier="ruby"] .tier-self-sapphire-only {
  display: none !important;
}
html[data-tier="ruby"] .tier-self-ruby-only,
html[data-tier="emerald"] .tier-self-emerald-only,
html[data-tier="diamond"] .tier-self-diamond-only {
  display: block !important;
}

/* ============================================================
   PROGRESSION TIER · acquired / current / locked
   ============================================================
   Applique par tier-theme.js applyTierProgression()
   Logique · l user voit son EVOLUTION (pas le remplacement)
   ============================================================ */

/* Status pastille · Progression.html */
.tier-status-acquired {
  color: #7fd6a8 !important;
  background: rgba(127, 214, 168, 0.14) !important;
  border-color: rgba(127, 214, 168, 0.5) !important;
  font-weight: 600 !important;
  text-shadow: 0 0 8px rgba(127, 214, 168, 0.35);
}
.tier-status-current {
  background: linear-gradient(135deg, rgba(230,184,102,0.2), rgba(255,80,116,0.18)) !important;
  border-color: rgba(230, 184, 102, 0.6) !important;
  color: #fff4d0 !important;
  font-weight: 700 !important;
  text-shadow: 0 0 12px rgba(230, 184, 102, 0.5);
  animation: tierCurrentPulse 2.8s ease-in-out infinite;
}
.tier-status-locked {
  color: rgba(207, 234, 255, 0.5) !important;
  background: rgba(20, 12, 8, 0.4) !important;
  border-color: rgba(207, 234, 255, 0.2) !important;
  font-weight: 500 !important;
}
@keyframes tierCurrentPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(230,184,102,0.3); }
  50%      { box-shadow: 0 0 16px rgba(230,184,102,0.55); }
}

/* Carte tier (article.tier-card) · acquired/current/locked */
article.tier-card.tier-acquired {
  position: relative;
  border-color: rgba(127, 214, 168, 0.5) !important;
  box-shadow: 0 0 22px rgba(127, 214, 168, 0.18), inset 0 0 30px rgba(127, 214, 168, 0.06) !important;
}
article.tier-card.tier-acquired::before {
  content: '✓';
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #b8ecd0, #2fb56a);
  color: #0a2e1c;
  font-weight: 800;
  font-size: 16px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(47, 181, 106, 0.45), 0 0 18px rgba(127, 214, 168, 0.4);
  z-index: 5;
  letter-spacing: 0;
}

article.tier-card.tier-current {
  border-color: rgba(230, 184, 102, 0.7) !important;
  box-shadow: 0 0 30px rgba(230, 184, 102, 0.32), inset 0 0 36px rgba(230, 184, 102, 0.08) !important;
  transform: translateY(-2px);
  transition: transform 0.3s, box-shadow 0.3s;
}
/* "Tu es ici" est deja affiche dans le .tier-status badge a droite du titre */
/* On supprime le bandeau ::before qui faisait un gros bloc jaune sur Progression */
article.tier-card.tier-current::before {
  display: none !important;
  content: none !important;
}

article.tier-card.tier-locked {
  opacity: 0.62;
  filter: saturate(0.7);
  transition: opacity 0.3s, filter 0.3s;
}
article.tier-card.tier-locked:hover {
  opacity: 0.88;
  filter: saturate(0.9);
}

/* Ladder XAU33Cash · ld-step acquired / current / locked */
.ld-step.ld-acquired {
  position: relative;
  opacity: 1 !important;
}
.ld-step.ld-acquired .ld-gem svg {
  filter: drop-shadow(0 0 12px rgba(127, 214, 168, 0.5));
}
.ld-step.ld-acquired::after {
  content: '✓';
  position: absolute;
  top: -8px; right: -8px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #b8ecd0, #2fb56a);
  color: #0a2e1c;
  font-weight: 800;
  font-size: 14px;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(47, 181, 106, 0.5);
  z-index: 4;
}
.ld-step.ld-acquired .ld-name {
  color: #7fd6a8 !important;
}

.ld-step.ld-current {
  position: relative;
  opacity: 1 !important;
}
.ld-step.ld-current .ld-gem svg {
  filter: drop-shadow(0 0 18px rgba(230, 184, 102, 0.7));
  animation: ldGemPulse 3s ease-in-out infinite;
}
@keyframes ldGemPulse {
  0%, 100% { filter: drop-shadow(0 0 14px rgba(230,184,102,0.6)); }
  50%      { filter: drop-shadow(0 0 24px rgba(230,184,102,0.85)); }
}

.ld-step.ld-locked {
  opacity: 0.55;
  filter: saturate(0.6);
}
.ld-step.ld-locked .ld-gem svg {
  filter: grayscale(0.4) saturate(0.7);
}

/* Progress bar entre etapes */
.ld-progress {
  background: linear-gradient(90deg, rgba(127, 214, 168, 0.6), rgba(230, 184, 102, 0.8));
  height: 3px;
  transition: width 0.6s ease-out;
  box-shadow: 0 0 12px rgba(230, 184, 102, 0.4);
}

/* ============================================================
   Dashboard.html · .tier-cell acquired / current / locked
   ============================================================ */
.tier-cell {
  position: relative;
}
.tier-cell.tier-cell-acquired {
  border-color: rgba(127, 214, 168, 0.55) !important;
  box-shadow: 0 0 22px rgba(127, 214, 168, 0.18) !important;
}
.tier-cell.tier-cell-acquired::after {
  content: '✓';
  position: absolute;
  top: 8px; right: 8px;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #b8ecd0, #2fb56a);
  color: #0a2e1c;
  font-weight: 800;
  font-size: 14px;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(47, 181, 106, 0.5);
  z-index: 4;
}
.tier-cell.tier-cell-acquired .tb {
  background: rgba(127, 214, 168, 0.18) !important;
  border: 1px solid rgba(127, 214, 168, 0.55) !important;
  color: #7fd6a8 !important;
  font-weight: 700;
}

.tier-cell.tier-cell-current {
  border-color: rgba(230, 184, 102, 0.7) !important;
  box-shadow: 0 0 28px rgba(230, 184, 102, 0.28) !important;
  transform: translateY(-2px);
  transition: transform 0.3s, box-shadow 0.3s;
}
.tier-cell.tier-cell-current::before {
  content: '◆ Tu es ici';
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  padding: 3px 12px;
  background: linear-gradient(135deg, #fff4d0, #e6b866);
  color: #0a0500;
  font-family: 'Cinzel', serif;
  font-weight: 700;
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-radius: 14px;
  box-shadow: 0 3px 12px rgba(230, 184, 102, 0.5);
  z-index: 5;
  white-space: nowrap;
  max-width: 110px;
  width: max-content;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tier-cell.tier-cell-current .tb {
  background: linear-gradient(135deg, rgba(230,184,102,0.2), rgba(255,80,116,0.15)) !important;
  border: 1px solid rgba(230, 184, 102, 0.6) !important;
  color: #fff4d0 !important;
  font-weight: 700;
}

.tier-cell.tier-cell-locked {
  opacity: 0.65;
  filter: saturate(0.7);
  transition: opacity 0.3s, filter 0.3s;
}
.tier-cell.tier-cell-locked:hover {
  opacity: 0.92;
  filter: saturate(0.95);
}

/* ============================================================
   PROTECTION COULEURS NATIVES DES TIER-CELLS
   ============================================================
   IMPORTANT · les tier-cells doivent toujours afficher leur
   couleur d'origine (SAPPHIRE=bleu, RUBY=rouge, EMERALD=vert,
   DIAMOND=blanc) meme quand le user est sur un autre tier.
   Le bug : --sapphire-1 etait override en rose RUBY ce qui
   colorait aussi le titre des tier-cells SAPPHIRE en rose.
   ============================================================ */
html[data-tier="ruby"] .tier-cell.sapphire .tn,
html[data-tier="emerald"] .tier-cell.sapphire .tn,
html[data-tier="diamond"] .tier-cell.sapphire .tn,
html[data-tier="ruby"] .tier-card.tier-sapphire .tier-name,
html[data-tier="emerald"] .tier-card.tier-sapphire .tier-name,
html[data-tier="diamond"] .tier-card.tier-sapphire .tier-name {
  color: #8ab8ff !important;
}
html[data-tier="sapphire"] .tier-cell.ruby .tn,
html[data-tier="emerald"] .tier-cell.ruby .tn,
html[data-tier="diamond"] .tier-cell.ruby .tn,
html[data-tier="sapphire"] .tier-card.tier-ruby .tier-name,
html[data-tier="emerald"] .tier-card.tier-ruby .tier-name,
html[data-tier="diamond"] .tier-card.tier-ruby .tier-name {
  color: #ff8a9a !important;
}
html[data-tier="sapphire"] .tier-cell.emerald .tn,
html[data-tier="ruby"] .tier-cell.emerald .tn,
html[data-tier="diamond"] .tier-cell.emerald .tn,
html[data-tier="sapphire"] .tier-card.tier-emerald .tier-name,
html[data-tier="ruby"] .tier-card.tier-emerald .tier-name,
html[data-tier="diamond"] .tier-card.tier-emerald .tier-name {
  color: #7fd6a8 !important;
}
html[data-tier="sapphire"] .tier-cell.diamond .tn,
html[data-tier="ruby"] .tier-cell.diamond .tn,
html[data-tier="emerald"] .tier-cell.diamond .tn,
html[data-tier="sapphire"] .tier-card.tier-diamond .tier-name,
html[data-tier="ruby"] .tier-card.tier-diamond .tier-name,
html[data-tier="emerald"] .tier-card.tier-diamond .tier-name {
  color: #d8e8ff !important;
}

/* SVG gems dans les tier-cells · garder leurs couleurs natives */
.tier-cell.sapphire svg path[fill*="#3c86ff"],
.tier-cell.sapphire svg stop[stop-color="#3c86ff"] {
  fill: #3c86ff !important;
  stop-color: #3c86ff !important;
}

/* Fix bloc jaune Progression · forcer position:relative sur tier-card */
article.tier-card {
  position: relative !important;
  overflow: visible !important;
}
article.tier-card.tier-current::before {
  max-width: 200px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Badge "Mon Accès" couleur tier */
html[data-tier="ruby"] #xau-access-badge.state-calm {
  border-color: rgba(255,138,154,0.5) !important;
  color: #ffd0d6 !important;
  background: linear-gradient(135deg,rgba(40,8,12,0.5),rgba(20,8,12,0.4)) !important;
}
html[data-tier="ruby"] #xau-access-badge.state-calm .xab-eye {
  color: #ff8a9a !important;
}
html[data-tier="ruby"] #xau-access-badge.state-calm .xab-eye::before {
  background: #ff6a7a !important;
  box-shadow: 0 0 6px #ff6a7a !important;
}
html[data-tier="ruby"] #xau-access-badge.state-calm .xab-time {
  color: #ffd0d6 !important;
}
html[data-tier="emerald"] #xau-access-badge.state-calm {
  border-color: rgba(127,214,168,0.5) !important;
  color: #b8ecd0 !important;
  background: linear-gradient(135deg,rgba(10,74,42,0.4),rgba(8,40,20,0.3)) !important;
}
html[data-tier="emerald"] #xau-access-badge.state-calm .xab-eye {
  color: #7fd6a8 !important;
}
html[data-tier="emerald"] #xau-access-badge.state-calm .xab-eye::before {
  background: #2fb56a !important;
  box-shadow: 0 0 6px #2fb56a !important;
}
html[data-tier="emerald"] #xau-access-badge.state-calm .xab-time {
  color: #b8ecd0 !important;
}

/* ============================================================
   BANDEAU MOBILE EN HAUT · #xau-access-topbar-mobile · couleur tier
   ============================================================ */
html[data-tier="ruby"] #xau-access-topbar-mobile,
html[data-tier="ruby"] #xau-access-topbar-mobile.state-calm {
  background: linear-gradient(90deg, rgba(40,8,12,0.95), rgba(20,8,12,0.92), rgba(40,8,12,0.95)) !important;
  border-bottom-color: rgba(255,138,154,0.5) !important;
}
html[data-tier="ruby"] #xau-access-topbar-mobile .xatm-icon,
html[data-tier="ruby"] #xau-access-topbar-mobile .xatm-arrow {
  color: #ff8a9a !important;
}
html[data-tier="ruby"] #xau-access-topbar-mobile .xatm-text {
  color: #ffd0d6 !important;
}
html[data-tier="ruby"] #xau-access-topbar-mobile .xatm-text b {
  color: #fff !important;
}

html[data-tier="emerald"] #xau-access-topbar-mobile,
html[data-tier="emerald"] #xau-access-topbar-mobile.state-calm {
  background: linear-gradient(90deg, rgba(10,74,42,0.95), rgba(8,40,20,0.92), rgba(10,74,42,0.95)) !important;
  border-bottom-color: rgba(127,214,168,0.5) !important;
}
html[data-tier="emerald"] #xau-access-topbar-mobile .xatm-icon,
html[data-tier="emerald"] #xau-access-topbar-mobile .xatm-arrow {
  color: #7fd6a8 !important;
}
html[data-tier="emerald"] #xau-access-topbar-mobile .xatm-text {
  color: #b8ecd0 !important;
}
html[data-tier="emerald"] #xau-access-topbar-mobile .xatm-text b {
  color: #fff !important;
}

html[data-tier="diamond"] #xau-access-topbar-mobile,
html[data-tier="diamond"] #xau-access-topbar-mobile.state-calm {
  background: linear-gradient(90deg, rgba(40,52,70,0.95), rgba(20,28,40,0.92), rgba(40,52,70,0.95)) !important;
  border-bottom-color: rgba(216,232,255,0.5) !important;
}
html[data-tier="diamond"] #xau-access-topbar-mobile .xatm-icon,
html[data-tier="diamond"] #xau-access-topbar-mobile .xatm-arrow {
  color: #d8e8ff !important;
}
html[data-tier="diamond"] #xau-access-topbar-mobile .xatm-text {
  color: #ffffff !important;
}

/* ============================================================
   ruby-ext perks (XAUTrade fin de page) · DEBLOQUE pour RUBY+
   ============================================================ */
html[data-tier="ruby"] .ruby-ext .re-card.locked,
html[data-tier="emerald"] .ruby-ext .re-card.locked,
html[data-tier="diamond"] .ruby-ext .re-card.locked,
html[data-tier="ruby"] .ruby-ext .re-card.re-blurred,
html[data-tier="emerald"] .ruby-ext .re-card.re-blurred,
html[data-tier="diamond"] .ruby-ext .re-card.re-blurred {
  opacity: 1 !important;
  filter: none !important;
}
html[data-tier="ruby"] .ruby-ext .re-card .re-blur-content,
html[data-tier="emerald"] .ruby-ext .re-card .re-blur-content,
html[data-tier="diamond"] .ruby-ext .re-card .re-blur-content {
  filter: none !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  user-select: auto !important;
}
html[data-tier="ruby"] .ruby-ext .re-card .re-tease-overlay,
html[data-tier="emerald"] .ruby-ext .re-card .re-tease-overlay,
html[data-tier="diamond"] .ruby-ext .re-card .re-tease-overlay {
  display: none !important;
}

/* ============================================================
   SIDEBAR MOBILE MENU · #xau-mobile-menu .xmm-tier
   Couleur tier (badge "NIVEAU ACTUEL" en bleu par defaut)
   ============================================================ */
html[data-tier="ruby"] #xau-mobile-menu .xmm-tier {
  background: linear-gradient(135deg, rgba(255,80,116,0.18), rgba(90,10,24,0.35)) !important;
  border-color: rgba(255,138,154,0.55) !important;
}
html[data-tier="ruby"] #xau-mobile-menu .xmm-tier .lvl {
  color: #ff8a9a !important;
}
html[data-tier="ruby"] #xau-mobile-menu .xmm-tier .tier-name {
  color: #ffd0d6 !important;
  text-shadow: 0 0 12px rgba(255,138,154,0.4) !important;
}

html[data-tier="emerald"] #xau-mobile-menu .xmm-tier {
  background: linear-gradient(135deg, rgba(47,181,106,0.18), rgba(10,74,42,0.35)) !important;
  border-color: rgba(127,214,168,0.55) !important;
}
html[data-tier="emerald"] #xau-mobile-menu .xmm-tier .lvl {
  color: #7fd6a8 !important;
}
html[data-tier="emerald"] #xau-mobile-menu .xmm-tier .tier-name {
  color: #b8ecd0 !important;
  text-shadow: 0 0 12px rgba(127,214,168,0.4) !important;
}

html[data-tier="diamond"] #xau-mobile-menu .xmm-tier {
  background: linear-gradient(135deg, rgba(216,232,255,0.18), rgba(112,128,160,0.35)) !important;
  border-color: rgba(255,255,255,0.55) !important;
}
html[data-tier="diamond"] #xau-mobile-menu .xmm-tier .lvl {
  color: #d8e8ff !important;
}
html[data-tier="diamond"] #xau-mobile-menu .xmm-tier .tier-name {
  color: #ffffff !important;
  text-shadow: 0 0 12px rgba(216,232,255,0.5) !important;
}

/* ============================================================
   MODAL "Mon Acces" · couleur tier sur les valeurs (cadre interne)
   ============================================================ */
html[data-tier="ruby"] #xau-access-modal .xam-counter-val,
html[data-tier="ruby"] #xau-access-modal .xam-h em {
  color: #ff8a9a !important;
  background: none !important;
  -webkit-text-fill-color: #ff8a9a !important;
}
html[data-tier="ruby"] #xau-access-modal .xam-counter-lbl {
  color: #ff8a9a !important;
}
html[data-tier="ruby"] #xau-access-modal .xam-counter {
  border-color: rgba(255,138,154,0.4) !important;
  background: rgba(40,8,12,0.5) !important;
}
html[data-tier="emerald"] #xau-access-modal .xam-counter-val,
html[data-tier="emerald"] #xau-access-modal .xam-h em {
  color: #7fd6a8 !important;
  -webkit-text-fill-color: #7fd6a8 !important;
}
html[data-tier="emerald"] #xau-access-modal .xam-counter-lbl {
  color: #7fd6a8 !important;
}
html[data-tier="emerald"] #xau-access-modal .xam-counter {
  border-color: rgba(127,214,168,0.4) !important;
  background: rgba(10,74,42,0.4) !important;
}
html[data-tier="diamond"] #xau-access-modal .xam-counter-val,
html[data-tier="diamond"] #xau-access-modal .xam-h em {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}
html[data-tier="ruby"] .ruby-ext .re-card.locked .re-lock,
html[data-tier="emerald"] .ruby-ext .re-card.locked .re-lock,
html[data-tier="diamond"] .ruby-ext .re-card.locked .re-lock {
  color: #7fd6a8 !important;
  border-color: #7fd6a8 !important;
}
html[data-tier="ruby"] .ruby-ext .re-card.locked .re-tease-overlay,
html[data-tier="emerald"] .ruby-ext .re-card.locked .re-tease-overlay,
html[data-tier="diamond"] .ruby-ext .re-card.locked .re-tease-overlay {
  display: none !important;
}
html[data-tier="ruby"] .ruby-ext .re-card.locked .re-blur-content,
html[data-tier="emerald"] .ruby-ext .re-card.locked .re-blur-content,
html[data-tier="diamond"] .ruby-ext .re-card.locked .re-blur-content {
  filter: none !important;
  pointer-events: auto !important;
}