/*
 * ============================================================================
 *  CUSTOM OVERRIDES — Estilos customizados que sobrescrevem o bundle original
 * ============================================================================
 *
 *  Este arquivo contém TODOS os overrides de CSS aplicados sobre o bundle
 *  compilado (index-Cl834OsA.css). Centralizado aqui para evitar CSS
 *  espalhado em index.php, provider-logos-fix.js e home-tabs-redirect.js.
 *
 *  Estrutura:
 *    0. Contrato de escopo (LEIA ANTES DE EDITAR)
 *    1. Globais (animações, badges) — valem para os 33 temas
 *    2. Skin `default` (Layout1) — vale para os 12 temas do Layout1
 *    3. Check-in style_2 — global
 *
 *  Para manutenção, consulte: /docs-auditoria/mapa.md
 * ============================================================================
 */


/* =============================================================================
   0. CONTRATO DE ESCOPO — por que este arquivo deixou de falar em ".blue-default"
   =============================================================================

   O PROBLEMA QUE ISTO RESOLVE
   ---------------------------
   Até 30/07/2026 a seção 2 inteira era prefixada com `.blue-default`. Essa
   classe e o TEMA, nao o layout: ela so entra no <html> em 4 dos 33 skins
   (Blue, BlueV01, BlueV02, Blue_V01). Resultado pratico: o Blue ficava 100%
   ajustado e Green / AmberPurple / PineGreen / AuroraYellow nao recebiam nada,
   embora usem EXATAMENTE a mesma marcacao — so muda a cor.

   Replicar por copia significaria 5 blocos identicos de ~90 linhas com os hex
   trocados a mao, e cada ajuste futuro teria de ser feito 5 vezes. E o que este
   arquivo passa a evitar.

   AS DUAS CLASSES, E QUAL USAR
   ----------------------------
   O bundle escreve DUAS coisas diferentes no DOM (index-T2Rmfk75.js):

     <html class="TEMA">   -> a cor.    Ex.: blue-default, green-default,
                                             forest-green, amber-purple,
                                             auroral-yellow, purple-light, ...
     <body class="SKIN">   -> a MARCACAO. Sempre um de: default | first | second
                              (+ v01 / v02 quando o tema tem variante de home)

   Mapa skin -> layout, extraido do proprio bundle:

     default  = Layout1  (12 temas)   <- e o que a secao 2 customiza
     first    = Layout2  (20 temas)
     second   = Layout3  (1 tema)

   Como os componentes ajustados aqui (.segment-c, .apart-view-c, .payment-box,
   .custom-segment) so existem no Layout1, o escopo certo e `body.default`.
   Nao e uma escolha de estilo: os proprios seletores do bundle para esses
   componentes so aparecem sob os 5 temas do Layout1 — confirmado por busca em
   index-Cl834OsA.css.

   POR QUE `body.default` E MAIS SEGURO QUE NAO TER ESCOPO NENHUM
   --------------------------------------------------------------
   Sem escopo, as regras vazariam para Layout2/Layout3, que tem componentes de
   nome parecido (.payment-box existe nos tres) mas estrutura diferente.
   `body.default` cobre os 12 temas alvo e nenhum a mais.

   COR: USE TOKEN, NUNCA HEX
   -------------------------
   O bundle ja tem um design system completo. Cada tema declara ~400 variaveis
   num bloco `.<tema> body div#app { ... }`, e 276 delas sao comuns aos temas do
   Layout1. Os tokens de superficie usados aqui, conferidos nos 5 temas:

     token                blue      green     forest    amber     auroral
     --color-bg-100       #191e2d   #2b4f14   #006849   #3b3466   #38342E
     --color-bg-200       #101629   #274116   #00563A   #2c294d   #24221F
     --color-bg-300       #090f1f   #213b10   #004D37   #262346   #171616
     --theme-color-500    #1680DC   #17b663   #004D37   #7a3fe8   #fbc63d
     --color-text-white-100  #fff   #fff      #fff      #fff      #fff

   Escrevendo `var(--color-bg-200)` no lugar de `#131826`, a MESMA regra serve
   os 12 temas e cada um pinta com a sua cor. Manutencao passa a ser: escreve
   uma vez, vale para todos.

   Todos os `var()` abaixo levam fallback. Se um tema novo nao declarar o token,
   ele cai no valor do Blue em vez de renderizar sem cor.

   ESPECIFICIDADE — POR QUE TROCAR O PREFIXO NAO QUEBRA NADA
   ---------------------------------------------------------
   `body.default` (0,2,0) e uma especificidade MENOR que a do bundle, que chega
   a `.blue-default #inicio .main-content .order-container .apart-view-c
   [data-v-f727b2e9] .payment-box` (1,6,0). Isso seria um problema se a disputa
   fosse por especificidade — mas nao e: TODA declaracao desta secao usa
   `!important`, e o bundle NAO usa `!important` em nenhuma dessas regras
   (verificado). Regra com !important ganha de regra sem !important
   independentemente da especificidade. O prefixo antigo `.blue-default` (0,2,0)
   tinha exatamente a mesma especificidade do novo `body.default`, entao a troca
   e neutra tambem entre as regras deste arquivo.

   COMO ADICIONAR UM AJUSTE NOVO
   -----------------------------
   1. E estrutural (posicao, tamanho, display, raio)? Vai na secao 2 com
      `body.default`, sem citar tema.
   2. E cor? Ache o token equivalente. Se nao existir, use hex COM comentario
      explicando por que nenhum token servia.
   3. So se o ajuste for de UM tema especifico: `.tema body.default .alvo`.
      Isso deve ser excecao — hoje o unico caso e o selo (ver 2.3).
   ============================================================================= */


/* =============================================
   1. GLOBAIS — Componentes customizados
      Sem escopo de propósito: valem nos 33 temas.
   ============================================= */

/* Animação do badge "Mais Pedido" / "Destaque" nos cards de depósito */
@keyframes recommendedPulse {
  0%   { transform: translate(-50%, 0) scale(1); }
  50%  { transform: translate(-50%, -2px) scale(1.04); box-shadow: 0 4px 10px rgba(239,68,68,0.4); }
  100% { transform: translate(-50%, 0) scale(1); }
}

/* Badge flutuante sobre o card de depósito recomendado.
   O gradiente vermelho/dourado NAO vira token de proposito: e uma cor de alerta
   comercial, que precisa gritar igual em qualquer tema. Se virasse
   var(--theme-color-*), no tema Green o badge sumiria dentro do proprio fundo. */
.recommended-badge {
  position: absolute !important;
  top: -12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: linear-gradient(90deg, #ff4e50, #f9d423) !important;
  color: white !important;
  font-size: 9px !important;
  padding: 2px 8px !important;
  border-radius: 12px !important;
  font-weight: bold !important;
  white-space: nowrap !important;
  box-shadow: 0 2px 6px rgba(255, 78, 80, 0.3) !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  z-index: 10 !important;
  width: max-content !important;
  height: auto !important;
  line-height: normal !important;
  animation: recommendedPulse 1.5s infinite ease-in-out !important;
}

/* Borda dourada no card de depósito recomendado — mesma razão do badge acima */
.btn-wrap.recommended {
  border: 1.5px solid #f9d423 !important;
  box-shadow: 0 0 10px rgba(249, 212, 35, 0.3) !important;
}


/* --- Logo do cabecalho: grande e igual em TODOS os temas ---
   Decisao do operador (docs/TEMAS_MANUTENCAO.md, T-01/T-06): a logo tem de
   ficar bem visivel, no tamanho que o Blue mostra (71B: ~182x44 no celular).

   O bundle nao garantia isso:
     Layout1/Layout3  `ion-img.h-[28px].max-w-[120px].pr-4` — essas classes
                      Tailwind NAO existem no CSS compilado; a logo saia no
                      tamanho natural do arquivo (grande ou minuscula).
     Layout2          `.logo-wrap .logo` limitada a 1.75rem x 7.5rem — medido
                      93x31 para uma logo 3:1, metade do Blue.

   Regra unica: altura 2.75rem, largura acompanha a proporcao, teto 11rem.
     logo 3:1   (77P1) -> ~146x49
     logo 4.2:1 (71B)  -> ~194x46
   `contain` garante que logo nenhuma e cortada ou esticada. O +1rem do
   Layout1/3 e o padding-right (.pr-4) que o proprio bundle poe no ion-img. */
/* O MENU LATERAL do Layout1/3 repete a mesma logo num ion-toolbar sem
   `.header` (dentro de ion-menu): sem esta linha ela saia no tamanho natural
   do arquivo (medido 377x119 no AmberPurpleV01). */
ion-toolbar.header ion-img[class~="max-w-[120px]"],
ion-menu ion-header ion-toolbar ion-img[class~="max-w-[120px]"] {
  height: 2.75rem !important;
  width: auto !important;
  max-width: calc(11rem + 1rem) !important;
}

/* Menu lateral dos Layout2 "cabecalho Layout1" (GoldenYellow, BluePurple,
   DarkGreen) e do Layout3: a logo e um <img class="h-[28px]"> (data-v-c921122b)
   — a classe Tailwind nao existe no CSS compilado e a imagem saia no tamanho
   natural (291x97 no GoldenYellow, estourando a largura do menu). */
ion-menu ion-header img[class~="h-[28px]"] {
  height: 2.75rem !important;
  width: auto !important;
  max-width: 11rem !important;
  object-fit: contain;
  object-position: left center;
}

/* Layout2: so depois de a imagem carregar (.good-img). Antes disso o bundle
   mantem a logo em 0x0 de proposito; forcar tamanho ali desenhava uma caixa
   vazia. Auditoria de 2026-09-26 (.scratch/temas/logo-auditoria.md): borda e
   centro iguais ao original nos 34 temas — os centralizados continuam
   centralizados porque a imagem fica no meio da propria caixa. */
ion-header .logo-wrap .logo.good-img {
  height: 2.75rem !important;
  width: auto !important;
  max-width: 11rem !important;
}

ion-header .logo-wrap .logo.good-img::part(image) {
  object-fit: contain;
  object-position: center;
}

/* Layout2 com Entrar/Registro no topo (MystLightBlue, PhantomBlue, RoseBlush,
   MidnightPurple, MaltGreen, ChalcedonyGreen...): com logo larga (4,2:1, a do
   71B = 194 px) nao sobrava espaco e o .button-box, que o bundle deixa com
   flex-wrap: wrap, empilhava Entrar em cima de Registro. A dupla de botoes fica
   sempre lado a lado e e a logo que encolhe no espaco que sobra (contain: nao
   corta nem estica). Logo estreita continua do tamanho de antes. */
ion-header ion-toolbar > .button-box {
  flex-wrap: nowrap !important;
}
ion-header ion-toolbar > .logo-wrap {
  min-width: 0;
}
/* respiro minimo entre a logo encolhida e o Entrar */
ion-header ion-toolbar > .logo-wrap:has(~ .button-box) {
  margin-inline-end: .5rem;
}
ion-header ion-toolbar > .logo-wrap .logo.good-img {
  min-width: 0;
  max-width: min(11rem, 100%) !important;
}

ion-toolbar.header ion-img[class~="max-w-[120px]"]::part(image),
ion-menu ion-header ion-toolbar ion-img[class~="max-w-[120px]"]::part(image) {
  object-fit: contain;
  object-position: left center;
}


/* =============================================================================
   2. SKIN `default` = LAYOUT1 — os 12 temas de uma vez
   =============================================================================
   Cobre: Blue, Blue_V01, BlueV01, BlueV02, Green, GreenV01, GreenV02,
          PineGreenV01, PineGreenV02, AmberPurple, AmberPurpleV01, AuroraYellow
   ============================================================================= */

/* --- Tokens locais deste arquivo ---
   Declarados no escopo do skin para poderem ser trocados por tema numa linha
   so, sem duplicar as regras que os consomem (ver 2.3). */
body.default {
  --pp-grade-img:  url("/images/skin-game-platform.png");
  --pp-selo-trace: url("/images/game-provider-premium-mask-trace.svg?v=1");
  --pp-selo-stars: url("/images/game-provider-premium-mask-stars.svg?v=1");

  /* Tinta do selo. Por padrao acompanha a cor do tema — ver as duas excecoes
     medidas logo abaixo. Os fallbacks sao as cores originais do SVG. */
  --pp-selo-tint: var(--theme-color-500, #3d90de);
  --pp-selo-star: var(--accent-color-red, #e8474e);
}

/* EXCECOES DE CONTRASTE — medidas, nao chutadas.
   Contraste WCAG entre --theme-color-500 e a cor real do rodape de cada tema
   (amostrada dos proprios previews em /uploads/temas):

     blue-default    #1680DC sobre #171e31 .....  4.07:1   ok
     green-default   #17b663 sobre #213b10 .....  4.66:1   ok
     auroral-yellow  #fbc63d sobre #22211d ..... 10.16:1   ok
     forest-green    #004D37 sobre #065238 .....  1.07:1   INVISIVEL
     amber-purple    #7a3fe8 sobre #262346 .....  2.62:1   fraco

   No forest-green a cor do tema E a cor do fundo: o selo sumiria por completo.
   Cada excecao troca so a tinta, mantendo a familia de matiz do tema. */
.forest-green body.default { --pp-selo-tint: var(--theme-color-800, #17B663); }          /* 1.07:1 -> 3.48:1, segue verde */
.amber-purple body.default { --pp-selo-tint: var(--color-primary-border-light, #c3a9f5); } /* 2.62:1 -> 7.31:1, segue roxo */

/* Estrelas: #e64021 rende 3.0~4.0:1 em quatro temas, mas so 2.25:1 no fundo
   verde-escuro do forest. Clareia so nesse. */
.forest-green body.default { --pp-selo-star: #ff7f6a; }                                   /* 2.25:1 -> 4.02:1 */


/* --- 2.1 Barrinha de provedores (segment-c) --- */

/* ESCOPO SO DO BLUE (2026-09-26, docs/TEMAS_MANUTENCAO.md).
   Estas regras nasceram para o Layout1:Blue e depois foram abertas para todo
   `body.default`. Nos outros 11 temas do Layout1 elas apagavam o trapezio do
   v01, os ladrilhos do v02, a cor propria da barra e dos rotulos, e a margem
   de 18px somada ao `width:100%` do bundle fazia a barra vazar pela direita
   (no GreenV02/PineGreenV02 a grade de jogos caia para baixo do rail).
   Ficam so os temas SEM variante de home que montam os MESMOS componentes do
   Blue: Blue, Green e AmberPurple (o Blue cai no fallback GameType do bundle,
   igual aos outros dois). AuroraYellow tem componente proprio e ja bate com
   a previa; v01/v02 voltam a ser desenhados pelo proprio bundle.

   Cor do cartao: o Blue mantem o #131826 aprovado pelo operador; Green e
   AmberPurple usam o --color-bg-200 do proprio tema (ver o topo da secao 0). */
/* So o Blue declara a cor; nos outros o var() e resolvido NA PROPRIA barra,
   dentro de div#app, que e onde o bundle declara os tokens de cada tema.
   Resolver no <body> pegaria o valor errado (medido: azul no Green). */
.blue-default body.default { --pp-segment-bg: #131826; }

/* Esconder o pseudo-elemento ::before (trapezoid / bgTrapezoid) */
:is(.blue-default, .green-default, .amber-purple) body.default:not(.v01):not(.v02) .wrapper.segment-c::before {
  display: none !important;
  background: none !important;
}

/* Container da barra de provedores.
   Era `background: #131826` cravado. #131826 nao existia em token nenhum: era
   um cinza-azulado escolhido a olho, entre --color-bg-200 (#101629) e
   --color-bg-100 (#191e2d) do tema Blue. Passou a --color-bg-200, o mais
   proximo por luminancia — no Blue a diferenca e imperceptivel (3 pontos de
   RGB) e em troca Green, Amber, PineGreen e Aurora ganham a barra na cor
   certa deles em vez de um azul fora de contexto. */
:is(.blue-default, .green-default, .amber-purple) body.default:not(.v01):not(.v02) .wrapper.segment-c {
  background: var(--pp-segment-bg, var(--color-bg-200, #131826)) !important;
  border-radius: 8px !important;        /* Cantos arredondados */
  margin: 6px 18px 0 !important;        /* Margem: cima lados baixo */
  box-shadow: none !important;
  border: none !important;
}

/* A lista de plataforma nasce assincrona. Antes da resposta — e para sempre
   quando home.platformList devolvia 503 — o bundle montava uma barra inteira
   contendo somente o item sintetico "Popular". Isso virava o cartao gigante
   duplicado acima do titulo Popular. Sem provedor real, a barra nao oferece
   navegacao nenhuma; escondemos apenas esse estado e ela reaparece sozinha
   assim que chegar a primeira plataforma. GameType nao entra nesta regra. */
body.home-type-Platform.default
  .wrapper.segment-c:has(ion-segment-button.POPULAR):not(:has(ion-segment-button:not(.POPULAR))) {
  display: none !important;
}

/* Esconder a barrinha indicadora de seleção sob a aba ativa */
:is(.blue-default, .green-default, .amber-purple) body.default:not(.v01):not(.v02) .wrapper.segment-c .line,
:is(.blue-default, .green-default, .amber-purple) body.default:not(.v01):not(.v02) .wrapper.segment-c .layout1.line,
:is(.blue-default, .green-default, .amber-purple) body.default:not(.v01):not(.v02) .wrapper.segment-c [class*="line"],
:is(.blue-default, .green-default, .amber-purple) body.default:not(.v01):not(.v02) .wrapper.segment-c ion-segment-button::part(indicator),
:is(.blue-default, .green-default, .amber-purple) body.default:not(.v01):not(.v02) .wrapper.segment-c ion-segment-button::part(indicator-background) {
  display: none !important;
  opacity: 0 !important;
}

/* Texto dos nomes dos provedores ("Popular", "PG", "PP"...).
   Os 5 temas do Layout1 tem fundo escuro, entao o branco serve em todos —
   mas fica no token para acompanhar se um tema claro entrar no Layout1.

   BUG CORRIGIDO AQUI: a linha era `font-weight: 160rem`. `font-weight` nao
   aceita unidade de comprimento; a declaracao era invalida e o navegador a
   descartava em silencio desde sempre. O peso real aplicado era o herdado.
   Chegou a ser trocado por 600, mas isso engrossou os nomes (ver abaixo). */
:is(.blue-default, .green-default, .amber-purple) body.default:not(.v01):not(.v02) .wrapper.segment-c ion-segment-button .label,
:is(.blue-default, .green-default, .amber-purple) body.default:not(.v01):not(.v02) .wrapper.segment-c ion-segment-button ion-label {
  color: var(--color-text-white-100, #fff) !important;
  font-size: 0.82rem !important;
  /* SEM font-weight de proposito (2026-09-26): o 600 deixou os nomes grossos
     demais, reclamacao do operador. Por anos a linha foi `160rem`, invalida e
     descartada, e o peso real era o herdado do bundle — e esse que ele aprovou. */
  opacity: 1 !important;
}

/* Ícones/logos dos provedores — visibilidade total */
body.default .wrapper.segment-c ion-segment-button .type-img,
body.default .wrapper.segment-c ion-segment-button .type-icon,
body.default .wrapper.segment-c ion-segment-button i,
body.default .wrapper.segment-c ion-segment-button img {
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* Fundo do wrapper de jogos — transparente */
:is(.blue-default, .green-default, .amber-purple) body.default:not(.v01):not(.v02) .tabbar-tabs-inicio-components-GameWrapper-index {
  background: transparent !important;
}


/* --- 2.2 Rail vertical de categorias (/game/category/...) ---
   Estrutura: .category-container > ion-content.side > ion-segment.custom-segment
   > ion-segment-button (um por provedor).

   Antes, a altura de cada caixa era ditada pelo conteudo, e como alguns itens
   vinham com DUAS logos (bug corrigido no provider-logos-fix.js) as celulas
   ficavam com alturas diferentes — 70px, 77px, 95px — e a coluna parecia
   desalinhada. Fixar a altura aqui garante o padrao mesmo que um provedor
   tenha nome de duas linhas ("Askme Slots") ou logo de proporcao esquisita.

   Tudo nesta subsecao e geometria pura, zero cor: ja era identico nos 12 temas,
   so estava trancado no Blue por causa do prefixo. */

/* 96px (era 82px): a logo passou de 52x40 para 66x50 em provider-logos-fix.js
   (styleRailLogo). Sem subir a celula junto, a logo maior espremia o nome. */
body.default ion-segment.custom-segment ion-segment-button {
  min-height: 96px !important;
  height: 96px !important;
  justify-content: center !important;
}

/* Logo: caixa fixa e `contain` para caber sem distorcer, seja a logo larga
   (Askme) ou quadrada (JDB). O `contain` centraliza dentro da caixa. */
body.default ion-segment.custom-segment ion-segment-button .type-img {
  width: 70px !important;
  height: 46px !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  margin: 0 auto 2px !important;
  flex: none !important;
}

/* Nome do provedor: cabe em duas linhas dentro dos 96px sem estourar. */
body.default ion-segment.custom-segment ion-segment-button .label,
body.default ion-segment.custom-segment ion-segment-button ion-label {
  font-size: 0.72rem !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}


/* --- 2.3 Bloco "Game Provider Premium" + provedores, no rodapé ---

   Estrutura original do tema (componente PartView):
     .apart-view-c
       ├─ img.game-brand ....... grade com os 6 provedores (skin-game-platform.png)
       ├─ .social-box .......... ícones de redes sociais
       └─ .payment-box ......... só a arte de fundo (bg-partners-*.png), sem conteúdo

   ATENCAO — skin-game-platform.png NAO e placeholder vazio.
   E a grade dos provedores (Pragmatic Play, CQ9, TaDa, Evoplay, PG Soft,
   SpiniX). Ela so PARECE vazia em captura comprimida, porque os logos sao
   claros sobre fundo quase preto. Numa tentativa anterior eu troquei essa
   imagem pelo selo via `content:` e o efeito colateral foi sumir com os
   provedores do rodape. Nao repita isso.

   Layout final: o selo e a grade passam a morar DENTRO do .payment-box,
   empilhados sobre a arte de fundo que ja estava la — dois backgrounds no
   mesmo ::after, o selo no topo e a grade embaixo. Os dois blocos originais
   sao escondidos para nao duplicar. */

/* saem de cima: agora vivem dentro do .payment-box */
body.default .apart-view-c img.game-brand {
  display: none !important;
}

body.default .payment-box {
  position: relative !important;
  display: block !important;
  /* sem width explicito o box colapsa para 0: ao tornar o ion-img absolute
     ele perde a largura intrinseca que segurava o container.
     37px = a mesma folga lateral dos .divider do rodape (486 - 449). */
  width: calc(100% - 37px) !important;
  align-self: stretch !important;
  min-height: 300px !important;   /* cabe selo + as duas fileiras de logos */
  overflow: hidden !important;
  border-radius: 10px !important;
}

/* Arte de fundo (bg-partners-*.png) removida a pedido: o bloco fica limpo,
   so o selo e os provedores sobre o fundo do rodape.
   Era ela que dava largura ao .payment-box — por isso o width explicito na
   regra acima e obrigatorio, senao o box colapsa para 0. */
body.default .payment-box ion-img {
  display: none !important;
}

/* A GRADE fica no proprio .payment-box — nao e tingida, e um PNG com os logos
   coloridos dos provedores. Os dois pseudo-elementos ficam livres para o selo. */
body.default .payment-box {
  background: var(--pp-grade-img) center bottom 26px / 88% auto no-repeat !important;
}

/* O SELO — antes era um SVG de cor chapada carregada por url(), o que travava
   o azul #3d90de em TODOS os temas: uma imagem em url() nao enxerga var() nem
   currentColor. Agora o SVG virou duas MASCARAS e a cor vem de token, entao o
   selo acompanha o tema sozinho.

       ::before -> mascara do traco (louros + "GAME PROVIDER" + pilula)
       ::after  -> mascara das estrelas ao lado de "PREMIUM"

   "PREMIUM" continua sem cor propria: e um vazado na pilula, um furo no alpha
   da mascara. O fundo do rodape aparece por ele, entao o texto acompanha o
   tema de graca — inclusive se um dia o tema clarear.

   As mascaras sao GERADAS a partir de /images/game-provider-premium.svg
   separando os paths por fill (3 de #3d90de, 2 de #e8474e). Nao edite as
   mascaras a mao: mexa no SVG original e gere de novo. Conferido: recompor as
   duas nas cores originais bate pixel a pixel com o arquivo original
   (0 divergencias em 163.680 pixels).

   Os prefixos -webkit- sao obrigatorios: a WebView do app Android ainda serve
   mask-image so na versao prefixada. */
body.default .payment-box::before,
body.default .payment-box::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center 26px;
          mask-position: center 26px;
  -webkit-mask-size: auto 84px;
          mask-size: auto 84px;
}

body.default .payment-box::before {
  background-color: var(--pp-selo-tint);
  -webkit-mask-image: var(--pp-selo-trace);
          mask-image: var(--pp-selo-trace);
}

body.default .payment-box::after {
  background-color: var(--pp-selo-star);
  -webkit-mask-image: var(--pp-selo-stars);
          mask-image: var(--pp-selo-stars);
}

/* `?v=` e obrigatorio nas mascaras: sem ele o navegador continua servindo a
   versao anterior do arquivo mesmo depois de regerada. Suba o numero a cada
   edicao — nos DOIS arquivos, senao o traco e as estrelas dessincronizam. */


/* =============================================================================
   3. CHECK-IN (SignIn) — TEMPLATE style_2: LEGIBILIDADE
   =============================================================================
   Tela: /activity/SignIn/1887@style_2  (componente data-v-5d3a1545 do bundle).

   ESCOPO: esta secao ja nascia sem prefixo de tema, entao ja vale nos 33 temas.
   Nao foi tocada na refatoracao de 30/07/2026 — foi ajustada por legibilidade,
   e trocar estes valores por token reintroduziria justamente o bug que ela
   corrige (ver a nota da pilula "Extra" abaixo).

   O tema entrega esse template com texto quase apagado. Valores originais,
   conferidos em index-Cl834OsA.css:

     .item-style02-days    -> color: rgba(255,255,255,.4)   font-size: .625rem
     .reward-money-style02 -> color: rgba(255,255,255,.4)   font-size: .45rem
     .extra-give-money     -> font-size: .45rem  +  classe .text-gradient

   O caso da pilula "Extra" e o pior: .text-gradient aplica
   `-webkit-text-fill-color: transparent !important` e o texto passa a ser
   pintado pelo PROPRIO gradiente de fundo da pilula — verde sobre verde.
   Por isso aqui o fill e forcado numa cor escura, e nao so o `color`.

   Especificidade: as regras do bundle usam 2~3 classes + o atributo de escopo
   [data-v-5d3a1545]. Os seletores abaixo usam 3 classes + !important, o que
   ganha das regras normais. A UNICA que continua vencendo de proposito e
   `.available-item-style02 .reward-money-style02 { color:#feb805 !important }`
   (4 pontos de especificidade), que pinta o dia liberado de dourado — o
   destaque do dia da vez continua funcionando, so que maior.

   NAO usar padding lateral nos itens: a grade e de 3 colunas de 3.875rem com
   margin-right de 2.375rem; folga horizontal extra quebra a linha em 2.
   ============================================================================= */

/* "DAY 1", "DAY 2"... */
.date-list-style02 .date-list-item .item-style02-days,
.date-list-style02 .less-date-list-item .item-style02-days {
  color: rgba(255, 255, 255, .92) !important;
  font-size: .78rem !important;
  line-height: 1.05rem !important;
  letter-spacing: .01em;
}

/* Valor da recompensa do dia ("+100,00" / "Fixo" / faixa aleatoria) */
.date-list-style02 .date-list-item .reward-money-style02,
.date-list-style02 .less-date-list-item .reward-money-style02 {
  color: #ffd86b !important;
  font-size: .72rem !important;
  line-height: 1.05rem !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .55);
}

/* Pilula "Extra +5,00" — texto escuro sobre o verde, em vez de verde no verde.
   Cores cravadas de proposito: o gradiente do tema era exatamente o problema. */
.date-list-style02 .date-list-item .extra-give-money,
.date-list-style02 .less-date-list-item .extra-give-money {
  font-size: .58rem !important;
  line-height: .82rem !important;
  padding: .14rem .45rem !important;
  color: #10250a !important;
  -webkit-text-fill-color: #10250a !important;
  background: linear-gradient(180deg, #b6e04a, #7fd42d) !important;
}

/* NAO adicionar padding/borda/fundo em .date-list-item: testado e revertido.
   O item tem min-width 3.875rem e margin-right 2.375rem, com o zeramento da
   margem no :nth-child(3n) fechando 3 colunas. Qualquer folga horizontal
   extra empurra o terceiro item para a linha de baixo e a grade vira 2x4. */

/* Fita do topo: "+0,00 | x 0 | VIP 0" */
.receive-box-style02 .receive-item {
  height: auto !important;
  padding: .16rem .4rem !important;
  font-size: .72rem !important;
  line-height: 1rem !important;
  color: #ffe6a6 !important;
}

/* Aviso de check-in perdido / recado acima da grade */
.sign-main-style02 .sign-prompt {
  color: rgba(255, 255, 255, .85) !important;
  font-size: .68rem !important;
}

/* ==========================================================================
   CENTRAL DE PROMOÇÕES — card sem banner definido
   --------------------------------------------------------------------------
   Contexto: a tabela `promocoes` guarda a imagem do card na coluna `img`, e o
   painel só sabia TROCAR essa imagem, nunca limpá-la. Resultado: a linha 1887
   (Check-in Diário) ficou presa em /uploads/activity_default.png — um
   placeholder egípcio que ninguém escolheu e que não havia como remover pela
   tela. O painel ganhou "Remover a imagem atual" (admin/editar-promocoes.php);
   este bloco cuida do que o site mostra depois disso.

   Sem imagem, o bundle monta o estilo inline como:
       background: url() no-repeat; background-size: 100% auto; min-height: 7.75rem;
   O navegador serializa isso para `url("")`, que NÃO é descartado: vira uma
   imagem vazia e o card fica um buraco transparente de ~155px na página.

   Daí o seletor por `[style*='url("")']`: ele casa EXATAMENTE com o caso da
   imagem ausente. Card que tem banner traz uma url real no atributo e não é
   tocado por nada abaixo — não existe risco de cobrir um banner legítimo.
   (Medido no Chrome em /main/promo, 30/07/2026.)
   ========================================================================== */
[style*='url("")'].rounded-\[\.625rem\],
[style*='url("")'].rounded-top {
  background-image:
    linear-gradient(135deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(160deg, #1b2440 0%, #131a2e 55%, #0d1322 100%) !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  border: 1px solid rgba(255,255,255,.07);
}

/* Marca d'água discreta, só para o bloco não parecer uma falha de carregamento.
   Fica atrás do título e dos selos, que o bundle desenha em elementos filhos. */
/* Só na variante que já é `position: relative` (a classe vem do próprio
   bundle). Na outra o ::after escaparia do card e cobriria vizinhos. */
[style*='url("")'].rounded-\[\.625rem\].relative::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 78% 28%, rgba(255,255,255,.10) 0, rgba(255,255,255,0) 42%);
  border-radius: inherit;
}

/* ==========================================================================
   ANÚNCIO ABERTO NA LISTA  —  05/08/2026
   --------------------------------------------------------------------------
   O QUE ESTAVA ERRADO

   Na aba "Anúncio" o jogador via 3 linhas de texto e precisava clicar no
   título para ler o resto. Não era escolha do painel: são três travas do
   bundle, todas na LISTA (a tela de detalhe nunca teve nenhuma delas).

   Trava 1 — este arquivo. Em assets/index-Cl834OsA.css:

       ion-content .list .notice-item .notice-item-content[data-v-af0e549c] {
           display: -webkit-box;
           -webkit-line-clamp: 3;
           overflow: hidden;
           white-space: pre-line
       }

   `-webkit-line-clamp: 3` + `overflow: hidden` é o corte. E o
   `white-space: pre-line` é a segunda metade do problema: enquanto o texto
   estava cortado em 3 linhas ele não incomodava, mas com o conteúdo inteiro
   à mostra ele passa a respeitar CADA quebra de linha do HTML — e um card
   escrito com indentação vira uma escada de espaços em branco. Por isso o
   `normal` abaixo não é enfeite: sem ele o anúncio abre torto.

   Trava 2 — `replaceImgTag()` apaga <img> do conteúdo antes de renderizar,
   só na lista. Corrigida em api/v1/api.php (endpoint announcementMessage).

   Trava 3 — a lista passa `clickable: false` para o componente de HTML
   seguro, o que faz preventDefault() em todo <a>. Corrigida em
   assets/anuncio-inline.js.

   AS TRÊS VARIANTES DE TEMA
   Cada skin tem seu próprio componente de lista de anúncio, com scope id
   diferente e classe diferente para o mesmo corte:

       data-v-af0e549c  -> .notice-item-content            (line-clamp: 3)
       data-v-c232701b  -> .announcement-content.line-clamp-2
       data-v-9588c8bc  -> .announcement-content.line-clamp-2

   Todas entram aqui: trocar de tema no painel não pode desfazer a correção.

   O QUE NÃO É TOCADO
   A aba "Notificação" (data-v-0791abad, corte em 2 linhas) fica exatamente
   como está — lá o clique no título continua sendo a forma de abrir.
   ========================================================================== */
ion-content .list .notice-item .notice-item-content[data-v-af0e549c],
.notice-item-content[data-v-af0e549c],
.announcement-content[data-v-c232701b],
.announcement-content[data-v-9588c8bc] {
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  overflow: visible !important;
  white-space: normal !important;
  line-height: 1.45 !important;
}

/* A foto do anúncio agora chega na lista (ver api.php). Sem isto ela sai no
   tamanho natural do arquivo e estoura o card em telas estreitas. Mesma regra
   que a tela de detalhe já aplica em `.announcement-content p img`. */
.notice-item-content[data-v-af0e549c] img,
.announcement-content[data-v-c232701b] img,
.announcement-content[data-v-9588c8bc] img {
  display: block;
  width: 100%;
  height: auto;
}

/* O card do item tinha altura fechada pelo texto de 3 linhas. Com o conteúdo
   inteiro dentro, qualquer altura fixa herdada volta a cortar. */
ion-content .list .notice-item[data-v-af0e549c],
ion-content .list .notice-item[data-v-af0e549c] .item {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

/* Links dentro do anúncio: o dedo precisa de alvo. O bundle não estiliza <a>
   aqui porque, até agora, clique em link na lista não fazia nada. */
.notice-item-content[data-v-af0e549c] a,
.announcement-content[data-v-c232701b] a,
.announcement-content[data-v-9588c8bc] a {
  cursor: pointer;
  pointer-events: auto;
}

/* ==========================================================================
   TEXTO CRU DE NOTIFICAÇÃO/ANÚNCIO COM A MESMA COR FORTE DO TÍTULO
   --------------------------------------------------------------------------
   O bundle chama a classe de `small-text-white`, mas ela usa text-40: cinza.
   A regra fica no contêiner, nunca em `*` ou `p`, para que uma cor inline
   escolhida nos modelos continue vencendo por ser declaração do próprio filho.
   Os três pares abaixo cobrem lista e detalhe nas variantes de layout atuais.
   ========================================================================== */
.notice-item-content[data-v-af0e549c],
.announcement-content[data-v-c232701b],
.announcement-content[data-v-c3273ad2],
.announcement-content[data-v-9588c8bc],
.announcement-content[data-v-958ba7f9],
.announcement-content[data-v-edfaec62] {
  color: var(--color-text-100, var(--color-text-white-100, #fff)) !important;
}

.new-skin-symbol .announcement-content[data-v-c232701b],
.new-skin-symbol .announcement-content[data-v-c3273ad2],
.new-skin-symbol .announcement-content[data-v-9588c8bc],
.new-skin-symbol .announcement-content[data-v-958ba7f9] {
  color: var(--ep-color-text-default, #fff) !important;
}

/* Nexus raster covers: preserve the whole artwork, including Ionic's inner image. */
html .game-card.nexus-cover .game-img,
html .game-card.nexus-cover .game-img::part(image) {
    object-fit: contain !important;
    object-position: center;
}

/* ==========================================================================
   CARROSSEL DA HOME SEM CORTE
   --------------------------------------------------------------------------
   O bundle fixa a altura do carrossel (7.5rem, ou a altura do tema via style
   inline) e pinta a imagem com `object-fit: cover` ancorado no topo-esquerdo.
   Um banner mais alto que 3:1 (ex.: 732x320) perdia a faixa de baixo. Aqui a
   altura passa a seguir a proporção da própria imagem enviada no admin.
   ========================================================================== */
.swiper-poster[data-v-6072baa6] {
  height: auto !important;
}

.swiper-poster .poster-img[data-v-6072baa6],
div.swiper-poster-wrap .swiper[data-v-496ad86a] .swiper-slide .poster-img {
  display: block;
  height: auto !important;
  object-fit: contain !important;
}

div.swiper-poster-wrap .swiper[data-v-496ad86a] .swiper-slide {
  height: auto !important;
}

/* ==========================================================================
   PROVEDORES NO LUGAR DAS CATEGORIAS (Layout3 e Layout2 GameType) + BANNER
   --------------------------------------------------------------------------
   A barra e montada por assets/barra-provedores.js (T-05: sempre
   provedores), so onde a home tem barra de categoria fixa. Os botoes sao
   CLONES dos nativos do tema, entao o estilo e o do proprio tema; aqui so se
   esconde a barra nativa DEPOIS que a nova entrou (.bp-ativo).
   ========================================================================== */
#stickyElement.bp-ativo ion-segment:not(.bp-clone) {
  display: none !important;
}

/* Banner do carrossel com `img.h-40.object-cover` (Layout3 e Layout2
   GameType, componente data-v-956c07f6): altura fixa de 10rem com cover
   cortava as laterais de um banner 732x320. */
.swiper-poster .swiper-slide img.h-40.object-cover {
  height: auto !important;
  object-fit: contain !important;
}

/* F1 (2026-09-26, docs/TEMAS_PLANO_EXECUCAO.md) — logo A ESQUERDA, colada no
   botao de menu, nos Layout2 de cabecalho "menu + logo" (NeoBlue,
   GoldshineGreen, StellarDusk, ProsperityRed, BlueViolet/theme-28). O bundle
   (e a previa) centraliza a logo nesses 5; o operador pediu o padrao dos
   outros 28 temas: menu e logo juntos a esquerda. */
html:is(.neo-blue, .goldshine-green, .stellar-dusk, .prosperity-red, .theme-28) ion-header .logo-wrap {
  justify-content: flex-start !important;
  padding-left: 2px !important;
  padding-right: 0 !important;
}
/* O brilho desfocado (.logo-wrap::before, 220px) ficava no meio do cabecalho,
   atras da logo centralizada; vai junto com a logo, para tras dela. */
html:is(.neo-blue, .goldshine-green, .stellar-dusk, .prosperity-red, .theme-28) ion-header .logo-wrap::before {
  left: -30px !important;
  right: auto !important;
  transform: none !important;
}

/* F2 (2026-09-26) — botao de VOLTAR visivel em todos os temas. A seta
   (/svg/arrow_left.svg, traco agora 2.25) saia com 17,6px no Layout1 e 19,8px
   nos temas "new-skin" do Layout2: some no cabecalho. Minimo de 22px. Os que
   ja eram maiores (26px/22px) nao mudam. */
body.default ion-header ion-toolbar ion-button ion-icon[data-v-f495a37e] {
  --font-size-back-button: 22px;
}
html body .new-skin-symbol ion-header ion-toolbar ion-button ion-icon[data-v-f495a37e] {
  font-size: 22px !important;
}
/* LightApricot (theme-35): seta dourado-claro sobre creme (~1,9:1). Usa a
   mesma cor do titulo, que acompanha a paleta. */
html.theme-35 ion-header ion-toolbar ion-button ion-icon[data-v-f495a37e] {
  color: var(--ep-color-text-default) !important;
}

/* BlueViolet (theme-28): a fileira de categorias (Popular, Slot...) era
   centralizada pelo bundle com `margin-left:auto` no 1o botao e o ladrilho
   "Todos" no fim. Sem o "Todos" (escondido: nao tem arte, ver
   provider-logos-fix.js) ela ia para a direita. Padrao do site: esquerda. */
html.theme-28 ion-segment-button[data-v-92acdf3b]:first-child {
  margin-left: 0 !important;
}

/* F6 (2026-09-26) — aviso "Se voce tiver duvidas..." do topo de Deposito e
   Saque. O componente (data-v-a82616da) traz as cores em style inline, feitas
   para tema ESCURO: titulo branco, caixa cinza-azulada translucida e texto
   #94a3b8. Nos 5 temas CLAROS o cabecalho e claro e tudo isso sumia. Aqui o
   aviso passa a escuro-sobre-claro; o !important e o unico jeito de vencer o
   style inline. */
html:is(.purple-light, .theme-34, .golden-emerald, .theme-35, .mystlight-blue) .header-wrap[data-v-a82616da] {
  background: rgba(255, 255, 255, 0.55) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}
html:is(.purple-light, .theme-34, .golden-emerald, .theme-35, .mystlight-blue) .header-wrap[data-v-a82616da] > div:first-child > span {
  color: #1f2937 !important;
}
html:is(.purple-light, .theme-34, .golden-emerald, .theme-35, .mystlight-blue) .header-wrap[data-v-a82616da] > div + div {
  background: rgba(255, 255, 255, 0.7) !important;
  border-color: rgba(0, 0, 0, 0.06) !important;
}
html:is(.purple-light, .theme-34, .golden-emerald, .theme-35, .mystlight-blue) .header-wrap[data-v-a82616da] > div + div > p {
  color: #475569 !important;
}
html:is(.purple-light, .theme-34, .golden-emerald, .theme-35, .mystlight-blue) .header-wrap[data-v-a82616da] .client {
  color: #b45309 !important;
}
html:is(.purple-light, .theme-34, .golden-emerald, .theme-35, .mystlight-blue) .header-wrap[data-v-a82616da] ion-icon.record {
  color: #1f2937 !important;
}

/* F7 (2026-09-26) — cabecalho das paginas internas VIP, Centro de Seguranca,
   Central de Agentes e Relatorios (ion-header.navigation, data-v-39178cda).
   O bundle fixa o fundo em #090f1f (marinho do Layout1) mas pinta o titulo
   com a cor do tema (--ep-color-text-default): nos temas CLAROS saia preto
   sobre marinho, ilegivel; nos escuros, marinho num tema azul/verde. A pagina
   de Notificacoes (data-v-3b9f603f) ja usa a cor de navegacao do tema; aqui
   passa a usar a mesma. */
.new-skin-symbol ion-header.navigation ion-toolbar[data-v-39178cda] {
  --background: var(--ep-color-background-fill-top-nav-secondary, #090f1f);
}

/* F7 — Perguntas frequentes/atendimento (assets/atendimento-spa.js): o texto
   segue --ep-color-text-default; o BluePurple (purple-light) nao tem esse
   token e herdava o branco do ion-content sobre fundo lilas-claro. */
html.purple-light :is(#sup-faq, #sup-painel-atendimento) {
  color: #1f2937 !important;
}

/* F8.1 — Texto deslizante (alto-falante da home, data-v-5ef6c35d): cada tema
   pintava numa cor de destaque (verde, azul, amarelo, cinza-azulado) e em
   alguns ficava escuro sobre fundo escuro. Pedido do operador: branco em
   todos. Nos 4 temas CLAROS a barra e creme/branca, onde branco some: la o
   texto fica escuro. */
.marquee__item[data-v-5ef6c35d] {
  color: #fff !important;
}
html:is(.theme-34, .golden-emerald, .theme-35, .mystlight-blue) .marquee__item[data-v-5ef6c35d] {
  color: #1f2937 !important;
}

/* F8.1b — Blue_V01 (blue-default; o body sai home-type-Platform): a barra da home e de ABAS DE
   TEXTO (btn-wall layout1, data-v-cd34d919). provider-logos-fix.js poe a logo
   do provedor (.type-img) antes do nome, mas o tema nao mede .type-img nesse
   formato e ela ficava 8x8 (so a folga): "nao mostra as logos". Aqui a logo
   ganha tamanho e fica a esquerda do nome, dentro da propria aba. */
html.blue-default #inicio .btn-wall.layout1[data-v-cd34d919] {
  display: flex !important; flex-direction: row !important; align-items: center; justify-content: center; gap: 4px;
}
html.blue-default #inicio .btn-wall.layout1[data-v-cd34d919] > .type-img {
  display: block !important; flex: 0 0 auto; width: 46px !important; height: 22px !important; padding: 0 !important;
}

/* F8.3 — Selo "GAME PROVIDER PREMIUM" + grade de provedores no rodape dos 22
   temas que nao tem o PartView do Blue (assets/selo-premium.js insere o bloco
   acima do texto de licenca). MESMAS mascaras e grade da secao 2.3; a tinta
   segue a cor do tema: --theme-color-500 (skins antigos) ou o token de marca
   dos temas "new-skin" (--ep-*). */
.selo-premium {
  position: relative;
  width: 100%;
  max-width: 24rem;
  height: 300px;
  margin: 1rem auto;
  border-radius: 10px;
  background: url("/images/skin-game-platform.png") center bottom 26px / 88% auto no-repeat;
}
.selo-premium__selo,
.selo-premium__grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: center 26px;
          mask-position: center 26px;
  -webkit-mask-size: auto 84px;
          mask-size: auto 84px;
}
.selo-premium__selo {
  background-color: var(--theme-color-500, var(--ep-color-icon-brand-primary, #3d90de));
  -webkit-mask-image: url("/images/game-provider-premium-mask-trace.svg?v=1");
          mask-image: url("/images/game-provider-premium-mask-trace.svg?v=1");
}
.selo-premium__grade {
  background-color: var(--accent-color-red, #e8474e);
  -webkit-mask-image: url("/images/game-provider-premium-mask-stars.svg?v=1");
          mask-image: url("/images/game-provider-premium-mask-stars.svg?v=1");
}
/* Temas CLAROS: os logos da grade sao claros (Pragmatic, Evoplay, PG em
   branco) e sumiriam no creme — o bloco ganha um cartao escuro. */
html:is(.theme-34, .golden-emerald, .theme-35, .mystlight-blue) .selo-premium {
  background-color: #1b2233;
}
/* So o selo, em cima da grade que o tema ja tem (DarkGreen, GoldenYellow,
   BluePurple e os 6 V02 do Layout1): sem a imagem da grade e sem cartao. */
.selo-premium.selo-premium--so-selo {
  height: 120px;
  margin: .5rem auto 0;
  background: none !important;
}
/* "Parceiro de recarga" sem nenhum logo, so a arte apagada (selo-premium.js). */
.recarga-vazia {
  display: none !important;
}

/* F8.4 — Marinho FIXO (#090f1f, o fundo do Blue) em temas de outra cor:
   barra de abas da Promocao (Layout1 data-v-0dc899ad, Layout3 41be6f87) e
   cabecalho do Centro de Mensagens (Layout1 53976f19, Layout2 antigo
   3b9f603f, Layout3 442a19cc). Medido em 26/09 nos 33 temas.
   --color-bg-300 E o #090f1f no Blue e o fundo-base de cada um dos outros
   (verde #213b10, roxo #262346, pinho #004D37, preto #171616...), entao o
   Blue fica igual. Temas "new-skin" ja pintavam com o token de navegacao
   deles: ele vem PRIMEIRO na cadeia e eles nao mudam. */
ion-toolbar.toolbar-segment:is([data-v-0dc899ad], [data-v-41be6f87]),
ion-toolbar.toolbar-title-default:is([data-v-53976f19], [data-v-3b9f603f], [data-v-442a19cc]) {
  --background: var(--ep-color-background-fill-top-nav-secondary, var(--color-bg-300, #090f1f)) !important;
}
/* BluePurple (purple-light): o fundo-base e lilas-claro e o titulo e branco;
   la o cabecalho usa o roxo do tema. */
html.purple-light ion-toolbar.toolbar-title-default[data-v-3b9f603f] {
  --background: var(--theme-color-900, #541eb8) !important;
}

/* F8.6 — Evento "Fundo de Resgate de Perdas" (Assistance, data-v-d74ef5a9,
   /activity/Assistance/5001@style_1): o modelo traz duas paletas CRAVADAS —
   DAILY azul (#4551de/#111542) e WEEKLY roxo (#be7dff/#25193e) — e saia azul
   nos temas verdes/amarelos. Fora da familia Blue (a referencia do operador),
   tudo passa a sair da cor de marca do tema; o botao de resgate (amarelo ->
   verde) e semantico e fica. color-mix escurece a marca para o fundo, entao
   o texto branco continua legivel inclusive nos temas claros. */
html:not(.blue-default) .ion-padding:is(.DAILY, .WEEKLY) {
  --ev-marca: var(--theme-color-900, var(--ep-color-icon-brand-primary, #4551de));
  --ev-fundo: color-mix(in srgb, var(--ev-marca) 22%, #0b0d14);
}
html:not(.blue-default) .ion-padding:is(.DAILY, .WEEKLY) .allBg[data-v-d74ef5a9] {
  background: linear-gradient(180deg, var(--ev-marca) .25rem, var(--ev-fundo) 18.875rem) !important;
}
html:not(.blue-default) .ion-padding:is(.DAILY, .WEEKLY) .lossMess ion-col[data-v-d74ef5a9] {
  background: var(--ev-fundo) !important;
}
html:not(.blue-default) .ion-padding:is(.DAILY, .WEEKLY) .lossMess .rescue-ioncol-border[data-v-d74ef5a9] {
  border-color: var(--ev-marca) !important;
}
html:not(.blue-default) .ion-padding:is(.DAILY, .WEEKLY) .rescueTable[data-v-d74ef5a9],
html:not(.blue-default) .ion-padding:is(.DAILY, .WEEKLY) .desBottom[data-v-d74ef5a9],
html:not(.blue-default) .ion-padding:is(.DAILY, .WEEKLY) .rule-detail-wrapper[data-v-d74ef5a9] .item-wrap .rule-item {
  color: rgba(255, 255, 255, .72) !important;
}
html:not(.blue-default) .ion-padding:is(.DAILY, .WEEKLY) .rescueTable .table-body .item[data-v-d74ef5a9] {
  background: linear-gradient(90deg, var(--ev-marca), color-mix(in srgb, var(--ev-marca) 45%, #0b0d14)) !important;
}
html:not(.blue-default) .ion-padding:is(.DAILY, .WEEKLY) .desHeader ion-icon[data-v-d74ef5a9],
html:not(.blue-default) .ion-padding:is(.DAILY, .WEEKLY) .rule-detail-wrapper[data-v-d74ef5a9] .ruleHeader {
  color: var(--ev-marca) !important;
}
html:not(.blue-default) .ion-padding:is(.DAILY, .WEEKLY) .desBottom[data-v-d74ef5a9],
html:not(.blue-default) .ion-padding:is(.DAILY, .WEEKLY) .rule-detail-wrapper[data-v-d74ef5a9] .item-wrap {
  border-image-source: linear-gradient(270deg, var(--ev-fundo) .65%, var(--ev-marca) 49.64%, var(--ev-fundo) 100%) !important;
}
html:not(.blue-default) .ion-padding:is(.DAILY, .WEEKLY)[data-v-d74ef5a9] .countdown-wrap .item {
  background: linear-gradient(180deg, var(--ev-marca), var(--ev-fundo)) !important;
}

/* F8.8 — Bloco "Provedores" (partner-wrap, data-v-3e28d23a) nos temas CLAROS:
   a grade skin-game-platform.png tem logos BRANCOS (Pragmatic, Evoplay, PG) e
   eles sumiam no creme/branco. Cartao escuro so atras da grade. */
html:is(.theme-34, .golden-emerald, .theme-35, .mystlight-blue, .purple-light) .partner-wrap[data-v-3e28d23a] ion-img.partner-img {
  background: #1b2233;
  border-radius: .75rem;
  padding: .5rem;
  box-sizing: border-box;
}

/* F8.9 — Poster de provedor SEM arte (nem no sprite do tema nem logo no
   painel), no menu lateral: cartao na cor do tema com as iniciais
   (provider-logos-fix.js marca data-logofix="poster-vazio"). */
i.platform-item-icon[data-logofix="poster-vazio"] {
  position: relative;
  /* Mesmo degrade do cartao com logo (FUNDO_POSTER em provider-logos-fix.js);
     o formato inclinado vem da mascara que o script aplica. */
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ep-color-background-fill-gradients-primary-a, var(--theme-color-700, #3c1497)) 30%, #0b0d14) 0%,
    color-mix(in srgb, var(--ep-color-background-fill-gradients-primary-a, var(--theme-color-700, #3c1497)) 45%, #0b0d14) 45%,
    var(--ep-color-background-fill-gradients-primary-a, var(--theme-color-700, #3c1497)) 100%) !important;
}
i.platform-item-icon[data-logofix="poster-vazio"]::after {
  content: attr(data-inicial);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 12% 34% 0;
  font: 800 1.125rem/1 system-ui, sans-serif;
  font-style: normal;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .92);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
/* ...e na LISTA de provedores do menu lateral, o mesmo caso vira um circulo
   com as iniciais (data-logofix="icone-vazio"). */
i.platform-item-icon[data-logofix="icone-vazio"] {
  display: inline-flex !important;
  transform: scale(.8);
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--theme-color-900, var(--ep-color-icon-brand-primary, #3c1497)) !important;
}
i.platform-item-icon[data-logofix="icone-vazio"]::after {
  content: attr(data-inicial);
  font: 800 .6rem/1 system-ui, sans-serif;
  font-style: normal;
  color: #fff;
}
/* ==========================================================================
   BONUS DE 1o DEPOSITO — Recharge style_18 (data-v-769b885c), atividade 7004
   --------------------------------------------------------------------------
   O layout usa so tokens --ep-*, que os temas do Layout1 (blue, green,
   forest, amber, auroral) e parte do Layout2 (yellow-dark, green-dark,
   purple-light) nao declaram: a tabela ficava sem fundo e sem a faixa de cor.
   Cada cor abaixo tenta o token --ep-* e so depois cai no token do tema
   antigo, entao nos temas novos nada muda. Cor de destaque = a do botao
   principal (--color-primary-800) e texto sobre ela = o do botao
   (--color-primary-btn-text-active): no Forest o --theme-color-500 e igual
   ao fundo, e nos amarelos o texto do botao e escuro.

   A faixa vermelha do valor vem desenhada no top-bg.png. Uma camada com a cor
   do tema em mix-blend-mode: color troca o matiz e mantem o sombreado; o furo
   no mask deixa a moeda dourada intacta. Medidas em rem da imagem
   (780x660 px -> 24.375 x 20.625 rem, 32 px por rem).
   ========================================================================== */
.recharge-content .top-bg[data-v-769b885c]::before {
  content: "";
  position: absolute;
  left: 6.19rem;
  top: 15.31rem;
  width: 11.69rem;
  height: 4.125rem;
  border-radius: 2.07rem;
  background: var(--ep-dynamic-primary, var(--color-primary-800, var(--theme-color-500, #1680DC)));
  mix-blend-mode: color;
  -webkit-mask: radial-gradient(circle 1.5rem at 2.72rem 2.06rem, transparent 97%, #000 100%);
  mask: radial-gradient(circle 1.5rem at 2.72rem 2.06rem, transparent 97%, #000 100%);
  pointer-events: none;
}
.recharge-content .top-bg .title[data-v-769b885c] {
  color: var(--ep-color-text-highlight-white, #fff) !important;
}
.recharge-content .top-bg .myn[data-v-769b885c] {
  color: var(--ep-color-text-highlight, #ffe16b) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
.recharge-content .recharge-top .prize-list[data-v-769b885c] {
  background-color: var(--ep-color-background-fill-surface-raised-L1, var(--color-bg-200, #101629)) !important;
}
.recharge-content .recharge-top .prize-list .prize-top[data-v-769b885c] {
  color: var(--ep-color-text-default, var(--color-text-white-100, #fff)) !important;
}
.recharge-content .recharge-top .prize-list .prize-content[data-v-769b885c],
.recharge-content .recharge-top .prize-list .prize-content .left[data-v-769b885c]:before {
  background: var(--ep-dynamic-primary, var(--color-primary-800, var(--theme-color-500, #1680DC))) !important;
}
.recharge-content .recharge-top .prize-list .prize-content .left[data-v-769b885c] {
  background: var(--ep-color-background-fill-body-default, var(--color-bg-300, #090f1f)) !important;
  color: var(--ep-color-text-default, var(--color-text-white-100, #fff)) !important;
  font-weight: var(--ep-font-weight-medium, 500) !important;
}
.recharge-content .recharge-top .prize-list .prize-content .right[data-v-769b885c] {
  color: var(--ep-color-text-inverse, var(--color-primary-btn-text-active, #fff)) !important;
  font-weight: var(--ep-font-weight-medium, 500) !important;
}
.recharge-content .recharge-top[data-v-769b885c] .desc .ruleHeader .span-cls {
  color: var(--ep-color-text-default, var(--color-text-white-100, #fff)) !important;
}
.recharge-content .recharge-top[data-v-769b885c] .desc .item-wrap {
  background: var(--ep-color-background-fill-surface-lowered, var(--color-bg-200, #101B3C)) !important;
}
.recharge-content .recharge-top[data-v-769b885c] .desc .item-wrap .rule-item {
  color: var(--ep-color-text-weak, var(--color-text-white-60, rgba(255, 255, 255, .6))) !important;
}
/* Tracinhos do titulo "Regras": o PNG vira mascara pintada com a cor do tema. */
.recharge-content .recharge-top[data-v-769b885c] .desc .ruleHeader .img {
  background: var(--ep-dynamic-primary, var(--color-primary-800, var(--theme-color-500, #1680DC))) !important;
  -webkit-mask: url(/assets/tit-bg-CpO9ykx9.png) center / 100% 100% no-repeat;
  mask: url(/assets/tit-bg-CpO9ykx9.png) center / 100% 100% no-repeat;
}
/* BluePurple (purple-light) e claro e nao declara --ep-color-text-*: o texto
   caia no branco sobre lilas. Mesma excecao das regras F7 acima. */
html.purple-light .recharge-content .recharge-top .prize-list .prize-top[data-v-769b885c],
html.purple-light .recharge-content .recharge-top .prize-list .prize-content .left[data-v-769b885c],
html.purple-light .recharge-content .recharge-top[data-v-769b885c] .desc .ruleHeader .span-cls {
  color: var(--color-text-black-100, #2d2d2d) !important;
}
html.purple-light .recharge-content .recharge-top[data-v-769b885c] .desc .item-wrap .rule-item {
  color: #4b5563 !important;
}