.conta-wrap { padding: 40px 0 96px; }
.mono { font-family: var(--font-mono); }

/* ===== Banner de perfil ===== */
.profile-banner { display: block; }

/* A caixa única (foto+badges | boas-vindas | apoiar criador), com o
   rótulo do Nitro Booster numa faixa própria embaixo de tudo — antes
   eram 3 caixas separadas, mas ficava com efeito visual "picotado".
   Reaproveita a mesma sombra/borda que já existia, só que agora
   envolvendo o conjunto inteiro. */
.profile-merged-card {
  background: linear-gradient(115deg, rgba(184,35,47,0.14) 0%, rgba(184,35,47,0.05) 35%, transparent 60%), var(--panel);
  border: 1px solid var(--iron-dim); border-radius: 6px;
  padding: 40px 36px; position: relative; transition: border-color 0.3s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  display: flex; flex-direction: column;
}
.profile-merged-columns {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: 32px;
  align-items: center; align-content: center;
}
.profile-col-main { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.profile-main-row { display: flex; align-items: center; justify-content: center; gap: 16px; }
.profile-col-photo {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; flex-shrink: 0;
  position: relative; top: 14px;
}
.profile-col-support { align-self: center; padding-left: 32px; border-left: 1px solid rgba(226,50,63,0.25); }

.support-streamer-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.support-streamer-icon {
  width: 34px; height: 34px; flex-shrink: 0; color: var(--ember-bright);
  display: flex; align-items: center; justify-content: center;
  background: rgba(226,50,63,0.15); border: 1px solid rgba(226,50,63,0.32); border-radius: 8px;
}
.support-streamer-icon .icon { width: 18px; height: 18px; }
.support-streamer-head h2 { font-family: var(--font-display); font-size: 1.05rem; margin: 0; }

.support-streamer-status {
  font-size: 0.82rem; color: var(--bone-dim); margin: 0 0 14px;
}
.support-streamer-status strong { color: var(--bone); }

.support-streamer-label { display: block; font-size: 0.78rem; color: var(--bone-dim); font-weight: 600; margin-bottom: 6px; }
.support-streamer-label .pix-copy-row { margin-top: 8px; }

/* Anel de brilho vermelho ao redor do avatar (sempre visível). */
.profile-avatar-wrap { position: relative; flex-shrink: 0; }
.profile-avatar-wrap::after {
  content: ''; position: absolute; inset: -5px; border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(226,50,63,0.25), 0 0 14px 1px rgba(226,50,63,0.28);
  pointer-events: none;
}

/* Efeito de quem tá dando boost — borda com gradiente animado (no
   mesmo espírito do que o próprio Discord faz com booster), mais um
   brilho pulsante ao redor da caixa toda pra ficar bem vivo. Usa um
   pseudo-elemento próprio (::before) pra fazer a borda, em vez de
   mexer na propriedade "background" do card — assim o gradiente
   vermelho de fundo continua aparecendo normalmente por baixo, os
   dois efeitos convivem juntos. inset:0 (em vez de -1px) pra não
   sobrar nenhuma sobra sendo cortada pelo overflow:hidden do brilho
   deslizante, que causava uma linha escura na lateral direita. */
.profile-merged-card.is-booster {
  border: 1px solid transparent;
}
.profile-merged-card.is-booster::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: linear-gradient(120deg, #7289da, #ff73fa, #b98eff, #7289da);
  background-size: 300% 300%;
  animation: boosterShimmer 6s ease infinite, boosterGlow 3s ease-in-out infinite;
}
@keyframes boosterShimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes boosterGlow {
  0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,0.25), 0 0 18px rgba(114,137,218,0.25); }
  50% { box-shadow: 0 8px 24px rgba(0,0,0,0.25), 0 0 30px rgba(255,115,250,0.4); }
}

/* Brilho deslizando pela caixa de tempos em tempos — fica isolado
   numa camada própria (sem imagem de fundo), com overflow:hidden só
   nela, em vez de no card inteiro. Botar overflow:hidden direto no
   card (que tem imagem de fundo) causava uma linha de serrilhado
   visível na borda direita em alguns navegadores. */
.booster-shine {
  position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; display: none;
}
.profile-merged-card.is-booster .booster-shine { display: block; }
.booster-shine::after {
  content: ''; position: absolute; top: 0; left: -100%; width: 70%; height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.02) 35%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.02) 65%, transparent 100%);
  filter: blur(16px);
  animation: boosterShine 11s ease-in-out infinite;
}
@keyframes boosterShine {
  0% { left: -100%; }
  100% { left: 130%; }
}

.profile-avatar { width: 150px; height: 150px; border-radius: 50%; border: 3px solid var(--ember); display: block; }
.profile-badges-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; }

/* ID + Discord + Nitro Booster, empilhados abaixo da linha foto+bem-vindo,
   dentro da mesma coluna principal (sem footer separado). */
.profile-footer-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 6px 10px; margin-top: 14px; }
.profile-id { font-size: 0.78rem; color: var(--bone-dim); line-height: 1.4; }
.profile-id::after { content: '•'; margin-left: 10px; color: var(--iron-dim); }
.profile-connected { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 0.78rem; color: var(--bone-dim); line-height: 1.4; text-align: center; }
.discord-icon { width: 15px; height: 15px; flex-shrink: 0; object-fit: contain; }

.welcome-block {
  padding: 6px 28px 0; display: flex; flex-direction: column; justify-content: center; align-self: stretch;
}
/* "BEM-VINDO DE VOLTA," pequeno e discreto, o nome bem maior e em
   destaque — antes os dois usavam o mesmo tamanho de fonte. */
.welcome-block .welcome-small { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; color: var(--bone-dim); }
.welcome-block #pf-welcome-name { font-size: clamp(2rem, 4vw, 2.8rem); }

/* Nível/XP — puramente visual/status por enquanto (só número, sem
   título temático), separado do tier de gasto (badge dourado ao lado
   do avatar) e do selo de booster. */
.pf-level-row { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; flex-wrap: wrap; }
.pf-level-badge {
  font-family: var(--font-display); font-weight: 700; font-size: 0.86rem; color: var(--gold-bright);
  background: rgba(209,162,79,0.14); border: 1px solid var(--gold-dim); border-radius: 999px;
  padding: 3px 12px; white-space: nowrap;
}
.pf-level-bar-wrap { flex: 1; min-width: 100px; max-width: 220px; height: 8px; background: var(--void); border: 1px solid var(--iron-dim); border-radius: 999px; overflow: hidden; }
.pf-level-bar-fill { height: 100%; background: linear-gradient(90deg, var(--ember), var(--gold-bright)); border-radius: 999px; transition: width 0.4s ease; width: 0%; }
.pf-level-xp-label { font-family: var(--font-mono); font-size: 0.74rem; color: var(--bone-dim); white-space: nowrap; }

.badge {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
}
.badge-active { background: rgba(184,35,47,0.18); color: var(--ember-text); border: 1px solid var(--ember-deep); }
.badge-delivered, .badge-entregue { background: var(--good-bg); color: var(--good); }
.badge-pending, .badge-approved, .badge-pendente { background: var(--warn-bg); color: var(--warn); }
.badge-cancelled { background: rgba(224,138,125,0.16); color: #e08a7d; }

/* ===== Stats ===== */
.stats-section { margin: 36px 0; }
.stats-title { font-family: var(--font-display); font-size: 1.05rem; display: flex; align-items: center; gap: 10px; margin: 0 0 16px; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
.stat-card {
  background: var(--panel); border: 1px solid var(--iron-dim); border-radius: 4px;
  padding: 18px 20px; display: flex; align-items: center; gap: 14px;
}
/* Mesmo ajuste do admin: dourado como padrão neutro, não vermelho fixo
   — o ícone de "Pedidos realizados" (mochila) não tem nada de alerta
   pra justificar vermelho, e os outros já têm cor própria sobrescrita
   direto no HTML (verde/âmbar/vermelho conforme o status de verdade). */
.stat-icon { width: 26px; height: 26px; color: var(--gold-bright); flex-shrink: 0; }
.stat-value { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 500; line-height: 1; }
.stat-label { font-size: 0.76rem; color: var(--bone-dim); margin-top: 4px; }

/* ===== Privacidade ===== */
.privacy-section {
  margin: 24px 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  align-items: stretch; /* os dois cartões ficam com a mesma altura, mesmo se um tiver texto mais longo que o outro */
}
@media (max-width: 640px) {
  .privacy-section { grid-template-columns: minmax(0, 1fr); }
}
.toggle-row {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: var(--panel); border: 1px solid var(--iron-dim); border-radius: 5px;
  padding: 16px 20px; cursor: pointer;
}
.toggle-row-title { font-weight: 600; font-size: 0.92rem; }
.toggle-row-sub { font-size: 0.76rem; color: var(--bone-dim); margin-top: 3px; }
.toggle-row-sub a { color: var(--gold-bright); }

/* ===== Perfil público ===== */
.public-profile-section { margin: 28px 0; background: var(--panel); border: 1px solid var(--iron-dim); border-radius: 6px; padding: 20px 24px; }
.public-profile-link-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
#public-profile-link { color: var(--gold-bright); font-size: 0.86rem; word-break: break-all; }
.public-profile-slug-form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.public-profile-slug-form label { flex: 1; min-width: 220px; font-size: 0.8rem; color: var(--bone-dim); }
.public-profile-slug-form input {
  display: block; width: 100%; margin-top: 6px; background: var(--void); border: 1px solid var(--iron-dim);
  color: var(--bone); padding: 9px 12px; border-radius: 5px; font-family: var(--font-mono); font-size: 0.86rem;
}

/* ===== Segurança (2FA, admin) — mesmo cartão de .public-profile-section,
   com regras próprias só pro que é específico daqui (QR code, lista de
   códigos de backup, linha de ação com confirmação inline). */
.security-section { margin: 28px 0; background: var(--panel); border: 1px solid var(--iron-dim); border-radius: 6px; padding: 20px 24px; }
.security-section-title { display: flex; align-items: center; gap: 10px; }
.security-2fa-qrcode {
  display: block; width: 180px; height: 180px; margin: 14px auto; background: #fff; padding: 8px; border-radius: 6px;
}
.security-2fa-secret-row { text-align: center; margin-bottom: 16px; }
.security-2fa-confirm-input {
  display: block; width: 100%; max-width: 220px; margin: 6px auto 0; background: var(--void); border: 1px solid var(--iron-dim);
  color: var(--bone); padding: 11px 13px; border-radius: 5px; font-family: var(--font-mono); font-size: 1rem;
  text-align: center; letter-spacing: 0.3em;
}
.security-2fa-confirm-box .pix-copy-row { max-width: 280px; margin: 6px auto 0; }
.security-2fa-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.security-backup-codes {
  background: var(--void); border: 1px solid var(--iron-dim); border-radius: 6px;
  padding: 14px 16px; margin: 12px 0 16px; line-height: 2;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 4px 16px;
}
.security-2fa-enabled-row { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.security-2fa-enabled-row .icon { width: 16px; height: 16px; color: var(--gold-text); flex-shrink: 0; }
.security-2fa-links { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 4px; }
.security-2fa-confirm-box { margin-bottom: 16px; padding-top: 16px; border-top: 1px solid var(--iron-dim); }
.security-2fa-confirm-box label { display: block; font-size: 0.8rem; color: var(--bone-dim); text-align: center; }

/* ===== Badges ===== */
.badges-section { margin: 28px 0; }
.badges-section-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }

/* Contagem geral (X/Y desbloqueadas) com barrinha fina — resposta
   imediata de "quanto falta no total" antes mesmo de rolar a grade. */
.badges-overview { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.badges-overview-count { font-family: var(--font-mono); font-size: 0.78rem; color: var(--gold-text); white-space: nowrap; }
.badges-overview-bar { width: 110px; height: 6px; background: var(--void); border: 1px solid var(--iron-dim); border-radius: 999px; overflow: hidden; }
.badges-overview-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--ember), var(--gold-bright)); border-radius: 999px; transition: width 0.3s ease; }

/* Card "Quase lá" — a badge automática mais perto de desbloquear, em
   destaque no topo, pra sempre ter UM próximo passo óbvio em vez da
   pessoa ter que garimpar a grade inteira atrás do que já está quase
   pronto. Borda em gradiente (via padding-box/border-box) em vez de
   borda sólida pra não competir com o dourado que já marca badge fixada
   logo abaixo. */
.badges-spotlight {
  display: flex; align-items: center; gap: 16px; margin-bottom: 18px; padding: 16px 18px;
  border-radius: 10px; background: linear-gradient(rgba(43,43,48,0.94), rgba(43,43,48,0.94)) padding-box,
    linear-gradient(120deg, var(--gold), var(--ember)) border-box;
  border: 1px solid transparent;
}
.badges-spotlight-icon {
  width: 52px; height: 52px; flex-shrink: 0; border-radius: 50%; background: var(--void);
  border: 1px solid var(--gold-dim); display: flex; align-items: center; justify-content: center; color: var(--gold-bright);
  overflow: hidden;
}
.badges-spotlight-icon img { width: 100%; height: 100%; object-fit: cover; }
.badges-spotlight-icon .icon { width: 26px; height: 26px; }
.badges-spotlight-body { flex: 1; min-width: 0; }
.badges-spotlight-eyebrow {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-bright); margin-bottom: 2px;
}
.badges-spotlight-name { font-family: var(--font-display, var(--font-body)); font-weight: 700; font-size: 1rem; margin-bottom: 2px; }
.badges-spotlight-action { font-size: 0.82rem; color: var(--bone-dim); margin-bottom: 8px; }
.badges-spotlight .badge-progress-wrap { max-width: 320px; }

/* Filtro por status — mesmo visual dos chips de categoria do "monte seu
   kit" (.kb-category-tab), reaproveitado aqui pra manter uma linguagem
   só de filtro no site inteiro. */
.badges-filter-chips { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 18px; }
.badge-filter-chip {
  background: var(--void); border: 1px solid var(--iron-dim); color: var(--bone-dim); padding: 6px 14px;
  border-radius: 999px; font-size: 0.78rem; font-weight: 600; cursor: pointer; font-family: inherit;
}
.badge-filter-chip:hover { border-color: var(--gold-dim); color: var(--bone); }
.badge-filter-chip.active { background: rgba(209,162,79,0.14); border-color: var(--gold); color: var(--gold-bright); }
.badges-toggle-all-btn { margin-left: auto; }

/* Categorias — <details>/<summary> nativo (mesmo padrão do acordeão de
   FAQ em .faq-item): cada categoria recolhe sozinha, sem precisar
   redesenhar a lista inteira a cada clique (perderia a posição do
   scroll) nem guardar estado em JS. Com 40+ badges espalhadas em 11
   categorias, a lista inteira aberta de uma vez ficava enorme — por
   padrão só abre quem já tem algo desbloqueado (ver defaultOpen em
   preferencias.js); o resto fica fechado até a pessoa clicar. */
.badge-category-group { margin-bottom: 10px; }
.badge-category-group:last-child { margin-bottom: 0; }
.badge-category-group[open] { margin-bottom: 22px; }
.badge-category-head {
  display: flex; align-items: center; gap: 8px; font-size: 0.82rem; font-weight: 700; color: var(--bone);
  letter-spacing: 0.01em; padding: 8px 2px; border-bottom: 1px solid var(--iron-dim);
  cursor: pointer; list-style: none; user-select: none;
}
.badge-category-head::-webkit-details-marker { display: none; }
.badge-category-head:hover { color: var(--gold-bright); }
.badge-category-head .icon { width: 15px; height: 15px; color: var(--gold-text); flex-shrink: 0; }
.badge-category-count { font-family: var(--font-mono); font-weight: 600; color: var(--bone-dim); margin-left: auto; }
.badge-category-head .icon.badge-category-chevron { width: 13px; height: 13px; color: var(--bone-dim); transition: transform 0.15s ease; }
.badge-category-group[open] > .badge-category-head .icon.badge-category-chevron { transform: rotate(90deg); }
.badge-category-group .badges-grid { margin-top: 12px; }

/* Zona de perigo (exclusão de conta) — borda vermelha sutil, separa
   visualmente de "coisas normais" acima, mas sem ficar alarmista
   demais (a pessoa pode só estar lendo, não necessariamente prestes a
   clicar em nada). */
.danger-zone-section {
  margin: 28px 0; padding: 20px; border: 1px solid rgba(184,35,47,0.35); border-radius: 8px;
  background: rgba(184,35,47,0.04);
}
.danger-zone-title { color: #e08a7d; }
.danger-zone-section .field-hint { margin-bottom: 14px; }
.danger-zone-section #deletion-idle-state .field-hint:last-of-type { margin-bottom: 18px; }
.badges-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; margin-bottom: 14px; }
.badge-select-card {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--iron-dim); border-radius: 8px; padding: 14px 8px; cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  color: var(--bone); font-family: var(--font-body); /* <button> não herda cor/fonte do body sozinho — sem isso, o nome da badge ficava preto (cor padrão de botão do navegador) */
  position: relative; overflow: hidden;
}
.badge-select-card.owned:hover { border-color: var(--gold-dim); }
.badge-select-card.pinned { border-color: var(--gold); background: rgba(209,162,79,0.08); }
.badge-select-card.locked { opacity: 0.4; cursor: not-allowed; }
.badge-select-icon {
  width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--bone-dim); position: relative; overflow: hidden;
}
.badge-select-icon .icon { width: 26px; height: 26px; }
.badge-select-icon img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.badge-select-card.locked .badge-select-icon .icon { width: 20px; height: 20px; }
.badge-select-name { font-size: 0.74rem; font-weight: 600; line-height: 1.3; }
.badge-select-card.bronze .badge-select-icon { color: #c98a5c; filter: drop-shadow(0 0 5px rgba(169,113,74,0.4)); }
.badge-select-card.silver .badge-select-icon { color: #c3cad1; filter: drop-shadow(0 0 5px rgba(154,163,173,0.4)); }
.badge-select-card.gold .badge-select-icon { color: var(--gold-bright); filter: drop-shadow(0 0 5px rgba(209,162,79,0.45)); }
.badge-select-card.locked .badge-select-icon { filter: none; }

/* Marco único (concessão manual) desbloqueado — efeito bem mais forte
   que os degraus normais: glow pulsando entre duas cores quentes, e
   uma luz deslizando por cima do ícone de tempos em tempos. Sem borda
   desenhada — as imagens de badge já vêm com moldura própria, uma
   borda de CSS por cima ficava desalinhada com a arte. Mesmo espírito
   visual do perfil público. */
.badge-select-card.legendary { animation: badgeLegendaryGlow 3s ease-in-out infinite; }
@keyframes badgeLegendaryGlow {
  0%, 100% { box-shadow: 0 0 10px rgba(255,179,71,0.25); }
  50% { box-shadow: 0 0 18px rgba(255,95,109,0.4); }
}
.badge-select-card.legendary .badge-select-icon {
  color: #ffd27a;
  animation: badgeLegendaryIconGlow 3s ease-in-out infinite;
}
@keyframes badgeLegendaryIconGlow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(255,179,71,0.55)); }
  50% { filter: drop-shadow(0 0 14px rgba(255,95,109,0.65)); }
}
.badge-select-card.legendary .badge-select-name { color: #ffd27a; }
/* A luz deslizando usa a PRÓPRIA imagem da badge como máscara (via
   style inline, ver renderBadgesGrid em preferencias.js) — só aparece
   por cima de pixel opaco, nunca vaza pro fundo transparente ao redor
   da moldura. Sem imagem (ícone genérico), cai pro brilho sem máscara. */
.perfil-badge-shine {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit;
  -webkit-mask-size: cover; mask-size: cover; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.perfil-badge-shine::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.5) 50%, transparent 100%);
  filter: blur(6px);
  animation: badgeShine 4s ease-in-out infinite;
}
@keyframes badgeShine {
  0% { left: -60%; }
  100% { left: 130%; }
}
.badge-progress-wrap { width: 100%; height: 5px; background: var(--void); border: 1px solid var(--iron-dim); border-radius: 999px; overflow: hidden; }
.badge-progress-fill { height: 100%; background: linear-gradient(90deg, var(--ember), var(--gold-bright)); border-radius: 999px; }
.badge-progress-label { font-family: var(--font-mono); font-size: 0.72rem; color: var(--bone-dim); }
/* A frase de ação ("Faltam R$ 42,00 em compras") é a resposta direta a
   "o que eu preciso fazer" — vem ANTES da barra, em destaque, com a
   fração crua (.badge-progress-label logo abaixo da barra) só como
   detalhe secundário pra quem quiser o número exato. */
.badge-action-label { font-size: 0.72rem; font-weight: 600; color: var(--gold-text); line-height: 1.25; margin-bottom: 2px; }
.badge-unlocked-date { font-family: var(--font-mono); font-size: 0.68rem; color: var(--bone-dim); }
.badges-pin-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider {
  position: absolute; inset: 0; background: var(--iron-dim); border: 1px solid var(--iron);
  border-radius: 999px; transition: background 0.15s ease;
}
.switch-slider::before {
  content: ''; position: absolute; width: 18px; height: 18px; left: 2px; top: 2px;
  background: var(--bone); border-radius: 50%; transition: transform 0.15s ease;
}
.switch input:checked + .switch-slider { background: var(--ember); border-color: var(--ember); }
.switch input:checked + .switch-slider::before { transform: translateX(18px); }

/* ===== Cashback ===== */
.cashback-section { margin: 24px 0; }
.balances-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 640px) { .balances-grid { grid-template-columns: minmax(0, 1fr); } }

/* ===== Loja de pontos de lealdade ===== */
.loyalty-section { margin: 24px 0; background: var(--panel); border: 1px solid var(--iron-dim); border-radius: 10px; padding: 22px; }
.loyalty-header { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }

.loyalty-header-icon {
  width: 42px; height: 42px; border-radius: 10px; background: rgba(209,162,79,0.14); border: 1px solid var(--gold-dim);
  display: flex; align-items: center; justify-content: center; color: var(--gold-bright); flex-shrink: 0;
}
.loyalty-header-icon .icon { width: 20px; height: 20px; }
.loyalty-header h2 { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 2px; }
.loyalty-header p { font-size: 0.8rem; color: var(--bone-dim); margin: 0; }
.loyalty-balance-box { margin-left: auto; text-align: right; }
.loyalty-balance-value { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 700; color: var(--gold-bright); line-height: 1.1; }
.loyalty-balance-label { font-size: 0.72rem; color: var(--bone-dim); text-transform: uppercase; letter-spacing: 0.03em; }

.loyalty-rewards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin-top: 10px; align-items: stretch; }
.loyalty-reward-card {
  background: var(--void); border: 1px solid var(--iron-dim); border-radius: 8px; padding: 16px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.loyalty-reward-icon {
  width: 52px; height: 52px; border-radius: 8px; background: var(--panel); border: 1px solid var(--iron);
  display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 1.5rem;
  position: relative; /* âncora do selo de gênero (.gender-icon é absolute): sem isso ele ia parar no canto da PÁGINA e alargava a tela em 2px */
}
.loyalty-reward-icon .gender-icon { right: 2px; bottom: 2px; }
.loyalty-reward-icon img { width: 100%; height: 100%; object-fit: contain; }
.loyalty-reward-name { font-weight: 600; font-size: 0.9rem; }
.loyalty-reward-desc { font-size: 0.74rem; color: var(--bone-dim); margin: 0; }
/* Rodapé (custo + estoque + botão) empurrado pro final do card — mesma
   técnica da loja padrão (.package-card-footer) — sem isso, o botão
   ficava em alturas diferentes de card pra card, dependendo do tamanho
   da descrição de cada recompensa (algumas tinham descrição de 2-3
   linhas, outras nenhuma), ficando "torto" visualmente na grade. */
.loyalty-reward-footer { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.loyalty-reward-cost { font-family: var(--font-mono); color: var(--gold-bright); font-weight: 600; font-size: 0.95rem; }
.loyalty-reward-stock { font-size: 0.72rem; color: var(--bone-dim); }

.loyalty-reward-btn {
  width: 100%; margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 12px; border-radius: 8px; font-family: inherit; font-size: 0.82rem; font-weight: 600;
  cursor: pointer; border: 1px solid; transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.loyalty-reward-btn .icon { width: 14px; height: 14px; flex-shrink: 0; }
.loyalty-reward-btn:disabled { cursor: default; }

.loyalty-btn-redeem {
  background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%); border-color: var(--gold);
  color: #1a1310; box-shadow: 0 4px 14px rgba(209,162,79,0.28);
}
.loyalty-btn-redeem:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(209,162,79,0.4); }

.loyalty-btn-insufficient {
  background: rgba(224,138,125,0.1); border-color: #8a5636; color: #e0a87d;
}

.loyalty-btn-soldout {
  background: var(--void); border-color: var(--iron-dim); color: var(--bone-dim); opacity: 0.7;
}

/* ===== Sorteios ===== */
.raffles-list { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.raffle-card {
  background: var(--void); border: 1px solid var(--iron-dim); border-radius: 8px; padding: 16px 18px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.raffle-card-info { flex: 1; min-width: 200px; }
.raffle-card-name { font-weight: 700; font-size: 0.95rem; margin: 0 0 3px; }
.raffle-card-prize { color: var(--gold-bright); font-size: 0.86rem; margin: 0 0 4px; }
.raffle-card-desc { font-size: 0.78rem; color: var(--bone-dim); margin: 0 0 6px; }
.raffle-card-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.72rem; color: var(--bone-dim); }
.raffle-card-action { text-align: right; flex-shrink: 0; }
.raffle-entered-badge { font-size: 0.78rem; color: var(--good); display: flex; align-items: center; gap: 6px; }
.raffle-ineligible-note { font-size: 0.72rem; color: var(--bone-dim); max-width: 200px; margin-top: 4px; }

/* Card de benefícios de booster — reaproveita o mesmo visual "Nitro"
   (borda gradiente animada + brilho deslizante) que já existe no card
   do perfil quando a pessoa é booster, só que como seção própria de
   largura cheia em vez de dividir espaço num grid de 2 colunas (que
   deixava a metade da tela vazia com um card só dentro). */
.booster-perks-card {
  position: relative; border-radius: 10px; padding: 20px 24px; margin: 0 0 24px;
  background: var(--panel); border: 1px solid transparent; overflow: hidden;
}
.booster-perks-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1;
  background: linear-gradient(120deg, #7289da, #ff73fa, #b98eff, #7289da);
  background-size: 300% 300%;
  animation: boosterShimmer 6s ease infinite, boosterGlow 3s ease-in-out infinite;
}
.booster-perks-card .booster-shine { display: block; }
.booster-perks-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.booster-perks-icon { width: 60px; height: 60px; background: rgba(185,142,255,0.18); border-color: #b98eff; color: #b98eff; }
/* Precisa de dois seletores de classe (igual ".cashback-icon .icon",
   que já fixa 24px pra TODO ícone dentro de ".cashback-icon") pra ganhar
   na especificidade — com um seletor só, essa regra nunca vencia, então
   o tamanho ficava sempre travado em 24px mesmo mudando o valor aqui. */
.cashback-icon.booster-perks-icon img { width: 28px; height: 28px; }
.booster-perks-chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.booster-perk-chip {
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
  background: rgba(255,255,255,0.04); border: 1px solid var(--iron-dim); border-radius: 8px; padding: 10px 16px;
}
.booster-perk-chip-value { font-family: var(--font-mono); font-size: 1.3rem; font-weight: 600; color: var(--gold-bright); }
.booster-perk-chip-label { font-size: 0.82rem; color: var(--bone-dim); }
.booster-perk-chip-soon { border-style: dashed; opacity: 0.7; }

.booster-perks-status-wrap { position: absolute; top: 16px; right: 20px; display: flex; align-items: center; gap: 10px; }
.booster-perks-status-badge {
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px;
}
.booster-perks-status-active { background: rgba(111,174,90,0.16); color: var(--good); border: 1px solid var(--good); }
.booster-perks-status-inactive { background: rgba(255,255,255,0.05); color: var(--bone-dim); border: 1px solid var(--iron-dim); }
.booster-perk-chip-soon .booster-perk-chip-value { color: var(--bone-dim); }

.booster-perks-cta {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 14px; font-size: 0.82rem;
  background: #b98eff; border-color: #b98eff; color: #1a1425;
}
.booster-perks-cta:hover { background: #a675f5; border-color: #a675f5; }

.raffle-history-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--iron-dim); font-size: 0.84rem; }
.raffle-history-row:last-child { border-bottom: none; }
.raffle-history-avatar { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--iron-dim); }
.cashback-card {
  background: linear-gradient(120deg, rgba(209,162,79,0.16), var(--panel) 60%);
  border: 1px solid var(--gold-dim); border-radius: 5px;
  padding: 20px 24px; display: flex; align-items: center; gap: 16px;
}
.cashback-icon {
  width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
  background: rgba(209,162,79,0.15); border: 1px solid var(--gold-dim);
  display: flex; align-items: center; justify-content: center; color: var(--gold-bright);
}
.cashback-icon .icon { width: 24px; height: 24px; }
.cashback-label { font-size: 0.8rem; color: var(--bone-dim); }
.cashback-value { font-family: var(--font-mono); font-size: 1.6rem; font-weight: 500; color: var(--gold-bright); margin-top: 2px; }

/* Botão de recarregar a carteira — antes era um outline pequeno igual
   qualquer botão secundário da página, meio perdido dentro do card
   dourado de destaque. Ganha o mesmo tratamento "cheio + brilho" do
   botão de comprar pacote (.btn-buy), só que na paleta dourada da
   carteira em vez da ember, pra realmente parecer a ação principal
   daquele card. */
.wallet-topup-btn {
  display: inline-flex; align-items: center; gap: 7px; flex-shrink: 0; margin-left: auto;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  border: 1px solid var(--gold); color: #2a1f0f;
  padding: 10px 18px; font-weight: 700; font-size: 0.82rem; letter-spacing: 0.02em;
  border-radius: 3px; box-shadow: 0 4px 14px rgba(209,162,79,0.35);
  /* "background" fica de fora do transition de propósito: o valor
     normal é um gradiente e o do hover era uma cor sólida, e o
     navegador não sabe interpolar entre os dois tipos — o resultado
     era um frame preto no meio da troca. Trocando pra outro gradiente
     (só os tons invertidos) em vez de cor sólida, a troca fica
     instantânea e sem esse flash. */
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.wallet-topup-btn:hover { background: linear-gradient(180deg, var(--gold), var(--gold-bright)); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(209,162,79,0.45); }
.wallet-topup-btn .icon { width: 15px; height: 15px; flex-shrink: 0; }
@media (max-width: 480px) { .wallet-topup-btn { padding: 9px 14px; font-size: 0.78rem; } }

.cashback-history-scroll { max-height: 500px; overflow-y: auto; padding-right: 12px; }
.cashback-history-row {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--iron-dim); font-size: 0.82rem;
}
.cashback-history-row:last-child { border-bottom: none; }
.cashback-history-date { color: var(--bone-dim); font-size: 0.74rem; }
.cashback-history-amount { font-family: var(--font-mono); font-weight: 600; }
.cashback-history-amount.positive { color: var(--good); }
.cashback-history-amount.negative { color: #e08a7d; }

/* ===== Pedidos ===== */
.orders-section { margin: 40px 0; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }

.orders-table-scroll { max-height: 462px; overflow-y: auto; }
table.orders-table { width: 100%; border-collapse: collapse; font-size: 0.87rem; }
table.orders-table th, table.orders-table td { text-align: left; padding: 12px; border-bottom: 1px solid var(--iron-dim); }
table.orders-table th { color: var(--bone-dim); font-weight: 600; font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; background: var(--void); position: sticky; top: 0; }
table.orders-table tr:hover td { background: var(--panel); }
.order-package-cell { display: flex; align-items: center; gap: 10px; }
.order-icon-chip {
  width: 30px; height: 30px; border-radius: 50%; background: var(--panel-raised); border: 1px solid var(--iron);
  display: flex; align-items: center; justify-content: center; color: var(--ember-bright); flex-shrink: 0;
}
/* Antes essa cor era sempre fixa (--ember-bright), então um pedido
   ENTREGUE mostrava o mesmo tom "de alerta" que um CANCELADO — passava
   despercebido com o ícone fino de contorno de antes, mas ficou bem
   mais visível agora que o ícone é preenchido. Reaproveita a mesma
   classe de status do badge ao lado (badgeClass, ver conta.js) pra essa
   cor bater com o que o texto do Status já diz. */
.order-icon-chip.badge-delivered { color: var(--good); }
.order-icon-chip.badge-pending, .order-icon-chip.badge-approved { color: var(--warn); }
.order-icon-chip.badge-cancelled { color: #e08a7d; }

@media (max-width: 760px) {
  .profile-merged-columns { grid-template-columns: minmax(0, 1fr); }
  .profile-main-row { flex-direction: column; text-align: center; }
  .welcome-block { padding: 20px 0; align-items: center; }
  .profile-footer-row { justify-content: center; }
  .profile-col-support { border-left: none; padding-left: 0; margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(226,50,63,0.25); }
}

/* ===== Tela de confirmação de pedido ===== */
.pedido-status-card {
  background: var(--panel); border: 1px solid var(--iron-dim); border-radius: 5px;
  padding: 36px 24px; text-align: center; margin-bottom: 28px;
}
.pedido-status-icon {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
}
.pedido-status-icon svg { width: 28px; height: 28px; }
.pedido-status-icon.ok { background: var(--good-bg); color: var(--good); }
.pedido-status-icon.wait { background: var(--warn-bg); color: var(--warn); }
.pedido-status-icon.bad { background: rgba(224,138,125,0.16); color: #e08a7d; }
.pedido-status-title { font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 8px; }
.pedido-status-sub { color: var(--bone-dim); font-size: 0.9rem; margin: 0; }

.pedido-item-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid var(--iron-dim); font-size: 0.88rem;
}
.pedido-item-row:last-child { border-bottom: none; }

.pedido-actions { display: flex; gap: 12px; justify-content: center; margin: 32px 0 8px; flex-wrap: wrap; }

/* ===== Conta no celular =====
   No cabeçalho de perfil, o nome (mesmo sem espaços, ex: um username
   longo) e o texto de boas-vindas não podiam encolher abaixo do próprio
   tamanho — a caixa inteira ficava mais larga que a tela e cortava dos
   dois lados. Fica no fim do arquivo pra vencer as regras de mesma
   especificidade declaradas antes (.wallet-topup-btn, .profile-*). */
@media (max-width: 760px) {
  .profile-merged-card, .profile-merged-columns, .profile-col-main, .profile-main-row, .welcome-block { min-width: 0; max-width: 100%; }
  .welcome-block { overflow-wrap: anywhere; }
  .welcome-block #pf-welcome-name { font-size: clamp(1.5rem, 7vw, 2.2rem); }
}
@media (max-width: 480px) {
  .profile-merged-card { padding: 28px 18px; }
}
/* Card da carteira: ícone + saldo + botão não cabem numa linha só — o
   botão passa pra uma linha própria, na largura toda. */
@media (max-width: 640px) {
  .cashback-card { flex-wrap: wrap; padding: 18px; }
  .cashback-card .cashback-info { flex: 1; min-width: 0; }
  .wallet-topup-btn { flex: 1 1 100%; justify-content: center; margin-left: 0; }
}

/* Nome de usuário comprido (sem espaços) não pode alargar o cartão em
   nenhuma largura — antes só o layout de celular (<=760px) tratava isso,
   e em "modo computador" (~980px) o cartão ainda estourava. */
.profile-merged-card, .profile-merged-columns, .profile-col-main, .profile-main-row, .welcome-block { min-width: 0; max-width: 100%; }
.welcome-block { overflow-wrap: anywhere; }

/* Card da carteira (ícone + saldo + botão) quebra linha quando a coluna
   fica estreita (~640-800px, duas colunas lado a lado), em vez de estourar. */
.cashback-card { flex-wrap: wrap; }
.cashback-card .cashback-info { flex: 1; min-width: 0; }

/* ===== Tela do pedido: linha do tempo e "Comprar de novo" ===== */
.pedido-timeline { list-style: none; margin: 0 0 28px; padding: 18px 22px; display: grid; gap: 0; background: var(--panel); border: 1px solid var(--iron-dim); border-radius: 10px; }
.pedido-step { position: relative; display: flex; gap: 14px; padding-bottom: 18px; }
.pedido-step:last-child { padding-bottom: 0; }
.pedido-step::before { content: ''; position: absolute; left: 8px; top: 20px; bottom: 0; width: 2px; background: var(--iron-dim); }
.pedido-step:last-child::before { display: none; }
.pedido-step.is-done::before { background: var(--good); }
.pedido-step-dot { position: relative; flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%; border: 2px solid var(--iron); background: var(--void); box-sizing: border-box; }
.pedido-step.is-done .pedido-step-dot { border-color: var(--good); background: var(--good); }
.pedido-step.is-current .pedido-step-dot { border-color: var(--warn); background: var(--warn-bg); box-shadow: 0 0 0 4px rgba(209, 162, 79, 0.15); }
.pedido-step.is-failed .pedido-step-dot { border-color: #e08a7d; background: #e08a7d; }
.pedido-step-title { font-weight: 600; font-size: 0.92rem; }
.pedido-step.is-todo .pedido-step-title { color: var(--bone-dim); font-weight: 500; }
.pedido-step.is-failed .pedido-step-title { color: #e08a7d; }
.pedido-step-sub { margin-top: 2px; font-size: 0.78rem; color: var(--bone-dim); }
.pedido-rebuy-note { text-align: center; margin: 20px 0 0; }
.pedido-actions .btn .icon { width: 16px; height: 16px; }